@techfides/ui-library-design 0.1.0

package/dist/recipes/sidebar.js

@@ -0,0 +1,128 @@
+import { controlInert, controlPress, controlReach } from "../parts/control.js";
+import { collapseMotion, drawerMotion, railCollapse, railMorph, scrimMirrorMotion } from "./motion.js";
+import { eyebrowLead } from "../parts/eyebrow.js";
+import { surfaceLifted, surfacePanel } from "../parts/surface.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/sidebar.ts
+const CHILD_INSET = "pl-11";
+const ROW_STRIDE = `calc(var(--spacing-tf-control-md) + var(--spacing))`;
+const RAIL_STRIDE = `calc(var(--spacing-tf-control-md) + var(--spacing))`;
+const sidebarTravel = (index, rail) => {
+	const step = String(index);
+	if (rail) return `0 calc(${RAIL_STRIDE} * ${step})`;
+	return `0 calc(${ROW_STRIDE} * ${step})`;
+};
+const MORPHS = railMorph;
+const ITEM = [
+	"group relative flex flex-none items-center rounded-tf-control",
+	"text-tf-body text-tf-muted",
+	"interactive:hovered:text-tf-fg aria-[current=page]:text-tf-on-accent",
+	"not-aria-[current=page]:interactive:hovered:bg-tf-panel-hi",
+	`cursor-pointer ${MORPHS}`,
+	...controlReach,
+	...controlPress,
+	...controlInert
+];
+const sidebarRecipe = cva([
+	"sticky top-0 z-tf-dropdown hidden h-dvh min-h-0 flex-none flex-col gap-6 py-6 lg:flex",
+	"w-tf-sidebar data-rail:w-tf-rail",
+	"border-r border-tf-line-2 bg-tf-glass backdrop-blur-tf-glass",
+	"tf-icons font-tf-body text-tf-fg",
+	MORPHS
+]);
+const sidebarScopeRecipe = cva("flex-none px-3");
+const sidebarMobileBarRecipe = cva([
+	"fixed inset-x-0 top-0 z-tf-dropdown flex items-center gap-3 px-4 lg:hidden",
+	"h-tf-control-lg border-b border-tf-line-2 bg-tf-panel-2 backdrop-blur-tf-panel",
+	"tf-icons font-tf-body text-tf-fg"
+]);
+const sidebarMobileHeadingsRecipe = cva("flex min-w-0 flex-1 flex-col gap-0");
+const sidebarMobileEyebrowRecipe = cva(["truncate", eyebrowLead]);
+const sidebarMobileTitleRecipe = cva("truncate font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg");
+const sidebarOverlayBackdropRecipe = cva([
+	"fixed inset-0 z-tf-modal bg-tf-scrim backdrop-blur-tf-scrim",
+	...scrimMirrorMotion,
+	"motion-reduce:animate-none"
+]);
+const sidebarOverlayPositionerRecipe = cva("fixed inset-0 z-tf-modal flex flex-col font-tf-body");
+const sidebarOverlayPanelRecipe = cva([
+	...surfacePanel,
+	...surfaceLifted,
+	"flex h-full w-full flex-col overflow-hidden rounded-tf-none",
+	"text-tf-body-sm font-medium text-tf-fg",
+	...drawerMotion,
+	"motion-reduce:animate-none"
+]);
+const sidebarOverlayHeadRecipe = cva("relative flex flex-none items-center gap-5 border-b border-tf-line-2 px-4 py-3");
+const sidebarOverlayBrandRecipe = cva(["flex min-w-0 items-center gap-3", "[&_svg]:size-tf-icon-solo-sm [&_svg]:shrink-0"]);
+const sidebarOverlayScopeRecipe = cva("ml-auto truncate text-tf-body-sm font-medium text-tf-fg");
+const sidebarOverlayBodyRecipe = cva([
+	"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4",
+	"tf-scroll-thin tf-scroll-faded",
+	"[--tf-fade-foot:calc(var(--spacing)*2)] [--tf-fade-head:calc(var(--spacing)*2)]"
+]);
+const sidebarOverlayNavRecipe = cva("flex flex-none flex-col gap-1");
+const sidebarOverlaySeparatorRecipe = cva("h-px w-full flex-none bg-tf-line-2");
+const sidebarOverlayItemActive = "aria-[current=page]:bg-tf-blend aria-[current=page]:blend-tf-accent";
+const sidebarHeadRecipe = cva(["flex flex-none items-center gap-3 px-3", MORPHS]);
+const sidebarBrandRecipe = cva([
+	"flex min-w-0 items-center gap-3 pl-3",
+	"in-data-rail:gap-0 in-data-rail:pl-4",
+	"[&_svg]:size-tf-icon-solo-sm [&_svg]:shrink-0",
+	MORPHS
+]);
+const sidebarBrandStackRecipe = cva(["flex flex-col gap-px", railCollapse]);
+const sidebarWordmarkRecipe = cva(["truncate font-tf-display text-tf-lead tracking-tf-tight"]);
+const sidebarBrandSubtitleRecipe = cva("truncate text-tf-caption-sm text-tf-muted");
+const sidebarToggleRecipe = cva("flex-none [&_svg]:size-tf-icon-solo-sm");
+const sidebarSwitchRecipe = cva(["flex flex-none items-center justify-end in-data-rail:pr-2", MORPHS]);
+const FADED = [
+	"tf-scroll-faded tf-scroll-thin",
+	"[--tf-fade-head:calc(var(--spacing)*2)] [--tf-fade-foot:calc(var(--spacing)*2)]",
+	"outline-hidden focused:outline-2 focused:-outline-offset-2 focused:outline-tf-accent-hi"
+].join(" ");
+const sidebarNavRecipe = cva(["relative flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-3 py-2", FADED]);
+const sidebarMarkRecipe = cva([
+	"pointer-events-none absolute inset-x-3 top-2 h-tf-control-md rounded-tf-control",
+	"in-data-rail:inset-x-4",
+	"bg-tf-blend blend-tf-accent",
+	`tf-slides-settle ${MORPHS}`
+]);
+const sidebarGroupRecipe = cva("flex flex-none flex-col");
+const sidebarItemRecipe = cva([
+	...ITEM,
+	"h-tf-control-md min-h-tf-control-md w-full text-left",
+	"[&>svg]:size-tf-icon-sm [&>svg]:shrink-0"
+], {
+	defaultVariants: { level: "top" },
+	variants: { level: {
+		child: `${CHILD_INSET} pr-3`,
+		top: [
+			"gap-3 px-3",
+			"in-data-rail:gap-0",
+			"in-data-rail:px-[calc((var(--spacing-tf-rail)-var(--spacing)*6-var(--spacing-tf-icon-md))/2)]"
+		].join(" ")
+	} }
+});
+const sidebarIconRecipe = cva([
+	"relative inline-flex size-tf-icon-md flex-none [&_svg]:size-tf-icon-md",
+	"[&_svg]:shrink-0",
+	MORPHS
+]);
+const sidebarLabelRecipe = cva(["truncate text-left tf-text-trim", railCollapse]);
+const sidebarChevronRecipe = cva([
+	"w-tf-icon-sm flex-none overflow-hidden in-data-rail:w-0 in-data-rail:opacity-0",
+	"group-aria-expanded:rotate-180",
+	MORPHS
+]);
+const sidebarDotRecipe = cva([
+	"pointer-events-none absolute -right-1 -bottom-1",
+	"size-1 rounded-tf-pill bg-current opacity-0 in-data-rail:opacity-100",
+	MORPHS
+]);
+const sidebarSubRecipe = cva(["flex flex-col gap-1 pt-1", ...collapseMotion]);
+const sidebarFootRecipe = cva("relative mt-auto flex flex-none flex-col gap-1 px-3");
+//#endregion
+export { sidebarBrandRecipe, sidebarBrandStackRecipe, sidebarBrandSubtitleRecipe, sidebarChevronRecipe, sidebarDotRecipe, sidebarFootRecipe, sidebarGroupRecipe, sidebarHeadRecipe, sidebarIconRecipe, sidebarItemRecipe, sidebarLabelRecipe, sidebarMarkRecipe, sidebarMobileBarRecipe, sidebarMobileEyebrowRecipe, sidebarMobileHeadingsRecipe, sidebarMobileTitleRecipe, sidebarNavRecipe, sidebarOverlayBackdropRecipe, sidebarOverlayBodyRecipe, sidebarOverlayBrandRecipe, sidebarOverlayHeadRecipe, sidebarOverlayItemActive, sidebarOverlayNavRecipe, sidebarOverlayPanelRecipe, sidebarOverlayPositionerRecipe, sidebarOverlayScopeRecipe, sidebarOverlaySeparatorRecipe, sidebarRecipe, sidebarScopeRecipe, sidebarSubRecipe, sidebarSwitchRecipe, sidebarToggleRecipe, sidebarTravel, sidebarWordmarkRecipe };
+
+//# sourceMappingURL=sidebar.js.map

package/dist/recipes/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/recipes/sidebar.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, controlReach } from '#parts/control'\nimport { eyebrowLead } from '#parts/eyebrow'\nimport { surfaceLifted, surfacePanel } from '#parts/surface'\n\nimport { collapseMotion, drawerMotion, railCollapse, railMorph, scrimMirrorMotion } from './motion'\n\nconst CHILD_INSET = 'pl-11'\n\nconst ROW_STRIDE = `calc(var(--spacing-tf-control-md) + var(--spacing))`\n\nconst RAIL_STRIDE = `calc(var(--spacing-tf-control-md) + var(--spacing))`\n\nconst sidebarTravel = (index: number, rail: boolean): string => {\n  const step = String(index)\n\n  if (rail) {\n    return `0 calc(${RAIL_STRIDE} * ${step})`\n  }\n  return `0 calc(${ROW_STRIDE} * ${step})`\n}\n\nconst MORPHS = railMorph\n\nconst ITEM = [\n  'group relative flex flex-none items-center rounded-tf-control',\n  'text-tf-body text-tf-muted',\n  'interactive:hovered:text-tf-fg aria-[current=page]:text-tf-on-accent',\n  'not-aria-[current=page]:interactive:hovered:bg-tf-panel-hi',\n  `cursor-pointer ${MORPHS}`,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n]\n\nconst sidebarRecipe = cva([\n  'sticky top-0 z-tf-dropdown hidden h-dvh min-h-0 flex-none flex-col gap-6 py-6 lg:flex',\n  'w-tf-sidebar data-rail:w-tf-rail',\n  'border-r border-tf-line-2 bg-tf-glass backdrop-blur-tf-glass',\n  'tf-icons font-tf-body text-tf-fg',\n  MORPHS,\n])\n\nconst sidebarScopeRecipe = cva('flex-none px-3')\n\nconst sidebarMobileBarRecipe = cva([\n  'fixed inset-x-0 top-0 z-tf-dropdown flex items-center gap-3 px-4 lg:hidden',\n  'h-tf-control-lg border-b border-tf-line-2 bg-tf-panel-2 backdrop-blur-tf-panel',\n  'tf-icons font-tf-body text-tf-fg',\n])\n\nconst sidebarMobileHeadingsRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst sidebarMobileEyebrowRecipe = cva(['truncate', eyebrowLead])\n\nconst sidebarMobileTitleRecipe = cva(\n  'truncate font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg',\n)\n\nconst sidebarOverlayBackdropRecipe = cva([\n  'fixed inset-0 z-tf-modal bg-tf-scrim backdrop-blur-tf-scrim',\n  ...scrimMirrorMotion,\n  'motion-reduce:animate-none',\n])\n\nconst sidebarOverlayPositionerRecipe = cva('fixed inset-0 z-tf-modal flex flex-col font-tf-body')\n\nconst sidebarOverlayPanelRecipe = cva([\n  ...surfacePanel,\n  ...surfaceLifted,\n  'flex h-full w-full flex-col overflow-hidden rounded-tf-none',\n  'text-tf-body-sm font-medium text-tf-fg',\n  ...drawerMotion,\n  'motion-reduce:animate-none',\n])\n\nconst sidebarOverlayHeadRecipe = cva(\n  'relative flex flex-none items-center gap-5 border-b border-tf-line-2 px-4 py-3',\n)\n\nconst sidebarOverlayBrandRecipe = cva([\n  'flex min-w-0 items-center gap-3',\n  '[&_svg]:size-tf-icon-solo-sm [&_svg]:shrink-0',\n])\n\nconst sidebarOverlayScopeRecipe = cva('ml-auto truncate text-tf-body-sm font-medium text-tf-fg')\n\nconst sidebarOverlayBodyRecipe = cva([\n  'flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4',\n  'tf-scroll-thin tf-scroll-faded',\n  '[--tf-fade-foot:calc(var(--spacing)*2)] [--tf-fade-head:calc(var(--spacing)*2)]',\n])\n\nconst sidebarOverlayNavRecipe = cva('flex flex-none flex-col gap-1')\n\nconst sidebarOverlaySeparatorRecipe = cva('h-px w-full flex-none bg-tf-line-2')\n\nconst sidebarOverlayItemActive =\n  'aria-[current=page]:bg-tf-blend aria-[current=page]:blend-tf-accent'\n\nconst sidebarHeadRecipe = cva(['flex flex-none items-center gap-3 px-3', MORPHS])\n\nconst sidebarBrandRecipe = cva([\n  'flex min-w-0 items-center gap-3 pl-3',\n  'in-data-rail:gap-0 in-data-rail:pl-4',\n  '[&_svg]:size-tf-icon-solo-sm [&_svg]:shrink-0',\n  MORPHS,\n])\n\nconst sidebarBrandStackRecipe = cva(['flex flex-col gap-px', railCollapse])\n\nconst sidebarWordmarkRecipe = cva(['truncate font-tf-display text-tf-lead tracking-tf-tight'])\n\nconst sidebarBrandSubtitleRecipe = cva('truncate text-tf-caption-sm text-tf-muted')\n\nconst sidebarToggleRecipe = cva('flex-none [&_svg]:size-tf-icon-solo-sm')\n\nconst sidebarSwitchRecipe = cva([\n  'flex flex-none items-center justify-end in-data-rail:pr-2',\n  MORPHS,\n])\n\nconst FADED = [\n  'tf-scroll-faded tf-scroll-thin',\n  '[--tf-fade-head:calc(var(--spacing)*2)] [--tf-fade-foot:calc(var(--spacing)*2)]',\n  'outline-hidden focused:outline-2 focused:-outline-offset-2 focused:outline-tf-accent-hi',\n].join(' ')\n\nconst sidebarNavRecipe = cva([\n  'relative flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-3 py-2',\n  FADED,\n])\n\nconst sidebarMarkRecipe = cva([\n  'pointer-events-none absolute inset-x-3 top-2 h-tf-control-md rounded-tf-control',\n  'in-data-rail:inset-x-4',\n  'bg-tf-blend blend-tf-accent',\n  `tf-slides-settle ${MORPHS}`,\n])\n\nconst sidebarGroupRecipe = cva('flex flex-none flex-col')\n\nconst sidebarItemRecipe = cva(\n  [\n    ...ITEM,\n    'h-tf-control-md min-h-tf-control-md w-full text-left',\n    '[&>svg]:size-tf-icon-sm [&>svg]:shrink-0',\n  ],\n  {\n    defaultVariants: { level: 'top' },\n    variants: {\n      level: {\n        child: `${CHILD_INSET} pr-3`,\n        top: [\n          'gap-3 px-3',\n          'in-data-rail:gap-0',\n          'in-data-rail:px-[calc((var(--spacing-tf-rail)-var(--spacing)*6-var(--spacing-tf-icon-md))/2)]',\n        ].join(' '),\n      },\n    },\n  },\n)\n\nconst sidebarIconRecipe = cva([\n  'relative inline-flex size-tf-icon-md flex-none [&_svg]:size-tf-icon-md',\n  '[&_svg]:shrink-0',\n  MORPHS,\n])\n\nconst sidebarLabelRecipe = cva(['truncate text-left tf-text-trim', railCollapse])\n\nconst sidebarChevronRecipe = cva([\n  'w-tf-icon-sm flex-none overflow-hidden in-data-rail:w-0 in-data-rail:opacity-0',\n  'group-aria-expanded:rotate-180',\n  MORPHS,\n])\n\nconst sidebarDotRecipe = cva([\n  'pointer-events-none absolute -right-1 -bottom-1',\n  'size-1 rounded-tf-pill bg-current opacity-0 in-data-rail:opacity-100',\n  MORPHS,\n])\n\nconst sidebarSubRecipe = cva(['flex flex-col gap-1 pt-1', ...collapseMotion])\n\nconst sidebarFootRecipe = cva('relative mt-auto flex flex-none flex-col gap-1 px-3')\n\nexport {\n  sidebarBrandRecipe,\n  sidebarBrandStackRecipe,\n  sidebarBrandSubtitleRecipe,\n  sidebarChevronRecipe,\n  sidebarDotRecipe,\n  sidebarFootRecipe,\n  sidebarGroupRecipe,\n  sidebarHeadRecipe,\n  sidebarIconRecipe,\n  sidebarItemRecipe,\n  sidebarLabelRecipe,\n  sidebarMarkRecipe,\n  sidebarMobileBarRecipe,\n  sidebarMobileEyebrowRecipe,\n  sidebarMobileHeadingsRecipe,\n  sidebarMobileTitleRecipe,\n  sidebarNavRecipe,\n  sidebarOverlayBackdropRecipe,\n  sidebarOverlayBodyRecipe,\n  sidebarOverlayBrandRecipe,\n  sidebarOverlayHeadRecipe,\n  sidebarOverlayItemActive,\n  sidebarOverlayNavRecipe,\n  sidebarOverlayPanelRecipe,\n  sidebarOverlayPositionerRecipe,\n  sidebarOverlayScopeRecipe,\n  sidebarOverlaySeparatorRecipe,\n  sidebarRecipe,\n  sidebarScopeRecipe,\n  sidebarSubRecipe,\n  sidebarSwitchRecipe,\n  sidebarToggleRecipe,\n  sidebarTravel,\n  sidebarWordmarkRecipe,\n}\n"],"mappings":";;;;;;AAQA,MAAM,cAAc;AAEpB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAEpB,MAAM,iBAAiB,OAAe,SAA0B;CAC9D,MAAM,OAAO,OAAO,KAAK;CAEzB,IAAI,MACF,OAAO,UAAU,YAAY,KAAK,KAAK;CAEzC,OAAO,UAAU,WAAW,KAAK,KAAK;AACxC;AAEA,MAAM,SAAS;AAEf,MAAM,OAAO;CACX;CACA;CACA;CACA;CACA,kBAAkB;CAClB,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,MAAM,gBAAgB,IAAI;CACxB;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,gBAAgB;AAE/C,MAAM,yBAAyB,IAAI;CACjC;CACA;CACA;AACF,CAAC;AAED,MAAM,8BAA8B,IAAI,oCAAoC;AAE5E,MAAM,6BAA6B,IAAI,CAAC,YAAY,WAAW,CAAC;AAEhE,MAAM,2BAA2B,IAC/B,4EACF;AAEA,MAAM,+BAA+B,IAAI;CACvC;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,iCAAiC,IAAI,qDAAqD;AAEhG,MAAM,4BAA4B,IAAI;CACpC,GAAG;CACH,GAAG;CACH;CACA;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,2BAA2B,IAC/B,gFACF;AAEA,MAAM,4BAA4B,IAAI,CACpC,mCACA,+CACF,CAAC;AAED,MAAM,4BAA4B,IAAI,yDAAyD;AAE/F,MAAM,2BAA2B,IAAI;CACnC;CACA;CACA;AACF,CAAC;AAED,MAAM,0BAA0B,IAAI,+BAA+B;AAEnE,MAAM,gCAAgC,IAAI,oCAAoC;AAE9E,MAAM,2BACJ;AAEF,MAAM,oBAAoB,IAAI,CAAC,0CAA0C,MAAM,CAAC;AAEhF,MAAM,qBAAqB,IAAI;CAC7B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,0BAA0B,IAAI,CAAC,wBAAwB,YAAY,CAAC;AAE1E,MAAM,wBAAwB,IAAI,CAAC,yDAAyD,CAAC;AAE7F,MAAM,6BAA6B,IAAI,2CAA2C;AAElF,MAAM,sBAAsB,IAAI,wCAAwC;AAExE,MAAM,sBAAsB,IAAI,CAC9B,6DACA,MACF,CAAC;AAED,MAAM,QAAQ;CACZ;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,mBAAmB,IAAI,CAC3B,yEACA,KACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA,oBAAoB;AACtB,CAAC;AAED,MAAM,qBAAqB,IAAI,yBAAyB;AAExD,MAAM,oBAAoB,IACxB;CACE,GAAG;CACH;CACA;AACF,GACA;CACE,iBAAiB,EAAE,OAAO,MAAM;CAChC,UAAU,EACR,OAAO;EACL,OAAO,GAAG,YAAY;EACtB,KAAK;GACH;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ,EACF;AACF,CACF;AAEA,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAAC,mCAAmC,YAAY,CAAC;AAEhF,MAAM,uBAAuB,IAAI;CAC/B;CACA;CACA;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,CAAC,4BAA4B,GAAG,cAAc,CAAC;AAE5E,MAAM,oBAAoB,IAAI,qDAAqD"}

package/dist/recipes/sky.d.ts

@@ -0,0 +1,20 @@
+//#region src/recipes/sky.d.ts
+interface StarLayer {
+  delay: string;
+  image: string;
+  position: string;
+  size: string;
+}
+interface Cloud {
+  delay: string;
+  shift: string;
+}
+declare const skyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const driftRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const starRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const contentRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const starLayers: (count: number, seed: string) => StarLayer[];
+declare const cloudDrift: (seed: string) => Cloud;
+//#endregion
+export { type Cloud, type StarLayer, cloudDrift, contentRecipe, driftRecipe, skyRecipe, starLayers, starRecipe };
+//# sourceMappingURL=sky.d.ts.map

package/dist/recipes/sky.js

@@ -0,0 +1,127 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/sky.ts
+const DIM = 1;
+const MID = 2;
+const BRIGHT = 3;
+const FAINT = 28;
+const DUSKY = 40;
+const STEADY = 55;
+const CLEAR = 70;
+const KEEN = 95;
+const STAR_PX = [
+	DIM,
+	DIM,
+	MID,
+	MID,
+	BRIGHT
+];
+const STAR_GLOW = [
+	FAINT,
+	DUSKY,
+	STEADY,
+	CLEAR,
+	KEEN
+];
+const SEED_BASE = 7;
+const SEED_STEP = 131;
+const LEHMER_MULTIPLIER = 16807;
+const LEHMER_MODULUS = 2147483647;
+const FIRST = 0;
+const ORIGIN = 0;
+const ONE = 1;
+const EDGE = 4;
+const FIELD = 92;
+const CLOUD_SHIFT = 26;
+const HALF = .5;
+const LAYERS = 4;
+const HALO_AT = CLEAR;
+const HALO_SCALE = 5;
+const HALO_GLOW = 7;
+const CORE_EDGE = 99;
+const skyRecipe = cva([
+	"relative isolate overflow-hidden",
+	"rounded-tf-card bg-tf-bg",
+	"font-tf-body text-tf-fg"
+]);
+const driftRecipe = cva([
+	"pointer-events-none absolute -inset-1/4",
+	"[rotate:var(--tf-sweep)] tf-turning",
+	"[animation-duration:calc(var(--tf-sweep-duration)*45)]"
+]);
+const starRecipe = cva("pointer-events-none absolute inset-0 tf-twinkling bg-no-repeat");
+const contentRecipe = cva("relative");
+const hashOf = (seed) => {
+	let value = SEED_BASE;
+	for (const letter of seed) value = (value * SEED_STEP + (letter.codePointAt(FIRST) ?? ORIGIN)) % LEHMER_MODULUS;
+	return value + ONE;
+};
+const streamFrom = (seed) => {
+	let state = hashOf(seed);
+	return () => {
+		state = state * LEHMER_MULTIPLIER % LEHMER_MODULUS;
+		return state / LEHMER_MODULUS;
+	};
+};
+const pick = (choices, roll, fallback) => choices[Math.floor(roll * choices.length)] ?? fallback;
+const glowOf = (strength) => `color-mix(in oklab, var(--color-tf-fg) ${String(strength)}%, transparent)`;
+const circleOf = (strength) => {
+	const ink = glowOf(strength);
+	return `radial-gradient(circle closest-side, ${ink} 0, ${ink} ${String(CORE_EDGE)}%, transparent 100%)`;
+};
+const haloOf = (strength) => {
+	return `radial-gradient(circle closest-side, ${glowOf(strength)} 0, transparent 100%)`;
+};
+const speckFrom = (roll) => {
+	const step = roll();
+	return {
+		across: EDGE + roll() * FIELD,
+		down: EDGE + roll() * FIELD,
+		glow: pick(STAR_GLOW, step, FAINT),
+		px: pick(STAR_PX, step, DIM)
+	};
+};
+const spotOf = (speck) => `${String(speck.across)}% ${String(speck.down)}%`;
+const sizeOf = (across) => `${String(across)}px ${String(across)}px`;
+const draw = (sheet, speck) => {
+	if (speck.glow >= HALO_AT) {
+		sheet.images.push(haloOf(HALO_GLOW));
+		sheet.positions.push(spotOf(speck));
+		sheet.sizes.push(sizeOf(speck.px * HALO_SCALE));
+	}
+	sheet.images.push(circleOf(speck.glow));
+	sheet.positions.push(spotOf(speck));
+	sheet.sizes.push(sizeOf(speck.px));
+};
+const starLayers = (count, seed) => {
+	const roll = streamFrom(seed);
+	const sheets = Array.from({ length: LAYERS }, () => ({
+		images: [],
+		positions: [],
+		sizes: []
+	}));
+	for (let drawn = ORIGIN; drawn < count; drawn += ONE) {
+		const speck = speckFrom(roll);
+		const sheet = sheets[Math.floor(roll() * LAYERS)] ?? sheets[FIRST];
+		if (sheet) draw(sheet, speck);
+	}
+	return sheets.map((sheet, index) => ({
+		delay: `calc(var(--tf-twinkle-duration) * -${String(index / LAYERS)})`,
+		image: sheet.images.join(", "),
+		position: sheet.positions.join(", "),
+		size: sheet.sizes.join(", ")
+	}));
+};
+const cloudDrift = (seed) => {
+	const roll = streamFrom(`cloud:${seed}`);
+	const turn = roll();
+	const across = (roll() - HALF) * CLOUD_SHIFT;
+	const down = (roll() - HALF) * CLOUD_SHIFT;
+	return {
+		delay: `calc(var(--tf-sweep-duration) * -${String(turn)})`,
+		shift: `${String(across)}% ${String(down)}%`
+	};
+};
+//#endregion
+export { cloudDrift, contentRecipe, driftRecipe, skyRecipe, starLayers, starRecipe };
+
+//# sourceMappingURL=sky.js.map

package/dist/recipes/sky.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky.js","names":[],"sources":["../../src/recipes/sky.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst DIM = 1\nconst MID = 2\nconst BRIGHT = 3\n\nconst FAINT = 28\nconst DUSKY = 40\nconst STEADY = 55\nconst CLEAR = 70\nconst KEEN = 95\n\nconst STAR_PX = [DIM, DIM, MID, MID, BRIGHT] as const\nconst STAR_GLOW = [FAINT, DUSKY, STEADY, CLEAR, KEEN] as const\n\nconst SEED_BASE = 7\nconst SEED_STEP = 131\nconst LEHMER_MULTIPLIER = 16_807\nconst LEHMER_MODULUS = 2_147_483_647\n\nconst FIRST = 0\nconst ORIGIN = 0\nconst ONE = 1\nconst EDGE = 4\nconst FIELD = 92\nconst CLOUD_SHIFT = 26\nconst HALF = 0.5\n\nconst LAYERS = 4\n\nconst HALO_AT = CLEAR\n\nconst HALO_SCALE = 5\n\nconst HALO_GLOW = 7\n\nconst CORE_EDGE = 99\n\ninterface Speck {\n  across: number\n  down: number\n  glow: number\n  px: number\n}\n\ninterface StarLayer {\n  delay: string\n  image: string\n  position: string\n  size: string\n}\n\ninterface Cloud {\n  delay: string\n  shift: string\n}\n\nconst skyRecipe = cva([\n  'relative isolate overflow-hidden',\n  'rounded-tf-card bg-tf-bg',\n  'font-tf-body text-tf-fg',\n])\n\nconst driftRecipe = cva([\n  'pointer-events-none absolute -inset-1/4',\n  '[rotate:var(--tf-sweep)] tf-turning',\n  '[animation-duration:calc(var(--tf-sweep-duration)*45)]',\n])\n\nconst starRecipe = cva('pointer-events-none absolute inset-0 tf-twinkling bg-no-repeat')\n\nconst contentRecipe = cva('relative')\n\nconst hashOf = (seed: string): number => {\n  let value = SEED_BASE\n\n  for (const letter of seed) {\n    value = (value * SEED_STEP + (letter.codePointAt(FIRST) ?? ORIGIN)) % LEHMER_MODULUS\n  }\n  return value + ONE\n}\n\nconst streamFrom = (seed: string): (() => number) => {\n  let state = hashOf(seed)\n\n  return () => {\n    state = (state * LEHMER_MULTIPLIER) % LEHMER_MODULUS\n    return state / LEHMER_MODULUS\n  }\n}\n\nconst pick = <Value>(choices: readonly Value[], roll: number, fallback: Value): Value =>\n  choices[Math.floor(roll * choices.length)] ?? fallback\n\nconst glowOf = (strength: number): string =>\n  `color-mix(in oklab, var(--color-tf-fg) ${String(strength)}%, transparent)`\n\nconst circleOf = (strength: number): string => {\n  const ink = glowOf(strength)\n\n  return `radial-gradient(circle closest-side, ${ink} 0, ${ink} ${String(CORE_EDGE)}%, transparent 100%)`\n}\n\nconst haloOf = (strength: number): string => {\n  const ink = glowOf(strength)\n\n  return `radial-gradient(circle closest-side, ${ink} 0, transparent 100%)`\n}\n\nconst speckFrom = (roll: () => number): Speck => {\n  const step = roll()\n\n  return {\n    across: EDGE + roll() * FIELD,\n    down: EDGE + roll() * FIELD,\n    glow: pick(STAR_GLOW, step, FAINT),\n    px: pick(STAR_PX, step, DIM),\n  }\n}\n\nconst spotOf = (speck: Speck): string => `${String(speck.across)}% ${String(speck.down)}%`\n\nconst sizeOf = (across: number): string => `${String(across)}px ${String(across)}px`\n\ninterface Drawing {\n  images: string[]\n  positions: string[]\n  sizes: string[]\n}\n\nconst draw = (sheet: Drawing, speck: Speck): void => {\n  if (speck.glow >= HALO_AT) {\n    sheet.images.push(haloOf(HALO_GLOW))\n    sheet.positions.push(spotOf(speck))\n    sheet.sizes.push(sizeOf(speck.px * HALO_SCALE))\n  }\n  sheet.images.push(circleOf(speck.glow))\n  sheet.positions.push(spotOf(speck))\n  sheet.sizes.push(sizeOf(speck.px))\n}\n\nconst starLayers = (count: number, seed: string): StarLayer[] => {\n  const roll = streamFrom(seed)\n  const sheets: Drawing[] = Array.from({ length: LAYERS }, () => ({\n    images: [],\n    positions: [],\n    sizes: [],\n  }))\n\n  for (let drawn = ORIGIN; drawn < count; drawn += ONE) {\n    const speck = speckFrom(roll)\n    const sheet = sheets[Math.floor(roll() * LAYERS)] ?? sheets[FIRST]\n\n    if (sheet) {\n      draw(sheet, speck)\n    }\n  }\n  return sheets.map((sheet, index) => ({\n    delay: `calc(var(--tf-twinkle-duration) * -${String(index / LAYERS)})`,\n    image: sheet.images.join(', '),\n    position: sheet.positions.join(', '),\n    size: sheet.sizes.join(', '),\n  }))\n}\n\nconst cloudDrift = (seed: string): Cloud => {\n  const roll = streamFrom(`cloud:${seed}`)\n  const turn = roll()\n  const across = (roll() - HALF) * CLOUD_SHIFT\n  const down = (roll() - HALF) * CLOUD_SHIFT\n\n  return {\n    delay: `calc(var(--tf-sweep-duration) * -${String(turn)})`,\n    shift: `${String(across)}% ${String(down)}%`,\n  }\n}\n\nexport {\n  type Cloud,\n  type StarLayer,\n  cloudDrift,\n  contentRecipe,\n  driftRecipe,\n  skyRecipe,\n  starLayers,\n  starRecipe,\n}\n"],"mappings":"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"}

package/dist/recipes/slider.d.ts

@@ -0,0 +1,20 @@
+//#region src/recipes/slider.d.ts
+declare const sliderKnobSize = 20;
+declare const sliderRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderHeadRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderValueRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderControlRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderTrackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderRangeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderNotchesRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderNotchRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderThumbRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderHintRecipe: (props?: ({
+  invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const sliderBoundsRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { sliderBoundsRecipe, sliderControlRecipe, sliderFootRecipe, sliderHeadRecipe, sliderHintRecipe, sliderKnobSize, sliderLabelRecipe, sliderNotchRecipe, sliderNotchesRecipe, sliderRangeRecipe, sliderRecipe, sliderThumbRecipe, sliderTrackRecipe, sliderValueRecipe };
+//# sourceMappingURL=slider.d.ts.map

package/dist/recipes/slider.js

@@ -0,0 +1,62 @@
+import { controlReach } from "../parts/control.js";
+import { markKnob } from "../parts/mark.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/slider.ts
+const sliderKnobSize = 20;
+const sliderRecipe = cva([
+	"flex w-full max-w-tf-panel flex-col gap-2",
+	"font-tf-body",
+	"data-disabled:cursor-not-allowed",
+	"data-disabled:**:data-[part=value-text]:text-tf-muted"
+]);
+const sliderHeadRecipe = cva("flex items-baseline justify-between gap-4");
+const sliderLabelRecipe = cva("text-tf-body text-tf-fg data-disabled:text-tf-muted");
+const sliderValueRecipe = cva([
+	"font-tf-display text-tf-h4 font-bold tracking-tf-tight tabular-nums",
+	"text-tf-fg in-data-dragging:text-tf-accent-hi in-data-focus:text-tf-accent-hi",
+	"tf-transition motion-reduce:transition-none"
+]);
+const sliderControlRecipe = cva([
+	"relative flex min-h-tf-target w-full items-center",
+	"not-data-readonly:interactive:cursor-pointer",
+	"data-readonly:cursor-default"
+]);
+const sliderTrackRecipe = cva(["h-tf-mark-track w-full overflow-hidden rounded-tf-inline bg-tf-line", "data-disabled:opacity-50"]);
+const sliderRangeRecipe = cva([
+	"h-tf-mark-track",
+	"bg-tf-blend-rise blend-tf-accent",
+	"data-invalid:blend-tf-danger",
+	"tf-transition not-data-dragging:tf-travels motion-reduce:transition-none"
+]);
+const sliderNotchesRecipe = cva("pointer-events-none absolute inset-0");
+const sliderNotchRecipe = cva([
+	"h-full w-tf-hairline",
+	"data-[state=over-value]:bg-tf-line-hi data-[state=under-value]:bg-tf-shade-under",
+	"tf-transition motion-reduce:transition-none"
+]);
+const sliderThumbRecipe = cva([
+	...markKnob,
+	"size-tf-icon-solo-sm blend-tf-accent",
+	"inset-ring inset-ring-tf-line-hi",
+	"in-data-invalid:inset-ring-tf-danger-hi",
+	"tf-glow tf-fill-scale tf-settled-quiet",
+	"interactive:hovered:tf-raised",
+	"not-data-dragging:tf-travels",
+	"data-dragging:bg-tf-fg-held data-dragging:tf-raised",
+	"motion-safe:data-dragging:scale-112",
+	"data-disabled:opacity-50",
+	...controlReach
+]);
+const sliderFootRecipe = cva("flex items-baseline justify-between gap-4");
+const sliderHintRecipe = cva("text-tf-caption font-medium", {
+	defaultVariants: { invalid: false },
+	variants: { invalid: {
+		false: "text-tf-muted",
+		true: "text-tf-danger-hi tf-arrives"
+	} }
+});
+const sliderBoundsRecipe = cva("ms-auto shrink-0 text-tf-caption font-medium text-tf-muted tabular-nums");
+//#endregion
+export { sliderBoundsRecipe, sliderControlRecipe, sliderFootRecipe, sliderHeadRecipe, sliderHintRecipe, sliderKnobSize, sliderLabelRecipe, sliderNotchRecipe, sliderNotchesRecipe, sliderRangeRecipe, sliderRecipe, sliderThumbRecipe, sliderTrackRecipe, sliderValueRecipe };
+
+//# sourceMappingURL=slider.js.map

package/dist/recipes/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/recipes/slider.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlReach } from '#parts/control'\nimport { markKnob } from '#parts/mark'\n\nconst sliderKnobSize = 20\n\nconst sliderRecipe = cva([\n  'flex w-full max-w-tf-panel flex-col gap-2',\n  'font-tf-body',\n  'data-disabled:cursor-not-allowed',\n  'data-disabled:**:data-[part=value-text]:text-tf-muted',\n])\n\nconst sliderHeadRecipe = cva('flex items-baseline justify-between gap-4')\n\nconst sliderLabelRecipe = cva('text-tf-body text-tf-fg data-disabled:text-tf-muted')\n\nconst sliderValueRecipe = cva([\n  'font-tf-display text-tf-h4 font-bold tracking-tf-tight tabular-nums',\n  'text-tf-fg in-data-dragging:text-tf-accent-hi in-data-focus:text-tf-accent-hi',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst sliderControlRecipe = cva([\n  'relative flex min-h-tf-target w-full items-center',\n  'not-data-readonly:interactive:cursor-pointer',\n  'data-readonly:cursor-default',\n])\n\nconst sliderTrackRecipe = cva([\n  'h-tf-mark-track w-full overflow-hidden rounded-tf-inline bg-tf-line',\n  'data-disabled:opacity-50',\n])\n\nconst sliderRangeRecipe = cva([\n  'h-tf-mark-track',\n  'bg-tf-blend-rise blend-tf-accent',\n  'data-invalid:blend-tf-danger',\n  'tf-transition not-data-dragging:tf-travels motion-reduce:transition-none',\n])\n\nconst sliderNotchesRecipe = cva('pointer-events-none absolute inset-0')\n\nconst sliderNotchRecipe = cva([\n  'h-full w-tf-hairline',\n  'data-[state=over-value]:bg-tf-line-hi data-[state=under-value]:bg-tf-shade-under',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst sliderThumbRecipe = cva([\n  ...markKnob,\n  'size-tf-icon-solo-sm blend-tf-accent',\n  'inset-ring inset-ring-tf-line-hi',\n  'in-data-invalid:inset-ring-tf-danger-hi',\n  'tf-glow tf-fill-scale tf-settled-quiet',\n  'interactive:hovered:tf-raised',\n  'not-data-dragging:tf-travels',\n  'data-dragging:bg-tf-fg-held data-dragging:tf-raised',\n  'motion-safe:data-dragging:scale-112',\n  'data-disabled:opacity-50',\n  ...controlReach,\n])\n\nconst sliderFootRecipe = cva('flex items-baseline justify-between gap-4')\n\nconst sliderHintRecipe = cva('text-tf-caption font-medium', {\n  defaultVariants: { invalid: false },\n  variants: {\n    invalid: { false: 'text-tf-muted', true: 'text-tf-danger-hi tf-arrives' },\n  },\n})\n\nconst sliderBoundsRecipe = cva(\n  'ms-auto shrink-0 text-tf-caption font-medium text-tf-muted tabular-nums',\n)\n\nexport {\n  sliderBoundsRecipe,\n  sliderControlRecipe,\n  sliderFootRecipe,\n  sliderHeadRecipe,\n  sliderHintRecipe,\n  sliderKnobSize,\n  sliderLabelRecipe,\n  sliderNotchRecipe,\n  sliderNotchesRecipe,\n  sliderRangeRecipe,\n  sliderRecipe,\n  sliderThumbRecipe,\n  sliderTrackRecipe,\n  sliderValueRecipe,\n}\n"],"mappings":";;;;AAKA,MAAM,iBAAiB;AAEvB,MAAM,eAAe,IAAI;CACvB;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,2CAA2C;AAExE,MAAM,oBAAoB,IAAI,qDAAqD;AAEnF,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,uEACA,0BACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,sCAAsC;AAEtE,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B,GAAG;CACH;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,mBAAmB,IAAI,2CAA2C;AAExE,MAAM,mBAAmB,IAAI,+BAA+B;CAC1D,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EAAE,OAAO;EAAiB,MAAM;CAA+B,EAC1E;AACF,CAAC;AAED,MAAM,qBAAqB,IACzB,yEACF"}

package/dist/recipes/stat.d.ts

@@ -0,0 +1,30 @@
+import { SparkShape } from "../charts/spark.js";
+import { Tone } from "../tone.js";
+//#region src/recipes/stat.d.ts
+declare const statAccents: readonly ["accent", "success", "warning", "info", "danger"];
+type StatAccent = Tone;
+declare const statDirections: readonly ["up", "down"];
+type StatDirection = (typeof statDirections)[number];
+declare const defaultStatAccent = "accent";
+type StatSurface = 'glass' | 'flat';
+declare const statSurfaces: readonly ["glass", "flat"];
+declare const defaultStatSurface = "glass";
+declare const statRecipe: (props?: ({
+  accent?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+  surface?: "glass" | "flat" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const statStackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const statLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const statFigureRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const statValueRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const statUnitRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const statHintRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const statSparkShapes: readonly ["line", "bars"];
+type StatSparkShape = SparkShape;
+declare const defaultStatSparkShape = "line";
+declare const statSparkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const statChangeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const statTermRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { type StatAccent, type StatDirection, type StatSparkShape, type StatSurface, defaultStatAccent, defaultStatSparkShape, defaultStatSurface, statAccents, statChangeRecipe, statDirections, statFigureRecipe, statHintRecipe, statLabelRecipe, statRecipe, statSparkRecipe, statSparkShapes, statStackRecipe, statSurfaces, statTermRecipe, statUnitRecipe, statValueRecipe };
+//# sourceMappingURL=stat.d.ts.map

package/dist/recipes/stat.js

@@ -0,0 +1,52 @@
+import { toneBlend } from "../tone.js";
+import { defaultTone, tones } from "../parts/tone.js";
+import { tileRoused } from "../parts/rouse.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/stat.ts
+const statAccents = tones;
+const statDirections = ["up", "down"];
+const defaultStatAccent = defaultTone;
+const BLEND = toneBlend;
+const statSurfaces = ["glass", "flat"];
+const defaultStatSurface = "glass";
+const statRecipe = cva([
+	"@container relative isolate flex min-w-0 grow items-center gap-5 p-6",
+	"font-tf-body text-tf-fg tf-transition",
+	tileRoused
+], {
+	defaultVariants: {
+		accent: defaultStatAccent,
+		surface: defaultStatSurface
+	},
+	variants: {
+		accent: BLEND,
+		surface: {
+			flat: "",
+			glass: [
+				"rounded-tf-card bg-tf-glass shadow-tf-float backdrop-blur-tf-glass",
+				"tf-edge-sweep",
+				"motion-safe:tf-lands"
+			].join(" ")
+		}
+	}
+});
+const statStackRecipe = cva("flex min-w-0 grow flex-wrap items-center gap-x-3 gap-y-1");
+const statLabelRecipe = cva(["order-1 grow text-tf-body-sm font-medium text-tf-fg"]);
+const statFigureRecipe = cva("order-3 m-0 flex basis-full flex-nowrap items-baseline gap-2");
+const statValueRecipe = cva(["font-tf-display text-tf-figure font-bold tracking-tf-tight text-tf-fg", "motion-safe:tf-tallies"]);
+const statUnitRecipe = cva("text-tf-unit font-tf-body font-medium text-tf-muted");
+const statHintRecipe = cva("order-4 basis-full text-tf-caption-sm text-tf-muted");
+const statSparkShapes = ["line", "bars"];
+const defaultStatSparkShape = "line";
+const statSparkRecipe = cva("order-5 mt-2 h-7 w-full basis-full");
+const statChangeRecipe = cva([
+	"relative order-2 m-0 ml-auto inline-flex items-center gap-1",
+	"tf-edge-sweep rounded-tf-pill bg-tf-panel px-2 py-1 blend-tf-accent",
+	"text-tf-caption-sm font-normal whitespace-nowrap text-tf-accent-hi tabular-nums",
+	"tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0"
+]);
+const statTermRecipe = cva("sr-only");
+//#endregion
+export { defaultStatAccent, defaultStatSparkShape, defaultStatSurface, statAccents, statChangeRecipe, statDirections, statFigureRecipe, statHintRecipe, statLabelRecipe, statRecipe, statSparkRecipe, statSparkShapes, statStackRecipe, statSurfaces, statTermRecipe, statUnitRecipe, statValueRecipe };
+
+//# sourceMappingURL=stat.js.map

package/dist/recipes/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","names":[],"sources":["../../src/recipes/stat.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { SparkShape } from '#charts/spark'\nimport { tileRoused } from '#parts/rouse'\nimport { defaultTone, tones } from '#parts/tone'\nimport type { Tone } from '#tone'\nimport { toneBlend } from '#tone'\n\nconst statAccents = tones\n\ntype StatAccent = Tone\n\nconst statDirections = ['up', 'down'] as const\n\ntype StatDirection = (typeof statDirections)[number]\n\nconst defaultStatAccent = defaultTone\n\nconst BLEND = toneBlend\n\ntype StatSurface = 'glass' | 'flat'\n\nconst statSurfaces = ['glass', 'flat'] as const satisfies readonly StatSurface[]\n\nconst defaultStatSurface = 'glass' satisfies StatSurface\n\nconst statRecipe = cva(\n  [\n    '@container relative isolate flex min-w-0 grow items-center gap-5 p-6',\n    'font-tf-body text-tf-fg tf-transition',\n    tileRoused,\n  ],\n  {\n    defaultVariants: { accent: defaultStatAccent, surface: defaultStatSurface },\n    variants: {\n      accent: BLEND,\n      surface: {\n        flat: '',\n        glass: [\n          'rounded-tf-card bg-tf-glass shadow-tf-float backdrop-blur-tf-glass',\n          'tf-edge-sweep',\n          'motion-safe:tf-lands',\n        ].join(' '),\n      } satisfies Record<StatSurface, string>,\n    },\n  },\n)\n\nconst statStackRecipe = cva('flex min-w-0 grow flex-wrap items-center gap-x-3 gap-y-1')\n\nconst statLabelRecipe = cva(['order-1 grow text-tf-body-sm font-medium text-tf-fg'])\n\nconst statFigureRecipe = cva('order-3 m-0 flex basis-full flex-nowrap items-baseline gap-2')\n\nconst statValueRecipe = cva([\n  'font-tf-display text-tf-figure font-bold tracking-tf-tight text-tf-fg',\n  'motion-safe:tf-tallies',\n])\n\nconst statUnitRecipe = cva('text-tf-unit font-tf-body font-medium text-tf-muted')\n\nconst statHintRecipe = cva('order-4 basis-full text-tf-caption-sm text-tf-muted')\n\nconst statSparkShapes = ['line', 'bars'] as const satisfies readonly SparkShape[]\n\ntype StatSparkShape = SparkShape\n\nconst defaultStatSparkShape = 'line' satisfies StatSparkShape\n\nconst statSparkRecipe = cva('order-5 mt-2 h-7 w-full basis-full')\n\nconst statChangeRecipe = cva([\n  'relative order-2 m-0 ml-auto inline-flex items-center gap-1',\n  'tf-edge-sweep rounded-tf-pill bg-tf-panel px-2 py-1 blend-tf-accent',\n  'text-tf-caption-sm font-normal whitespace-nowrap text-tf-accent-hi tabular-nums',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n])\n\nconst statTermRecipe = cva('sr-only')\n\nexport {\n  type StatAccent,\n  type StatDirection,\n  type StatSparkShape,\n  type StatSurface,\n  defaultStatAccent,\n  defaultStatSparkShape,\n  defaultStatSurface,\n  statAccents,\n  statChangeRecipe,\n  statDirections,\n  statFigureRecipe,\n  statHintRecipe,\n  statLabelRecipe,\n  statRecipe,\n  statSparkRecipe,\n  statSparkShapes,\n  statStackRecipe,\n  statSurfaces,\n  statTermRecipe,\n  statUnitRecipe,\n  statValueRecipe,\n}\n"],"mappings":";;;;;AAQA,MAAM,cAAc;AAIpB,MAAM,iBAAiB,CAAC,MAAM,MAAM;AAIpC,MAAM,oBAAoB;AAE1B,MAAM,QAAQ;AAId,MAAM,eAAe,CAAC,SAAS,MAAM;AAErC,MAAM,qBAAqB;AAE3B,MAAM,aAAa,IACjB;CACE;CACA;CACA;AACF,GACA;CACE,iBAAiB;EAAE,QAAQ;EAAmB,SAAS;CAAmB;CAC1E,UAAU;EACR,QAAQ;EACR,SAAS;GACP,MAAM;GACN,OAAO;IACL;IACA;IACA;GACF,CAAC,CAAC,KAAK,GAAG;EACZ;CACF;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,0DAA0D;AAEtF,MAAM,kBAAkB,IAAI,CAAC,qDAAqD,CAAC;AAEnF,MAAM,mBAAmB,IAAI,8DAA8D;AAE3F,MAAM,kBAAkB,IAAI,CAC1B,yEACA,wBACF,CAAC;AAED,MAAM,iBAAiB,IAAI,qDAAqD;AAEhF,MAAM,iBAAiB,IAAI,qDAAqD;AAEhF,MAAM,kBAAkB,CAAC,QAAQ,MAAM;AAIvC,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB,IAAI,oCAAoC;AAEhE,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,SAAS"}

package/dist/recipes/switch.d.ts

@@ -0,0 +1,20 @@
+import { Tone } from "../tone.js";
+//#region src/recipes/switch.d.ts
+declare const switchAccents: readonly ["accent", "success", "warning", "info", "danger"];
+type SwitchAccent = Tone;
+declare const defaultSwitchAccent = "accent";
+declare const switchRecipe: (props?: ({
+  plate?: "full" | "snug" | "bare" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const switchControlRecipe: (props?: ({
+  accent?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const switchThumbRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const switchLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const switchTitleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const switchHintRecipe: (props?: ({
+  invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { type SwitchAccent, defaultSwitchAccent, switchAccents, switchControlRecipe, switchHintRecipe, switchLabelRecipe, switchRecipe, switchThumbRecipe, switchTitleRecipe };
+//# sourceMappingURL=switch.d.ts.map

package/dist/recipes/switch.js

@@ -0,0 +1,60 @@
+import { defaultMarkPlate } from "../mark.js";
+import { toneBlend } from "../tone.js";
+import { defaultTone, tones } from "../parts/tone.js";
+import { markFace, markKnob, markPlate, markPlated, markPress, markRow, markStack, markTitle } from "../parts/mark.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/switch.ts
+const switchAccents = tones;
+const defaultSwitchAccent = defaultTone;
+const TRACK = [
+	"box-border justify-start rounded-tf-control",
+	"w-[calc(var(--spacing-tf-icon-lg)*2)]",
+	"h-[calc(var(--spacing-tf-icon-md)+2*var(--spacing-tf-mark-inset))]",
+	"p-tf-mark-inset"
+];
+const FILL = ["bg-tf-panel", "tf-ramp"];
+const OFF = ["data-[state=unchecked]:interactive:not-data-readonly:hovered:bg-tf-panel-hi"];
+const ON = [
+	"data-[state=checked]:tf-mark-lit",
+	"data-[state=checked]:tf-mark-glowing",
+	"data-[state=checked]:bg-tf-blend",
+	"data-[state=checked]:interactive:not-data-readonly:hovered:tf-blended"
+];
+const switchRecipe = cva([...markRow, "justify-between gap-6"], {
+	defaultVariants: { plate: defaultMarkPlate },
+	variants: { plate: {
+		bare: `${markPlate.bare} ${markPlated.bare}`,
+		full: `${markPlate.full} ${markPlated.full}`,
+		snug: `${markPlate.snug} ${markPlated.snug}`
+	} }
+});
+const switchControlRecipe = cva([
+	...markFace,
+	...TRACK,
+	...FILL,
+	...OFF,
+	...ON,
+	"data-invalid:blend-tf-danger data-invalid:tf-mark-failed"
+], {
+	defaultVariants: { accent: defaultSwitchAccent },
+	variants: { accent: toneBlend }
+});
+const switchThumbRecipe = cva([
+	...markKnob,
+	"size-tf-icon-md",
+	"data-[state=checked]:translate-x-tf-icon-sm",
+	markPress
+]);
+const switchLabelRecipe = cva(markStack);
+const switchTitleRecipe = cva(markTitle);
+const switchHintRecipe = cva("text-tf-caption font-medium", {
+	defaultVariants: { invalid: false },
+	variants: { invalid: {
+		false: "text-tf-muted",
+		true: "text-tf-danger-hi tf-arrives"
+	} }
+});
+//#endregion
+export { defaultSwitchAccent, switchAccents, switchControlRecipe, switchHintRecipe, switchLabelRecipe, switchRecipe, switchThumbRecipe, switchTitleRecipe };
+
+//# sourceMappingURL=switch.js.map

package/dist/recipes/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":[],"sources":["../../src/recipes/switch.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { MarkPlate } from '#mark'\nimport { defaultMarkPlate } from '#mark'\nimport {\n  markFace,\n  markKnob,\n  markPlate,\n  markPlated,\n  markPress,\n  markRow,\n  markStack,\n  markTitle,\n} from '#parts/mark'\nimport { defaultTone, tones } from '#parts/tone'\nimport type { Tone } from '#tone'\nimport { toneBlend } from '#tone'\n\nconst switchAccents = tones\n\ntype SwitchAccent = Tone\n\nconst defaultSwitchAccent = defaultTone\n\nconst TRACK = [\n  'box-border justify-start rounded-tf-control',\n  'w-[calc(var(--spacing-tf-icon-lg)*2)]',\n  'h-[calc(var(--spacing-tf-icon-md)+2*var(--spacing-tf-mark-inset))]',\n  'p-tf-mark-inset',\n]\n\nconst FILL = ['bg-tf-panel', 'tf-ramp']\n\nconst OFF = ['data-[state=unchecked]:interactive:not-data-readonly:hovered:bg-tf-panel-hi']\n\nconst ON = [\n  'data-[state=checked]:tf-mark-lit',\n  'data-[state=checked]:tf-mark-glowing',\n  'data-[state=checked]:bg-tf-blend',\n  'data-[state=checked]:interactive:not-data-readonly:hovered:tf-blended',\n]\n\nconst switchRecipe = cva([...markRow, 'justify-between gap-6'], {\n  defaultVariants: { plate: defaultMarkPlate },\n  variants: {\n    plate: {\n      bare: `${markPlate.bare} ${markPlated.bare}`,\n      full: `${markPlate.full} ${markPlated.full}`,\n      snug: `${markPlate.snug} ${markPlated.snug}`,\n    } satisfies Record<MarkPlate, string>,\n  },\n})\n\nconst switchControlRecipe = cva(\n  [\n    ...markFace,\n    ...TRACK,\n    ...FILL,\n    ...OFF,\n    ...ON,\n    'data-invalid:blend-tf-danger data-invalid:tf-mark-failed',\n  ],\n  {\n    defaultVariants: { accent: defaultSwitchAccent },\n    variants: { accent: toneBlend },\n  },\n)\n\nconst switchThumbRecipe = cva([\n  ...markKnob,\n  'size-tf-icon-md',\n  'data-[state=checked]:translate-x-tf-icon-sm',\n  markPress,\n])\n\nconst switchLabelRecipe = cva(markStack)\n\nconst switchTitleRecipe = cva(markTitle)\n\nconst switchHintRecipe = cva('text-tf-caption font-medium', {\n  defaultVariants: { invalid: false },\n  variants: {\n    invalid: { false: 'text-tf-muted', true: 'text-tf-danger-hi tf-arrives' },\n  },\n})\n\nexport {\n  type SwitchAccent,\n  defaultSwitchAccent,\n  switchAccents,\n  switchControlRecipe,\n  switchHintRecipe,\n  switchLabelRecipe,\n  switchRecipe,\n  switchThumbRecipe,\n  switchTitleRecipe,\n}\n"],"mappings":";;;;;;AAkBA,MAAM,gBAAgB;AAItB,MAAM,sBAAsB;AAE5B,MAAM,QAAQ;CACZ;CACA;CACA;CACA;AACF;AAEA,MAAM,OAAO,CAAC,eAAe,SAAS;AAEtC,MAAM,MAAM,CAAC,6EAA6E;AAE1F,MAAM,KAAK;CACT;CACA;CACA;CACA;AACF;AAEA,MAAM,eAAe,IAAI,CAAC,GAAG,SAAS,uBAAuB,GAAG;CAC9D,iBAAiB,EAAE,OAAO,iBAAiB;CAC3C,UAAU,EACR,OAAO;EACL,MAAM,GAAG,UAAU,KAAK,GAAG,WAAW;EACtC,MAAM,GAAG,UAAU,KAAK,GAAG,WAAW;EACtC,MAAM,GAAG,UAAU,KAAK,GAAG,WAAW;CACxC,EACF;AACF,CAAC;AAED,MAAM,sBAAsB,IAC1B;CACE,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH;AACF,GACA;CACE,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EAAE,QAAQ,UAAU;AAChC,CACF;AAEA,MAAM,oBAAoB,IAAI;CAC5B,GAAG;CACH;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,SAAS;AAEvC,MAAM,oBAAoB,IAAI,SAAS;AAEvC,MAAM,mBAAmB,IAAI,+BAA+B;CAC1D,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EAAE,OAAO;EAAiB,MAAM;CAA+B,EAC1E;AACF,CAAC"}