@techfides/ui-library-design 0.1.0

package/dist/recipes/menu.js

@@ -0,0 +1,86 @@
+import { controlInert, controlPress, hitArea } from "../parts/control.js";
+import { overlayMotion } from "./motion.js";
+import { eyebrowQuiet } from "../parts/eyebrow.js";
+import { travelMarkBase } from "../parts/travel.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/menu.ts
+const defaultMenuTone = "neutral";
+const menuTones = ["neutral", "danger"];
+const defaultMenuPlacement = "bottom-start";
+const menuPlacements = [
+	"bottom-start",
+	"bottom-end",
+	"top-start",
+	"top-end",
+	"right-start",
+	"right-end",
+	"left-start",
+	"left-end"
+];
+const ROOM_FOR_A_FINGER = hitArea("after:h-[calc(var(--spacing-tf-row)+var(--spacing))]");
+const GROWS_FROM_ITS_TRIGGER = [
+	"data-[placement^=bottom]:origin-top",
+	"data-[placement^=top]:origin-bottom",
+	"data-[placement^=left]:origin-right",
+	"data-[placement^=right]:origin-left"
+].join(" ");
+const MARK = {
+	chosen: "bg-tf-accent-tint",
+	danger: "bg-tf-danger-wash",
+	neutral: "bg-tf-panel-hi"
+};
+const CHOSEN = "data-[state=checked]:text-tf-accent-hi";
+const menuSurfaceRecipe = cva([
+	"relative flex flex-col",
+	"tf-menu-width rounded-tf-card bg-tf-glass px-2 backdrop-blur-tf-glass",
+	"tf-edge-sweep font-tf-body text-tf-body-sm font-medium shadow-tf-float tf-edge-plain",
+	"z-tf-dropdown outline-hidden",
+	GROWS_FROM_ITS_TRIGGER,
+	...overlayMotion
+]);
+const menuListRecipe = cva([
+	"relative flex tf-scroll-thin min-h-0 flex-col gap-1 py-2 outline-hidden",
+	"max-h-[min(var(--available-height),var(--container-tf-list))] overflow-y-auto",
+	"font-tf-body text-tf-body-sm font-medium"
+]);
+const menuMarkRecipe = cva([...travelMarkBase, "h-tf-row rounded-tf-inline"], {
+	defaultVariants: {
+		tone: defaultMenuTone,
+		within: "list"
+	},
+	variants: {
+		tone: MARK,
+		within: {
+			list: "inset-x-0",
+			surface: "inset-x-2"
+		}
+	}
+});
+const menuGroupRecipe = cva("flex flex-col gap-1");
+const menuItemRecipe = cva([
+	"flex h-tf-row min-h-tf-row flex-none items-center gap-3",
+	"relative rounded-tf-inline px-3 text-left",
+	ROOM_FOR_A_FINGER,
+	CHOSEN,
+	"tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0",
+	"tf-transition motion-reduce:transition-none",
+	"cursor-pointer select-none",
+	...controlPress,
+	...controlInert
+], {
+	defaultVariants: { tone: defaultMenuTone },
+	variants: { tone: {
+		danger: "text-tf-danger-hi",
+		neutral: "text-tf-fg"
+	} }
+});
+const menuLabelRecipe = cva(["flex-none px-3 pt-3 pb-0", `text-tf-caption-sm ${eyebrowQuiet}`]);
+const menuTextRecipe = cva("min-w-0 flex-1 truncate");
+const menuShortcutRecipe = cva("flex-none text-tf-caption-sm text-tf-muted tabular-nums");
+const menuSeparatorRecipe = cva("my-2 flex-none border-0");
+const menuArrowRecipe = cva(["[--arrow-size:0.5rem]", "[--arrow-background:var(--tf-glass-flat)]"]);
+const menuArrowTipRecipe = cva("border-t border-l border-tf-line");
+//#endregion
+export { defaultMenuPlacement, defaultMenuTone, menuArrowRecipe, menuArrowTipRecipe, menuGroupRecipe, menuItemRecipe, menuLabelRecipe, menuListRecipe, menuMarkRecipe, menuPlacements, menuSeparatorRecipe, menuShortcutRecipe, menuSurfaceRecipe, menuTextRecipe, menuTones };
+
+//# sourceMappingURL=menu.js.map

package/dist/recipes/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":[],"sources":["../../src/recipes/menu.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, hitArea } from '#parts/control'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport { travelMarkBase } from '#parts/travel'\n\nimport { overlayMotion } from './motion'\n\ntype MenuTone = 'neutral' | 'danger'\n\nconst defaultMenuTone = 'neutral' satisfies MenuTone\n\nconst menuTones = ['neutral', 'danger'] as const satisfies readonly MenuTone[]\n\ntype MenuPlacement =\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top-start'\n  | 'top-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end'\n\nconst defaultMenuPlacement = 'bottom-start' satisfies MenuPlacement\n\nconst menuPlacements = [\n  'bottom-start',\n  'bottom-end',\n  'top-start',\n  'top-end',\n  'right-start',\n  'right-end',\n  'left-start',\n  'left-end',\n] as const satisfies readonly MenuPlacement[]\n\nconst ROOM_FOR_A_FINGER = hitArea('after:h-[calc(var(--spacing-tf-row)+var(--spacing))]')\n\nconst GROWS_FROM_ITS_TRIGGER = [\n  'data-[placement^=bottom]:origin-top',\n  'data-[placement^=top]:origin-bottom',\n  'data-[placement^=left]:origin-right',\n  'data-[placement^=right]:origin-left',\n].join(' ')\n\ntype MenuMark = MenuTone | 'chosen'\n\nconst MARK = {\n  chosen: 'bg-tf-accent-tint',\n  danger: 'bg-tf-danger-wash',\n  neutral: 'bg-tf-panel-hi',\n} satisfies Record<MenuMark, string>\n\nconst CHOSEN = 'data-[state=checked]:text-tf-accent-hi'\n\nconst menuSurfaceRecipe = cva([\n  'relative flex flex-col',\n  'tf-menu-width rounded-tf-card bg-tf-glass px-2 backdrop-blur-tf-glass',\n  'tf-edge-sweep font-tf-body text-tf-body-sm font-medium shadow-tf-float tf-edge-plain',\n  'z-tf-dropdown outline-hidden',\n  GROWS_FROM_ITS_TRIGGER,\n  ...overlayMotion,\n])\n\nconst menuListRecipe = cva([\n  'relative flex tf-scroll-thin min-h-0 flex-col gap-1 py-2 outline-hidden',\n  'max-h-[min(var(--available-height),var(--container-tf-list))] overflow-y-auto',\n  'font-tf-body text-tf-body-sm font-medium',\n])\n\nconst menuMarkRecipe = cva([...travelMarkBase, 'h-tf-row rounded-tf-inline'], {\n  defaultVariants: { tone: defaultMenuTone, within: 'list' },\n  variants: {\n    tone: MARK,\n    within: { list: 'inset-x-0', surface: 'inset-x-2' },\n  },\n})\n\nconst menuGroupRecipe = cva('flex flex-col gap-1')\n\nconst menuItemRecipe = cva(\n  [\n    'flex h-tf-row min-h-tf-row flex-none items-center gap-3',\n    'relative rounded-tf-inline px-3 text-left',\n    ROOM_FOR_A_FINGER,\n    CHOSEN,\n    'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n    'tf-transition motion-reduce:transition-none',\n    'cursor-pointer select-none',\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { tone: defaultMenuTone },\n    variants: {\n      tone: { danger: 'text-tf-danger-hi', neutral: 'text-tf-fg' } satisfies Record<\n        MenuTone,\n        string\n      >,\n    },\n  },\n)\n\nconst menuLabelRecipe = cva(['flex-none px-3 pt-3 pb-0', `text-tf-caption-sm ${eyebrowQuiet}`])\n\nconst menuTextRecipe = cva('min-w-0 flex-1 truncate')\n\nconst menuShortcutRecipe = cva('flex-none text-tf-caption-sm text-tf-muted tabular-nums')\n\nconst menuSeparatorRecipe = cva('my-2 flex-none border-0')\n\nconst menuArrowRecipe = cva(['[--arrow-size:0.5rem]', '[--arrow-background:var(--tf-glass-flat)]'])\n\nconst menuArrowTipRecipe = cva('border-t border-l border-tf-line')\n\nexport {\n  type MenuPlacement,\n  type MenuTone,\n  defaultMenuPlacement,\n  defaultMenuTone,\n  menuArrowRecipe,\n  menuArrowTipRecipe,\n  menuItemRecipe,\n  menuLabelRecipe,\n  menuGroupRecipe,\n  menuListRecipe,\n  menuMarkRecipe,\n  menuPlacements,\n  menuSeparatorRecipe,\n  menuShortcutRecipe,\n  menuSurfaceRecipe,\n  menuTextRecipe,\n  menuTones,\n}\n"],"mappings":";;;;;;AAUA,MAAM,kBAAkB;AAExB,MAAM,YAAY,CAAC,WAAW,QAAQ;AAYtC,MAAM,uBAAuB;AAE7B,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,oBAAoB,QAAQ,sDAAsD;AAExF,MAAM,yBAAyB;CAC7B;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAIV,MAAM,OAAO;CACX,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AAEA,MAAM,SAAS;AAEf,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,iBAAiB,IAAI;CACzB;CACA;CACA;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,CAAC,GAAG,gBAAgB,4BAA4B,GAAG;CAC5E,iBAAiB;EAAE,MAAM;EAAiB,QAAQ;CAAO;CACzD,UAAU;EACR,MAAM;EACN,QAAQ;GAAE,MAAM;GAAa,SAAS;EAAY;CACpD;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,qBAAqB;AAEjD,MAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,MAAM,gBAAgB;CACzC,UAAU,EACR,MAAM;EAAE,QAAQ;EAAqB,SAAS;CAAa,EAI7D;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,CAAC,4BAA4B,sBAAsB,cAAc,CAAC;AAE9F,MAAM,iBAAiB,IAAI,yBAAyB;AAEpD,MAAM,qBAAqB,IAAI,yDAAyD;AAExF,MAAM,sBAAsB,IAAI,yBAAyB;AAEzD,MAAM,kBAAkB,IAAI,CAAC,yBAAyB,2CAA2C,CAAC;AAElG,MAAM,qBAAqB,IAAI,kCAAkC"}

package/dist/recipes/metaRow.d.ts

@@ -0,0 +1,14 @@
+//#region src/recipes/metaRow.d.ts
+type MetaRowLayout = 'justify' | 'inline';
+type MetaRowEmphasis = 'normal' | 'strong';
+declare const defaultMetaRowLayout = "justify";
+declare const defaultMetaRowEmphasis = "normal";
+declare const metaRowLayouts: readonly ["justify", "inline"];
+declare const metaRowEmphases: readonly ["normal", "strong"];
+declare const metaRowTones: readonly ["accent", "success", "warning", "info", "danger"];
+declare const metaRowRecipe: (props?: ({
+  layout?: "inline" | "justify" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { type MetaRowEmphasis, type MetaRowLayout, defaultMetaRowEmphasis, defaultMetaRowLayout, metaRowEmphases, metaRowLayouts, metaRowRecipe, metaRowTones };
+//# sourceMappingURL=metaRow.d.ts.map

package/dist/recipes/metaRow.js

@@ -0,0 +1,19 @@
+import { tones } from "../parts/tone.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/metaRow.ts
+const defaultMetaRowLayout = "justify";
+const defaultMetaRowEmphasis = "normal";
+const metaRowLayouts = ["justify", "inline"];
+const metaRowEmphases = ["normal", "strong"];
+const metaRowTones = tones;
+const metaRowRecipe = cva("flex items-baseline gap-2 tf-icons", {
+	defaultVariants: { layout: defaultMetaRowLayout },
+	variants: { layout: {
+		inline: "",
+		justify: "justify-between gap-4"
+	} }
+});
+//#endregion
+export { defaultMetaRowEmphasis, defaultMetaRowLayout, metaRowEmphases, metaRowLayouts, metaRowRecipe, metaRowTones };
+
+//# sourceMappingURL=metaRow.js.map

package/dist/recipes/metaRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metaRow.js","names":[],"sources":["../../src/recipes/metaRow.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { tones } from '#parts/tone'\n\ntype MetaRowLayout = 'justify' | 'inline'\n\ntype MetaRowEmphasis = 'normal' | 'strong'\n\nconst defaultMetaRowLayout = 'justify' satisfies MetaRowLayout\n\nconst defaultMetaRowEmphasis = 'normal' satisfies MetaRowEmphasis\n\nconst metaRowLayouts = ['justify', 'inline'] as const satisfies readonly MetaRowLayout[]\n\nconst metaRowEmphases = ['normal', 'strong'] as const satisfies readonly MetaRowEmphasis[]\n\nconst metaRowTones = tones\n\nconst metaRowRecipe = cva('flex items-baseline gap-2 tf-icons', {\n  defaultVariants: { layout: defaultMetaRowLayout },\n  variants: {\n    layout: {\n      inline: '',\n      justify: 'justify-between gap-4',\n    } satisfies Record<MetaRowLayout, string>,\n  },\n})\n\nexport {\n  type MetaRowEmphasis,\n  type MetaRowLayout,\n  defaultMetaRowEmphasis,\n  defaultMetaRowLayout,\n  metaRowEmphases,\n  metaRowLayouts,\n  metaRowRecipe,\n  metaRowTones,\n}\n"],"mappings":";;;AAQA,MAAM,uBAAuB;AAE7B,MAAM,yBAAyB;AAE/B,MAAM,iBAAiB,CAAC,WAAW,QAAQ;AAE3C,MAAM,kBAAkB,CAAC,UAAU,QAAQ;AAE3C,MAAM,eAAe;AAErB,MAAM,gBAAgB,IAAI,sCAAsC;CAC9D,iBAAiB,EAAE,QAAQ,qBAAqB;CAChD,UAAU,EACR,QAAQ;EACN,QAAQ;EACR,SAAS;CACX,EACF;AACF,CAAC"}

package/dist/recipes/meter.d.ts

@@ -0,0 +1,23 @@
+//#region src/recipes/meter.d.ts
+declare const meterVariants: readonly ["share", "split", "slots"];
+type MeterVariant = (typeof meterVariants)[number];
+declare const defaultMeterVariant = "share";
+declare const meterRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const meterHeadRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const meterCaptionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const meterReadingRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const meterTrackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const meterRangeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const meterPartsRecipe: (props?: ({
+  variant?: "share" | "split" | "slots" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type MeterPartEdge = 'end' | 'inner' | 'only' | 'start';
+declare const meterPartRecipe: (props?: ({
+  edge?: "inner" | "end" | "only" | "start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const meterLegendRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const meterLegendItemRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const meterLegendDotRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { type MeterPartEdge, type MeterVariant, defaultMeterVariant, meterCaptionRecipe, meterHeadRecipe, meterLegendDotRecipe, meterLegendItemRecipe, meterLegendRecipe, meterPartRecipe, meterPartsRecipe, meterRangeRecipe, meterReadingRecipe, meterRecipe, meterTrackRecipe, meterVariants };
+//# sourceMappingURL=meter.d.ts.map

package/dist/recipes/meter.js

@@ -0,0 +1,39 @@
+import { valueGlide } from "./motion.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/meter.ts
+const meterVariants = [
+	"share",
+	"split",
+	"slots"
+];
+const defaultMeterVariant = "share";
+const meterRecipe = cva("flex w-full flex-col gap-2 font-tf-body text-tf-fg");
+const meterHeadRecipe = cva("flex items-baseline justify-between gap-3");
+const meterCaptionRecipe = cva("text-tf-caption-sm font-medium tracking-tf-eyebrow text-tf-muted uppercase");
+const meterReadingRecipe = cva("text-tf-body-sm font-medium text-tf-fg tabular-nums");
+const meterTrackRecipe = cva("block h-2.5 overflow-hidden rounded-tf-pill bg-tf-sunken");
+const meterRangeRecipe = cva(["block h-full rounded-tf-pill bg-tf-blend", ...valueGlide]);
+const meterPartsRecipe = cva("flex gap-1", {
+	defaultVariants: { variant: defaultMeterVariant },
+	variants: { variant: {
+		share: "",
+		slots: "h-2.5",
+		split: "h-3"
+	} }
+});
+const meterPartRecipe = cva(["bg-tf-blend", ...valueGlide], {
+	defaultVariants: { edge: "inner" },
+	variants: { edge: {
+		end: "rounded-r-tf-pill",
+		inner: "",
+		only: "rounded-tf-pill",
+		start: "rounded-l-tf-pill"
+	} }
+});
+const meterLegendRecipe = cva("flex flex-wrap gap-x-4 gap-y-2");
+const meterLegendItemRecipe = cva("flex items-center gap-2 text-tf-caption-sm text-tf-muted");
+const meterLegendDotRecipe = cva("size-2 flex-none rounded-tf-pill bg-tf-blend");
+//#endregion
+export { defaultMeterVariant, meterCaptionRecipe, meterHeadRecipe, meterLegendDotRecipe, meterLegendItemRecipe, meterLegendRecipe, meterPartRecipe, meterPartsRecipe, meterRangeRecipe, meterReadingRecipe, meterRecipe, meterTrackRecipe, meterVariants };
+
+//# sourceMappingURL=meter.js.map

package/dist/recipes/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","names":[],"sources":["../../src/recipes/meter.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { valueGlide } from './motion'\n\nconst meterVariants = ['share', 'split', 'slots'] as const\n\ntype MeterVariant = (typeof meterVariants)[number]\n\nconst defaultMeterVariant = 'share' satisfies MeterVariant\n\nconst meterRecipe = cva('flex w-full flex-col gap-2 font-tf-body text-tf-fg')\n\nconst meterHeadRecipe = cva('flex items-baseline justify-between gap-3')\n\nconst meterCaptionRecipe = cva(\n  'text-tf-caption-sm font-medium tracking-tf-eyebrow text-tf-muted uppercase',\n)\n\nconst meterReadingRecipe = cva('text-tf-body-sm font-medium text-tf-fg tabular-nums')\n\nconst meterTrackRecipe = cva('block h-2.5 overflow-hidden rounded-tf-pill bg-tf-sunken')\n\nconst meterRangeRecipe = cva(['block h-full rounded-tf-pill bg-tf-blend', ...valueGlide])\n\nconst meterPartsRecipe = cva('flex gap-1', {\n  defaultVariants: { variant: defaultMeterVariant },\n  variants: {\n    variant: {\n      share: '',\n      slots: 'h-2.5',\n      split: 'h-3',\n    } satisfies Record<MeterVariant, string>,\n  },\n})\n\ntype MeterPartEdge = 'end' | 'inner' | 'only' | 'start'\n\nconst meterPartRecipe = cva(['bg-tf-blend', ...valueGlide], {\n  defaultVariants: { edge: 'inner' },\n  variants: {\n    edge: {\n      end: 'rounded-r-tf-pill',\n      inner: '',\n      only: 'rounded-tf-pill',\n      start: 'rounded-l-tf-pill',\n    } satisfies Record<MeterPartEdge, string>,\n  },\n})\n\nconst meterLegendRecipe = cva('flex flex-wrap gap-x-4 gap-y-2')\n\nconst meterLegendItemRecipe = cva('flex items-center gap-2 text-tf-caption-sm text-tf-muted')\n\nconst meterLegendDotRecipe = cva('size-2 flex-none rounded-tf-pill bg-tf-blend')\n\nexport {\n  type MeterPartEdge,\n  type MeterVariant,\n  defaultMeterVariant,\n  meterCaptionRecipe,\n  meterHeadRecipe,\n  meterLegendDotRecipe,\n  meterLegendItemRecipe,\n  meterLegendRecipe,\n  meterPartRecipe,\n  meterPartsRecipe,\n  meterRangeRecipe,\n  meterReadingRecipe,\n  meterRecipe,\n  meterTrackRecipe,\n  meterVariants,\n}\n"],"mappings":";;;AAIA,MAAM,gBAAgB;CAAC;CAAS;CAAS;AAAO;AAIhD,MAAM,sBAAsB;AAE5B,MAAM,cAAc,IAAI,oDAAoD;AAE5E,MAAM,kBAAkB,IAAI,2CAA2C;AAEvE,MAAM,qBAAqB,IACzB,4EACF;AAEA,MAAM,qBAAqB,IAAI,qDAAqD;AAEpF,MAAM,mBAAmB,IAAI,0DAA0D;AAEvF,MAAM,mBAAmB,IAAI,CAAC,4CAA4C,GAAG,UAAU,CAAC;AAExF,MAAM,mBAAmB,IAAI,cAAc;CACzC,iBAAiB,EAAE,SAAS,oBAAoB;CAChD,UAAU,EACR,SAAS;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACT,EACF;AACF,CAAC;AAID,MAAM,kBAAkB,IAAI,CAAC,eAAe,GAAG,UAAU,GAAG;CAC1D,iBAAiB,EAAE,MAAM,QAAQ;CACjC,UAAU,EACR,MAAM;EACJ,KAAK;EACL,OAAO;EACP,MAAM;EACN,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,gCAAgC;AAE9D,MAAM,wBAAwB,IAAI,0DAA0D;AAE5F,MAAM,uBAAuB,IAAI,8CAA8C"}

package/dist/recipes/motion.d.ts

@@ -0,0 +1,6 @@
+//#region src/recipes/motion.d.ts
+declare const overlayMotion: string[];
+declare const collapseMotion: string[];
+//#endregion
+export { collapseMotion, overlayMotion };
+//# sourceMappingURL=motion.d.ts.map

package/dist/recipes/motion.js

@@ -0,0 +1,34 @@
+//#region src/recipes/motion.ts
+const overlayMotion = ["data-[state=open]:animate-tf-in", "data-[state=closed]:animate-tf-out"];
+const arrivalMotion = [
+	"data-[state=open]:animate-tf-arrive",
+	"data-[state=closed]:animate-tf-depart",
+	"data-[placement^=bottom]:origin-top",
+	"data-[placement^=bottom]:[--tf-arrive:0_calc(var(--spacing)*-1)]",
+	"data-[placement^=top]:origin-bottom",
+	"data-[placement^=top]:[--tf-arrive:0_var(--spacing)]",
+	"data-[placement^=left]:origin-right",
+	"data-[placement^=left]:[--tf-arrive:var(--spacing)_0]",
+	"data-[placement^=right]:origin-left",
+	"data-[placement^=right]:[--tf-arrive:calc(var(--spacing)*-1)_0]"
+];
+const drawerMotion = ["data-[state=open]:animate-tf-drawer", "data-[state=closed]:animate-tf-drawer-rewind"];
+const liftMotion = ["data-[state=open]:animate-tf-lift", "data-[state=closed]:animate-tf-lift-rewind"];
+const mirrorMotion = ["data-[state=open]:animate-tf-in", "data-[state=closed]:animate-tf-rewind"];
+const scrimMirrorMotion = ["data-[state=open]:animate-tf-fade-in", "data-[state=closed]:animate-tf-fade-rewind"];
+const railMorph = "tf-transition tf-rails motion-reduce:transition-none";
+const valueGlide = ["transition-[width,flex-grow,flex-basis] duration-(--tf-duration-2) ease-(--ease-tf-glide)", "motion-reduce:transition-none"];
+const collapseMotion = [
+	"overflow-hidden",
+	"data-[state=open]:animate-tf-expand",
+	"data-[state=closed]:animate-tf-collapse"
+];
+const railCollapse = [
+	"min-w-0 basis-0 grow in-data-rail:opacity-0",
+	"[--tf-travel:opacity_var(--tf-timing-glide)]",
+	railMorph
+].join(" ");
+//#endregion
+export { arrivalMotion, collapseMotion, drawerMotion, liftMotion, mirrorMotion, overlayMotion, railCollapse, railMorph, scrimMirrorMotion, valueGlide };
+
+//# sourceMappingURL=motion.js.map

package/dist/recipes/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","names":[],"sources":["../../src/recipes/motion.ts"],"sourcesContent":["const overlayMotion = ['data-[state=open]:animate-tf-in', 'data-[state=closed]:animate-tf-out']\n\nconst arrivalMotion = [\n  'data-[state=open]:animate-tf-arrive',\n  'data-[state=closed]:animate-tf-depart',\n  'data-[placement^=bottom]:origin-top',\n  'data-[placement^=bottom]:[--tf-arrive:0_calc(var(--spacing)*-1)]',\n  'data-[placement^=top]:origin-bottom',\n  'data-[placement^=top]:[--tf-arrive:0_var(--spacing)]',\n  'data-[placement^=left]:origin-right',\n  'data-[placement^=left]:[--tf-arrive:var(--spacing)_0]',\n  'data-[placement^=right]:origin-left',\n  'data-[placement^=right]:[--tf-arrive:calc(var(--spacing)*-1)_0]',\n]\n\nconst drawerMotion = [\n  'data-[state=open]:animate-tf-drawer',\n  'data-[state=closed]:animate-tf-drawer-rewind',\n]\n\nconst liftMotion = [\n  'data-[state=open]:animate-tf-lift',\n  'data-[state=closed]:animate-tf-lift-rewind',\n]\n\nconst mirrorMotion = ['data-[state=open]:animate-tf-in', 'data-[state=closed]:animate-tf-rewind']\n\nconst scrimMirrorMotion = [\n  'data-[state=open]:animate-tf-fade-in',\n  'data-[state=closed]:animate-tf-fade-rewind',\n]\n\nconst railMorph = 'tf-transition tf-rails motion-reduce:transition-none'\n\nconst valueGlide = [\n  'transition-[width,flex-grow,flex-basis] duration-(--tf-duration-2) ease-(--ease-tf-glide)',\n  'motion-reduce:transition-none',\n]\n\nconst collapseMotion = [\n  'overflow-hidden',\n  'data-[state=open]:animate-tf-expand',\n  'data-[state=closed]:animate-tf-collapse',\n]\n\nconst railCollapse = [\n  'min-w-0 basis-0 grow in-data-rail:opacity-0',\n  '[--tf-travel:opacity_var(--tf-timing-glide)]',\n  railMorph,\n].join(' ')\n\nexport {\n  arrivalMotion,\n  collapseMotion,\n  drawerMotion,\n  liftMotion,\n  mirrorMotion,\n  overlayMotion,\n  railCollapse,\n  railMorph,\n  scrimMirrorMotion,\n  valueGlide,\n}\n"],"mappings":";AAAA,MAAM,gBAAgB,CAAC,mCAAmC,oCAAoC;AAE9F,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,eAAe,CACnB,uCACA,8CACF;AAEA,MAAM,aAAa,CACjB,qCACA,4CACF;AAEA,MAAM,eAAe,CAAC,mCAAmC,uCAAuC;AAEhG,MAAM,oBAAoB,CACxB,wCACA,4CACF;AAEA,MAAM,YAAY;AAElB,MAAM,aAAa,CACjB,6FACA,+BACF;AAEA,MAAM,iBAAiB;CACrB;CACA;CACA;AACF;AAEA,MAAM,eAAe;CACnB;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG"}

package/dist/recipes/nebula.d.ts

@@ -0,0 +1,9 @@
+//#region src/recipes/nebula.d.ts
+declare const nebulaRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const nebulaVeilRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const nebulaCloudRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const nebulaCloudLowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const nebulaCloudWideRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { nebulaCloudLowRecipe, nebulaCloudRecipe, nebulaCloudWideRecipe, nebulaRecipe, nebulaVeilRecipe };
+//# sourceMappingURL=nebula.d.ts.map

package/dist/recipes/nebula.js

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/nebula.ts
+const nebulaRecipe = cva([
+	"pointer-events-none absolute -inset-1/2",
+	"tf-turning tf-nebula blend-tf-accent",
+	"[animation-duration:calc(var(--tf-sweep-duration)*30)]"
+]);
+const nebulaVeilRecipe = cva("tf-nebula-veil");
+const nebulaCloudRecipe = cva("tf-nebula-cloud");
+const nebulaCloudLowRecipe = cva("tf-nebula-cloud tf-cloud-low");
+const nebulaCloudWideRecipe = cva("tf-nebula-cloud tf-cloud-wide");
+//#endregion
+export { nebulaCloudLowRecipe, nebulaCloudRecipe, nebulaCloudWideRecipe, nebulaRecipe, nebulaVeilRecipe };
+
+//# sourceMappingURL=nebula.js.map

package/dist/recipes/nebula.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nebula.js","names":[],"sources":["../../src/recipes/nebula.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst nebulaRecipe = cva([\n  'pointer-events-none absolute -inset-1/2',\n  'tf-turning tf-nebula blend-tf-accent',\n  '[animation-duration:calc(var(--tf-sweep-duration)*30)]',\n])\n\nconst nebulaVeilRecipe = cva('tf-nebula-veil')\n\nconst nebulaCloudRecipe = cva('tf-nebula-cloud')\n\nconst nebulaCloudLowRecipe = cva('tf-nebula-cloud tf-cloud-low')\n\nconst nebulaCloudWideRecipe = cva('tf-nebula-cloud tf-cloud-wide')\n\nexport {\n  nebulaCloudLowRecipe,\n  nebulaCloudRecipe,\n  nebulaCloudWideRecipe,\n  nebulaRecipe,\n  nebulaVeilRecipe,\n}\n"],"mappings":";;AAEA,MAAM,eAAe,IAAI;CACvB;CACA;CACA;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,gBAAgB;AAE7C,MAAM,oBAAoB,IAAI,iBAAiB;AAE/C,MAAM,uBAAuB,IAAI,8BAA8B;AAE/D,MAAM,wBAAwB,IAAI,+BAA+B"}

package/dist/recipes/numberRange.d.ts

@@ -0,0 +1,15 @@
+//#region src/recipes/numberRange.d.ts
+declare const numberRangeHalfRecipe: (props?: ({
+  at?: "from" | "to" | null | undefined;
+  labelled?: boolean | null | undefined;
+  size?: "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const numberRangeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const numberRangeDashRecipe: (props?: ({
+  filled?: boolean | null | undefined;
+  labelled?: boolean | null | undefined;
+  size?: "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { numberRangeDashRecipe, numberRangeHalfRecipe, numberRangeRecipe };
+//# sourceMappingURL=numberRange.d.ts.map

package/dist/recipes/numberRange.js

@@ -0,0 +1,109 @@
+import "../control.js";
+import { labelRoom } from "./input.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/numberRange.ts
+const numberRangeHalfRecipe = cva([
+	"min-w-0 flex-1 bg-transparent text-tf-fg tf-writes tabular-nums",
+	"placeholder:text-tf-muted placeholder:opacity-0",
+	"data-readonly:text-tf-muted",
+	"disabled:cursor-not-allowed",
+	"outline-2 outline-solid outline-offset-2 outline-transparent",
+	"[appearance:textfield]",
+	"[&::-webkit-inner-spin-button]:appearance-none",
+	"[&::-webkit-outer-spin-button]:appearance-none"
+], {
+	compoundVariants: [
+		{
+			at: "from",
+			class: "pl-4",
+			labelled: true,
+			size: "lg"
+		},
+		{
+			at: "from",
+			class: "pl-4",
+			labelled: true,
+			size: "md"
+		},
+		{
+			at: "to",
+			class: "pr-4",
+			labelled: true,
+			size: "lg"
+		},
+		{
+			at: "to",
+			class: "pr-4",
+			labelled: true,
+			size: "md"
+		},
+		{
+			class: labelRoom.lg,
+			labelled: true,
+			size: "lg"
+		},
+		{
+			class: labelRoom.md,
+			labelled: true,
+			size: "md"
+		}
+	],
+	defaultVariants: {
+		at: "from",
+		labelled: true,
+		size: "lg"
+	},
+	variants: {
+		at: {
+			from: "pr-0 text-left",
+			to: "pl-0 text-left"
+		},
+		labelled: {
+			false: "px-4 py-0 placeholder:opacity-100",
+			true: ""
+		},
+		size: {
+			lg: "",
+			md: ""
+		}
+	}
+});
+const numberRangeRecipe = cva("max-w-64");
+const numberRangeDashRecipe = cva([
+	"flex flex-none items-center self-stretch px-2",
+	"font-medium text-tf-muted tabular-nums",
+	"tf-transition motion-reduce:transition-none"
+], {
+	compoundVariants: [{
+		class: `${labelRoom.lg} text-tf-body-sm`,
+		labelled: true,
+		size: "lg"
+	}, {
+		class: `${labelRoom.md} text-tf-body-sm`,
+		labelled: true,
+		size: "md"
+	}],
+	defaultVariants: {
+		filled: false,
+		labelled: true,
+		size: "lg"
+	},
+	variants: {
+		filled: {
+			false: "opacity-0",
+			true: "opacity-100"
+		},
+		labelled: {
+			false: "py-0 text-tf-body-sm",
+			true: ""
+		},
+		size: {
+			lg: "",
+			md: ""
+		}
+	}
+});
+//#endregion
+export { numberRangeDashRecipe, numberRangeHalfRecipe, numberRangeRecipe };
+
+//# sourceMappingURL=numberRange.js.map

package/dist/recipes/numberRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberRange.js","names":[],"sources":["../../src/recipes/numberRange.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\n\nimport { labelRoom } from './input'\n\nconst HALF = [\n  'min-w-0 flex-1 bg-transparent text-tf-fg tf-writes tabular-nums',\n  'placeholder:text-tf-muted placeholder:opacity-0',\n  'data-readonly:text-tf-muted',\n  'disabled:cursor-not-allowed',\n  'outline-2 outline-solid outline-offset-2 outline-transparent',\n  '[appearance:textfield]',\n  '[&::-webkit-inner-spin-button]:appearance-none',\n  '[&::-webkit-outer-spin-button]:appearance-none',\n]\n\nconst numberRangeHalfRecipe = cva(HALF, {\n  compoundVariants: [\n    { at: 'from', class: 'pl-4', labelled: true, size: 'lg' },\n    { at: 'from', class: 'pl-4', labelled: true, size: 'md' },\n    { at: 'to', class: 'pr-4', labelled: true, size: 'lg' },\n    { at: 'to', class: 'pr-4', labelled: true, size: 'md' },\n    { class: labelRoom.lg, labelled: true, size: 'lg' },\n    { class: labelRoom.md, labelled: true, size: 'md' },\n  ],\n  defaultVariants: { at: 'from', labelled: true, size: defaultFieldSize },\n  variants: {\n    at: { from: 'pr-0 text-left', to: 'pl-0 text-left' },\n    labelled: { false: 'px-4 py-0 placeholder:opacity-100', true: '' },\n    size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n  },\n})\n\nconst numberRangeRecipe = cva('max-w-64')\n\nconst numberRangeDashRecipe = cva(\n  [\n    'flex flex-none items-center self-stretch px-2',\n    'font-medium text-tf-muted tabular-nums',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    compoundVariants: [\n      { class: `${labelRoom.lg} text-tf-body-sm`, labelled: true, size: 'lg' },\n      { class: `${labelRoom.md} text-tf-body-sm`, labelled: true, size: 'md' },\n    ],\n    defaultVariants: { filled: false, labelled: true, size: defaultFieldSize },\n    variants: {\n      filled: { false: 'opacity-0', true: 'opacity-100' },\n      labelled: { false: 'py-0 text-tf-body-sm', true: '' },\n      size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n    },\n  },\n)\n\nexport { numberRangeDashRecipe, numberRangeHalfRecipe, numberRangeRecipe }\n"],"mappings":";;;;AAkBA,MAAM,wBAAwB,IAAI;CAVhC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AAGmC,GAAG;CACtC,kBAAkB;EAChB;GAAE,IAAI;GAAQ,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACxD;GAAE,IAAI;GAAQ,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACxD;GAAE,IAAI;GAAM,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACtD;GAAE,IAAI;GAAM,OAAO;GAAQ,UAAU;GAAM,MAAM;EAAK;EACtD;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;EAClD;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;CACpD;CACA,iBAAiB;EAAE,IAAI;EAAQ,UAAU;EAAM,MAAA;CAAuB;CACtE,UAAU;EACR,IAAI;GAAE,MAAM;GAAkB,IAAI;EAAiB;EACnD,UAAU;GAAE,OAAO;GAAqC,MAAM;EAAG;EACjE,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;CACzB;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,UAAU;AAExC,MAAM,wBAAwB,IAC5B;CACE;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB;EAAE,OAAO,GAAG,UAAU,GAAG;EAAmB,UAAU;EAAM,MAAM;CAAK,GACvE;EAAE,OAAO,GAAG,UAAU,GAAG;EAAmB,UAAU;EAAM,MAAM;CAAK,CACzE;CACA,iBAAiB;EAAE,QAAQ;EAAO,UAAU;EAAM,MAAA;CAAuB;CACzE,UAAU;EACR,QAAQ;GAAE,OAAO;GAAa,MAAM;EAAc;EAClD,UAAU;GAAE,OAAO;GAAwB,MAAM;EAAG;EACpD,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;CACzB;AACF,CACF"}

package/dist/recipes/paper.d.ts

@@ -0,0 +1,22 @@
+//#region src/recipes/paper.d.ts
+type PaperVariant = 'plain' | 'elevated';
+type PaperInset = 'padded' | 'flush';
+declare const defaultPaperVariant = "plain";
+declare const defaultPaperInset = "padded";
+declare const paperRecipe: (props?: ({
+  variant?: "plain" | "elevated" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const paperBodyRecipe: (props?: ({
+  inset?: "padded" | "flush" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const paperHeaderRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const paperRuleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const paperBadgeRecipe: (props?: ({
+  headed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const paperActionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const paperVariants: readonly ["plain", "elevated"];
+declare const paperInsets: readonly ["padded", "flush"];
+//#endregion
+export { type PaperInset, type PaperVariant, defaultPaperInset, defaultPaperVariant, paperActionRecipe, paperBadgeRecipe, paperBodyRecipe, paperHeaderRecipe, paperInsets, paperRecipe, paperRuleRecipe, paperVariants };
+//# sourceMappingURL=paper.d.ts.map

package/dist/recipes/paper.js

@@ -0,0 +1,42 @@
+import { ruleFading } from "../parts/rule.js";
+import { surfaceLifted, surfacePanel } from "../parts/surface.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/paper.ts
+const defaultPaperVariant = "plain";
+const defaultPaperInset = "padded";
+const paperBase = [
+	"@container relative w-full",
+	...surfacePanel,
+	"font-tf-body text-tf-body-sm font-medium text-tf-fg"
+];
+const paperRecipe = cva(paperBase, {
+	defaultVariants: { variant: defaultPaperVariant },
+	variants: { variant: {
+		elevated: surfaceLifted.join(" "),
+		plain: ""
+	} }
+});
+const GUTTER = "px-4 @tf-panel:px-8";
+const paperBodyRecipe = cva("py-6 @tf-panel:py-8", {
+	defaultVariants: { inset: defaultPaperInset },
+	variants: { inset: {
+		flush: "",
+		padded: GUTTER
+	} }
+});
+const paperHeaderRecipe = cva([`relative flex flex-wrap items-center justify-between gap-4 py-5 ${GUTTER}`, "min-h-[calc(var(--spacing-tf-control-sm)+var(--spacing)*10)]"]);
+const paperRuleRecipe = cva(`absolute inset-x-4 bottom-0 @tf-panel:inset-x-8 ${ruleFading}`);
+const paperBadgeRecipe = cva("absolute right-4 @tf-panel:right-8", {
+	defaultVariants: { headed: false },
+	variants: { headed: {
+		false: "top-4",
+		true: "top-10 -translate-y-1/2"
+	} }
+});
+const paperActionRecipe = cva("-mr-3 flex min-w-0 flex-initial flex-wrap items-center justify-end gap-4");
+const paperVariants = ["plain", "elevated"];
+const paperInsets = ["padded", "flush"];
+//#endregion
+export { defaultPaperInset, defaultPaperVariant, paperActionRecipe, paperBadgeRecipe, paperBodyRecipe, paperHeaderRecipe, paperInsets, paperRecipe, paperRuleRecipe, paperVariants };
+
+//# sourceMappingURL=paper.js.map

package/dist/recipes/paper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paper.js","names":[],"sources":["../../src/recipes/paper.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { ruleFading } from '#parts/rule'\nimport { surfaceLifted, surfacePanel } from '#parts/surface'\n\ntype PaperVariant = 'plain' | 'elevated'\n\ntype PaperInset = 'padded' | 'flush'\n\nconst defaultPaperVariant = 'plain' satisfies PaperVariant\n\nconst defaultPaperInset = 'padded' satisfies PaperInset\n\nconst paperBase = [\n  '@container relative w-full',\n  ...surfacePanel,\n  'font-tf-body text-tf-body-sm font-medium text-tf-fg',\n]\n\nconst paperRecipe = cva(paperBase, {\n  defaultVariants: { variant: defaultPaperVariant },\n  variants: {\n    variant: {\n      elevated: surfaceLifted.join(' '),\n      plain: '',\n    } satisfies Record<PaperVariant, string>,\n  },\n})\n\nconst GUTTER = 'px-4 @tf-panel:px-8'\n\nconst paperBodyRecipe = cva('py-6 @tf-panel:py-8', {\n  defaultVariants: { inset: defaultPaperInset },\n  variants: {\n    inset: { flush: '', padded: GUTTER } satisfies Record<PaperInset, string>,\n  },\n})\n\nconst HEAD_ROW = 'min-h-[calc(var(--spacing-tf-control-sm)+var(--spacing)*10)]'\n\nconst paperHeaderRecipe = cva([\n  `relative flex flex-wrap items-center justify-between gap-4 py-5 ${GUTTER}`,\n  HEAD_ROW,\n])\n\nconst paperRuleRecipe = cva(`absolute inset-x-4 bottom-0 @tf-panel:inset-x-8 ${ruleFading}`)\n\nconst paperBadgeRecipe = cva('absolute right-4 @tf-panel:right-8', {\n  defaultVariants: { headed: false },\n  variants: {\n    headed: { false: 'top-4', true: 'top-10 -translate-y-1/2' },\n  },\n})\n\nconst paperActionRecipe = cva(\n  '-mr-3 flex min-w-0 flex-initial flex-wrap items-center justify-end gap-4',\n)\n\nconst paperVariants = ['plain', 'elevated'] as const satisfies readonly PaperVariant[]\n\nconst paperInsets = ['padded', 'flush'] as const satisfies readonly PaperInset[]\n\nexport {\n  type PaperInset,\n  type PaperVariant,\n  defaultPaperInset,\n  defaultPaperVariant,\n  paperActionRecipe,\n  paperBadgeRecipe,\n  paperBodyRecipe,\n  paperHeaderRecipe,\n  paperInsets,\n  paperRecipe,\n  paperRuleRecipe,\n  paperVariants,\n}\n"],"mappings":";;;;AASA,MAAM,sBAAsB;AAE5B,MAAM,oBAAoB;AAE1B,MAAM,YAAY;CAChB;CACA,GAAG;CACH;AACF;AAEA,MAAM,cAAc,IAAI,WAAW;CACjC,iBAAiB,EAAE,SAAS,oBAAoB;CAChD,UAAU,EACR,SAAS;EACP,UAAU,cAAc,KAAK,GAAG;EAChC,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,SAAS;AAEf,MAAM,kBAAkB,IAAI,uBAAuB;CACjD,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EAAE,OAAO;EAAI,QAAQ;CAAO,EACrC;AACF,CAAC;AAID,MAAM,oBAAoB,IAAI,CAC5B,mEAAmE,UACnE,8DACF,CAAC;AAED,MAAM,kBAAkB,IAAI,mDAAmD,YAAY;AAE3F,MAAM,mBAAmB,IAAI,sCAAsC;CACjE,iBAAiB,EAAE,QAAQ,MAAM;CACjC,UAAU,EACR,QAAQ;EAAE,OAAO;EAAS,MAAM;CAA0B,EAC5D;AACF,CAAC;AAED,MAAM,oBAAoB,IACxB,0EACF;AAEA,MAAM,gBAAgB,CAAC,SAAS,UAAU;AAE1C,MAAM,cAAc,CAAC,UAAU,OAAO"}

package/dist/recipes/progressBar.d.ts

@@ -0,0 +1,7 @@
+//#region src/recipes/progressBar.d.ts
+declare const progressBarTones: readonly ["accent", "success", "warning", "info", "danger"];
+declare const progressBarTrackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const progressBarRangeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { progressBarRangeRecipe, progressBarTones, progressBarTrackRecipe };
+//# sourceMappingURL=progressBar.d.ts.map

package/dist/recipes/progressBar.js

@@ -0,0 +1,11 @@
+import { valueGlide } from "./motion.js";
+import { tones } from "../parts/tone.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/progressBar.ts
+const progressBarTones = tones;
+const progressBarTrackRecipe = cva("block h-2.5 overflow-hidden rounded-tf-pill bg-tf-sunken");
+const progressBarRangeRecipe = cva(["block h-full rounded-tf-pill bg-tf-blend", ...valueGlide]);
+//#endregion
+export { progressBarRangeRecipe, progressBarTones, progressBarTrackRecipe };
+
+//# sourceMappingURL=progressBar.js.map

package/dist/recipes/progressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressBar.js","names":[],"sources":["../../src/recipes/progressBar.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { tones } from '#parts/tone'\n\nimport { valueGlide } from './motion'\n\nconst progressBarTones = tones\n\nconst progressBarTrackRecipe = cva('block h-2.5 overflow-hidden rounded-tf-pill bg-tf-sunken')\n\nconst progressBarRangeRecipe = cva(['block h-full rounded-tf-pill bg-tf-blend', ...valueGlide])\n\nexport { progressBarRangeRecipe, progressBarTones, progressBarTrackRecipe }\n"],"mappings":";;;;AAMA,MAAM,mBAAmB;AAEzB,MAAM,yBAAyB,IAAI,0DAA0D;AAE7F,MAAM,yBAAyB,IAAI,CAAC,4CAA4C,GAAG,UAAU,CAAC"}

package/dist/recipes/queue.d.ts

@@ -0,0 +1,16 @@
+//#region src/recipes/queue.d.ts
+declare const queueRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const queueRowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const queueTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const queueLeadRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const queueHintRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const queueAgeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const queueAgeLabelRecipe: (props?: ({
+  toned?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const queueAgeTrackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const queueAgeFillRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const queueDotRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { queueAgeFillRecipe, queueAgeLabelRecipe, queueAgeRecipe, queueAgeTrackRecipe, queueDotRecipe, queueHintRecipe, queueLeadRecipe, queueRecipe, queueRowRecipe, queueTextRecipe };
+//# sourceMappingURL=queue.d.ts.map

package/dist/recipes/queue.js

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/queue.ts
+const queueRecipe = cva("@container flex w-full flex-col gap-1 rounded-tf-block bg-tf-sunken p-3");
+const queueRowRecipe = cva([
+	"flex items-center gap-3 rounded-tf-control px-4 py-3",
+	"tf-transition",
+	"data-highlighted:bg-tf-control",
+	"data-selected:tf-tinted data-selected:blend-tf-accent"
+]);
+const queueTextRecipe = cva("flex min-w-0 flex-1 flex-col gap-0");
+const queueLeadRecipe = cva("truncate text-tf-body-sm font-medium text-tf-fg");
+const queueHintRecipe = cva("truncate text-tf-caption-sm text-tf-muted");
+const queueAgeRecipe = cva("flex w-16 flex-none flex-col items-end gap-1 @tf-panel:w-22");
+const queueAgeLabelRecipe = cva("text-tf-caption-sm font-normal tabular-nums", {
+	defaultVariants: { toned: false },
+	variants: { toned: {
+		false: "text-tf-fg",
+		true: ""
+	} }
+});
+const queueAgeTrackRecipe = cva("block h-1 w-full overflow-hidden rounded-tf-pill bg-tf-sunken-hi");
+const queueAgeFillRecipe = cva("block h-full bg-tf-blend");
+const queueDotRecipe = cva("size-2 flex-none rounded-tf-pill bg-tf-blend");
+//#endregion
+export { queueAgeFillRecipe, queueAgeLabelRecipe, queueAgeRecipe, queueAgeTrackRecipe, queueDotRecipe, queueHintRecipe, queueLeadRecipe, queueRecipe, queueRowRecipe, queueTextRecipe };
+
+//# sourceMappingURL=queue.js.map

package/dist/recipes/queue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"queue.js","names":[],"sources":["../../src/recipes/queue.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst queueRecipe = cva('@container flex w-full flex-col gap-1 rounded-tf-block bg-tf-sunken p-3')\n\nconst queueRowRecipe = cva([\n  'flex items-center gap-3 rounded-tf-control px-4 py-3',\n  'tf-transition',\n  'data-highlighted:bg-tf-control',\n  'data-selected:tf-tinted data-selected:blend-tf-accent',\n])\n\nconst queueTextRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst queueLeadRecipe = cva('truncate text-tf-body-sm font-medium text-tf-fg')\n\nconst queueHintRecipe = cva('truncate text-tf-caption-sm text-tf-muted')\n\nconst queueAgeRecipe = cva('flex w-16 flex-none flex-col items-end gap-1 @tf-panel:w-22')\n\nconst queueAgeLabelRecipe = cva('text-tf-caption-sm font-normal tabular-nums', {\n  defaultVariants: { toned: false },\n  variants: {\n    toned: {\n      false: 'text-tf-fg',\n      true: '',\n    },\n  },\n})\n\nconst queueAgeTrackRecipe = cva('block h-1 w-full overflow-hidden rounded-tf-pill bg-tf-sunken-hi')\n\nconst queueAgeFillRecipe = cva('block h-full bg-tf-blend')\n\nconst queueDotRecipe = cva('size-2 flex-none rounded-tf-pill bg-tf-blend')\n\nexport {\n  queueAgeFillRecipe,\n  queueAgeLabelRecipe,\n  queueAgeRecipe,\n  queueAgeTrackRecipe,\n  queueDotRecipe,\n  queueHintRecipe,\n  queueLeadRecipe,\n  queueRecipe,\n  queueRowRecipe,\n  queueTextRecipe,\n}\n"],"mappings":";;AAEA,MAAM,cAAc,IAAI,yEAAyE;AAEjG,MAAM,iBAAiB,IAAI;CACzB;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,oCAAoC;AAEhE,MAAM,kBAAkB,IAAI,iDAAiD;AAE7E,MAAM,kBAAkB,IAAI,2CAA2C;AAEvE,MAAM,iBAAiB,IAAI,6DAA6D;AAExF,MAAM,sBAAsB,IAAI,+CAA+C;CAC7E,iBAAiB,EAAE,OAAO,MAAM;CAChC,UAAU,EACR,OAAO;EACL,OAAO;EACP,MAAM;CACR,EACF;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,kEAAkE;AAElG,MAAM,qBAAqB,IAAI,0BAA0B;AAEzD,MAAM,iBAAiB,IAAI,8CAA8C"}

package/dist/recipes/radioGroup.d.ts

@@ -0,0 +1,27 @@
+import { Tone } from "../tone.js";
+//#region src/recipes/radioGroup.d.ts
+declare const radioAccents: readonly ["accent", "success", "warning", "info", "danger"];
+type RadioAccent = Tone;
+declare const defaultRadioAccent = "accent";
+declare const radioGroupRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const radioGroupLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const radioRecipe: (props?: ({
+  plate?: "full" | "snug" | "bare" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const radioIndicatorRecipe: (props?: ({
+  accent?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+  invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const radioLeadRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const radioControlRecipe: (props?: ({
+  accent?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const radioDotRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const radioLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const radioTitleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const radioHintRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const radioAsideRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const radioErrorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { type RadioAccent, defaultRadioAccent, radioAccents, radioAsideRecipe, radioControlRecipe, radioDotRecipe, radioErrorRecipe, radioGroupLabelRecipe, radioGroupRecipe, radioHintRecipe, radioIndicatorRecipe, radioLabelRecipe, radioLeadRecipe, radioRecipe, radioTitleRecipe };
+//# sourceMappingURL=radioGroup.d.ts.map