@elmeragroup/fuse 0.1.0-canary.1

package/styles/date-field.js

@@ -0,0 +1,38 @@
+import { controlMdInsetTypeClass } from "./control-size-md.js";
+import { tv } from "tailwind-variants";
+//#region src/styles/date-field.ts
+/**
+* DateField's slotted recipe. Package-private: no entry re-exports it. Every RAC entry
+* keeps its recipe in `src/styles/`.
+*
+* `DateInput` hands the `input` slot to the shared `fieldGroupVariants` as `class`, and
+* that recipe pins the md control height, so this recipe has no `size` axis. The `input`
+* slot carries the md inset so the segment row lines up with Input at both densities. It
+* sets no `py-*` and no display, because the field group owns the box height and its flex
+* layout.
+*/
+const dateFieldVariants = tv({
+	slots: {
+		base: "flex flex-col gap-1",
+		input: controlMdInsetTypeClass,
+		segment: "inline rounded-xs p-0.5 text-foreground caret-transparent outline outline-0 forced-color-adjust-none forced-colors:text-[ButtonText] type-literal:px-0"
+	},
+	variants: {
+		/**
+		* Who paints the field box. A lone field paints its own and floors it at 150px. Inside
+		* a picker the FieldGroup paints it and the picker recipe sets the floor.
+		*/
+		surface: {
+			own: { input: "min-w-[150px]" },
+			group: { input: "" }
+		},
+		isPlaceholder: { true: { segment: "text-muted-foreground italic" } },
+		isDisabled: { true: { segment: "text-muted-foreground forced-colors:text-[GrayText]" } },
+		isFocused: { true: { segment: "bg-primary text-primary-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]" } }
+	},
+	defaultVariants: { surface: "own" }
+});
+//#endregion
+export { dateFieldVariants };
+
+//# sourceMappingURL=date-field.js.map

package/styles/date-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.js","names":[],"sources":["../../src/styles/date-field.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { controlMdInsetTypeClass } from \"./control-size-md\";\n\n/**\n * DateField's slotted recipe. Package-private: no entry re-exports it. Every RAC entry\n * keeps its recipe in `src/styles/`.\n *\n * `DateInput` hands the `input` slot to the shared `fieldGroupVariants` as `class`, and\n * that recipe pins the md control height, so this recipe has no `size` axis. The `input`\n * slot carries the md inset so the segment row lines up with Input at both densities. It\n * sets no `py-*` and no display, because the field group owns the box height and its flex\n * layout.\n */\nexport const dateFieldVariants = tv({\n  slots: {\n    // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- label/input stack gap is layout, not a control rung\n    base: \"flex flex-col gap-1\",\n    input: controlMdInsetTypeClass,\n    segment:\n      // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- type-literal segments carry no inline padding\n      \"inline rounded-xs p-0.5 text-foreground caret-transparent outline outline-0 forced-color-adjust-none forced-colors:text-[ButtonText] type-literal:px-0\",\n  },\n  variants: {\n    /**\n     * Who paints the field box. A lone field paints its own and floors it at 150px. Inside\n     * a picker the FieldGroup paints it and the picker recipe sets the floor.\n     */\n    surface: {\n      own: { input: \"min-w-[150px]\" },\n      group: { input: \"\" },\n    },\n    isPlaceholder: {\n      true: {\n        segment: \"text-muted-foreground italic\",\n      },\n    },\n    isDisabled: {\n      true: {\n        segment: \"text-muted-foreground forced-colors:text-[GrayText]\",\n      },\n    },\n    isFocused: {\n      true: {\n        segment:\n          \"bg-primary text-primary-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]\",\n      },\n    },\n  },\n  defaultVariants: {\n    surface: \"own\",\n  },\n});\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,oBAAoB,GAAG;CAClC,OAAO;EAEL,MAAM;EACN,OAAO;EACP,SAEE;CACJ;CACA,UAAU;;;;;EAKR,SAAS;GACP,KAAK,EAAE,OAAO,gBAAgB;GAC9B,OAAO,EAAE,OAAO,GAAG;EACrB;EACA,eAAe,EACb,MAAM,EACJ,SAAS,+BACX,EACF;EACA,YAAY,EACV,MAAM,EACJ,SAAS,sDACX,EACF;EACA,WAAW,EACT,MAAM,EACJ,SACE,qGACJ,EACF;CACF;CACA,iBAAiB,EACf,SAAS,MACX;AACF,CAAC"}

package/styles/field-box.d.ts

@@ -0,0 +1,48 @@
+//#region src/styles/field-box.d.ts
+/**
+ * The field box chrome: elevation, radius, hairline border, fill and the transition that
+ * animates them. {@link fieldBox} paints it for Input and Textarea. RAC
+ * `fieldGroupVariants`, Select's trigger and NumberField's group paint it without being
+ * `fieldBox` variants.
+ *
+ * `field-box.test.ts` pins the tokens. `internal-stack.test.ts` checks that each token
+ * reaches every consumer's merged classes and that no consumer adds a second radius or
+ * elevation rung. `date-field.browser.test.tsx` compares the computed radius and shadow of
+ * two rendered boxes.
+ */
+export declare const fieldBoxChromeClass: string;
+/**
+ * NumberField group chrome — same elevation as Input, `within` focus. The group box is the
+ * control, so it takes the within-target state face: it dims once and shows the
+ * `not-allowed` cursor when its own `data-focus-ring-control` input, a direct child, is
+ * disabled, and the input and steppers inside inherit that dim rather than painting their
+ * own. The group also carries `aria-invalid` itself, so it takes the aria-target face for
+ * the invalid look.
+ */
+export declare const numberFieldGroupClass: string;
+/**
+ * Package-private field-box chrome shared by Input and Textarea. Hosts add only
+ * per-control deltas. The `box` axis picks the height model: `control` pins the
+ * md control rung, `content` grows with its content — no host may cancel a
+ * recipe class via twMerge. The disabled and invalid looks are the native-target state
+ * face, whose `aria-disabled` arm dims an `aria-disabled` box as the gate stills it; the box
+ * adds only its disabled fill.
+ */
+export declare const fieldBox: import("tailwind-variants").TVReturnType<{
+  box: {
+    control: "h-(--control-h-md) py-0";
+    content: "min-h-16 py-2";
+  };
+}, undefined, string, {
+  box: {
+    control: "h-(--control-h-md) py-0";
+    content: "min-h-16 py-2";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  box: {
+    control: "h-(--control-h-md) py-0";
+    content: "min-h-16 py-2";
+  };
+}, undefined>>;
+//#endregion
+//# sourceMappingURL=field-box.d.ts.map

package/styles/field-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-box.d.ts","names":[],"sources":["../../src/styles/field-box.ts"],"mappings":";;;;;;;;;;;;qBAkBa;;;;;;;;;qBAYA;;;;;;;;;qBAgBA,sCAAQ"}

package/styles/field-box.js

@@ -0,0 +1,47 @@
+import { cn } from "./cn.js";
+import { ariaStateFaceClass, nativeStateFaceClass, withinStateFaceClass } from "./state-face.js";
+import { selfFocusRingClass, withinFocusRingClass } from "./utils.js";
+import { controlMdInsetTypeClass } from "./control-size-md.js";
+import { tv } from "tailwind-variants";
+//#region src/styles/field-box.ts
+/**
+* The field box chrome: elevation, radius, hairline border, fill and the transition that
+* animates them. {@link fieldBox} paints it for Input and Textarea. RAC
+* `fieldGroupVariants`, Select's trigger and NumberField's group paint it without being
+* `fieldBox` variants.
+*
+* `field-box.test.ts` pins the tokens. `internal-stack.test.ts` checks that each token
+* reaches every consumer's merged classes and that no consumer adds a second radius or
+* elevation rung. `date-field.browser.test.tsx` compares the computed radius and shadow of
+* two rendered boxes.
+*/
+const fieldBoxChromeClass = cn("shadow-xs box-border rounded-md border border-input bg-card transition-[color,border-color,box-shadow]");
+/**
+* NumberField group chrome — same elevation as Input, `within` focus. The group box is the
+* control, so it takes the within-target state face: it dims once and shows the
+* `not-allowed` cursor when its own `data-focus-ring-control` input, a direct child, is
+* disabled, and the input and steppers inside inherit that dim rather than painting their
+* own. The group also carries `aria-invalid` itself, so it takes the aria-target face for
+* the invalid look.
+*/
+const numberFieldGroupClass = cn(fieldBoxChromeClass, "flex h-(--control-h-md) w-full min-w-0 items-center overflow-hidden", withinStateFaceClass, ariaStateFaceClass, withinFocusRingClass);
+/**
+* Package-private field-box chrome shared by Input and Textarea. Hosts add only
+* per-control deltas. The `box` axis picks the height model: `control` pins the
+* md control rung, `content` grows with its content — no host may cancel a
+* recipe class via twMerge. The disabled and invalid looks are the native-target state
+* face, whose `aria-disabled` arm dims an `aria-disabled` box as the gate stills it; the box
+* adds only its disabled fill.
+*/
+const fieldBox = tv({
+	base: cn(fieldBoxChromeClass, "w-full", controlMdInsetTypeClass, "placeholder:text-muted-foreground disabled:bg-input/50", nativeStateFaceClass, selfFocusRingClass),
+	variants: { box: {
+		control: "h-(--control-h-md) py-0",
+		content: "min-h-16 py-2"
+	} },
+	defaultVariants: { box: "control" }
+});
+//#endregion
+export { fieldBox, fieldBoxChromeClass, numberFieldGroupClass };
+
+//# sourceMappingURL=field-box.js.map

package/styles/field-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-box.js","names":[],"sources":["../../src/styles/field-box.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { cn } from \"./cn\";\nimport { controlMdInsetTypeClass } from \"./control-size-md\";\nimport { ariaStateFaceClass, nativeStateFaceClass, withinStateFaceClass } from \"./state-face\";\nimport { selfFocusRingClass, withinFocusRingClass } from \"./utils\";\n\n/**\n * The field box chrome: elevation, radius, hairline border, fill and the transition that\n * animates them. {@link fieldBox} paints it for Input and Textarea. RAC\n * `fieldGroupVariants`, Select's trigger and NumberField's group paint it without being\n * `fieldBox` variants.\n *\n * `field-box.test.ts` pins the tokens. `internal-stack.test.ts` checks that each token\n * reaches every consumer's merged classes and that no consumer adds a second radius or\n * elevation rung. `date-field.browser.test.tsx` compares the computed radius and shadow of\n * two rendered boxes.\n */\nexport const fieldBoxChromeClass = cn(\n  \"shadow-xs box-border rounded-md border border-input bg-card transition-[color,border-color,box-shadow]\"\n);\n\n/**\n * NumberField group chrome — same elevation as Input, `within` focus. The group box is the\n * control, so it takes the within-target state face: it dims once and shows the\n * `not-allowed` cursor when its own `data-focus-ring-control` input, a direct child, is\n * disabled, and the input and steppers inside inherit that dim rather than painting their\n * own. The group also carries `aria-invalid` itself, so it takes the aria-target face for\n * the invalid look.\n */\nexport const numberFieldGroupClass = cn(\n  fieldBoxChromeClass,\n  \"flex h-(--control-h-md) w-full min-w-0 items-center overflow-hidden\",\n  withinStateFaceClass,\n  ariaStateFaceClass,\n  withinFocusRingClass\n);\n\n/**\n * Package-private field-box chrome shared by Input and Textarea. Hosts add only\n * per-control deltas. The `box` axis picks the height model: `control` pins the\n * md control rung, `content` grows with its content — no host may cancel a\n * recipe class via twMerge. The disabled and invalid looks are the native-target state\n * face, whose `aria-disabled` arm dims an `aria-disabled` box as the gate stills it; the box\n * adds only its disabled fill.\n */\nexport const fieldBox = tv({\n  base: cn(\n    fieldBoxChromeClass,\n    \"w-full\",\n    controlMdInsetTypeClass,\n    \"placeholder:text-muted-foreground disabled:bg-input/50\",\n    nativeStateFaceClass,\n    selfFocusRingClass\n  ),\n  variants: {\n    box: {\n      control: \"h-(--control-h-md) py-0\",\n      content: \"min-h-16 py-2\",\n    },\n  },\n  defaultVariants: {\n    box: \"control\",\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAa,sBAAsB,GACjC,wGACF;;;;;;;;;AAUA,MAAa,wBAAwB,GACnC,qBACA,uEACA,sBACA,oBACA,oBACF;;;;;;;;;AAUA,MAAa,WAAW,GAAG;CACzB,MAAM,GACJ,qBACA,UACA,yBACA,0DACA,sBACA,kBACF;CACA,UAAU,EACR,KAAK;EACH,SAAS;EACT,SAAS;CACX,EACF;CACA,iBAAiB,EACf,KAAK,UACP;AACF,CAAC"}

package/styles/fuse.css

@@ -0,0 +1,326 @@
+@import "tw-animate-css";
+@plugin "tailwindcss-react-aria-components";
+
+/* Locked library-fixed --font-mono, plus library-owned density implementation variables. */
+:root {
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --control-h-xs: 1.5rem;
+  --control-h-sm: 2rem;
+  --control-h-md: 2.25rem;
+  --control-h-lg: 2.5rem;
+  --control-px-xs: 0.5rem;
+  --control-px-sm: 0.625rem;
+  --control-px-md: 0.625rem;
+  --control-px-lg: 0.625rem;
+  --control-px-icon-xs: 0.375rem;
+  --control-px-icon-sm: 0.375rem;
+  --control-px-icon-md: 0.5rem;
+  --control-px-icon-lg: 0.5rem;
+  --control-gap-xs: 0.25rem;
+  --control-gap-sm: 0.25rem;
+  --control-gap-md: 0.375rem;
+  --control-gap-lg: 0.375rem;
+  --control-text: 0.875rem;
+  --control-leading: 1.25rem;
+}
+
+:root[data-density="comfortable"] {
+  --control-h-xs: 2rem;
+  --control-h-sm: 2.25rem;
+  --control-h-md: 2.75rem;
+  --control-h-lg: 3rem;
+  --control-px-xs: 0.75rem;
+  --control-px-sm: 0.875rem;
+  --control-px-md: 0.875rem;
+  --control-px-lg: 0.875rem;
+  --control-px-icon-xs: 0.625rem;
+  --control-px-icon-sm: 0.625rem;
+  --control-px-icon-md: 0.75rem;
+  --control-px-icon-lg: 0.75rem;
+  --control-gap-xs: 0.375rem;
+  --control-gap-sm: 0.375rem;
+  --control-gap-md: 0.5rem;
+  --control-gap-lg: 0.5rem;
+  --control-text: 1.125rem;
+  --control-leading: 1.5rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-card-soft: var(--card-soft);
+  --color-card-soft-foreground: var(--card-soft-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-feature: var(--feature);
+  --color-feature-bright: var(--feature-bright);
+  --color-feature-foreground: var(--feature-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-soft: var(--primary-soft);
+  --color-primary-soft-foreground: var(--primary-soft-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-hover: var(--secondary-hover);
+  --color-secondary-soft: var(--secondary-soft);
+  --color-secondary-soft-foreground: var(--secondary-soft-foreground);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-error: var(--error);
+  --color-error-foreground: var(--error-foreground);
+  --color-error-soft: var(--error-soft);
+  --color-error-soft-foreground: var(--error-soft-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-soft: var(--info-soft);
+  --color-info-soft-foreground: var(--info-soft-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-soft: var(--success-soft);
+  --color-success-soft-foreground: var(--success-soft-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-soft: var(--warning-soft);
+  --color-warning-soft-foreground: var(--warning-soft-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-brand: var(--sidebar-brand);
+  --color-sidebar-brand-foreground: var(--sidebar-brand-foreground);
+  --color-right-panel: var(--right-panel);
+  --color-right-panel-foreground: var(--right-panel-foreground);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+  --color-sh-identifier: var(--sh-identifier);
+  --color-sh-keyword: var(--sh-keyword);
+  --color-sh-string: var(--sh-string);
+  --color-sh-class: var(--sh-class);
+  --color-sh-property: var(--sh-property);
+  --color-sh-entity: var(--sh-entity);
+  --color-sh-jsxliterals: var(--sh-jsxliterals);
+  --color-sh-sign: var(--sh-sign);
+  --color-sh-comment: var(--sh-comment);
+  --color-neutral-50: var(--neutral-50);
+  --color-neutral-100: var(--neutral-100);
+  --color-neutral-200: var(--neutral-200);
+  --color-neutral-300: var(--neutral-300);
+  --color-neutral-400: var(--neutral-400);
+  --color-neutral-500: var(--neutral-500);
+  --color-neutral-600: var(--neutral-600);
+  --color-neutral-700: var(--neutral-700);
+  --color-neutral-800: var(--neutral-800);
+  --color-neutral-900: var(--neutral-900);
+  --color-neutral-950: var(--neutral-950);
+  --color-brand-fkas: var(--brand-fkas);
+  --color-brand-fkas-foreground: var(--brand-fkas-foreground);
+  --color-brand-tkas: var(--brand-tkas);
+  --color-brand-tkas-foreground: var(--brand-tkas-foreground);
+  --color-brand-guen: var(--brand-guen);
+  --color-brand-guen-foreground: var(--brand-guen-foreground);
+  --color-brand-fkab: var(--brand-fkab);
+  --color-brand-fkab-foreground: var(--brand-fkab-foreground);
+  --color-brand-fkse: var(--brand-fkse);
+  --color-brand-fkse-foreground: var(--brand-fkse-foreground);
+  --color-brand-elma: var(--brand-elma);
+  --color-brand-elma-foreground: var(--brand-elma-foreground);
+
+  /* Each rung sits whole --radius-step multiples from the theme's --radius. External themes
+     step 2px. The internal variant steps 0px, so every rung is the one radius. An arbitrary
+     value reads a rung through --theme(--radius-md), which inlines the formula so it resolves
+     in the element's own theme scope. var(--radius-md) would read the value the document root
+     computed. The corners that leave this scale in external themes live in
+     styles/corner-radius.ts, so they add no public rounded-* utility. */
+  --radius-xs: calc(var(--radius) - 3 * var(--radius-step));
+  --radius-sm: calc(var(--radius) - 2 * var(--radius-step));
+  --radius-md: calc(var(--radius) - var(--radius-step));
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 2 * var(--radius-step));
+  --radius-popover: calc(var(--radius) - 4 * var(--radius-step));
+  --breakpoint-xs: 574px;
+  --breakpoint-lg: 60rem;
+  --breakpoint-3xl: 1920px;
+  --spacing: 0.25rem;
+  --ease-overshoot: linear(
+    0,
+    0.402 7.4%,
+    0.711 15.3%,
+    0.929 23.7%,
+    1.008 28.2%,
+    1.067 33%,
+    1.099 36.9%,
+    1.12 41%,
+    1.13 45.4%,
+    1.13 50.1%,
+    1.111 58.5%,
+    1.019 83.2%,
+    1.004 91.3%,
+    1
+  );
+}
+
+@utility font-sans {
+  font-family: var(--font-sans);
+}
+@utility font-heading {
+  font-family: var(--font-heading);
+}
+@utility font-mono {
+  font-family: var(--font-mono);
+}
+@utility rounded-button {
+  border-radius: var(--radius-button);
+}
+
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-selected {
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+/* A disabled control: `:disabled`, `data-disabled` or `aria-disabled="true"`. This is the
+   one disabled predicate. `enabled-hover` and `enabled-active` build on its negation, and
+   a part that repaints a whole control from another element's hover (the inline
+   TextField's `group-hover/inline-field:`) stacks `not-disabled-state:` directly. Stacked
+   that way it sorts with the `not-*` variants, ahead of `focus-visible:`, and `:not(:where())`
+   adds no specificity. The state face in styles/state-face.ts owns the matching disabled look. */
+@custom-variant disabled-state (&:where([data-disabled]:not([data-disabled="false"]), :disabled, [aria-disabled="true"]));
+/* Hover and press on an enabled control. A disabled control keeps pointer events, so a
+   Tooltip on it still opens, and these variants keep its paint and position still. An
+   `aria-disabled` control still activates; only its hover and press faces are gated.
+   tailwind-merge keeps a consumer's plain `hover:` class beside these, and these rules sort
+   after it. Every condition sits in :where() or :not(:where()), so each rule has the
+   specificity of one class and the consumer's `hover:` rule, with two, still wins. The
+   [data-rac] branches match the selectors tailwindcss-react-aria-components emits for
+   hover and active. */
+@custom-variant enabled-hover {
+  @media (hover: hover) {
+    @variant not-disabled-state {
+      &:where([data-rac][data-hovered], :not([data-rac]):hover) {
+        @slot;
+      }
+    }
+  }
+}
+@custom-variant enabled-active {
+  @variant not-disabled-state {
+    &:where([data-rac][data-active], :not([data-rac]):active) {
+      @slot;
+    }
+  }
+}
+
+@utility hit-area-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1);
+  --hit-area-t: calc(--value([*]) * -1);
+  --hit-area-b: --spacing(--value(number) * -1);
+  --hit-area-b: calc(--value([*]) * -1);
+  --hit-area-l: --spacing(--value(number) * -1);
+  --hit-area-l: calc(--value([*]) * -1);
+  --hit-area-r: --spacing(--value(number) * -1);
+  --hit-area-r: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility no-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* Transform/layout motion off; opacity fades and color transitions stay. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-property:
+      opacity, background-color, color, border-color, outline-color, fill, stroke, box-shadow !important;
+    --tw-enter-translate-x: 0 !important;
+    --tw-enter-translate-y: 0 !important;
+    --tw-enter-scale: 1 !important;
+    --tw-enter-rotate: 0 !important;
+    --tw-exit-translate-x: 0 !important;
+    --tw-exit-translate-y: 0 !important;
+    --tw-exit-scale: 1 !important;
+    --tw-exit-rotate: 0 !important;
+    --animate-spin: none !important;
+    --animate-bounce: none !important;
+  }
+}

package/styles/grid-list.d.ts

@@ -0,0 +1,82 @@
+//#region src/styles/grid-list.d.ts
+/**
+ * GridList's recipe. Package-private — no entry re-exports it, and
+ * the interim tier has no public recipe surface. It lives here rather than beside the
+ * component because every RAC entry keeps its recipe in `src/styles/`
+ *
+ * The list root is invariant. Empty-state plugin variants from the reference are
+ * rewritten as explicit `data-[empty]:`.
+ */
+export declare const gridListVariants: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: {
+      base?: import("tailwind-variants").ClassValue;
+    } | import("tailwind-variants").ClassValue;
+  };
+} | {
+  [x: string]: {
+    [x: string]: {
+      base?: import("tailwind-variants").ClassValue;
+    } | import("tailwind-variants").ClassValue;
+  };
+} | {}, {
+  base: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: {
+      base?: import("tailwind-variants").ClassValue;
+    } | import("tailwind-variants").ClassValue;
+  };
+} | {}, {
+  base: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  base: string;
+}>>;
+/**
+ * Module-private item recipe. Composes
+ * the resolved `state` focus-ring constants from `styles/utils` — RAC hands
+ * `isFocusVisible` in as a render prop and this recipe turns it into a variant arm — so
+ * `styles/utils` stays the only module that spells or resolves a focus class.
+ *
+ * Row padding and gap are not a control-box rung,
+ * so they stay the reference's literals and read no `--control-*` variable.
+ */
+export declare const itemStyles: import("tailwind-variants").TVReturnType<{
+  isFocusVisible: {
+    true: string;
+    false: "";
+  };
+  isSelected: {
+    false: "hover:bg-muted";
+    true: "z-20 border bg-muted hover:bg-muted/80";
+  };
+  isDisabled: {
+    true: "z-10 text-muted-foreground forced-colors:text-[GrayText]";
+  };
+}, undefined, string, {
+  isFocusVisible: {
+    true: string;
+    false: "";
+  };
+  isSelected: {
+    false: "hover:bg-muted";
+    true: "z-20 border bg-muted hover:bg-muted/80";
+  };
+  isDisabled: {
+    true: "z-10 text-muted-foreground forced-colors:text-[GrayText]";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  isFocusVisible: {
+    true: string;
+    false: "";
+  };
+  isSelected: {
+    false: "hover:bg-muted";
+    true: "z-20 border bg-muted hover:bg-muted/80";
+  };
+  isDisabled: {
+    true: "z-10 text-muted-foreground forced-colors:text-[GrayText]";
+  };
+}, undefined>>;
+//#endregion
+//# sourceMappingURL=grid-list.d.ts.map

package/styles/grid-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-list.d.ts","names":[],"sources":["../../src/styles/grid-list.ts"],"mappings":";;;;;;;;;qBAaa,8CAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAehB,wCAAU"}

package/styles/grid-list.js

@@ -0,0 +1,40 @@
+import { cn } from "./cn.js";
+import { stateFocusRingClass, stateFocusRingVisibleClass } from "./utils.js";
+import { tv } from "tailwind-variants";
+//#region src/styles/grid-list.ts
+/**
+* GridList's recipe. Package-private — no entry re-exports it, and
+* the interim tier has no public recipe surface. It lives here rather than beside the
+* component because every RAC entry keeps its recipe in `src/styles/`
+*
+* The list root is invariant. Empty-state plugin variants from the reference are
+* rewritten as explicit `data-[empty]:`.
+*/
+const gridListVariants = tv({ slots: { base: "data-[empty]:text-sm relative overflow-auto data-[empty]:flex data-[empty]:items-center data-[empty]:justify-center" } });
+/**
+* Module-private item recipe. Composes
+* the resolved `state` focus-ring constants from `styles/utils` — RAC hands
+* `isFocusVisible` in as a render prop and this recipe turns it into a variant arm — so
+* `styles/utils` stays the only module that spells or resolves a focus class.
+*
+* Row padding and gap are not a control-box rung,
+* so they stay the reference's literals and read no `--control-*` variable.
+*/
+const itemStyles = tv({
+	base: cn("text-sm relative flex cursor-default gap-3 border-t border-transparent px-1.5 py-1 -outline-offset-2 select-none first:rounded-t-lg first:border-t-0 last:mb-0 last:rounded-b-lg", stateFocusRingClass),
+	variants: {
+		isFocusVisible: {
+			true: stateFocusRingVisibleClass,
+			false: ""
+		},
+		isSelected: {
+			false: "hover:bg-muted",
+			true: "z-20 border bg-muted hover:bg-muted/80"
+		},
+		isDisabled: { true: "z-10 text-muted-foreground forced-colors:text-[GrayText]" }
+	}
+});
+//#endregion
+export { gridListVariants, itemStyles };
+
+//# sourceMappingURL=grid-list.js.map

package/styles/grid-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-list.js","names":[],"sources":["../../src/styles/grid-list.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { cn } from \"./cn\";\nimport { stateFocusRingClass, stateFocusRingVisibleClass } from \"./utils\";\n\n/**\n * GridList's recipe. Package-private — no entry re-exports it, and\n * the interim tier has no public recipe surface. It lives here rather than beside the\n * component because every RAC entry keeps its recipe in `src/styles/`\n *\n * The list root is invariant. Empty-state plugin variants from the reference are\n * rewritten as explicit `data-[empty]:`.\n */\nexport const gridListVariants = tv({\n  slots: {\n    base: \"data-[empty]:text-sm relative overflow-auto data-[empty]:flex data-[empty]:items-center data-[empty]:justify-center\",\n  },\n});\n\n/**\n * Module-private item recipe. Composes\n * the resolved `state` focus-ring constants from `styles/utils` — RAC hands\n * `isFocusVisible` in as a render prop and this recipe turns it into a variant arm — so\n * `styles/utils` stays the only module that spells or resolves a focus class.\n *\n * Row padding and gap are not a control-box rung,\n * so they stay the reference's literals and read no `--control-*` variable.\n */\nexport const itemStyles = tv({\n  base: cn(\n    \"text-sm relative flex cursor-default gap-3 border-t border-transparent px-1.5 py-1 -outline-offset-2 select-none first:rounded-t-lg first:border-t-0 last:mb-0 last:rounded-b-lg\",\n    stateFocusRingClass\n  ),\n  variants: {\n    isFocusVisible: {\n      true: stateFocusRingVisibleClass,\n      false: \"\",\n    },\n    isSelected: {\n      false: \"hover:bg-muted\",\n      true: \"z-20 border bg-muted hover:bg-muted/80\",\n    },\n    isDisabled: {\n      true: \"z-10 text-muted-foreground forced-colors:text-[GrayText]\",\n    },\n  },\n});\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,mBAAmB,GAAG,EACjC,OAAO,EACL,MAAM,sHACR,EACF,CAAC;;;;;;;;;;AAWD,MAAa,aAAa,GAAG;CAC3B,MAAM,GACJ,oLACA,mBACF;CACA,UAAU;EACR,gBAAgB;GACd,MAAM;GACN,OAAO;EACT;EACA,YAAY;GACV,OAAO;GACP,MAAM;EACR;EACA,YAAY,EACV,MAAM,2DACR;CACF;AACF,CAAC"}