@elmeragroup/fuse 0.1.0-canary.1

package/styles/range-calendar.d.ts

@@ -0,0 +1,182 @@
+//#region src/styles/range-calendar.d.ts
+/**
+ * RangeCalendar's slotted recipe. Package-private — no entry
+ * re-exports it, and there is no public recipe surface for the interim tier.
+ *
+ * Two things separate it from Calendar's recipe: RangeCalendar hand-rolls its own
+ * two-layer cell instead of borrowing the single-day circle, and its root takes no
+ * card-surface slot at all — standalone the calendar renders borderless and the picker
+ * dialog supplies the chrome.
+ *
+ * Every axis lives on the inner pill; `body` and `outerCell` are invariant, so the
+ * component resolves them once and re-resolves only `cell` per date. `isUnavailable`
+ * paints only through `compoundVariants`, outside the range.
+ */
+export declare const rangeCalendarVariants: import("tailwind-variants").TVReturnType<{
+  /** `getSelectionState`'s three faces: outside the range, inside it, or a cap. */
+  selectionState: {
+    none: {
+      cell: string;
+    };
+    middle: {
+      cell: string[];
+    };
+    cap: {
+      cell: string;
+    };
+  };
+  isDisabled: {
+    true: {
+      cell: string;
+    };
+  };
+  /** RAC `isUnavailable`: `isDateUnavailable` blocked the day. Painted only outside the range (see compoundVariants). */
+  isUnavailable: {
+    true: {
+      cell: string;
+    };
+    false: {
+      cell: string;
+    };
+  };
+  isFocusVisible: {
+    true: {
+      cell: string;
+    };
+    false: {
+      cell: string;
+    };
+  };
+}, {
+  /**
+   * The month table. Zeroing the cell gutter is what lets the range band run
+   * unbroken across day columns.
+   */
+  body: string;
+  /**
+   * The square band a day sits in: the layer that paints the range fill, the
+   * start/end caps and the row-edge rounding, and the `group` the pill styles
+   * against. `size-9` is the ref's decorative day square, not a control-box rung,
+   * so it stays a literal and reads no
+   * `--control-*` variable — the same classification Calendar's day cell has.
+   */
+  outerCell: string[];
+  /**
+   * The full-size pill inside the band. Focus is the canonical RAC state adapter:
+   * the band owns the tab stop, the pill paints the ring.
+   */
+  cell: string[];
+  error: string;
+}, undefined, {
+  /** `getSelectionState`'s three faces: outside the range, inside it, or a cap. */
+  selectionState: {
+    none: {
+      cell: string;
+    };
+    middle: {
+      cell: string[];
+    };
+    cap: {
+      cell: string;
+    };
+  };
+  isDisabled: {
+    true: {
+      cell: string;
+    };
+  };
+  /** RAC `isUnavailable`: `isDateUnavailable` blocked the day. Painted only outside the range (see compoundVariants). */
+  isUnavailable: {
+    true: {
+      cell: string;
+    };
+    false: {
+      cell: string;
+    };
+  };
+  isFocusVisible: {
+    true: {
+      cell: string;
+    };
+    false: {
+      cell: string;
+    };
+  };
+}, {
+  /**
+   * The month table. Zeroing the cell gutter is what lets the range band run
+   * unbroken across day columns.
+   */
+  body: string;
+  /**
+   * The square band a day sits in: the layer that paints the range fill, the
+   * start/end caps and the row-edge rounding, and the `group` the pill styles
+   * against. `size-9` is the ref's decorative day square, not a control-box rung,
+   * so it stays a literal and reads no
+   * `--control-*` variable — the same classification Calendar's day cell has.
+   */
+  outerCell: string[];
+  /**
+   * The full-size pill inside the band. Focus is the canonical RAC state adapter:
+   * the band owns the tab stop, the pill paints the ring.
+   */
+  cell: string[];
+  error: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  /** `getSelectionState`'s three faces: outside the range, inside it, or a cap. */
+  selectionState: {
+    none: {
+      cell: string;
+    };
+    middle: {
+      cell: string[];
+    };
+    cap: {
+      cell: string;
+    };
+  };
+  isDisabled: {
+    true: {
+      cell: string;
+    };
+  };
+  /** RAC `isUnavailable`: `isDateUnavailable` blocked the day. Painted only outside the range (see compoundVariants). */
+  isUnavailable: {
+    true: {
+      cell: string;
+    };
+    false: {
+      cell: string;
+    };
+  };
+  isFocusVisible: {
+    true: {
+      cell: string;
+    };
+    false: {
+      cell: string;
+    };
+  };
+}, {
+  /**
+   * The month table. Zeroing the cell gutter is what lets the range band run
+   * unbroken across day columns.
+   */
+  body: string;
+  /**
+   * The square band a day sits in: the layer that paints the range fill, the
+   * start/end caps and the row-edge rounding, and the `group` the pill styles
+   * against. `size-9` is the ref's decorative day square, not a control-box rung,
+   * so it stays a literal and reads no
+   * `--control-*` variable — the same classification Calendar's day cell has.
+   */
+  outerCell: string[];
+  /**
+   * The full-size pill inside the band. Focus is the canonical RAC state adapter:
+   * the band owns the tab stop, the pill paints the ring.
+   */
+  cell: string[];
+  error: string;
+}>>;
+//#endregion
+//# sourceMappingURL=range-calendar.d.ts.map

package/styles/range-calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-calendar.d.ts","names":[],"sources":["../../src/styles/range-calendar.ts"],"mappings":";;;;;;;;;;;;;;qBAiBa,mDAAqB;;;IAgC5B;MAAQ;;IACR;MACE;;IAKF;MAAO;;;;IAGP;MAAQ;;;;;IAIR;MAAQ;;IACR;MAAS;;;;IAGT;MAAQ;;IACR;MAAS"}

package/styles/range-calendar.js

@@ -0,0 +1,73 @@
+import { stateFocusRingClass, stateFocusRingVisibleClass } from "./utils.js";
+import { tv } from "tailwind-variants";
+//#region src/styles/range-calendar.ts
+/**
+* RangeCalendar's slotted recipe. Package-private — no entry
+* re-exports it, and there is no public recipe surface for the interim tier.
+*
+* Two things separate it from Calendar's recipe: RangeCalendar hand-rolls its own
+* two-layer cell instead of borrowing the single-day circle, and its root takes no
+* card-surface slot at all — standalone the calendar renders borderless and the picker
+* dialog supplies the chrome.
+*
+* Every axis lives on the inner pill; `body` and `outerCell` are invariant, so the
+* component resolves them once and re-resolves only `cell` per date. `isUnavailable`
+* paints only through `compoundVariants`, outside the range.
+*/
+const rangeCalendarVariants = tv({
+	slots: {
+		/**
+		* The month table. Zeroing the cell gutter is what lets the range band run
+		* unbroken across day columns.
+		*/
+		body: "[&_td]:px-0",
+		/**
+		* The square band a day sits in: the layer that paints the range fill, the
+		* start/end caps and the row-edge rounding, and the `group` the pill styles
+		* against. `size-9` is the ref's decorative day square, not a control-box rung,
+		* so it stays a literal and reads no
+		* `--control-*` variable — the same classification Calendar's day cell has.
+		*/
+		outerCell: [
+			"group text-sm size-9 cursor-default outline outline-0",
+			"outside-month:text-muted-foreground",
+			"selected:bg-primary/20 invalid:selected:bg-error/10",
+			"forced-colors:selected:bg-[Highlight] forced-colors:invalid:selected:bg-[Mark]",
+			"selection-start:rounded-s-full selection-end:rounded-e-full",
+			"[td:first-child_&]:rounded-s-full [td:last-child_&]:rounded-e-full"
+		],
+		/**
+		* The full-size pill inside the band. Focus is the canonical RAC state adapter:
+		* the band owns the tab stop, the pill paints the ring.
+		*/
+		cell: ["flex size-full items-center justify-center rounded-full text-foreground", stateFocusRingClass],
+		error: "text-sm text-error"
+	},
+	variants: {
+		/** `getSelectionState`'s three faces: outside the range, inside it, or a cap. */
+		selectionState: {
+			none: { cell: "group-hover:bg-muted group-pressed:bg-accent" },
+			middle: { cell: ["group-hover:bg-primary/30 group-pressed:bg-primary/40", "group-hover:group-invalid:bg-error/20 group-invalid:group-pressed:bg-error/30"] },
+			cap: { cell: "bg-primary text-primary-foreground group-invalid:bg-error" }
+		},
+		isDisabled: { true: { cell: "text-muted-foreground" } },
+		/** RAC `isUnavailable`: `isDateUnavailable` blocked the day. Painted only outside the range (see compoundVariants). */
+		isUnavailable: {
+			true: { cell: "" },
+			false: { cell: "" }
+		},
+		isFocusVisible: {
+			true: { cell: stateFocusRingVisibleClass },
+			false: { cell: "" }
+		}
+	},
+	compoundVariants: [{
+		isUnavailable: true,
+		selectionState: "none",
+		class: { cell: "text-muted-foreground group-hover:bg-transparent group-pressed:bg-transparent forced-colors:text-[GrayText]" }
+	}]
+});
+//#endregion
+export { rangeCalendarVariants };
+
+//# sourceMappingURL=range-calendar.js.map

package/styles/range-calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-calendar.js","names":[],"sources":["../../src/styles/range-calendar.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { stateFocusRingClass, stateFocusRingVisibleClass } from \"./utils\";\n\n/**\n * RangeCalendar's slotted recipe. Package-private — no entry\n * re-exports it, and there is no public recipe surface for the interim tier.\n *\n * Two things separate it from Calendar's recipe: RangeCalendar hand-rolls its own\n * two-layer cell instead of borrowing the single-day circle, and its root takes no\n * card-surface slot at all — standalone the calendar renders borderless and the picker\n * dialog supplies the chrome.\n *\n * Every axis lives on the inner pill; `body` and `outerCell` are invariant, so the\n * component resolves them once and re-resolves only `cell` per date. `isUnavailable`\n * paints only through `compoundVariants`, outside the range.\n */\nexport const rangeCalendarVariants = tv({\n  slots: {\n    /**\n     * The month table. Zeroing the cell gutter is what lets the range band run\n     * unbroken across day columns.\n     */\n    body: \"[&_td]:px-0\",\n    /**\n     * The square band a day sits in: the layer that paints the range fill, the\n     * start/end caps and the row-edge rounding, and the `group` the pill styles\n     * against. `size-9` is the ref's decorative day square, not a control-box rung,\n     * so it stays a literal and reads no\n     * `--control-*` variable — the same classification Calendar's day cell has.\n     */\n    outerCell: [\n      \"group text-sm size-9 cursor-default outline outline-0\",\n      \"outside-month:text-muted-foreground\",\n      \"selected:bg-primary/20 invalid:selected:bg-error/10\",\n      \"forced-colors:selected:bg-[Highlight] forced-colors:invalid:selected:bg-[Mark]\",\n      \"selection-start:rounded-s-full selection-end:rounded-e-full\",\n      \"[td:first-child_&]:rounded-s-full [td:last-child_&]:rounded-e-full\",\n    ],\n    /**\n     * The full-size pill inside the band. Focus is the canonical RAC state adapter:\n     * the band owns the tab stop, the pill paints the ring.\n     */\n    cell: [\"flex size-full items-center justify-center rounded-full text-foreground\", stateFocusRingClass],\n    error: \"text-sm text-error\",\n  },\n  variants: {\n    /** `getSelectionState`'s three faces: outside the range, inside it, or a cap. */\n    selectionState: {\n      none: { cell: \"group-hover:bg-muted group-pressed:bg-accent\" },\n      middle: {\n        cell: [\n          \"group-hover:bg-primary/30 group-pressed:bg-primary/40\",\n          \"group-hover:group-invalid:bg-error/20 group-invalid:group-pressed:bg-error/30\",\n        ],\n      },\n      cap: { cell: \"bg-primary text-primary-foreground group-invalid:bg-error\" },\n    },\n    isDisabled: {\n      true: { cell: \"text-muted-foreground\" },\n    },\n    /** RAC `isUnavailable`: `isDateUnavailable` blocked the day. Painted only outside the range (see compoundVariants). */\n    isUnavailable: {\n      true: { cell: \"\" },\n      false: { cell: \"\" },\n    },\n    isFocusVisible: {\n      true: { cell: stateFocusRingVisibleClass },\n      false: { cell: \"\" },\n    },\n  },\n  compoundVariants: [\n    {\n      // Same face as Calendar's unavailable day (styles/calendar.ts). A selected unavailable\n      // endpoint keeps its cap/middle fill so its text stays legible on bg-primary/bg-error.\n      // The hover/pressed suppression is defensive parity with Calendar: RAC already skips\n      // hover and press on unavailable cells.\n      isUnavailable: true,\n      selectionState: \"none\",\n      class: {\n        cell: \"text-muted-foreground group-hover:bg-transparent group-pressed:bg-transparent forced-colors:text-[GrayText]\",\n      },\n    },\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAa,wBAAwB,GAAG;CACtC,OAAO;;;;;EAKL,MAAM;;;;;;;;EAQN,WAAW;GACT;GACA;GACA;GACA;GACA;GACA;EACF;;;;;EAKA,MAAM,CAAC,2EAA2E,mBAAmB;EACrG,OAAO;CACT;CACA,UAAU;;EAER,gBAAgB;GACd,MAAM,EAAE,MAAM,+CAA+C;GAC7D,QAAQ,EACN,MAAM,CACJ,yDACA,+EACF,EACF;GACA,KAAK,EAAE,MAAM,4DAA4D;EAC3E;EACA,YAAY,EACV,MAAM,EAAE,MAAM,wBAAwB,EACxC;;EAEA,eAAe;GACb,MAAM,EAAE,MAAM,GAAG;GACjB,OAAO,EAAE,MAAM,GAAG;EACpB;EACA,gBAAgB;GACd,MAAM,EAAE,MAAM,2BAA2B;GACzC,OAAO,EAAE,MAAM,GAAG;EACpB;CACF;CACA,kBAAkB,CAChB;EAKE,eAAe;EACf,gBAAgB;EAChB,OAAO,EACL,MAAM,8GACR;CACF,CACF;AACF,CAAC"}

package/styles/search-field.d.ts

@@ -0,0 +1,62 @@
+//#region src/styles/search-field.d.ts
+/**
+ * SearchField's slotted 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 field box itself is not this recipe's business: `FieldGroup` runs the shared
+ * `fieldGroupVariants`, which is what pins the `md` control rung for the whole field
+ * family. So there is no `size` axis here, no `--control-*`
+ * variable is read, and no box metric is restated.
+ */
+export declare const searchFieldVariants: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: {
+      base?: import("tailwind-variants").ClassValue;
+      button?: import("tailwind-variants").ClassValue;
+      buttonIcon?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+      input?: import("tailwind-variants").ClassValue;
+    } | import("tailwind-variants").ClassValue;
+  };
+} | {
+  [x: string]: {
+    [x: string]: {
+      base?: import("tailwind-variants").ClassValue;
+      button?: import("tailwind-variants").ClassValue;
+      buttonIcon?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+      input?: import("tailwind-variants").ClassValue;
+    } | import("tailwind-variants").ClassValue;
+  };
+} | {}, {
+  base: string;
+  icon: string;
+  input: string;
+  button: string;
+  buttonIcon: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: {
+      base?: import("tailwind-variants").ClassValue;
+      button?: import("tailwind-variants").ClassValue;
+      buttonIcon?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+      input?: import("tailwind-variants").ClassValue;
+    } | import("tailwind-variants").ClassValue;
+  };
+} | {}, {
+  base: string;
+  icon: string;
+  input: string;
+  button: string;
+  buttonIcon: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  base: string;
+  icon: string;
+  input: string;
+  button: string;
+  buttonIcon: string;
+}>>;
+//#endregion
+//# sourceMappingURL=search-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.d.ts","names":[],"sources":["../../src/styles/search-field.ts"],"mappings":";;;;;;;;;;;qBAYa,iDAAmB"}

package/styles/search-field.js

@@ -0,0 +1,23 @@
+import { tv } from "tailwind-variants";
+//#region src/styles/search-field.ts
+/**
+* SearchField's slotted 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 field box itself is not this recipe's business: `FieldGroup` runs the shared
+* `fieldGroupVariants`, which is what pins the `md` control rung for the whole field
+* family. So there is no `size` axis here, no `--control-*`
+* variable is read, and no box metric is restated.
+*/
+const searchFieldVariants = tv({ slots: {
+	base: "group flex min-w-12 flex-col gap-1",
+	icon: "ml-2 size-4 text-foreground group-aria-disabled:text-muted-foreground forced-colors:text-[ButtonText] forced-colors:group-aria-disabled:text-[GrayText]",
+	input: "[&::-webkit-search-cancel-button]:hidden",
+	button: "mr-1 w-6 rounded-md px-0 group-data-[empty]:invisible",
+	buttonIcon: "size-4 text-foreground"
+} });
+//#endregion
+export { searchFieldVariants };
+
+//# sourceMappingURL=search-field.js.map

package/styles/search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.js","names":[],"sources":["../../src/styles/search-field.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\n/**\n * SearchField's slotted recipe. Package-private — no entry re-exports\n * it, and the interim tier has no public recipe surface. It lives here rather than beside\n * the component because every RAC entry keeps its recipe in `src/styles/`\n *\n * The field box itself is not this recipe's business: `FieldGroup` runs the shared\n * `fieldGroupVariants`, which is what pins the `md` control rung for the whole field\n * family. So there is no `size` axis here, no `--control-*`\n * variable is read, and no box metric is restated.\n */\nexport const searchFieldVariants = tv({\n  slots: {\n    base: \"group flex min-w-12 flex-col gap-1\",\n    icon: \"ml-2 size-4 text-foreground group-aria-disabled:text-muted-foreground forced-colors:text-[ButtonText] forced-colors:group-aria-disabled:text-[GrayText]\",\n    input: \"[&::-webkit-search-cancel-button]:hidden\",\n    // The clear button sits inside the field box, so it keeps the field's `rounded-md`\n    // corner instead of Button's `--radius-button`.\n    button: \"mr-1 w-6 rounded-md px-0 group-data-[empty]:invisible\",\n    buttonIcon: \"size-4 text-foreground\",\n  },\n});\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,sBAAsB,GAAG,EACpC,OAAO;CACL,MAAM;CACN,MAAM;CACN,OAAO;CAGP,QAAQ;CACR,YAAY;AACd,EACF,CAAC"}

package/styles/state-face.d.ts

@@ -0,0 +1,29 @@
+//#region src/styles/state-face.d.ts
+/** The native-target state face: `:disabled` plus the aria arms. */
+export declare const nativeStateFaceClass: string;
+/** The data-target state face: Base UI's `data-disabled` and `data-invalid` plus the aria arms. */
+export declare const dataStateFaceClass: string;
+/** The aria-target state face: `aria-disabled="true"` and `aria-invalid`. */
+export declare const ariaStateFaceClass: string;
+/**
+ * The rac-target disabled face. A recipe puts it on its `isDisabled: true` arm, because a
+ * prop or render prop reports the state there, not a selector.
+ */
+export declare const racDisabledStateFaceClass: string;
+/** The rac-target invalid face, for a recipe's `isInvalid: true` arm. */
+export declare const racInvalidStateFaceClass: string;
+/**
+ * The within-target state face on the group. It reads only a direct child marked
+ * `data-focus-ring-control`, so the owner must keep its control as a direct child: a control
+ * wrapped in another element, or nested in an addon, does not reach this group. Pair it with
+ * {@link withinStateFaceControlClass} on that control.
+ */
+export declare const withinStateFaceClass: string;
+/**
+ * The control half of the within-target state face: it keeps the `not-allowed` cursor on the
+ * owned control and cancels the control's own dim and ring so only the group paints them.
+ * Pair with {@link withinStateFaceClass}.
+ */
+export declare const withinStateFaceControlClass: string;
+//#endregion
+//# sourceMappingURL=state-face.d.ts.map

package/styles/state-face.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-face.d.ts","names":[],"sources":["../../src/styles/state-face.ts"],"mappings":";;qBAkDa;;qBAOA;;qBAQA;;;;;qBAMA;;qBAGA;;;;;;;qBAQA;;;;;;qBAWA"}

package/styles/state-face.js

@@ -0,0 +1,76 @@
+import { cn } from "./cn.js";
+//#region src/styles/state-face.ts
+/**
+* The state face of a whole interactive control: the one disabled look (`opacity-50` plus
+* the `not-allowed` cursor) and the one invalid look (`border-error`, a 3px ring, and
+* `ring-error/20`). Hover and press stay still on a disabled control through the
+* `enabled-hover:` and `enabled-active:` variants in `fuse.css`, which skip `:disabled`,
+* `data-disabled` and `aria-disabled="true"`. That gate is the only mechanism, so no face
+* drops pointer events and a Tooltip on a disabled control still opens.
+*
+* Each target is exported as fixed class constants, named for where a control reads its
+* state, as the focus-ring targets are:
+*
+* - `native` keys off `:disabled`, for native `<button>`, `<input>` and `<textarea>` roots.
+* - `data` keys off Base UI's `data-disabled` and `data-invalid` state attributes, for roots
+*   that never match `:disabled`, such as a `<span>` radio or a `render={<a />}` button.
+* - `aria` keys off `aria-disabled="true"` and `aria-invalid` alone, for a box that carries
+*   those attributes itself but is neither a native control nor a Base UI state root.
+*
+* The `native` and `data` faces carry the `aria` arms as well. The hover gate treats
+* `aria-disabled="true"` as disabled on every control, and any control can be announced
+* unavailable while it stays activatable, so every target that dims must dim for it too.
+* Composing the arms here rather than at each call site means no control can take the gate
+* without the look.
+*
+* - `rac` is the disabled or invalid look alone, with no selector, for a recipe told the
+*   state through a prop or render prop (React Aria wrappers, CheckboxCard's `isDisabled`).
+*   The recipe puts it on its own `isDisabled` or `isInvalid` arm.
+* - `within` keys off the group's own control: a direct child marked
+*   `data-focus-ring-control` (`:disabled`, `aria-disabled="true"`, `aria-invalid`), for a
+*   group whose box is the control (InputGroup, Combobox chips, NumberField). Each owner keeps
+*   its control as a direct child, so a control nested deeper, such as a NumberField inside an
+*   InputGroup addon, belongs to its own owner and never paints the outer group. The control
+*   face goes on the owned control: it keeps the `not-allowed` cursor there, since the browser
+*   gives a disabled input its own cursor, and cancels the dim and ring an embedded control
+*   paints itself (InputGroup's Input), so the face paints once.
+*
+* A control composes every target its state can arrive through. Button, for example, is a
+* native button and a Base UI root at once, so it takes the `native` and `data` targets.
+*
+* The face covers whole controls only. Parts (calendar cells, date segments, the
+* search-field icon, labels that dim beside their control) keep their own muted text colour
+* and are not state faces.
+*/
+const ariaDisabledFace = cn("aria-disabled:cursor-not-allowed aria-disabled:opacity-50");
+const ariaInvalidFace = cn("aria-invalid:border-error aria-invalid:ring-3 aria-invalid:ring-error/20");
+/** The native-target state face: `:disabled` plus the aria arms. */
+const nativeStateFaceClass = cn("disabled:cursor-not-allowed disabled:opacity-50", ariaDisabledFace, ariaInvalidFace);
+/** The data-target state face: Base UI's `data-disabled` and `data-invalid` plus the aria arms. */
+const dataStateFaceClass = cn(ariaDisabledFace, ariaInvalidFace, "data-invalid:border-error data-invalid:ring-3 data-invalid:ring-error/20", "data-disabled:cursor-not-allowed data-disabled:opacity-50");
+/** The aria-target state face: `aria-disabled="true"` and `aria-invalid`. */
+const ariaStateFaceClass = cn(ariaDisabledFace, ariaInvalidFace);
+/**
+* The rac-target disabled face. A recipe puts it on its `isDisabled: true` arm, because a
+* prop or render prop reports the state there, not a selector.
+*/
+const racDisabledStateFaceClass = cn("cursor-not-allowed opacity-50");
+/** The rac-target invalid face, for a recipe's `isInvalid: true` arm. */
+const racInvalidStateFaceClass = cn("border-error ring-3 ring-error/20");
+/**
+* The within-target state face on the group. It reads only a direct child marked
+* `data-focus-ring-control`, so the owner must keep its control as a direct child: a control
+* wrapped in another element, or nested in an addon, does not reach this group. Pair it with
+* {@link withinStateFaceControlClass} on that control.
+*/
+const withinStateFaceClass = cn("has-[>[data-focus-ring-control]:disabled]:cursor-not-allowed has-[>[data-focus-ring-control]:disabled]:opacity-50", "has-[>[data-focus-ring-control][aria-disabled=true]]:cursor-not-allowed has-[>[data-focus-ring-control][aria-disabled=true]]:opacity-50", "has-[>[data-focus-ring-control][aria-invalid=true]]:border-error has-[>[data-focus-ring-control][aria-invalid=true]]:ring-3 has-[>[data-focus-ring-control][aria-invalid=true]]:ring-error/20");
+/**
+* The control half of the within-target state face: it keeps the `not-allowed` cursor on the
+* owned control and cancels the control's own dim and ring so only the group paints them.
+* Pair with {@link withinStateFaceClass}.
+*/
+const withinStateFaceControlClass = cn("disabled:cursor-not-allowed disabled:opacity-100 aria-disabled:cursor-not-allowed aria-disabled:opacity-100 aria-invalid:ring-0");
+//#endregion
+export { ariaStateFaceClass, dataStateFaceClass, nativeStateFaceClass, racDisabledStateFaceClass, racInvalidStateFaceClass, withinStateFaceClass, withinStateFaceControlClass };
+
+//# sourceMappingURL=state-face.js.map

package/styles/state-face.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-face.js","names":[],"sources":["../../src/styles/state-face.ts"],"sourcesContent":["import { cn } from \"./cn\";\n\n/**\n * The state face of a whole interactive control: the one disabled look (`opacity-50` plus\n * the `not-allowed` cursor) and the one invalid look (`border-error`, a 3px ring, and\n * `ring-error/20`). Hover and press stay still on a disabled control through the\n * `enabled-hover:` and `enabled-active:` variants in `fuse.css`, which skip `:disabled`,\n * `data-disabled` and `aria-disabled=\"true\"`. That gate is the only mechanism, so no face\n * drops pointer events and a Tooltip on a disabled control still opens.\n *\n * Each target is exported as fixed class constants, named for where a control reads its\n * state, as the focus-ring targets are:\n *\n * - `native` keys off `:disabled`, for native `<button>`, `<input>` and `<textarea>` roots.\n * - `data` keys off Base UI's `data-disabled` and `data-invalid` state attributes, for roots\n *   that never match `:disabled`, such as a `<span>` radio or a `render={<a />}` button.\n * - `aria` keys off `aria-disabled=\"true\"` and `aria-invalid` alone, for a box that carries\n *   those attributes itself but is neither a native control nor a Base UI state root.\n *\n * The `native` and `data` faces carry the `aria` arms as well. The hover gate treats\n * `aria-disabled=\"true\"` as disabled on every control, and any control can be announced\n * unavailable while it stays activatable, so every target that dims must dim for it too.\n * Composing the arms here rather than at each call site means no control can take the gate\n * without the look.\n *\n * - `rac` is the disabled or invalid look alone, with no selector, for a recipe told the\n *   state through a prop or render prop (React Aria wrappers, CheckboxCard's `isDisabled`).\n *   The recipe puts it on its own `isDisabled` or `isInvalid` arm.\n * - `within` keys off the group's own control: a direct child marked\n *   `data-focus-ring-control` (`:disabled`, `aria-disabled=\"true\"`, `aria-invalid`), for a\n *   group whose box is the control (InputGroup, Combobox chips, NumberField). Each owner keeps\n *   its control as a direct child, so a control nested deeper, such as a NumberField inside an\n *   InputGroup addon, belongs to its own owner and never paints the outer group. The control\n *   face goes on the owned control: it keeps the `not-allowed` cursor there, since the browser\n *   gives a disabled input its own cursor, and cancels the dim and ring an embedded control\n *   paints itself (InputGroup's Input), so the face paints once.\n *\n * A control composes every target its state can arrive through. Button, for example, is a\n * native button and a Base UI root at once, so it takes the `native` and `data` targets.\n *\n * The face covers whole controls only. Parts (calendar cells, date segments, the\n * search-field icon, labels that dim beside their control) keep their own muted text colour\n * and are not state faces.\n */\n\nconst ariaDisabledFace = cn(\"aria-disabled:cursor-not-allowed aria-disabled:opacity-50\");\n\nconst ariaInvalidFace = cn(\"aria-invalid:border-error aria-invalid:ring-3 aria-invalid:ring-error/20\");\n\n/** The native-target state face: `:disabled` plus the aria arms. */\nexport const nativeStateFaceClass = cn(\n  \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ariaDisabledFace,\n  ariaInvalidFace\n);\n\n/** The data-target state face: Base UI's `data-disabled` and `data-invalid` plus the aria arms. */\nexport const dataStateFaceClass = cn(\n  ariaDisabledFace,\n  ariaInvalidFace,\n  \"data-invalid:border-error data-invalid:ring-3 data-invalid:ring-error/20\",\n  \"data-disabled:cursor-not-allowed data-disabled:opacity-50\"\n);\n\n/** The aria-target state face: `aria-disabled=\"true\"` and `aria-invalid`. */\nexport const ariaStateFaceClass = cn(ariaDisabledFace, ariaInvalidFace);\n\n/**\n * The rac-target disabled face. A recipe puts it on its `isDisabled: true` arm, because a\n * prop or render prop reports the state there, not a selector.\n */\nexport const racDisabledStateFaceClass = cn(\"cursor-not-allowed opacity-50\");\n\n/** The rac-target invalid face, for a recipe's `isInvalid: true` arm. */\nexport const racInvalidStateFaceClass = cn(\"border-error ring-3 ring-error/20\");\n\n/**\n * The within-target state face on the group. It reads only a direct child marked\n * `data-focus-ring-control`, so the owner must keep its control as a direct child: a control\n * wrapped in another element, or nested in an addon, does not reach this group. Pair it with\n * {@link withinStateFaceControlClass} on that control.\n */\nexport const withinStateFaceClass = cn(\n  \"has-[>[data-focus-ring-control]:disabled]:cursor-not-allowed has-[>[data-focus-ring-control]:disabled]:opacity-50\",\n  \"has-[>[data-focus-ring-control][aria-disabled=true]]:cursor-not-allowed has-[>[data-focus-ring-control][aria-disabled=true]]:opacity-50\",\n  \"has-[>[data-focus-ring-control][aria-invalid=true]]:border-error has-[>[data-focus-ring-control][aria-invalid=true]]:ring-3 has-[>[data-focus-ring-control][aria-invalid=true]]:ring-error/20\"\n);\n\n/**\n * The control half of the within-target state face: it keeps the `not-allowed` cursor on the\n * owned control and cancels the control's own dim and ring so only the group paints them.\n * Pair with {@link withinStateFaceClass}.\n */\nexport const withinStateFaceControlClass = cn(\n  \"disabled:cursor-not-allowed disabled:opacity-100 aria-disabled:cursor-not-allowed aria-disabled:opacity-100 aria-invalid:ring-0\"\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,mBAAmB,GAAG,2DAA2D;AAEvF,MAAM,kBAAkB,GAAG,0EAA0E;;AAGrG,MAAa,uBAAuB,GAClC,mDACA,kBACA,eACF;;AAGA,MAAa,qBAAqB,GAChC,kBACA,iBACA,4EACA,2DACF;;AAGA,MAAa,qBAAqB,GAAG,kBAAkB,eAAe;;;;;AAMtE,MAAa,4BAA4B,GAAG,+BAA+B;;AAG3E,MAAa,2BAA2B,GAAG,mCAAmC;;;;;;;AAQ9E,MAAa,uBAAuB,GAClC,qHACA,2IACA,+LACF;;;;;;AAOA,MAAa,8BAA8B,GACzC,iIACF"}

package/styles/typography-fragments.d.ts

@@ -0,0 +1,70 @@
+//#region src/styles/typography-fragments.d.ts
+export declare const typographyFragments: import("tailwind-variants").TVReturnType<{
+  variant: {
+    default: "text-inherit";
+    foreground: "text-foreground";
+    primary: "text-primary";
+    /**
+     * @deprecated Identity alias of `foreground` — `--secondary` is a surface token, not
+     * a text role (a `muted-foreground` remap fails 4.5:1 at `xs` in several themes).
+     * Use `foreground`, or `muted` where a softer tone is wanted; the arm is kept for
+     * consumer compatibility and can only be removed in a major.
+     */
+    secondary: "text-foreground";
+    brand: "text-brand";
+    muted: "text-muted-foreground";
+    inherit: "text-inherit";
+    destructive: "text-error";
+  };
+  align: {
+    left: "text-left";
+    center: "text-center";
+    right: "text-right";
+  };
+}, undefined, undefined, {
+  variant: {
+    default: "text-inherit";
+    foreground: "text-foreground";
+    primary: "text-primary";
+    /**
+     * @deprecated Identity alias of `foreground` — `--secondary` is a surface token, not
+     * a text role (a `muted-foreground` remap fails 4.5:1 at `xs` in several themes).
+     * Use `foreground`, or `muted` where a softer tone is wanted; the arm is kept for
+     * consumer compatibility and can only be removed in a major.
+     */
+    secondary: "text-foreground";
+    brand: "text-brand";
+    muted: "text-muted-foreground";
+    inherit: "text-inherit";
+    destructive: "text-error";
+  };
+  align: {
+    left: "text-left";
+    center: "text-center";
+    right: "text-right";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    default: "text-inherit";
+    foreground: "text-foreground";
+    primary: "text-primary";
+    /**
+     * @deprecated Identity alias of `foreground` — `--secondary` is a surface token, not
+     * a text role (a `muted-foreground` remap fails 4.5:1 at `xs` in several themes).
+     * Use `foreground`, or `muted` where a softer tone is wanted; the arm is kept for
+     * consumer compatibility and can only be removed in a major.
+     */
+    secondary: "text-foreground";
+    brand: "text-brand";
+    muted: "text-muted-foreground";
+    inherit: "text-inherit";
+    destructive: "text-error";
+  };
+  align: {
+    left: "text-left";
+    center: "text-center";
+    right: "text-right";
+  };
+}, undefined>>;
+//#endregion
+//# sourceMappingURL=typography-fragments.d.ts.map

package/styles/typography-fragments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-fragments.d.ts","names":[],"sources":["../../src/styles/typography-fragments.ts"],"mappings":";qBAuBa,iDAAmB"}

package/styles/typography-fragments.js

@@ -0,0 +1,50 @@
+import { tv } from "tailwind-variants";
+//#region src/styles/typography-fragments.ts
+/**
+* Package-private typography fragments shared by Heading, Text and the interim tier's
+* Link. Nothing here is exported through `package.json#exports`; recipes stay public from
+* their own entries (`headingVariants` / `textVariants`), and `linkVariants` is
+* package-private like the rest of the quarantined tier.
+*
+* Size, font, weight, leading, prose, truncate, and descendant size selectors
+* stay on the recipes — those axes differ on purpose.
+*
+* Heading and Text compose this recipe with `tv({ extend: typographyFragments, … })`
+* so they inherit `variant` and `align` without restating the class strings. Text
+* then adds `success` and `justify`. Link does **not** extend: `extend` would merge
+* the `destructive` arm into `LinkProps["variant"]`. Instead it reads
+* `typographyFragments.variants.variant`, omits `destructive`, and re-keys that
+* class as `error`. Align is the same read, plus Link's `justify`.
+*
+* `destructive` keeps the ref value name; the class is `text-error`.
+*
+* `secondary` is an identity alias of `foreground`, kept for consumer compatibility and
+* deprecated: `--secondary` is a surface token, never a text role. See the arm itself.
+*/
+const typographyFragments = tv({ variants: {
+	variant: {
+		default: "text-inherit",
+		foreground: "text-foreground",
+		primary: "text-primary",
+		/**
+		* @deprecated Identity alias of `foreground` — `--secondary` is a surface token, not
+		* a text role (a `muted-foreground` remap fails 4.5:1 at `xs` in several themes).
+		* Use `foreground`, or `muted` where a softer tone is wanted; the arm is kept for
+		* consumer compatibility and can only be removed in a major.
+		*/
+		secondary: "text-foreground",
+		brand: "text-brand",
+		muted: "text-muted-foreground",
+		inherit: "text-inherit",
+		destructive: "text-error"
+	},
+	align: {
+		left: "text-left",
+		center: "text-center",
+		right: "text-right"
+	}
+} });
+//#endregion
+export { typographyFragments };
+
+//# sourceMappingURL=typography-fragments.js.map

package/styles/typography-fragments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-fragments.js","names":[],"sources":["../../src/styles/typography-fragments.ts"],"sourcesContent":["/**\n * Package-private typography fragments shared by Heading, Text and the interim tier's\n * Link. Nothing here is exported through `package.json#exports`; recipes stay public from\n * their own entries (`headingVariants` / `textVariants`), and `linkVariants` is\n * package-private like the rest of the quarantined tier.\n *\n * Size, font, weight, leading, prose, truncate, and descendant size selectors\n * stay on the recipes — those axes differ on purpose.\n *\n * Heading and Text compose this recipe with `tv({ extend: typographyFragments, … })`\n * so they inherit `variant` and `align` without restating the class strings. Text\n * then adds `success` and `justify`. Link does **not** extend: `extend` would merge\n * the `destructive` arm into `LinkProps[\"variant\"]`. Instead it reads\n * `typographyFragments.variants.variant`, omits `destructive`, and re-keys that\n * class as `error`. Align is the same read, plus Link's `justify`.\n *\n * `destructive` keeps the ref value name; the class is `text-error`.\n *\n * `secondary` is an identity alias of `foreground`, kept for consumer compatibility and\n * deprecated: `--secondary` is a surface token, never a text role. See the arm itself.\n */\nimport { tv } from \"tailwind-variants\";\n\nexport const typographyFragments = tv({\n  variants: {\n    variant: {\n      default: \"text-inherit\",\n      foreground: \"text-foreground\",\n      primary: \"text-primary\",\n      /**\n       * @deprecated Identity alias of `foreground` — `--secondary` is a surface token, not\n       * a text role (a `muted-foreground` remap fails 4.5:1 at `xs` in several themes).\n       * Use `foreground`, or `muted` where a softer tone is wanted; the arm is kept for\n       * consumer compatibility and can only be removed in a major.\n       */\n      secondary: \"text-foreground\",\n      brand: \"text-brand\",\n      muted: \"text-muted-foreground\",\n      inherit: \"text-inherit\",\n      destructive: \"text-error\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,sBAAsB,GAAG,EACpC,UAAU;CACR,SAAS;EACP,SAAS;EACT,YAAY;EACZ,SAAS;;;;;;;EAOT,WAAW;EACX,OAAO;EACP,OAAO;EACP,SAAS;EACT,aAAa;CACf;CACA,OAAO;EACL,MAAM;EACN,QAAQ;EACR,OAAO;CACT;AACF,EACF,CAAC"}