@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/user-select.mdx

@@ -0,0 +1,114 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "user-select";
+export const description = "Utilities for controlling whether the user can select text in an element.";
+
+<ApiTable
+  rows={[
+    ["select-none", "user-select: none;"],
+    ["select-text", "user-select: text;"],
+    ["select-all", "user-select: all;"],
+    ["select-auto", "user-select: auto;"],
+  ]}
+/>
+
+## Examples
+
+### Disabling text selection
+
+Use the `select-none` utility to prevent selecting text in an element and its children:
+
+<Figure hint="Try selecting the text to see the expected behavior">
+
+<Example>
+  {
+    <div className="flex justify-center">
+      <div className="dark:highlight-white/5 inline-flex rounded-lg bg-white px-4 py-3 text-center font-sans text-sm font-semibold text-gray-900 ring-1 ring-gray-900/5 select-none dark:bg-gray-800 dark:text-gray-200 dark:ring-0">
+        The quick brown fox jumps over the lazy dog.
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:select-none] -->
+<div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>
+```
+
+</Figure>
+
+### Allowing text selection
+
+Use the `select-text` utility to allow selecting text in an element and its children:
+
+<Figure hint="Try selecting the text to see the expected behavior">
+
+<Example>
+  {
+    <div className="flex justify-center">
+      <div className="dark:highlight-white/5 inline-flex rounded-lg bg-white px-4 py-3 text-center font-sans text-sm font-semibold text-gray-900 ring-1 ring-gray-900/5 select-text dark:bg-gray-800 dark:text-gray-200 dark:ring-0">
+        The quick brown fox jumps over the lazy dog.
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:select-text] -->
+<div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>
+```
+
+</Figure>
+
+### Selecting all text in one click
+
+Use the `select-all` utility to automatically select all the text in an element when a user clicks:
+
+<Figure hint="Try clicking the text to see the expected behavior">
+
+<Example>
+  {
+    <div className="flex justify-center">
+      <div className="dark:highlight-white/5 inline-flex rounded-lg bg-white px-4 py-3 text-center font-sans text-sm font-semibold text-gray-900 ring-1 ring-gray-900/5 select-all dark:bg-gray-800 dark:text-gray-200 dark:ring-0">
+        The quick brown fox jumps over the lazy dog.
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:select-all] -->
+<div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>
+```
+
+</Figure>
+
+### Using auto select behavior
+
+Use the `select-auto` utility to use the default browser behavior for selecting text:
+
+<Figure hint="Try selecting the text to see the expected behavior">
+
+<Example>
+  {
+    <div className="flex justify-center">
+      <div className="dark:highlight-white/5 inline-flex rounded-lg bg-white px-4 py-3 text-center font-sans text-sm font-semibold text-gray-900 ring-1 ring-gray-900/5 select-auto dark:bg-gray-800 dark:text-gray-200 dark:ring-0">
+        The quick brown fox jumps over the lazy dog.
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:select-auto] -->
+<div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="user-select" defaultClass="select-none" featuredClass="select-all" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/vertical-align.mdx

@@ -0,0 +1,194 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "vertical-align";
+export const description = "Utilities for controlling the vertical alignment of an inline or table-cell box.";
+
+<ApiTable
+  rows={[
+    ["align-baseline", "vertical-align: baseline;"],
+    ["align-top", "vertical-align: top;"],
+    ["align-middle", "vertical-align: middle;"],
+    ["align-bottom", "vertical-align: bottom;"],
+    ["align-text-top", "vertical-align: text-top;"],
+    ["align-text-bottom", "vertical-align: text-bottom;"],
+    ["align-sub", "vertical-align: sub;"],
+    ["align-super", "vertical-align: super;"],
+    ["align-(<custom-property>)", "vertical-align: var(<custom-property>);"],
+    ["align-[<value>]", "vertical-align: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Aligning to baseline
+
+Use the `align-baseline` utility to align the baseline of an element with the baseline of its parent:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto max-w-md leading-none">
+      <span className="inline-block h-8 w-0 align-baseline">
+        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
+        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
+      </span>
+      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
+        The quick brown fox jumps over the lazy dog.
+      </span>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:align-baseline] -->
+<span class="inline-block align-baseline">The quick brown fox...</span>
+```
+
+</Figure>
+
+### Aligning to top
+
+Use the `align-top` utility to align the top of an element and its descendants with the top of the entire line:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto max-w-md leading-none">
+      <span className="inline-block h-8 w-0 align-top">
+        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
+        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
+      </span>
+      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
+        The quick brown fox jumps over the lazy dog.
+      </span>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:align-top] -->
+<span class="inline-block align-top">The quick brown fox...</span>
+```
+
+</Figure>
+
+### Aligning to middle
+
+Use the `align-middle` utility to align the middle of an element with the baseline plus half the x-height of the parent:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto max-w-md leading-none">
+      <span className="inline-block h-8 w-0 align-middle">
+        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
+        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
+      </span>
+      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
+        The quick brown fox jumps over the lazy dog.
+      </span>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:align-middle] -->
+<span class="inline-block align-middle">The quick brown fox...</span>
+```
+
+</Figure>
+
+### Aligning to bottom
+
+Use the `align-bottom` utility to align the bottom of an element and its descendants with the bottom of the entire line:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto max-w-md leading-none">
+      <span className="inline-block h-8 w-0 align-bottom">
+        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
+        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
+      </span>
+      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
+        The quick brown fox jumps over the lazy dog.
+      </span>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:align-bottom] -->
+<span class="inline-block align-bottom">The quick brown fox...</span>
+```
+
+</Figure>
+
+### Aligning to parent top
+
+Use the `align-text-top` utility to align the top of an element with the top of the parent element's font:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto max-w-md leading-none">
+      <span className="inline-block h-8 w-0 align-text-top">
+        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
+        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
+      </span>
+      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
+        The quick brown fox jumps over the lazy dog.
+      </span>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:align-text-top] -->
+<span class="inline-block align-text-top">The quick brown fox...</span>
+```
+
+</Figure>
+
+### Aligning to parent bottom
+
+Use the `align-text-bottom` utility to align the bottom of an element with the bottom of the parent element's font:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto max-w-md leading-none">
+      <span className="inline-block h-8 w-0 align-text-bottom">
+        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
+        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
+      </span>
+      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
+        The quick brown fox jumps over the lazy dog.
+      </span>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:align-text-bottom] -->
+<span class="inline-block align-text-bottom">The quick brown fox...</span>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="span" utility="align" name="vertical alignment" value="4px" variable="alignment" />
+
+### Responsive design
+
+<ResponsiveDesign element="span" property="vertical-align" defaultClass="align-middle" featuredClass="align-top" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/visibility.mdx

@@ -0,0 +1,287 @@
+import { Stripes } from "@/components/stripes.tsx";
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "visibility";
+export const description = "Utilities for controlling the visibility of an element.";
+
+<ApiTable
+  rows={[
+    ["visible", "visibility: visible;"],
+    ["invisible", "visibility: hidden;"],
+    ["collapse", "visibility: collapse;"],
+  ]}
+/>
+
+## Examples
+
+### Making elements invisible
+
+Use the `invisible` utility to hide an element, but still maintain its place in the document, affecting the layout of other elements:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid grid-cols-3 gap-4 font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex items-center justify-center rounded-lg bg-cyan-500 p-4">01</div>
+        <div className="invisible flex items-center justify-center rounded-lg bg-cyan-500 p-4">02</div>
+        <div className="flex items-center justify-center rounded-lg bg-cyan-500 p-4">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:invisible] -->
+<div class="grid grid-cols-3 gap-4">
+  <div>01</div>
+  <div class="invisible ...">02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+To completely remove an element from the document, use the [display](/docs/display#hidden) property instead.
+
+### Collapsing elements
+
+Use the `collapse` utility to hide table rows, row groups, columns, and column groups as if they were set to `display: none`, but without impacting the size of other rows and columns:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="py-8">
+      <div className="mb-3 pl-4 text-sm font-medium text-gray-500 dark:text-gray-400">Showing all rows</div>
+      <table className="w-full border-collapse border-y border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800">
+        <thead className="bg-gray-50 dark:bg-gray-700">
+          <tr>
+            <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200">
+              Invoice #
+            </th>
+            <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200">
+              Client
+            </th>
+            <th className="border border-gray-300 px-4 py-3 text-right font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200">
+              Amount
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              #100
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              Pendant Publishing
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              $2,000.00
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              #101
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              Kruger Industrial Smoothing
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              $545.00
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              #102
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              J. Peterman
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              $10,000.25
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div className="mt-10 mb-3 pl-4 text-sm font-medium text-gray-500 dark:text-gray-400">
+        Hiding a row using <code className="text-xs text-gray-700 dark:text-gray-300">`collapse`</code>
+      </div>
+      <table className="w-full border-collapse border-y border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800">
+        <thead className="bg-gray-50 dark:bg-gray-700">
+          <tr>
+            <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200">
+              Invoice #
+            </th>
+            <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200">
+              Client
+            </th>
+            <th className="border border-gray-300 px-4 py-3 text-right font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200">
+              Amount
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              #100
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              Pendant Publishing
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              $2,000.00
+            </td>
+          </tr>
+          <tr className="collapse">
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              #101
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              Kruger Industrial Smoothing
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              $545.00
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              #102
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              J. Peterman
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              $10,000.25
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div className="mt-10 mb-3 pl-4 text-sm font-medium text-gray-500 dark:text-gray-400">
+        Hiding a row using <code className="text-xs text-gray-700 dark:text-gray-300">`hidden`</code>
+      </div>
+      <table className="w-full border-collapse border-y border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800">
+        <thead className="bg-gray-50 dark:bg-gray-700">
+          <tr>
+            <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200">
+              Invoice #
+            </th>
+            <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200">
+              Client
+            </th>
+            <th className="border border-gray-300 px-4 py-3 text-right font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200">
+              Amount
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              #100
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              Pendant Publishing
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              $2,000.00
+            </td>
+          </tr>
+          <tr className="hidden">
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              #101
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              Kruger Industrial Smoothing
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              $545.00
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              #102
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              J. Peterman
+            </td>
+            <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400">
+              $10,000.25
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:collapse] -->
+<table>
+  <thead>
+    <tr>
+      <th>Invoice #</th>
+      <th>Client</th>
+      <th>Amount</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>#100</td>
+      <td>Pendant Publishing</td>
+      <td>$2,000.00</td>
+    </tr>
+    <tr class="collapse">
+      <td>#101</td>
+      <td>Kruger Industrial Smoothing</td>
+      <td>$545.00</td>
+    </tr>
+    <tr>
+      <td>#102</td>
+      <td>J. Peterman</td>
+      <td>$10,000.25</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+</Figure>
+
+This makes it possible to dynamically toggle rows and columns without affecting the table layout.
+
+### Making elements visible
+
+Use the `visible` utility to make an element visible:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-3 gap-4 font-mono text-sm leading-6 font-bold text-white">
+      <div className="flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">01</div>
+      <div className="visible flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">02</div>
+      <div className="flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">03</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:visible] -->
+<div class="grid grid-cols-3 gap-4">
+  <div>01</div>
+  <div class="visible ...">02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+This is mostly useful for undoing the `invisible` utility at different screen sizes.
+
+### Responsive design
+
+<ResponsiveDesign property="visibility" defaultClass="visible" featuredClass="invisible" />