@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,51 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "transform";
+export const description = "Utilities for transforming elements.";
+
+<ApiTable
+  rows={[
+    ["transform-(<custom-property>)", "transform: var(<custom-property>);"],
+    ["transform-[<value>]", "transform: <value>;"],
+    ["transform-none", "transform: none;"],
+    [
+      "transform-gpu",
+      "transform: translateZ(0) var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);",
+    ],
+    [
+      "transform-cpu",
+      "transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);",
+    ],
+  ]}
+/>
+
+## Examples
+
+### Hardware acceleration
+
+If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the `transform-gpu` utility:
+
+```html
+<!-- [!code classes:transform-gpu] -->
+<div class="scale-150 transform-gpu">
+  <!-- ... -->
+</div>
+```
+
+Use the `transform-cpu` utility to force things back to the CPU if you need to undo this conditionally.
+
+### Removing transforms
+
+Use the `transform-none` utility to remove all of the transforms on an element at once:
+
+```html
+<!-- [!code classes:transform-none] -->
+<div class="skew-y-3 md:transform-none">
+  <!-- ... -->
+</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="transform" value="matrix(1,2,3,4,5,6)" />

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

@@ -0,0 +1,76 @@
+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 = "transition-behavior";
+export const description = "Utilities to control the behavior of CSS transitions.";
+
+<ApiTable
+  rows={[
+    ["transition-normal", "transition-behavior: normal;"],
+    ["transition-discrete", "transition-behavior: allow-discrete;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `transition-discrete` utility to start transitions when changing properties with a discrete set of values, such as elements that change from `hidden` to `block`:
+
+<Figure hint="Interact with the checkboxes to see the expected behavior">
+
+<Example>
+  {
+    <div className="flex flex-col justify-around gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
+      <div className="flex shrink-0 flex-col items-center sm:w-1/2">
+        <label className="peer mb-3 inline-flex gap-2 text-center font-mono text-xs font-medium text-gray-500 select-none dark:text-gray-400">
+          <input type="checkbox" defaultChecked />
+          transition-normal
+        </label>
+        <button className="hidden rounded-md bg-violet-500 px-4 py-2 text-sm font-semibold text-white transition-all transition-normal duration-300 not-peer-has-checked:opacity-0 peer-has-checked:block">
+          I hide
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center sm:w-1/2">
+        <label className="peer mb-3 inline-flex gap-2 text-center font-mono text-xs font-medium text-gray-500 select-none dark:text-gray-400">
+          <input type="checkbox" defaultChecked />
+          transition-discrete
+        </label>
+        <button className="hidden rounded-md bg-violet-500 px-4 py-2 text-sm font-semibold text-white transition-all transition-discrete duration-300 not-peer-has-checked:opacity-0 peer-has-checked:block">
+          I fade out
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:transition-discrete] -->
+<label class="peer ...">
+  <input type="checkbox" checked />
+</label>
+<button class="hidden transition-all not-peer-has-checked:opacity-0 peer-has-checked:block ...">
+  <!-- prettier-ignore -->
+  I hide
+</button>
+
+<label class="peer ...">
+  <input type="checkbox" checked />
+</label>
+<button class="hidden transition-all transition-discrete not-peer-has-checked:opacity-0 peer-has-checked:block ...">
+  I fade out
+</button>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="button"
+  property="transition-behavior"
+  defaultClass="transition-discrete"
+  featuredClass="transition-normal"
+/>

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

@@ -0,0 +1,76 @@
+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";
+
+export const title = "transition-delay";
+export const description = "Utilities for controlling the delay of CSS transitions.";
+
+<ApiTable
+  rows={[
+    ["delay-<number>", "transition-delay: <number>ms;"],
+    ["delay-(<custom-property>)", "transition-delay: var(<custom-property>);"],
+    ["delay-[<value>]", "transition-delay: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `delay-150` and `delay-700` to set the transition delay of an element in milliseconds:
+
+<Figure hint="Hover each button to see the expected behavior">
+
+<Example>
+  {
+    <div className="flex flex-col justify-around gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
+      <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">delay-150</p>
+        <button className="rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white delay-150 duration-300 ease-in-out hover:scale-125">
+          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">delay-300</p>
+        <button className="rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white delay-300 duration-300 ease-in-out hover:scale-125">
+          Button B
+        </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">delay-700</p>
+        <button className="rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white delay-700 duration-300 ease-in-out hover:scale-125">
+          Button C
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:delay-150,delay-300,delay-700] -->
+<button class="transition delay-150 duration-300 ease-in-out ...">Button A</button>
+<button class="transition delay-300 duration-300 ease-in-out ...">Button B</button>
+<button class="transition delay-700 duration-300 ease-in-out ...">Button C</button>
+```
+
+</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-reduce:delay-0] -->
+<button type="button" class="delay-300 motion-reduce:delay-0 ...">
+  <!-- ... -->
+</button>
+```
+
+### Using a custom value
+
+<UsingACustomValue element="button" utility="delay" value="1s,250ms" name="transition delay" />
+
+### Responsive design
+
+<ResponsiveDesign element="button" property="transition-delay" defaultClass="delay-150" featuredClass="delay-300" />

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

@@ -0,0 +1,82 @@
+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";
+
+export const title = "transition-duration";
+export const description = "Utilities for controlling the duration of CSS transitions.";
+
+<ApiTable
+  rows={[
+    ["duration-<number>", "transition-duration: <number>ms;"],
+    ["duration-initial", "transition-duration: initial;"],
+    ["duration-(<custom-property>)", "transition-duration: var(<custom-property>);"],
+    ["duration-[<value>]", "transition-duration: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `duration-150` and `duration-700` to set the transition duration of an element in milliseconds:
+
+<Figure hint="Hover each button to see the expected behavior">
+
+<Example>
+  {
+    <div className="flex flex-col justify-around gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
+      <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">duration-150</p>
+        <button className="rounded-md bg-violet-500 px-4 py-2 text-sm font-semibold text-white duration-150 ease-in-out hover:scale-125">
+          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">duration-300</p>
+        <button className="rounded-md bg-violet-500 px-4 py-2 text-sm font-semibold text-white duration-300 ease-in-out hover:scale-125">
+          Button B
+        </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">duration-700</p>
+        <button className="rounded-md bg-violet-500 px-4 py-2 text-sm font-semibold text-white duration-700 ease-in-out hover:scale-125">
+          Button C
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:duration-150,duration-300,duration-700] -->
+<button class="transition duration-150 ease-in-out ...">Button A</button>
+<button class="transition duration-300 ease-in-out ...">Button B</button>
+<button class="transition duration-700 ease-in-out ...">Button C</button>
+```
+
+</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-reduce:duration-0] -->
+<button type="button" class="duration-300 motion-reduce:duration-0 ...">
+  <!-- ... -->
+</button>
+```
+
+### Using a custom value
+
+<UsingACustomValue element="button" utility="duration" value="1s,15s" name="transition duration" />
+
+### Responsive design
+
+<ResponsiveDesign
+  element="button"
+  property="transition-duration"
+  defaultClass="duration-0"
+  featuredClass="duration-150"
+/>

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

@@ -0,0 +1,137 @@
+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 = "transition-property";
+export const description = "Utilities for controlling which CSS properties transition.";
+
+<ApiTable
+  rows={[
+    [
+      "transition",
+      dedent`
+        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+        transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
+        transition-duration: var(--default-transition-duration); /* 150ms */
+      `,
+    ],
+    [
+      "transition-all",
+      dedent`
+        transition-property: all;
+        transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
+        transition-duration: var(--default-transition-duration); /* 150ms */
+      `,
+    ],
+    [
+      "transition-colors",
+      dedent`
+        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+        transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
+        transition-duration: var(--default-transition-duration); /* 150ms */
+      `,
+    ],
+    [
+      "transition-opacity",
+      dedent`
+        transition-property: opacity;
+        transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
+        transition-duration: var(--default-transition-duration); /* 150ms */
+      `,
+    ],
+    [
+      "transition-shadow",
+      dedent`
+        transition-property: box-shadow;
+        transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
+        transition-duration: var(--default-transition-duration); /* 150ms */
+      `,
+    ],
+    [
+      "transition-transform",
+      dedent`
+        transition-property: transform, translate, scale, rotate;
+        transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
+        transition-duration: var(--default-transition-duration); /* 150ms */
+      `,
+    ],
+    ["transition-none", "transition-property: none;"],
+    [
+      "transition-(<custom-property>)",
+      dedent`
+        transition-property: var(<custom-property>);
+        transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
+        transition-duration: var(--default-transition-duration); /* 150ms */
+      `,
+    ],
+    [
+      "transition-[<value>]",
+      dedent`
+        transition-property: <value>;
+        transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
+        transition-duration: var(--default-transition-duration); /* 150ms */
+      `,
+    ],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `transition` and `transition-colors` to specify which properties should transition when they change:
+
+<Figure hint="Hover the button to see the expected behavior">
+
+<Example>
+  {
+    <div className="flex justify-around text-sm leading-6 font-bold text-white">
+      <button className="rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500">
+        Save Changes
+      </button>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:transition] -->
+<button class="bg-blue-500 transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 ...">
+  Save Changes
+</button>
+```
+
+</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-reduce:transition-none,motion-reduce:hover:transform-none] -->
+<!-- prettier-ignore -->
+<button class="transform transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none ...">
+  <!-- ... -->
+</button>
+```
+
+### Using a custom value
+
+<UsingACustomValue
+  element="button"
+  utility="transition"
+  value="height"
+  name="transition properties"
+  variable="properties"
+/>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="button"
+  property="transition-property"
+  defaultClass="transition-none"
+  featuredClass="transition-all"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/transition-timing-function.mdx

@@ -0,0 +1,89 @@
+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 = "transition-timing-function";
+export const description = "Utilities for controlling the easing of CSS transitions.";
+
+<ApiTable
+  rows={[
+    ["ease-linear", "transition-timing-function: linear;"],
+    ["ease-in", "transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */"],
+    ["ease-out", "transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */"],
+    ["ease-in-out", "transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */"],
+    ["ease-initial", "transition-timing-function: initial;"],
+    ["ease-(<custom-property>)", "transition-timing-function: var(<custom-property>);"],
+    ["ease-[<value>]", "transition-timing-function: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `ease-in` and `ease-out` to control the easing curve of an element's transition:
+
+<Figure hint="Hover each button to see the expected behavior">
+
+<Example>
+  {
+    <div className="flex flex-col justify-around gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
+      <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">ease-in</p>
+        <button className="rounded-md bg-sky-500 px-4 py-2 text-sm font-semibold text-white duration-300 ease-in hover:scale-125">
+          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">ease-out</p>
+        <button className="rounded-md bg-sky-500 px-4 py-2 text-sm font-semibold text-white duration-300 ease-out hover:scale-125">
+          Button B
+        </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">ease-in-out</p>
+        <button className="rounded-md bg-sky-500 px-4 py-2 text-sm font-semibold text-white duration-300 ease-in-out hover:scale-125">
+          Button C
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:ease-in,ease-out,ease-in-out] -->
+<button class="duration-300 ease-in ...">Button A</button>
+<button class="duration-300 ease-out ...">Button B</button>
+<button class="duration-300 ease-in-out ...">Button C</button>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue
+  element="button"
+  utility="ease"
+  value="cubic-bezier(0.95,0.05,0.795,0.035)"
+  name="transition timing function"
+/>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="button"
+  property="transition-timing-function"
+  defaultClass="ease-out"
+  featuredClass="ease-in"
+/>
+
+## Customizing your theme
+
+<CustomizingYourTheme
+  element="button"
+  utility="ease"
+  name="transition timing function"
+  customName="in-expo"
+  customValue="cubic-bezier(0.95, 0.05, 0.795, 0.035)"
+/>