@techfides/ui-library-design 0.5.0 → 0.8.0

package/dist/recipes/sidebar.js

@@ -1,7 +1,8 @@
+import { anatomy } from "../anatomy.js";
 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 { eyebrowLead } from "../parts/eyebrow.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/sidebar.ts
 const CHILD_INSET = "pl-11";
@@ -122,7 +123,129 @@ const sidebarDotRecipe = cva([
 ]);
 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");
+const sidebarAnatomy = anatomy({
+	brand: {
+		part: "brand",
+		recipe: sidebarBrandRecipe,
+		required: true
+	},
+	brandStack: {
+		part: "brand-stack",
+		recipe: sidebarBrandStackRecipe,
+		required: true
+	},
+	brandSubtitle: {
+		part: "brand-subtitle",
+		recipe: sidebarBrandSubtitleRecipe,
+		required: false
+	},
+	child: {
+		part: "child",
+		recipe: sidebarItemRecipe,
+		required: false
+	},
+	dot: {
+		part: "dot",
+		recipe: sidebarDotRecipe,
+		required: false
+	},
+	foot: {
+		part: "foot",
+		recipe: sidebarFootRecipe,
+		required: true
+	},
+	head: {
+		part: "head",
+		recipe: sidebarHeadRecipe,
+		required: true
+	},
+	item: {
+		part: "item",
+		recipe: sidebarItemRecipe,
+		required: false
+	},
+	label: {
+		part: "label",
+		recipe: sidebarLabelRecipe,
+		required: true
+	},
+	mark: {
+		part: "mark",
+		recipe: sidebarMarkRecipe,
+		required: true
+	},
+	mobileBar: {
+		part: "mobile-bar",
+		recipe: sidebarMobileBarRecipe,
+		required: true
+	},
+	mobileEyebrow: {
+		part: "mobile-eyebrow",
+		recipe: sidebarMobileEyebrowRecipe,
+		required: false
+	},
+	mobileHeadings: {
+		part: "mobile-headings",
+		recipe: sidebarMobileHeadingsRecipe,
+		required: false
+	},
+	mobileTitle: {
+		part: "mobile-title",
+		recipe: sidebarMobileTitleRecipe,
+		required: false
+	},
+	nav: {
+		part: "nav",
+		recipe: sidebarNavRecipe,
+		required: true
+	},
+	overlayBody: {
+		part: "overlay-body",
+		recipe: sidebarOverlayBodyRecipe,
+		required: true
+	},
+	overlayBrand: {
+		part: "overlay-brand",
+		recipe: sidebarOverlayBrandRecipe,
+		required: true
+	},
+	overlayHead: {
+		part: "overlay-head",
+		recipe: sidebarOverlayHeadRecipe,
+		required: true
+	},
+	overlayScope: {
+		part: "overlay-scope",
+		recipe: sidebarOverlayScopeRecipe,
+		required: false
+	},
+	root: {
+		part: "sidebar",
+		recipe: sidebarRecipe,
+		required: true
+	},
+	scope: {
+		part: "scope",
+		recipe: sidebarScopeRecipe,
+		required: false
+	},
+	separator: {
+		part: "separator",
+		recipe: sidebarOverlaySeparatorRecipe,
+		required: true
+	},
+	switch: {
+		part: "switch",
+		recipe: sidebarSwitchRecipe,
+		required: true
+	},
+	wordmark: {
+		part: "wordmark",
+		recipe: sidebarWordmarkRecipe,
+		required: true
+	}
+});
 //#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 };
+export { sidebarAnatomy, 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

@@ -1 +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"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/recipes/sidebar.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\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\nconst sidebarAnatomy = anatomy({\n  brand: { part: 'brand', recipe: sidebarBrandRecipe, required: true },\n  brandStack: { part: 'brand-stack', recipe: sidebarBrandStackRecipe, required: true },\n  brandSubtitle: { part: 'brand-subtitle', recipe: sidebarBrandSubtitleRecipe, required: false },\n  child: { part: 'child', recipe: sidebarItemRecipe, required: false },\n  dot: { part: 'dot', recipe: sidebarDotRecipe, required: false },\n  foot: { part: 'foot', recipe: sidebarFootRecipe, required: true },\n  head: { part: 'head', recipe: sidebarHeadRecipe, required: true },\n  item: { part: 'item', recipe: sidebarItemRecipe, required: false },\n  label: { part: 'label', recipe: sidebarLabelRecipe, required: true },\n  mark: { part: 'mark', recipe: sidebarMarkRecipe, required: true },\n  mobileBar: { part: 'mobile-bar', recipe: sidebarMobileBarRecipe, required: true },\n  mobileEyebrow: { part: 'mobile-eyebrow', recipe: sidebarMobileEyebrowRecipe, required: false },\n  mobileHeadings: {\n    part: 'mobile-headings',\n    recipe: sidebarMobileHeadingsRecipe,\n    required: false,\n  },\n  mobileTitle: { part: 'mobile-title', recipe: sidebarMobileTitleRecipe, required: false },\n  nav: { part: 'nav', recipe: sidebarNavRecipe, required: true },\n  overlayBody: { part: 'overlay-body', recipe: sidebarOverlayBodyRecipe, required: true },\n  overlayBrand: { part: 'overlay-brand', recipe: sidebarOverlayBrandRecipe, required: true },\n  overlayHead: { part: 'overlay-head', recipe: sidebarOverlayHeadRecipe, required: true },\n  overlayScope: { part: 'overlay-scope', recipe: sidebarOverlayScopeRecipe, required: false },\n  root: { part: 'sidebar', recipe: sidebarRecipe, required: true },\n  scope: { part: 'scope', recipe: sidebarScopeRecipe, required: false },\n  separator: { part: 'separator', recipe: sidebarOverlaySeparatorRecipe, required: true },\n  switch: { part: 'switch', recipe: sidebarSwitchRecipe, required: true },\n  wordmark: { part: 'wordmark', recipe: sidebarWordmarkRecipe, required: true },\n})\n\nexport {\n  sidebarAnatomy,\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":"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"}

package/dist/recipes/sky.d.ts

@@ -15,6 +15,36 @@ declare const starRecipe: (props?: import("class-variance-authority/types").Clas
 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;
+declare const skyAnatomy: {
+  readonly content: {
+    readonly part: "content";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly nebula: {
+    readonly part: "nebula";
+    readonly recipe: (props?: ({
+      origin?: "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left" | "top-left" | null | undefined;
+      tone?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "sky";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly star: {
+    readonly part: "star";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly stars: {
+    readonly part: "stars";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type Cloud, type StarLayer, cloudDrift, contentRecipe, driftRecipe, skyRecipe, starLayers, starRecipe };
+export { type Cloud, type StarLayer, cloudDrift, contentRecipe, driftRecipe, skyAnatomy, skyRecipe, starLayers, starRecipe };
 //# sourceMappingURL=sky.d.ts.map

package/dist/recipes/sky.js

@@ -1,3 +1,5 @@
+import { anatomy } from "../anatomy.js";
+import { nebulaRecipe } from "./nebula.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/sky.ts
 const DIM = 1;
@@ -121,7 +123,34 @@ const cloudDrift = (seed) => {
 		shift: `${String(across)}% ${String(down)}%`
 	};
 };
+const skyAnatomy = anatomy({
+	content: {
+		part: "content",
+		recipe: contentRecipe,
+		required: true
+	},
+	nebula: {
+		part: "nebula",
+		recipe: nebulaRecipe,
+		required: true
+	},
+	root: {
+		part: "sky",
+		recipe: skyRecipe,
+		required: true
+	},
+	star: {
+		part: "star",
+		recipe: starRecipe,
+		required: true
+	},
+	stars: {
+		part: "stars",
+		recipe: driftRecipe,
+		required: true
+	}
+});
 //#endregion
-export { cloudDrift, contentRecipe, driftRecipe, skyRecipe, starLayers, starRecipe };
+export { cloudDrift, contentRecipe, driftRecipe, skyAnatomy, skyRecipe, starLayers, starRecipe };
 
 //# sourceMappingURL=sky.js.map

package/dist/recipes/sky.js.map

@@ -1 +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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"}
+{"version":3,"file":"sky.js","names":[],"sources":["../../src/recipes/sky.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nimport { nebulaRecipe } from './nebula'\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\nconst skyAnatomy = anatomy({\n  content: { part: 'content', recipe: contentRecipe, required: true },\n  nebula: { part: 'nebula', recipe: nebulaRecipe, required: true },\n  root: { part: 'sky', recipe: skyRecipe, required: true },\n  star: { part: 'star', recipe: starRecipe, required: true },\n  stars: { part: 'stars', recipe: driftRecipe, required: true },\n})\n\nexport {\n  type Cloud,\n  type StarLayer,\n  cloudDrift,\n  contentRecipe,\n  driftRecipe,\n  skyAnatomy,\n  skyRecipe,\n  starLayers,\n  starRecipe,\n}\n"],"mappings":"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"}

package/dist/recipes/slider.d.ts

@@ -17,6 +17,20 @@ 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;
+declare const sliderAnatomy: {
+  readonly bounds: {
+    readonly part: "bounds";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "slider";
+    readonly recipe: (props?: ({
+      fullWidth?: boolean | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { sliderBoundsRecipe, sliderControlRecipe, sliderFootRecipe, sliderHeadRecipe, sliderHintRecipe, sliderKnobSize, sliderLabelRecipe, sliderNotchRecipe, sliderNotchesRecipe, sliderRangeRecipe, sliderRecipe, sliderThumbRecipe, sliderTrackRecipe, sliderValueRecipe };
+export { sliderAnatomy, sliderBoundsRecipe, sliderControlRecipe, sliderFootRecipe, sliderHeadRecipe, sliderHintRecipe, sliderKnobSize, sliderLabelRecipe, sliderNotchRecipe, sliderNotchesRecipe, sliderRangeRecipe, sliderRecipe, sliderThumbRecipe, sliderTrackRecipe, sliderValueRecipe };
 //# sourceMappingURL=slider.d.ts.map

package/dist/recipes/slider.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { controlReach } from "../parts/control.js";
 import { markKnob } from "../parts/mark.js";
 import { cva } from "class-variance-authority";
@@ -62,7 +63,19 @@ const sliderHintRecipe = cva("text-tf-caption font-medium", {
 	} }
 });
 const sliderBoundsRecipe = cva("ms-auto shrink-0 text-tf-caption font-medium text-tf-muted tabular-nums");
+const sliderAnatomy = anatomy({
+	bounds: {
+		part: "bounds",
+		recipe: sliderBoundsRecipe,
+		required: true
+	},
+	root: {
+		part: "slider",
+		recipe: sliderRecipe,
+		required: true
+	}
+});
 //#endregion
-export { sliderBoundsRecipe, sliderControlRecipe, sliderFootRecipe, sliderHeadRecipe, sliderHintRecipe, sliderKnobSize, sliderLabelRecipe, sliderNotchRecipe, sliderNotchesRecipe, sliderRangeRecipe, sliderRecipe, sliderThumbRecipe, sliderTrackRecipe, sliderValueRecipe };
+export { sliderAnatomy, sliderBoundsRecipe, sliderControlRecipe, sliderFootRecipe, sliderHeadRecipe, sliderHintRecipe, sliderKnobSize, sliderLabelRecipe, sliderNotchRecipe, sliderNotchesRecipe, sliderRangeRecipe, sliderRecipe, sliderThumbRecipe, sliderTrackRecipe, sliderValueRecipe };
 
 //# sourceMappingURL=slider.js.map

package/dist/recipes/slider.js.map

@@ -1 +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  [\n    'flex w-full 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  {\n    defaultVariants: { fullWidth: false },\n    variants: {\n      fullWidth: { false: 'max-w-tf-panel', true: '' },\n    },\n  },\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,IACnB;CACE;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,WAAW,MAAM;CACpC,UAAU,EACR,WAAW;EAAE,OAAO;EAAkB,MAAM;CAAG,EACjD;AACF,CACF;AAEA,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"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/recipes/slider.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { controlReach } from '#parts/control'\nimport { markKnob } from '#parts/mark'\n\nconst sliderKnobSize = 20\n\nconst sliderRecipe = cva(\n  [\n    'flex w-full 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  {\n    defaultVariants: { fullWidth: false },\n    variants: {\n      fullWidth: { false: 'max-w-tf-panel', true: '' },\n    },\n  },\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\nconst sliderAnatomy = anatomy({\n  bounds: { part: 'bounds', recipe: sliderBoundsRecipe, required: true },\n  root: { part: 'slider', recipe: sliderRecipe, required: true },\n})\n\nexport {\n  sliderAnatomy,\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":";;;;;AAMA,MAAM,iBAAiB;AAEvB,MAAM,eAAe,IACnB;CACE;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,WAAW,MAAM;CACpC,UAAU,EACR,WAAW;EAAE,OAAO;EAAkB,MAAM;CAAG,EACjD;AACF,CACF;AAEA,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;AAEA,MAAM,gBAAgB,QAAQ;CAC5B,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAoB,UAAU;CAAK;CACrE,MAAM;EAAE,MAAM;EAAU,QAAQ;EAAc,UAAU;CAAK;AAC/D,CAAC"}

package/dist/recipes/stat.d.ts

@@ -24,6 +24,76 @@ 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;
+declare const statAnatomy: {
+  readonly badge: {
+    readonly part: "badge";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly change: {
+    readonly part: "change";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly counted: {
+    readonly part: "counted";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly figure: {
+    readonly part: "figure";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly hint: {
+    readonly part: "hint";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly label: {
+    readonly part: "label";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "stat";
+    readonly recipe: (props?: ({
+      accent?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+      surface?: "glass" | "flat" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly spark: {
+    readonly part: "spark";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly stack: {
+    readonly part: "stack";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly term: {
+    readonly part: "term";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly unit: {
+    readonly part: "unit";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly value: {
+    readonly part: "value";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly way: {
+    readonly part: "way";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+};
 //#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 };
+export { type StatAccent, type StatDirection, type StatSparkShape, type StatSurface, defaultStatAccent, defaultStatSparkShape, defaultStatSurface, statAccents, statAnatomy, statChangeRecipe, statDirections, statFigureRecipe, statHintRecipe, statLabelRecipe, statRecipe, statSparkRecipe, statSparkShapes, statStackRecipe, statSurfaces, statTermRecipe, statUnitRecipe, statValueRecipe };
 //# sourceMappingURL=stat.d.ts.map

package/dist/recipes/stat.js

@@ -1,6 +1,7 @@
-import { toneBlend } from "../tone.js";
-import { defaultTone, tones } from "../parts/tone.js";
+import { anatomy } from "../anatomy.js";
 import { tileRoused } from "../parts/rouse.js";
+import { defaultTone, tones } from "../parts/tone.js";
+import { toneBlend } from "../tone.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/stat.ts
 const statAccents = tones;
@@ -46,7 +47,76 @@ const statChangeRecipe = cva([
 	"tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0"
 ]);
 const statTermRecipe = cva("sr-only");
+const statBadgeRecipe = cva("absolute top-4 right-4");
+const statCountedRecipe = cva("");
+const statAnatomy = anatomy({
+	badge: {
+		part: "badge",
+		recipe: statBadgeRecipe,
+		required: false
+	},
+	change: {
+		part: "change",
+		recipe: statChangeRecipe,
+		required: false
+	},
+	counted: {
+		part: "counted",
+		recipe: statCountedRecipe,
+		required: true
+	},
+	figure: {
+		part: "figure",
+		recipe: statFigureRecipe,
+		required: true
+	},
+	hint: {
+		part: "hint",
+		recipe: statHintRecipe,
+		required: false
+	},
+	label: {
+		part: "label",
+		recipe: statLabelRecipe,
+		required: true
+	},
+	root: {
+		part: "stat",
+		recipe: statRecipe,
+		required: true
+	},
+	spark: {
+		part: "spark",
+		recipe: statSparkRecipe,
+		required: false
+	},
+	stack: {
+		part: "stack",
+		recipe: statStackRecipe,
+		required: true
+	},
+	term: {
+		part: "term",
+		recipe: statTermRecipe,
+		required: false
+	},
+	unit: {
+		part: "unit",
+		recipe: statUnitRecipe,
+		required: false
+	},
+	value: {
+		part: "value",
+		recipe: statValueRecipe,
+		required: true
+	},
+	way: {
+		part: "way",
+		recipe: statTermRecipe,
+		required: false
+	}
+});
 //#endregion
-export { defaultStatAccent, defaultStatSparkShape, defaultStatSurface, statAccents, statChangeRecipe, statDirections, statFigureRecipe, statHintRecipe, statLabelRecipe, statRecipe, statSparkRecipe, statSparkShapes, statStackRecipe, statSurfaces, statTermRecipe, statUnitRecipe, statValueRecipe };
+export { defaultStatAccent, defaultStatSparkShape, defaultStatSurface, statAccents, statAnatomy, statChangeRecipe, statDirections, statFigureRecipe, statHintRecipe, statLabelRecipe, statRecipe, statSparkRecipe, statSparkShapes, statStackRecipe, statSurfaces, statTermRecipe, statUnitRecipe, statValueRecipe };
 
 //# sourceMappingURL=stat.js.map

package/dist/recipes/stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat.js","names":[],"sources":["../../src/recipes/stat.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\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\n\ntype StatSparkShape = (typeof statSparkShapes)[number]\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":";;;;;AAOA,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"}
+{"version":3,"file":"stat.js","names":[],"sources":["../../src/recipes/stat.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\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\n\ntype StatSparkShape = (typeof statSparkShapes)[number]\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\nconst statBadgeRecipe = cva('absolute top-4 right-4')\n\nconst statCountedRecipe = cva('')\n\nconst statAnatomy = anatomy({\n  badge: { part: 'badge', recipe: statBadgeRecipe, required: false },\n  change: { part: 'change', recipe: statChangeRecipe, required: false },\n  counted: { part: 'counted', recipe: statCountedRecipe, required: true },\n  figure: { part: 'figure', recipe: statFigureRecipe, required: true },\n  hint: { part: 'hint', recipe: statHintRecipe, required: false },\n  label: { part: 'label', recipe: statLabelRecipe, required: true },\n  root: { part: 'stat', recipe: statRecipe, required: true },\n  spark: { part: 'spark', recipe: statSparkRecipe, required: false },\n  stack: { part: 'stack', recipe: statStackRecipe, required: true },\n  term: { part: 'term', recipe: statTermRecipe, required: false },\n  unit: { part: 'unit', recipe: statUnitRecipe, required: false },\n  value: { part: 'value', recipe: statValueRecipe, required: true },\n  way: { part: 'way', recipe: statTermRecipe, required: false },\n})\n\nexport {\n  type StatAccent,\n  type StatDirection,\n  type StatSparkShape,\n  type StatSurface,\n  defaultStatAccent,\n  defaultStatSparkShape,\n  defaultStatSurface,\n  statAccents,\n  statAnatomy,\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;AAEpC,MAAM,kBAAkB,IAAI,wBAAwB;AAEpD,MAAM,oBAAoB,IAAI,EAAE;AAEhC,MAAM,cAAc,QAAQ;CAC1B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAM;CACjE,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAkB,UAAU;CAAM;CACpE,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAmB,UAAU;CAAK;CACtE,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAkB,UAAU;CAAK;CACnE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAM;CAC9D,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAY,UAAU;CAAK;CACzD,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAM;CACjE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAM;CAC9D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAM;CAC9D,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAK;CAChE,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAgB,UAAU;CAAM;AAC9D,CAAC"}

package/dist/recipes/switch.d.ts

@@ -15,6 +15,15 @@ declare const switchTitleRecipe: (props?: import("class-variance-authority/types
 declare const switchHintRecipe: (props?: ({
   invalid?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const switchAnatomy: {
+  readonly root: {
+    readonly part: "switch";
+    readonly recipe: (props?: ({
+      plate?: "full" | "snug" | "bare" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type SwitchAccent, defaultSwitchAccent, switchAccents, switchControlRecipe, switchHintRecipe, switchLabelRecipe, switchRecipe, switchThumbRecipe, switchTitleRecipe };
+export { type SwitchAccent, defaultSwitchAccent, switchAccents, switchAnatomy, switchControlRecipe, switchHintRecipe, switchLabelRecipe, switchRecipe, switchThumbRecipe, switchTitleRecipe };
 //# sourceMappingURL=switch.d.ts.map

package/dist/recipes/switch.js

@@ -1,6 +1,7 @@
-import { defaultMarkPlate } from "../mark.js";
-import { toneBlend } from "../tone.js";
+import { anatomy } from "../anatomy.js";
 import { defaultTone, tones } from "../parts/tone.js";
+import { toneBlend } from "../tone.js";
+import { defaultMarkPlate } from "../mark.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
@@ -54,7 +55,12 @@ const switchHintRecipe = cva("text-tf-caption font-medium", {
 		true: "text-tf-danger-hi tf-arrives"
 	} }
 });
+const switchAnatomy = anatomy({ root: {
+	part: "switch",
+	recipe: switchRecipe,
+	required: true
+} });
 //#endregion
-export { defaultSwitchAccent, switchAccents, switchControlRecipe, switchHintRecipe, switchLabelRecipe, switchRecipe, switchThumbRecipe, switchTitleRecipe };
+export { defaultSwitchAccent, switchAccents, switchAnatomy, switchControlRecipe, switchHintRecipe, switchLabelRecipe, switchRecipe, switchThumbRecipe, switchTitleRecipe };
 
 //# sourceMappingURL=switch.js.map

package/dist/recipes/switch.js.map

@@ -1 +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"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../src/recipes/switch.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\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\nconst switchAnatomy = anatomy({\n  root: { part: 'switch', recipe: switchRecipe, required: true },\n})\n\nexport {\n  type SwitchAccent,\n  defaultSwitchAccent,\n  switchAccents,\n  switchAnatomy,\n  switchControlRecipe,\n  switchHintRecipe,\n  switchLabelRecipe,\n  switchRecipe,\n  switchThumbRecipe,\n  switchTitleRecipe,\n}\n"],"mappings":";;;;;;;AAmBA,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;AAED,MAAM,gBAAgB,QAAQ,EAC5B,MAAM;CAAE,MAAM;CAAU,QAAQ;CAAc,UAAU;AAAK,EAC/D,CAAC"}