document zoom-* utilities

Author: RobinMalfait

src/app/(docs)/docs/index.tsx

@@ -208,6 +208,7 @@ export default {
     ["transform-origin", "/docs/transform-origin"],
     ["transform-style", "/docs/transform-style"],
     ["translate", "/docs/translate"],
+    ["zoom", "/docs/zoom"],
   ] as const,
   Interactivity: [
     ["accent-color", "/docs/accent-color"],

src/docs/theme.mdx

@@ -262,6 +262,14 @@ Defining new theme variables in these namespaces will make new corresponding uti
         Perspective utilities like <code>perspective-near</code>
       </td>
     </tr>
+    <tr>
+      <td className="whitespace-nowrap">
+        <code>--zoom-*</code>
+      </td>
+      <td>
+        Zoom utilities like <code>zoom-compact</code>
+      </td>
+    </tr>
     <tr>
       <td className="whitespace-nowrap">
         <code>--aspect-*</code>

src/docs/zoom.mdx

@@ -0,0 +1,53 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import {
+  CustomizingYourTheme,
+  ResponsiveDesign,
+  TargetingSpecificStates,
+  UsingACustomValue,
+} from "@/components/content.tsx";
+
+export const title = "zoom";
+export const description = "Utilities for scaling elements using zoom.";
+
+<ApiTable
+  rows={[
+    ["zoom-<number>", "zoom: <number>%;"],
+    ["zoom-(<custom-property>)", "zoom: var(<custom-property>);"],
+    ["zoom-[<value>]", "zoom: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `zoom-<number>` utilities like `zoom-75` and `zoom-125` to scale an element using the CSS `zoom` property:
+
+```html
+<!-- [!code classes:zoom-75,zoom-100,zoom-125] -->
+<div class="zoom-75 ...">
+  <!-- ... -->
+</div>
+<div class="zoom-100 ...">
+  <!-- ... -->
+</div>
+<div class="zoom-125 ...">
+  <!-- ... -->
+</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="zoom" value="1.1" />
+
+### Applying on hover
+
+<TargetingSpecificStates property="zoom" defaultClass="zoom-100" featuredClass="zoom-125" />
+
+### Responsive design
+
+<ResponsiveDesign property="zoom" defaultClass="zoom-100" featuredClass="zoom-125" />
+
+## Customizing your theme
+
+<CustomizingYourTheme utility="zoom" name="zoom" customName="compact" customValue="80%" />