@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,211 @@
+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 = "white-space";
+export const description = "Utilities for controlling an element's white-space property.";
+
+<ApiTable
+  rows={[
+    ["whitespace-normal", "white-space: normal;"],
+    ["whitespace-nowrap", "white-space: nowrap;"],
+    ["whitespace-pre", "white-space: pre;"],
+    ["whitespace-pre-line", "white-space: pre-line;"],
+    ["whitespace-pre-wrap", "white-space: pre-wrap;"],
+    ["whitespace-break-spaces", "white-space: break-spaces;"],
+  ]}
+/>
+
+## Examples
+
+### Normal
+
+Use the `whitespace-normal` utility to cause text to wrap normally within an element. Newlines and spaces will be collapsed:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="mx-auto max-w-sm border-x border-x-pink-400/30 py-8 text-gray-900 dark:text-gray-200">
+      <p
+        className="whitespace-normal"
+        children={
+          "Hey everyone!\n\nIt’s almost 2022       and we still don’t know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.\n\nYou will never know."
+        }
+      />
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:whitespace-normal] -->
+<!-- prettier-ignore -->
+<p class="whitespace-normal">Hey everyone!
+
+It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.
+
+You will never know.</p>
+```
+
+</Figure>
+
+### No Wrap
+
+Use the `whitespace-nowrap` utility to prevent text from wrapping within an element. Newlines and spaces will be collapsed:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="mx-auto max-w-sm border-x border-x-pink-400/30 py-8 text-gray-900 dark:text-gray-200">
+      <p
+        className="whitespace-nowrap"
+        children={
+          "Hey everyone!\n\nIt’s almost 2022       and we still don’t know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.\n\nYou will never know."
+        }
+      />
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:whitespace-nowrap] -->
+<!-- prettier-ignore -->
+<p class="overflow-auto whitespace-nowrap">Hey everyone!
+
+It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.
+
+You will never know.</p>
+```
+
+</Figure>
+
+### Pre
+
+Use the `whitespace-pre` utility to preserve newlines and spaces within an element. Text will not be wrapped:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="mx-auto max-w-sm border-x border-x-pink-400/30 py-8 text-gray-900 dark:text-gray-200">
+      <p
+        className="whitespace-pre"
+        children={
+          "Hey everyone!\n\nIt’s almost 2022       and we still don’t know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.\n\nYou will never know."
+        }
+      />
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:whitespace-pre] -->
+<!-- prettier-ignore -->
+<p class="overflow-auto whitespace-pre">Hey everyone!
+
+It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.
+
+You will never know.</p>
+```
+
+</Figure>
+
+### Pre Line
+
+Use the `whitespace-pre-line` utility to preserve newlines but not spaces within an element. Text will be wrapped normally:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="mx-auto max-w-sm border-x border-x-pink-400/30 py-8 text-gray-900 dark:text-gray-200">
+      <p
+        className="whitespace-pre-line"
+        children={
+          "Hey everyone!\n\nIt’s almost 2022       and we still don’t know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.\n\nYou will never know."
+        }
+      />
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:whitespace-pre-line] -->
+<!-- prettier-ignore -->
+<p class="whitespace-pre-line">Hey everyone!
+
+It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.
+
+You will never know.</p>
+```
+
+</Figure>
+
+### Pre Wrap
+
+Use the `whitespace-pre-wrap` utility to preserve newlines and spaces within an element. Text will be wrapped normally:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="mx-auto max-w-sm border-x border-x-pink-400/30 py-8 text-gray-900 dark:text-gray-200">
+      <p
+        className="whitespace-pre-wrap"
+        children={
+          "Hey everyone!\n\nIt’s almost 2022       and we still don’t know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.\n\nYou will never know."
+        }
+      />
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:whitespace-pre-wrap] -->
+<!-- prettier-ignore -->
+<p class="whitespace-pre-wrap">Hey everyone!
+
+It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.
+
+You will never know.</p>
+```
+
+</Figure>
+
+### Break Spaces
+
+Use the `whitespace-break-spaces` utility to preserve newlines and spaces within an element. White space at the end of lines will not hang, but will wrap to the next line:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="mx-auto max-w-sm border-x border-x-pink-400/30 py-8 text-gray-900 dark:text-gray-200">
+      <p
+        className="whitespace-break-spaces"
+        children={
+          "Hey everyone!\n\nIt’s almost 2022       and we still don’t know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.\n\nYou will never know."
+        }
+      />
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:whitespace-break-spaces] -->
+<!-- prettier-ignore -->
+<p class="whitespace-break-spaces">Hey everyone!
+
+It's almost 2022       and we still don't know if there             are aliens living among us, or do we? Maybe the person writing this is an alien.
+
+You will never know.</p>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="white-space" defaultClass="whitespace-pre" featuredClass="whitespace-normal" />

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

@@ -0,0 +1,264 @@
+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 = "width";
+export const description = "Utilities for setting the width of an element.";
+
+<ApiTable
+  rows={[
+    ["w-<number>", "width: calc(var(--spacing) * <number>);"],
+    ["w-<fraction>", "width: calc(<fraction> * 100%);"],
+    ["w-3xs", "width: var(--container-3xs); /* 16rem (256px) */"],
+    ["w-2xs", "width: var(--container-2xs); /* 18rem (288px) */"],
+    ["w-xs", "width: var(--container-xs); /* 20rem (320px) */"],
+    ["w-sm", "width: var(--container-sm); /* 24rem (384px) */"],
+    ["w-md", "width: var(--container-md); /* 28rem (448px) */"],
+    ["w-lg", "width: var(--container-lg); /* 32rem (512px) */"],
+    ["w-xl", "width: var(--container-xl); /* 36rem (576px) */"],
+    ["w-2xl", "width: var(--container-2xl); /* 42rem (672px) */"],
+    ["w-3xl", "width: var(--container-3xl); /* 48rem (768px) */"],
+    ["w-4xl", "width: var(--container-4xl); /* 56rem (896px) */"],
+    ["w-5xl", "width: var(--container-5xl); /* 64rem (1024px) */"],
+    ["w-6xl", "width: var(--container-6xl); /* 72rem (1152px) */"],
+    ["w-7xl", "width: var(--container-7xl); /* 80rem (1280px) */"],
+    ["w-auto", "width: auto;"],
+    ["w-px", "width: 1px;"],
+    ["w-full", "width: 100%;"],
+    ["w-screen", "width: 100vw;"],
+    ["w-dvw", "width: 100dvw;"],
+    ["w-dvh", "width: 100dvh;"],
+    ["w-lvw", "width: 100lvw;"],
+    ["w-lvh", "width: 100lvh;"],
+    ["w-svw", "width: 100svw;"],
+    ["w-svh", "width: 100svh;"],
+    ["w-min", "width: min-content;"],
+    ["w-max", "width: max-content;"],
+    ["w-fit", "width: fit-content;"],
+    ["w-(<custom-property>)", "width: var(<custom-property>);"],
+    ["w-[<value>]", "width: <value>;"],
+    ["size-<number>", "width: calc(var(--spacing) * <number>);\nheight: calc(var(--spacing) * <number>);"],
+    ["size-<fraction>", "width: calc(<fraction> * 100%);\nheight: calc(<fraction> * 100%);"],
+    ["size-auto", "width: auto;\nheight: auto;"],
+    ["size-px", "width: 1px;\nheight: 1px;"],
+    ["size-full", "width: 100%;\nheight: 100%;"],
+    ["size-dvw", "width: 100dvw;\nheight: 100dvw;"],
+    ["size-dvh", "width: 100dvh;\nheight: 100dvh;"],
+    ["size-lvw", "width: 100lvw;\nheight: 100lvw;"],
+    ["size-lvh", "width: 100lvh;\nheight: 100lvh;"],
+    ["size-svw", "width: 100svw;\nheight: 100svw;"],
+    ["size-svh", "width: 100svh;\nheight: 100svh;"],
+    ["size-min", "width: min-content;\nheight: min-content;"],
+    ["size-max", "width: max-content;\nheight: max-content;"],
+    ["size-fit", "width: fit-content;\nheight: fit-content;"],
+    ["size-(<custom-property>)", "width: var(<custom-property>);\nheight: var(<custom-property>);"],
+    ["size-[<value>]", "width: <value>;\nheight: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `w-<number>` utilities like `w-24` and `w-64` to set an element to a fixed width based on the spacing scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center">
+      <div className="space-y-4 text-center font-mono text-xs font-bold text-white">
+        <div className="hidden w-96 rounded-lg bg-blue-500 px-4 py-2 sm:block">w-96</div>
+        <div className="hidden w-80 rounded-lg bg-blue-500 px-4 py-2 sm:block">w-80</div>
+        <div className="hidden w-64 rounded-lg bg-blue-500 px-4 py-2 sm:block">w-64</div>
+        <div className="w-48 rounded-lg bg-blue-500 px-4 py-2">w-48</div>
+        <div className="w-40 rounded-lg bg-blue-500 px-4 py-2">w-40</div>
+        <div className="w-32 rounded-lg bg-blue-500 px-4 py-2">w-32</div>
+        <div className="w-24 rounded-lg bg-blue-500 px-4 py-2">w-24</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:w-96,w-80,w-64,w-48,w-40,w-32,w-24] -->
+<div class="w-96 ...">w-96</div>
+<div class="w-80 ...">w-80</div>
+<div class="w-64 ...">w-64</div>
+<div class="w-48 ...">w-48</div>
+<div class="w-40 ...">w-40</div>
+<div class="w-32 ...">w-32</div>
+<div class="w-24 ...">w-24</div>
+```
+
+</Figure>
+
+### Using a percentage
+
+Use `w-full` or `w-<fraction>` utilities like `w-1/2` and `w-2/5` to give an element a percentage-based width:
+
+<Figure>
+
+<Example>
+  {
+    <div className="space-y-4 font-mono text-xs font-bold text-white">
+      <div className="flex gap-x-4">
+        <div className="w-1/2 rounded-lg bg-violet-500 px-4 py-2 text-center">w-1/2</div>
+        <div className="w-1/2 rounded-lg bg-violet-500 px-4 py-2 text-center">w-1/2</div>
+      </div>
+      <div className="flex gap-x-4">
+        <div className="w-2/5 rounded-lg bg-violet-500 px-4 py-2 text-center">w-2/5</div>
+        <div className="w-3/5 rounded-lg bg-violet-500 px-4 py-2 text-center">w-3/5</div>
+      </div>
+      <div className="flex gap-x-4">
+        <div className="w-1/3 rounded-lg bg-violet-500 px-4 py-2 text-center">w-1/3</div>
+        <div className="w-2/3 rounded-lg bg-violet-500 px-4 py-2 text-center">w-2/3</div>
+      </div>
+      <div className="hidden gap-x-4 sm:flex">
+        <div className="w-1/4 rounded-lg bg-violet-500 px-4 py-2 text-center">w-1/4</div>
+        <div className="w-3/4 rounded-lg bg-violet-500 px-4 py-2 text-center">w-3/4</div>
+      </div>
+      <div className="hidden gap-x-4 sm:flex">
+        <div className="w-1/5 rounded-lg bg-violet-500 px-4 py-2 text-center">w-1/5</div>
+        <div className="w-4/5 rounded-lg bg-violet-500 px-4 py-2 text-center">w-4/5</div>
+      </div>
+      <div className="hidden gap-x-4 sm:flex">
+        <div className="w-1/6 rounded-lg bg-violet-500 px-4 py-2 text-center">w-1/6</div>
+        <div className="w-5/6 rounded-lg bg-violet-500 px-4 py-2 text-center">w-5/6</div>
+      </div>
+      <div className="w-full rounded-lg bg-violet-500 px-4 py-2 text-center font-mono text-white">w-full</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:w-1/2,w-2/5,w-3/5,w-1/3,w-2/3,w-1/4,w-3/4,w-1/5,w-4/5,w-1/6,w-5/6,w-full] -->
+<div class="flex ...">
+  <div class="w-1/2 ...">w-1/2</div>
+  <div class="w-1/2 ...">w-1/2</div>
+</div>
+<div class="flex ...">
+  <div class="w-2/5 ...">w-2/5</div>
+  <div class="w-3/5 ...">w-3/5</div>
+</div>
+<div class="flex ...">
+  <div class="w-1/3 ...">w-1/3</div>
+  <div class="w-2/3 ...">w-2/3</div>
+</div>
+<div class="flex ...">
+  <div class="w-1/4 ...">w-1/4</div>
+  <div class="w-3/4 ...">w-3/4</div>
+</div>
+<div class="flex ...">
+  <div class="w-1/5 ...">w-1/5</div>
+  <div class="w-4/5 ...">w-4/5</div>
+</div>
+<div class="flex ...">
+  <div class="w-1/6 ...">w-1/6</div>
+  <div class="w-5/6 ...">w-5/6</div>
+</div>
+<div class="w-full ...">w-full</div>
+```
+
+</Figure>
+
+### Using the container scale
+
+Use utilities like `w-sm` and `w-xl` to set an element to a fixed width based on the container scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center">
+      <div className="space-y-4 text-center font-mono text-xs font-bold text-white">
+        <div className="hidden w-xl rounded-lg bg-sky-500 px-4 py-2 sm:block">w-xl</div>
+        <div className="hidden w-lg rounded-lg bg-sky-500 px-4 py-2 sm:block">w-lg</div>
+        <div className="hidden w-md rounded-lg bg-sky-500 px-4 py-2 sm:block">w-md</div>
+        <div className="w-sm rounded-lg bg-sky-500 px-4 py-2">w-sm</div>
+        <div className="w-xs rounded-lg bg-sky-500 px-4 py-2">w-xs</div>
+        <div className="w-2xs rounded-lg bg-sky-500 px-4 py-2">w-2xs</div>
+        <div className="w-3xs rounded-lg bg-sky-500 px-4 py-2">w-3xs</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:w-xl,w-lg,w-md,w-sm,w-xs,w-2xs,w-3xs] -->
+<div class="w-xl ...">w-xl</div>
+<div class="w-lg ...">w-lg</div>
+<div class="w-md ...">w-md</div>
+<div class="w-sm ...">w-sm</div>
+<div class="w-xs ...">w-xs</div>
+<div class="w-2xs ...">w-2xs</div>
+<div class="w-3xs ...">w-3xs</div>
+```
+
+</Figure>
+
+### Matching the viewport
+
+Use the `w-screen` utility to make an element span the entire width of the viewport:
+
+```html
+<!-- [!code classes:w-screen] -->
+<div class="w-screen">
+  <!-- ... -->
+</div>
+```
+
+Alternatively, you can match the width of the large, small or dynamic viewports using the `w-lvw`, `w-svw`, and `w-dvw` utilities.
+
+### Resetting the width
+
+Use the `w-auto` utility to remove an element's assigned width under a specific condition, like at a particular breakpoint:
+
+```html
+<!-- [!code classes:w-full,w-auto] -->
+<div class="w-full md:w-auto">
+  <!-- ... -->
+</div>
+```
+
+### Setting both width and height
+
+Use utilities like `size-px`, `size-4`, and `size-full` to set both the width and height of an element at the same time:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-flow-col justify-center gap-4 text-center font-mono text-xs font-bold text-white">
+      <div className="grid size-16 items-center justify-center rounded-lg bg-indigo-500">size-16</div>
+      <div className="grid size-20 items-center justify-center rounded-lg bg-indigo-500">size-20</div>
+      <div className="grid size-24 items-center justify-center rounded-lg bg-indigo-500">size-24</div>
+      <div className="hidden size-32 items-center justify-center rounded-lg bg-indigo-500 sm:grid">size-32</div>
+      <div className="hidden size-40 items-center justify-center rounded-lg bg-indigo-500 md:grid">size-40</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:size-16,size-20,size-24,size-32,size-40] -->
+<div class="size-16 ...">size-16</div>
+<div class="size-20 ...">size-20</div>
+<div class="size-24 ...">size-24</div>
+<div class="size-32 ...">size-32</div>
+<div class="size-40 ...">size-40</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="w" value="5px" name="width" variable="width" />
+
+### Responsive design
+
+<ResponsiveDesign property="width" defaultClass="w-1/2" featuredClass="w-full" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utilities={["w", "size"]} />

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

@@ -0,0 +1,47 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "will-change";
+export const description = "Utilities for optimizing upcoming animations of elements that are expected to change.";
+
+<ApiTable
+  rows={[
+    ["will-change-auto", "will-change: auto;"],
+    ["will-change-scroll", "will-change: scroll-position;"],
+    ["will-change-contents", "will-change: contents;"],
+    ["will-change-transform", "will-change: transform;"],
+    ["will-change-<custom-property>", "will-change: var(<custom-property>);"],
+    ["will-change-[<value>]", "will-change: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Optimizing with will change
+
+Use the `will-change-scroll`, `will-change-contents` and `will-change-transform` utilities to optimize an element that's expected to change in the near future by instructing the browser to prepare the necessary animation before it actually begins:
+
+```html
+<!-- [!code classes:will-change-scroll] -->
+<div class="overflow-auto will-change-scroll">
+  <!-- ... -->
+</div>
+```
+
+It's recommended that you apply these utilities just before an element changes, and then remove it shortly after it finishes using `will-change-auto`.
+
+The `will-change` property is intended to be used as a last resort when dealing with **known performance problems**. Avoid using these utilities too much, or simply in anticipation of performance issues, as it could actually cause the page to be less performant.
+
+### Using a custom value
+
+<UsingACustomValue
+  utility="will-change"
+  name={
+    <>
+      <code>will-change</code> property
+    </>
+  }
+  value="top,left"
+  variable="properties"
+/>

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

@@ -0,0 +1,94 @@
+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 = "word-break";
+export const description = "Utilities for controlling word breaks in an element.";
+
+<ApiTable
+  rows={[
+    ["break-normal", "word-break: normal;"],
+    ["break-all", "word-break: break-all;"],
+    ["break-keep", "word-break: keep-all;"],
+  ]}
+/>
+
+## Examples
+
+### Normal
+
+Use the `break-normal` utility to only add line breaks at normal word break points:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-normal text-gray-900 dark:text-gray-200">
+      The longest word in any of the major English language dictionaries is{" "}
+      <span className="font-bold">pneumonoultramicroscopicsilicovolcanoconiosis,</span> a word that refers to a lung
+      disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it
+      is the same as silicosis.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:break-normal] -->
+<p class="break-normal">The longest word in any of the major...</p>
+```
+
+</Figure>
+
+### Break All
+
+Use the `break-all` utility to add line breaks whenever necessary, without trying to preserve whole words:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-all text-gray-900 dark:text-gray-200">
+      The longest word in any of the major English language dictionaries is{" "}
+      <span className="font-bold">pneumonoultramicroscopicsilicovolcanoconiosis,</span> a word that refers to a lung
+      disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it
+      is the same as silicosis.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:break-all] -->
+<p class="break-all">The longest word in any of the major...</p>
+```
+
+</Figure>
+
+### Break Keep
+
+Use the `break-keep` utility to prevent line breaks from being applied to Chinese/Japanese/Korean (CJK) text:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-keep text-gray-900 dark:text-gray-200">
+      抗衡不屈不挠 (kànghéng bùqū bùnáo) 这是一个长词，意思是不畏强暴，奋勇抗争，坚定不移，永不放弃。
+      <span className="font-bold">这个词通常用来描述那些在面对困难和挑战时坚持自己信念的人，</span>{" "}
+      他们克服一切困难，不屈不挠地追求自己的目标。无论遇到多大的挑战，他们都能够坚持到底，不放弃，最终获得胜利。
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:break-keep] -->
+<p class="break-keep">抗衡不屈不挠...</p>
+```
+
+</Figure>
+
+For non-CJK text the `break-keep` utility has the same behavior as the `break-normal` utility.
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="word-break" defaultClass="break-normal" featuredClass="break-all" />