@elmeragroup/fuse 0.1.0-canary.1

package/styles/link.d.ts

@@ -0,0 +1,97 @@
+//#region src/styles/link.d.ts
+export declare const linkVariants: import("tailwind-variants").TVReturnType<{
+  variant: {
+    default: "text-inherit";
+    foreground: "text-foreground";
+    primary: "text-primary";
+    secondary: "text-foreground";
+    brand: "text-brand";
+    muted: "text-muted-foreground";
+    inherit: "text-inherit";
+    error: "text-error";
+  };
+  leading: {
+    none: "leading-none";
+    tight: "leading-tight";
+    snug: "leading-snug";
+    relaxed: "leading-relaxed";
+    loose: "leading-loose";
+  };
+  truncate: {
+    true: "truncate";
+  };
+  align: {
+    left: "text-left";
+    center: "text-center";
+    right: "text-right";
+    justify: "text-justify";
+  };
+  weight: {
+    normal: "font-normal";
+    bold: "font-medium";
+  };
+}, undefined, "font-sans transition-opacity enabled-hover:opacity-80", {
+  variant: {
+    default: "text-inherit";
+    foreground: "text-foreground";
+    primary: "text-primary";
+    secondary: "text-foreground";
+    brand: "text-brand";
+    muted: "text-muted-foreground";
+    inherit: "text-inherit";
+    error: "text-error";
+  };
+  leading: {
+    none: "leading-none";
+    tight: "leading-tight";
+    snug: "leading-snug";
+    relaxed: "leading-relaxed";
+    loose: "leading-loose";
+  };
+  truncate: {
+    true: "truncate";
+  };
+  align: {
+    left: "text-left";
+    center: "text-center";
+    right: "text-right";
+    justify: "text-justify";
+  };
+  weight: {
+    normal: "font-normal";
+    bold: "font-medium";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    default: "text-inherit";
+    foreground: "text-foreground";
+    primary: "text-primary";
+    secondary: "text-foreground";
+    brand: "text-brand";
+    muted: "text-muted-foreground";
+    inherit: "text-inherit";
+    error: "text-error";
+  };
+  leading: {
+    none: "leading-none";
+    tight: "leading-tight";
+    snug: "leading-snug";
+    relaxed: "leading-relaxed";
+    loose: "leading-loose";
+  };
+  truncate: {
+    true: "truncate";
+  };
+  align: {
+    left: "text-left";
+    center: "text-center";
+    right: "text-right";
+    justify: "text-justify";
+  };
+  weight: {
+    normal: "font-normal";
+    bold: "font-medium";
+  };
+}, undefined>>;
+//#endregion
+//# sourceMappingURL=link.d.ts.map

package/styles/link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","names":[],"sources":["../../src/styles/link.ts"],"mappings":";qBAmBa,0CAAY"}

package/styles/link.js

@@ -0,0 +1,50 @@
+import { typographyFragments } from "./typography-fragments.js";
+import { tv } from "tailwind-variants";
+//#region src/styles/link.ts
+/**
+* Package-private Link recipe in the shared location used by the interim React Aria tier.
+* `default` and `inherit` both resolve to `text-inherit`; `bold` resolves to `font-medium`.
+* Link's status axis uses `error`, and its live focus state composes the shared focus
+* recipe at render time. This text component has no control-box density metrics.
+*/
+/**
+* Heading and Text's colour map minus the one key Link does not carry, plus that key's
+* class under Link's own `error` name, so
+* the *value* is shared with Heading's `destructive` arm while the *key* stays Link's —
+* `extend: typographyFragments` would merge every arm and widen `LinkProps["variant"]`
+* with a ninth `destructive` value nobody asked for. Read `variants.variant` instead.
+*/
+const { destructive: errorColorClass, ...linkColorClasses } = typographyFragments.variants.variant;
+const linkVariants = tv({
+	base: "font-sans transition-opacity enabled-hover:opacity-80",
+	variants: {
+		variant: {
+			...linkColorClasses,
+			error: errorColorClass
+		},
+		leading: {
+			none: "leading-none",
+			tight: "leading-tight",
+			snug: "leading-snug",
+			relaxed: "leading-relaxed",
+			loose: "leading-loose"
+		},
+		truncate: { true: "truncate" },
+		align: {
+			...typographyFragments.variants.align,
+			justify: "text-justify"
+		},
+		weight: {
+			normal: "font-normal",
+			bold: "font-medium"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		weight: "normal"
+	}
+});
+//#endregion
+export { linkVariants };
+
+//# sourceMappingURL=link.js.map

package/styles/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","names":[],"sources":["../../src/styles/link.ts"],"sourcesContent":["/**\n * Package-private Link recipe in the shared location used by the interim React Aria tier.\n * `default` and `inherit` both resolve to `text-inherit`; `bold` resolves to `font-medium`.\n * Link's status axis uses `error`, and its live focus state composes the shared focus\n * recipe at render time. This text component has no control-box density metrics.\n */\nimport { tv } from \"tailwind-variants\";\n\nimport { typographyFragments } from \"./typography-fragments\";\n\n/**\n * Heading and Text's colour map minus the one key Link does not carry, plus that key's\n * class under Link's own `error` name, so\n * the *value* is shared with Heading's `destructive` arm while the *key* stays Link's —\n * `extend: typographyFragments` would merge every arm and widen `LinkProps[\"variant\"]`\n * with a ninth `destructive` value nobody asked for. Read `variants.variant` instead.\n */\nconst { destructive: errorColorClass, ...linkColorClasses } = typographyFragments.variants.variant;\n\nexport const linkVariants = tv({\n  base: \"font-sans transition-opacity enabled-hover:opacity-80\",\n  variants: {\n    variant: {\n      ...linkColorClasses,\n      error: errorColorClass,\n    },\n    leading: {\n      none: \"leading-none\",\n      tight: \"leading-tight\",\n      snug: \"leading-snug\",\n      relaxed: \"leading-relaxed\",\n      loose: \"leading-loose\",\n    },\n    truncate: {\n      true: \"truncate\",\n    },\n    align: {\n      ...typographyFragments.variants.align,\n      justify: \"text-justify\",\n    },\n    weight: {\n      normal: \"font-normal\",\n      bold: \"font-medium\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    weight: \"normal\",\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,EAAE,aAAa,iBAAiB,GAAG,qBAAqB,oBAAoB,SAAS;AAE3F,MAAa,eAAe,GAAG;CAC7B,MAAM;CACN,UAAU;EACR,SAAS;GACP,GAAG;GACH,OAAO;EACT;EACA,SAAS;GACP,MAAM;GACN,OAAO;GACP,MAAM;GACN,SAAS;GACT,OAAO;EACT;EACA,UAAU,EACR,MAAM,WACR;EACA,OAAO;GACL,GAAG,oBAAoB,SAAS;GAChC,SAAS;EACX;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,QAAQ;CACV;AACF,CAAC"}

package/styles/merge-class-name.d.ts

@@ -0,0 +1,6 @@
+import { ClassValue } from "clsx";
+//#region src/styles/merge-class-name.d.ts
+/** Preserve Base UI's state callback while merging its result with library classes. */
+export declare function mergeClassName<State>(className: string | ((state: State) => string | undefined) | undefined, ...classes: ClassValue[]): string | ((state: State) => string);
+//#endregion
+//# sourceMappingURL=merge-class-name.d.ts.map

package/styles/merge-class-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-class-name.d.ts","names":[],"sources":["../../src/styles/merge-class-name.ts"],"mappings":";;;wBAKgB,eAAe,OAC7B,sBAAsB,OAAO,8CAC1B,SAAS,0BACA,OAAO"}

package/styles/merge-class-name.js

@@ -0,0 +1,11 @@
+import { cn } from "./cn.js";
+//#region src/styles/merge-class-name.ts
+/** Preserve Base UI's state callback while merging its result with library classes. */
+function mergeClassName(className, ...classes) {
+	if (typeof className === "function") return (state) => cn(...classes, className(state));
+	return cn(...classes, className);
+}
+//#endregion
+export { mergeClassName };
+
+//# sourceMappingURL=merge-class-name.js.map

package/styles/merge-class-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-class-name.js","names":[],"sources":["../../src/styles/merge-class-name.ts"],"sourcesContent":["import type { ClassValue } from \"clsx\";\n\nimport { cn } from \"./cn\";\n\n/** Preserve Base UI's state callback while merging its result with library classes. */\nexport function mergeClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  ...classes: ClassValue[]\n): string | ((state: State) => string) {\n  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- Base UI's public className contract explicitly accepts strings or state callbacks.\n  if (typeof className === \"function\") {\n    return (state) => cn(...classes, className(state));\n  }\n  return cn(...classes, className);\n}\n"],"mappings":";;;AAKA,SAAgB,eACd,WACA,GAAG,SACkC;CAErC,IAAI,OAAO,cAAc,YACvB,QAAQ,UAAU,GAAG,GAAG,SAAS,UAAU,KAAK,CAAC;CAEnD,OAAO,GAAG,GAAG,SAAS,SAAS;AACjC"}

package/styles/panel-height.d.ts

@@ -0,0 +1,22 @@
+//#region src/styles/panel-height.d.ts
+/**
+ * The open/close height transition shared by `Collapsible.Content` and `Accordion.Content`.
+ * One constant because the only difference between the two is which Base UI variable
+ * carries the measured panel height, which each call site appends as
+ * `h-(--…-panel-height)`.
+ *
+ * It keys the collapsed state on `data-starting-style` / `data-ending-style`, never on
+ * `data-open`. Base UI takes `data-open` straight from the `open` state, while the ending
+ * frame is deferred through `useTransitionStatus` in `useCollapsiblePanel`, so a close
+ * request drops `data-open` in the same render; by the time the panel starts animating,
+ * Base UI has reset `--…-panel-height` to `auto`, and `auto → 0px` is not interpolable —
+ * the panel snaps instead of transitioning. The starting/ending frames are the ones Base UI
+ * exposes for this purpose, including for a `hiddenUntilFound` panel, which keeps
+ * `data-starting-style` while hidden so this rule holds it at zero.
+ *
+ * Consumers merge their `className` after this constant, so their conflicting utility wins.
+ * The central reduced-motion rule (`fuse.css`) strips `height` from `transition-property`.
+ */
+export declare const panelHeightTransition: string;
+//#endregion
+//# sourceMappingURL=panel-height.d.ts.map

package/styles/panel-height.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-height.d.ts","names":[],"sources":["../../src/styles/panel-height.ts"],"mappings":";;;;;;;;;;;;;;;;;;;qBAoBa"}

package/styles/panel-height.js

@@ -0,0 +1,25 @@
+import { cn } from "./cn.js";
+//#region src/styles/panel-height.ts
+/**
+* The open/close height transition shared by `Collapsible.Content` and `Accordion.Content`.
+* One constant because the only difference between the two is which Base UI variable
+* carries the measured panel height, which each call site appends as
+* `h-(--…-panel-height)`.
+*
+* It keys the collapsed state on `data-starting-style` / `data-ending-style`, never on
+* `data-open`. Base UI takes `data-open` straight from the `open` state, while the ending
+* frame is deferred through `useTransitionStatus` in `useCollapsiblePanel`, so a close
+* request drops `data-open` in the same render; by the time the panel starts animating,
+* Base UI has reset `--…-panel-height` to `auto`, and `auto → 0px` is not interpolable —
+* the panel snaps instead of transitioning. The starting/ending frames are the ones Base UI
+* exposes for this purpose, including for a `hiddenUntilFound` panel, which keeps
+* `data-starting-style` while hidden so this rule holds it at zero.
+*
+* Consumers merge their `className` after this constant, so their conflicting utility wins.
+* The central reduced-motion rule (`fuse.css`) strips `height` from `transition-property`.
+*/
+const panelHeightTransition = cn("ease-out overflow-hidden transition-[height] duration-150 data-ending-style:h-0 data-starting-style:h-0");
+//#endregion
+export { panelHeightTransition };
+
+//# sourceMappingURL=panel-height.js.map

package/styles/panel-height.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-height.js","names":[],"sources":["../../src/styles/panel-height.ts"],"sourcesContent":["import { cn } from \"./cn\";\n\n/**\n * The open/close height transition shared by `Collapsible.Content` and `Accordion.Content`.\n * One constant because the only difference between the two is which Base UI variable\n * carries the measured panel height, which each call site appends as\n * `h-(--…-panel-height)`.\n *\n * It keys the collapsed state on `data-starting-style` / `data-ending-style`, never on\n * `data-open`. Base UI takes `data-open` straight from the `open` state, while the ending\n * frame is deferred through `useTransitionStatus` in `useCollapsiblePanel`, so a close\n * request drops `data-open` in the same render; by the time the panel starts animating,\n * Base UI has reset `--…-panel-height` to `auto`, and `auto → 0px` is not interpolable —\n * the panel snaps instead of transitioning. The starting/ending frames are the ones Base UI\n * exposes for this purpose, including for a `hiddenUntilFound` panel, which keeps\n * `data-starting-style` while hidden so this rule holds it at zero.\n *\n * Consumers merge their `className` after this constant, so their conflicting utility wins.\n * The central reduced-motion rule (`fuse.css`) strips `height` from `transition-property`.\n */\nexport const panelHeightTransition = cn(\n  \"ease-out overflow-hidden transition-[height] duration-150 data-ending-style:h-0 data-starting-style:h-0\"\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,wBAAwB,GACnC,yGACF"}

package/styles/picker.d.ts

@@ -0,0 +1,252 @@
+//#region src/styles/picker.d.ts
+/**
+ * Shared layout recipe for the two date pickers. The `range` axis selects one segment
+ * row or two; both variants borrow their field box, popup, and grid surfaces from the
+ * composed components. FieldGroup owns the read-only fill and the md control height —
+ * this recipe emits no control-height rung. A narrow range stacks two content-sized
+ * rows; this recipe adds no size axis or glyph background. The input inset keeps
+ * segmented rows aligned with Input at both densities.
+ */
+export declare const pickerVariants: import("tailwind-variants").TVReturnType<{
+  /**
+   * Whether the field box holds two segment rows and a separator. Every geometric
+   * difference between the two pickers hangs off this one axis.
+   */
+  range: {
+    false: {
+      group: string;
+      input: string;
+      calendar: string;
+    };
+    true: {
+      base: string;
+      group: string;
+      input: string;
+      separator: string;
+      trigger: string;
+      calendar: string;
+    };
+  };
+  /**
+   * Whether the caller handed over a preset pane that would actually paint. The call site
+   * decides that (`presetGroup={showPresets && <Group />}` collapses to `false`, not
+   * `undefined`), so this axis takes the answer, never the node. Single-date only.
+   *
+   * The stack-to-row flip stays a viewport `sm:` query: the pane lives in the portalled
+   * popover, outside the picker root's `@container/picker`, and the popover sizes to its
+   * own content, so a local container query would be circular. The range field's own
+   * breakpoint is a genuine container query because its box is inside the picker root.
+   */
+  hasPresets: {
+    true: {
+      pane: string;
+    };
+    false: {
+      pane: string;
+    };
+  };
+}, {
+  /** The RAC picker root: label, field box, help text and popover in a column. */
+  base: string;
+  /** The private FieldGroup around the segment row(s) and the trigger. */
+  group: string;
+  /** A public DateInput inside the field box. */
+  input: string;
+  /**
+   * The en-dash between a range's two rows: decorative, `aria-hidden`, and the only slot
+   * with a colour of its own. It uses role tokens; the forced-colors fallbacks are kept verbatim so the
+   * glyph survives a high-contrast theme. Empty on the single-date axis, which renders no
+   * separator at all.
+   */
+  separator: string;
+  /**
+   * The CalendarBlank glyph in the trigger button. A plain `size-4`: `buttonVariants`
+   * only sizes `svg:not([class*='size-'])`, so this class already wins on its own and an
+   * `!` would just be noise.
+   */
+  icon: string;
+  /**
+   * The calendar trigger's placement inside the field box. Both states share one grid
+   * model, and only the column template and the separator toggle at 24rem, so the
+   * range arm's placements are live at every width. The trigger sits inside the field
+   * box, so it takes the compact corner instead of Button's `--radius-button`.
+   */
+  trigger: string;
+  /**
+   * The styled Dialog inside the popover. Both padding utilities are needed: the dialog
+   * recipe sets `p-6` on its base and `p-4` under `[data-placement]`, which is exactly the
+   * popover case.
+   */
+  dialog: string;
+  /** The public Calendar / RangeCalendar inside the dialog — see the `range` axis. */
+  calendar: string;
+  /**
+   * The responsive pane holding presets above the calendar on small viewports and
+   * beside it on larger ones. Empty
+   * unless there are presets: a lone calendar is a single pane, so it must not inherit the
+   * divider, the column gap or the trailing inset the two-pane layout needs
+   */
+  pane: string;
+}, undefined, {
+  /**
+   * Whether the field box holds two segment rows and a separator. Every geometric
+   * difference between the two pickers hangs off this one axis.
+   */
+  range: {
+    false: {
+      group: string;
+      input: string;
+      calendar: string;
+    };
+    true: {
+      base: string;
+      group: string;
+      input: string;
+      separator: string;
+      trigger: string;
+      calendar: string;
+    };
+  };
+  /**
+   * Whether the caller handed over a preset pane that would actually paint. The call site
+   * decides that (`presetGroup={showPresets && <Group />}` collapses to `false`, not
+   * `undefined`), so this axis takes the answer, never the node. Single-date only.
+   *
+   * The stack-to-row flip stays a viewport `sm:` query: the pane lives in the portalled
+   * popover, outside the picker root's `@container/picker`, and the popover sizes to its
+   * own content, so a local container query would be circular. The range field's own
+   * breakpoint is a genuine container query because its box is inside the picker root.
+   */
+  hasPresets: {
+    true: {
+      pane: string;
+    };
+    false: {
+      pane: string;
+    };
+  };
+}, {
+  /** The RAC picker root: label, field box, help text and popover in a column. */
+  base: string;
+  /** The private FieldGroup around the segment row(s) and the trigger. */
+  group: string;
+  /** A public DateInput inside the field box. */
+  input: string;
+  /**
+   * The en-dash between a range's two rows: decorative, `aria-hidden`, and the only slot
+   * with a colour of its own. It uses role tokens; the forced-colors fallbacks are kept verbatim so the
+   * glyph survives a high-contrast theme. Empty on the single-date axis, which renders no
+   * separator at all.
+   */
+  separator: string;
+  /**
+   * The CalendarBlank glyph in the trigger button. A plain `size-4`: `buttonVariants`
+   * only sizes `svg:not([class*='size-'])`, so this class already wins on its own and an
+   * `!` would just be noise.
+   */
+  icon: string;
+  /**
+   * The calendar trigger's placement inside the field box. Both states share one grid
+   * model, and only the column template and the separator toggle at 24rem, so the
+   * range arm's placements are live at every width. The trigger sits inside the field
+   * box, so it takes the compact corner instead of Button's `--radius-button`.
+   */
+  trigger: string;
+  /**
+   * The styled Dialog inside the popover. Both padding utilities are needed: the dialog
+   * recipe sets `p-6` on its base and `p-4` under `[data-placement]`, which is exactly the
+   * popover case.
+   */
+  dialog: string;
+  /** The public Calendar / RangeCalendar inside the dialog — see the `range` axis. */
+  calendar: string;
+  /**
+   * The responsive pane holding presets above the calendar on small viewports and
+   * beside it on larger ones. Empty
+   * unless there are presets: a lone calendar is a single pane, so it must not inherit the
+   * divider, the column gap or the trailing inset the two-pane layout needs
+   */
+  pane: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  /**
+   * Whether the field box holds two segment rows and a separator. Every geometric
+   * difference between the two pickers hangs off this one axis.
+   */
+  range: {
+    false: {
+      group: string;
+      input: string;
+      calendar: string;
+    };
+    true: {
+      base: string;
+      group: string;
+      input: string;
+      separator: string;
+      trigger: string;
+      calendar: string;
+    };
+  };
+  /**
+   * Whether the caller handed over a preset pane that would actually paint. The call site
+   * decides that (`presetGroup={showPresets && <Group />}` collapses to `false`, not
+   * `undefined`), so this axis takes the answer, never the node. Single-date only.
+   *
+   * The stack-to-row flip stays a viewport `sm:` query: the pane lives in the portalled
+   * popover, outside the picker root's `@container/picker`, and the popover sizes to its
+   * own content, so a local container query would be circular. The range field's own
+   * breakpoint is a genuine container query because its box is inside the picker root.
+   */
+  hasPresets: {
+    true: {
+      pane: string;
+    };
+    false: {
+      pane: string;
+    };
+  };
+}, {
+  /** The RAC picker root: label, field box, help text and popover in a column. */
+  base: string;
+  /** The private FieldGroup around the segment row(s) and the trigger. */
+  group: string;
+  /** A public DateInput inside the field box. */
+  input: string;
+  /**
+   * The en-dash between a range's two rows: decorative, `aria-hidden`, and the only slot
+   * with a colour of its own. It uses role tokens; the forced-colors fallbacks are kept verbatim so the
+   * glyph survives a high-contrast theme. Empty on the single-date axis, which renders no
+   * separator at all.
+   */
+  separator: string;
+  /**
+   * The CalendarBlank glyph in the trigger button. A plain `size-4`: `buttonVariants`
+   * only sizes `svg:not([class*='size-'])`, so this class already wins on its own and an
+   * `!` would just be noise.
+   */
+  icon: string;
+  /**
+   * The calendar trigger's placement inside the field box. Both states share one grid
+   * model, and only the column template and the separator toggle at 24rem, so the
+   * range arm's placements are live at every width. The trigger sits inside the field
+   * box, so it takes the compact corner instead of Button's `--radius-button`.
+   */
+  trigger: string;
+  /**
+   * The styled Dialog inside the popover. Both padding utilities are needed: the dialog
+   * recipe sets `p-6` on its base and `p-4` under `[data-placement]`, which is exactly the
+   * popover case.
+   */
+  dialog: string;
+  /** The public Calendar / RangeCalendar inside the dialog — see the `range` axis. */
+  calendar: string;
+  /**
+   * The responsive pane holding presets above the calendar on small viewports and
+   * beside it on larger ones. Empty
+   * unless there are presets: a lone calendar is a single pane, so it must not inherit the
+   * divider, the column gap or the trailing inset the two-pane layout needs
+   */
+  pane: string;
+}>>;
+//#endregion
+//# sourceMappingURL=picker.d.ts.map

package/styles/picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker.d.ts","names":[],"sources":["../../src/styles/picker.ts"],"mappings":";;;;;;;;;qBAaa,4CAAc;;;;;;IAmDrB;MAEE;MACA;MAEA;;IAEF;MACE;MAUA;MAEA;MAGA;MAEA;MAIA;;;;;;;;;;;;;;IAcF;MACE;;IAEF;MACE"}

package/styles/picker.js

@@ -0,0 +1,100 @@
+import { controlMdInsetTypeClass } from "./control-size-md.js";
+import { compactCornerClass } from "./corner-radius.js";
+import { tv } from "tailwind-variants";
+//#region src/styles/picker.ts
+/**
+* Shared layout recipe for the two date pickers. The `range` axis selects one segment
+* row or two; both variants borrow their field box, popup, and grid surfaces from the
+* composed components. FieldGroup owns the read-only fill and the md control height —
+* this recipe emits no control-height rung. A narrow range stacks two content-sized
+* rows; this recipe adds no size axis or glyph background. The input inset keeps
+* segmented rows aligned with Input at both densities.
+*/
+const pickerVariants = tv({
+	slots: {
+		/** The RAC picker root: label, field box, help text and popover in a column. */
+		base: "group flex max-w-full min-w-0 flex-col gap-1",
+		/** The private FieldGroup around the segment row(s) and the trigger. */
+		group: "w-auto",
+		/** A public DateInput inside the field box. */
+		input: controlMdInsetTypeClass,
+		/**
+		* The en-dash between a range's two rows: decorative, `aria-hidden`, and the only slot
+		* with a colour of its own. It uses role tokens; the forced-colors fallbacks are kept verbatim so the
+		* glyph survives a high-contrast theme. Empty on the single-date axis, which renders no
+		* separator at all.
+		*/
+		separator: "",
+		/**
+		* The CalendarBlank glyph in the trigger button. A plain `size-4`: `buttonVariants`
+		* only sizes `svg:not([class*='size-'])`, so this class already wins on its own and an
+		* `!` would just be noise.
+		*/
+		icon: "size-4 transition-colors",
+		/**
+		* The calendar trigger's placement inside the field box. Both states share one grid
+		* model, and only the column template and the separator toggle at 24rem, so the
+		* range arm's placements are live at every width. The trigger sits inside the field
+		* box, so it takes the compact corner instead of Button's `--radius-button`.
+		*/
+		trigger: compactCornerClass,
+		/**
+		* The styled Dialog inside the popover. Both padding utilities are needed: the dialog
+		* recipe sets `p-6` on its base and `p-4` under `[data-placement]`, which is exactly the
+		* popover case.
+		*/
+		dialog: "p-0 [[data-placement]>&]:p-0",
+		/** The public Calendar / RangeCalendar inside the dialog — see the `range` axis. */
+		calendar: "",
+		/**
+		* The responsive pane holding presets above the calendar on small viewports and
+		* beside it on larger ones. Empty
+		* unless there are presets: a lone calendar is a single pane, so it must not inherit the
+		* divider, the column gap or the trailing inset the two-pane layout needs
+		*/
+		pane: ""
+	},
+	variants: {
+		/**
+		* Whether the field box holds two segment rows and a separator. Every geometric
+		* difference between the two pickers hangs off this one axis.
+		*/
+		range: {
+			false: {
+				group: "min-w-[180px]",
+				input: "flex min-w-[150px] flex-1",
+				calendar: "border-none"
+			},
+			true: {
+				base: "@container/picker w-full",
+				group: "grid min-w-[208px] grid-cols-[minmax(0,1fr)_auto] @max-[24rem]/picker:h-auto @min-[24rem]/picker:grid-cols-[auto_auto_minmax(0,1fr)_auto]",
+				input: "flex items-center",
+				separator: "hidden text-foreground group-disabled:text-muted-foreground @min-[24rem]/picker:col-start-2 @min-[24rem]/picker:inline forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]",
+				trigger: "col-start-2 row-span-2 row-start-1 @min-[24rem]/picker:col-start-4 @min-[24rem]/picker:row-span-1",
+				calendar: "p-2"
+			}
+		},
+		/**
+		* Whether the caller handed over a preset pane that would actually paint. The call site
+		* decides that (`presetGroup={showPresets && <Group />}` collapses to `false`, not
+		* `undefined`), so this axis takes the answer, never the node. Single-date only.
+		*
+		* The stack-to-row flip stays a viewport `sm:` query: the pane lives in the portalled
+		* popover, outside the picker root's `@container/picker`, and the popover sizes to its
+		* own content, so a local container query would be circular. The range field's own
+		* breakpoint is a genuine container query because its box is inside the picker root.
+		*/
+		hasPresets: {
+			true: { pane: "sm:flex-row sm:divide-x sm:divide-y-0 sm:pr-3 flex flex-col gap-3 divide-y pb-3" },
+			false: { pane: "" }
+		}
+	},
+	defaultVariants: {
+		range: false,
+		hasPresets: false
+	}
+});
+//#endregion
+export { pickerVariants };
+
+//# sourceMappingURL=picker.js.map

package/styles/picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker.js","names":[],"sources":["../../src/styles/picker.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { controlMdInsetTypeClass } from \"./control-size-md\";\nimport { compactCornerClass } from \"./corner-radius\";\n\n/**\n * Shared layout recipe for the two date pickers. The `range` axis selects one segment\n * row or two; both variants borrow their field box, popup, and grid surfaces from the\n * composed components. FieldGroup owns the read-only fill and the md control height —\n * this recipe emits no control-height rung. A narrow range stacks two content-sized\n * rows; this recipe adds no size axis or glyph background. The input inset keeps\n * segmented rows aligned with Input at both densities.\n */\nexport const pickerVariants = tv({\n  slots: {\n    /** The RAC picker root: label, field box, help text and popover in a column. */\n    // oxlint-disable-next-line elmera/no-hardcoded-density-metrics -- label/field stack gap is layout, not a control rung\n    base: \"group flex max-w-full min-w-0 flex-col gap-1\",\n    /** The private FieldGroup around the segment row(s) and the trigger. */\n    group: \"w-auto\",\n    /** A public DateInput inside the field box. */\n    input: controlMdInsetTypeClass,\n    /**\n     * The en-dash between a range's two rows: decorative, `aria-hidden`, and the only slot\n     * with a colour of its own. It uses role tokens; the forced-colors fallbacks are kept verbatim so the\n     * glyph survives a high-contrast theme. Empty on the single-date axis, which renders no\n     * separator at all.\n     */\n    separator: \"\",\n    /**\n     * The CalendarBlank glyph in the trigger button. A plain `size-4`: `buttonVariants`\n     * only sizes `svg:not([class*='size-'])`, so this class already wins on its own and an\n     * `!` would just be noise.\n     */\n    icon: \"size-4 transition-colors\",\n    /**\n     * The calendar trigger's placement inside the field box. Both states share one grid\n     * model, and only the column template and the separator toggle at 24rem, so the\n     * range arm's placements are live at every width. The trigger sits inside the field\n     * box, so it takes the compact corner instead of Button's `--radius-button`.\n     */\n    trigger: compactCornerClass,\n    /**\n     * The styled Dialog inside the popover. Both padding utilities are needed: the dialog\n     * recipe sets `p-6` on its base and `p-4` under `[data-placement]`, which is exactly the\n     * popover case.\n     */\n    dialog: \"p-0 [[data-placement]>&]:p-0\",\n    /** The public Calendar / RangeCalendar inside the dialog — see the `range` axis. */\n    calendar: \"\",\n    /**\n     * The responsive pane holding presets above the calendar on small viewports and\n     * beside it on larger ones. Empty\n     * unless there are presets: a lone calendar is a single pane, so it must not inherit the\n     * divider, the column gap or the trailing inset the two-pane layout needs\n     */\n    pane: \"\",\n  },\n  variants: {\n    /**\n     * Whether the field box holds two segment rows and a separator. Every geometric\n     * difference between the two pickers hangs off this one axis.\n     */\n    range: {\n      false: {\n        // One row that grows to fill the box.\n        group: \"min-w-[180px]\",\n        input: \"flex min-w-[150px] flex-1\",\n        // Calendar's own root carries `p-2`; the popover already provides the card chrome.\n        calendar: \"border-none\",\n      },\n      true: {\n        base: \"@container/picker w-full\",\n        // One grid template in both states; 24rem changes only the column count. Below\n        // it the dates stack in the first column beside the row-spanning trigger and the\n        // box opts out of FieldGroup's md height so the two rows size to their content.\n        // Above it the dates run in one row — start, en-dash, end, trigger — and the end\n        // column absorbs the slack.\n        //\n        // The breakpoint is spelled into each class string rather than hoisted into a\n        // constant: Tailwind scans the built JS text, and an interpolated candidate\n        // generates no utility. `picker.test.ts` names it once and pins every slot.\n        group:\n          \"grid min-w-[208px] grid-cols-[minmax(0,1fr)_auto] @max-[24rem]/picker:h-auto @min-[24rem]/picker:grid-cols-[auto_auto_minmax(0,1fr)_auto]\",\n        input: \"flex items-center\",\n        // Two rows share the box and only the end row grows; the wide template's\n        // `minmax(0,1fr)` end column is what hands it the slack.\n        separator:\n          \"hidden text-foreground group-disabled:text-muted-foreground @min-[24rem]/picker:col-start-2 @min-[24rem]/picker:inline forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]\",\n        trigger:\n          \"col-start-2 row-span-2 row-start-1 @min-[24rem]/picker:col-start-4 @min-[24rem]/picker:row-span-1\",\n        // RangeCalendar's root is bare and this dialog is `p-0`, so the grid would otherwise\n        // sit flush against the popover border.\n        calendar: \"p-2\",\n      },\n    },\n    /**\n     * Whether the caller handed over a preset pane that would actually paint. The call site\n     * decides that (`presetGroup={showPresets && <Group />}` collapses to `false`, not\n     * `undefined`), so this axis takes the answer, never the node. Single-date only.\n     *\n     * The stack-to-row flip stays a viewport `sm:` query: the pane lives in the portalled\n     * popover, outside the picker root's `@container/picker`, and the popover sizes to its\n     * own content, so a local container query would be circular. The range field's own\n     * breakpoint is a genuine container query because its box is inside the picker root.\n     */\n    hasPresets: {\n      true: {\n        pane: \"sm:flex-row sm:divide-x sm:divide-y-0 sm:pr-3 flex flex-col gap-3 divide-y pb-3\",\n      },\n      false: {\n        pane: \"\",\n      },\n    },\n  },\n  defaultVariants: {\n    range: false,\n    hasPresets: false,\n  },\n});\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,iBAAiB,GAAG;CAC/B,OAAO;;EAGL,MAAM;;EAEN,OAAO;;EAEP,OAAO;;;;;;;EAOP,WAAW;;;;;;EAMX,MAAM;;;;;;;EAON,SAAS;;;;;;EAMT,QAAQ;;EAER,UAAU;;;;;;;EAOV,MAAM;CACR;CACA,UAAU;;;;;EAKR,OAAO;GACL,OAAO;IAEL,OAAO;IACP,OAAO;IAEP,UAAU;GACZ;GACA,MAAM;IACJ,MAAM;IAUN,OACE;IACF,OAAO;IAGP,WACE;IACF,SACE;IAGF,UAAU;GACZ;EACF;;;;;;;;;;;EAWA,YAAY;GACV,MAAM,EACJ,MAAM,kFACR;GACA,OAAO,EACL,MAAM,GACR;EACF;CACF;CACA,iBAAiB;EACf,OAAO;EACP,YAAY;CACd;AACF,CAAC"}