@techfides/ui-library-design 0.1.0

package/dist/parts/reveal.js

@@ -0,0 +1,35 @@
+//#region src/parts/reveal.ts
+const HIDDEN = "w-0 scale-90 opacity-0";
+const SHOWN = "scale-100 opacity-100";
+const revealedIcon = [
+	"inline-flex flex-none items-center overflow-hidden tf-reveals",
+	HIDDEN,
+	"in-[[data-part=head]:hover,[data-part=head][data-hover]]:w-tf-icon-2xs",
+	"in-[[data-part=head]:hover,[data-part=head][data-hover]]:scale-100",
+	"in-[[data-part=head]:hover,[data-part=head][data-hover]]:opacity-100",
+	"in-[[data-part=head]:focus-within]:w-tf-icon-2xs",
+	"in-[[data-part=head]:focus-within]:scale-100",
+	"in-[[data-part=head]:focus-within]:opacity-100",
+	"in-[[data-part=head]:has([data-state=open])]:w-tf-icon-2xs",
+	"in-[[data-part=head]:has([data-state=open])]:scale-100",
+	"in-[[data-part=head]:has([data-state=open])]:opacity-100"
+].join(" ");
+const revealedControl = [
+	"inline-flex flex-none items-center overflow-hidden tf-reveals",
+	HIDDEN,
+	"in-[[data-part=head]:hover,[data-part=head][data-hover]]:w-tf-control-2xs",
+	"in-[[data-part=head]:hover,[data-part=head][data-hover]]:scale-100",
+	"in-[[data-part=head]:hover,[data-part=head][data-hover]]:opacity-100",
+	"in-[[data-part=head]:focus-within]:w-tf-control-2xs",
+	"in-[[data-part=head]:focus-within]:scale-100",
+	"in-[[data-part=head]:focus-within]:opacity-100",
+	"in-[[data-part=head]:has([data-state=open])]:w-tf-control-2xs",
+	"in-[[data-part=head]:has([data-state=open])]:scale-100",
+	"in-[[data-part=head]:has([data-state=open])]:opacity-100"
+].join(" ");
+const shownIcon = `inline-flex flex-none items-center tf-reveals w-tf-icon-2xs ${SHOWN}`;
+const shownControl = `inline-flex flex-none items-center tf-reveals w-tf-control-2xs ${SHOWN}`;
+//#endregion
+export { revealedControl, revealedIcon, shownControl, shownIcon };
+
+//# sourceMappingURL=reveal.js.map

package/dist/parts/reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reveal.js","names":[],"sources":["../../src/parts/reveal.ts"],"sourcesContent":["const HIDDEN = 'w-0 scale-90 opacity-0'\n\nconst SHOWN = 'scale-100 opacity-100'\n\nconst revealedIcon = [\n  'inline-flex flex-none items-center overflow-hidden tf-reveals',\n  HIDDEN,\n  'in-[[data-part=head]:hover,[data-part=head][data-hover]]:w-tf-icon-2xs',\n  'in-[[data-part=head]:hover,[data-part=head][data-hover]]:scale-100',\n  'in-[[data-part=head]:hover,[data-part=head][data-hover]]:opacity-100',\n  'in-[[data-part=head]:focus-within]:w-tf-icon-2xs',\n  'in-[[data-part=head]:focus-within]:scale-100',\n  'in-[[data-part=head]:focus-within]:opacity-100',\n  'in-[[data-part=head]:has([data-state=open])]:w-tf-icon-2xs',\n  'in-[[data-part=head]:has([data-state=open])]:scale-100',\n  'in-[[data-part=head]:has([data-state=open])]:opacity-100',\n].join(' ')\n\nconst revealedControl = [\n  'inline-flex flex-none items-center overflow-hidden tf-reveals',\n  HIDDEN,\n  'in-[[data-part=head]:hover,[data-part=head][data-hover]]:w-tf-control-2xs',\n  'in-[[data-part=head]:hover,[data-part=head][data-hover]]:scale-100',\n  'in-[[data-part=head]:hover,[data-part=head][data-hover]]:opacity-100',\n  'in-[[data-part=head]:focus-within]:w-tf-control-2xs',\n  'in-[[data-part=head]:focus-within]:scale-100',\n  'in-[[data-part=head]:focus-within]:opacity-100',\n  'in-[[data-part=head]:has([data-state=open])]:w-tf-control-2xs',\n  'in-[[data-part=head]:has([data-state=open])]:scale-100',\n  'in-[[data-part=head]:has([data-state=open])]:opacity-100',\n].join(' ')\n\nconst shownIcon = `inline-flex flex-none items-center tf-reveals w-tf-icon-2xs ${SHOWN}`\n\nconst shownControl = `inline-flex flex-none items-center tf-reveals w-tf-control-2xs ${SHOWN}`\n\nexport { revealedControl, revealedIcon, shownControl, shownIcon }\n"],"mappings":";AAAA,MAAM,SAAS;AAEf,MAAM,QAAQ;AAEd,MAAM,eAAe;CACnB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,YAAY,+DAA+D;AAEjF,MAAM,eAAe,kEAAkE"}

package/dist/parts/rouse.js

@@ -0,0 +1,25 @@
+//#region src/parts/rouse.ts
+const tileRoused = [
+	"hovered:**:data-[part=tile]:tf-blended",
+	"hovered:**:data-[part=tile]:tf-milked",
+	"hovered:**:data-[part=tile]:tf-clouding",
+	"hovered:**:data-[part=tile]:tf-glow",
+	"hovered:**:data-[part=tile]:tf-lifted",
+	"hovered:**:data-[part=tile]:tf-lit-inside",
+	"hovered:**:data-[part=tile]:tf-edge-lit",
+	"motion-safe:hovered:**:data-[part=glyph]:scale-105"
+].join(" ");
+const tileReached = [
+	"reached:**:data-[part=tile]:tf-blended",
+	"reached:**:data-[part=tile]:tf-milked",
+	"reached:**:data-[part=tile]:tf-clouding",
+	"reached:**:data-[part=tile]:tf-glow",
+	"reached:**:data-[part=tile]:tf-lifted",
+	"reached:**:data-[part=tile]:tf-lit-inside",
+	"reached:**:data-[part=tile]:tf-edge-lit",
+	"motion-safe:reached:**:data-[part=glyph]:scale-105"
+].join(" ");
+//#endregion
+export { tileReached, tileRoused };
+
+//# sourceMappingURL=rouse.js.map

package/dist/parts/rouse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rouse.js","names":[],"sources":["../../src/parts/rouse.ts"],"sourcesContent":["const tileRoused = [\n  'hovered:**:data-[part=tile]:tf-blended',\n  'hovered:**:data-[part=tile]:tf-milked',\n  'hovered:**:data-[part=tile]:tf-clouding',\n  'hovered:**:data-[part=tile]:tf-glow',\n  'hovered:**:data-[part=tile]:tf-lifted',\n  'hovered:**:data-[part=tile]:tf-lit-inside',\n  'hovered:**:data-[part=tile]:tf-edge-lit',\n  'motion-safe:hovered:**:data-[part=glyph]:scale-105',\n].join(' ')\n\nconst tileReached = [\n  'reached:**:data-[part=tile]:tf-blended',\n  'reached:**:data-[part=tile]:tf-milked',\n  'reached:**:data-[part=tile]:tf-clouding',\n  'reached:**:data-[part=tile]:tf-glow',\n  'reached:**:data-[part=tile]:tf-lifted',\n  'reached:**:data-[part=tile]:tf-lit-inside',\n  'reached:**:data-[part=tile]:tf-edge-lit',\n  'motion-safe:reached:**:data-[part=glyph]:scale-105',\n].join(' ')\n\nexport { tileReached, tileRoused }\n"],"mappings":";AAAA,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,cAAc;CAClB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG"}

package/dist/parts/rule.js

@@ -0,0 +1,12 @@
+//#region src/parts/rule.ts
+const HAIRLINE_ACROSS = "h-tf-hairline blend-tf-accent";
+const HAIRLINE_DOWN = "w-tf-hairline min-h-tf-row blend-tf-accent";
+const ruleFading = `${HAIRLINE_ACROSS} tf-rule`;
+const ruleQuiet = "h-tf-hairline tf-rule-quiet";
+const ruleFilled = `${HAIRLINE_ACROSS} tf-rule-filled`;
+const ruleFadingDown = `${HAIRLINE_DOWN} tf-rule-fall`;
+const ruleFilledDown = `${HAIRLINE_DOWN} tf-rule-filled-fall`;
+//#endregion
+export { ruleFading, ruleFadingDown, ruleFilled, ruleFilledDown, ruleQuiet };
+
+//# sourceMappingURL=rule.js.map

package/dist/parts/rule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rule.js","names":[],"sources":["../../src/parts/rule.ts"],"sourcesContent":["const HAIRLINE_ACROSS = 'h-tf-hairline blend-tf-accent'\n\nconst HAIRLINE_DOWN = 'w-tf-hairline min-h-tf-row blend-tf-accent'\n\nconst ruleFading = `${HAIRLINE_ACROSS} tf-rule`\n\nconst ruleQuiet = 'h-tf-hairline tf-rule-quiet'\n\nconst ruleFilled = `${HAIRLINE_ACROSS} tf-rule-filled`\n\nconst ruleFadingDown = `${HAIRLINE_DOWN} tf-rule-fall`\n\nconst ruleFilledDown = `${HAIRLINE_DOWN} tf-rule-filled-fall`\n\nexport { ruleFading, ruleFadingDown, ruleFilled, ruleFilledDown, ruleQuiet }\n"],"mappings":";AAAA,MAAM,kBAAkB;AAExB,MAAM,gBAAgB;AAEtB,MAAM,aAAa,GAAG,gBAAgB;AAEtC,MAAM,YAAY;AAElB,MAAM,aAAa,GAAG,gBAAgB;AAEtC,MAAM,iBAAiB,GAAG,cAAc;AAExC,MAAM,iBAAiB,GAAG,cAAc"}

package/dist/parts/scroll.js

@@ -0,0 +1,10 @@
+//#region src/parts/scroll.ts
+const scrollFades = [
+	"tf-scroll-faded tf-fades motion-reduce:transition-none",
+	"data-overflow-y:not-data-at-top:[--tf-fade-head:calc(var(--spacing)*6)]",
+	"data-overflow-y:not-data-at-bottom:[--tf-fade-foot:calc(var(--spacing)*6)]"
+];
+//#endregion
+export { scrollFades };
+
+//# sourceMappingURL=scroll.js.map

package/dist/parts/scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.js","names":[],"sources":["../../src/parts/scroll.ts"],"sourcesContent":["const scrollFades = [\n  'tf-scroll-faded tf-fades motion-reduce:transition-none',\n  'data-overflow-y:not-data-at-top:[--tf-fade-head:calc(var(--spacing)*6)]',\n  'data-overflow-y:not-data-at-bottom:[--tf-fade-foot:calc(var(--spacing)*6)]',\n]\n\nexport { scrollFades }\n"],"mappings":";AAAA,MAAM,cAAc;CAClB;CACA;CACA;AACF"}

package/dist/parts/shell.js

@@ -0,0 +1,23 @@
+//#region src/parts/shell.ts
+const controlLabelLevel = "asleep:**:data-[part=label]:scale-100";
+const controlHealthy = [
+	"blend-tf-accent",
+	"asleep:**:data-[part=label]:tf-label-quiet",
+	"reached:**:data-[part=label]:tf-label-inked",
+	"not-data-readonly:reached:bg-tf-sunken-hi",
+	"data-readonly:reached:bg-tf-sunken"
+].join(" ");
+const controlFailed = ["tf-edge-lit tf-clouding tf-label-failed blend-tf-danger", "**:data-[part=label]:tf-label-lit"].join(" ");
+const controlShell = (wakes, labelRest) => [
+	"not-data-readonly:bg-tf-sunken data-readonly:bg-tf-sunken-quiet",
+	"tf-edge-sweep tf-swept tf-fill-scale tf-cloud-quiet tf-cloud-hidden",
+	"not-data-readonly:interactive:hovered:bg-tf-sunken-hi",
+	"reached:tf-edge-lit",
+	...wakes,
+	labelRest,
+	controlLabelLevel
+];
+//#endregion
+export { controlFailed, controlHealthy, controlShell };
+
+//# sourceMappingURL=shell.js.map

package/dist/parts/shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell.js","names":[],"sources":["../../src/parts/shell.ts"],"sourcesContent":["const controlLabelLevel = 'asleep:**:data-[part=label]:scale-100'\n\nconst controlHealthy = [\n  'blend-tf-accent',\n  'asleep:**:data-[part=label]:tf-label-quiet',\n  'reached:**:data-[part=label]:tf-label-inked',\n  'not-data-readonly:reached:bg-tf-sunken-hi',\n  'data-readonly:reached:bg-tf-sunken',\n].join(' ')\n\nconst controlFailed = [\n  'tf-edge-lit tf-clouding tf-label-failed blend-tf-danger',\n  '**:data-[part=label]:tf-label-lit',\n].join(' ')\n\nconst controlShell = (wakes: readonly string[], labelRest: string): string[] => [\n  'not-data-readonly:bg-tf-sunken data-readonly:bg-tf-sunken-quiet',\n  'tf-edge-sweep tf-swept tf-fill-scale tf-cloud-quiet tf-cloud-hidden',\n  'not-data-readonly:interactive:hovered:bg-tf-sunken-hi',\n  'reached:tf-edge-lit',\n  ...wakes,\n  labelRest,\n  controlLabelLevel,\n]\n\nexport { controlFailed, controlHealthy, controlShell }\n"],"mappings":";AAAA,MAAM,oBAAoB;AAE1B,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,gBAAgB,CACpB,2DACA,mCACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,gBAAgB,OAA0B,cAAgC;CAC9E;CACA;CACA;CACA;CACA,GAAG;CACH;CACA;AACF"}

package/dist/parts/surface.js

@@ -0,0 +1,15 @@
+//#region src/parts/surface.ts
+const surfaceShape = ["relative isolate", "rounded-tf-card"];
+const surfaceFill = ["bg-tf-panel backdrop-blur-tf-panel"];
+const surfaceEdge = ["tf-edge-sweep tf-swept"];
+const surfacePanel = [
+	...surfaceShape,
+	...surfaceFill,
+	...surfaceEdge,
+	"blend-tf-accent"
+];
+const surfaceLifted = ["shadow-tf-float", "tf-cloud-brand tf-clouded-lifted tf-fill-scale"];
+//#endregion
+export { surfaceLifted, surfacePanel };
+
+//# sourceMappingURL=surface.js.map

package/dist/parts/surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.js","names":[],"sources":["../../src/parts/surface.ts"],"sourcesContent":["const surfaceShape = ['relative isolate', 'rounded-tf-card']\n\nconst surfaceFill = ['bg-tf-panel backdrop-blur-tf-panel']\n\nconst surfaceEdge = ['tf-edge-sweep tf-swept']\n\nconst surfacePanel = [...surfaceShape, ...surfaceFill, ...surfaceEdge, 'blend-tf-accent']\n\nconst surfaceLifted = ['shadow-tf-float', 'tf-cloud-brand tf-clouded-lifted tf-fill-scale']\n\nexport { surfaceLifted, surfacePanel }\n"],"mappings":";AAAA,MAAM,eAAe,CAAC,oBAAoB,iBAAiB;AAE3D,MAAM,cAAc,CAAC,oCAAoC;AAEzD,MAAM,cAAc,CAAC,wBAAwB;AAE7C,MAAM,eAAe;CAAC,GAAG;CAAc,GAAG;CAAa,GAAG;CAAa;AAAiB;AAExF,MAAM,gBAAgB,CAAC,mBAAmB,gDAAgD"}

package/dist/parts/tone.js

@@ -0,0 +1,13 @@
+//#region src/parts/tone.ts
+const tones = [
+	"accent",
+	"success",
+	"warning",
+	"info",
+	"danger"
+];
+const defaultTone = "accent";
+//#endregion
+export { defaultTone, tones };
+
+//# sourceMappingURL=tone.js.map

package/dist/parts/tone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tone.js","names":[],"sources":["../../src/parts/tone.ts"],"sourcesContent":["import type { Tone } from '#tone'\n\nconst tones = ['accent', 'success', 'warning', 'info', 'danger'] as const satisfies readonly Tone[]\n\nconst defaultTone = 'accent' satisfies Tone\n\nexport { defaultTone, tones }\n"],"mappings":";AAEA,MAAM,QAAQ;CAAC;CAAU;CAAW;CAAW;CAAQ;AAAQ;AAE/D,MAAM,cAAc"}

package/dist/parts/travel.js

@@ -0,0 +1,11 @@
+//#region src/parts/travel.ts
+const travelMarkBase = [
+	"pointer-events-none absolute top-0",
+	"opacity-0 data-lit:opacity-100",
+	"tf-slides-settle tf-transition motion-reduce:transition-none",
+	"data-placing:[--tf-slide-timing:0s]"
+];
+//#endregion
+export { travelMarkBase };
+
+//# sourceMappingURL=travel.js.map

package/dist/parts/travel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"travel.js","names":[],"sources":["../../src/parts/travel.ts"],"sourcesContent":["const travelMarkBase = [\n  'pointer-events-none absolute top-0',\n  'opacity-0 data-lit:opacity-100',\n  'tf-slides-settle tf-transition motion-reduce:transition-none',\n  'data-placing:[--tf-slide-timing:0s]',\n]\n\nexport { travelMarkBase }\n"],"mappings":";AAAA,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;AACF"}

package/dist/recipes/accordion.d.ts

@@ -0,0 +1,13 @@
+//#region src/recipes/accordion.d.ts
+declare const accordionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionItemRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionTriggerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionMetaRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionIndicatorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionContentRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionBodyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionRuleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { accordionBodyRecipe, accordionContentRecipe, accordionIndicatorRecipe, accordionItemRecipe, accordionLabelRecipe, accordionMetaRecipe, accordionRecipe, accordionRuleRecipe, accordionTriggerRecipe };
+//# sourceMappingURL=accordion.d.ts.map

package/dist/recipes/accordion.js

@@ -0,0 +1,42 @@
+import { controlInert, controlReach } from "../parts/control.js";
+import { ruleFading } from "../parts/rule.js";
+import { collapseMotion } from "./motion.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/accordion.ts
+const accordionRecipe = cva("flex w-full flex-col gap-3 font-tf-body");
+const accordionItemRecipe = cva([
+	"relative isolate flex flex-col rounded-tf-block bg-tf-panel",
+	"tf-edge-sweep tf-swept blend-tf-accent tf-edge-plain",
+	"data-[state=open]:bg-tf-panel-hi data-[state=open]:tf-ring-rest",
+	"tf-transition motion-reduce:transition-none",
+	"data-disabled:opacity-50"
+]);
+const accordionTriggerRecipe = cva([
+	"flex min-h-tf-control-lg w-full flex-none items-center gap-4",
+	"rounded-tf-block px-4 text-left",
+	"text-tf-body text-tf-fg",
+	"not-data-[state=open]:interactive:hovered:bg-tf-panel-hi",
+	"cursor-pointer tf-transition motion-reduce:transition-none",
+	"tf-icons",
+	...controlReach,
+	...controlInert
+]);
+const accordionLabelRecipe = cva("min-w-0 flex-1 py-3 text-pretty");
+const accordionMetaRecipe = cva("flex-none font-mono text-tf-caption-sm text-tf-muted");
+const accordionIndicatorRecipe = cva([
+	"flex size-tf-icon-sm flex-none items-center justify-center",
+	"text-tf-muted [&_svg]:size-tf-icon-sm [&_svg]:shrink-0",
+	"data-[state=open]:rotate-180 data-[state=open]:text-tf-accent-hi",
+	"tf-transition motion-reduce:transition-none"
+]);
+const accordionContentRecipe = cva([...collapseMotion, "motion-reduce:animate-none"]);
+const accordionBodyRecipe = cva([
+	"flex flex-col gap-4 px-4 pt-3 pb-4",
+	"text-tf-body-sm font-medium text-tf-muted",
+	"in-data-[state=open]:motion-safe:animate-tf-rise"
+]);
+const accordionRuleRecipe = cva([`flex-none ${ruleFading}`, "origin-left in-data-[state=open]:motion-safe:animate-tf-draw"]);
+//#endregion
+export { accordionBodyRecipe, accordionContentRecipe, accordionIndicatorRecipe, accordionItemRecipe, accordionLabelRecipe, accordionMetaRecipe, accordionRecipe, accordionRuleRecipe, accordionTriggerRecipe };
+
+//# sourceMappingURL=accordion.js.map

package/dist/recipes/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","names":[],"sources":["../../src/recipes/accordion.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlReach } from '#parts/control'\nimport { ruleFading } from '#parts/rule'\n\nimport { collapseMotion } from './motion'\n\nconst accordionRecipe = cva('flex w-full flex-col gap-3 font-tf-body')\n\nconst accordionItemRecipe = cva([\n  'relative isolate flex flex-col rounded-tf-block bg-tf-panel',\n  'tf-edge-sweep tf-swept blend-tf-accent tf-edge-plain',\n  'data-[state=open]:bg-tf-panel-hi data-[state=open]:tf-ring-rest',\n  'tf-transition motion-reduce:transition-none',\n  'data-disabled:opacity-50',\n])\n\nconst accordionTriggerRecipe = cva([\n  'flex min-h-tf-control-lg w-full flex-none items-center gap-4',\n  'rounded-tf-block px-4 text-left',\n  'text-tf-body text-tf-fg',\n  'not-data-[state=open]:interactive:hovered:bg-tf-panel-hi',\n  'cursor-pointer tf-transition motion-reduce:transition-none',\n  'tf-icons',\n  ...controlReach,\n  ...controlInert,\n])\n\nconst accordionLabelRecipe = cva('min-w-0 flex-1 py-3 text-pretty')\n\nconst accordionMetaRecipe = cva('flex-none font-mono text-tf-caption-sm text-tf-muted')\n\nconst accordionIndicatorRecipe = cva([\n  'flex size-tf-icon-sm flex-none items-center justify-center',\n  'text-tf-muted [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  'data-[state=open]:rotate-180 data-[state=open]:text-tf-accent-hi',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst accordionContentRecipe = cva([...collapseMotion, 'motion-reduce:animate-none'])\n\nconst accordionBodyRecipe = cva([\n  'flex flex-col gap-4 px-4 pt-3 pb-4',\n  'text-tf-body-sm font-medium text-tf-muted',\n  'in-data-[state=open]:motion-safe:animate-tf-rise',\n])\n\nconst accordionRuleRecipe = cva([\n  `flex-none ${ruleFading}`,\n  'origin-left in-data-[state=open]:motion-safe:animate-tf-draw',\n])\n\nexport {\n  accordionBodyRecipe,\n  accordionContentRecipe,\n  accordionIndicatorRecipe,\n  accordionItemRecipe,\n  accordionLabelRecipe,\n  accordionMetaRecipe,\n  accordionRecipe,\n  accordionRuleRecipe,\n  accordionTriggerRecipe,\n}\n"],"mappings":";;;;;AAOA,MAAM,kBAAkB,IAAI,yCAAyC;AAErE,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,yBAAyB,IAAI;CACjC;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,uBAAuB,IAAI,iCAAiC;AAElE,MAAM,sBAAsB,IAAI,sDAAsD;AAEtF,MAAM,2BAA2B,IAAI;CACnC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,yBAAyB,IAAI,CAAC,GAAG,gBAAgB,4BAA4B,CAAC;AAEpF,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,CAC9B,aAAa,cACb,8DACF,CAAC"}

package/dist/recipes/alert.d.ts

@@ -0,0 +1,16 @@
+//#region src/recipes/alert.d.ts
+declare const alertVariants: readonly ["banner", "inline"];
+type AlertVariant = (typeof alertVariants)[number];
+declare const defaultAlertVariant = "banner";
+declare const alertBannerRecipe: (props?: ({
+  titled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const alertBannerTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const alertDetailRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const alertActionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const alertInlineRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const alertInlineMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const alertInlineTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { type AlertVariant, alertActionRecipe, alertBannerRecipe, alertBannerTextRecipe, alertDetailRecipe, alertInlineMarkRecipe, alertInlineRecipe, alertInlineTextRecipe, alertVariants, defaultAlertVariant };
+//# sourceMappingURL=alert.d.ts.map

package/dist/recipes/alert.js

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/alert.ts
+const alertVariants = ["banner", "inline"];
+const defaultAlertVariant = "banner";
+const alertBannerRecipe = cva("flex flex-col items-start gap-5 @tf-panel:flex-row", {
+	defaultVariants: { titled: true },
+	variants: { titled: {
+		false: "@tf-panel:items-center",
+		true: ""
+	} }
+});
+const alertBannerTextRecipe = cva("flex min-w-0 flex-1 flex-col gap-5");
+const alertDetailRecipe = cva("flex flex-wrap gap-2");
+const alertActionRecipe = cva(["-mr-3 ml-auto flex flex-none items-center", "@tf-panel:min-h-tf-control-lg"]);
+const alertInlineRecipe = cva(["flex items-center gap-3 rounded-tf-control bg-tf-sunken-hi px-4 py-3"]);
+const alertInlineMarkRecipe = cva("size-2 flex-none rounded-tf-pill bg-tf-blend");
+const alertInlineTextRecipe = cva("min-w-0 flex-1 text-tf-body-sm font-medium text-tf-fg");
+//#endregion
+export { alertActionRecipe, alertBannerRecipe, alertBannerTextRecipe, alertDetailRecipe, alertInlineMarkRecipe, alertInlineRecipe, alertInlineTextRecipe, alertVariants, defaultAlertVariant };
+
+//# sourceMappingURL=alert.js.map

package/dist/recipes/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","names":[],"sources":["../../src/recipes/alert.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst alertVariants = ['banner', 'inline'] as const\n\ntype AlertVariant = (typeof alertVariants)[number]\n\nconst defaultAlertVariant = 'banner' satisfies AlertVariant\n\nconst alertBannerRecipe = cva('flex flex-col items-start gap-5 @tf-panel:flex-row', {\n  defaultVariants: { titled: true },\n  variants: {\n    titled: { false: '@tf-panel:items-center', true: '' },\n  },\n})\n\nconst alertBannerTextRecipe = cva('flex min-w-0 flex-1 flex-col gap-5')\n\nconst alertDetailRecipe = cva('flex flex-wrap gap-2')\n\nconst alertActionRecipe = cva([\n  '-mr-3 ml-auto flex flex-none items-center',\n  '@tf-panel:min-h-tf-control-lg',\n])\n\nconst alertInlineRecipe = cva([\n  'flex items-center gap-3 rounded-tf-control bg-tf-sunken-hi px-4 py-3',\n])\n\nconst alertInlineMarkRecipe = cva('size-2 flex-none rounded-tf-pill bg-tf-blend')\n\nconst alertInlineTextRecipe = cva('min-w-0 flex-1 text-tf-body-sm font-medium text-tf-fg')\n\nexport {\n  type AlertVariant,\n  alertActionRecipe,\n  alertBannerRecipe,\n  alertBannerTextRecipe,\n  alertDetailRecipe,\n  alertInlineMarkRecipe,\n  alertInlineRecipe,\n  alertInlineTextRecipe,\n  alertVariants,\n  defaultAlertVariant,\n}\n"],"mappings":";;AAEA,MAAM,gBAAgB,CAAC,UAAU,QAAQ;AAIzC,MAAM,sBAAsB;AAE5B,MAAM,oBAAoB,IAAI,sDAAsD;CAClF,iBAAiB,EAAE,QAAQ,KAAK;CAChC,UAAU,EACR,QAAQ;EAAE,OAAO;EAA0B,MAAM;CAAG,EACtD;AACF,CAAC;AAED,MAAM,wBAAwB,IAAI,oCAAoC;AAEtE,MAAM,oBAAoB,IAAI,sBAAsB;AAEpD,MAAM,oBAAoB,IAAI,CAC5B,6CACA,+BACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,sEACF,CAAC;AAED,MAAM,wBAAwB,IAAI,8CAA8C;AAEhF,MAAM,wBAAwB,IAAI,uDAAuD"}

package/dist/recipes/band.d.ts

@@ -0,0 +1,8 @@
+//#region src/recipes/band.d.ts
+declare const bandRecipe: (props?: ({
+  divider?: boolean | null | undefined;
+  surface?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { bandRecipe };
+//# sourceMappingURL=band.d.ts.map

package/dist/recipes/band.js

@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/band.ts
+const bandRecipe = cva("px-6 py-24 sm:px-12", {
+	defaultVariants: {
+		divider: false,
+		surface: false
+	},
+	variants: {
+		divider: {
+			false: "",
+			true: "border-t border-tf-line-2"
+		},
+		surface: {
+			false: "",
+			true: "bg-tf-surface"
+		}
+	}
+});
+//#endregion
+export { bandRecipe };
+
+//# sourceMappingURL=band.js.map

package/dist/recipes/band.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"band.js","names":[],"sources":["../../src/recipes/band.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst bandRecipe = cva('px-6 py-24 sm:px-12', {\n  defaultVariants: { divider: false, surface: false },\n  variants: {\n    divider: { false: '', true: 'border-t border-tf-line-2' },\n    surface: { false: '', true: 'bg-tf-surface' },\n  },\n})\n\nexport { bandRecipe }\n"],"mappings":";;AAEA,MAAM,aAAa,IAAI,uBAAuB;CAC5C,iBAAiB;EAAE,SAAS;EAAO,SAAS;CAAM;CAClD,UAAU;EACR,SAAS;GAAE,OAAO;GAAI,MAAM;EAA4B;EACxD,SAAS;GAAE,OAAO;GAAI,MAAM;EAAgB;CAC9C;AACF,CAAC"}

package/dist/recipes/bars.d.ts

@@ -0,0 +1,17 @@
+//#region src/recipes/bars.d.ts
+declare const barsRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const barsHeadRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const barsTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const barsLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const barsHintRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const barsFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const barsLegendRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const barsLegendListRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const barsLegendDotRecipe: (props?: ({
+  tone?: "accent" | "plain" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const barsSummaryRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const barsChartRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { barsChartRecipe, barsFootRecipe, barsHeadRecipe, barsHintRecipe, barsLabelRecipe, barsLegendDotRecipe, barsLegendListRecipe, barsLegendRecipe, barsRecipe, barsSummaryRecipe, barsTextRecipe };
+//# sourceMappingURL=bars.d.ts.map

package/dist/recipes/bars.js

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/bars.ts
+const barsRecipe = cva([
+	"@container relative isolate flex grow flex-col justify-between gap-4 p-6",
+	"rounded-tf-card bg-tf-glass shadow-tf-float backdrop-blur-tf-glass",
+	"tf-edge-sweep font-tf-body text-tf-fg tf-transition"
+]);
+const barsHeadRecipe = cva("flex flex-wrap items-start justify-between gap-4");
+const barsTextRecipe = cva("flex flex-col gap-1");
+const barsLabelRecipe = cva("text-tf-body-sm font-medium text-tf-fg");
+const barsHintRecipe = cva("text-tf-caption-sm text-tf-muted");
+const barsFootRecipe = cva("flex flex-col items-end gap-1 text-tf-caption-sm text-tf-muted");
+const barsLegendRecipe = cva("flex items-center gap-2");
+const barsLegendListRecipe = cva("flex flex-wrap items-center gap-4");
+const barsLegendDotRecipe = cva("size-2 flex-none rounded-tf-pill", {
+	defaultVariants: { tone: "accent" },
+	variants: { tone: {
+		accent: "bg-tf-blend blend-tf-accent",
+		plain: ""
+	} }
+});
+const barsSummaryRecipe = cva("tabular-nums");
+const barsChartRecipe = cva("h-36 w-full");
+//#endregion
+export { barsChartRecipe, barsFootRecipe, barsHeadRecipe, barsHintRecipe, barsLabelRecipe, barsLegendDotRecipe, barsLegendListRecipe, barsLegendRecipe, barsRecipe, barsSummaryRecipe, barsTextRecipe };
+
+//# sourceMappingURL=bars.js.map

package/dist/recipes/bars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bars.js","names":[],"sources":["../../src/recipes/bars.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst barsRecipe = cva([\n  '@container relative isolate flex grow flex-col justify-between gap-4 p-6',\n  'rounded-tf-card bg-tf-glass shadow-tf-float backdrop-blur-tf-glass',\n  'tf-edge-sweep font-tf-body text-tf-fg tf-transition',\n])\n\nconst barsHeadRecipe = cva('flex flex-wrap items-start justify-between gap-4')\n\nconst barsTextRecipe = cva('flex flex-col gap-1')\n\nconst barsLabelRecipe = cva('text-tf-body-sm font-medium text-tf-fg')\n\nconst barsHintRecipe = cva('text-tf-caption-sm text-tf-muted')\n\nconst barsFootRecipe = cva('flex flex-col items-end gap-1 text-tf-caption-sm text-tf-muted')\n\nconst barsLegendRecipe = cva('flex items-center gap-2')\n\nconst barsLegendListRecipe = cva('flex flex-wrap items-center gap-4')\n\nconst barsLegendDotRecipe = cva('size-2 flex-none rounded-tf-pill', {\n  defaultVariants: { tone: 'accent' },\n  variants: {\n    tone: {\n      accent: 'bg-tf-blend blend-tf-accent',\n      plain: '',\n    },\n  },\n})\n\nconst barsSummaryRecipe = cva('tabular-nums')\n\nconst barsChartRecipe = cva('h-36 w-full')\n\nexport {\n  barsChartRecipe,\n  barsFootRecipe,\n  barsHeadRecipe,\n  barsHintRecipe,\n  barsLabelRecipe,\n  barsLegendDotRecipe,\n  barsLegendListRecipe,\n  barsLegendRecipe,\n  barsRecipe,\n  barsSummaryRecipe,\n  barsTextRecipe,\n}\n"],"mappings":";;AAEA,MAAM,aAAa,IAAI;CACrB;CACA;CACA;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,kDAAkD;AAE7E,MAAM,iBAAiB,IAAI,qBAAqB;AAEhD,MAAM,kBAAkB,IAAI,wCAAwC;AAEpE,MAAM,iBAAiB,IAAI,kCAAkC;AAE7D,MAAM,iBAAiB,IAAI,gEAAgE;AAE3F,MAAM,mBAAmB,IAAI,yBAAyB;AAEtD,MAAM,uBAAuB,IAAI,mCAAmC;AAEpE,MAAM,sBAAsB,IAAI,oCAAoC;CAClE,iBAAiB,EAAE,MAAM,SAAS;CAClC,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,cAAc;AAE5C,MAAM,kBAAkB,IAAI,aAAa"}

package/dist/recipes/brandMark.d.ts

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

package/dist/recipes/brandMark.js

@@ -0,0 +1,7 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/brandMark.ts
+const brandMarkRecipe = cva("block size-tf-icon-solo-sm shrink-0");
+//#endregion
+export { brandMarkRecipe };
+
+//# sourceMappingURL=brandMark.js.map

package/dist/recipes/brandMark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brandMark.js","names":[],"sources":["../../src/recipes/brandMark.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst brandMarkRecipe = cva('block size-tf-icon-solo-sm shrink-0')\n\nexport { brandMarkRecipe }\n"],"mappings":";;AAEA,MAAM,kBAAkB,IAAI,qCAAqC"}

package/dist/recipes/button.d.ts

@@ -0,0 +1,23 @@
+import { Tone } from "../tone.js";
+//#region src/recipes/button.d.ts
+declare const buttonSpinnerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const buttonWordsRecipe: (props?: ({
+  size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'warning' | 'info' | 'link';
+type ButtonAccent = Tone;
+declare const buttonRecipe: (props?: ({
+  accent?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+  fullWidth?: boolean | null | undefined;
+  iconOnly?: boolean | null | undefined;
+  leading?: boolean | null | undefined;
+  size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+  trailing?: boolean | null | undefined;
+  variant?: "success" | "warning" | "info" | "danger" | "ghost" | "secondary" | "link" | "primary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const buttonVariants: readonly ["primary", "secondary", "ghost", "success", "warning", "danger", "info", "link"];
+declare const buttonSizes: readonly ["xs", "sm", "md", "lg"];
+declare const buttonAccents: readonly ["accent", "success", "warning", "info", "danger"];
+//#endregion
+export { type ButtonAccent, type ButtonVariant, buttonAccents, buttonRecipe, buttonSizes, buttonSpinnerRecipe, buttonVariants, buttonWordsRecipe };
+//# sourceMappingURL=button.d.ts.map