@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

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

@@ -0,0 +1,294 @@
+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-self";
+export const description =
+  "Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.";
+
+<ApiTable
+  rows={[
+    ["self-auto", "align-self: auto;"],
+    ["self-start", "align-self: flex-start;"],
+    ["self-end", "align-self: flex-end;"],
+    ["self-end-safe", "align-self: safe flex-end;"],
+    ["self-center", "align-self: center;"],
+    ["self-center-safe", "align-self: safe center;"],
+    ["self-stretch", "align-self: stretch;"],
+    ["self-baseline", "align-self: baseline;"],
+    ["self-baseline-last", "align-self: last baseline;"],
+  ]}
+/>
+
+## Examples
+
+### Auto
+
+Use the `self-auto` utility to align an item based on the value of the container's `align-items` property:
+
+<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 h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">
+          01
+        </div>
+        <div className="flex flex-1 items-center justify-center self-auto rounded-lg bg-sky-500 p-4">02</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">
+          03
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:self-auto] -->
+<div class="flex items-stretch ...">
+  <div>01</div>
+  <div class="self-auto ...">02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Start
+
+Use the `self-start` utility to align an item to the start of the container's cross axis, despite the container's `align-items` value:
+
+<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 h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
+          01
+        </div>
+        <div className="flex flex-1 items-center justify-center self-start rounded-lg bg-pink-500 p-4">02</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
+          03
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:self-start] -->
+<div class="flex items-stretch ...">
+  <div>01</div>
+  <div class="self-start ...">02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Center
+
+Use the `self-center` utility to align an item along the center of the container's cross axis, despite the container's `align-items` value:
+
+<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 h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">
+          01
+        </div>
+        <div className="flex flex-1 items-center justify-center self-center rounded-lg bg-purple-500 p-4">02</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">
+          03
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:self-center] -->
+<div class="flex items-stretch ...">
+  <div>01</div>
+  <div class="self-center ...">02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### End
+
+Use the `self-end` utility to align an item to the end of the container's cross axis, despite the container's `align-items` value:
+
+<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 h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">
+          01
+        </div>
+        <div className="flex flex-1 items-center justify-center self-end rounded-lg bg-indigo-500 p-4">02</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">
+          03
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:self-end] -->
+<div class="flex items-stretch ...">
+  <div>01</div>
+  <div class="self-end ...">02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Stretch
+
+Use the `self-stretch` utility to stretch an item to fill the container's cross axis, despite the container's `align-items` value:
+
+<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 h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
+          01
+        </div>
+        <div className="flex flex-1 items-center justify-center self-stretch rounded-lg bg-fuchsia-500 p-4">02</div>
+        <div className="flex flex-1 items-center justify-center rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
+          03
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:self-stretch] -->
+<div class="flex items-stretch ...">
+  <div>01</div>
+  <div class="self-stretch ...">02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Baseline
+
+Use the `self-baseline` utility to align an item such that its baseline aligns with the baseline of the flex 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 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 self-baseline rounded-lg bg-blue-500 pt-2 pb-6">01</div>
+        <div className="flex flex-1 items-center justify-center self-baseline rounded-lg bg-blue-500 pt-8 pb-12">
+          02
+        </div>
+        <div className="flex flex-1 items-center justify-center self-baseline rounded-lg bg-blue-500 pt-12 pb-4">
+          03
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:self-baseline] -->
+<div class="flex ...">
+  <div class="self-baseline pt-2 pb-6">01</div>
+  <div class="self-baseline pt-8 pb-12">02</div>
+  <div class="self-baseline pt-12 pb-4">03</div>
+</div>
+```
+
+</Figure>
+
+### Last baseline
+
+Use the `self-baseline-last` utility to align an item along the container's cross axis such that its baseline aligns 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-[auto_1fr_auto] gap-x-4 px-4 py-6">
+        <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="self-baseline-last text-sm sm:col-start-2">
+          Working on the future of astronaut recruitment at Space Recruit.
+        </p>
+        <a
+          href="#"
+          className="self-baseline-last 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-[auto_1fr_auto] gap-x-4 px-4 py-6">
+        <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="self-baseline-last text-sm sm:col-start-2">A multidisciplinary designer.</p>
+        <a
+          href="#"
+          className="self-baseline-last 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:self-baseline-last] -->
+<div class="grid grid-cols-[1fr_auto]">
+  <div>
+    <img src="img/spencer-sharp.jpg" />
+    <h4>Spencer Sharp</h4>
+    <p class="self-baseline-last">Working on the future of astronaut recruitment at Space Recruit.</p>
+  </div>
+  <p class="self-baseline-last">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-self" defaultClass="self-auto" featuredClass="self-end" />

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

@@ -0,0 +1,286 @@
+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";
+import dedent from "dedent";
+
+export const title = "animation";
+export const description = "Utilities for animating elements with CSS animations.";
+
+<ApiTable
+  rows={[
+    [
+      "animate-spin",
+      dedent`
+        animation: var(--animate-spin); /* spin 1s linear infinite */
+
+        @keyframes spin {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `,
+    ],
+    [
+      "animate-ping",
+      dedent`
+        animation: var(--animate-ping); /* ping 1s cubic-bezier(0, 0, 0.2, 1) infinite */
+
+        @keyframes ping {
+          75%, 100% {
+            transform: scale(2);
+            opacity: 0;
+          }
+        }
+      `,
+    ],
+    [
+      "animate-pulse",
+      dedent`
+        animation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */
+
+        @keyframes pulse {
+          50% {
+            opacity: 0.5;
+          }
+        }
+      `,
+    ],
+    [
+      "animate-bounce",
+      dedent`
+        animation: var(--animate-bounce); /* bounce 1s infinite */
+
+        @keyframes bounce {
+          0%, 100% {
+            transform: translateY(-25%);
+            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+          }
+          50% {
+            transform: none;
+            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+          }
+        }
+      `,
+    ],
+    ["animate-none", "animation: none;"],
+    ["animate-(<custom-property>)", "animation: var(<custom-property>);"],
+    ["animate-[<value>]", "animation: <value>;"],
+
+]}
+/>
+
+## Examples
+
+### Adding a spin animation
+
+Use the `animate-spin` utility to add a linear spin animation to elements like loading indicators:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex items-center justify-center">
+      <button
+        type="button"
+        className="inline-flex cursor-not-allowed items-center rounded-md bg-indigo-500 px-4 py-2 text-sm leading-6 font-semibold text-white transition duration-150 ease-in-out hover:bg-indigo-400"
+        disabled
+      >
+        <svg
+          className="mr-3 -ml-1 size-5 animate-spin text-white"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        Processing…
+      </button>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:animate-spin] -->
+<button type="button" class="bg-indigo-500 ..." disabled>
+  <svg class="mr-3 size-5 animate-spin ..." viewBox="0 0 24 24">
+    <!-- ... -->
+  </svg>
+  Processing…
+</button>
+```
+
+</Figure>
+
+### Adding a ping animation
+
+Use the `animate-ping` utility to make an element scale and fade like a radar ping or ripple of water—useful for things like notification badges:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex items-center justify-center">
+      <span className="relative inline-flex">
+        <button
+          type="button"
+          className="inline-flex cursor-not-allowed items-center rounded-md bg-white px-4 py-2 text-sm leading-6 font-semibold text-sky-500 ring-1 ring-gray-900/10 transition duration-150 ease-in-out dark:bg-white/5 dark:ring-white/20"
+          disabled
+        >
+          Transactions
+        </button>
+        <span className="absolute top-0 right-0 -mt-1 -mr-1 flex size-3">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span>
+          <span className="relative inline-flex size-3 rounded-full bg-sky-500"></span>
+        </span>
+      </span>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:animate-ping] -->
+<span class="relative flex size-3">
+  <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span>
+  <span class="relative inline-flex size-3 rounded-full bg-sky-500"></span>
+</span>
+```
+
+</Figure>
+
+### Adding a pulse animation
+
+Use the `animate-pulse` utility to make an element gently fade in and out—useful for things like skeleton loaders:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex items-center justify-center">
+      <div className="-lg h-28 w-full max-w-xs rounded-lg bg-white p-4 ring-1 ring-gray-900/5 dark:bg-gray-800">
+        <div className="flex animate-pulse space-x-4">
+          <div className="size-10 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+          <div className="flex-1 space-y-6 py-1">
+            <div className="h-2 rounded bg-gray-200 dark:bg-gray-700"></div>
+            <div className="space-y-3">
+              <div className="grid grid-cols-3 gap-4">
+                <div className="col-span-2 h-2 rounded bg-gray-200 dark:bg-gray-700"></div>
+                <div className="col-span-1 h-2 rounded bg-gray-200 dark:bg-gray-700"></div>
+              </div>
+              <div className="h-2 rounded bg-gray-200 dark:bg-gray-700"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:animate-pulse] -->
+<div class="mx-auto w-full max-w-sm rounded-md border border-blue-300 p-4">
+  <div class="flex animate-pulse space-x-4">
+    <div class="size-10 rounded-full bg-gray-200"></div>
+    <div class="flex-1 space-y-6 py-1">
+      <div class="h-2 rounded bg-gray-200"></div>
+      <div class="space-y-3">
+        <div class="grid grid-cols-3 gap-4">
+          <div class="col-span-2 h-2 rounded bg-gray-200"></div>
+          <div class="col-span-1 h-2 rounded bg-gray-200"></div>
+        </div>
+        <div class="h-2 rounded bg-gray-200"></div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</Figure>
+
+### Adding a bounce animation
+
+Use the `animate-bounce` utility to make an element bounce up and down—useful for things like "scroll down" indicators:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center">
+      <div className="-lg flex size-10 animate-bounce items-center justify-center rounded-full bg-white p-2 ring-1 ring-gray-900/5 dark:bg-white/5 dark:ring-white/20">
+        <svg
+          className="size-6 text-violet-500"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
+        </svg>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:animate-bounce] -->
+<svg class="size-6 animate-bounce ...">
+  <!-- ... -->
+</svg>
+```
+
+</Figure>
+
+### Supporting reduced motion
+
+For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the `motion-safe` and `motion-reduce` variants:
+
+```html
+<!-- [!code classes:motion-safe:animate-spin] -->
+<button type="button" class="bg-indigo-600 ..." disabled>
+  <svg class="mr-3 size-5 motion-safe:animate-spin ..." viewBox="0 0 24 24">
+    <!-- ... -->
+  </svg>
+  Processing
+</button>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="animate" name="animation" value="wiggle_1s_ease-in-out_infinite" variable="animation" />
+
+### Responsive design
+
+<ResponsiveDesign property="animation" defaultClass="animate-none" featuredClass="animate-spin" />
+
+## Customizing your theme
+
+<CustomizingYourTheme
+  utility="animate"
+  name="animation"
+  customName="wiggle"
+  customCSS={
+    dedent`
+      @theme {
+        /* [!code highlight:12] */
+        --animate-wiggle: wiggle 1s ease-in-out infinite;
+
+        @keyframes wiggle {
+          0%,
+          100% {
+            transform: rotate(-3deg);
+          }
+          50% {
+            transform: rotate(3deg);
+          }
+        }
+      }
+    `}
+
+/>