@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

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

@@ -0,0 +1,347 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+
+export const title = "border-radius";
+export const description = "Utilities for controlling the border radius of an element.";
+
+<ApiTable
+  rows={[
+    ["rounded", ["border-radius"]],
+    ["rounded-s", ["border-start-start-radius", "border-end-start-radius"]],
+    ["rounded-e", ["border-start-end-radius", "border-end-end-radius"]],
+    ["rounded-t", ["border-top-left-radius", "border-top-right-radius"]],
+    ["rounded-r", ["border-top-right-radius", "border-bottom-right-radius"]],
+    ["rounded-b", ["border-bottom-right-radius", "border-bottom-left-radius"]],
+    ["rounded-l", ["border-top-left-radius", "border-bottom-left-radius"]],
+    ["rounded-ss", ["border-start-start-radius"]],
+    ["rounded-se", ["border-start-end-radius"]],
+    ["rounded-ee", ["border-end-end-radius"]],
+    ["rounded-es", ["border-end-start-radius"]],
+    ["rounded-tl", ["border-top-left-radius"]],
+    ["rounded-tr", ["border-top-right-radius"]],
+    ["rounded-br", ["border-bottom-right-radius"]],
+    ["rounded-bl", ["border-bottom-left-radius"]],
+  ].flatMap(([className, properties]) => [
+    [`${className}-xs`, properties.map((property) => `${property}: var(--radius-xs); /* 0.125rem (2px) */`).join("\n")],
+    [`${className}-sm`, properties.map((property) => `${property}: var(--radius-sm); /* 0.25rem (4px) */`).join("\n")],
+    [`${className}-md`, properties.map((property) => `${property}: var(--radius-md); /* 0.375rem (6px) */`).join("\n")],
+    [`${className}-lg`, properties.map((property) => `${property}: var(--radius-lg); /* 0.5rem (8px) */`).join("\n")],
+    [`${className}-xl`, properties.map((property) => `${property}: var(--radius-xl); /* 0.75rem (12px) */`).join("\n")],
+    [`${className}-2xl`, properties.map((property) => `${property}: var(--radius-2xl); /* 1rem (16px) */`).join("\n")],
+    [
+      `${className}-3xl`,
+      properties.map((property) => `${property}: var(--radius-3xl); /* 1.5rem (24px) */`).join("\n"),
+    ],
+    [`${className}-4xl`, properties.map((property) => `${property}: var(--radius-4xl); /* 2rem (32px) */`).join("\n")],
+    [`${className}-none`, properties.map((property) => `${property}: 0;`).join("\n")],
+    [`${className}-full`, properties.map((property) => `${property}: calc(infinity * 1px);`).join("\n")],
+    [
+      `${className}-(<custom-property>)`,
+      properties.map((property) => `${property}: var(<custom-property>);`).join("\n"),
+    ],
+    [`${className}-[<value>]`, properties.map((property) => `${property}: <value>;`).join("\n")],
+  ])}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `rounded-sm` and `rounded-md` to apply different border radius sizes to an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-sm</p>
+        <div className="size-16 rounded-sm bg-purple-500 p-4"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-md</p>
+        <div className="size-16 rounded-md bg-purple-500 p-4"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-lg</p>
+        <div className="size-16 rounded-lg bg-purple-500 p-4"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-xl</p>
+        <div className="size-16 rounded-xl bg-purple-500 p-4"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:rounded-sm,rounded-md,rounded-lg,rounded-xl] -->
+<div class="rounded-sm ..."></div>
+<div class="rounded-md ..."></div>
+<div class="rounded-lg ..."></div>
+<div class="rounded-xl ..."></div>
+```
+
+</Figure>
+
+### Rounding sides separately
+
+Use utilities like `rounded-t-md` and `rounded-r-lg` to only round one side of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-t-lg</p>
+        <div className="size-16 rounded-t-lg bg-blue-500 p-4"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-r-lg</p>
+        <div className="size-16 rounded-r-lg bg-blue-500 p-4"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-b-lg</p>
+        <div className="size-16 rounded-b-lg bg-blue-500 p-4"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-l-lg</p>
+        <div className="size-16 rounded-l-lg bg-blue-500 p-4"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:rounded-t-lg,rounded-r-lg,rounded-b-lg,rounded-l-lg] -->
+<div class="rounded-t-lg ..."></div>
+<div class="rounded-r-lg ..."></div>
+<div class="rounded-b-lg ..."></div>
+<div class="rounded-l-lg ..."></div>
+```
+
+</Figure>
+
+### Rounding corners separately
+
+Use utilities like `rounded-tr-md` and `rounded-tl-lg` utilities to only round one corner of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-tl-lg</p>
+        <div className="size-16 rounded-tl-lg bg-pink-500 p-4"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-tr-lg</p>
+        <div className="size-16 rounded-tr-lg bg-pink-500 p-4"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-br-lg</p>
+        <div className="size-16 rounded-br-lg bg-pink-500 p-4"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-bl-lg</p>
+        <div className="size-16 rounded-bl-lg bg-pink-500 p-4"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:rounded-tl-lg,rounded-tr-lg,rounded-br-lg,rounded-bl-lg] -->
+<div class="rounded-tl-lg ..."></div>
+<div class="rounded-tr-lg ..."></div>
+<div class="rounded-br-lg ..."></div>
+<div class="rounded-bl-lg ..."></div>
+```
+
+</Figure>
+
+### Using logical properties
+
+Use utilities like `rounded-s-md` and `rounded-se-xl` to set the border radius using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to the appropriate corners based on the text direction:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-2 place-items-center gap-x-4">
+      <div className="flex flex-col items-start gap-y-4" dir="ltr">
+        <p className="text-sm font-medium">Left-to-right</p>
+        <div className="size-16 rounded-s-lg bg-blue-500 p-4"></div>
+      </div>
+      <div className="flex flex-col items-start gap-y-4" dir="rtl">
+        <p className="text-sm font-medium">Right-to-left</p>
+        <div className="size-16 rounded-s-lg bg-blue-500 p-4"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:rounded-s-lg] -->
+<!-- [!code word:dir="ltr"] -->
+<!-- [!code word:dir="rtl"] -->
+<div dir="ltr">
+  <div class="rounded-s-lg ..."></div>
+</div>
+
+<div dir="rtl">
+  <div class="rounded-s-lg ..."></div>
+</div>
+```
+
+</Figure>
+
+Here are all the available border radius logical property utilities and their physical property equivalents in both LTR and RTL modes.
+
+{
+
+<table>
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Left-to-right</th>
+      <th>Right-to-left</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>rounded-s-*</code>
+      </td>
+      <td>
+        <code>rounded-l-*</code>
+      </td>
+      <td>
+        <code>rounded-r-*</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>rounded-e-*</code>
+      </td>
+      <td>
+        <code>rounded-r-*</code>
+      </td>
+      <td>
+        <code>rounded-l-*</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>rounded-ss-*</code>
+      </td>
+      <td>
+        <code>rounded-tl-*</code>
+      </td>
+      <td>
+        <code>rounded-tr-*</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>rounded-se-*</code>
+      </td>
+      <td>
+        <code>rounded-tr-*</code>
+      </td>
+      <td>
+        <code>rounded-tl-*</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>rounded-es-*</code>
+      </td>
+      <td>
+        <code>rounded-bl-*</code>
+      </td>
+      <td>
+        <code>rounded-br-*</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>rounded-ee-*</code>
+      </td>
+      <td>
+        <code>rounded-br-*</code>
+      </td>
+      <td>
+        <code>rounded-bl-*</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+}
+
+For more control, you can also use the [LTR and RTL modifiers](/docs/hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.
+
+### Creating pill buttons
+
+Use the `rounded-full` utility to create pill buttons:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center gap-4 text-center text-sm leading-6 font-bold text-white">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-full</p>
+        <button className="rounded-full bg-cyan-500 px-4 py-2 text-sm font-semibold text-white">Save Changes</button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:rounded-full] -->
+<button class="rounded-full ...">Save Changes</button>
+```
+
+</Figure>
+
+### Removing the border radius
+
+Use the `rounded-none` utility to remove an existing border radius from an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center gap-4 text-center text-sm leading-6 font-bold text-white">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">rounded-none</p>
+        <button className="rounded-none bg-sky-500 px-4 py-2 text-sm font-semibold text-white">Save Changes</button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:rounded-none] -->
+<button class="rounded-none ...">Save Changes</button>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="rounded" name="border radius" value="2vw" variable="radius" />
+
+### Responsive design
+
+<ResponsiveDesign property="border-radius" defaultClass="rounded" featuredClass="rounded-lg" />
+
+## Customizing your theme
+
+<CustomizingYourTheme utility="rounded" themeKey="radius" name="border radius" customName="5xl" customValue="3rem" />

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

@@ -0,0 +1,117 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+
+export const title = "border-spacing";
+export const description = "Utilities for controlling the spacing between table borders.";
+
+<ApiTable
+  rows={[
+    ["border-spacing-<number>", "border-spacing: calc(var(--spacing) * <number>);"],
+    ["border-spacing-(<custom-property>)", "border-spacing: var(<custom-property>);"],
+    ["border-spacing-[<value>]", "border-spacing: <value>;"],
+    ["border-spacing-x-<number>", "border-spacing: calc(var(--spacing) * <number>) var(--tw-border-spacing-y);"],
+    ["border-spacing-x-(<custom-property>)", "border-spacing: var(<custom-property>) var(--tw-border-spacing-y);"],
+    ["border-spacing-x-[<value>]", "border-spacing: <value> var(--tw-border-spacing-y);"],
+    ["border-spacing-y-<number>", "border-spacing: var(--tw-border-spacing-x) calc(var(--spacing) * <number>);"],
+    ["border-spacing-y-(<custom-property>)", "border-spacing: var(--tw-border-spacing-x) var(<custom-property>);"],
+    ["border-spacing-y-[<value>]", "border-spacing: var(--tw-border-spacing-x) <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `border-spacing-<number>` utilities like `border-spacing-2` and `border-spacing-x-3` to control the space between the borders of table cells with [separate borders](/docs/border-collapse#separating-table-borders):
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="px-4 py-8 sm:px-8">
+      <table className="w-full border-separate border-spacing-2 border 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="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
+              State
+            </th>
+            <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
+              City
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Indiana
+            </td>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Indianapolis
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">Ohio</td>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Columbus
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Michigan
+            </td>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Detroit
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border-spacing-2] -->
+<table class="border-separate border-spacing-2 border border-gray-400 dark:border-gray-500">
+  <thead>
+    <tr>
+      <th class="border border-gray-300 dark:border-gray-600">State</th>
+      <th class="border border-gray-300 dark:border-gray-600">City</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="border border-gray-300 dark:border-gray-700">Indiana</td>
+      <td class="border border-gray-300 dark:border-gray-700">Indianapolis</td>
+    </tr>
+    <tr>
+      <td class="border border-gray-300 dark:border-gray-700">Ohio</td>
+      <td class="border border-gray-300 dark:border-gray-700">Columbus</td>
+    </tr>
+    <tr>
+      <td class="border border-gray-300 dark:border-gray-700">Michigan</td>
+      <td class="border border-gray-300 dark:border-gray-700">Detroit</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="table" utility="border-spacing" value="7px" name="border spacing" />
+
+### Responsive design
+
+<ResponsiveDesign
+  element="table"
+  property="border-spacing"
+  defaultClass="border-spacing-2"
+  featuredClass="border-spacing-4"
+/>
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="border-spacing" />

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

@@ -0,0 +1,129 @@
+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 = "border-style";
+export const description = "Utilities for controlling the style of an element's borders.";
+
+<ApiTable
+  rows={[
+    ["border-solid", "border-style: solid;"],
+    ["border-dashed", "border-style: dashed;"],
+    ["border-dotted", "border-style: dotted;"],
+    ["border-double", "border-style: double;"],
+    ["border-hidden", "border-style: hidden;"],
+    ["border-none", "border-style: none;"],
+    ["divide-solid", "& > :not(:last-child) {\n  border-style: solid;\n}"],
+    ["divide-dashed", "& > :not(:last-child) {\n  border-style: dashed;\n}"],
+    ["divide-dotted", "& > :not(:last-child) {\n  border-style: dotted;\n}"],
+    ["divide-double", "& > :not(:last-child) {\n  border-style: double;\n}"],
+    ["divide-hidden", "& > :not(:last-child) {\n  border-style: hidden;\n}"],
+    ["divide-none", "& > :not(:last-child) {\n  border-style: none;\n}"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `border-solid` and `border-dotted` to control an element's border style:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1 gap-x-4 gap-y-8 text-center text-sm leading-6 font-bold text-white sm:grid-cols-2">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-solid</p>
+        <button className="rounded-md border-2 border-solid border-indigo-500 bg-white px-4 py-2 text-sm font-semibold text-gray-700 dark:border-sky-500 dark:bg-gray-700 dark:text-white">
+          Button A
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-dashed</p>
+        <button className="rounded-md border-2 border-dashed border-indigo-500 bg-white px-4 py-2 text-sm font-semibold text-gray-700 dark:border-sky-500 dark:bg-gray-700 dark:text-white">
+          Button A
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-dotted</p>
+        <button className="rounded-md border-2 border-dotted border-indigo-500 bg-white px-4 py-2 text-sm font-semibold text-gray-700 dark:border-sky-500 dark:bg-gray-700 dark:text-white">
+          Button A
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">border-double</p>
+        <button className="rounded-md border-4 border-double border-indigo-500 bg-white px-4 py-2 text-sm font-semibold text-gray-700 dark:border-sky-500 dark:bg-gray-700 dark:text-white">
+          Button A
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border-solid,border-dashed,border-dotted,border-double] -->
+<div class="border-2 border-solid ..."></div>
+<div class="border-2 border-dashed ..."></div>
+<div class="border-2 border-dotted ..."></div>
+<div class="border-4 border-double ..."></div>
+```
+
+</Figure>
+
+### Removing a border
+
+Use the `border-none` utility to remove an existing border from an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center gap-4 text-center text-sm leading-6 font-bold text-white">
+      <button className="rounded-md border-2 border-none border-indigo-500 bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-700 dark:bg-gray-700 dark:text-white">
+        Save Changes
+      </button>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border-none] -->
+<button class="border-none ...">Save Changes</button>
+```
+
+</Figure>
+
+This is most commonly used to remove a border style that was applied at a smaller breakpoint.
+
+### Setting the divider style
+
+Use utilities like `divide-dashed` and `divide-dotted` to control the border style between child elements:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto grid max-w-lg grid-cols-3 divide-x-3 divide-dashed divide-indigo-500 rounded-lg text-center font-mono text-sm leading-6 font-bold text-gray-400">
+      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">01</div>
+      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">02</div>
+      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">03</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:divide-dashed] -->
+<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="border-style" defaultClass="border-solid" featuredClass="border-dotted" />