@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,212 @@
+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 = "table-layout";
+export const description = "Utilities for controlling the table layout algorithm.";
+
+<ApiTable
+  rows={[
+    ["table-auto", "table-layout: auto;"],
+    ["table-fixed", "table-layout: fixed;"],
+  ]}
+/>
+
+## Examples
+
+### Sizing columns automatically
+
+Use the `table-auto` utility to automatically size table columns to fit the contents of its cells:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="my-8 overflow-hidden">
+      <table className="w-full table-auto border-collapse text-sm">
+        <thead>
+          <tr>
+            <th className="border-b border-gray-200 p-4 pt-0 pb-3 pl-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200">
+              Song
+            </th>
+            <th className="border-b border-gray-200 p-4 pt-0 pb-3 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200">
+              Artist
+            </th>
+            <th className="border-b border-gray-200 p-4 pt-0 pr-8 pb-3 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200">
+              Year
+            </th>
+          </tr>
+        </thead>
+        <tbody className="bg-white dark:bg-gray-800">
+          <tr>
+            <td className="border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              The Sliding Mr. Bones (Next Stop, Pottersville)
+            </td>
+            <td className="border-b border-gray-100 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Malcolm Lockyer
+            </td>
+            <td className="border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              1961
+            </td>
+          </tr>
+          <tr>
+            <td className="border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Witchy Woman
+            </td>
+            <td className="border-b border-gray-100 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              The Eagles
+            </td>
+            <td className="border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              1972
+            </td>
+          </tr>
+          <tr>
+            <td className="border-b border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Shining Star
+            </td>
+            <td className="border-b border-gray-200 p-4 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Earth, Wind, and Fire
+            </td>
+            <td className="border-b border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              1975
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:table-auto] -->
+<table class="table-auto">
+  <thead>
+    <tr>
+      <th>Song</th>
+      <th>Artist</th>
+      <th>Year</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
+      <td>Malcolm Lockyer</td>
+      <td>1961</td>
+    </tr>
+    <tr>
+      <td>Witchy Woman</td>
+      <td>The Eagles</td>
+      <td>1972</td>
+    </tr>
+    <tr>
+      <td>Shining Star</td>
+      <td>Earth, Wind, and Fire</td>
+      <td>1975</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+</Figure>
+
+### Using fixed column widths
+
+Use the `table-fixed` utility to ignore the content of the table cells and use fixed widths for each column:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="my-8 overflow-hidden">
+      <table className="w-full table-fixed border-collapse text-sm">
+        <thead>
+          <tr>
+            <th className="border-b border-gray-200 p-4 pt-0 pb-3 pl-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200">
+              Song
+            </th>
+            <th className="border-b border-gray-200 p-4 pt-0 pb-3 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200">
+              Artist
+            </th>
+            <th className="border-b border-gray-200 p-4 pt-0 pr-8 pb-3 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200">
+              Year
+            </th>
+          </tr>
+        </thead>
+        <tbody className="bg-white dark:bg-gray-800">
+          <tr>
+            <td className="border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              The Sliding Mr. Bones (Next Stop, Pottersville)
+            </td>
+            <td className="border-b border-gray-100 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Malcolm Lockyer
+            </td>
+            <td className="border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              1961
+            </td>
+          </tr>
+          <tr>
+            <td className="border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Witchy Woman
+            </td>
+            <td className="border-b border-gray-100 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              The Eagles
+            </td>
+            <td className="border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              1972
+            </td>
+          </tr>
+          <tr>
+            <td className="border-b border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Shining Star
+            </td>
+            <td className="border-b border-gray-200 p-4 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Earth, Wind, and Fire
+            </td>
+            <td className="border-b border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              1975
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:table-fixed] -->
+<table class="table-fixed">
+  <thead>
+    <tr>
+      <th>Song</th>
+      <th>Artist</th>
+      <th>Year</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
+      <td>Malcolm Lockyer</td>
+      <td>1961</td>
+    </tr>
+    <tr>
+      <td>Witchy Woman</td>
+      <td>The Eagles</td>
+      <td>1972</td>
+    </tr>
+    <tr>
+      <td>Shining Star</td>
+      <td>Earth, Wind, and Fire</td>
+      <td>1975</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+</Figure>
+
+You can manually set the widths for some columns and the rest of the available width will be divided evenly amongst columns without an explicit width. The widths set in the first row will set the column width for the whole table.
+
+### Responsive design
+
+<ResponsiveDesign property="table-layout" defaultClass="table-auto" featuredClass="table-fixed" />

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

@@ -0,0 +1,162 @@
+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 = "text-align";
+export const description = "Utilities for controlling the alignment of text.";
+
+<ApiTable
+  rows={[
+    ["text-left", "text-align: left;"],
+    ["text-center", "text-align: center;"],
+    ["text-right", "text-align: right;"],
+    ["text-justify", "text-align: justify;"],
+    ["text-start", "text-align: start;"],
+    ["text-end", "text-align: end;"],
+  ]}
+/>
+
+## Examples
+
+### Left aligning text
+
+Use the `text-left` utility to left align the text of an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="px-4 sm:px-0">
+      <div className="mx-auto max-w-lg p-8 text-sm/6 text-gray-900 dark:text-gray-200">
+        <p className="text-left">
+          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
+          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-left] -->
+<p class="text-left">So I started to walk into the water...</p>
+```
+
+</Figure>
+
+### Right aligning text
+
+Use the `text-right` utility to right align the text of an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="px-4 sm:px-0">
+      <div className="mx-auto max-w-lg p-8 text-sm/6 text-gray-900 dark:text-gray-200">
+        <p className="text-right">
+          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
+          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-right] -->
+<p class="text-right">So I started to walk into the water...</p>
+```
+
+</Figure>
+
+### Centering text
+
+Use the `text-center` utility to center the text of an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="px-4 sm:px-0">
+      <div className="mx-auto max-w-lg p-8 text-sm/6 text-gray-900 dark:text-gray-200">
+        <p className="text-center">
+          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
+          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-center] -->
+<p class="text-center">So I started to walk into the water...</p>
+```
+
+</Figure>
+
+### Justifying text
+
+Use the `text-justify` utility to justify the text of an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="px-4 sm:px-0">
+      <div className="mx-auto max-w-lg p-8 text-sm/6 text-gray-900 dark:text-gray-200">
+        <p className="text-justify">
+          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
+          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-justify] -->
+<p class="text-justify">So I started to walk into the water...</p>
+```
+
+</Figure>
+
+### Using logical properties
+
+Use the `text-start` and `text-end` utilities, which use [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts) to map to either the left or right side based on the text direction:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="px-4 sm:px-0" dir="rtl" lang="ar">
+      <div className="mx-auto max-w-lg p-8 text-sm/6 text-gray-900 dark:text-gray-200">
+        <p className="text-end">
+          بدأتُ أسير نحو الماء. لن أكذب عليكم يا رفاق، كنتُ مرعوبًا. لكنني واصلتُ المسير، وبينما كنتُ أشق طريقي عبر
+          الأمواج، غمرني هدوءٌ غريب. لا أعلم إن كان ذلك تدخّلًا إلهيًا أم صلة قرابة بين جميع الكائنات الحية، لكنني أقول
+          لك يا جيري، في تلك اللحظة، كنتُ عالم أحياء بحرية.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:dir="rtl"] -->
+<!-- [!code classes:text-end] -->
+<div dir="rtl" lang="ar">
+  <p class="text-end">فبدأت بالسير نحو الماء...</p>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="text-align" defaultClass="text-left" featuredClass="text-center" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/text-decoration-color.mdx

@@ -0,0 +1,155 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import {
+  CustomizingYourThemeColors,
+  ResponsiveDesign,
+  TargetingSpecificStates,
+  UsingACustomValue,
+} from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import colors from "./utils/colors";
+
+export const title = "text-decoration-color";
+export const description = "Utilities for controlling the color of text decorations.";
+
+<ApiTable
+  rows={[
+    ["decoration-inherit", "text-decoration-color: inherit;"],
+    ["decoration-current", "text-decoration-color: currentColor;"],
+    ["decoration-transparent", "text-decoration-color: transparent;"],
+    ...Object.entries(colors).map(([name, value]) => [
+      `decoration-${name}`,
+      `text-decoration-color: var(--color-${name}); /* ${value} */`,
+    ]),
+    ["decoration-(<custom-property>)", "text-decoration-color: var(<custom-property>);"],
+    ["decoration-[<value>]", "text-decoration-color: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `decoration-sky-500` and `decoration-pink-500` to change the [text decoration](/docs/text-decoration-line) color of an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-sm gap-4 p-8 text-sm/6 text-gray-900 dark:text-gray-200">
+      I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at{" "}
+      <a href="#" className="font-bold underline decoration-sky-500 decoration-2 dark:text-gray-200">
+        My Company, Inc
+      </a>
+      . Outside of work, I like to{" "}
+      <a href="#" className="font-bold underline decoration-pink-500 decoration-2 dark:text-gray-200">
+        watch pod-racing
+      </a>{" "}
+      and have{" "}
+      <a href="#" className="font-bold underline decoration-indigo-500 decoration-2 dark:text-gray-200">
+        light-saber
+      </a>{" "}
+      fights.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:decoration-sky-500,decoration-pink-500,decoration-indigo-500] -->
+<!-- prettier-ignore -->
+<p>
+  I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings
+  at <a class="underline decoration-sky-500">My Company, Inc</a>. Outside
+  of work, I like to <a class="underline decoration-pink-500">watch pod-racing</a>
+  and have <a class="underline decoration-indigo-500">light-saber</a> fights.
+</p>
+```
+
+</Figure>
+
+### Changing the opacity
+
+Use the color opacity modifier to control the text decoration color opacity of an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-sm gap-4 p-8 text-sm/6 text-gray-900 dark:text-gray-200">
+      I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at{" "}
+      <a href="#" className="font-bold underline decoration-sky-500/30 decoration-2 dark:text-gray-200">
+        My Company, Inc
+      </a>
+      . Outside of work, I like to{" "}
+      <a href="#" className="font-bold underline decoration-pink-500/30 decoration-2 dark:text-gray-200">
+        watch pod-racing
+      </a>{" "}
+      and have{" "}
+      <a href="#" className="font-bold underline decoration-indigo-500/30 decoration-2 dark:text-gray-200">
+        light-saber
+      </a>{" "}
+      fights.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code word:\/30] -->
+<!-- prettier-ignore -->
+<p>
+  I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings
+  at <a class="underline decoration-sky-500/30">My Company, Inc</a>. Outside
+  of work, I like to <a class="underline decoration-pink-500/30">watch pod-racing</a>
+  and have <a class="underline decoration-indigo-500/30">light-saber</a> fights.
+</p>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="p" utility="decoration" name="text decoration color" value="#50d71e" variable="color" />
+
+### Applying on hover
+
+<TargetingSpecificStates property="text-decoration-color">
+
+<Figure hint="Hover over the text to see the expected behavior">
+
+<Example>
+  {
+    <div className="text-center text-lg font-medium text-gray-900 no-underline dark:text-gray-200">
+      The{" "}
+      <a
+        href="https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog"
+        target="blank"
+        className="underline hover:decoration-pink-500"
+      >
+        quick brown fox
+      </a>{" "}
+      jumps over the lazy dog.
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:hover:decoration-pink-500] -->
+<p>The <a href="..." class="underline hover:decoration-pink-500 ...">quick brown fox</a> jumps over the lazy dog.</p>
+```
+
+</Figure>
+
+</TargetingSpecificStates>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="p"
+  property="text-decoration-color"
+  defaultClass="underline decoration-sky-600"
+  featuredClass="decoration-blue-400"
+/>
+
+## Customizing your theme
+
+<CustomizingYourThemeColors element="p" utility="decoration" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/text-decoration-line.mdx

@@ -0,0 +1,143 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, TargetingSpecificStates } from "@/components/content.tsx";
+
+export const title = "text-decoration-line";
+export const description = "Utilities for controlling the decoration of text.";
+
+<ApiTable
+  rows={[
+    ["underline", "text-decoration-line: underline;"],
+    ["overline", "text-decoration-line: overline;"],
+    ["line-through", "text-decoration-line: line-through;"],
+    ["no-underline", "text-decoration-line: none;"],
+  ]}
+/>
+
+## Examples
+
+### Underling text
+
+Use the `underline` utility to add an underline to the text of an element:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 underline dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:underline] -->
+<p class="underline">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Adding an overline to text
+
+Use the `overline` utility to add an overline to the text of an element:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 overline dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overline] -->
+<p class="overline">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Adding a line through text
+
+Use the `line-through` utility to add a line through the text of an element:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 line-through dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:line-through] -->
+<p class="line-through">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Removing a line from text
+
+Use the `no-underline` utility to remove a line from the text of an element:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 no-underline dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:no-underline] -->
+<p class="no-underline">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Applying on hover
+
+<TargetingSpecificStates property="text-decoration-line">
+
+<Figure hint="Hover over the text to see the expected behavior">
+
+<Example>
+  {
+    <div className="text-center text-lg font-medium text-gray-900 no-underline dark:text-gray-200">
+      The{" "}
+      <a
+        href="https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog"
+        target="blank"
+        className="text-sky-600 no-underline hover:underline dark:text-sky-400"
+      >
+        quick brown fox
+      </a>{" "}
+      jumps over the lazy dog.
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:hover:underline] -->
+<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>
+```
+
+</Figure>
+
+</TargetingSpecificStates>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="a"
+  elementAttributes={{ href: "..." }}
+  property="text-decoration-line"
+  defaultClass="no-underline"
+  featuredClass="underline"
+/>