@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,104 @@
+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 = "cursor";
+export const description = "Utilities for controlling the cursor style when hovering over an element.";
+
+<ApiTable
+  rows={[
+    ["cursor-auto", "cursor: auto;"],
+    ["cursor-default", "cursor: default;"],
+    ["cursor-pointer", "cursor: pointer;"],
+    ["cursor-wait", "cursor: wait;"],
+    ["cursor-text", "cursor: text;"],
+    ["cursor-move", "cursor: move;"],
+    ["cursor-help", "cursor: help;"],
+    ["cursor-not-allowed", "cursor: not-allowed;"],
+    ["cursor-none", "cursor: none;"],
+    ["cursor-context-menu", "cursor: context-menu;"],
+    ["cursor-progress", "cursor: progress;"],
+    ["cursor-cell", "cursor: cell;"],
+    ["cursor-crosshair", "cursor: crosshair;"],
+    ["cursor-vertical-text", "cursor: vertical-text;"],
+    ["cursor-alias", "cursor: alias;"],
+    ["cursor-copy", "cursor: copy;"],
+    ["cursor-no-drop", "cursor: no-drop;"],
+    ["cursor-grab", "cursor: grab;"],
+    ["cursor-grabbing", "cursor: grabbing;"],
+    ["cursor-all-scroll", "cursor: all-scroll;"],
+    ["cursor-col-resize", "cursor: col-resize;"],
+    ["cursor-row-resize", "cursor: row-resize;"],
+    ["cursor-n-resize", "cursor: n-resize;"],
+    ["cursor-e-resize", "cursor: e-resize;"],
+    ["cursor-s-resize", "cursor: s-resize;"],
+    ["cursor-w-resize", "cursor: w-resize;"],
+    ["cursor-ne-resize", "cursor: ne-resize;"],
+    ["cursor-nw-resize", "cursor: nw-resize;"],
+    ["cursor-se-resize", "cursor: se-resize;"],
+    ["cursor-sw-resize", "cursor: sw-resize;"],
+    ["cursor-ew-resize", "cursor: ew-resize;"],
+    ["cursor-ns-resize", "cursor: ns-resize;"],
+    ["cursor-nesw-resize", "cursor: nesw-resize;"],
+    ["cursor-nwse-resize", "cursor: nwse-resize;"],
+    ["cursor-zoom-in", "cursor: zoom-in;"],
+    ["cursor-zoom-out", "cursor: zoom-out;"],
+    ["cursor-(<custom-property>)", "cursor: var(<custom-property>);"],
+    ["cursor-[<value>]", "cursor: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `cursor-pointer` and `cursor-grab` to control which cursor is displayed when hovering over an element:
+
+<Figure hint="Hover over each button to see the cursor change">
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-around gap-4 sm:flex-row sm:gap-0">
+      <button
+        type="button"
+        className="w-full cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-700 focus:outline-none disabled:bg-indigo-300 sm:w-auto dark:disabled:bg-indigo-800 dark:disabled:text-indigo-400"
+        tabIndex="-1"
+      >
+        Submit
+      </button>
+      <button
+        type="button"
+        className="w-full cursor-progress rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-700 focus:outline-none disabled:bg-indigo-300 sm:w-auto dark:disabled:bg-indigo-800 dark:disabled:text-indigo-400"
+        tabIndex="-1"
+      >
+        Saving...
+      </button>
+      <button
+        type="button"
+        disabled
+        className="w-full cursor-not-allowed rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-700 focus:outline-none disabled:bg-indigo-300 sm:w-auto dark:disabled:bg-indigo-800 dark:disabled:text-indigo-400"
+        tabIndex="-1"
+      >
+        Confirm
+      </button>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:cursor-pointer,cursor-progress,cursor-not-allowed] -->
+<button class="cursor-pointer ...">Submit</button>
+<button class="cursor-progress ...">Saving...</button>
+<button class="cursor-not-allowed ..." disabled>Confirm</button>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="button" utility="cursor" value="url(hand.cur),_pointer" />
+
+### Responsive design
+
+<ResponsiveDesign element="button" property="cursor" defaultClass="cursor-not-allowed" featuredClass="cursor-auto" />

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

@@ -0,0 +1,191 @@
+import { TipGood, TipBad, TipInfo } from "@/components/tips";
+import { Iframe } from "@/components/iframe";
+import { Example } from "@/components/example";
+import { Figure } from "@/components/figure";
+
+export const title = "Dark mode";
+export const description = "Using variants to style your site in dark mode.";
+
+## Overview
+
+Now that dark mode is a first-class feature of many operating systems, it's becoming more and more common to design a dark version of your website to go along with the default design.
+
+To make this as easy as possible, Tailwind includes a `dark` variant that lets you style your site differently when dark mode is enabled:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="grid grid-cols-1 sm:grid-cols-2">
+      <div className="p-8 pt-7">
+        <p className="mb-2 text-sm font-medium text-gray-500">Light mode</p>
+        <div className="rounded-lg bg-white px-6 py-8 shadow-xl ring ring-gray-900/5">
+          <div>
+            <span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
+              <svg
+                className="h-6 w-6 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                />
+              </svg>
+            </span>
+          </div>
+          <p className="mt-5 text-base font-medium tracking-tight text-gray-900">Writes upside-down</p>
+          <p
+            className="mt-2 text-sm text-gray-500"
+            children={`The Zero Gravity Pen can be used to write in any orientation,
+          including upside-down. It even works in outer space.`}
+          />
+        </div>
+      </div>
+      <div className="bg-gray-900 p-8 pt-7">
+        <p className="mb-2 text-sm font-medium text-gray-400">Dark mode</p>
+        <div className="rounded-lg bg-gray-800 px-6 py-8 shadow-xl ring ring-gray-900/5">
+          <div>
+            <span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
+              <svg
+                className="h-6 w-6 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                />
+              </svg>
+            </span>
+          </div>
+          <p className="mt-5 text-base font-medium tracking-tight text-white">Writes upside-down</p>
+          <p
+            className="mt-2 text-sm text-gray-400"
+            children={`The Zero Gravity Pen can be used to write in any orientation,
+          including upside-down. It even works in outer space.`}
+          />
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:dark\:bg-gray-800] -->
+<!-- prettier-ignore -->
+<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
+  <div>
+    <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
+      <svg class="h-6 w-6 stroke-white" ...>
+        <!-- ... -->
+      </svg>
+    </span>
+  </div>
+  <!-- prettier-ignore -->
+  <!-- [!code word:dark\:text-white] -->
+  <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3>
+  <!-- prettier-ignore -->
+  <!-- [!code word:dark\:text-gray-400] -->
+  <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm ">
+    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
+  </p>
+</div>
+```
+
+</Figure>
+
+By default this uses the `prefers-color-scheme` CSS media feature, but you can also build sites that support [toggling dark mode manually](#toggling-dark-mode-manually) by overriding the dark variant.
+
+## Toggling dark mode manually
+
+If you want your dark theme to be driven by a CSS selector instead of the `prefers-color-scheme` media query, override the `dark` variant to use your custom selector:
+
+```css
+/* [!code filename:app.css] */
+@import "tailwindcss";
+
+/* [!code highlight:2] */
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+Now instead of `dark:*` utilities being applied based on `prefers-color-scheme`, they will be applied whenever the `dark` class is present earlier in the HTML tree:
+
+```html
+<!-- [!code filename:HTML] -->
+<!-- [!code word:dark\:bg-black] -->
+<!-- [!code word:dark] -->
+<html class="dark">
+  <body>
+    <div class="bg-white dark:bg-black">
+      <!-- ... -->
+    </div>
+  </body>
+</html>
+```
+
+How you add the `dark` class to the `html` element is up to you, but a common approach is to use a bit of JavaScript that updates the `class` attribute and syncs that preference to somewhere like `localStorage`.
+
+### Using a data attribute
+
+To use a data attribute instead of a class to activate dark mode, just override the `dark` variant with an attribute selector instead:
+
+```css
+/* [!code filename:app.css] */
+@import "tailwindcss";
+
+/* [!code highlight:2] */
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+```
+
+Now dark mode utilities will be applied whenever the `data-theme` attribute is set to `dark` somewhere up the tree:
+
+```html
+<!-- [!code filename:HTML] -->
+<!-- [!code word:dark\:bg-black] -->
+<!-- [!code word:data-theme="dark"] -->
+<html data-theme="dark">
+  <body>
+    <div class="bg-white dark:bg-black">
+      <!-- ... -->
+    </div>
+  </body>
+</html>
+```
+
+### With system theme support
+
+To build three-way theme toggles that support light mode, dark mode, and your system theme, use a custom dark mode selector and the [`window.matchMedia()` API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to detect the system theme and update the `html` element when needed.
+
+Here's a simple example of how you can support light mode, dark mode, as well as respecting the operating system preference:
+
+```js
+// [!code filename:spaghetti.js]
+// On page load or when changing themes, best to add inline in `head` to avoid FOUC
+document.documentElement.classList.toggle(
+  "dark",
+  localStorage.theme === "dark" ||
+    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
+);
+
+// Whenever the user explicitly chooses light mode
+localStorage.theme = "light";
+
+// Whenever the user explicitly chooses dark mode
+localStorage.theme = "dark";
+
+// Whenever the user explicitly chooses to respect the OS preference
+localStorage.removeItem("theme");
+```
+
+Again you can manage this however you like, even storing the preference server-side in a database and rendering the class on the server — it's totally up to you.

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/detecting-classes-in-source-files.mdx

@@ -0,0 +1,315 @@
+import { TipGood, TipBad, TipInfo } from "@/components/tips";
+import { Iframe } from "@/components/iframe";
+import { Example } from "@/components/example";
+import { Figure } from "@/components/figure";
+import { CodeExampleStack } from "@/components/code-example";
+
+export const title = "Detecting classes in source files";
+export const description = "Understanding and customizing how Tailwind scans your source files.";
+
+## Overview
+
+Tailwind works by scanning your project for utility classes, then generating all of the necessary CSS based on the classes you've actually used.
+
+This makes sure your CSS is as small as possible, and is also what makes features like [arbitrary values](/docs/adding-custom-styles#using-arbitrary-values) possible.
+
+### How classes are detected
+
+Tailwind treats all of your source files as plain text, and doesn't attempt to actually parse your files as code in any way.
+
+Instead it just looks for any tokens in your file that could be classes based on which characters Tailwind is expecting in class names:
+
+```jsx
+// [!code filename:JSX]
+// [!code word:bg-blue-500]
+// [!code word:rounded-full]
+// [!code word:text-white]
+// [!code word:text-black]
+// [!code word:font-medium]
+// [!code word:text-sm\/6]
+// [!code word:font-sans]
+// [!code word:bg-black]
+// [!code word:bg-white]
+// [!code word:className]
+// [!code word:function]
+// [!code word:children]
+// [!code word:button]
+// [!code word:shadow]
+// [!code word:export]
+// [!code word:colors]
+// [!code word:color]
+// [!code word:black]
+// [!code word:white]
+// [!code word:const]
+// [!code word:blue]
+// [!code word:return]
+// [!code word:py-1.5]
+// [!code word:px-2]
+export function Button({ color, children }) {
+  const colors = {
+    black: "bg-black text-white",
+    blue: "bg-blue-500 text-white",
+    white: "bg-white text-black",
+  };
+
+  return (
+    <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}>
+      {children}
+    </button>
+  );
+}
+```
+
+Then it tries to generate the CSS for all of these tokens, throwing away any tokens that don't map to a utility class the framework knows about.
+
+### Dynamic class names
+
+Since Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using.
+
+<TipBad>{<>Don't construct class names dynamically</>}</TipBad>
+
+```html
+<!-- [!code filename:HTML] -->
+<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
+```
+
+In the example above, the strings `text-red-600` and `text-green-600` do not exist, so Tailwind will not generate those classes.
+
+Instead, make sure any class names you’re using exist in full:
+
+<TipGood>{<>Always use complete class names</>}</TipGood>
+
+```html
+<!-- [!code filename:HTML] -->
+<!-- [!code word:text-red-600] -->
+<!-- [!code word:text-green-600] -->
+<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
+```
+
+If you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes:
+
+<TipBad>Don't use props to build class names dynamically</TipBad>
+
+```jsx
+// [!code filename:JSX]
+function Button({ color, children }) {
+  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
+}
+```
+
+Instead, map props to complete class names that are statically detectable at build-time:
+
+<TipGood>Always map props to static class names</TipGood>
+
+```jsx
+// [!code filename:JSX]
+function Button({ color, children }) {
+  const colorVariants = {
+    blue: "bg-blue-600 hover:bg-blue-500",
+    red: "bg-red-600 hover:bg-red-500",
+  };
+
+  return <button className={`${colorVariants[color]} ...`}>{children}</button>;
+}
+```
+
+This has the added benefit of letting you map different prop values to different color shades for example:
+
+```jsx
+// [!code filename:JSX]
+function Button({ color, children }) {
+  const colorVariants = {
+    blue: "bg-blue-600 hover:bg-blue-500 text-white",
+    red: "bg-red-500 hover:bg-red-400 text-white",
+    yellow: "bg-yellow-300 hover:bg-yellow-400 text-black",
+  };
+
+  return <button className={`${colorVariants[color]} ...`}>{children}</button>;
+}
+```
+
+As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time.
+
+### Which files are scanned
+
+Tailwind will scan every file in your project for class names, except in the following cases:
+
+- Files that are in your `.gitignore` file
+- Files in the `node_modules` directory
+- Binary files like images, videos, or zip files
+- CSS files
+- Common package manager lock files
+
+If you need to scan any files that Tailwind is ignoring by default, you can [explicitly register](#explicitly-registering-sources) those sources.
+
+## Explicitly registering sources
+
+Use `@source` to explicitly register source paths relative to the stylesheet:
+
+```css
+/* [!code filename:CSS] */
+@import "tailwindcss";
+/* [!code highlight:2] */
+@source "../node_modules/@acmecorp/ui-lib";
+```
+
+This is especially useful when you need to scan an external library that is built with Tailwind, since dependencies are usually listed in your `.gitignore` file and ignored by Tailwind by default.
+
+### Setting your base path
+
+Tailwind uses the current working directory as its starting point when scanning for class names by default.
+
+To set the base path for source detection explicitly, use the `source()` function when importing Tailwind in your CSS:
+
+```css
+/* [!code filename:CSS] */
+/* [!code word:source("../src")] */
+@import "tailwindcss" source("../src");
+```
+
+This can be useful when working with monorepos where your build commands run from the root of the monorepo instead of the root of each project.
+
+### Ignoring specific paths
+
+Use `@source not` to ignore specific paths, relative to the stylesheet, when scanning for class names:
+
+```css
+/* [!code filename:CSS] */
+@import "tailwindcss";
+/* [!code highlight:2] */
+@source not "../src/components/legacy";
+```
+
+This is useful when you have large directories in your project that you know don't use Tailwind classes, like legacy components or third-party libraries.
+
+### Disabling automatic detection
+
+Use `source(none)` to completely disable automatic source detection if you want to register all of your sources explicitly:
+
+```css
+/* [!code filename:CSS] */
+/* [!code word:source("../src")] */
+@import "tailwindcss" source(none);
+
+@source "../admin";
+@source "../shared";
+```
+
+This can be useful in projects that have multiple Tailwind stylesheets where you want to make sure each one only includes the classes each stylesheet needs.
+
+## Safelisting specific utilities
+
+If you need to make sure Tailwind generates certain class names that don’t exist in your content files, use `@source inline()` to force them to be generated:
+
+<CodeExampleStack>
+```css
+/* [!code filename:CSS] */
+@import "tailwindcss";
+/* [!code highlight:2] */
+@source inline("underline");
+```
+
+```css
+/* [!code filename:Generated CSS] */
+.underline {
+  text-decoration-line: underline;
+}
+```
+
+</CodeExampleStack>
+
+### Safelisting variants
+
+You can also use `@source inline()` to generate classes with variants. For example, to generate the `underline` class with hover and focus variants, add `{hover:,focus:,}` to the source input:
+
+<CodeExampleStack>
+```css
+/* [!code filename:CSS] */
+@import "tailwindcss";
+/* [!code highlight:2] */
+@source inline("{hover:,focus:,}underline");
+```
+
+```css
+/* [!code filename:Generated CSS] */
+.underline {
+  text-decoration-line: underline;
+}
+@media (hover: hover) {
+  .hover\:underline:hover {
+    text-decoration-line: underline;
+  }
+}
+@media (focus: focus) {
+  .focus\:underline:focus {
+    text-decoration-line: underline;
+  }
+}
+```
+
+</CodeExampleStack>
+
+### Safelisting with ranges
+
+The source input is [brace expanded](https://www.gnu.org/software/bash/manual/html_node/Brace-Expansion.html), so you can generate multiple classes at once. For example, to generate all the red background colors with hover variants, use a range:
+
+<CodeExampleStack>
+```css
+/* [!code filename:CSS] */
+@import "tailwindcss";
+/* [!code highlight:2] */
+@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
+```
+
+```css
+/* [!code filename:Generated CSS] */
+.bg-red-50 {
+  background-color: var(--color-red-50);
+}
+.bg-red-100 {
+  background-color: var(--color-red-100);
+}
+.bg-red-200 {
+  background-color: var(--color-red-200);
+}
+
+/* ... */
+
+.bg-red-800 {
+  background-color: var(--color-red-800);
+}
+.bg-red-900 {
+  background-color: var(--color-red-900);
+}
+.bg-red-950 {
+  background-color: var(--color-red-950);
+}
+@media (hover: hover) {
+  .hover\:bg-red-50:hover {
+    background-color: var(--color-red-50);
+  }
+
+  /* ... */
+
+  .hover\:bg-red-950:hover {
+    background-color: var(--color-red-950);
+  }
+}
+```
+
+</CodeExampleStack>
+
+This generates red background colors from 100 to 900 in increments of 100, along with the first and last shades of 50 and 950. It also adds the `hover:` variant for each of those classes.
+
+### Explicitly excluding classes
+
+Use `@source not inline()` to prevent specific classes from being generated, even if they are detected in your source files:
+
+```css
+/* [!code filename:CSS] */
+@import "tailwindcss";
+/* [!code highlight:2] */
+@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");
+```
+
+This will explicitly exclude the red background utilities, along with their hover and focus variants, from being generated.