@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,344 @@
+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";
+import dedent from "dedent";
+
+export const title = "border-width";
+export const description = "Utilities for controlling the width of an element's borders.";
+
+<ApiTable
+  rows={[
+    ["border", "border-width: 1px;"],
+    ["border-<number>", "border-width: <number>px;"],
+    ["border-(length:<custom-property>)", "border-width: var(<custom-property>);"],
+    ["border-[<value>]", "border-width: <value>;"],
+    ["border-x", "border-inline-width: 1px;"],
+    ["border-x-<number>", "border-inline-width: <number>px;"],
+    ["border-x-(length:<custom-property>)", "border-inline-width: var(<custom-property>);"],
+    ["border-x-[<value>]", "border-inline-width: <value>;"],
+    ["border-y", "border-block-width: 1px;"],
+    ["border-y-<number>", "border-block-width: <number>px;"],
+    ["border-y-(length:<custom-property>)", "border-block-width: var(<custom-property>);"],
+    ["border-y-[<value>]", "border-block-width: <value>;"],
+    ["border-s", "border-inline-start-width: 1px;"],
+    ["border-s-<number>", "border-inline-start-width: <number>px;"],
+    ["border-s-(length:<custom-property>)", "border-inline-start-width: var(<custom-property>);"],
+    ["border-s-[<value>]", "border-inline-start-width: <value>;"],
+    ["border-e", "border-inline-end-width: 1px;"],
+    ["border-e-<number>", "border-inline-end-width: <number>px;"],
+    ["border-e-(length:<custom-property>)", "border-inline-end-width: var(<custom-property>);"],
+    ["border-e-[<value>]", "border-inline-end-width: <value>;"],
+    ["border-bs", "border-block-start-width: 1px;"],
+    ["border-bs-<number>", "border-block-start-width: <number>px;"],
+    ["border-bs-(length:<custom-property>)", "border-block-start-width: var(<custom-property>);"],
+    ["border-bs-[<value>]", "border-block-start-width: <value>;"],
+    ["border-be", "border-block-end-width: 1px;"],
+    ["border-be-<number>", "border-block-end-width: <number>px;"],
+    ["border-be-(length:<custom-property>)", "border-block-end-width: var(<custom-property>);"],
+    ["border-be-[<value>]", "border-block-end-width: <value>;"],
+    ["border-t", "border-top-width: 1px;"],
+    ["border-t-<number>", "border-top-width: <number>px;"],
+    ["border-t-(length:<custom-property>)", "border-top-width: var(<custom-property>);"],
+    ["border-t-[<value>]", "border-top-width: <value>;"],
+    ["border-r", "border-right-width: 1px;"],
+    ["border-r-<number>", "border-right-width: <number>px;"],
+    ["border-r-(length:<custom-property>)", "border-right-width: var(<custom-property>);"],
+    ["border-r-[<value>]", "border-right-width: <value>;"],
+    ["border-b", "border-bottom-width: 1px;"],
+    ["border-b-<number>", "border-bottom-width: <number>px;"],
+    ["border-b-(length:<custom-property>)", "border-bottom-width: var(<custom-property>);"],
+    ["border-b-[<value>]", "border-bottom-width: <value>;"],
+    ["border-l", "border-left-width: 1px;"],
+    ["border-l-<number>", "border-left-width: <number>px;"],
+    ["border-l-(length:<custom-property>)", "border-left-width: var(<custom-property>);"],
+    ["border-l-[<value>]", "border-left-width: <value>;"],
+    [
+      "divide-x",
+      dedent`
+        & > :not(:last-child) {
+          border-inline-start-width: 0px;
+          border-inline-end-width: 1px;
+        }
+    `,
+    ],
+    [
+      "divide-x-<number>",
+      dedent`
+        & > :not(:last-child) {
+          border-inline-start-width: 0px;
+          border-inline-end-width: <number>px;
+        }
+    `,
+    ],
+    [
+      "divide-x-(length:<custom-property>)",
+      dedent`
+        & > :not(:last-child) {
+          border-inline-start-width: 0px;
+          border-inline-end-width: var(<custom-property>);
+        }
+    `,
+    ],
+    [
+      "divide-x-[<value>]",
+      dedent`
+        & > :not(:last-child) {
+          border-inline-start-width: 0px;
+          border-inline-end-width: <value>;
+        }
+    `,
+    ],
+    [
+      "divide-y",
+      dedent`
+        & > :not(:last-child) {
+          border-top-width: 0px;
+          border-bottom-width: 1px;
+        }
+    `,
+    ],
+    [
+      "divide-y-<number>",
+      dedent`
+        & > :not(:last-child) {
+          border-top-width: 0px;
+          border-bottom-width: <number>px;
+        }
+    `,
+    ],
+    [
+      "divide-y-(length:<custom-property>)",
+      dedent`
+        & > :not(:last-child) {
+          border-top-width: 0px;
+          border-bottom-width: var(<custom-property>);
+        }
+    `,
+    ],
+    [
+      "divide-y-[<value>]",
+      dedent`
+        & > :not(:last-child) {
+          border-top-width: 0px;
+          border-bottom-width: <value>;
+        }
+    `,
+    ],
+    ["divide-x-reverse", "--tw-divide-x-reverse: 1;"],
+    ["divide-y-reverse", "--tw-divide-y-reverse: 1;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `border` or `border-<number>` utilities like `border-2` and `border-4` to set the border width for all sides 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">border</p>
+        <div className="size-16 border border-indigo-600 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">border-2</p>
+        <div className="size-16 border-2 border-indigo-600 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">border-4</p>
+        <div className="size-16 border-4 border-indigo-600 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">border-8</p>
+        <div className="size-16 border-8 border-indigo-600 p-4"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border,border-2,border-4,border-8] -->
+<div class="border border-indigo-600 ..."></div>
+<div class="border-2 border-indigo-600 ..."></div>
+<div class="border-4 border-indigo-600 ..."></div>
+<div class="border-8 border-indigo-600 ..."></div>
+```
+
+</Figure>
+
+### Individual sides
+
+Use utilities like `border-r` and `border-t-4` to set the border width for 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">border-t-4</p>
+        <div className="size-16 border-t-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></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">border-r-4</p>
+        <div className="size-16 border-r-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></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">border-b-4</p>
+        <div className="size-16 border-b-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></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">border-l-4</p>
+        <div className="size-16 border-l-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border-t-4,border-r-4,border-b-4,border-l-4] -->
+<div class="border-t-4 border-indigo-500 ..."></div>
+<div class="border-r-4 border-indigo-500 ..."></div>
+<div class="border-b-4 border-indigo-500 ..."></div>
+<div class="border-l-4 border-indigo-500 ..."></div>
+```
+
+</Figure>
+
+### Horizontal and vertical sides
+
+Use utilities like `border-x` and `border-y-4` to set the border width on two sides of an element at the same time:
+
+<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">border-x-4</p>
+        <div className="size-16 border-x-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></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">border-y-4</p>
+        <div className="size-16 border-y-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border-x-4,border-y-4] -->
+<div class="border-x-4 border-indigo-500 ..."></div>
+<div class="border-y-4 border-indigo-500 ..."></div>
+```
+
+</Figure>
+
+### Using logical properties
+
+Use utilities like `border-s` and `border-e-4` to set the `border-inline-start-width` and `border-inline-end-width` [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right border 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 border-s-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></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 border-s-4 border-indigo-500 p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:dir="ltr"] -->
+<!-- [!code word:dir="rtl"] -->
+<!-- [!code classes:border-s-4] -->
+<div dir="ltr">
+  <div class="border-s-4 ..."></div>
+</div>
+<div dir="rtl">
+  <div class="border-s-4 ..."></div>
+</div>
+```
+
+</Figure>
+
+Use the `border-bs-<number>` and `border-be-<number>` utilities to set the `border-block-start-width` and `border-block-end-width` logical properties, which map to either the top or bottom border based on the writing mode:
+
+```html
+<!-- [!code classes:border-bs-4] -->
+<div class="border-bs-4 ..."></div>
+```
+
+### Between children
+
+Use utilities like `divide-x` and `divide-y-4` to add borders between child elements:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto grid max-w-lg grid-cols-3 divide-x-4 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-x-4] -->
+<div class="grid grid-cols-3 divide-x-4">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+#### Reversing children order
+
+If your elements are in reverse order (using say `flex-row-reverse` or `flex-col-reverse`), use the `divide-x-reverse` or `divide-y-reverse` utilities to ensure the border is added to the correct side of each element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto flex max-w-sm flex-col-reverse divide-y-4 divide-y-reverse 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:flex-col-reverse,divide-y-4,divide-y-reverse] -->
+<div class="flex flex-col-reverse divide-y-4 divide-y-reverse divide-gray-200">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="border" name="border width" value="2vw" dataType="length" variable="border-width" />
+
+### Responsive design
+
+<ResponsiveDesign property="border-width" defaultClass="border-2" featuredClass="border-t-4" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/box-decoration-break.mdx

@@ -0,0 +1,71 @@
+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 = "box-decoration-break";
+export const description =
+  "Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.";
+
+<ApiTable
+  rows={[
+    ["box-decoration-clone", "box-decoration-break: clone;"],
+    ["box-decoration-slice", "box-decoration-break: slice;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `box-decoration-slice` and `box-decoration-clone` utilities to control whether properties like background, border, border-image, box-shadow, clip-path, margin, and padding should be rendered as if the element were one continuous fragment, or distinct blocks:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1 gap-10 px-10 font-mono font-bold sm:grid-cols-2">
+      <div className="flex flex-col">
+        <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">box-decoration-slice</p>
+        <div className="font-sans text-5xl leading-none font-extrabold tracking-tight">
+          <span className="bg-linear-to-r from-indigo-600 to-pink-500 box-decoration-slice px-2 leading-[3.5rem] text-white">
+            Hello
+            <br />
+            World
+          </span>
+        </div>
+      </div>
+      <div className="flex flex-col">
+        <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">box-decoration-clone</p>
+        <div className="font-sans text-5xl leading-none font-extrabold tracking-tight">
+          <span className="bg-linear-to-r from-indigo-600 to-pink-500 box-decoration-clone px-2 leading-[3.5rem] text-white">
+            Hello
+            <br />
+            World
+          </span>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:box-decoration-slice,box-decoration-clone] -->
+<span class="box-decoration-slice bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...">
+  Hello<br />World
+</span>
+<span class="box-decoration-clone bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...">
+  Hello<br />World
+</span>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign
+  property="box-decoration-break"
+  defaultClass="box-decoration-clone"
+  featuredClass="box-decoration-slice"
+/>