@techfides/ui-library-design 0.5.0 → 0.8.0

package/dist/recipes/searchPalette.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { controlInert, controlPress, controlReach } from "../parts/control.js";
 import { ruleFading } from "../parts/rule.js";
 import { mirrorMotion } from "./motion.js";
@@ -57,7 +58,54 @@ const searchFootRecipe = cva([
 	"flex items-center justify-between gap-3 rounded-b-tf-card px-5 py-3",
 	"text-tf-caption-sm text-tf-muted"
 ]);
+const searchPaletteAnatomy = anatomy({
+	empty: {
+		part: "empty",
+		recipe: searchEmptyRecipe,
+		required: false
+	},
+	foot: {
+		part: "foot",
+		recipe: searchFootRecipe,
+		required: true
+	},
+	hint: {
+		part: "hint",
+		recipe: searchFootRecipe,
+		required: true
+	},
+	mark: {
+		part: "mark",
+		recipe: searchMarkRecipe,
+		required: true
+	},
+	meta: {
+		part: "meta",
+		recipe: searchHitMetaRecipe,
+		required: false
+	},
+	root: {
+		part: "search-palette",
+		recipe: searchPanelRecipe,
+		required: true
+	},
+	rule: {
+		part: "rule",
+		recipe: searchRuleRecipe,
+		required: true
+	},
+	searchTrigger: {
+		part: "search-trigger",
+		recipe: searchTriggerRecipe,
+		required: true
+	},
+	shortcut: {
+		part: "shortcut",
+		recipe: searchKeyRecipe,
+		required: false
+	}
+});
 //#endregion
-export { searchEmptyRecipe, searchFieldRecipe, searchFootRecipe, searchHitMetaRecipe, searchHitRecipe, searchHitTextRecipe, searchInputRecipe, searchKeyRecipe, searchLabelRecipe, searchListRecipe, searchMarkRecipe, searchPanelRecipe, searchPositionerRecipe, searchRuleRecipe, searchTriggerRecipe };
+export { searchEmptyRecipe, searchFieldRecipe, searchFootRecipe, searchHitMetaRecipe, searchHitRecipe, searchHitTextRecipe, searchInputRecipe, searchKeyRecipe, searchLabelRecipe, searchListRecipe, searchMarkRecipe, searchPaletteAnatomy, searchPanelRecipe, searchPositionerRecipe, searchRuleRecipe, searchTriggerRecipe };
 
 //# sourceMappingURL=searchPalette.js.map

package/dist/recipes/searchPalette.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchPalette.js","names":[],"sources":["../../src/recipes/searchPalette.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, controlReach } from '#parts/control'\nimport { ruleFading } from '#parts/rule'\nimport { scrollFades } from '#parts/scroll'\nimport { travelMarkBase } from '#parts/travel'\n\nimport { mirrorMotion } from './motion'\n\nconst GROUND = 'relative flex-none bg-tf-shade-under'\n\nconst searchTriggerRecipe = cva([\n  'relative isolate inline-flex h-tf-control-sm min-w-60 items-center gap-3',\n  'rounded-tf-control bg-tf-control pr-3 pl-3',\n  'font-tf-body text-tf-body-sm font-medium text-tf-muted',\n  'interactive:hovered:bg-tf-control-hi interactive:hovered:text-tf-fg',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  'cursor-pointer tf-transition motion-reduce:transition-none',\n  ...controlReach,\n  ...controlInert,\n])\n\nconst searchLabelRecipe = cva('min-w-0 flex-1 truncate text-left')\n\nconst searchKeyRecipe = cva([\n  'flex h-6 flex-none items-center rounded-tf-inline bg-tf-panel-hi px-2',\n  'text-tf-caption-sm font-normal text-tf-muted',\n])\n\nconst searchPositionerRecipe = cva([\n  'fixed inset-0 z-tf-modal flex items-start justify-center',\n  'px-4 pt-24 pb-10 font-tf-body sm:px-10',\n])\n\nconst searchPanelRecipe = cva([\n  'relative isolate rounded-tf-card bg-tf-shade-deep backdrop-blur-tf-panel',\n  'tf-edge-sweep tf-swept blend-tf-accent tf-edge-plain',\n  'flex max-h-full w-full max-w-tf-measure flex-col overflow-hidden',\n  'text-tf-body-sm font-medium text-tf-fg shadow-tf-float',\n  ...mirrorMotion,\n  'motion-reduce:animate-none',\n])\n\nconst searchFieldRecipe = cva([\n  GROUND,\n  'flex h-tf-control-lg items-center gap-3 rounded-t-tf-card px-5',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0 [&_svg]:text-tf-muted',\n])\n\nconst searchInputRecipe = cva([\n  'min-w-0 flex-1 border-0 bg-transparent outline-hidden',\n  'font-tf-body text-tf-body text-tf-fg placeholder:text-tf-muted',\n])\n\nconst searchRuleRecipe = cva(`absolute inset-x-0 bottom-0 ${ruleFading}`)\n\nconst searchListRecipe = cva([\n  'relative flex tf-scroll-hidden max-h-80 min-h-0 flex-col overflow-auto p-2',\n  'outline-hidden data-empty:hidden',\n  ...scrollFades,\n])\n\nconst searchHitRecipe = cva([\n  'relative flex h-tf-control-md min-h-tf-control-md flex-none items-center gap-4',\n  'rounded-tf-control px-3 text-left text-tf-fg',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0 [&_svg]:text-tf-muted',\n  'cursor-pointer tf-transition motion-reduce:transition-none',\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst searchMarkRecipe = cva([\n  ...travelMarkBase,\n  'inset-x-2 h-tf-control-md rounded-tf-control bg-tf-panel-hi',\n])\n\nconst searchHitTextRecipe = cva('min-w-0 flex-1 truncate')\n\nconst searchHitMetaRecipe = cva([\n  'flex-none text-tf-caption-sm whitespace-nowrap text-tf-muted tabular-nums',\n])\n\nconst searchEmptyRecipe = cva([\n  'flex h-tf-control-lg flex-none items-center justify-center px-3',\n  'bg-tf-panel-2 text-tf-caption font-medium text-tf-muted',\n])\n\nconst searchFootRecipe = cva([\n  GROUND,\n  'flex items-center justify-between gap-3 rounded-b-tf-card px-5 py-3',\n  'text-tf-caption-sm text-tf-muted',\n])\n\nexport {\n  searchEmptyRecipe,\n  searchFieldRecipe,\n  searchFootRecipe,\n  searchHitMetaRecipe,\n  searchHitRecipe,\n  searchHitTextRecipe,\n  searchInputRecipe,\n  searchKeyRecipe,\n  searchLabelRecipe,\n  searchListRecipe,\n  searchMarkRecipe,\n  searchPanelRecipe,\n  searchPositionerRecipe,\n  searchRuleRecipe,\n  searchTriggerRecipe,\n}\n"],"mappings":";;;;;;;AASA,MAAM,SAAS;AAEf,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,oBAAoB,IAAI,mCAAmC;AAEjE,MAAM,kBAAkB,IAAI,CAC1B,yEACA,8CACF,CAAC;AAED,MAAM,yBAAyB,IAAI,CACjC,4DACA,wCACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,yDACA,gEACF,CAAC;AAED,MAAM,mBAAmB,IAAI,+BAA+B,YAAY;AAExE,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,kBAAkB,IAAI;CAC1B;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,mBAAmB,IAAI,CAC3B,GAAG,gBACH,6DACF,CAAC;AAED,MAAM,sBAAsB,IAAI,yBAAyB;AAEzD,MAAM,sBAAsB,IAAI,CAC9B,2EACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,mEACA,yDACF,CAAC;AAED,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA;AACF,CAAC"}
+{"version":3,"file":"searchPalette.js","names":[],"sources":["../../src/recipes/searchPalette.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { controlInert, controlPress, controlReach } from '#parts/control'\nimport { ruleFading } from '#parts/rule'\nimport { scrollFades } from '#parts/scroll'\nimport { travelMarkBase } from '#parts/travel'\n\nimport { mirrorMotion } from './motion'\n\nconst GROUND = 'relative flex-none bg-tf-shade-under'\n\nconst searchTriggerRecipe = cva([\n  'relative isolate inline-flex h-tf-control-sm min-w-60 items-center gap-3',\n  'rounded-tf-control bg-tf-control pr-3 pl-3',\n  'font-tf-body text-tf-body-sm font-medium text-tf-muted',\n  'interactive:hovered:bg-tf-control-hi interactive:hovered:text-tf-fg',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  'cursor-pointer tf-transition motion-reduce:transition-none',\n  ...controlReach,\n  ...controlInert,\n])\n\nconst searchLabelRecipe = cva('min-w-0 flex-1 truncate text-left')\n\nconst searchKeyRecipe = cva([\n  'flex h-6 flex-none items-center rounded-tf-inline bg-tf-panel-hi px-2',\n  'text-tf-caption-sm font-normal text-tf-muted',\n])\n\nconst searchPositionerRecipe = cva([\n  'fixed inset-0 z-tf-modal flex items-start justify-center',\n  'px-4 pt-24 pb-10 font-tf-body sm:px-10',\n])\n\nconst searchPanelRecipe = cva([\n  'relative isolate rounded-tf-card bg-tf-shade-deep backdrop-blur-tf-panel',\n  'tf-edge-sweep tf-swept blend-tf-accent tf-edge-plain',\n  'flex max-h-full w-full max-w-tf-measure flex-col overflow-hidden',\n  'text-tf-body-sm font-medium text-tf-fg shadow-tf-float',\n  ...mirrorMotion,\n  'motion-reduce:animate-none',\n])\n\nconst searchFieldRecipe = cva([\n  GROUND,\n  'flex h-tf-control-lg items-center gap-3 rounded-t-tf-card px-5',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0 [&_svg]:text-tf-muted',\n])\n\nconst searchInputRecipe = cva([\n  'min-w-0 flex-1 border-0 bg-transparent outline-hidden',\n  'font-tf-body text-tf-body text-tf-fg placeholder:text-tf-muted',\n])\n\nconst searchRuleRecipe = cva(`absolute inset-x-0 bottom-0 ${ruleFading}`)\n\nconst searchListRecipe = cva([\n  'relative flex tf-scroll-hidden max-h-80 min-h-0 flex-col overflow-auto p-2',\n  'outline-hidden data-empty:hidden',\n  ...scrollFades,\n])\n\nconst searchHitRecipe = cva([\n  'relative flex h-tf-control-md min-h-tf-control-md flex-none items-center gap-4',\n  'rounded-tf-control px-3 text-left text-tf-fg',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0 [&_svg]:text-tf-muted',\n  'cursor-pointer tf-transition motion-reduce:transition-none',\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst searchMarkRecipe = cva([\n  ...travelMarkBase,\n  'inset-x-2 h-tf-control-md rounded-tf-control bg-tf-panel-hi',\n])\n\nconst searchHitTextRecipe = cva('min-w-0 flex-1 truncate')\n\nconst searchHitMetaRecipe = cva([\n  'flex-none text-tf-caption-sm whitespace-nowrap text-tf-muted tabular-nums',\n])\n\nconst searchEmptyRecipe = cva([\n  'flex h-tf-control-lg flex-none items-center justify-center px-3',\n  'bg-tf-panel-2 text-tf-caption font-medium text-tf-muted',\n])\n\nconst searchFootRecipe = cva([\n  GROUND,\n  'flex items-center justify-between gap-3 rounded-b-tf-card px-5 py-3',\n  'text-tf-caption-sm text-tf-muted',\n])\n\nconst searchPaletteAnatomy = anatomy({\n  empty: { part: 'empty', recipe: searchEmptyRecipe, required: false },\n  foot: { part: 'foot', recipe: searchFootRecipe, required: true },\n  hint: { part: 'hint', recipe: searchFootRecipe, required: true },\n  mark: { part: 'mark', recipe: searchMarkRecipe, required: true },\n  meta: { part: 'meta', recipe: searchHitMetaRecipe, required: false },\n  root: { part: 'search-palette', recipe: searchPanelRecipe, required: true },\n  rule: { part: 'rule', recipe: searchRuleRecipe, required: true },\n  searchTrigger: { part: 'search-trigger', recipe: searchTriggerRecipe, required: true },\n  shortcut: { part: 'shortcut', recipe: searchKeyRecipe, required: false },\n})\n\nexport {\n  searchEmptyRecipe,\n  searchFieldRecipe,\n  searchFootRecipe,\n  searchHitMetaRecipe,\n  searchHitRecipe,\n  searchHitTextRecipe,\n  searchInputRecipe,\n  searchKeyRecipe,\n  searchLabelRecipe,\n  searchListRecipe,\n  searchMarkRecipe,\n  searchPaletteAnatomy,\n  searchPanelRecipe,\n  searchPositionerRecipe,\n  searchRuleRecipe,\n  searchTriggerRecipe,\n}\n"],"mappings":";;;;;;;;AAUA,MAAM,SAAS;AAEf,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,oBAAoB,IAAI,mCAAmC;AAEjE,MAAM,kBAAkB,IAAI,CAC1B,yEACA,8CACF,CAAC;AAED,MAAM,yBAAyB,IAAI,CACjC,4DACA,wCACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,yDACA,gEACF,CAAC;AAED,MAAM,mBAAmB,IAAI,+BAA+B,YAAY;AAExE,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,kBAAkB,IAAI;CAC1B;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,mBAAmB,IAAI,CAC3B,GAAG,gBACH,6DACF,CAAC;AAED,MAAM,sBAAsB,IAAI,yBAAyB;AAEzD,MAAM,sBAAsB,IAAI,CAC9B,2EACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,mEACA,yDACF,CAAC;AAED,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA;AACF,CAAC;AAED,MAAM,uBAAuB,QAAQ;CACnC,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAmB,UAAU;CAAM;CACnE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAkB,UAAU;CAAK;CAC/D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAkB,UAAU;CAAK;CAC/D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAkB,UAAU;CAAK;CAC/D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAqB,UAAU;CAAM;CACnE,MAAM;EAAE,MAAM;EAAkB,QAAQ;EAAmB,UAAU;CAAK;CAC1E,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAkB,UAAU;CAAK;CAC/D,eAAe;EAAE,MAAM;EAAkB,QAAQ;EAAqB,UAAU;CAAK;CACrF,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAiB,UAAU;CAAM;AACzE,CAAC"}

package/dist/recipes/sectionHeader.d.ts

@@ -4,12 +4,30 @@ type SectionHeaderEyebrow = 'lead' | 'quiet';
 declare const defaultSectionHeaderSize = "section";
 declare const sectionHeaderSizes: readonly ["section", "hero", "panel"];
 declare const sectionHeaderEyebrows: readonly ["lead", "quiet"];
-declare const sectionHeaderTones: readonly ["accent", "success", "warning", "info", "danger"];
 declare const restingEyebrow: (size: SectionHeaderSize) => SectionHeaderEyebrow;
 declare const sectionHeaderRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sectionHeaderLabelStackRecipe: (props?: ({
   size?: "panel" | "section" | "hero" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const sectionHeaderAnatomy: {
+  readonly actions: {
+    readonly part: "actions";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "section-header";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly stack: {
+    readonly part: "stack";
+    readonly recipe: (props?: ({
+      size?: "panel" | "section" | "hero" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type SectionHeaderEyebrow, type SectionHeaderSize, defaultSectionHeaderSize, restingEyebrow, sectionHeaderEyebrows, sectionHeaderLabelStackRecipe, sectionHeaderRecipe, sectionHeaderSizes, sectionHeaderTones };
+export { type SectionHeaderEyebrow, type SectionHeaderSize, defaultSectionHeaderSize, restingEyebrow, sectionHeaderAnatomy, sectionHeaderEyebrows, sectionHeaderLabelStackRecipe, sectionHeaderRecipe, sectionHeaderSizes };
 //# sourceMappingURL=sectionHeader.d.ts.map

package/dist/recipes/sectionHeader.js

@@ -1,4 +1,4 @@
-import { tones } from "../parts/tone.js";
+import { anatomy } from "../anatomy.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/sectionHeader.ts
 const defaultSectionHeaderSize = "section";
@@ -8,7 +8,6 @@ const sectionHeaderSizes = [
 	"panel"
 ];
 const sectionHeaderEyebrows = ["lead", "quiet"];
-const sectionHeaderTones = tones;
 const RESTING_EYEBROW = {
 	hero: "lead",
 	panel: "quiet",
@@ -24,7 +23,25 @@ const sectionHeaderLabelStackRecipe = cva("flex flex-col", {
 		section: "gap-4"
 	} }
 });
+const sectionHeaderActionsRecipe = cva("flex flex-wrap items-center gap-4");
+const sectionHeaderAnatomy = anatomy({
+	actions: {
+		part: "actions",
+		recipe: sectionHeaderActionsRecipe,
+		required: false
+	},
+	root: {
+		part: "section-header",
+		recipe: sectionHeaderRecipe,
+		required: true
+	},
+	stack: {
+		part: "stack",
+		recipe: sectionHeaderLabelStackRecipe,
+		required: true
+	}
+});
 //#endregion
-export { defaultSectionHeaderSize, restingEyebrow, sectionHeaderEyebrows, sectionHeaderLabelStackRecipe, sectionHeaderRecipe, sectionHeaderSizes, sectionHeaderTones };
+export { defaultSectionHeaderSize, restingEyebrow, sectionHeaderAnatomy, sectionHeaderEyebrows, sectionHeaderLabelStackRecipe, sectionHeaderRecipe, sectionHeaderSizes };
 
 //# sourceMappingURL=sectionHeader.js.map

package/dist/recipes/sectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"sectionHeader.js","names":[],"sources":["../../src/recipes/sectionHeader.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { tones } from '#parts/tone'\n\ntype SectionHeaderSize = 'section' | 'hero' | 'panel'\n\ntype SectionHeaderEyebrow = 'lead' | 'quiet'\n\nconst defaultSectionHeaderSize = 'section' satisfies SectionHeaderSize\n\nconst sectionHeaderSizes = [\n  'section',\n  'hero',\n  'panel',\n] as const satisfies readonly SectionHeaderSize[]\n\nconst sectionHeaderEyebrows = ['lead', 'quiet'] as const satisfies readonly SectionHeaderEyebrow[]\n\nconst sectionHeaderTones = tones\n\nconst RESTING_EYEBROW = {\n  hero: 'lead',\n  panel: 'quiet',\n  section: 'quiet',\n} satisfies Record<SectionHeaderSize, SectionHeaderEyebrow>\n\nconst restingEyebrow = (size: SectionHeaderSize): SectionHeaderEyebrow => RESTING_EYEBROW[size]\n\nconst sectionHeaderRecipe = cva('flex flex-col gap-6')\n\nconst sectionHeaderLabelStackRecipe = cva('flex flex-col', {\n  defaultVariants: { size: defaultSectionHeaderSize },\n  variants: {\n    size: {\n      hero: 'gap-4',\n      panel: 'gap-2',\n      section: 'gap-4',\n    } satisfies Record<SectionHeaderSize, string>,\n  },\n})\n\nexport {\n  type SectionHeaderEyebrow,\n  type SectionHeaderSize,\n  defaultSectionHeaderSize,\n  restingEyebrow,\n  sectionHeaderEyebrows,\n  sectionHeaderLabelStackRecipe,\n  sectionHeaderRecipe,\n  sectionHeaderSizes,\n  sectionHeaderTones,\n}\n"],"mappings":";;;AAQA,MAAM,2BAA2B;AAEjC,MAAM,qBAAqB;CACzB;CACA;CACA;AACF;AAEA,MAAM,wBAAwB,CAAC,QAAQ,OAAO;AAE9C,MAAM,qBAAqB;AAE3B,MAAM,kBAAkB;CACtB,MAAM;CACN,OAAO;CACP,SAAS;AACX;AAEA,MAAM,kBAAkB,SAAkD,gBAAgB;AAE1F,MAAM,sBAAsB,IAAI,qBAAqB;AAErD,MAAM,gCAAgC,IAAI,iBAAiB;CACzD,iBAAiB,EAAE,MAAM,yBAAyB;CAClD,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;EACP,SAAS;CACX,EACF;AACF,CAAC"}
+{"version":3,"file":"sectionHeader.js","names":[],"sources":["../../src/recipes/sectionHeader.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\ntype SectionHeaderSize = 'section' | 'hero' | 'panel'\n\ntype SectionHeaderEyebrow = 'lead' | 'quiet'\n\nconst defaultSectionHeaderSize = 'section' satisfies SectionHeaderSize\n\nconst sectionHeaderSizes = [\n  'section',\n  'hero',\n  'panel',\n] as const satisfies readonly SectionHeaderSize[]\n\nconst sectionHeaderEyebrows = ['lead', 'quiet'] as const satisfies readonly SectionHeaderEyebrow[]\n\nconst RESTING_EYEBROW = {\n  hero: 'lead',\n  panel: 'quiet',\n  section: 'quiet',\n} satisfies Record<SectionHeaderSize, SectionHeaderEyebrow>\n\nconst restingEyebrow = (size: SectionHeaderSize): SectionHeaderEyebrow => RESTING_EYEBROW[size]\n\nconst sectionHeaderRecipe = cva('flex flex-col gap-6')\n\nconst sectionHeaderLabelStackRecipe = cva('flex flex-col', {\n  defaultVariants: { size: defaultSectionHeaderSize },\n  variants: {\n    size: {\n      hero: 'gap-4',\n      panel: 'gap-2',\n      section: 'gap-4',\n    } satisfies Record<SectionHeaderSize, string>,\n  },\n})\n\nconst sectionHeaderActionsRecipe = cva('flex flex-wrap items-center gap-4')\n\nconst sectionHeaderAnatomy = anatomy({\n  actions: { part: 'actions', recipe: sectionHeaderActionsRecipe, required: false },\n  root: { part: 'section-header', recipe: sectionHeaderRecipe, required: true },\n  stack: { part: 'stack', recipe: sectionHeaderLabelStackRecipe, required: true },\n})\n\nexport {\n  type SectionHeaderEyebrow,\n  type SectionHeaderSize,\n  defaultSectionHeaderSize,\n  restingEyebrow,\n  sectionHeaderAnatomy,\n  sectionHeaderEyebrows,\n  sectionHeaderLabelStackRecipe,\n  sectionHeaderRecipe,\n  sectionHeaderSizes,\n}\n"],"mappings":";;;AAQA,MAAM,2BAA2B;AAEjC,MAAM,qBAAqB;CACzB;CACA;CACA;AACF;AAEA,MAAM,wBAAwB,CAAC,QAAQ,OAAO;AAE9C,MAAM,kBAAkB;CACtB,MAAM;CACN,OAAO;CACP,SAAS;AACX;AAEA,MAAM,kBAAkB,SAAkD,gBAAgB;AAE1F,MAAM,sBAAsB,IAAI,qBAAqB;AAErD,MAAM,gCAAgC,IAAI,iBAAiB;CACzD,iBAAiB,EAAE,MAAM,yBAAyB;CAClD,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;EACP,SAAS;CACX,EACF;AACF,CAAC;AAED,MAAM,6BAA6B,IAAI,mCAAmC;AAE1E,MAAM,uBAAuB,QAAQ;CACnC,SAAS;EAAE,MAAM;EAAW,QAAQ;EAA4B,UAAU;CAAM;CAChF,MAAM;EAAE,MAAM;EAAkB,QAAQ;EAAqB,UAAU;CAAK;CAC5E,OAAO;EAAE,MAAM;EAAS,QAAQ;EAA+B,UAAU;CAAK;AAChF,CAAC"}

package/dist/recipes/segmentedControl.d.ts

@@ -4,6 +4,13 @@ declare const segmentedControlIndicatorRecipe: (props?: import("class-variance-a
 declare const segmentedControlItemRecipe: (props?: ({
   checked?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const segmentedControlAnatomy: {
+  readonly root: {
+    readonly part: "segmented-control";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { segmentedControlIndicatorRecipe, segmentedControlItemRecipe, segmentedControlRecipe };
+export { segmentedControlAnatomy, segmentedControlIndicatorRecipe, segmentedControlItemRecipe, segmentedControlRecipe };
 //# sourceMappingURL=segmentedControl.d.ts.map

package/dist/recipes/segmentedControl.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { controlInert, controlPress, controlReach, hitArea } from "../parts/control.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/segmentedControl.ts
@@ -23,7 +24,12 @@ const segmentedControlItemRecipe = cva([
 		true: "text-tf-on-accent"
 	} }
 });
+const segmentedControlAnatomy = anatomy({ root: {
+	part: "segmented-control",
+	recipe: segmentedControlRecipe,
+	required: true
+} });
 //#endregion
-export { segmentedControlIndicatorRecipe, segmentedControlItemRecipe, segmentedControlRecipe };
+export { segmentedControlAnatomy, segmentedControlIndicatorRecipe, segmentedControlItemRecipe, segmentedControlRecipe };
 
 //# sourceMappingURL=segmentedControl.js.map

package/dist/recipes/segmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmentedControl.js","names":[],"sources":["../../src/recipes/segmentedControl.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, controlReach, hitArea } from '#parts/control'\n\nconst HIT_AREA = hitArea('after:h-tf-target')\n\nconst segmentedControlRecipe = cva(\n  'relative isolate flex items-center gap-1 rounded-tf-pill bg-tf-panel p-1',\n)\n\nconst segmentedControlIndicatorRecipe = cva([\n  'pointer-events-none absolute z-[-1] rounded-tf-pill bg-tf-blend blend-tf-accent',\n  'top-(--top) left-(--left) h-(--height) w-(--width)',\n  '[--transition-duration:var(--tf-duration-1)]',\n  '[--transition-timing-function:var(--ease-tf)]',\n])\n\nconst segmentedControlItemRecipe = cva(\n  [\n    'relative flex h-tf-control-2xs items-center rounded-tf-pill px-3 text-tf-caption-sm font-normal',\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    HIT_AREA,\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { checked: false },\n    variants: {\n      checked: {\n        false: 'text-tf-muted interactive:hovered:text-tf-fg',\n        true: 'text-tf-on-accent',\n      },\n    },\n  },\n)\n\nexport { segmentedControlIndicatorRecipe, segmentedControlItemRecipe, segmentedControlRecipe }\n"],"mappings":";;;AAIA,MAAM,WAAW,QAAQ,mBAAmB;AAE5C,MAAM,yBAAyB,IAC7B,0EACF;AAEA,MAAM,kCAAkC,IAAI;CAC1C;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,6BAA6B,IACjC;CACE;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EACP,OAAO;EACP,MAAM;CACR,EACF;AACF,CACF"}
+{"version":3,"file":"segmentedControl.js","names":[],"sources":["../../src/recipes/segmentedControl.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { controlInert, controlPress, controlReach, hitArea } from '#parts/control'\n\nconst HIT_AREA = hitArea('after:h-tf-target')\n\nconst segmentedControlRecipe = cva(\n  'relative isolate flex items-center gap-1 rounded-tf-pill bg-tf-panel p-1',\n)\n\nconst segmentedControlIndicatorRecipe = cva([\n  'pointer-events-none absolute z-[-1] rounded-tf-pill bg-tf-blend blend-tf-accent',\n  'top-(--top) left-(--left) h-(--height) w-(--width)',\n  '[--transition-duration:var(--tf-duration-1)]',\n  '[--transition-timing-function:var(--ease-tf)]',\n])\n\nconst segmentedControlItemRecipe = cva(\n  [\n    'relative flex h-tf-control-2xs items-center rounded-tf-pill px-3 text-tf-caption-sm font-normal',\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    HIT_AREA,\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { checked: false },\n    variants: {\n      checked: {\n        false: 'text-tf-muted interactive:hovered:text-tf-fg',\n        true: 'text-tf-on-accent',\n      },\n    },\n  },\n)\n\nconst segmentedControlAnatomy = anatomy({\n  root: { part: 'segmented-control', recipe: segmentedControlRecipe, required: true },\n})\n\nexport {\n  segmentedControlAnatomy,\n  segmentedControlIndicatorRecipe,\n  segmentedControlItemRecipe,\n  segmentedControlRecipe,\n}\n"],"mappings":";;;;AAKA,MAAM,WAAW,QAAQ,mBAAmB;AAE5C,MAAM,yBAAyB,IAC7B,0EACF;AAEA,MAAM,kCAAkC,IAAI;CAC1C;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,6BAA6B,IACjC;CACE;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EACP,OAAO;EACP,MAAM;CACR,EACF;AACF,CACF;AAEA,MAAM,0BAA0B,QAAQ,EACtC,MAAM;CAAE,MAAM;CAAqB,QAAQ;CAAwB,UAAU;AAAK,EACpF,CAAC"}

package/dist/recipes/select.d.ts

@@ -4,6 +4,62 @@ declare const selectValueRecipe: (props?: import("class-variance-authority/types
 declare const selectIndicatorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const selectRowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const selectEmptyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const selectAnatomy: {
+  readonly empty: {
+    readonly part: "empty";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly foot: {
+    readonly part: "foot";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly held: {
+    readonly part: "held";
+    readonly recipe: (props?: ({
+      tone?: "danger" | "neutral" | "chosen" | null | undefined;
+      within?: "surface" | "list" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly mark: {
+    readonly part: "mark";
+    readonly recipe: (props?: ({
+      tone?: "danger" | "neutral" | "chosen" | null | undefined;
+      within?: "surface" | "list" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly meta: {
+    readonly part: "meta";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "select";
+    readonly recipe: (props?: ({
+      fullWidth?: boolean | null | undefined;
+      message?: boolean | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly row: {
+    readonly part: "row";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly spinner: {
+    readonly part: "spinner";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly trailing: {
+    readonly part: "trailing";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { selectEmptyRecipe, selectIndicatorRecipe, selectRowRecipe, selectTriggerRecipe, selectValueRecipe };
+export { selectAnatomy, selectEmptyRecipe, selectIndicatorRecipe, selectRowRecipe, selectTriggerRecipe, selectValueRecipe };
 //# sourceMappingURL=select.d.ts.map

package/dist/recipes/select.js

@@ -1,3 +1,6 @@
+import { anatomy } from "../anatomy.js";
+import { fieldFootRecipe, fieldRecipe, trailingRecipe } from "./field.js";
+import { menuMarkRecipe, menuShortcutRecipe } from "./menu.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/select.ts
 const selectTriggerRecipe = cva([
@@ -15,7 +18,54 @@ const selectRowRecipe = cva([
 	"has-data-[state=open]:**:data-[part=trailing]:stroke-tf-ink"
 ]);
 const selectEmptyRecipe = cva(["flex h-tf-row min-h-tf-row flex-none items-center px-3", "text-tf-body-sm font-medium text-tf-muted"]);
+const selectAnatomy = anatomy({
+	empty: {
+		part: "empty",
+		recipe: selectEmptyRecipe,
+		required: false
+	},
+	foot: {
+		part: "foot",
+		recipe: fieldFootRecipe,
+		required: true
+	},
+	held: {
+		part: "held",
+		recipe: menuMarkRecipe,
+		required: true
+	},
+	mark: {
+		part: "mark",
+		recipe: menuMarkRecipe,
+		required: true
+	},
+	meta: {
+		part: "meta",
+		recipe: menuShortcutRecipe,
+		required: false
+	},
+	root: {
+		part: "select",
+		recipe: fieldRecipe,
+		required: true
+	},
+	row: {
+		part: "row",
+		recipe: selectRowRecipe,
+		required: true
+	},
+	spinner: {
+		part: "spinner",
+		recipe: trailingRecipe,
+		required: false
+	},
+	trailing: {
+		part: "trailing",
+		recipe: trailingRecipe,
+		required: true
+	}
+});
 //#endregion
-export { selectEmptyRecipe, selectIndicatorRecipe, selectRowRecipe, selectTriggerRecipe, selectValueRecipe };
+export { selectAnatomy, selectEmptyRecipe, selectIndicatorRecipe, selectRowRecipe, selectTriggerRecipe, selectValueRecipe };
 
 //# sourceMappingURL=select.js.map

package/dist/recipes/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../src/recipes/select.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst selectTriggerRecipe = cva([\n  'flex items-center text-left',\n  'cursor-pointer disabled:cursor-not-allowed',\n  'data-readonly:cursor-default',\n  'outline-hidden',\n])\n\nconst selectValueRecipe = cva('min-w-0 flex-1 truncate')\n\nconst selectIndicatorRecipe = cva([\n  'tf-transition motion-reduce:transition-none',\n  'data-[state=open]:rotate-180',\n])\n\nconst selectRowRecipe = cva([\n  'reached:**:data-[part=trailing]:text-tf-accent-hi',\n  'reached:**:data-[part=trailing]:stroke-tf-ink',\n  'has-data-[state=open]:**:data-[part=trailing]:text-tf-accent-hi',\n  'has-data-[state=open]:**:data-[part=trailing]:stroke-tf-ink',\n])\n\nconst selectEmptyRecipe = cva([\n  'flex h-tf-row min-h-tf-row flex-none items-center px-3',\n  'text-tf-body-sm font-medium text-tf-muted',\n])\n\nexport {\n  selectEmptyRecipe,\n  selectIndicatorRecipe,\n  selectRowRecipe,\n  selectTriggerRecipe,\n  selectValueRecipe,\n}\n"],"mappings":";;AAEA,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,yBAAyB;AAEvD,MAAM,wBAAwB,IAAI,CAChC,+CACA,8BACF,CAAC;AAED,MAAM,kBAAkB,IAAI;CAC1B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,0DACA,2CACF,CAAC"}
+{"version":3,"file":"select.js","names":[],"sources":["../../src/recipes/select.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nimport { fieldFootRecipe, fieldRecipe, trailingRecipe } from './field'\nimport { menuMarkRecipe, menuShortcutRecipe } from './menu'\n\nconst selectTriggerRecipe = cva([\n  'flex items-center text-left',\n  'cursor-pointer disabled:cursor-not-allowed',\n  'data-readonly:cursor-default',\n  'outline-hidden',\n])\n\nconst selectValueRecipe = cva('min-w-0 flex-1 truncate')\n\nconst selectIndicatorRecipe = cva([\n  'tf-transition motion-reduce:transition-none',\n  'data-[state=open]:rotate-180',\n])\n\nconst selectRowRecipe = cva([\n  'reached:**:data-[part=trailing]:text-tf-accent-hi',\n  'reached:**:data-[part=trailing]:stroke-tf-ink',\n  'has-data-[state=open]:**:data-[part=trailing]:text-tf-accent-hi',\n  'has-data-[state=open]:**:data-[part=trailing]:stroke-tf-ink',\n])\n\nconst selectEmptyRecipe = cva([\n  'flex h-tf-row min-h-tf-row flex-none items-center px-3',\n  'text-tf-body-sm font-medium text-tf-muted',\n])\n\nconst selectAnatomy = anatomy({\n  empty: { part: 'empty', recipe: selectEmptyRecipe, required: false },\n  foot: { part: 'foot', recipe: fieldFootRecipe, required: true },\n  held: { part: 'held', recipe: menuMarkRecipe, required: true },\n  mark: { part: 'mark', recipe: menuMarkRecipe, required: true },\n  meta: { part: 'meta', recipe: menuShortcutRecipe, required: false },\n  root: { part: 'select', recipe: fieldRecipe, required: true },\n  row: { part: 'row', recipe: selectRowRecipe, required: true },\n  spinner: { part: 'spinner', recipe: trailingRecipe, required: false },\n  trailing: { part: 'trailing', recipe: trailingRecipe, required: true },\n})\n\nexport {\n  selectAnatomy,\n  selectEmptyRecipe,\n  selectIndicatorRecipe,\n  selectRowRecipe,\n  selectTriggerRecipe,\n  selectValueRecipe,\n}\n"],"mappings":";;;;;AAOA,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,yBAAyB;AAEvD,MAAM,wBAAwB,IAAI,CAChC,+CACA,8BACF,CAAC;AAED,MAAM,kBAAkB,IAAI;CAC1B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,0DACA,2CACF,CAAC;AAED,MAAM,gBAAgB,QAAQ;CAC5B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAmB,UAAU;CAAM;CACnE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAK;CAC9D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAK;CAC7D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAK;CAC7D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAoB,UAAU;CAAM;CAClE,MAAM;EAAE,MAAM;EAAU,QAAQ;EAAa,UAAU;CAAK;CAC5D,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAiB,UAAU;CAAK;CAC5D,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAgB,UAAU;CAAM;CACpE,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAgB,UAAU;CAAK;AACvE,CAAC"}

package/dist/recipes/separator.d.ts

@@ -5,13 +5,24 @@ declare const defaultSeparatorOrientation = "horizontal";
 declare const defaultSeparatorVariant = "filled";
 declare const defaultSeparatorTone = "accent";
 declare const separatorRecipe: (props?: ({
-  orientation?: "vertical" | "horizontal" | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
   tone?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
   variant?: "quiet" | "filled" | "fade" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const separatorOrientations: readonly ["horizontal", "vertical"];
 declare const separatorVariants: readonly ["fade", "filled", "quiet"];
 declare const separatorTones: readonly ["accent", "success", "warning", "info", "danger"];
+declare const separatorAnatomy: {
+  readonly root: {
+    readonly part: "separator";
+    readonly recipe: (props?: ({
+      orientation?: "horizontal" | "vertical" | null | undefined;
+      tone?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+      variant?: "quiet" | "filled" | "fade" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type SeparatorOrientation, type SeparatorVariant, defaultSeparatorOrientation, defaultSeparatorTone, defaultSeparatorVariant, separatorOrientations, separatorRecipe, separatorTones, separatorVariants };
+export { type SeparatorOrientation, type SeparatorVariant, defaultSeparatorOrientation, defaultSeparatorTone, defaultSeparatorVariant, separatorAnatomy, separatorOrientations, separatorRecipe, separatorTones, separatorVariants };
 //# sourceMappingURL=separator.d.ts.map

package/dist/recipes/separator.js

@@ -1,6 +1,7 @@
-import { toneBlend } from "../tone.js";
+import { anatomy } from "../anatomy.js";
 import { fadingDownOf, fadingOf, filledDownOf, filledOf, ruleQuiet, ruleQuietDown } from "../parts/rule.js";
 import { defaultTone, tones } from "../parts/tone.js";
+import { toneBlend } from "../tone.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/separator.ts
 const defaultSeparatorOrientation = "horizontal";
@@ -80,7 +81,12 @@ const separatorVariants = [
 	"quiet"
 ];
 const separatorTones = tones;
+const separatorAnatomy = anatomy({ root: {
+	part: "separator",
+	recipe: separatorRecipe,
+	required: true
+} });
 //#endregion
-export { defaultSeparatorOrientation, defaultSeparatorTone, defaultSeparatorVariant, separatorOrientations, separatorRecipe, separatorTones, separatorVariants };
+export { defaultSeparatorOrientation, defaultSeparatorTone, defaultSeparatorVariant, separatorAnatomy, separatorOrientations, separatorRecipe, separatorTones, separatorVariants };
 
 //# sourceMappingURL=separator.js.map

package/dist/recipes/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":[],"sources":["../../src/recipes/separator.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport {\n  fadingDownOf,\n  fadingOf,\n  filledDownOf,\n  filledOf,\n  ruleQuiet,\n  ruleQuietDown,\n} from '#parts/rule'\nimport { defaultTone, tones } from '#parts/tone'\nimport type { Tone } from '#tone'\nimport { toneBlend } from '#tone'\n\ntype SeparatorOrientation = 'horizontal' | 'vertical'\n\ntype SeparatorVariant = 'fade' | 'filled' | 'quiet'\n\nconst defaultSeparatorOrientation = 'horizontal' satisfies SeparatorOrientation\n\nconst defaultSeparatorVariant = 'filled' satisfies SeparatorVariant\n\nconst defaultSeparatorTone = defaultTone\n\ninterface TonedRule {\n  class: string\n  orientation: SeparatorOrientation\n  tone: Tone\n  variant: SeparatorVariant\n}\n\nconst tonedRules: TonedRule[] = tones.flatMap((tone) => {\n  const blend = toneBlend[tone]\n\n  return [\n    { class: fadingOf(blend), orientation: 'horizontal', tone, variant: 'fade' },\n    { class: filledOf(blend), orientation: 'horizontal', tone, variant: 'filled' },\n    { class: fadingDownOf(blend), orientation: 'vertical', tone, variant: 'fade' },\n    { class: filledDownOf(blend), orientation: 'vertical', tone, variant: 'filled' },\n  ]\n})\n\nconst separatorRecipe = cva('shrink-0', {\n  compoundVariants: [\n    { class: ruleQuiet, orientation: 'horizontal', variant: 'quiet' },\n    { class: ruleQuietDown, orientation: 'vertical', variant: 'quiet' },\n    ...tonedRules,\n  ],\n  defaultVariants: {\n    orientation: defaultSeparatorOrientation,\n    tone: defaultSeparatorTone,\n    variant: defaultSeparatorVariant,\n  },\n  variants: {\n    orientation: {\n      horizontal: 'w-full',\n      vertical: 'self-stretch',\n    } satisfies Record<SeparatorOrientation, string>,\n    tone: {\n      accent: '',\n      danger: '',\n      info: '',\n      success: '',\n      warning: '',\n    } satisfies Record<Tone, string>,\n    variant: {\n      fade: '',\n      filled: '',\n      quiet: '',\n    } satisfies Record<SeparatorVariant, string>,\n  },\n})\n\nconst separatorOrientations = [\n  'horizontal',\n  'vertical',\n] as const satisfies readonly SeparatorOrientation[]\n\nconst separatorVariants = ['fade', 'filled', 'quiet'] as const satisfies readonly SeparatorVariant[]\n\nconst separatorTones = tones\n\nexport {\n  type SeparatorOrientation,\n  type SeparatorVariant,\n  defaultSeparatorOrientation,\n  defaultSeparatorTone,\n  defaultSeparatorVariant,\n  separatorOrientations,\n  separatorRecipe,\n  separatorTones,\n  separatorVariants,\n}\n"],"mappings":";;;;;AAkBA,MAAM,8BAA8B;AAEpC,MAAM,0BAA0B;AAEhC,MAAM,uBAAuB;AAS7B,MAAM,aAA0B,MAAM,SAAS,SAAS;CACtD,MAAM,QAAQ,UAAU;CAExB,OAAO;EACL;GAAE,OAAO,SAAS,KAAK;GAAG,aAAa;GAAc;GAAM,SAAS;EAAO;EAC3E;GAAE,OAAO,SAAS,KAAK;GAAG,aAAa;GAAc;GAAM,SAAS;EAAS;EAC7E;GAAE,OAAO,aAAa,KAAK;GAAG,aAAa;GAAY;GAAM,SAAS;EAAO;EAC7E;GAAE,OAAO,aAAa,KAAK;GAAG,aAAa;GAAY;GAAM,SAAS;EAAS;CACjF;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,YAAY;CACtC,kBAAkB;EAChB;GAAE,OAAO;GAAW,aAAa;GAAc,SAAS;EAAQ;EAChE;GAAE,OAAO;GAAe,aAAa;GAAY,SAAS;EAAQ;EAClE,GAAG;CACL;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,aAAa;GACX,YAAY;GACZ,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,SAAS;GACT,SAAS;EACX;EACA,SAAS;GACP,MAAM;GACN,QAAQ;GACR,OAAO;EACT;CACF;AACF,CAAC;AAED,MAAM,wBAAwB,CAC5B,cACA,UACF;AAEA,MAAM,oBAAoB;CAAC;CAAQ;CAAU;AAAO;AAEpD,MAAM,iBAAiB"}
+{"version":3,"file":"separator.js","names":[],"sources":["../../src/recipes/separator.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport {\n  fadingDownOf,\n  fadingOf,\n  filledDownOf,\n  filledOf,\n  ruleQuiet,\n  ruleQuietDown,\n} from '#parts/rule'\nimport { defaultTone, tones } from '#parts/tone'\nimport type { Tone } from '#tone'\nimport { toneBlend } from '#tone'\n\ntype SeparatorOrientation = 'horizontal' | 'vertical'\n\ntype SeparatorVariant = 'fade' | 'filled' | 'quiet'\n\nconst defaultSeparatorOrientation = 'horizontal' satisfies SeparatorOrientation\n\nconst defaultSeparatorVariant = 'filled' satisfies SeparatorVariant\n\nconst defaultSeparatorTone = defaultTone\n\ninterface TonedRule {\n  class: string\n  orientation: SeparatorOrientation\n  tone: Tone\n  variant: SeparatorVariant\n}\n\nconst tonedRules: TonedRule[] = tones.flatMap((tone) => {\n  const blend = toneBlend[tone]\n\n  return [\n    { class: fadingOf(blend), orientation: 'horizontal', tone, variant: 'fade' },\n    { class: filledOf(blend), orientation: 'horizontal', tone, variant: 'filled' },\n    { class: fadingDownOf(blend), orientation: 'vertical', tone, variant: 'fade' },\n    { class: filledDownOf(blend), orientation: 'vertical', tone, variant: 'filled' },\n  ]\n})\n\nconst separatorRecipe = cva('shrink-0', {\n  compoundVariants: [\n    { class: ruleQuiet, orientation: 'horizontal', variant: 'quiet' },\n    { class: ruleQuietDown, orientation: 'vertical', variant: 'quiet' },\n    ...tonedRules,\n  ],\n  defaultVariants: {\n    orientation: defaultSeparatorOrientation,\n    tone: defaultSeparatorTone,\n    variant: defaultSeparatorVariant,\n  },\n  variants: {\n    orientation: {\n      horizontal: 'w-full',\n      vertical: 'self-stretch',\n    } satisfies Record<SeparatorOrientation, string>,\n    tone: {\n      accent: '',\n      danger: '',\n      info: '',\n      success: '',\n      warning: '',\n    } satisfies Record<Tone, string>,\n    variant: {\n      fade: '',\n      filled: '',\n      quiet: '',\n    } satisfies Record<SeparatorVariant, string>,\n  },\n})\n\nconst separatorOrientations = [\n  'horizontal',\n  'vertical',\n] as const satisfies readonly SeparatorOrientation[]\n\nconst separatorVariants = ['fade', 'filled', 'quiet'] as const satisfies readonly SeparatorVariant[]\n\nconst separatorTones = tones\n\nconst separatorAnatomy = anatomy({\n  root: { part: 'separator', recipe: separatorRecipe, required: true },\n})\n\nexport {\n  type SeparatorOrientation,\n  type SeparatorVariant,\n  defaultSeparatorOrientation,\n  defaultSeparatorTone,\n  defaultSeparatorVariant,\n  separatorAnatomy,\n  separatorOrientations,\n  separatorRecipe,\n  separatorTones,\n  separatorVariants,\n}\n"],"mappings":";;;;;;AAmBA,MAAM,8BAA8B;AAEpC,MAAM,0BAA0B;AAEhC,MAAM,uBAAuB;AAS7B,MAAM,aAA0B,MAAM,SAAS,SAAS;CACtD,MAAM,QAAQ,UAAU;CAExB,OAAO;EACL;GAAE,OAAO,SAAS,KAAK;GAAG,aAAa;GAAc;GAAM,SAAS;EAAO;EAC3E;GAAE,OAAO,SAAS,KAAK;GAAG,aAAa;GAAc;GAAM,SAAS;EAAS;EAC7E;GAAE,OAAO,aAAa,KAAK;GAAG,aAAa;GAAY;GAAM,SAAS;EAAO;EAC7E;GAAE,OAAO,aAAa,KAAK;GAAG,aAAa;GAAY;GAAM,SAAS;EAAS;CACjF;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,YAAY;CACtC,kBAAkB;EAChB;GAAE,OAAO;GAAW,aAAa;GAAc,SAAS;EAAQ;EAChE;GAAE,OAAO;GAAe,aAAa;GAAY,SAAS;EAAQ;EAClE,GAAG;CACL;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,aAAa;GACX,YAAY;GACZ,UAAU;EACZ;EACA,MAAM;GACJ,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,SAAS;GACT,SAAS;EACX;EACA,SAAS;GACP,MAAM;GACN,QAAQ;GACR,OAAO;EACT;CACF;AACF,CAAC;AAED,MAAM,wBAAwB,CAC5B,cACA,UACF;AAEA,MAAM,oBAAoB;CAAC;CAAQ;CAAU;AAAO;AAEpD,MAAM,iBAAiB;AAEvB,MAAM,mBAAmB,QAAQ,EAC/B,MAAM;CAAE,MAAM;CAAa,QAAQ;CAAiB,UAAU;AAAK,EACrE,CAAC"}

package/dist/recipes/sidebar.d.ts

@@ -27,7 +27,7 @@ declare const sidebarNavRecipe: (props?: import("class-variance-authority/types"
 declare const sidebarMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sidebarGroupRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sidebarItemRecipe: (props?: ({
-  level?: "top" | "child" | null | undefined;
+  level?: "child" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const sidebarIconRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sidebarLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
@@ -35,6 +35,132 @@ declare const sidebarChevronRecipe: (props?: import("class-variance-authority/ty
 declare const sidebarDotRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sidebarSubRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sidebarFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarAnatomy: {
+  readonly brand: {
+    readonly part: "brand";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly brandStack: {
+    readonly part: "brand-stack";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly brandSubtitle: {
+    readonly part: "brand-subtitle";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly child: {
+    readonly part: "child";
+    readonly recipe: (props?: ({
+      level?: "child" | "top" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+  readonly dot: {
+    readonly part: "dot";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly foot: {
+    readonly part: "foot";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly head: {
+    readonly part: "head";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly item: {
+    readonly part: "item";
+    readonly recipe: (props?: ({
+      level?: "child" | "top" | null | undefined;
+    } & 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 mark: {
+    readonly part: "mark";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly mobileBar: {
+    readonly part: "mobile-bar";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly mobileEyebrow: {
+    readonly part: "mobile-eyebrow";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly mobileHeadings: {
+    readonly part: "mobile-headings";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly mobileTitle: {
+    readonly part: "mobile-title";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly nav: {
+    readonly part: "nav";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly overlayBody: {
+    readonly part: "overlay-body";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly overlayBrand: {
+    readonly part: "overlay-brand";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly overlayHead: {
+    readonly part: "overlay-head";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly overlayScope: {
+    readonly part: "overlay-scope";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "sidebar";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly scope: {
+    readonly part: "scope";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly separator: {
+    readonly part: "separator";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly switch: {
+    readonly part: "switch";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly wordmark: {
+    readonly part: "wordmark";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly 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.d.ts.map