@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,300 @@
+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";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "align-content";
+export const description = "Utilities for controlling how rows are positioned in multi-row flex and grid containers.";
+
+<ApiTable
+  rows={[
+    ["content-normal", "align-content: normal;"],
+    ["content-center", "align-content: center;"],
+    ["content-start", "align-content: flex-start;"],
+    ["content-end", "align-content: flex-end;"],
+    ["content-between", "align-content: space-between;"],
+    ["content-around", "align-content: space-around;"],
+    ["content-evenly", "align-content: space-evenly;"],
+    ["content-baseline", "align-content: baseline;"],
+    ["content-stretch", "align-content: stretch;"],
+  ]}
+/>
+
+## Examples
+
+### Start
+
+Use `content-start` to pack rows in a container against the start of the cross axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid h-56 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 content-start gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-purple-500 p-4">01</div>
+        <div className="rounded-lg bg-purple-500 p-4">02</div>
+        <div className="rounded-lg bg-purple-500 p-4">03</div>
+        <div className="rounded-lg bg-purple-500 p-4">04</div>
+        <div className="rounded-lg bg-purple-500 p-4">05</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:content-start] -->
+<div class="grid h-56 grid-cols-3 content-start gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+</div>
+```
+
+</Figure>
+
+### Center
+
+Use `content-center` to pack rows in a container in the center of the cross axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid h-56 grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-center gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-sky-500 p-4">01</div>
+        <div className="rounded-lg bg-sky-500 p-4">02</div>
+        <div className="rounded-lg bg-sky-500 p-4">03</div>
+        <div className="rounded-lg bg-sky-500 p-4">04</div>
+        <div className="rounded-lg bg-sky-500 p-4">05</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:content-center] -->
+<div class="grid h-56 grid-cols-3 content-center gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+</div>
+```
+
+</Figure>
+
+### End
+
+Use `content-end` to pack rows in a container against the end of the cross axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid h-56 grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-end gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-pink-500 p-4">01</div>
+        <div className="rounded-lg bg-pink-500 p-4">02</div>
+        <div className="rounded-lg bg-pink-500 p-4">03</div>
+        <div className="rounded-lg bg-pink-500 p-4">04</div>
+        <div className="rounded-lg bg-pink-500 p-4">05</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:content-end] -->
+<div class="grid h-56 grid-cols-3 content-end gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+</div>
+```
+
+</Figure>
+
+### Space between
+
+Use `content-between` to distribute rows in a container such that there is an equal amount of space between each line:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid h-56 grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-between gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-violet-500 p-4">01</div>
+        <div className="rounded-lg bg-violet-500 p-4">02</div>
+        <div className="rounded-lg bg-violet-500 p-4">03</div>
+        <div className="rounded-lg bg-violet-500 p-4">04</div>
+        <div className="rounded-lg bg-violet-500 p-4">05</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:content-between] -->
+<div class="grid h-56 grid-cols-3 content-between gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+</div>
+```
+
+</Figure>
+
+### Space around
+
+Use `content-around` to distribute rows in a container such that there is an equal amount of space around each line:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid h-56 grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-around gap-x-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-blue-500 p-4">01</div>
+        <div className="rounded-lg bg-blue-500 p-4">02</div>
+        <div className="rounded-lg bg-blue-500 p-4">03</div>
+        <div className="rounded-lg bg-blue-500 p-4">04</div>
+        <div className="rounded-lg bg-blue-500 p-4">05</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:content-around] -->
+<div class="grid h-56 grid-cols-3 content-around gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+</div>
+```
+
+</Figure>
+
+### Space evenly
+
+Use `content-evenly` to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `content-around`:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid h-56 grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-evenly gap-x-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-indigo-500 p-4">01</div>
+        <div className="rounded-lg bg-indigo-500 p-4">02</div>
+        <div className="rounded-lg bg-indigo-500 p-4">03</div>
+        <div className="rounded-lg bg-indigo-500 p-4">04</div>
+        <div className="rounded-lg bg-indigo-500 p-4">05</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:content-evenly] -->
+<div class="grid h-56 grid-cols-3 content-evenly gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+</div>
+```
+
+</Figure>
+
+### Stretch
+
+Use `content-stretch` to allow content items to fill the available space along the container’s cross axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid h-56 grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 content-stretch gap-4 rounded-lg text-center 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="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 className="flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">04</div>
+        <div className="flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">05</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:content-stretch] -->
+<div class="grid h-56 grid-cols-3 content-stretch gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+</div>
+```
+
+</Figure>
+
+### Normal
+
+Use `content-normal` to pack content items in their default position as if no `align-content` value was set:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid h-56 grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 w-full grid-cols-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">01</div>
+        <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
+        <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">03</div>
+        <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">04</div>
+        <div className="flex items-center justify-center rounded-lg bg-indigo-500 p-4">05</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:content-normal] -->
+<div class="grid h-56 grid-cols-3 content-normal gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="align-content" defaultClass="grid content-start" featuredClass="content-around" />

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

@@ -0,0 +1,241 @@
+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";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "align-items";
+export const description =
+  "Utilities for controlling how flex and grid items are positioned along a container's cross axis.";
+
+<ApiTable
+  rows={[
+    ["items-start", "align-items: flex-start;"],
+    ["items-end", "align-items: flex-end;"],
+    ["items-end-safe", "align-items: safe flex-end;"],
+    ["items-center", "align-items: center;"],
+    ["items-center-safe", "align-items: safe center;"],
+    ["items-baseline", "align-items: baseline;"],
+    ["items-baseline-last", "align-items: last baseline;"],
+    ["items-stretch", "align-items: stretch;"],
+  ]}
+/>
+
+## Examples
+
+### Stretch
+
+Use the `items-stretch` utility to stretch items to fill the container's cross axis:
+
+<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 flex w-full items-stretch gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-cyan-500 py-4">01</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-cyan-500 py-12">02</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-cyan-500 py-8">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:items-stretch] -->
+<div class="flex items-stretch ...">
+  <div class="py-4">01</div>
+  <div class="py-12">02</div>
+  <div class="py-8">03</div>
+</div>
+```
+
+</Figure>
+
+### Start
+
+Use the `items-start` utility to align items to the start of the container's cross axis:
+
+<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 flex w-full items-start gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-500 py-4">01</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-500 py-12">02</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-500 py-8">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:items-start] -->
+<div class="flex items-start ...">
+  <div class="py-4">01</div>
+  <div class="py-12">02</div>
+  <div class="py-8">03</div>
+</div>
+```
+
+</Figure>
+
+### Center
+
+Use the `items-center` utility to align items along the center of the container's cross axis:
+
+<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 flex w-full items-center gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-violet-500 py-4">01</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-violet-500 py-12">02</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-violet-500 py-8">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:items-center] -->
+<div class="flex items-center ...">
+  <div class="py-4">01</div>
+  <div class="py-12">02</div>
+  <div class="py-8">03</div>
+</div>
+```
+
+</Figure>
+
+### End
+
+Use the `items-end` utility to align items to the end of the container's cross axis:
+
+<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 flex w-full items-end gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-500 py-4">01</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-500 py-12">02</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-500 py-8">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:items-end] -->
+<div class="flex items-end ...">
+  <div class="py-4">01</div>
+  <div class="py-12">02</div>
+  <div class="py-8">03</div>
+</div>
+```
+
+</Figure>
+
+### Baseline
+
+Use the `items-baseline` utility to align items along the container's cross axis such that all of their baselines align:
+
+<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 flex w-full items-baseline gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-blue-500 pt-2 pb-6">01</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-blue-500 pt-8 pb-12">02</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-blue-500 pt-12 pb-4">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:items-baseline] -->
+<div class="flex items-baseline ...">
+  <div class="pt-2 pb-6">01</div>
+  <div class="pt-8 pb-12">02</div>
+  <div class="pt-12 pb-4">03</div>
+</div>
+```
+
+</Figure>
+
+### Last baseline
+
+Use the `items-baseline-last` utility to align items along the container's cross axis such that all of their baselines align with the last baseline in the container:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="mx-auto grid max-w-md divide-y divide-gray-100 border-x border-x-gray-200 text-gray-700 dark:divide-gray-800 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300">
+      <div className="grid grid-cols-[1fr_auto] items-baseline-last gap-x-4 px-4 py-6">
+        <div className="grid grid-cols-[auto_1fr] gap-x-4 max-sm:grid-cols-1">
+          <img
+            className="size-[2rem] rounded-full"
+            src="https://spotlight.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Favatar.51a13c67.jpg&w=128&q=80"
+            alt=""
+          />
+          <div className="font-semibold text-gray-900 sm:col-start-2 dark:text-white">Spencer Sharp</div>
+          <p className="text-sm sm:col-start-2">Working on the future of astronaut recruitment at Space Recruit.</p>
+        </div>
+        <a
+          href="#"
+          className="font-mono text-xs font-medium text-gray-400 underline hover:text-blue-500 dark:text-gray-500"
+        >
+          spacerecruit.com
+        </a>
+      </div>
+      <div className="grid grid-cols-[1fr_auto] items-baseline-last gap-x-4 px-4 py-6">
+        <div className="grid grid-cols-[auto_1fr] gap-x-4 max-sm:grid-cols-1">
+          <img
+            className="size-[2rem] rounded-full"
+            src="https://images.unsplash.com/photo-1590895340509-793cb98788c9?q=80&w=256&h=256&&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+          <div className="font-semibold text-gray-900 sm:col-start-2 dark:text-white">Alex Reed</div>
+          <p className="text-sm sm:col-start-2">A multidisciplinary designer.</p>
+        </div>
+        <a
+          href="#"
+          className="font-mono text-xs font-medium text-gray-400 underline hover:text-blue-500 dark:text-gray-500"
+        >
+          alex-reed.com
+        </a>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:items-baseline-last] -->
+<div class="grid grid-cols-[1fr_auto] items-baseline-last">
+  <div>
+    <img src="img/spencer-sharp.jpg" />
+    <h4>Spencer Sharp</h4>
+    <p>Working on the future of astronaut recruitment at Space Recruit.</p>
+  </div>
+  <p>spacerecruit.com</p>
+</div>
+```
+
+</Figure>
+
+This is useful for ensuring that text items align with each other, even if they have different heights.
+
+### Responsive design
+
+<ResponsiveDesign property="align-items" defaultClass="flex items-stretch" featuredClass="items-center" />