@elmeragroup/fuse 0.1.0-canary.1

package/styles/control-size-md.js

@@ -0,0 +1,37 @@
+import { cn } from "./cn.js";
+import { tv } from "tailwind-variants";
+//#region src/styles/control-size-md.ts
+/**
+* The md row of the control size (see `control-size.ts`), resolved once at module scope for
+* the controls that have no size axis: Tabs triggers, the Combobox chips box and the
+* text-entry boxes (Input, Textarea, the pickers, DateField and NumberField).
+* `controlMetrics` reads its md row from here, so each md literal has one owner.
+*
+* It sits in its own file, beside `control-size.ts`, because the docs token extraction
+* lists every `--control-*` variable a component's reachable sources spell. A consumer
+* that imports only this file lists no xs, sm or lg variables. The extraction is
+* file-granular, so it still lists every md part here, including ones the consumer does
+* not bind. Each slot is one metric family, so a consumer takes the parts it binds and
+* keeps its own geometry for the rest.
+*/
+const controlMd = tv({ slots: {
+	height: "h-(--control-h-md)",
+	minHeight: "min-h-(--control-h-md)",
+	minWidth: "min-w-(--control-h-md)",
+	square: "size-(--control-h-md)",
+	gap: "gap-(--control-gap-md)",
+	inset: "px-(--control-px-md)",
+	iconInset: "px-(--control-px-icon-md)",
+	iconEdge: "has-data-[icon=inline-end]:pr-(--control-px-icon-md) has-data-[icon=inline-start]:pl-(--control-px-icon-md)",
+	type: "[font-size:var(--control-text)] [line-height:var(--control-leading)]"
+} })();
+/**
+* The md inline inset and the density-owned type pair, the one pairing every text-entry box
+* uses: the field-box recipe, the RAC input, the picker and date-field inputs, and
+* NumberField's input. Each box sets its own height, so the pair leaves height out.
+*/
+const controlMdInsetTypeClass = cn(controlMd.inset(), controlMd.type());
+//#endregion
+export { controlMd, controlMdInsetTypeClass };
+
+//# sourceMappingURL=control-size-md.js.map

package/styles/control-size-md.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-size-md.js","names":[],"sources":["../../src/styles/control-size-md.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { cn } from \"./cn\";\n\n/**\n * The md row of the control size (see `control-size.ts`), resolved once at module scope for\n * the controls that have no size axis: Tabs triggers, the Combobox chips box and the\n * text-entry boxes (Input, Textarea, the pickers, DateField and NumberField).\n * `controlMetrics` reads its md row from here, so each md literal has one owner.\n *\n * It sits in its own file, beside `control-size.ts`, because the docs token extraction\n * lists every `--control-*` variable a component's reachable sources spell. A consumer\n * that imports only this file lists no xs, sm or lg variables. The extraction is\n * file-granular, so it still lists every md part here, including ones the consumer does\n * not bind. Each slot is one metric family, so a consumer takes the parts it binds and\n * keeps its own geometry for the rest.\n */\nexport const controlMd = tv({\n  slots: {\n    height: \"h-(--control-h-md)\",\n    minHeight: \"min-h-(--control-h-md)\",\n    minWidth: \"min-w-(--control-h-md)\",\n    square: \"size-(--control-h-md)\",\n    gap: \"gap-(--control-gap-md)\",\n    inset: \"px-(--control-px-md)\",\n    iconInset: \"px-(--control-px-icon-md)\",\n    iconEdge:\n      \"has-data-[icon=inline-end]:pr-(--control-px-icon-md) has-data-[icon=inline-start]:pl-(--control-px-icon-md)\",\n    type: \"[font-size:var(--control-text)] [line-height:var(--control-leading)]\",\n  },\n})();\n\n/**\n * The md inline inset and the density-owned type pair, the one pairing every text-entry box\n * uses: the field-box recipe, the RAC input, the picker and date-field inputs, and\n * NumberField's input. Each box sets its own height, so the pair leaves height out.\n */\nexport const controlMdInsetTypeClass = cn(controlMd.inset(), controlMd.type());\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAa,YAAY,GAAG,EAC1B,OAAO;CACL,QAAQ;CACR,WAAW;CACX,UAAU;CACV,QAAQ;CACR,KAAK;CACL,OAAO;CACP,WAAW;CACX,UACE;CACF,MAAM;AACR,EACF,CAAC,CAAC,CAAC;;;;;;AAOH,MAAa,0BAA0B,GAAG,UAAU,MAAM,GAAG,UAAU,KAAK,CAAC"}

package/styles/control-size.d.ts

@@ -0,0 +1,266 @@
+//#region src/styles/control-size.d.ts
+/**
+ * Control size: the size × fit mapping of the density-owned control metrics (`--control-*`
+ * in `fuse.css`, mirrored by `theme/tokens/density-metrics.ts`) onto a control. Button,
+ * Toggle and ToggleGroup, and RadioIconButton take their size classes from
+ * {@link controlSize}. Select's trigger takes its label from {@link controlLabel}, and a
+ * segmented ToggleGroup item takes its inset from the {@link controlMetrics} slots. Controls
+ * without a size axis take the md parts from `control-size-md.ts`.
+ *
+ * Two rules live here and nowhere else. xs and sm set a fixed `text-xs` / `text-sm` that
+ * does not follow density, while md and lg bind the density's `--control-text` /
+ * `--control-leading` pair. The icon edge (`has-data-[icon=inline-*]`) swaps the label inset
+ * for the tighter icon inset on the side a `data-icon="inline-start"` or `"inline-end"`
+ * child sits.
+ *
+ * Apart from the icon edge, every size class is an unprefixed utility, so a consumer's
+ * `className` utility of the same family (`h-12`, `px-4`) replaces it through tailwind-merge.
+ *
+ * The recipe paints size only. The state face (`state-face.ts`) is a separate fragment,
+ * and each control recipe composes both.
+ *
+ * `control-size.browser.test.tsx` measures every consumer at both densities against
+ * `DENSITY_METRICS`.
+ */
+/** A control size. Each has one metric per sized family in `DENSITY_METRICS`. */
+export type ControlSize = "xs" | "sm" | "md" | "lg";
+/**
+ * A control size's fit: how the control's box fits its content. `label` is a padded box
+ * with a label: height, gap, inset, type and the icon edge. `min-square` is a label that is
+ * never narrower than it is tall, as Toggle is. `square` is a fixed square of the control
+ * height for icon-only controls, with no padding or type of its own.
+ */
+export type ControlFit = "label" | "square" | "min-square";
+/**
+ * The metric parts of each control size, one slot per metric family.
+ * {@link controlSize} assembles the fits from these parts. `iconInset` is the icon inset on
+ * both sides, which a segmented ToggleGroup item takes in place of the label inset.
+ * Sidebar's sub-button reads the parts it binds.
+ */
+export declare const controlMetrics: import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+    sm: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+    md: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+    lg: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+  };
+}, {
+  height: string;
+  minWidth: string;
+  square: string;
+  gap: string;
+  inset: string;
+  iconInset: string;
+  iconEdge: string;
+  type: string;
+}, undefined, {
+  size: {
+    xs: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+    sm: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+    md: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+    lg: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+  };
+}, {
+  height: string;
+  minWidth: string;
+  square: string;
+  gap: string;
+  inset: string;
+  iconInset: string;
+  iconEdge: string;
+  type: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    xs: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+    sm: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+    md: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+    lg: {
+      height: string;
+      minWidth: string;
+      square: string;
+      gap: string;
+      inset: string;
+      iconInset: string;
+      iconEdge: string;
+      type: string;
+    };
+  };
+}, {
+  height: string;
+  minWidth: string;
+  square: string;
+  gap: string;
+  inset: string;
+  iconInset: string;
+  iconEdge: string;
+  type: string;
+}>>;
+/** Options for {@link controlLabel}. */
+export type ControlLabelOptions = {
+  /**
+   * Whether the label maps a `data-icon="inline-start"` or `"inline-end"` child onto the
+   * icon edge. `"omit"` is for a control that has never tightened its inset around an
+   * icon child, as Select's trigger.
+   */
+  readonly iconEdge: "include" | "omit";
+};
+/**
+ * The `label` fit of one control size: height, gap, inset and type, then the icon edge
+ * unless the options omit it. {@link controlSize} builds its `label` and `min-square`
+ * fits from this, and a control that composes its own size axis takes it too, so a new
+ * label part reaches every label box.
+ *
+ * @param size - The control size.
+ * @param options - Whether the label includes the icon edge.
+ * @returns The label's size classes.
+ * @example
+ * controlLabel("sm", { iconEdge: "omit" })
+ */
+export declare function controlLabel(size: ControlSize, options: ControlLabelOptions): string;
+/**
+ * The size × fit recipe. Every class depends on both axes (a `square` takes the size's
+ * square and none of its label parts), so each axis value paints nothing alone and each
+ * cell is a compound variant assembled from the {@link controlMetrics} slots. Pass both
+ * axes: a call without them paints no size.
+ *
+ * @example
+ * controlSize({ size: "sm", fit: "label" })
+ */
+export declare const controlSize: import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: "";
+    sm: "";
+    md: "";
+    lg: "";
+  };
+  fit: {
+    label: "";
+    square: "";
+    "min-square": "";
+  };
+}, undefined, undefined, {
+  size: {
+    xs: "";
+    sm: "";
+    md: "";
+    lg: "";
+  };
+  fit: {
+    label: "";
+    square: "";
+    "min-square": "";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    xs: "";
+    sm: "";
+    md: "";
+    lg: "";
+  };
+  fit: {
+    label: "";
+    square: "";
+    "min-square": "";
+  };
+}, undefined>>;
+//#endregion
+//# sourceMappingURL=control-size.d.ts.map

package/styles/control-size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-size.d.ts","names":[],"sources":["../../src/styles/control-size.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;YA8BY;;;;;;;YAQA;;;;;;;qBAQC,4CAAc;;IAarB;MACE;MACA;MACA;MACA;MACA;MACA;MACA;MAEA;;IAEF;MACE;MACA;MACA;MACA;MACA;MACA;MACA;MAEA;;IAEF;MACE;MACA;MACA;MACA;MACA;MACA;MACA;MACA;;IAEF;MACE;MACA;MACA;MACA;MACA;MACA;MACA;MAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAOI;;;;;;WAMD;;;;;;;;;;;;;;wBAeK,aAAa,MAAM,aAAa,SAAS;;;;;;;;;;qBAsC5C,yCAAW"}

package/styles/control-size.js

@@ -0,0 +1,136 @@
+import { cn } from "./cn.js";
+import { controlMd } from "./control-size-md.js";
+import { tv } from "tailwind-variants";
+//#region src/styles/control-size.ts
+/**
+* The metric parts of each control size, one slot per metric family.
+* {@link controlSize} assembles the fits from these parts. `iconInset` is the icon inset on
+* both sides, which a segmented ToggleGroup item takes in place of the label inset.
+* Sidebar's sub-button reads the parts it binds.
+*/
+const controlMetrics = tv({
+	slots: {
+		height: "",
+		minWidth: "",
+		square: "",
+		gap: "",
+		inset: "",
+		iconInset: "",
+		iconEdge: "",
+		type: ""
+	},
+	variants: { size: {
+		xs: {
+			height: "h-(--control-h-xs)",
+			minWidth: "min-w-(--control-h-xs)",
+			square: "size-(--control-h-xs)",
+			gap: "gap-(--control-gap-xs)",
+			inset: "px-(--control-px-xs)",
+			iconInset: "px-(--control-px-icon-xs)",
+			iconEdge: "has-data-[icon=inline-end]:pr-(--control-px-icon-xs) has-data-[icon=inline-start]:pl-(--control-px-icon-xs)",
+			type: "text-xs"
+		},
+		sm: {
+			height: "h-(--control-h-sm)",
+			minWidth: "min-w-(--control-h-sm)",
+			square: "size-(--control-h-sm)",
+			gap: "gap-(--control-gap-sm)",
+			inset: "px-(--control-px-sm)",
+			iconInset: "px-(--control-px-icon-sm)",
+			iconEdge: "has-data-[icon=inline-end]:pr-(--control-px-icon-sm) has-data-[icon=inline-start]:pl-(--control-px-icon-sm)",
+			type: "text-sm"
+		},
+		md: {
+			height: controlMd.height(),
+			minWidth: controlMd.minWidth(),
+			square: controlMd.square(),
+			gap: controlMd.gap(),
+			inset: controlMd.inset(),
+			iconInset: controlMd.iconInset(),
+			iconEdge: controlMd.iconEdge(),
+			type: controlMd.type()
+		},
+		lg: {
+			height: "h-(--control-h-lg)",
+			minWidth: "min-w-(--control-h-lg)",
+			square: "size-(--control-h-lg)",
+			gap: "gap-(--control-gap-lg)",
+			inset: "px-(--control-px-lg)",
+			iconInset: "px-(--control-px-icon-lg)",
+			iconEdge: "has-data-[icon=inline-end]:pr-(--control-px-icon-lg) has-data-[icon=inline-start]:pl-(--control-px-icon-lg)",
+			type: controlMd.type()
+		}
+	} }
+});
+/**
+* The `label` fit of one control size: height, gap, inset and type, then the icon edge
+* unless the options omit it. {@link controlSize} builds its `label` and `min-square`
+* fits from this, and a control that composes its own size axis takes it too, so a new
+* label part reaches every label box.
+*
+* @param size - The control size.
+* @param options - Whether the label includes the icon edge.
+* @returns The label's size classes.
+* @example
+* controlLabel("sm", { iconEdge: "omit" })
+*/
+function controlLabel(size, options) {
+	const parts = controlMetrics({ size });
+	return cn(parts.height(), parts.gap(), parts.inset(), parts.type(), options.iconEdge === "include" && parts.iconEdge());
+}
+/** The three fits of one size, as compound variants of {@link controlSize}. */
+function fitsOf(size) {
+	const parts = controlMetrics({ size });
+	const label = controlLabel(size, { iconEdge: "include" });
+	return [
+		{
+			size,
+			fit: "label",
+			class: label
+		},
+		{
+			size,
+			fit: "min-square",
+			class: cn(label, parts.minWidth())
+		},
+		{
+			size,
+			fit: "square",
+			class: parts.square()
+		}
+	];
+}
+/**
+* The size × fit recipe. Every class depends on both axes (a `square` takes the size's
+* square and none of its label parts), so each axis value paints nothing alone and each
+* cell is a compound variant assembled from the {@link controlMetrics} slots. Pass both
+* axes: a call without them paints no size.
+*
+* @example
+* controlSize({ size: "sm", fit: "label" })
+*/
+const controlSize = tv({
+	variants: {
+		size: {
+			xs: "",
+			sm: "",
+			md: "",
+			lg: ""
+		},
+		fit: {
+			label: "",
+			square: "",
+			"min-square": ""
+		}
+	},
+	compoundVariants: [
+		...fitsOf("xs"),
+		...fitsOf("sm"),
+		...fitsOf("md"),
+		...fitsOf("lg")
+	]
+});
+//#endregion
+export { controlLabel, controlMetrics, controlSize };
+
+//# sourceMappingURL=control-size.js.map

package/styles/control-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-size.js","names":[],"sources":["../../src/styles/control-size.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { cn } from \"./cn\";\nimport { controlMd } from \"./control-size-md\";\n\n/**\n * Control size: the size × fit mapping of the density-owned control metrics (`--control-*`\n * in `fuse.css`, mirrored by `theme/tokens/density-metrics.ts`) onto a control. Button,\n * Toggle and ToggleGroup, and RadioIconButton take their size classes from\n * {@link controlSize}. Select's trigger takes its label from {@link controlLabel}, and a\n * segmented ToggleGroup item takes its inset from the {@link controlMetrics} slots. Controls\n * without a size axis take the md parts from `control-size-md.ts`.\n *\n * Two rules live here and nowhere else. xs and sm set a fixed `text-xs` / `text-sm` that\n * does not follow density, while md and lg bind the density's `--control-text` /\n * `--control-leading` pair. The icon edge (`has-data-[icon=inline-*]`) swaps the label inset\n * for the tighter icon inset on the side a `data-icon=\"inline-start\"` or `\"inline-end\"`\n * child sits.\n *\n * Apart from the icon edge, every size class is an unprefixed utility, so a consumer's\n * `className` utility of the same family (`h-12`, `px-4`) replaces it through tailwind-merge.\n *\n * The recipe paints size only. The state face (`state-face.ts`) is a separate fragment,\n * and each control recipe composes both.\n *\n * `control-size.browser.test.tsx` measures every consumer at both densities against\n * `DENSITY_METRICS`.\n */\n\n/** A control size. Each has one metric per sized family in `DENSITY_METRICS`. */\nexport type ControlSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * A control size's fit: how the control's box fits its content. `label` is a padded box\n * with a label: height, gap, inset, type and the icon edge. `min-square` is a label that is\n * never narrower than it is tall, as Toggle is. `square` is a fixed square of the control\n * height for icon-only controls, with no padding or type of its own.\n */\nexport type ControlFit = \"label\" | \"square\" | \"min-square\";\n\n/**\n * The metric parts of each control size, one slot per metric family.\n * {@link controlSize} assembles the fits from these parts. `iconInset` is the icon inset on\n * both sides, which a segmented ToggleGroup item takes in place of the label inset.\n * Sidebar's sub-button reads the parts it binds.\n */\nexport const controlMetrics = tv({\n  slots: {\n    height: \"\",\n    minWidth: \"\",\n    square: \"\",\n    gap: \"\",\n    inset: \"\",\n    iconInset: \"\",\n    iconEdge: \"\",\n    type: \"\",\n  },\n  variants: {\n    size: {\n      xs: {\n        height: \"h-(--control-h-xs)\",\n        minWidth: \"min-w-(--control-h-xs)\",\n        square: \"size-(--control-h-xs)\",\n        gap: \"gap-(--control-gap-xs)\",\n        inset: \"px-(--control-px-xs)\",\n        iconInset: \"px-(--control-px-icon-xs)\",\n        iconEdge:\n          \"has-data-[icon=inline-end]:pr-(--control-px-icon-xs) has-data-[icon=inline-start]:pl-(--control-px-icon-xs)\",\n        type: \"text-xs\",\n      },\n      sm: {\n        height: \"h-(--control-h-sm)\",\n        minWidth: \"min-w-(--control-h-sm)\",\n        square: \"size-(--control-h-sm)\",\n        gap: \"gap-(--control-gap-sm)\",\n        inset: \"px-(--control-px-sm)\",\n        iconInset: \"px-(--control-px-icon-sm)\",\n        iconEdge:\n          \"has-data-[icon=inline-end]:pr-(--control-px-icon-sm) has-data-[icon=inline-start]:pl-(--control-px-icon-sm)\",\n        type: \"text-sm\",\n      },\n      md: {\n        height: controlMd.height(),\n        minWidth: controlMd.minWidth(),\n        square: controlMd.square(),\n        gap: controlMd.gap(),\n        inset: controlMd.inset(),\n        iconInset: controlMd.iconInset(),\n        iconEdge: controlMd.iconEdge(),\n        type: controlMd.type(),\n      },\n      lg: {\n        height: \"h-(--control-h-lg)\",\n        minWidth: \"min-w-(--control-h-lg)\",\n        square: \"size-(--control-h-lg)\",\n        gap: \"gap-(--control-gap-lg)\",\n        inset: \"px-(--control-px-lg)\",\n        iconInset: \"px-(--control-px-icon-lg)\",\n        iconEdge:\n          \"has-data-[icon=inline-end]:pr-(--control-px-icon-lg) has-data-[icon=inline-start]:pl-(--control-px-icon-lg)\",\n        // The density type pair is one metric for every size, so lg binds md's.\n        type: controlMd.type(),\n      },\n    },\n  },\n});\n\n/** Options for {@link controlLabel}. */\nexport type ControlLabelOptions = {\n  /**\n   * Whether the label maps a `data-icon=\"inline-start\"` or `\"inline-end\"` child onto the\n   * icon edge. `\"omit\"` is for a control that has never tightened its inset around an\n   * icon child, as Select's trigger.\n   */\n  readonly iconEdge: \"include\" | \"omit\";\n};\n\n/**\n * The `label` fit of one control size: height, gap, inset and type, then the icon edge\n * unless the options omit it. {@link controlSize} builds its `label` and `min-square`\n * fits from this, and a control that composes its own size axis takes it too, so a new\n * label part reaches every label box.\n *\n * @param size - The control size.\n * @param options - Whether the label includes the icon edge.\n * @returns The label's size classes.\n * @example\n * controlLabel(\"sm\", { iconEdge: \"omit\" })\n */\nexport function controlLabel(size: ControlSize, options: ControlLabelOptions): string {\n  const parts = controlMetrics({ size });\n  return cn(\n    parts.height(),\n    parts.gap(),\n    parts.inset(),\n    parts.type(),\n    options.iconEdge === \"include\" && parts.iconEdge()\n  );\n}\n\n/** One size × fit cell of {@link controlSize}. */\ntype ControlSizeCell = {\n  readonly size: ControlSize;\n  readonly fit: ControlFit;\n  readonly class: string;\n};\n\n/** The three fits of one size, as compound variants of {@link controlSize}. */\nfunction fitsOf(size: ControlSize): readonly ControlSizeCell[] {\n  const parts = controlMetrics({ size });\n  const label = controlLabel(size, { iconEdge: \"include\" });\n  return [\n    { size, fit: \"label\", class: label },\n    { size, fit: \"min-square\", class: cn(label, parts.minWidth()) },\n    { size, fit: \"square\", class: parts.square() },\n  ];\n}\n\n/**\n * The size × fit recipe. Every class depends on both axes (a `square` takes the size's\n * square and none of its label parts), so each axis value paints nothing alone and each\n * cell is a compound variant assembled from the {@link controlMetrics} slots. Pass both\n * axes: a call without them paints no size.\n *\n * @example\n * controlSize({ size: \"sm\", fit: \"label\" })\n */\nexport const controlSize = tv({\n  variants: {\n    size: { xs: \"\", sm: \"\", md: \"\", lg: \"\" },\n    fit: { label: \"\", square: \"\", \"min-square\": \"\" },\n  },\n  compoundVariants: [...fitsOf(\"xs\"), ...fitsOf(\"sm\"), ...fitsOf(\"md\"), ...fitsOf(\"lg\")],\n});\n"],"mappings":";;;;;;;;;;AA8CA,MAAa,iBAAiB,GAAG;CAC/B,OAAO;EACL,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,KAAK;EACL,OAAO;EACP,WAAW;EACX,UAAU;EACV,MAAM;CACR;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;GACR,UAAU;GACV,QAAQ;GACR,KAAK;GACL,OAAO;GACP,WAAW;GACX,UACE;GACF,MAAM;EACR;EACA,IAAI;GACF,QAAQ;GACR,UAAU;GACV,QAAQ;GACR,KAAK;GACL,OAAO;GACP,WAAW;GACX,UACE;GACF,MAAM;EACR;EACA,IAAI;GACF,QAAQ,UAAU,OAAO;GACzB,UAAU,UAAU,SAAS;GAC7B,QAAQ,UAAU,OAAO;GACzB,KAAK,UAAU,IAAI;GACnB,OAAO,UAAU,MAAM;GACvB,WAAW,UAAU,UAAU;GAC/B,UAAU,UAAU,SAAS;GAC7B,MAAM,UAAU,KAAK;EACvB;EACA,IAAI;GACF,QAAQ;GACR,UAAU;GACV,QAAQ;GACR,KAAK;GACL,OAAO;GACP,WAAW;GACX,UACE;GAEF,MAAM,UAAU,KAAK;EACvB;CACF,EACF;AACF,CAAC;;;;;;;;;;;;;AAwBD,SAAgB,aAAa,MAAmB,SAAsC;CACpF,MAAM,QAAQ,eAAe,EAAE,KAAK,CAAC;CACrC,OAAO,GACL,MAAM,OAAO,GACb,MAAM,IAAI,GACV,MAAM,MAAM,GACZ,MAAM,KAAK,GACX,QAAQ,aAAa,aAAa,MAAM,SAAS,CACnD;AACF;;AAUA,SAAS,OAAO,MAA+C;CAC7D,MAAM,QAAQ,eAAe,EAAE,KAAK,CAAC;CACrC,MAAM,QAAQ,aAAa,MAAM,EAAE,UAAU,UAAU,CAAC;CACxD,OAAO;EACL;GAAE;GAAM,KAAK;GAAS,OAAO;EAAM;EACnC;GAAE;GAAM,KAAK;GAAc,OAAO,GAAG,OAAO,MAAM,SAAS,CAAC;EAAE;EAC9D;GAAE;GAAM,KAAK;GAAU,OAAO,MAAM,OAAO;EAAE;CAC/C;AACF;;;;;;;;;;AAWA,MAAa,cAAc,GAAG;CAC5B,UAAU;EACR,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;EACvC,KAAK;GAAE,OAAO;GAAI,QAAQ;GAAI,cAAc;EAAG;CACjD;CACA,kBAAkB;EAAC,GAAG,OAAO,IAAI;EAAG,GAAG,OAAO,IAAI;EAAG,GAAG,OAAO,IAAI;EAAG,GAAG,OAAO,IAAI;CAAC;AACvF,CAAC"}

package/styles/corner-radius.d.ts

@@ -0,0 +1,32 @@
+//#region src/styles/corner-radius.d.ts
+/**
+ * The corner of an xs button inside an InputGroup addon. External themes inset it 5px, or
+ * 2.5 steps, inside the field's `--radius`, and internal themes inset it by 0.
+ */
+export declare const insetCornerClass: string;
+/**
+ * The {@link insetCornerClass} corner on an addon's `<kbd>` child. The radius browser matrix
+ * measures the kbd and an xs addon button against the same expected corner.
+ */
+export declare const kbdInsetCornerClass: string;
+/**
+ * The corner of a compact button that sits in a field or a list, such as the xs Toggle, the
+ * date picker trigger, the DatePicker preset items and the Combobox chip remove button.
+ * External themes round it with `rounded-md` capped at 10px, and internal themes with
+ * `--radius`.
+ */
+export declare const compactCornerClass: string;
+/**
+ * The Checkbox corner. External themes round it with `rounded-md` capped at 4px, and
+ * internal themes with `--radius`.
+ */
+export declare const checkboxCornerClass: string;
+/**
+ * The corner of the phone country trigger and the standalone Calendar. External themes keep
+ * the reference's 4px whatever the brand radius, and internal themes round it with
+ * `--radius`. The clamp's bounds meet at `--radius` at a 0px step and lie 4000px apart at a
+ * 2px step, where the preferred 4px applies.
+ */
+export declare const fixedCornerClass: string;
+//#endregion
+//# sourceMappingURL=corner-radius.d.ts.map

package/styles/corner-radius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"corner-radius.d.ts","names":[],"sources":["../../src/styles/corner-radius.ts"],"mappings":";;;;;qBAea;;;;;qBAMA;;;;;;;qBAQA;;;;;qBAQA;;;;;;;qBAUA"}

package/styles/corner-radius.js

@@ -0,0 +1,35 @@
+import { cn } from "./cn.js";
+//#region src/styles/corner-radius.ts
+/**
+* The corner of an xs button inside an InputGroup addon. External themes inset it 5px, or
+* 2.5 steps, inside the field's `--radius`, and internal themes inset it by 0.
+*/
+const insetCornerClass = cn("rounded-[calc(var(--radius)-2.5*var(--radius-step))]");
+/**
+* The {@link insetCornerClass} corner on an addon's `<kbd>` child. The radius browser matrix
+* measures the kbd and an xs addon button against the same expected corner.
+*/
+const kbdInsetCornerClass = cn("[&>kbd]:rounded-[calc(var(--radius)-2.5*var(--radius-step))]");
+/**
+* The corner of a compact button that sits in a field or a list, such as the xs Toggle, the
+* date picker trigger, the DatePicker preset items and the Combobox chip remove button.
+* External themes round it with `rounded-md` capped at 10px, and internal themes with
+* `--radius`.
+*/
+const compactCornerClass = cn("rounded-[min(--theme(--radius-md),max(10px,var(--radius)-1000*var(--radius-step)))]");
+/**
+* The Checkbox corner. External themes round it with `rounded-md` capped at 4px, and
+* internal themes with `--radius`.
+*/
+const checkboxCornerClass = cn("rounded-[min(--theme(--radius-md),max(4px,var(--radius)-1000*var(--radius-step)))]");
+/**
+* The corner of the phone country trigger and the standalone Calendar. External themes keep
+* the reference's 4px whatever the brand radius, and internal themes round it with
+* `--radius`. The clamp's bounds meet at `--radius` at a 0px step and lie 4000px apart at a
+* 2px step, where the preferred 4px applies.
+*/
+const fixedCornerClass = cn("rounded-[clamp(var(--radius)-1000*var(--radius-step),4px,var(--radius)+1000*var(--radius-step))]");
+//#endregion
+export { checkboxCornerClass, compactCornerClass, fixedCornerClass, insetCornerClass, kbdInsetCornerClass };
+
+//# sourceMappingURL=corner-radius.js.map

package/styles/corner-radius.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"corner-radius.js","names":[],"sources":["../../src/styles/corner-radius.ts"],"sourcesContent":["import { cn } from \"./cn\";\n\n// The corners here leave the `rounded-*` scale in external themes and round with `--radius`\n// in internal ones. Each class reads the element's own `--radius` and `--radius-step`, so it\n// follows the enclosing theme scope and a `--radius` override on the theme element.\n// `--radius-step` doubles as the variant switch. It is 0px in the internal variant and 2px\n// in the external one, and the formulas support no other value. `--radius - 1000 * step`\n// equals `--radius` at a 0px step and lies 2000px below it at a 2px step. A `max()` with it\n// raises a cap to at least `--radius` internally and leaves the cap as written externally.\n// Tailwind generates a class only from its whole literal, so each class spells its value.\n\n/**\n * The corner of an xs button inside an InputGroup addon. External themes inset it 5px, or\n * 2.5 steps, inside the field's `--radius`, and internal themes inset it by 0.\n */\nexport const insetCornerClass = cn(\"rounded-[calc(var(--radius)-2.5*var(--radius-step))]\");\n\n/**\n * The {@link insetCornerClass} corner on an addon's `<kbd>` child. The radius browser matrix\n * measures the kbd and an xs addon button against the same expected corner.\n */\nexport const kbdInsetCornerClass = cn(\"[&>kbd]:rounded-[calc(var(--radius)-2.5*var(--radius-step))]\");\n\n/**\n * The corner of a compact button that sits in a field or a list, such as the xs Toggle, the\n * date picker trigger, the DatePicker preset items and the Combobox chip remove button.\n * External themes round it with `rounded-md` capped at 10px, and internal themes with\n * `--radius`.\n */\nexport const compactCornerClass = cn(\n  \"rounded-[min(--theme(--radius-md),max(10px,var(--radius)-1000*var(--radius-step)))]\"\n);\n\n/**\n * The Checkbox corner. External themes round it with `rounded-md` capped at 4px, and\n * internal themes with `--radius`.\n */\nexport const checkboxCornerClass = cn(\n  \"rounded-[min(--theme(--radius-md),max(4px,var(--radius)-1000*var(--radius-step)))]\"\n);\n\n/**\n * The corner of the phone country trigger and the standalone Calendar. External themes keep\n * the reference's 4px whatever the brand radius, and internal themes round it with\n * `--radius`. The clamp's bounds meet at `--radius` at a 0px step and lie 4000px apart at a\n * 2px step, where the preferred 4px applies.\n */\nexport const fixedCornerClass = cn(\n  \"rounded-[clamp(var(--radius)-1000*var(--radius-step),4px,var(--radius)+1000*var(--radius-step))]\"\n);\n"],"mappings":";;;;;;AAeA,MAAa,mBAAmB,GAAG,sDAAsD;;;;;AAMzF,MAAa,sBAAsB,GAAG,8DAA8D;;;;;;;AAQpG,MAAa,qBAAqB,GAChC,qFACF;;;;;AAMA,MAAa,sBAAsB,GACjC,oFACF;;;;;;;AAQA,MAAa,mBAAmB,GAC9B,kGACF"}

package/styles/date-field.d.ts

@@ -0,0 +1,110 @@
+//#region src/styles/date-field.d.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.
+ */
+export declare const dateFieldVariants: import("tailwind-variants").TVReturnType<{
+  /**
+   * 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: string;
+    };
+    group: {
+      input: string;
+    };
+  };
+  isPlaceholder: {
+    true: {
+      segment: string;
+    };
+  };
+  isDisabled: {
+    true: {
+      segment: string;
+    };
+  };
+  isFocused: {
+    true: {
+      segment: string;
+    };
+  };
+}, {
+  base: string;
+  input: string;
+  segment: string;
+}, undefined, {
+  /**
+   * 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: string;
+    };
+    group: {
+      input: string;
+    };
+  };
+  isPlaceholder: {
+    true: {
+      segment: string;
+    };
+  };
+  isDisabled: {
+    true: {
+      segment: string;
+    };
+  };
+  isFocused: {
+    true: {
+      segment: string;
+    };
+  };
+}, {
+  base: string;
+  input: string;
+  segment: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  /**
+   * 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: string;
+    };
+    group: {
+      input: string;
+    };
+  };
+  isPlaceholder: {
+    true: {
+      segment: string;
+    };
+  };
+  isDisabled: {
+    true: {
+      segment: string;
+    };
+  };
+  isFocused: {
+    true: {
+      segment: string;
+    };
+  };
+}, {
+  base: string;
+  input: string;
+  segment: string;
+}>>;
+//#endregion
+//# sourceMappingURL=date-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.d.ts","names":[],"sources":["../../src/styles/date-field.ts"],"mappings":";;;;;;;;;;;qBAca,+CAAiB;;;;;;IAexB;MAAO;;IACP;MAAS;;;;IAGT;MACE;;;;IAIF;MACE;;;;IAIF;MACE"}