@techfides/ui-library-design 0.3.1 → 0.7.0

package/dist/recipes/queue.js

@@ -1,3 +1,5 @@
+import { anatomy } from "../anatomy.js";
+import { tableRankRecipe } from "./table.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/queue.ts
 const queueRecipe = cva("@container flex w-full flex-col gap-1 rounded-tf-block bg-tf-sunken p-3");
@@ -21,7 +23,39 @@ const queueAgeLabelRecipe = cva("text-tf-caption-sm font-normal tabular-nums", {
 const queueAgeTrackRecipe = cva("block h-1 w-full overflow-hidden rounded-tf-pill bg-tf-sunken-hi");
 const queueAgeFillRecipe = cva("block h-full bg-tf-blend");
 const queueDotRecipe = cva("size-2 flex-none rounded-tf-pill bg-tf-blend");
+const queueAnatomy = anatomy({
+	age: {
+		part: "age",
+		recipe: queueAgeRecipe,
+		required: true
+	},
+	dot: {
+		part: "dot",
+		recipe: queueDotRecipe,
+		required: false
+	},
+	hint: {
+		part: "hint",
+		recipe: queueHintRecipe,
+		required: true
+	},
+	lead: {
+		part: "lead",
+		recipe: queueLeadRecipe,
+		required: true
+	},
+	rank: {
+		part: "rank",
+		recipe: tableRankRecipe,
+		required: false
+	},
+	root: {
+		part: "queue",
+		recipe: queueRecipe,
+		required: true
+	}
+});
 //#endregion
-export { queueAgeFillRecipe, queueAgeLabelRecipe, queueAgeRecipe, queueAgeTrackRecipe, queueDotRecipe, queueHintRecipe, queueLeadRecipe, queueRecipe, queueRowRecipe, queueTextRecipe };
+export { queueAgeFillRecipe, queueAgeLabelRecipe, queueAgeRecipe, queueAgeTrackRecipe, queueAnatomy, queueDotRecipe, queueHintRecipe, queueLeadRecipe, queueRecipe, queueRowRecipe, queueTextRecipe };
 
 //# sourceMappingURL=queue.js.map

package/dist/recipes/queue.js.map

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

package/dist/recipes/radioGroup.d.ts

@@ -22,6 +22,23 @@ declare const radioTitleRecipe: (props?: import("class-variance-authority/types"
 declare const radioHintRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const radioAsideRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const radioErrorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const radioGroupAnatomy: {
+  readonly dot: {
+    readonly part: "dot";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly requiredIndicator: {
+    readonly part: "required-indicator";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "radio-group";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type RadioAccent, defaultRadioAccent, radioAccents, radioAsideRecipe, radioControlRecipe, radioDotRecipe, radioErrorRecipe, radioGroupLabelRecipe, radioGroupRecipe, radioHintRecipe, radioIndicatorRecipe, radioLabelRecipe, radioLeadRecipe, radioRecipe, radioTitleRecipe };
+export { type RadioAccent, defaultRadioAccent, radioAccents, radioAsideRecipe, radioControlRecipe, radioDotRecipe, radioErrorRecipe, radioGroupAnatomy, radioGroupLabelRecipe, radioGroupRecipe, radioHintRecipe, radioIndicatorRecipe, radioLabelRecipe, radioLeadRecipe, radioRecipe, radioTitleRecipe };
 //# sourceMappingURL=radioGroup.d.ts.map

package/dist/recipes/radioGroup.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 { markBox, markGroup, markPlate, markPress, markRow, markStack, markTitle } from "../parts/mark.js";
 import { eyebrowQuiet } from "../parts/eyebrow.js";
 import { cva } from "class-variance-authority";
@@ -62,7 +63,24 @@ const radioTitleRecipe = cva(markTitle);
 const radioHintRecipe = cva("text-tf-caption font-medium text-tf-muted");
 const radioAsideRecipe = cva("shrink-0 text-tf-body-sm font-medium text-tf-muted tabular-nums");
 const radioErrorRecipe = cva("px-3 pt-1 text-tf-caption font-medium text-tf-danger-hi tf-arrives");
+const radioGroupAnatomy = anatomy({
+	dot: {
+		part: "dot",
+		recipe: radioDotRecipe,
+		required: true
+	},
+	requiredIndicator: {
+		part: "required-indicator",
+		recipe: radioGroupLabelRecipe,
+		required: false
+	},
+	root: {
+		part: "radio-group",
+		recipe: radioGroupRecipe,
+		required: true
+	}
+});
 //#endregion
-export { defaultRadioAccent, radioAccents, radioAsideRecipe, radioControlRecipe, radioDotRecipe, radioErrorRecipe, radioGroupLabelRecipe, radioGroupRecipe, radioHintRecipe, radioIndicatorRecipe, radioLabelRecipe, radioLeadRecipe, radioRecipe, radioTitleRecipe };
+export { defaultRadioAccent, radioAccents, radioAsideRecipe, radioControlRecipe, radioDotRecipe, radioErrorRecipe, radioGroupAnatomy, radioGroupLabelRecipe, radioGroupRecipe, radioHintRecipe, radioIndicatorRecipe, radioLabelRecipe, radioLeadRecipe, radioRecipe, radioTitleRecipe };
 
 //# sourceMappingURL=radioGroup.js.map

package/dist/recipes/radioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioGroup.js","names":[],"sources":["../../src/recipes/radioGroup.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { MarkPlate } from '#mark'\nimport { defaultMarkPlate } from '#mark'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport {\n  markBox,\n  markGroup,\n  markPlate,\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 radioAccents = tones\n\ntype RadioAccent = Tone\n\nconst defaultRadioAccent = defaultTone\n\nconst radioGroupRecipe = cva([markGroup, 'font-tf-body'])\n\nconst radioGroupLabelRecipe = cva([\n  `text-tf-caption-sm ${eyebrowQuiet}`,\n  'px-3 pb-1 font-medium',\n  '**:data-[part=required-indicator]:text-tf-danger-hi',\n])\n\nconst radioRecipe = cva([...markRow, 'justify-between gap-6'], {\n  defaultVariants: { plate: defaultMarkPlate },\n  variants: {\n    plate: {\n      bare: markPlate.bare,\n      full: `${markPlate.full} not-data-[state=checked]:not-data-readonly:interactive:hovered:bg-tf-panel-hi`,\n      snug: `${markPlate.snug} not-data-[state=checked]:not-data-readonly:interactive:hovered:bg-tf-panel-hi`,\n    } satisfies Record<MarkPlate, string>,\n  },\n})\n\nconst radioIndicatorRecipe = cva(\n  [\n    'pointer-events-none left-0 h-(--height) w-(--width)',\n    'rounded-tf-block tf-tinted data-disabled:opacity-50',\n    '[--transition-duration:var(--tf-duration-2)]',\n    '[--transition-timing-function:var(--ease-tf-glide)]',\n  ],\n  {\n    compoundVariants: [{ class: toneBlend.danger, invalid: true }],\n    defaultVariants: { accent: defaultRadioAccent, invalid: false },\n    variants: {\n      accent: toneBlend,\n      invalid: { false: '', true: '' },\n    },\n  },\n)\n\nconst radioLeadRecipe = cva('flex min-w-0 items-center gap-3')\n\nconst radioControlRecipe = cva(\n  [\n    ...markBox,\n    'rounded-tf-pill bg-tf-sunken',\n    'not-data-readonly:interactive:hovered:bg-tf-sunken-hi',\n    'data-[state=checked]:tf-mark-lit',\n    'data-[state=checked]:**:data-[part=dot]:scale-100',\n    'data-invalid:blend-tf-danger data-invalid:tf-mark-failed',\n    markPress,\n  ],\n  {\n    defaultVariants: { accent: defaultRadioAccent },\n    variants: { accent: toneBlend },\n  },\n)\n\nconst radioDotRecipe = cva([\n  'block size-tf-mark-dot rounded-tf-pill bg-tf-blend',\n  'scale-0 tf-moves-spring tf-transition motion-reduce:transition-none',\n])\n\nconst radioLabelRecipe = cva(markStack)\n\nconst radioTitleRecipe = cva(markTitle)\n\nconst radioHintRecipe = cva('text-tf-caption font-medium text-tf-muted')\n\nconst radioAsideRecipe = cva('shrink-0 text-tf-body-sm font-medium text-tf-muted tabular-nums')\n\nconst radioErrorRecipe = cva('px-3 pt-1 text-tf-caption font-medium text-tf-danger-hi tf-arrives')\n\nexport {\n  type RadioAccent,\n  defaultRadioAccent,\n  radioAccents,\n  radioAsideRecipe,\n  radioControlRecipe,\n  radioDotRecipe,\n  radioErrorRecipe,\n  radioGroupLabelRecipe,\n  radioGroupRecipe,\n  radioHintRecipe,\n  radioIndicatorRecipe,\n  radioLabelRecipe,\n  radioLeadRecipe,\n  radioRecipe,\n  radioTitleRecipe,\n}\n"],"mappings":";;;;;;;AAkBA,MAAM,eAAe;AAIrB,MAAM,qBAAqB;AAE3B,MAAM,mBAAmB,IAAI,CAAC,WAAW,cAAc,CAAC;AAExD,MAAM,wBAAwB,IAAI;CAChC,sBAAsB;CACtB;CACA;AACF,CAAC;AAED,MAAM,cAAc,IAAI,CAAC,GAAG,SAAS,uBAAuB,GAAG;CAC7D,iBAAiB,EAAE,OAAO,iBAAiB;CAC3C,UAAU,EACR,OAAO;EACL,MAAM,UAAU;EAChB,MAAM,GAAG,UAAU,KAAK;EACxB,MAAM,GAAG,UAAU,KAAK;CAC1B,EACF;AACF,CAAC;AAED,MAAM,uBAAuB,IAC3B;CACE;CACA;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAAC;EAAE,OAAO,UAAU;EAAQ,SAAS;CAAK,CAAC;CAC7D,iBAAiB;EAAE,QAAQ;EAAoB,SAAS;CAAM;CAC9D,UAAU;EACR,QAAQ;EACR,SAAS;GAAE,OAAO;GAAI,MAAM;EAAG;CACjC;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,iCAAiC;AAE7D,MAAM,qBAAqB,IACzB;CACE,GAAG;CACH;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,QAAQ,mBAAmB;CAC9C,UAAU,EAAE,QAAQ,UAAU;AAChC,CACF;AAEA,MAAM,iBAAiB,IAAI,CACzB,sDACA,qEACF,CAAC;AAED,MAAM,mBAAmB,IAAI,SAAS;AAEtC,MAAM,mBAAmB,IAAI,SAAS;AAEtC,MAAM,kBAAkB,IAAI,2CAA2C;AAEvE,MAAM,mBAAmB,IAAI,iEAAiE;AAE9F,MAAM,mBAAmB,IAAI,oEAAoE"}
+{"version":3,"file":"radioGroup.js","names":[],"sources":["../../src/recipes/radioGroup.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport type { MarkPlate } from '#mark'\nimport { defaultMarkPlate } from '#mark'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport {\n  markBox,\n  markGroup,\n  markPlate,\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 radioAccents = tones\n\ntype RadioAccent = Tone\n\nconst defaultRadioAccent = defaultTone\n\nconst radioGroupRecipe = cva([markGroup, 'font-tf-body'])\n\nconst radioGroupLabelRecipe = cva([\n  `text-tf-caption-sm ${eyebrowQuiet}`,\n  'px-3 pb-1 font-medium',\n  '**:data-[part=required-indicator]:text-tf-danger-hi',\n])\n\nconst radioRecipe = cva([...markRow, 'justify-between gap-6'], {\n  defaultVariants: { plate: defaultMarkPlate },\n  variants: {\n    plate: {\n      bare: markPlate.bare,\n      full: `${markPlate.full} not-data-[state=checked]:not-data-readonly:interactive:hovered:bg-tf-panel-hi`,\n      snug: `${markPlate.snug} not-data-[state=checked]:not-data-readonly:interactive:hovered:bg-tf-panel-hi`,\n    } satisfies Record<MarkPlate, string>,\n  },\n})\n\nconst radioIndicatorRecipe = cva(\n  [\n    'pointer-events-none left-0 h-(--height) w-(--width)',\n    'rounded-tf-block tf-tinted data-disabled:opacity-50',\n    '[--transition-duration:var(--tf-duration-2)]',\n    '[--transition-timing-function:var(--ease-tf-glide)]',\n  ],\n  {\n    compoundVariants: [{ class: toneBlend.danger, invalid: true }],\n    defaultVariants: { accent: defaultRadioAccent, invalid: false },\n    variants: {\n      accent: toneBlend,\n      invalid: { false: '', true: '' },\n    },\n  },\n)\n\nconst radioLeadRecipe = cva('flex min-w-0 items-center gap-3')\n\nconst radioControlRecipe = cva(\n  [\n    ...markBox,\n    'rounded-tf-pill bg-tf-sunken',\n    'not-data-readonly:interactive:hovered:bg-tf-sunken-hi',\n    'data-[state=checked]:tf-mark-lit',\n    'data-[state=checked]:**:data-[part=dot]:scale-100',\n    'data-invalid:blend-tf-danger data-invalid:tf-mark-failed',\n    markPress,\n  ],\n  {\n    defaultVariants: { accent: defaultRadioAccent },\n    variants: { accent: toneBlend },\n  },\n)\n\nconst radioDotRecipe = cva([\n  'block size-tf-mark-dot rounded-tf-pill bg-tf-blend',\n  'scale-0 tf-moves-spring tf-transition motion-reduce:transition-none',\n])\n\nconst radioLabelRecipe = cva(markStack)\n\nconst radioTitleRecipe = cva(markTitle)\n\nconst radioHintRecipe = cva('text-tf-caption font-medium text-tf-muted')\n\nconst radioAsideRecipe = cva('shrink-0 text-tf-body-sm font-medium text-tf-muted tabular-nums')\n\nconst radioErrorRecipe = cva('px-3 pt-1 text-tf-caption font-medium text-tf-danger-hi tf-arrives')\n\nconst radioGroupAnatomy = anatomy({\n  dot: { part: 'dot', recipe: radioDotRecipe, required: true },\n  requiredIndicator: {\n    part: 'required-indicator',\n    recipe: radioGroupLabelRecipe,\n    required: false,\n  },\n  root: { part: 'radio-group', recipe: radioGroupRecipe, required: true },\n})\n\nexport {\n  type RadioAccent,\n  defaultRadioAccent,\n  radioAccents,\n  radioAsideRecipe,\n  radioControlRecipe,\n  radioDotRecipe,\n  radioErrorRecipe,\n  radioGroupAnatomy,\n  radioGroupLabelRecipe,\n  radioGroupRecipe,\n  radioHintRecipe,\n  radioIndicatorRecipe,\n  radioLabelRecipe,\n  radioLeadRecipe,\n  radioRecipe,\n  radioTitleRecipe,\n}\n"],"mappings":";;;;;;;;AAmBA,MAAM,eAAe;AAIrB,MAAM,qBAAqB;AAE3B,MAAM,mBAAmB,IAAI,CAAC,WAAW,cAAc,CAAC;AAExD,MAAM,wBAAwB,IAAI;CAChC,sBAAsB;CACtB;CACA;AACF,CAAC;AAED,MAAM,cAAc,IAAI,CAAC,GAAG,SAAS,uBAAuB,GAAG;CAC7D,iBAAiB,EAAE,OAAO,iBAAiB;CAC3C,UAAU,EACR,OAAO;EACL,MAAM,UAAU;EAChB,MAAM,GAAG,UAAU,KAAK;EACxB,MAAM,GAAG,UAAU,KAAK;CAC1B,EACF;AACF,CAAC;AAED,MAAM,uBAAuB,IAC3B;CACE;CACA;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAAC;EAAE,OAAO,UAAU;EAAQ,SAAS;CAAK,CAAC;CAC7D,iBAAiB;EAAE,QAAQ;EAAoB,SAAS;CAAM;CAC9D,UAAU;EACR,QAAQ;EACR,SAAS;GAAE,OAAO;GAAI,MAAM;EAAG;CACjC;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,iCAAiC;AAE7D,MAAM,qBAAqB,IACzB;CACE,GAAG;CACH;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,QAAQ,mBAAmB;CAC9C,UAAU,EAAE,QAAQ,UAAU;AAChC,CACF;AAEA,MAAM,iBAAiB,IAAI,CACzB,sDACA,qEACF,CAAC;AAED,MAAM,mBAAmB,IAAI,SAAS;AAEtC,MAAM,mBAAmB,IAAI,SAAS;AAEtC,MAAM,kBAAkB,IAAI,2CAA2C;AAEvE,MAAM,mBAAmB,IAAI,iEAAiE;AAE9F,MAAM,mBAAmB,IAAI,oEAAoE;AAEjG,MAAM,oBAAoB,QAAQ;CAChC,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAgB,UAAU;CAAK;CAC3D,mBAAmB;EACjB,MAAM;EACN,QAAQ;EACR,UAAU;CACZ;CACA,MAAM;EAAE,MAAM;EAAe,QAAQ;EAAkB,UAAU;CAAK;AACxE,CAAC"}

package/dist/recipes/scopeSwitcher.d.ts

@@ -21,6 +21,43 @@ declare const scopeSwitcherBadgeRecipe: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const scopeSwitcherDotRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const scopeSwitcherWarningRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherAnatomy: {
+  readonly eyebrow: {
+    readonly part: "eyebrow";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly list: {
+    readonly part: "list";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly mark: {
+    readonly part: "mark";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "scope-switcher";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly rowText: {
+    readonly part: "row-text";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly text: {
+    readonly part: "text";
+    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;
+  };
+};
 //#endregion
-export { scopeSwitcherBadgeRecipe, scopeSwitcherChevronsRecipe, scopeSwitcherCodeRecipe, scopeSwitcherDotRecipe, scopeSwitcherEyebrowRecipe, scopeSwitcherIconRecipe, scopeSwitcherListRecipe, scopeSwitcherMarkRecipe, scopeSwitcherPillIconRecipe, scopeSwitcherPillRecipe, scopeSwitcherRecipe, scopeSwitcherRowMetaRecipe, scopeSwitcherRowNameRecipe, scopeSwitcherRowRecipe, scopeSwitcherRowTextRecipe, scopeSwitcherTextRecipe, scopeSwitcherValueRecipe, scopeSwitcherWarningRecipe };
+export { scopeSwitcherAnatomy, scopeSwitcherBadgeRecipe, scopeSwitcherChevronsRecipe, scopeSwitcherCodeRecipe, scopeSwitcherDotRecipe, scopeSwitcherEyebrowRecipe, scopeSwitcherIconRecipe, scopeSwitcherListRecipe, scopeSwitcherMarkRecipe, scopeSwitcherPillIconRecipe, scopeSwitcherPillRecipe, scopeSwitcherRecipe, scopeSwitcherRowMetaRecipe, scopeSwitcherRowNameRecipe, scopeSwitcherRowRecipe, scopeSwitcherRowTextRecipe, scopeSwitcherTextRecipe, scopeSwitcherValueRecipe, scopeSwitcherWarningRecipe };
 //# sourceMappingURL=scopeSwitcher.d.ts.map

package/dist/recipes/scopeSwitcher.js

@@ -1,7 +1,9 @@
+import { anatomy } from "../anatomy.js";
 import { controlInert, controlPress, controlQuiet, controlReach } from "../parts/control.js";
 import { collapseMotion, railCollapse, railMorph } from "./motion.js";
 import { eyebrowType } from "../parts/eyebrow.js";
 import { travelMarkBase } from "../parts/travel.js";
+import { menuListRecipe } from "./menu.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/scopeSwitcher.ts
 const scopeSwitcherRecipe = cva([
@@ -74,7 +76,44 @@ const scopeSwitcherBadgeRecipe = cva(["inline-flex flex-none items-center gap-2
 });
 const scopeSwitcherDotRecipe = cva("size-1.5 flex-none rounded-tf-pill bg-current");
 const scopeSwitcherWarningRecipe = cva("flex-none text-tf-danger-hi");
+const scopeSwitcherAnatomy = anatomy({
+	eyebrow: {
+		part: "eyebrow",
+		recipe: scopeSwitcherEyebrowRecipe,
+		required: false
+	},
+	list: {
+		part: "list",
+		recipe: menuListRecipe,
+		required: false
+	},
+	mark: {
+		part: "mark",
+		recipe: scopeSwitcherMarkRecipe,
+		required: true
+	},
+	root: {
+		part: "scope-switcher",
+		recipe: scopeSwitcherRecipe,
+		required: true
+	},
+	rowText: {
+		part: "row-text",
+		recipe: scopeSwitcherRowTextRecipe,
+		required: true
+	},
+	text: {
+		part: "text",
+		recipe: scopeSwitcherTextRecipe,
+		required: false
+	},
+	value: {
+		part: "value",
+		recipe: scopeSwitcherValueRecipe,
+		required: true
+	}
+});
 //#endregion
-export { scopeSwitcherBadgeRecipe, scopeSwitcherChevronsRecipe, scopeSwitcherCodeRecipe, scopeSwitcherDotRecipe, scopeSwitcherEyebrowRecipe, scopeSwitcherIconRecipe, scopeSwitcherListRecipe, scopeSwitcherMarkRecipe, scopeSwitcherPillIconRecipe, scopeSwitcherPillRecipe, scopeSwitcherRecipe, scopeSwitcherRowMetaRecipe, scopeSwitcherRowNameRecipe, scopeSwitcherRowRecipe, scopeSwitcherRowTextRecipe, scopeSwitcherTextRecipe, scopeSwitcherValueRecipe, scopeSwitcherWarningRecipe };
+export { scopeSwitcherAnatomy, scopeSwitcherBadgeRecipe, scopeSwitcherChevronsRecipe, scopeSwitcherCodeRecipe, scopeSwitcherDotRecipe, scopeSwitcherEyebrowRecipe, scopeSwitcherIconRecipe, scopeSwitcherListRecipe, scopeSwitcherMarkRecipe, scopeSwitcherPillIconRecipe, scopeSwitcherPillRecipe, scopeSwitcherRecipe, scopeSwitcherRowMetaRecipe, scopeSwitcherRowNameRecipe, scopeSwitcherRowRecipe, scopeSwitcherRowTextRecipe, scopeSwitcherTextRecipe, scopeSwitcherValueRecipe, scopeSwitcherWarningRecipe };
 
 //# sourceMappingURL=scopeSwitcher.js.map

package/dist/recipes/scopeSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"scopeSwitcher.js","names":[],"sources":["../../src/recipes/scopeSwitcher.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, controlQuiet, controlReach } from '#parts/control'\nimport { eyebrowType } from '#parts/eyebrow'\nimport { travelMarkBase } from '#parts/travel'\n\nimport { collapseMotion, railCollapse, railMorph } from './motion'\n\nconst scopeSwitcherRecipe = cva([\n  'group relative flex w-full items-center gap-2 rounded-tf-block px-3 py-1.5 text-left',\n  'in-data-rail:justify-center in-data-rail:gap-0 in-data-rail:px-2',\n  'bg-tf-sunken',\n  '[&>svg]:size-tf-icon-sm [&>svg]:shrink-0',\n  ...controlQuiet,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst scopeSwitcherPillRecipe = cva([\n  'inline-flex flex-none items-center gap-2 rounded-tf-pill px-3 py-1.5',\n  'bg-tf-panel-2 text-tf-body-sm font-medium text-tf-fg',\n  '[&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ...controlQuiet,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst scopeSwitcherTextRecipe = cva(`flex flex-col gap-0 ${railCollapse}`)\n\nconst scopeSwitcherEyebrowRecipe = cva([\n  'truncate text-tf-caption-sm text-tf-accent-hi',\n  eyebrowType,\n])\n\nconst scopeSwitcherValueRecipe = cva(\n  'truncate font-tf-display text-tf-body-sm font-medium tracking-tf-tight text-tf-fg',\n)\n\nconst scopeSwitcherChevronsRecipe = cva([\n  'flex-none text-tf-muted',\n  'in-data-rail:size-0! in-data-rail:opacity-0',\n  '[--tf-travel:opacity_var(--tf-timing-glide)]',\n  railMorph,\n])\n\nconst scopeSwitcherPillIconRecipe = cva('flex-none text-tf-accent-hi')\n\nconst scopeSwitcherIconRecipe = cva([\n  'relative isolate flex size-tf-control-sm flex-none items-center justify-center rounded-tf-control',\n  'bg-tf-blend text-tf-on-accent tf-cloud-brand tf-clouded blend-tf-accent tf-blend-drift',\n  'tf-edge-sweep tf-swept tf-icons-solo tf-inner-lit',\n  '[&_svg]:size-tf-icon-md [&_svg]:shrink-0',\n])\n\nconst scopeSwitcherListRecipe = cva(['relative flex flex-col gap-1 pt-2', ...collapseMotion])\n\nconst scopeSwitcherMarkRecipe = cva([\n  ...travelMarkBase,\n  'inset-x-0 h-[61px] rounded-tf-control bg-tf-panel-hi',\n])\n\nconst scopeSwitcherRowRecipe = cva(\n  [\n    'group relative flex w-full items-center gap-2 rounded-tf-control px-3 py-2 text-left',\n    'tf-transition data-highlighted:bg-tf-panel-hi',\n    '[&>svg]:size-tf-icon-sm [&>svg]:shrink-0',\n    ...controlQuiet,\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { selected: false },\n    variants: {\n      selected: {\n        false: '',\n        true: 'tf-tinted blend-tf-accent',\n      },\n    },\n  },\n)\n\nconst scopeSwitcherCodeRecipe = cva([\n  'relative isolate flex size-tf-control-sm flex-none items-center justify-center rounded-tf-pill',\n  'bg-tf-panel-hi text-tf-caption font-medium text-tf-fg',\n  'tf-edge-sweep tf-swept blend-tf-accent',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst scopeSwitcherRowTextRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst scopeSwitcherRowNameRecipe = cva('truncate text-tf-body-sm font-medium text-tf-fg')\n\nconst scopeSwitcherRowMetaRecipe = cva('truncate text-tf-caption-sm text-tf-muted')\n\nconst scopeSwitcherBadgeRecipe = cva(\n  [\n    'inline-flex flex-none items-center gap-2 rounded-tf-pill bg-tf-panel-hi px-2 py-1',\n    'text-tf-caption-sm font-normal tabular-nums',\n  ],\n  {\n    defaultVariants: { tone: 'accent' },\n    variants: {\n      tone: {\n        accent: 'text-tf-accent-hi',\n        warning: 'text-tf-warning-hi',\n      },\n    },\n  },\n)\n\nconst scopeSwitcherDotRecipe = cva('size-1.5 flex-none rounded-tf-pill bg-current')\n\nconst scopeSwitcherWarningRecipe = cva('flex-none text-tf-danger-hi')\n\nexport {\n  scopeSwitcherBadgeRecipe,\n  scopeSwitcherChevronsRecipe,\n  scopeSwitcherCodeRecipe,\n  scopeSwitcherDotRecipe,\n  scopeSwitcherEyebrowRecipe,\n  scopeSwitcherIconRecipe,\n  scopeSwitcherListRecipe,\n  scopeSwitcherMarkRecipe,\n  scopeSwitcherPillIconRecipe,\n  scopeSwitcherPillRecipe,\n  scopeSwitcherRecipe,\n  scopeSwitcherRowNameRecipe,\n  scopeSwitcherRowMetaRecipe,\n  scopeSwitcherRowRecipe,\n  scopeSwitcherRowTextRecipe,\n  scopeSwitcherTextRecipe,\n  scopeSwitcherValueRecipe,\n  scopeSwitcherWarningRecipe,\n}\n"],"mappings":";;;;;;AAQA,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,0BAA0B,IAAI;CAClC;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,0BAA0B,IAAI,uBAAuB,cAAc;AAEzE,MAAM,6BAA6B,IAAI,CACrC,iDACA,WACF,CAAC;AAED,MAAM,2BAA2B,IAC/B,mFACF;AAEA,MAAM,8BAA8B,IAAI;CACtC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,8BAA8B,IAAI,6BAA6B;AAErE,MAAM,0BAA0B,IAAI;CAClC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,0BAA0B,IAAI,CAAC,qCAAqC,GAAG,cAAc,CAAC;AAE5F,MAAM,0BAA0B,IAAI,CAClC,GAAG,gBACH,sDACF,CAAC;AAED,MAAM,yBAAyB,IAC7B;CACE;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,UAAU,MAAM;CACnC,UAAU,EACR,UAAU;EACR,OAAO;EACP,MAAM;CACR,EACF;AACF,CACF;AAEA,MAAM,0BAA0B,IAAI;CAClC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,6BAA6B,IAAI,oCAAoC;AAE3E,MAAM,6BAA6B,IAAI,iDAAiD;AAExF,MAAM,6BAA6B,IAAI,2CAA2C;AAElF,MAAM,2BAA2B,IAC/B,CACE,qFACA,6CACF,GACA;CACE,iBAAiB,EAAE,MAAM,SAAS;CAClC,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,SAAS;CACX,EACF;AACF,CACF;AAEA,MAAM,yBAAyB,IAAI,+CAA+C;AAElF,MAAM,6BAA6B,IAAI,6BAA6B"}
+{"version":3,"file":"scopeSwitcher.js","names":[],"sources":["../../src/recipes/scopeSwitcher.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { controlInert, controlPress, controlQuiet, controlReach } from '#parts/control'\nimport { eyebrowType } from '#parts/eyebrow'\nimport { travelMarkBase } from '#parts/travel'\n\nimport { menuListRecipe } from './menu'\nimport { collapseMotion, railCollapse, railMorph } from './motion'\n\nconst scopeSwitcherRecipe = cva([\n  'group relative flex w-full items-center gap-2 rounded-tf-block px-3 py-1.5 text-left',\n  'in-data-rail:justify-center in-data-rail:gap-0 in-data-rail:px-2',\n  'bg-tf-sunken',\n  '[&>svg]:size-tf-icon-sm [&>svg]:shrink-0',\n  ...controlQuiet,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst scopeSwitcherPillRecipe = cva([\n  'inline-flex flex-none items-center gap-2 rounded-tf-pill px-3 py-1.5',\n  'bg-tf-panel-2 text-tf-body-sm font-medium text-tf-fg',\n  '[&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ...controlQuiet,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst scopeSwitcherTextRecipe = cva(`flex flex-col gap-0 ${railCollapse}`)\n\nconst scopeSwitcherEyebrowRecipe = cva([\n  'truncate text-tf-caption-sm text-tf-accent-hi',\n  eyebrowType,\n])\n\nconst scopeSwitcherValueRecipe = cva(\n  'truncate font-tf-display text-tf-body-sm font-medium tracking-tf-tight text-tf-fg',\n)\n\nconst scopeSwitcherChevronsRecipe = cva([\n  'flex-none text-tf-muted',\n  'in-data-rail:size-0! in-data-rail:opacity-0',\n  '[--tf-travel:opacity_var(--tf-timing-glide)]',\n  railMorph,\n])\n\nconst scopeSwitcherPillIconRecipe = cva('flex-none text-tf-accent-hi')\n\nconst scopeSwitcherIconRecipe = cva([\n  'relative isolate flex size-tf-control-sm flex-none items-center justify-center rounded-tf-control',\n  'bg-tf-blend text-tf-on-accent tf-cloud-brand tf-clouded blend-tf-accent tf-blend-drift',\n  'tf-edge-sweep tf-swept tf-icons-solo tf-inner-lit',\n  '[&_svg]:size-tf-icon-md [&_svg]:shrink-0',\n])\n\nconst scopeSwitcherListRecipe = cva(['relative flex flex-col gap-1 pt-2', ...collapseMotion])\n\nconst scopeSwitcherMarkRecipe = cva([\n  ...travelMarkBase,\n  'inset-x-0 h-[61px] rounded-tf-control bg-tf-panel-hi',\n])\n\nconst scopeSwitcherRowRecipe = cva(\n  [\n    'group relative flex w-full items-center gap-2 rounded-tf-control px-3 py-2 text-left',\n    'tf-transition data-highlighted:bg-tf-panel-hi',\n    '[&>svg]:size-tf-icon-sm [&>svg]:shrink-0',\n    ...controlQuiet,\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { selected: false },\n    variants: {\n      selected: {\n        false: '',\n        true: 'tf-tinted blend-tf-accent',\n      },\n    },\n  },\n)\n\nconst scopeSwitcherCodeRecipe = cva([\n  'relative isolate flex size-tf-control-sm flex-none items-center justify-center rounded-tf-pill',\n  'bg-tf-panel-hi text-tf-caption font-medium text-tf-fg',\n  'tf-edge-sweep tf-swept blend-tf-accent',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst scopeSwitcherRowTextRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst scopeSwitcherRowNameRecipe = cva('truncate text-tf-body-sm font-medium text-tf-fg')\n\nconst scopeSwitcherRowMetaRecipe = cva('truncate text-tf-caption-sm text-tf-muted')\n\nconst scopeSwitcherBadgeRecipe = cva(\n  [\n    'inline-flex flex-none items-center gap-2 rounded-tf-pill bg-tf-panel-hi px-2 py-1',\n    'text-tf-caption-sm font-normal tabular-nums',\n  ],\n  {\n    defaultVariants: { tone: 'accent' },\n    variants: {\n      tone: {\n        accent: 'text-tf-accent-hi',\n        warning: 'text-tf-warning-hi',\n      },\n    },\n  },\n)\n\nconst scopeSwitcherDotRecipe = cva('size-1.5 flex-none rounded-tf-pill bg-current')\n\nconst scopeSwitcherWarningRecipe = cva('flex-none text-tf-danger-hi')\n\nconst scopeSwitcherAnatomy = anatomy({\n  eyebrow: { part: 'eyebrow', recipe: scopeSwitcherEyebrowRecipe, required: false },\n  list: { part: 'list', recipe: menuListRecipe, required: false },\n  mark: { part: 'mark', recipe: scopeSwitcherMarkRecipe, required: true },\n  root: { part: 'scope-switcher', recipe: scopeSwitcherRecipe, required: true },\n  rowText: { part: 'row-text', recipe: scopeSwitcherRowTextRecipe, required: true },\n  text: { part: 'text', recipe: scopeSwitcherTextRecipe, required: false },\n  value: { part: 'value', recipe: scopeSwitcherValueRecipe, required: true },\n})\n\nexport {\n  scopeSwitcherAnatomy,\n  scopeSwitcherBadgeRecipe,\n  scopeSwitcherChevronsRecipe,\n  scopeSwitcherCodeRecipe,\n  scopeSwitcherDotRecipe,\n  scopeSwitcherEyebrowRecipe,\n  scopeSwitcherIconRecipe,\n  scopeSwitcherListRecipe,\n  scopeSwitcherMarkRecipe,\n  scopeSwitcherPillIconRecipe,\n  scopeSwitcherPillRecipe,\n  scopeSwitcherRecipe,\n  scopeSwitcherRowNameRecipe,\n  scopeSwitcherRowMetaRecipe,\n  scopeSwitcherRowRecipe,\n  scopeSwitcherRowTextRecipe,\n  scopeSwitcherTextRecipe,\n  scopeSwitcherValueRecipe,\n  scopeSwitcherWarningRecipe,\n}\n"],"mappings":";;;;;;;;AAUA,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,0BAA0B,IAAI;CAClC;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,0BAA0B,IAAI,uBAAuB,cAAc;AAEzE,MAAM,6BAA6B,IAAI,CACrC,iDACA,WACF,CAAC;AAED,MAAM,2BAA2B,IAC/B,mFACF;AAEA,MAAM,8BAA8B,IAAI;CACtC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,8BAA8B,IAAI,6BAA6B;AAErE,MAAM,0BAA0B,IAAI;CAClC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,0BAA0B,IAAI,CAAC,qCAAqC,GAAG,cAAc,CAAC;AAE5F,MAAM,0BAA0B,IAAI,CAClC,GAAG,gBACH,sDACF,CAAC;AAED,MAAM,yBAAyB,IAC7B;CACE;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,UAAU,MAAM;CACnC,UAAU,EACR,UAAU;EACR,OAAO;EACP,MAAM;CACR,EACF;AACF,CACF;AAEA,MAAM,0BAA0B,IAAI;CAClC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,6BAA6B,IAAI,oCAAoC;AAE3E,MAAM,6BAA6B,IAAI,iDAAiD;AAExF,MAAM,6BAA6B,IAAI,2CAA2C;AAElF,MAAM,2BAA2B,IAC/B,CACE,qFACA,6CACF,GACA;CACE,iBAAiB,EAAE,MAAM,SAAS;CAClC,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,SAAS;CACX,EACF;AACF,CACF;AAEA,MAAM,yBAAyB,IAAI,+CAA+C;AAElF,MAAM,6BAA6B,IAAI,6BAA6B;AAEpE,MAAM,uBAAuB,QAAQ;CACnC,SAAS;EAAE,MAAM;EAAW,QAAQ;EAA4B,UAAU;CAAM;CAChF,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAM;CAC9D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAyB,UAAU;CAAK;CACtE,MAAM;EAAE,MAAM;EAAkB,QAAQ;EAAqB,UAAU;CAAK;CAC5E,SAAS;EAAE,MAAM;EAAY,QAAQ;EAA4B,UAAU;CAAK;CAChF,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAyB,UAAU;CAAM;CACvE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAA0B,UAAU;CAAK;AAC3E,CAAC"}

package/dist/recipes/scrollArea.d.ts

@@ -8,12 +8,21 @@ declare const scrollAreaRecipe: (props?: ({
 declare const scrollViewportRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const scrollContentRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const scrollBarRecipe: (props?: ({
-  way?: "vertical" | "horizontal" | null | undefined;
+  way?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const scrollThumbRecipe: (props?: ({
-  way?: "vertical" | "horizontal" | null | undefined;
+  way?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const scrollCornerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scrollAreaAnatomy: {
+  readonly root: {
+    readonly part: "scroll-area";
+    readonly recipe: (props?: ({
+      surface?: "bare" | "card" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type ScrollAreaSurface, defaultScrollAreaSurface, scrollAreaRecipe, scrollAreaSurfaces, scrollBarRecipe, scrollContentRecipe, scrollCornerRecipe, scrollThumbRecipe, scrollViewportRecipe };
+export { type ScrollAreaSurface, defaultScrollAreaSurface, scrollAreaAnatomy, scrollAreaRecipe, scrollAreaSurfaces, scrollBarRecipe, scrollContentRecipe, scrollCornerRecipe, scrollThumbRecipe, scrollViewportRecipe };
 //# sourceMappingURL=scrollArea.d.ts.map

package/dist/recipes/scrollArea.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { scrollFades } from "../parts/scroll.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/scrollArea.ts
@@ -37,7 +38,12 @@ const scrollThumbRecipe = cva([
 	} }
 });
 const scrollCornerRecipe = cva("bg-transparent");
+const scrollAreaAnatomy = anatomy({ root: {
+	part: "scroll-area",
+	recipe: scrollAreaRecipe,
+	required: true
+} });
 //#endregion
-export { defaultScrollAreaSurface, scrollAreaRecipe, scrollAreaSurfaces, scrollBarRecipe, scrollContentRecipe, scrollCornerRecipe, scrollThumbRecipe, scrollViewportRecipe };
+export { defaultScrollAreaSurface, scrollAreaAnatomy, scrollAreaRecipe, scrollAreaSurfaces, scrollBarRecipe, scrollContentRecipe, scrollCornerRecipe, scrollThumbRecipe, scrollViewportRecipe };
 
 //# sourceMappingURL=scrollArea.js.map

package/dist/recipes/scrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollArea.js","names":[],"sources":["../../src/recipes/scrollArea.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { scrollFades } from '#parts/scroll'\n\nconst RAIL = 'rounded-tf-inline'\n\ntype ScrollAreaSurface = 'card' | 'bare'\n\ntype ScrollAreaWay = 'vertical' | 'horizontal'\n\nconst defaultScrollAreaSurface = 'card' satisfies ScrollAreaSurface\n\nconst scrollAreaSurfaces = ['card', 'bare'] as const satisfies readonly ScrollAreaSurface[]\n\nconst scrollAreaRecipe = cva(['relative flex flex-col', 'font-tf-body'], {\n  defaultVariants: { surface: defaultScrollAreaSurface },\n  variants: {\n    surface: {\n      bare: '',\n      card: 'tf-edge-sweep rounded-tf-block bg-tf-panel px-2 shadow-tf-float tf-edge-plain',\n    } satisfies Record<ScrollAreaSurface, string>,\n  },\n})\n\nconst scrollViewportRecipe = cva([\n  'flex tf-scroll-hidden min-h-0 flex-col py-2 pr-3 outline-hidden',\n  'in-data-overflow-x:pb-3',\n  ...scrollFades,\n])\n\nconst scrollContentRecipe = cva('flex flex-col')\n\nconst scrollBarRecipe = cva(\n  [`${RAIL} bg-tf-panel`, 'tf-transition motion-reduce:transition-none'],\n  {\n    defaultVariants: { way: 'vertical' },\n    variants: {\n      way: {\n        horizontal: 'mx-2 mb-1 h-1 opacity-0 in-data-overflow-x:opacity-100',\n        vertical: 'my-2 mr-1 w-1 opacity-0 in-data-overflow-y:opacity-100',\n      } satisfies Record<ScrollAreaWay, string>,\n    },\n  },\n)\n\nconst scrollThumbRecipe = cva(\n  [\n    `${RAIL} bg-tf-line`,\n    'in-data-hover:bg-tf-line-hi in-data-scrolling:bg-tf-line-hi',\n    'data-dragging:bg-tf-accent-hi',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    defaultVariants: { way: 'vertical' },\n    variants: {\n      way: {\n        horizontal: 'h-1 min-w-tf-icon-solo-lg',\n        vertical: 'min-h-tf-icon-solo-lg w-1',\n      } satisfies Record<ScrollAreaWay, string>,\n    },\n  },\n)\n\nconst scrollCornerRecipe = cva('bg-transparent')\n\nexport {\n  type ScrollAreaSurface,\n  defaultScrollAreaSurface,\n  scrollAreaRecipe,\n  scrollAreaSurfaces,\n  scrollBarRecipe,\n  scrollContentRecipe,\n  scrollCornerRecipe,\n  scrollThumbRecipe,\n  scrollViewportRecipe,\n}\n"],"mappings":";;;AAIA,MAAM,OAAO;AAMb,MAAM,2BAA2B;AAEjC,MAAM,qBAAqB,CAAC,QAAQ,MAAM;AAE1C,MAAM,mBAAmB,IAAI,CAAC,0BAA0B,cAAc,GAAG;CACvE,iBAAiB,EAAE,SAAS,yBAAyB;CACrD,UAAU,EACR,SAAS;EACP,MAAM;EACN,MAAM;CACR,EACF;AACF,CAAC;AAED,MAAM,uBAAuB,IAAI;CAC/B;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,sBAAsB,IAAI,eAAe;AAE/C,MAAM,kBAAkB,IACtB,CAAC,GAAG,KAAK,eAAe,6CAA6C,GACrE;CACE,iBAAiB,EAAE,KAAK,WAAW;CACnC,UAAU,EACR,KAAK;EACH,YAAY;EACZ,UAAU;CACZ,EACF;AACF,CACF;AAEA,MAAM,oBAAoB,IACxB;CACE,GAAG,KAAK;CACR;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,KAAK,WAAW;CACnC,UAAU,EACR,KAAK;EACH,YAAY;EACZ,UAAU;CACZ,EACF;AACF,CACF;AAEA,MAAM,qBAAqB,IAAI,gBAAgB"}
+{"version":3,"file":"scrollArea.js","names":[],"sources":["../../src/recipes/scrollArea.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { scrollFades } from '#parts/scroll'\n\nconst RAIL = 'rounded-tf-inline'\n\ntype ScrollAreaSurface = 'card' | 'bare'\n\ntype ScrollAreaWay = 'vertical' | 'horizontal'\n\nconst defaultScrollAreaSurface = 'card' satisfies ScrollAreaSurface\n\nconst scrollAreaSurfaces = ['card', 'bare'] as const satisfies readonly ScrollAreaSurface[]\n\nconst scrollAreaRecipe = cva(['relative flex flex-col', 'font-tf-body'], {\n  defaultVariants: { surface: defaultScrollAreaSurface },\n  variants: {\n    surface: {\n      bare: '',\n      card: 'tf-edge-sweep rounded-tf-block bg-tf-panel px-2 shadow-tf-float tf-edge-plain',\n    } satisfies Record<ScrollAreaSurface, string>,\n  },\n})\n\nconst scrollViewportRecipe = cva([\n  'flex tf-scroll-hidden min-h-0 flex-col py-2 pr-3 outline-hidden',\n  'in-data-overflow-x:pb-3',\n  ...scrollFades,\n])\n\nconst scrollContentRecipe = cva('flex flex-col')\n\nconst scrollBarRecipe = cva(\n  [`${RAIL} bg-tf-panel`, 'tf-transition motion-reduce:transition-none'],\n  {\n    defaultVariants: { way: 'vertical' },\n    variants: {\n      way: {\n        horizontal: 'mx-2 mb-1 h-1 opacity-0 in-data-overflow-x:opacity-100',\n        vertical: 'my-2 mr-1 w-1 opacity-0 in-data-overflow-y:opacity-100',\n      } satisfies Record<ScrollAreaWay, string>,\n    },\n  },\n)\n\nconst scrollThumbRecipe = cva(\n  [\n    `${RAIL} bg-tf-line`,\n    'in-data-hover:bg-tf-line-hi in-data-scrolling:bg-tf-line-hi',\n    'data-dragging:bg-tf-accent-hi',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    defaultVariants: { way: 'vertical' },\n    variants: {\n      way: {\n        horizontal: 'h-1 min-w-tf-icon-solo-lg',\n        vertical: 'min-h-tf-icon-solo-lg w-1',\n      } satisfies Record<ScrollAreaWay, string>,\n    },\n  },\n)\n\nconst scrollCornerRecipe = cva('bg-transparent')\n\nconst scrollAreaAnatomy = anatomy({\n  root: { part: 'scroll-area', recipe: scrollAreaRecipe, required: true },\n})\n\nexport {\n  type ScrollAreaSurface,\n  defaultScrollAreaSurface,\n  scrollAreaAnatomy,\n  scrollAreaRecipe,\n  scrollAreaSurfaces,\n  scrollBarRecipe,\n  scrollContentRecipe,\n  scrollCornerRecipe,\n  scrollThumbRecipe,\n  scrollViewportRecipe,\n}\n"],"mappings":";;;;AAKA,MAAM,OAAO;AAMb,MAAM,2BAA2B;AAEjC,MAAM,qBAAqB,CAAC,QAAQ,MAAM;AAE1C,MAAM,mBAAmB,IAAI,CAAC,0BAA0B,cAAc,GAAG;CACvE,iBAAiB,EAAE,SAAS,yBAAyB;CACrD,UAAU,EACR,SAAS;EACP,MAAM;EACN,MAAM;CACR,EACF;AACF,CAAC;AAED,MAAM,uBAAuB,IAAI;CAC/B;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,sBAAsB,IAAI,eAAe;AAE/C,MAAM,kBAAkB,IACtB,CAAC,GAAG,KAAK,eAAe,6CAA6C,GACrE;CACE,iBAAiB,EAAE,KAAK,WAAW;CACnC,UAAU,EACR,KAAK;EACH,YAAY;EACZ,UAAU;CACZ,EACF;AACF,CACF;AAEA,MAAM,oBAAoB,IACxB;CACE,GAAG,KAAK;CACR;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,KAAK,WAAW;CACnC,UAAU,EACR,KAAK;EACH,YAAY;EACZ,UAAU;CACZ,EACF;AACF,CACF;AAEA,MAAM,qBAAqB,IAAI,gBAAgB;AAE/C,MAAM,oBAAoB,QAAQ,EAChC,MAAM;CAAE,MAAM;CAAe,QAAQ;CAAkB,UAAU;AAAK,EACxE,CAAC"}

package/dist/recipes/searchPalette.d.ts

@@ -14,6 +14,53 @@ declare const searchHitTextRecipe: (props?: import("class-variance-authority/typ
 declare const searchHitMetaRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const searchEmptyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const searchFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchPaletteAnatomy: {
+  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 hint: {
+    readonly part: "hint";
+    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 meta: {
+    readonly part: "meta";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "search-palette";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly rule: {
+    readonly part: "rule";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly searchTrigger: {
+    readonly part: "search-trigger";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly shortcut: {
+    readonly part: "shortcut";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly 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.d.ts.map

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"}