@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.47

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

@@ -0,0 +1,110 @@
+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 = "line-clamp";
+export const description = "Utilities for clamping text to a specific number of lines.";
+
+<ApiTable
+  rows={[
+    [
+      "line-clamp-<number>",
+      "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: <number>;",
+    ],
+    [
+      "line-clamp-none",
+      "overflow: visible;\ndisplay: block;\n-webkit-box-orient: horizontal;\n-webkit-line-clamp: unset;",
+    ],
+    [
+      "line-clamp-(<custom-property>)",
+      "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: var(<custom-property>);",
+    ],
+    [
+      "line-clamp-[<value>]",
+      "overflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: <value>;",
+    ],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `line-clamp-<number>` utilities like `line-clamp-2` and `line-clamp-3` to truncate multi-line text after a specific number of lines:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="px-4 sm:px-0">
+      <article className="mx-auto max-w-sm p-8 text-gray-700 dark:text-gray-400">
+        <time dateTime="2020-03-16" className="block text-sm leading-6 text-gray-500 dark:text-gray-400">
+          Mar 10, 2020
+        </time>
+        <div className="mt-2 text-lg font-semibold text-gray-900 dark:text-gray-200">Boost your conversion rate</div>
+        <p className="mt-4 line-clamp-3 text-sm leading-6 text-gray-500 dark:text-gray-400">
+          Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut
+          ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat
+          excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod
+          consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit
+          mollit officia ad enim sit consectetur enim.
+        </p>
+        <div className="mt-4 flex gap-x-2.5 text-sm leading-6 font-semibold text-gray-900 dark:text-gray-200">
+          <img
+            className="h-6 w-6 flex-none rounded-full bg-gray-50 dark:bg-gray-900"
+            src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+            alt=""
+          />
+          Lindsay Walton
+        </div>
+      </article>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:line-clamp-3] -->
+<article>
+  <time>Mar 10, 2020</time>
+  <h2>Boost your conversion rate</h2>
+  <p class="line-clamp-3">
+    Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut
+    sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat
+    dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt
+    ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur
+    enim.
+  </p>
+  <div>
+    <img src="/img/lindsay.jpg" />
+    Lindsay Walton
+  </div>
+</article>
+```
+
+</Figure>
+
+### Undoing line clamping
+
+Use `line-clamp-none` to undo a previously applied line clamp utility:
+
+```html
+<!-- [!code classes:lg:line-clamp-none] -->
+<p class="line-clamp-3 lg:line-clamp-none">
+  <!-- ... -->
+</p>
+```
+
+### Using a custom value
+
+<UsingACustomValue
+  element="p"
+  utility="line-clamp"
+  name="number of lines"
+  variable="line-count"
+  value="calc(var(--characters)/100)"
+/>
+
+### Responsive design
+
+<ResponsiveDesign property="line-clamp" defaultClass="line-clamp-3" featuredClass="line-clamp-4" />

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

@@ -0,0 +1,147 @@
+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 = "line-height";
+export const description = "Utilities for controlling the leading, or line height, of an element.";
+
+<ApiTable
+  rows={[
+    ["text-<size>/<number>", "font-size: <size>;\nline-height: calc(var(--spacing) * <number>);"],
+    ["text-<size>/(<custom-property>)", "font-size: <size>;\nline-height: var(<custom-property>);"],
+    ["text-<size>/[<value>]", "font-size: <size>;\nline-height: <value>;"],
+    ["leading-none", "line-height: 1;"],
+    ["leading-<number>", "line-height: calc(var(--spacing) * <number>);"],
+    ["leading-(<custom-property>)", "line-height: var(<custom-property>);"],
+    ["leading-[<value>]", "line-height: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use font size utilities like `text-sm/6` and `text-lg/7` to set the font size and line-height of an element at the same time:
+
+<Figure>
+
+<Example>{
+  <div className="flex flex-col gap-8">
+    <div>
+      <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/6</span>
+      <p className="text-sm/6 text-gray-900 dark:text-gray-200">
+        So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+        my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship
+        of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+      </p>
+    </div>
+    <div>
+      <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/7</span>
+      <p className="text-sm/7 text-gray-900 dark:text-gray-200">
+        So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+        my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship
+        of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+      </p>
+    </div>
+    <div>
+      <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">text-sm/8</span>
+      <p className="text-sm/8 text-gray-900 dark:text-gray-200">
+        So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+        my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship
+        of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+      </p>
+    </div>
+
+  </div>
+}</Example>
+
+```html
+<!-- [!code classes:text-base/6,text-base/7,text-base/8] -->
+<p class="text-base/6 ...">So I started to walk into the water...</p>
+<p class="text-base/7 ...">So I started to walk into the water...</p>
+<p class="text-base/8 ...">So I started to walk into the water...</p>
+```
+
+</Figure>
+
+Each font size utility also sets a default line height when one isn't provided. You can learn more about these values and how to customize them in the [font-size documentation](/docs/font-size).
+
+### Setting independently
+
+Use `leading-<number>` utilities like `leading-6` and `leading-7` to set the line height of an element independent of the font-size:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8">
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">leading-6</span>
+        <p className="leading-6 text-gray-900 dark:text-gray-200">
+          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
+          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">leading-7</span>
+        <p className="leading-7 text-gray-900 dark:text-gray-200">
+          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
+          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">leading-8</span>
+        <p className="leading-8 text-gray-900 dark:text-gray-200">
+          So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made
+          my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the
+          kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:leading-6,leading-7,leading-8] -->
+<p class="text-sm leading-6">So I started to walk into the water...</p>
+<p class="text-sm leading-7">So I started to walk into the water...</p>
+<p class="text-sm leading-8">So I started to walk into the water...</p>
+```
+
+</Figure>
+
+### Removing the leading
+
+Use the `leading-none` utility to set the line height of an element equal to its font size:
+
+<Figure>
+
+<Example>
+  {
+    <p className="mx-auto max-w-2xs text-2xl leading-none text-gray-900 dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:leading-none] -->
+<p class="text-2xl leading-none ...">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="p" utility="leading" name="line height" variable="line-height" value="1.5" />
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="line-height" defaultClass="leading-5" featuredClass="leading-6" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="leading" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/list-style-image.mdx

@@ -0,0 +1,80 @@
+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 = "list-style-image";
+export const description = "Utilities for controlling the marker images for list items.";
+
+<ApiTable
+  rows={[
+    ["list-image-[<value>]", "list-style-image: <value>;"],
+    ["list-image-(<custom-property>)", "list-style-image: var(<custom-property>);"],
+    ["list-image-none", "list-style-image: none;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `list-image-[<value>]` syntax to control the marker image for list items:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="px-4 sm:px-0">
+      <div className="mx-auto max-w-sm p-8 text-gray-700 sm:text-base sm:leading-7 dark:text-gray-400">
+        <ul className="list-image-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjMzhiZGY4Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy42ODUuMTUzYS43NTIuNzUyIDAgMCAxIC4xNDMgMS4wNTJsLTggMTAuNWEuNzUuNzUgMCAwIDEtMS4xMjcuMDc1bC00LjUtNC41YS43NS43NSAwIDAgMSAxLjA2LTEuMDZsMy44OTQgMy44OTMgNy40OC05LjgxN2EuNzUuNzUgMCAwIDEgMS4wNS0uMTQzWiIgLz48L3N2Zz4=')] pl-4 text-gray-900 dark:text-gray-200">
+          <li className="pl-2">5 cups chopped Porcini mushrooms</li>
+          <li className="pl-2">1/2 cup of olive oil</li>
+          <li className="pl-2">3lb of celery</li>
+        </ul>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:list-image-[url(/img/checkmark.png)]] -->
+<ul class="list-image-[url(/img/checkmark.png)]">
+  <li>5 cups chopped Porcini mushrooms</li>
+  <!-- ... -->
+</ul>
+```
+
+</Figure>
+
+### Using a CSS variable
+
+Use the <code>list-image-{'(<custom-property>)'}</code> syntax to control the marker image for list items using a CSS variable:
+
+```html
+<!-- [!code classes:list-image-(--my-list-image)] -->
+<ul class="list-image-(--my-list-image)">
+  <!-- ... -->
+</ul>
+```
+
+This is just a shorthand for <code>list-image-{'[var(<custom-property>)]'}</code> that adds the `var()` function for you automatically.
+
+### Removing a marker image
+
+Use the `list-image-none` utility to remove an existing marker image from list items:
+
+```html
+<!-- [!code classes:list-image-none] -->
+<ul class="list-image-none">
+  <!-- ... -->
+</ul>
+```
+
+### Responsive design
+
+<ResponsiveDesign
+  property="list-style-image"
+  defaultClass="list-image-none"
+  featuredClass="list-image-[url(/img/checkmark.png)]"
+  element="ul"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/list-style-position.mdx

@@ -0,0 +1,67 @@
+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 = "list-style-position";
+export const description = "Utilities for controlling the position of bullets and numbers in lists.";
+
+<ApiTable
+  rows={[
+    ["list-inside", "list-style-position: inside;"],
+    ["list-outside", "list-style-position: outside;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `list-inside` and `list-outside` to control the position of the markers and text indentation in a list:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8 sm:flex-row">
+      <div className="relative">
+        <div className="absolute -top-8 -bottom-8 left-8 w-px bg-pink-400/40 dark:bg-pink-400/30"></div>
+        <p className="mb-3 ml-8 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-inside</p>
+        <ul className="list-inside list-disc rounded-xl p-4 pl-8 text-gray-900 dark:text-gray-200">
+          <li>5 cups chopped Porcini mushrooms</li>
+          <li>1/2 cup of olive oil</li>
+          <li>3lb of celery</li>
+        </ul>
+      </div>
+      <div className="relative">
+        <div className="absolute -top-0 -bottom-8 left-8 w-px bg-pink-400/40 sm:-top-8 dark:bg-pink-400/30"></div>
+        <p className="mb-3 ml-8 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-outside</p>
+        <ul className="list-outside list-disc rounded-xl p-4 pl-8 text-gray-900 dark:text-gray-200">
+          <li>5 cups chopped Porcini mushrooms</li>
+          <li>1/2 cup of olive oil</li>
+          <li>3lb of celery</li>
+        </ul>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:list-inside] -->
+<ul class="list-inside">
+  <li>5 cups chopped Porcini mushrooms</li>
+  <!-- ... -->
+</ul>
+
+<!-- [!code classes:list-outside] -->
+<ul class="list-outside">
+  <li>5 cups chopped Porcini mushrooms</li>
+  <!-- ... -->
+</ul>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign element="ul" property="list-style-position" defaultClass="list-outside" featuredClass="list-inside" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/list-style-type.mdx

@@ -0,0 +1,86 @@
+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 = "list-style-type";
+export const description = "Utilities for controlling the marker style of a list.";
+
+<ApiTable
+  rows={[
+    ["list-disc", "list-style-type: disc;"],
+    ["list-decimal", "list-style-type: decimal;"],
+    ["list-none", "list-style-type: none;"],
+    ["list-(<custom-property>)", "list-style-type: var(<custom-property>);"],
+    ["list-[<value>]", "list-style-type: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `list-disc` and `list-decimal` to control the style of the markers in a list:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8">
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-disc</span>
+        <ul className="list-inside list-disc text-gray-900 dark:text-gray-200">
+          <li>Now this is a story all about how, my life got flipped-turned upside down</li>
+          <li>And I'd like to take a minute just sit right there</li>
+          <li>I'll tell you how I became the prince of a town called Bel-Air</li>
+        </ul>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-decimal</span>
+        <ul className="list-inside list-decimal text-gray-900 dark:text-gray-200">
+          <li>Now this is a story all about how, my life got flipped-turned upside down</li>
+          <li>And I'd like to take a minute just sit right there</li>
+          <li>I'll tell you how I became the prince of a town called Bel-Air</li>
+        </ul>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-none</span>
+        <ul className="list-inside list-none text-gray-900 dark:text-gray-200">
+          <li>Now this is a story all about how, my life got flipped-turned upside down</li>
+          <li>And I'd like to take a minute just sit right there</li>
+          <li>I'll tell you how I became the prince of a town called Bel-Air</li>
+        </ul>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:list-disc] -->
+<ul class="list-disc">
+  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
+  <!-- ... -->
+</ul>
+
+<!-- [!code classes:list-decimal] -->
+<ol class="list-decimal">
+  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
+  <!-- ... -->
+</ol>
+
+<!-- [!code classes:list-none] -->
+<ul class="list-none">
+  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
+  <!-- ... -->
+</ul>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="ol" utility="list" name="marker" value="upper-roman" variable="marker" />
+
+### Responsive design
+
+<ResponsiveDesign element="ul" property="list-style-type" defaultClass="list-none" featuredClass="list-disc" />