@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,113 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, TargetingSpecificStates, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "filter";
+export const description = "Utilities for applying filters to an element.";
+
+<ApiTable
+  rows={[
+    ["filter-none", "filter: none;"],
+    ["filter-(<custom-property>)", "filter: var(<custom-property>);"],
+    ["filter-[<value>]", "filter: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `blur-xs` and `grayscale` to apply filters to an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-12 p-8 font-mono font-bold sm:gap-4">
+        <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">blur-xs</p>
+          <div className="relative blur-xs">
+            <img
+              className="size-24 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </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">grayscale</p>
+          <div className="relative grayscale">
+            <img
+              className="size-24 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </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 italic dark:text-gray-400">
+            combined
+          </p>
+          <div className="relative blur-xs grayscale">
+            <img
+              className="size-24 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:blur-xs,grayscale] -->
+<img class="blur-xs" src="/img/mountains.jpg" />
+<img class="grayscale" src="/img/mountains.jpg" />
+<img class="blur-xs grayscale" src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+You can combine the following filter utilities: [blur](/docs/filter-blur), [brightness](/docs/filter-brightness), [contrast](/docs/filter-contrast), [drop-shadow](/docs/filter-drop-shadow), [grayscale](/docs/filter-grayscale), [hue-rotate](/docs/filter-hue-rotate), [invert](/docs/filter-invert), [saturate](/docs/filter-saturate), and [sepia](/docs/filter-sepia).
+
+### Removing filters
+
+Use the `filter-none` utility to remove all of the filters applied to an element:
+
+```html
+<!-- [!code classes:md:filter-none] -->
+<img class="blur-md brightness-150 invert md:filter-none" src="/img/mountains.jpg" />
+```
+
+### Using a custom value
+
+<UsingACustomValue
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  utility="filter"
+  value="url('filters.svg#filter-id')"
+/>
+
+### Applying on hover
+
+<TargetingSpecificStates
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  property="filter"
+  defaultClass="blur-sm"
+  featuredClass="filter-none"
+/>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  property="filter"
+  defaultClass="blur-sm"
+  featuredClass="filter-none"
+/>

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

@@ -0,0 +1,144 @@
+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 = "flex-basis";
+export const description = "Utilities for controlling the initial size of flex items.";
+
+<ApiTable
+  rows={[
+    ["basis-<number>", "flex-basis: calc(var(--spacing) * <number>);"],
+    ["basis-<fraction>", "flex-basis: calc(<fraction> * 100%);"],
+    ["basis-full", "flex-basis: 100%;"],
+    ["basis-auto", "flex-basis: auto;"],
+    ["basis-3xs", "flex-basis: var(--container-3xs); /* 16rem (256px) */"],
+    ["basis-2xs", "flex-basis: var(--container-2xs); /* 18rem (288px) */"],
+    ["basis-xs", "flex-basis: var(--container-xs); /* 20rem (320px) */"],
+    ["basis-sm", "flex-basis: var(--container-sm); /* 24rem (384px) */"],
+    ["basis-md", "flex-basis: var(--container-md); /* 28rem (448px) */"],
+    ["basis-lg", "flex-basis: var(--container-lg); /* 32rem (512px) */"],
+    ["basis-xl", "flex-basis: var(--container-xl); /* 36rem (576px) */"],
+    ["basis-2xl", "flex-basis: var(--container-2xl); /* 42rem (672px) */"],
+    ["basis-3xl", "flex-basis: var(--container-3xl); /* 48rem (768px) */"],
+    ["basis-4xl", "flex-basis: var(--container-4xl); /* 56rem (896px) */"],
+    ["basis-5xl", "flex-basis: var(--container-5xl); /* 64rem (1024px) */"],
+    ["basis-6xl", "flex-basis: var(--container-6xl); /* 72rem (1152px) */"],
+    ["basis-7xl", "flex-basis: var(--container-7xl); /* 80rem (1280px) */"],
+    ["basis-(<custom-property>)", "flex-basis: var(<custom-property>);"],
+    ["basis-[<value>]", "flex-basis: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Using the spacing scale
+
+Use `basis-<number>` utilities like `basis-64` and `basis-128` to set the initial size of flex items based on the spacing scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-row space-x-4 font-mono text-sm leading-6 font-bold text-white">
+      <div className="flex h-14 basis-64 items-center justify-center rounded-lg bg-purple-500">01</div>
+      <div className="flex h-14 basis-64 items-center justify-center rounded-lg bg-purple-500">02</div>
+      <div className="flex h-14 basis-128 items-center justify-center rounded-lg bg-purple-500">03</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:basis-64,basis-128] -->
+<div class="flex flex-row">
+  <div class="basis-64">01</div>
+  <div class="basis-64">02</div>
+  <div class="basis-128">03</div>
+</div>
+```
+
+</Figure>
+
+### Using the container scale
+
+Use utilities like `basis-xs` and `basis-sm` to set the initial size of flex items based on the container scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-row space-x-4 font-mono text-sm leading-6 font-bold text-white">
+      <div className="flex h-14 basis-3xs items-center justify-center rounded-lg bg-sky-500">01</div>
+      <div className="flex h-14 basis-2xs items-center justify-center rounded-lg bg-sky-500">02</div>
+      <div className="flex h-14 basis-xs items-center justify-center rounded-lg bg-sky-500">03</div>
+      <div className="flex h-14 basis-sm items-center justify-center rounded-lg bg-sky-500">04</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:basis-3xs,basis-2xs,basis-xs,basis-sm] -->
+<div class="flex flex-row">
+  <div class="basis-3xs">01</div>
+  <div class="basis-2xs">02</div>
+  <div class="basis-xs">03</div>
+  <div class="basis-sm">04</div>
+</div>
+```
+
+</Figure>
+
+### Using percentages
+
+Use `basis-<fraction>` utilities like `basis-1/2` and `basis-2/3` to set the initial size of flex items:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-row space-x-4 font-mono text-sm leading-6 font-bold text-white">
+      <div className="flex h-14 basis-1/3 items-center justify-center rounded-lg bg-indigo-500">01</div>
+      <div className="flex h-14 basis-2/3 items-center justify-center rounded-lg bg-indigo-500">02</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:basis-1/3,basis-2/3] -->
+<div class="flex flex-row">
+  <div class="basis-1/3">01</div>
+  <div class="basis-2/3">02</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="basis" value="30vw" />
+
+### Responsive design
+
+<ResponsiveDesign property="flex-basis">
+
+```html
+<!-- [!code classes:md:basis-1/3] -->
+<div class="flex flex-row">
+  <div class="basis-1/4 md:basis-1/3">01</div>
+  <div class="basis-1/4 md:basis-1/3">02</div>
+  <div class="basis-1/2 md:basis-1/3">03</div>
+</div>
+```
+
+</ResponsiveDesign>
+
+## Customizing your theme
+
+<CustomizingYourTheme
+  utility="basis"
+  themeKey="container"
+  name="fixed-width basis"
+  customName="4xs"
+  customValue="14rem"
+  includeSpacingNote
+/>

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

@@ -0,0 +1,130 @@
+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 = "flex-direction";
+export const description = "Utilities for controlling the direction of flex items.";
+
+<ApiTable
+  rows={[
+    ["flex-row", "flex-direction: row;"],
+    ["flex-row-reverse", "flex-direction: row-reverse;"],
+    ["flex-col", "flex-direction: column;"],
+    ["flex-col-reverse", "flex-direction: column-reverse;"],
+  ]}
+/>
+
+## Examples
+
+### Row
+
+Use `flex-row` to position flex items horizontally in the same direction as text:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-row gap-x-4 font-mono text-sm leading-6 font-bold text-white">
+      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
+      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
+      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:flex-row] -->
+<div class="flex flex-row ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Row reversed
+
+Use `flex-row-reverse` to position flex items horizontally in the opposite direction:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-row-reverse gap-x-4 space-x-reverse font-mono text-sm leading-6 font-bold text-white">
+      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-blue-500">01</div>
+      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-blue-500">02</div>
+      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-blue-500">03</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:flex-row-reverse] -->
+<div class="flex flex-row-reverse ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Column
+
+Use `flex-col` to position flex items vertically:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto flex max-w-xs flex-col space-y-4 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>
+  }
+</Example>
+
+```html
+<!-- [!code classes:flex-col] -->
+<div class="flex flex-col ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Column reversed
+
+Use `flex-col-reverse` to position flex items vertically in the opposite direction:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto flex max-w-xs flex-col-reverse space-y-4 space-y-reverse font-mono text-sm leading-6 font-bold text-white">
+      <div className="flex items-center justify-center rounded-lg bg-purple-500 p-4">01</div>
+      <div className="flex items-center justify-center rounded-lg bg-purple-500 p-4">02</div>
+      <div className="flex items-center justify-center rounded-lg bg-purple-500 p-4">03</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:flex-col-reverse] -->
+<div class="flex flex-col-reverse ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="flex-direction" defaultClass="flex flex-col" featuredClass="flex-row" />

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

@@ -0,0 +1,129 @@
+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 { Stripes } from "@/components/stripes.tsx";
+
+export const title = "flex-grow";
+export const description = "Utilities for controlling how flex items grow.";
+
+<ApiTable
+  rows={[
+    ["grow", "flex-grow: 1;"],
+    ["grow-<number>", "flex-grow: <number>;"],
+    ["grow-[<value>]", "flex-grow: <value>;"],
+    ["grow-(<custom-property>)", "flex-grow: var(<custom-property>);"],
+  ]}
+/>
+
+## Examples
+
+### Allowing items to grow
+
+Use `grow` to allow a flex item to grow to fill any available space:
+
+<Figure>
+
+<Example resizable>
+  {
+    <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 gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex size-14 flex-none items-center justify-center rounded-lg bg-sky-300 dark:bg-sky-800 dark:text-sky-400">
+          01
+        </div>
+        <div className="flex size-14 grow items-center justify-center rounded-lg bg-sky-500 p-4">02</div>
+        <div className="flex size-14 flex-none items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-400">
+          03
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:grow] -->
+<div class="flex ...">
+  <div class="size-14 flex-none ...">01</div>
+  <div class="size-14 grow ...">02</div>
+  <div class="size-14 flex-none ...">03</div>
+</div>
+```
+
+</Figure>
+
+### Growing items based on factor
+
+Use `grow-<number>` utilities like `grow-3` to make flex items grow proportionally based on their growth factor, allowing them to fill the available space relative to each other:
+
+<Figure>
+
+<Example resizable>
+  {
+    <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 gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex size-14 grow-3 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
+          01
+        </div>
+        <div className="flex size-14 grow-7 items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
+        <div className="flex size-14 grow-3 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:grow-3,grow-7] -->
+<div class="flex ...">
+  <div class="size-14 grow-3 ...">01</div>
+  <div class="size-14 grow-7 ...">02</div>
+  <div class="size-14 grow-3 ...">03</div>
+</div>
+```
+
+</Figure>
+
+### Preventing items from growing
+
+Use `grow-0` to prevent a flex item from growing:
+
+<Figure>
+
+<Example resizable>
+  {
+    <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 gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex size-14 grow items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
+          01
+        </div>
+        <div className="flex size-14 shrink-0 grow-0 items-center justify-center rounded-lg bg-pink-500">02</div>
+        <div className="hidden size-14 grow items-center justify-center rounded-lg bg-pink-300 p-4 md:flex dark:bg-pink-800 dark:text-pink-400">
+          03
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:grow-0] -->
+<div class="flex ...">
+  <div class="size-14 grow ...">01</div>
+  <div class="size-14 grow-0 ...">02</div>
+  <div class="size-14 grow ...">03</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="grow" name="flex grow factor" value="25vw" />
+
+### Responsive design
+
+<ResponsiveDesign property="flex-grow" defaultClass="grow" featuredClass="grow-0" />

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

@@ -0,0 +1,95 @@
+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 { Stripes } from "@/components/stripes.tsx";
+
+export const title = "flex-shrink";
+export const description = "Utilities for controlling how flex items shrink.";
+
+<ApiTable
+  rows={[
+    ["shrink", "flex-shrink: 1;"],
+    ["shrink-<number>", "flex-shrink: <number>;"],
+    ["shrink-[<value>]", "flex-shrink: <value>;"],
+    ["shrink-(<custom-property>)", "flex-shrink: var(<custom-property>);"],
+  ]}
+/>
+
+## Examples
+
+### Allowing flex items to shrink
+
+Use `shrink` to allow a flex item to shrink if needed:
+
+<Figure>
+
+<Example resizable>
+  {
+    <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 gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 w-14 flex-none items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-400">
+          01
+        </div>
+        <div className="flex h-14 w-64 shrink items-center justify-center rounded-lg bg-sky-500 p-4">02</div>
+        <div className="hidden h-14 w-14 flex-none items-center justify-center rounded-lg bg-sky-300 p-4 sm:flex dark:bg-sky-800 dark:text-sky-400">
+          03
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:shrink] -->
+<div class="flex ...">
+  <div class="h-14 w-14 flex-none ...">01</div>
+  <div class="h-14 w-64 shrink ...">02</div>
+  <div class="h-14 w-14 flex-none ...">03</div>
+</div>
+```
+
+</Figure>
+
+### Preventing items from shrinking
+
+Use `shrink-0` to prevent a flex item from shrinking:
+
+<Figure>
+
+<Example resizable>
+  {
+    <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 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-blue-300 p-4 dark:bg-blue-800 dark:text-blue-500">
+          01
+        </div>
+        <div className="flex w-16 shrink-0 items-center justify-center rounded-lg bg-blue-500 p-4 sm:w-64">02</div>
+        <div className="hidden flex-1 items-center justify-center rounded-lg bg-blue-300 p-4 sm:flex dark:bg-blue-800 dark:text-blue-500">
+          03
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:shrink-0] -->
+<div class="flex ...">
+  <div class="h-16 flex-1 ...">01</div>
+  <div class="h-16 w-32 shrink-0 ...">02</div>
+  <div class="h-16 flex-1 ...">03</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="shrink" name="flex shrink factor" value="calc(100vw-var(--sidebar))" />
+
+### Responsive design
+
+<ResponsiveDesign property="flex-shrink" defaultClass="shrink" featuredClass="shrink-0" />