@techfides/ui-library-design 0.3.1 → 0.7.0

package/dist/recipes/bars.js.map

@@ -1 +1 @@
-{"version":3,"file":"bars.js","names":[],"sources":["../../src/recipes/bars.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst barsRecipe = cva([\n  '@container relative isolate flex grow flex-col justify-between gap-4 p-6',\n  'rounded-tf-card bg-tf-glass shadow-tf-float backdrop-blur-tf-glass',\n  'tf-edge-sweep font-tf-body text-tf-fg tf-transition',\n])\n\nconst barsHeadRecipe = cva('flex flex-wrap items-start justify-between gap-4')\n\nconst barsTextRecipe = cva('flex flex-col gap-1')\n\nconst barsLabelRecipe = cva('text-tf-body-sm font-medium text-tf-fg')\n\nconst barsHintRecipe = cva('text-tf-caption-sm text-tf-muted')\n\nconst barsFootRecipe = cva('flex flex-col items-end gap-1 text-tf-caption-sm text-tf-muted')\n\nconst barsLegendRecipe = cva('flex items-center gap-2')\n\nconst barsLegendListRecipe = cva('flex flex-wrap items-center gap-4')\n\nconst barsLegendDotRecipe = cva('size-2 flex-none rounded-tf-pill', {\n  defaultVariants: { tone: 'accent' },\n  variants: {\n    tone: {\n      accent: 'bg-tf-blend blend-tf-accent',\n      plain: '',\n    },\n  },\n})\n\nconst barsSummaryRecipe = cva('tabular-nums')\n\nconst barsChartRecipe = cva('h-36 w-full')\n\nexport {\n  barsChartRecipe,\n  barsFootRecipe,\n  barsHeadRecipe,\n  barsHintRecipe,\n  barsLabelRecipe,\n  barsLegendDotRecipe,\n  barsLegendListRecipe,\n  barsLegendRecipe,\n  barsRecipe,\n  barsSummaryRecipe,\n  barsTextRecipe,\n}\n"],"mappings":";;AAEA,MAAM,aAAa,IAAI;CACrB;CACA;CACA;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,kDAAkD;AAE7E,MAAM,iBAAiB,IAAI,qBAAqB;AAEhD,MAAM,kBAAkB,IAAI,wCAAwC;AAEpE,MAAM,iBAAiB,IAAI,kCAAkC;AAE7D,MAAM,iBAAiB,IAAI,gEAAgE;AAE3F,MAAM,mBAAmB,IAAI,yBAAyB;AAEtD,MAAM,uBAAuB,IAAI,mCAAmC;AAEpE,MAAM,sBAAsB,IAAI,oCAAoC;CAClE,iBAAiB,EAAE,MAAM,SAAS;CAClC,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,cAAc;AAE5C,MAAM,kBAAkB,IAAI,aAAa"}
+{"version":3,"file":"bars.js","names":[],"sources":["../../src/recipes/bars.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nconst barsRecipe = cva([\n  '@container relative isolate flex grow flex-col justify-between gap-4 p-6',\n  'rounded-tf-card bg-tf-glass shadow-tf-float backdrop-blur-tf-glass',\n  'tf-edge-sweep font-tf-body text-tf-fg tf-transition',\n])\n\nconst barsHeadRecipe = cva('flex flex-wrap items-start justify-between gap-4')\n\nconst barsTextRecipe = cva('flex flex-col gap-1')\n\nconst barsLabelRecipe = cva('text-tf-body-sm font-medium text-tf-fg')\n\nconst barsHintRecipe = cva('text-tf-caption-sm text-tf-muted')\n\nconst barsFootRecipe = cva('flex flex-col items-end gap-1 text-tf-caption-sm text-tf-muted')\n\nconst barsLegendRecipe = cva('flex items-center gap-2')\n\nconst barsLegendListRecipe = cva('flex flex-wrap items-center gap-4')\n\nconst barsLegendDotRecipe = cva('size-2 flex-none rounded-tf-pill', {\n  defaultVariants: { tone: 'accent' },\n  variants: {\n    tone: {\n      accent: 'bg-tf-blend blend-tf-accent',\n      plain: '',\n    },\n  },\n})\n\nconst barsSummaryRecipe = cva('tabular-nums')\n\nconst barsChartRecipe = cva('h-36 w-full')\n\nconst barsAnatomy = anatomy({\n  chart: { part: 'chart', recipe: barsChartRecipe, required: true },\n  dot: { part: 'dot', recipe: barsLegendDotRecipe, required: false },\n  foot: { part: 'foot', recipe: barsFootRecipe, required: false },\n  head: { part: 'head', recipe: barsHeadRecipe, required: true },\n  hint: { part: 'hint', recipe: barsHintRecipe, required: false },\n  label: { part: 'label', recipe: barsLabelRecipe, required: true },\n  legend: { part: 'legend', recipe: barsLegendRecipe, required: false },\n  legendList: { part: 'legend-list', recipe: barsLegendListRecipe, required: false },\n  root: { part: 'bars', recipe: barsRecipe, required: true },\n  summary: { part: 'summary', recipe: barsSummaryRecipe, required: false },\n  text: { part: 'text', recipe: barsTextRecipe, required: true },\n})\n\nexport {\n  barsAnatomy,\n  barsChartRecipe,\n  barsFootRecipe,\n  barsHeadRecipe,\n  barsHintRecipe,\n  barsLabelRecipe,\n  barsLegendDotRecipe,\n  barsLegendListRecipe,\n  barsLegendRecipe,\n  barsRecipe,\n  barsSummaryRecipe,\n  barsTextRecipe,\n}\n"],"mappings":";;;AAIA,MAAM,aAAa,IAAI;CACrB;CACA;CACA;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,kDAAkD;AAE7E,MAAM,iBAAiB,IAAI,qBAAqB;AAEhD,MAAM,kBAAkB,IAAI,wCAAwC;AAEpE,MAAM,iBAAiB,IAAI,kCAAkC;AAE7D,MAAM,iBAAiB,IAAI,gEAAgE;AAE3F,MAAM,mBAAmB,IAAI,yBAAyB;AAEtD,MAAM,uBAAuB,IAAI,mCAAmC;AAEpE,MAAM,sBAAsB,IAAI,oCAAoC;CAClE,iBAAiB,EAAE,MAAM,SAAS;CAClC,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,cAAc;AAE5C,MAAM,kBAAkB,IAAI,aAAa;AAEzC,MAAM,cAAc,QAAQ;CAC1B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAK;CAChE,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAqB,UAAU;CAAM;CACjE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAM;CAC9D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAK;CAC7D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAM;CAC9D,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAK;CAChE,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAkB,UAAU;CAAM;CACpE,YAAY;EAAE,MAAM;EAAe,QAAQ;EAAsB,UAAU;CAAM;CACjF,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAY,UAAU;CAAK;CACzD,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAmB,UAAU;CAAM;CACvE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAK;AAC/D,CAAC"}

package/dist/recipes/brandMark.d.ts

@@ -1,5 +1,12 @@
 //#region src/recipes/brandMark.d.ts
 declare const brandMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const brandMarkAnatomy: {
+  readonly root: {
+    readonly part: "brand-mark";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { brandMarkRecipe };
+export { brandMarkAnatomy, brandMarkRecipe };
 //# sourceMappingURL=brandMark.d.ts.map

package/dist/recipes/brandMark.js

@@ -1,7 +1,13 @@
+import { anatomy } from "../anatomy.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/brandMark.ts
 const brandMarkRecipe = cva("block size-tf-icon-solo-sm shrink-0");
+const brandMarkAnatomy = anatomy({ root: {
+	part: "brand-mark",
+	recipe: brandMarkRecipe,
+	required: true
+} });
 //#endregion
-export { brandMarkRecipe };
+export { brandMarkAnatomy, brandMarkRecipe };
 
 //# sourceMappingURL=brandMark.js.map

package/dist/recipes/brandMark.js.map

@@ -1 +1 @@
-{"version":3,"file":"brandMark.js","names":[],"sources":["../../src/recipes/brandMark.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst brandMarkRecipe = cva('block size-tf-icon-solo-sm shrink-0')\n\nexport { brandMarkRecipe }\n"],"mappings":";;AAEA,MAAM,kBAAkB,IAAI,qCAAqC"}
+{"version":3,"file":"brandMark.js","names":[],"sources":["../../src/recipes/brandMark.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nconst brandMarkRecipe = cva('block size-tf-icon-solo-sm shrink-0')\n\nconst brandMarkAnatomy = anatomy({\n  root: { part: 'brand-mark', recipe: brandMarkRecipe, required: true },\n})\n\nexport { brandMarkAnatomy, brandMarkRecipe }\n"],"mappings":";;;AAIA,MAAM,kBAAkB,IAAI,qCAAqC;AAEjE,MAAM,mBAAmB,QAAQ,EAC/B,MAAM;CAAE,MAAM;CAAc,QAAQ;CAAiB,UAAU;AAAK,EACtE,CAAC"}

package/dist/recipes/button.d.ts

@@ -2,7 +2,7 @@ import { Tone } from "../tone.js";
 //#region src/recipes/button.d.ts
 declare const buttonSpinnerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const buttonWordsRecipe: (props?: ({
-  size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'warning' | 'info' | 'link';
 type ButtonAccent = Tone;
@@ -11,13 +11,50 @@ declare const buttonRecipe: (props?: ({
   fullWidth?: boolean | null | undefined;
   iconOnly?: boolean | null | undefined;
   leading?: boolean | null | undefined;
-  size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
   trailing?: boolean | null | undefined;
-  variant?: "success" | "warning" | "info" | "danger" | "ghost" | "secondary" | "link" | "primary" | null | undefined;
+  variant?: "ghost" | "success" | "warning" | "info" | "danger" | "secondary" | "link" | "primary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const buttonVariants: readonly ["primary", "secondary", "ghost", "success", "warning", "danger", "info", "link"];
 declare const buttonSizes: readonly ["xs", "sm", "md", "lg"];
 declare const buttonAccents: readonly ["accent", "success", "warning", "info", "danger"];
+declare const buttonAnatomy: {
+  readonly cloud: {
+    readonly part: "cloud";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly nebula: {
+    readonly part: "nebula";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "button";
+    readonly recipe: (props?: ({
+      accent?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+      fullWidth?: boolean | null | undefined;
+      iconOnly?: boolean | null | undefined;
+      leading?: boolean | null | undefined;
+      size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+      trailing?: boolean | null | undefined;
+      variant?: "ghost" | "success" | "warning" | "info" | "danger" | "secondary" | "link" | "primary" | null | undefined;
+    } & 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 words: {
+    readonly part: "words";
+    readonly recipe: (props?: ({
+      size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+};
 //#endregion
-export { type ButtonAccent, type ButtonVariant, buttonAccents, buttonRecipe, buttonSizes, buttonSpinnerRecipe, buttonVariants, buttonWordsRecipe };
+export { type ButtonAccent, type ButtonVariant, buttonAccents, buttonAnatomy, buttonRecipe, buttonSizes, buttonSpinnerRecipe, buttonVariants, buttonWordsRecipe };
 //# sourceMappingURL=button.d.ts.map

package/dist/recipes/button.js

@@ -1,6 +1,8 @@
-import { toneBlend } from "../tone.js";
+import { anatomy } from "../anatomy.js";
 import { controlBase, controlBox, controlGap, controlInert, controlReach, controlSizes, hitArea } from "../parts/control.js";
 import { defaultTone, tones } from "../parts/tone.js";
+import { toneBlend } from "../tone.js";
+import { nebulaCloudRecipe, nebulaVeilRecipe } from "./nebula.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/button.ts
 const HIT_AREA = hitArea("after:h-tf-target");
@@ -223,7 +225,34 @@ const buttonVariants = [
 ];
 const buttonSizes = ["xs", ...controlSizes];
 const buttonAccents = tones;
+const buttonAnatomy = anatomy({
+	cloud: {
+		part: "cloud",
+		recipe: nebulaCloudRecipe,
+		required: false
+	},
+	nebula: {
+		part: "nebula",
+		recipe: nebulaVeilRecipe,
+		required: false
+	},
+	root: {
+		part: "button",
+		recipe: buttonRecipe,
+		required: true
+	},
+	spinner: {
+		part: "spinner",
+		recipe: buttonSpinnerRecipe,
+		required: false
+	},
+	words: {
+		part: "words",
+		recipe: buttonWordsRecipe,
+		required: false
+	}
+});
 //#endregion
-export { buttonAccents, buttonRecipe, buttonSizes, buttonSpinnerRecipe, buttonVariants, buttonWordsRecipe };
+export { buttonAccents, buttonAnatomy, buttonRecipe, buttonSizes, buttonSpinnerRecipe, buttonVariants, buttonWordsRecipe };
 
 //# sourceMappingURL=button.js.map

package/dist/recipes/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/recipes/button.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { ButtonSize } from '#control'\nimport {\n  controlBase,\n  controlBox,\n  controlGap,\n  controlInert,\n  controlReach,\n  controlSizes,\n  hitArea,\n} from '#parts/control'\nimport { defaultTone, tones } from '#parts/tone'\nimport type { Tone } from '#tone'\nimport { toneBlend } from '#tone'\n\nconst HIT_AREA = hitArea('after:h-tf-target')\n\nconst QUIET_HIT = hitArea('after:h-tf-target', 'after:w-tf-target')\n\nconst buttonFace = [\n  'isolate',\n  'justify-center',\n  'whitespace-nowrap',\n  'tracking-tf-tight',\n  'tf-cloud-md',\n]\n\nconst buttonSpinnerRecipe = cva([\n  'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  'tf-arrives motion-reduce:transition-none',\n])\n\nconst buttonWordsRecipe = cva(\n  [\n    'inline-flex items-center justify-center tf-text-trim',\n    'tf-crossfades motion-reduce:transition-none',\n    'in-data-loading:opacity-0',\n  ],\n  {\n    defaultVariants: { size: 'md' },\n    variants: { size: controlGap },\n  },\n)\n\nconst buttonTempo = ['tf-blend-drift', 'tf-weather-trail']\n\nconst buttonGeometry = {\n  lg: `${controlBox.lg} rounded-tf-card px-8 font-medium`,\n  md: `${controlBox.md} rounded-tf-block px-6`,\n  sm: `${controlBox.sm} px-4 ${HIT_AREA}`,\n  xs: `${controlBox.xs} px-2 ${QUIET_HIT}`,\n} satisfies Record<ButtonSize, string>\n\ntype ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'ghost'\n  | 'danger'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'link'\ntype ButtonAccent = Tone\n\nconst CLOUD = ['tf-cloud-brand', 'tf-clouded', 'interactive:hovered:tf-clouding'].join(' ')\nconst CLOUD_INK = ['tf-cloud-ink', 'tf-clouded', 'interactive:hovered:tf-clouding'].join(' ')\nconst CLOUD_ON_REACH = [\n  'tf-cloud-ink',\n  'tf-cloud-hidden',\n  'interactive:hovered:tf-clouding',\n  'interactive:hovered:tf-plated',\n].join(' ')\n\nconst BLEND = [\n  'bg-tf-blend',\n  CLOUD,\n  'tf-edge-sweep tf-edge-milk tf-swept-top',\n  'tf-glow tf-lit-rest tf-settled',\n  'interactive:hovered:tf-blended',\n  'interactive:hovered:tf-milked',\n  'interactive:hovered:tf-lit-inside',\n  'interactive:hovered:tf-lifted',\n  'interactive:pressed:tf-pressed',\n  'motion-safe:interactive:pressed:tf-tilted',\n].join(' ')\nconst INK = [\n  'tf-ink-glide',\n  'data-loading:bg-none',\n  '[&_svg]:tf-transition [&_svg]:text-tf-muted',\n].join(' ')\n\nconst MARK_ON_REACH = {\n  accent: 'interactive:hovered:[&_svg]:text-tf-accent-hi',\n  danger: 'interactive:hovered:[&_svg]:text-tf-danger-hi',\n  info: 'interactive:hovered:[&_svg]:text-tf-info-hi',\n  success: 'interactive:hovered:[&_svg]:text-tf-success-hi',\n  warning: 'interactive:hovered:[&_svg]:text-tf-warning-hi',\n} satisfies Record<Tone, string>\n\nconst WORDS_ON_REACH = {\n  accent: 'interactive:hovered:text-tf-accent-hi',\n  danger: 'interactive:hovered:text-tf-danger-hi',\n  info: 'interactive:hovered:text-tf-info-hi',\n  success: 'interactive:hovered:text-tf-success-hi',\n  warning: 'interactive:hovered:text-tf-warning-hi',\n} satisfies Record<Tone, string>\n\nconst FLAT_INK = 'text-tf-muted interactive:hovered:text-tf-fg'\n\nconst buttonPress = [\n  'motion-safe:interactive:pressed:translate-y-px',\n  'motion-reduce:interactive:pressed:brightness-95',\n]\n\nconst buttonRecipe = cva(\n  [\n    ...controlBase,\n    ...buttonFace,\n    ...buttonTempo,\n    ...controlReach,\n    ...buttonPress,\n    ...controlInert,\n    'data-loading:opacity-100',\n  ],\n  {\n    compoundVariants: [\n      {\n        class: 'tf-cloud-tight',\n        variant: 'ghost',\n      },\n      ...tones.map((accent) => ({\n        accent,\n        class: `${toneBlend[accent]} ${WORDS_ON_REACH[accent]} ${MARK_ON_REACH[accent]}`,\n        variant: 'ghost' as const,\n      })),\n      {\n        class: FLAT_INK,\n        iconOnly: true,\n        variant: 'ghost',\n      },\n      {\n        class: FLAT_INK,\n        iconOnly: true,\n        variant: 'secondary',\n      },\n      {\n        class: 'px-0',\n        iconOnly: true,\n      },\n      {\n        class: 'tf-icons-solo [&_svg]:size-tf-icon-solo-xs',\n        iconOnly: true,\n        size: 'xs',\n      },\n      {\n        class: 'tf-icons-solo [&_svg]:size-tf-icon-solo-sm',\n        iconOnly: true,\n        size: 'sm',\n      },\n      {\n        class: 'tf-icons-solo [&_svg]:size-tf-icon-solo-md',\n        iconOnly: true,\n        size: 'md',\n      },\n      {\n        class: 'tf-icons-solo [&_svg]:size-tf-icon-solo-lg',\n        iconOnly: true,\n        size: 'lg',\n      },\n      {\n        class: 'pr-7',\n        size: 'lg',\n        trailing: true,\n      },\n      {\n        class: 'pr-5',\n        size: 'md',\n        trailing: true,\n      },\n      {\n        class: 'pr-3',\n        size: 'sm',\n        trailing: true,\n      },\n      {\n        class: 'pl-7',\n        leading: true,\n        size: 'lg',\n      },\n      {\n        class: 'pl-5',\n        leading: true,\n        size: 'md',\n      },\n      {\n        class: 'pl-3',\n        leading: true,\n        size: 'sm',\n      },\n      {\n        class: 'h-auto w-auto justify-start bg-transparent p-0 shadow-none outline-offset-4',\n        variant: 'link',\n      },\n    ],\n    defaultVariants: {\n      accent: defaultTone,\n      fullWidth: false,\n      iconOnly: false,\n      leading: false,\n      size: 'md',\n      trailing: false,\n      variant: 'primary',\n    },\n    variants: {\n      accent: {\n        accent: '',\n        danger: '',\n        info: '',\n        success: '',\n        warning: '',\n      } satisfies Record<ButtonAccent, string>,\n      fullWidth: {\n        false: '',\n        true: 'w-full',\n      },\n      iconOnly: {\n        false: '',\n        true: 'aspect-square',\n      },\n      leading: {\n        false: '',\n        true: '',\n      },\n      size: buttonGeometry,\n      trailing: {\n        false: '',\n        true: '',\n      },\n      variant: {\n        danger: `${BLEND} text-tf-on-semantic blend-tf-danger`,\n        ghost: `${INK} text-tf-fg tf-plated-quiet ${CLOUD_ON_REACH}`,\n        info: `${BLEND} text-tf-on-semantic blend-tf-info`,\n        link: 'text-tf-accent-hi underline underline-offset-2 interactive:hovered:text-tf-accent',\n        primary: `${BLEND} text-tf-on-accent blend-tf-accent`,\n        secondary: `${INK} text-tf-blend ${MARK_ON_REACH.accent} tf-glow tf-settled-quiet interactive:hovered:tf-blend-hushed interactive:hovered:tf-lit-rest ${CLOUD_INK} tf-blend-outline blend-tf-accent`,\n        success: `${BLEND} text-tf-on-semantic blend-tf-success`,\n        warning: `${BLEND} text-tf-on-semantic blend-tf-warning`,\n      } satisfies Record<ButtonVariant, string>,\n    },\n  },\n)\n\nconst buttonVariants = [\n  'primary',\n  'secondary',\n  'ghost',\n  'success',\n  'warning',\n  'danger',\n  'info',\n  'link',\n] as const satisfies readonly ButtonVariant[]\n\nconst buttonSizes = ['xs', ...controlSizes] as const satisfies readonly ButtonSize[]\n\nconst buttonAccents = tones\n\nexport {\n  type ButtonAccent,\n  type ButtonVariant,\n  buttonRecipe,\n  buttonSizes,\n  buttonSpinnerRecipe,\n  buttonAccents,\n  buttonVariants,\n  buttonWordsRecipe,\n}\n"],"mappings":";;;;;AAgBA,MAAM,WAAW,QAAQ,mBAAmB;AAE5C,MAAM,YAAY,QAAQ,qBAAqB,mBAAmB;AAElE,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,sBAAsB,IAAI,CAC9B,+DACA,0CACF,CAAC;AAED,MAAM,oBAAoB,IACxB;CACE;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,MAAM,KAAK;CAC9B,UAAU,EAAE,MAAM,WAAW;AAC/B,CACF;AAEA,MAAM,cAAc,CAAC,kBAAkB,kBAAkB;AAEzD,MAAM,iBAAiB;CACrB,IAAI,GAAG,WAAW,GAAG;CACrB,IAAI,GAAG,WAAW,GAAG;CACrB,IAAI,GAAG,WAAW,GAAG,QAAQ;CAC7B,IAAI,GAAG,WAAW,GAAG,QAAQ;AAC/B;AAaA,MAAM,QAAQ;CAAC;CAAkB;CAAc;AAAiC,CAAC,CAAC,KAAK,GAAG;AAC1F,MAAM,YAAY;CAAC;CAAgB;CAAc;AAAiC,CAAC,CAAC,KAAK,GAAG;AAC5F,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,QAAQ;CACZ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AACV,MAAM,MAAM;CACV;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,gBAAgB;CACpB,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,MAAM,iBAAiB;CACrB,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,MAAM,WAAW;AAEjB,MAAM,cAAc,CAClB,kDACA,iDACF;AAEA,MAAM,eAAe,IACnB;CACE,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH;AACF,GACA;CACE,kBAAkB;EAChB;GACE,OAAO;GACP,SAAS;EACX;EACA,GAAG,MAAM,KAAK,YAAY;GACxB;GACA,OAAO,GAAG,UAAU,QAAQ,GAAG,eAAe,QAAQ,GAAG,cAAc;GACvE,SAAS;EACX,EAAE;EACF;GACE,OAAO;GACP,UAAU;GACV,SAAS;EACX;EACA;GACE,OAAO;GACP,UAAU;GACV,SAAS;EACX;EACA;GACE,OAAO;GACP,UAAU;EACZ;EACA;GACE,OAAO;GACP,UAAU;GACV,MAAM;EACR;EACA;GACE,OAAO;GACP,UAAU;GACV,MAAM;EACR;EACA;GACE,OAAO;GACP,UAAU;GACV,MAAM;EACR;EACA;GACE,OAAO;GACP,UAAU;GACV,MAAM;EACR;EACA;GACE,OAAO;GACP,MAAM;GACN,UAAU;EACZ;EACA;GACE,OAAO;GACP,MAAM;GACN,UAAU;EACZ;EACA;GACE,OAAO;GACP,MAAM;GACN,UAAU;EACZ;EACA;GACE,OAAO;GACP,SAAS;GACT,MAAM;EACR;EACA;GACE,OAAO;GACP,SAAS;GACT,MAAM;EACR;EACA;GACE,OAAO;GACP,SAAS;GACT,MAAM;EACR;EACA;GACE,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB;EACf,QAAQ;EACR,WAAW;EACX,UAAU;EACV,SAAS;EACT,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,UAAU;EACR,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,SAAS;GACT,SAAS;EACX;EACA,WAAW;GACT,OAAO;GACP,MAAM;EACR;EACA,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,OAAO;GACP,MAAM;EACR;EACA,MAAM;EACN,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,QAAQ,GAAG,MAAM;GACjB,OAAO,GAAG,IAAI,8BAA8B;GAC5C,MAAM,GAAG,MAAM;GACf,MAAM;GACN,SAAS,GAAG,MAAM;GAClB,WAAW,GAAG,IAAI,iBAAiB,cAAc,OAAO,gGAAgG,UAAU;GAClK,SAAS,GAAG,MAAM;GAClB,SAAS,GAAG,MAAM;EACpB;CACF;AACF,CACF;AAEA,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,cAAc,CAAC,MAAM,GAAG,YAAY;AAE1C,MAAM,gBAAgB"}
+{"version":3,"file":"button.js","names":[],"sources":["../../src/recipes/button.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport type { ButtonSize } from '#control'\nimport {\n  controlBase,\n  controlBox,\n  controlGap,\n  controlInert,\n  controlReach,\n  controlSizes,\n  hitArea,\n} from '#parts/control'\nimport { defaultTone, tones } from '#parts/tone'\nimport type { Tone } from '#tone'\nimport { toneBlend } from '#tone'\n\nimport { nebulaCloudRecipe, nebulaVeilRecipe } from './nebula'\n\nconst HIT_AREA = hitArea('after:h-tf-target')\n\nconst QUIET_HIT = hitArea('after:h-tf-target', 'after:w-tf-target')\n\nconst buttonFace = [\n  'isolate',\n  'justify-center',\n  'whitespace-nowrap',\n  'tracking-tf-tight',\n  'tf-cloud-md',\n]\n\nconst buttonSpinnerRecipe = cva([\n  'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  'tf-arrives motion-reduce:transition-none',\n])\n\nconst buttonWordsRecipe = cva(\n  [\n    'inline-flex items-center justify-center tf-text-trim',\n    'tf-crossfades motion-reduce:transition-none',\n    'in-data-loading:opacity-0',\n  ],\n  {\n    defaultVariants: { size: 'md' },\n    variants: { size: controlGap },\n  },\n)\n\nconst buttonTempo = ['tf-blend-drift', 'tf-weather-trail']\n\nconst buttonGeometry = {\n  lg: `${controlBox.lg} rounded-tf-card px-8 font-medium`,\n  md: `${controlBox.md} rounded-tf-block px-6`,\n  sm: `${controlBox.sm} px-4 ${HIT_AREA}`,\n  xs: `${controlBox.xs} px-2 ${QUIET_HIT}`,\n} satisfies Record<ButtonSize, string>\n\ntype ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'ghost'\n  | 'danger'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'link'\ntype ButtonAccent = Tone\n\nconst CLOUD = ['tf-cloud-brand', 'tf-clouded', 'interactive:hovered:tf-clouding'].join(' ')\nconst CLOUD_INK = ['tf-cloud-ink', 'tf-clouded', 'interactive:hovered:tf-clouding'].join(' ')\nconst CLOUD_ON_REACH = [\n  'tf-cloud-ink',\n  'tf-cloud-hidden',\n  'interactive:hovered:tf-clouding',\n  'interactive:hovered:tf-plated',\n].join(' ')\n\nconst BLEND = [\n  'bg-tf-blend',\n  CLOUD,\n  'tf-edge-sweep tf-edge-milk tf-swept-top',\n  'tf-glow tf-lit-rest tf-settled',\n  'interactive:hovered:tf-blended',\n  'interactive:hovered:tf-milked',\n  'interactive:hovered:tf-lit-inside',\n  'interactive:hovered:tf-lifted',\n  'interactive:pressed:tf-pressed',\n  'motion-safe:interactive:pressed:tf-tilted',\n].join(' ')\nconst INK = [\n  'tf-ink-glide',\n  'data-loading:bg-none',\n  '[&_svg]:tf-transition [&_svg]:text-tf-muted',\n].join(' ')\n\nconst MARK_ON_REACH = {\n  accent: 'interactive:hovered:[&_svg]:text-tf-accent-hi',\n  danger: 'interactive:hovered:[&_svg]:text-tf-danger-hi',\n  info: 'interactive:hovered:[&_svg]:text-tf-info-hi',\n  success: 'interactive:hovered:[&_svg]:text-tf-success-hi',\n  warning: 'interactive:hovered:[&_svg]:text-tf-warning-hi',\n} satisfies Record<Tone, string>\n\nconst WORDS_ON_REACH = {\n  accent: 'interactive:hovered:text-tf-accent-hi',\n  danger: 'interactive:hovered:text-tf-danger-hi',\n  info: 'interactive:hovered:text-tf-info-hi',\n  success: 'interactive:hovered:text-tf-success-hi',\n  warning: 'interactive:hovered:text-tf-warning-hi',\n} satisfies Record<Tone, string>\n\nconst FLAT_INK = 'text-tf-muted interactive:hovered:text-tf-fg'\n\nconst buttonPress = [\n  'motion-safe:interactive:pressed:translate-y-px',\n  'motion-reduce:interactive:pressed:brightness-95',\n]\n\nconst buttonRecipe = cva(\n  [\n    ...controlBase,\n    ...buttonFace,\n    ...buttonTempo,\n    ...controlReach,\n    ...buttonPress,\n    ...controlInert,\n    'data-loading:opacity-100',\n  ],\n  {\n    compoundVariants: [\n      {\n        class: 'tf-cloud-tight',\n        variant: 'ghost',\n      },\n      ...tones.map((accent) => ({\n        accent,\n        class: `${toneBlend[accent]} ${WORDS_ON_REACH[accent]} ${MARK_ON_REACH[accent]}`,\n        variant: 'ghost' as const,\n      })),\n      {\n        class: FLAT_INK,\n        iconOnly: true,\n        variant: 'ghost',\n      },\n      {\n        class: FLAT_INK,\n        iconOnly: true,\n        variant: 'secondary',\n      },\n      {\n        class: 'px-0',\n        iconOnly: true,\n      },\n      {\n        class: 'tf-icons-solo [&_svg]:size-tf-icon-solo-xs',\n        iconOnly: true,\n        size: 'xs',\n      },\n      {\n        class: 'tf-icons-solo [&_svg]:size-tf-icon-solo-sm',\n        iconOnly: true,\n        size: 'sm',\n      },\n      {\n        class: 'tf-icons-solo [&_svg]:size-tf-icon-solo-md',\n        iconOnly: true,\n        size: 'md',\n      },\n      {\n        class: 'tf-icons-solo [&_svg]:size-tf-icon-solo-lg',\n        iconOnly: true,\n        size: 'lg',\n      },\n      {\n        class: 'pr-7',\n        size: 'lg',\n        trailing: true,\n      },\n      {\n        class: 'pr-5',\n        size: 'md',\n        trailing: true,\n      },\n      {\n        class: 'pr-3',\n        size: 'sm',\n        trailing: true,\n      },\n      {\n        class: 'pl-7',\n        leading: true,\n        size: 'lg',\n      },\n      {\n        class: 'pl-5',\n        leading: true,\n        size: 'md',\n      },\n      {\n        class: 'pl-3',\n        leading: true,\n        size: 'sm',\n      },\n      {\n        class: 'h-auto w-auto justify-start bg-transparent p-0 shadow-none outline-offset-4',\n        variant: 'link',\n      },\n    ],\n    defaultVariants: {\n      accent: defaultTone,\n      fullWidth: false,\n      iconOnly: false,\n      leading: false,\n      size: 'md',\n      trailing: false,\n      variant: 'primary',\n    },\n    variants: {\n      accent: {\n        accent: '',\n        danger: '',\n        info: '',\n        success: '',\n        warning: '',\n      } satisfies Record<ButtonAccent, string>,\n      fullWidth: {\n        false: '',\n        true: 'w-full',\n      },\n      iconOnly: {\n        false: '',\n        true: 'aspect-square',\n      },\n      leading: {\n        false: '',\n        true: '',\n      },\n      size: buttonGeometry,\n      trailing: {\n        false: '',\n        true: '',\n      },\n      variant: {\n        danger: `${BLEND} text-tf-on-semantic blend-tf-danger`,\n        ghost: `${INK} text-tf-fg tf-plated-quiet ${CLOUD_ON_REACH}`,\n        info: `${BLEND} text-tf-on-semantic blend-tf-info`,\n        link: 'text-tf-accent-hi underline underline-offset-2 interactive:hovered:text-tf-accent',\n        primary: `${BLEND} text-tf-on-accent blend-tf-accent`,\n        secondary: `${INK} text-tf-blend ${MARK_ON_REACH.accent} tf-glow tf-settled-quiet interactive:hovered:tf-blend-hushed interactive:hovered:tf-lit-rest ${CLOUD_INK} tf-blend-outline blend-tf-accent`,\n        success: `${BLEND} text-tf-on-semantic blend-tf-success`,\n        warning: `${BLEND} text-tf-on-semantic blend-tf-warning`,\n      } satisfies Record<ButtonVariant, string>,\n    },\n  },\n)\n\nconst buttonVariants = [\n  'primary',\n  'secondary',\n  'ghost',\n  'success',\n  'warning',\n  'danger',\n  'info',\n  'link',\n] as const satisfies readonly ButtonVariant[]\n\nconst buttonSizes = ['xs', ...controlSizes] as const satisfies readonly ButtonSize[]\n\nconst buttonAccents = tones\n\nconst buttonAnatomy = anatomy({\n  cloud: { part: 'cloud', recipe: nebulaCloudRecipe, required: false },\n  nebula: { part: 'nebula', recipe: nebulaVeilRecipe, required: false },\n  root: { part: 'button', recipe: buttonRecipe, required: true },\n  spinner: { part: 'spinner', recipe: buttonSpinnerRecipe, required: false },\n  words: { part: 'words', recipe: buttonWordsRecipe, required: false },\n})\n\nexport {\n  type ButtonAccent,\n  type ButtonVariant,\n  buttonAccents,\n  buttonAnatomy,\n  buttonRecipe,\n  buttonSizes,\n  buttonSpinnerRecipe,\n  buttonVariants,\n  buttonWordsRecipe,\n}\n"],"mappings":";;;;;;;AAmBA,MAAM,WAAW,QAAQ,mBAAmB;AAE5C,MAAM,YAAY,QAAQ,qBAAqB,mBAAmB;AAElE,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,sBAAsB,IAAI,CAC9B,+DACA,0CACF,CAAC;AAED,MAAM,oBAAoB,IACxB;CACE;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,MAAM,KAAK;CAC9B,UAAU,EAAE,MAAM,WAAW;AAC/B,CACF;AAEA,MAAM,cAAc,CAAC,kBAAkB,kBAAkB;AAEzD,MAAM,iBAAiB;CACrB,IAAI,GAAG,WAAW,GAAG;CACrB,IAAI,GAAG,WAAW,GAAG;CACrB,IAAI,GAAG,WAAW,GAAG,QAAQ;CAC7B,IAAI,GAAG,WAAW,GAAG,QAAQ;AAC/B;AAaA,MAAM,QAAQ;CAAC;CAAkB;CAAc;AAAiC,CAAC,CAAC,KAAK,GAAG;AAC1F,MAAM,YAAY;CAAC;CAAgB;CAAc;AAAiC,CAAC,CAAC,KAAK,GAAG;AAC5F,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,QAAQ;CACZ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AACV,MAAM,MAAM;CACV;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,gBAAgB;CACpB,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,MAAM,iBAAiB;CACrB,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,MAAM,WAAW;AAEjB,MAAM,cAAc,CAClB,kDACA,iDACF;AAEA,MAAM,eAAe,IACnB;CACE,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH;AACF,GACA;CACE,kBAAkB;EAChB;GACE,OAAO;GACP,SAAS;EACX;EACA,GAAG,MAAM,KAAK,YAAY;GACxB;GACA,OAAO,GAAG,UAAU,QAAQ,GAAG,eAAe,QAAQ,GAAG,cAAc;GACvE,SAAS;EACX,EAAE;EACF;GACE,OAAO;GACP,UAAU;GACV,SAAS;EACX;EACA;GACE,OAAO;GACP,UAAU;GACV,SAAS;EACX;EACA;GACE,OAAO;GACP,UAAU;EACZ;EACA;GACE,OAAO;GACP,UAAU;GACV,MAAM;EACR;EACA;GACE,OAAO;GACP,UAAU;GACV,MAAM;EACR;EACA;GACE,OAAO;GACP,UAAU;GACV,MAAM;EACR;EACA;GACE,OAAO;GACP,UAAU;GACV,MAAM;EACR;EACA;GACE,OAAO;GACP,MAAM;GACN,UAAU;EACZ;EACA;GACE,OAAO;GACP,MAAM;GACN,UAAU;EACZ;EACA;GACE,OAAO;GACP,MAAM;GACN,UAAU;EACZ;EACA;GACE,OAAO;GACP,SAAS;GACT,MAAM;EACR;EACA;GACE,OAAO;GACP,SAAS;GACT,MAAM;EACR;EACA;GACE,OAAO;GACP,SAAS;GACT,MAAM;EACR;EACA;GACE,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB;EACf,QAAQ;EACR,WAAW;EACX,UAAU;EACV,SAAS;EACT,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,UAAU;EACR,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,SAAS;GACT,SAAS;EACX;EACA,WAAW;GACT,OAAO;GACP,MAAM;EACR;EACA,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,OAAO;GACP,MAAM;EACR;EACA,MAAM;EACN,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,QAAQ,GAAG,MAAM;GACjB,OAAO,GAAG,IAAI,8BAA8B;GAC5C,MAAM,GAAG,MAAM;GACf,MAAM;GACN,SAAS,GAAG,MAAM;GAClB,WAAW,GAAG,IAAI,iBAAiB,cAAc,OAAO,gGAAgG,UAAU;GAClK,SAAS,GAAG,MAAM;GAClB,SAAS,GAAG,MAAM;EACpB;CACF;AACF,CACF;AAEA,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,cAAc,CAAC,MAAM,GAAG,YAAY;AAE1C,MAAM,gBAAgB;AAEtB,MAAM,gBAAgB,QAAQ;CAC5B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAmB,UAAU;CAAM;CACnE,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAkB,UAAU;CAAM;CACpE,MAAM;EAAE,MAAM;EAAU,QAAQ;EAAc,UAAU;CAAK;CAC7D,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAqB,UAAU;CAAM;CACzE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAmB,UAAU;CAAM;AACrE,CAAC"}

package/dist/recipes/cardHeader.d.ts

@@ -5,6 +5,23 @@ declare const cardHeaderRanks: readonly ["card", "module"];
 declare const cardHeaderRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const cardHeaderStackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const cardHeaderActionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const cardHeaderAnatomy: {
+  readonly action: {
+    readonly part: "action";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "card-header";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly stack: {
+    readonly part: "stack";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type CardHeaderRank, cardHeaderActionRecipe, cardHeaderRanks, cardHeaderRecipe, cardHeaderStackRecipe, defaultCardHeaderRank };
+export { type CardHeaderRank, cardHeaderActionRecipe, cardHeaderAnatomy, cardHeaderRanks, cardHeaderRecipe, cardHeaderStackRecipe, defaultCardHeaderRank };
 //# sourceMappingURL=cardHeader.d.ts.map

package/dist/recipes/cardHeader.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/cardHeader.ts
 const defaultCardHeaderRank = "card";
@@ -5,7 +6,24 @@ const cardHeaderRanks = ["card", "module"];
 const cardHeaderRecipe = cva("flex min-w-0 items-center gap-4");
 const cardHeaderStackRecipe = cva("flex min-w-0 flex-col gap-0");
 const cardHeaderActionRecipe = cva("ml-auto flex-none");
+const cardHeaderAnatomy = anatomy({
+	action: {
+		part: "action",
+		recipe: cardHeaderActionRecipe,
+		required: false
+	},
+	root: {
+		part: "card-header",
+		recipe: cardHeaderRecipe,
+		required: true
+	},
+	stack: {
+		part: "stack",
+		recipe: cardHeaderStackRecipe,
+		required: true
+	}
+});
 //#endregion
-export { cardHeaderActionRecipe, cardHeaderRanks, cardHeaderRecipe, cardHeaderStackRecipe, defaultCardHeaderRank };
+export { cardHeaderActionRecipe, cardHeaderAnatomy, cardHeaderRanks, cardHeaderRecipe, cardHeaderStackRecipe, defaultCardHeaderRank };
 
 //# sourceMappingURL=cardHeader.js.map

package/dist/recipes/cardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"cardHeader.js","names":[],"sources":["../../src/recipes/cardHeader.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\ntype CardHeaderRank = 'card' | 'module'\n\nconst defaultCardHeaderRank = 'card' satisfies CardHeaderRank\n\nconst cardHeaderRanks = ['card', 'module'] as const satisfies readonly CardHeaderRank[]\n\nconst cardHeaderRecipe = cva('flex min-w-0 items-center gap-4')\n\nconst cardHeaderStackRecipe = cva('flex min-w-0 flex-col gap-0')\n\nconst cardHeaderActionRecipe = cva('ml-auto flex-none')\n\nexport {\n  type CardHeaderRank,\n  cardHeaderActionRecipe,\n  cardHeaderRanks,\n  cardHeaderRecipe,\n  cardHeaderStackRecipe,\n  defaultCardHeaderRank,\n}\n"],"mappings":";;AAIA,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB,CAAC,QAAQ,QAAQ;AAEzC,MAAM,mBAAmB,IAAI,iCAAiC;AAE9D,MAAM,wBAAwB,IAAI,6BAA6B;AAE/D,MAAM,yBAAyB,IAAI,mBAAmB"}
+{"version":3,"file":"cardHeader.js","names":[],"sources":["../../src/recipes/cardHeader.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\ntype CardHeaderRank = 'card' | 'module'\n\nconst defaultCardHeaderRank = 'card' satisfies CardHeaderRank\n\nconst cardHeaderRanks = ['card', 'module'] as const satisfies readonly CardHeaderRank[]\n\nconst cardHeaderRecipe = cva('flex min-w-0 items-center gap-4')\n\nconst cardHeaderStackRecipe = cva('flex min-w-0 flex-col gap-0')\n\nconst cardHeaderActionRecipe = cva('ml-auto flex-none')\n\nconst cardHeaderAnatomy = anatomy({\n  action: { part: 'action', recipe: cardHeaderActionRecipe, required: false },\n  root: { part: 'card-header', recipe: cardHeaderRecipe, required: true },\n  stack: { part: 'stack', recipe: cardHeaderStackRecipe, required: true },\n})\n\nexport {\n  type CardHeaderRank,\n  cardHeaderActionRecipe,\n  cardHeaderAnatomy,\n  cardHeaderRanks,\n  cardHeaderRecipe,\n  cardHeaderStackRecipe,\n  defaultCardHeaderRank,\n}\n"],"mappings":";;;AAMA,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB,CAAC,QAAQ,QAAQ;AAEzC,MAAM,mBAAmB,IAAI,iCAAiC;AAE9D,MAAM,wBAAwB,IAAI,6BAA6B;AAE/D,MAAM,yBAAyB,IAAI,mBAAmB;AAEtD,MAAM,oBAAoB,QAAQ;CAChC,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAwB,UAAU;CAAM;CAC1E,MAAM;EAAE,MAAM;EAAe,QAAQ;EAAkB,UAAU;CAAK;CACtE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAuB,UAAU;CAAK;AACxE,CAAC"}

package/dist/recipes/checkbox.d.ts

@@ -21,6 +21,21 @@ declare const checkboxTitleRecipe: (props?: import("class-variance-authority/typ
 declare const checkboxHintRecipe: (props?: ({
   invalid?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const checkboxAnatomy: {
+  readonly dash: {
+    readonly part: "dash";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "checkbox";
+    readonly recipe: (props?: ({
+      labelled?: boolean | null | undefined;
+      plate?: "full" | "snug" | "bare" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type CheckboxAccent, checkboxAccents, checkboxControlRecipe, checkboxDashRecipe, checkboxHintRecipe, checkboxIndicatorRecipe, checkboxLabelRecipe, checkboxMarkRecipe, checkboxRecipe, checkboxTitleRecipe, defaultCheckboxAccent };
+export { type CheckboxAccent, checkboxAccents, checkboxAnatomy, checkboxControlRecipe, checkboxDashRecipe, checkboxHintRecipe, checkboxIndicatorRecipe, checkboxLabelRecipe, checkboxMarkRecipe, checkboxRecipe, checkboxTitleRecipe, defaultCheckboxAccent };
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/recipes/checkbox.js

@@ -1,6 +1,7 @@
-import { defaultMarkPlate, markPlates } 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, markPlates } from "../mark.js";
 import { markBox, markFailed, markPlate, markPlated, markPress, markRow, markSquare, markStack, markTitle } from "../parts/mark.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/checkbox.ts
@@ -97,7 +98,19 @@ const checkboxHintRecipe = cva("text-tf-caption font-medium", {
 		true: "text-tf-danger-hi tf-arrives"
 	} }
 });
+const checkboxAnatomy = anatomy({
+	dash: {
+		part: "dash",
+		recipe: checkboxDashRecipe,
+		required: true
+	},
+	root: {
+		part: "checkbox",
+		recipe: checkboxRecipe,
+		required: true
+	}
+});
 //#endregion
-export { checkboxAccents, checkboxControlRecipe, checkboxDashRecipe, checkboxHintRecipe, checkboxIndicatorRecipe, checkboxLabelRecipe, checkboxMarkRecipe, checkboxRecipe, checkboxTitleRecipe, defaultCheckboxAccent };
+export { checkboxAccents, checkboxAnatomy, checkboxControlRecipe, checkboxDashRecipe, checkboxHintRecipe, checkboxIndicatorRecipe, checkboxLabelRecipe, checkboxMarkRecipe, checkboxRecipe, checkboxTitleRecipe, defaultCheckboxAccent };
 
 //# sourceMappingURL=checkbox.js.map

package/dist/recipes/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/recipes/checkbox.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { MarkPlate } from '#mark'\nimport { defaultMarkPlate, markPlates } from '#mark'\nimport {\n  markBox,\n  markFailed,\n  markPlate,\n  markPlated,\n  markPress,\n  markRow,\n  markSquare,\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 checkboxAccents = tones\n\ntype CheckboxAccent = Tone\n\nconst defaultCheckboxAccent = defaultTone\n\nconst FILL = ['bg-tf-sunken', 'tf-ramp']\n\nconst OFF = ['data-[state=unchecked]:interactive:not-data-readonly:hovered:bg-tf-sunken-hi']\n\nconst ON = [\n  'data-[state=checked]:tf-mark-lit',\n  'data-[state=checked]:bg-tf-blend',\n  'data-[state=checked]:text-tf-on-accent',\n  'data-[state=checked]:tf-icons-solo',\n  'data-[state=checked]:interactive:not-data-readonly:hovered:tf-blended',\n]\n\nconst MIXED = [\n  'data-[state=indeterminate]:tf-mark-lit',\n  'data-[state=indeterminate]:bg-tf-blend',\n  'data-[state=indeterminate]:text-tf-on-accent',\n  'data-[state=indeterminate]:interactive:not-data-readonly:hovered:tf-blended',\n]\n\nconst GAPS = { bare: 'gap-2', full: 'gap-3', snug: 'gap-2' } satisfies Record<MarkPlate, string>\n\nconst platedRows = markPlates.map((plate) => ({\n  class: `${GAPS[plate]} ${markPlate[plate]} ${markPlated[plate]}`,\n  labelled: true,\n  plate,\n}))\n\nconst platedSquares = markPlates.map((plate) => ({\n  class: `${markSquare[plate]} ${markPlated[plate]}`,\n  labelled: false,\n  plate,\n}))\n\nconst checkboxRecipe = cva(markRow, {\n  compoundVariants: [...platedRows, ...platedSquares],\n  defaultVariants: { labelled: true, plate: defaultMarkPlate },\n  variants: {\n    labelled: { false: '', true: '' },\n    plate: { bare: '', full: '', snug: '' } satisfies Record<MarkPlate, string>,\n  },\n})\n\nconst checkboxControlRecipe = cva(\n  [...markBox, 'rounded-tf-inline', markPress, ...FILL, ...OFF, ...ON, ...MIXED],\n  {\n    compoundVariants: [{ class: toneBlend.danger, invalid: true }],\n    defaultVariants: { accent: defaultCheckboxAccent, invalid: false },\n    variants: {\n      accent: toneBlend,\n      invalid: { false: '', true: markFailed },\n    },\n  },\n)\n\nconst checkboxIndicatorRecipe = cva('inline-flex tf-mark-draws items-center justify-center')\n\nconst checkboxMarkRecipe = cva('size-tf-mark-glyph')\n\nconst checkboxDashRecipe = cva([\n  'block h-[calc(var(--spacing-tf-hairline)*2)] w-tf-mark-dot rounded-tf-pill',\n  'bg-tf-on-accent',\n])\n\nconst checkboxLabelRecipe = cva([...markStack, 'flex-1'], {\n  defaultVariants: { hidden: false },\n  variants: {\n    hidden: { false: '', true: 'sr-only' },\n  },\n})\n\nconst checkboxTitleRecipe = cva(markTitle)\n\nconst checkboxHintRecipe = cva('text-tf-caption font-medium', {\n  defaultVariants: { invalid: false },\n  variants: {\n    invalid: { false: 'text-tf-muted', true: 'text-tf-danger-hi tf-arrives' },\n  },\n})\n\nexport {\n  type CheckboxAccent,\n  checkboxAccents,\n  checkboxControlRecipe,\n  checkboxDashRecipe,\n  checkboxHintRecipe,\n  checkboxIndicatorRecipe,\n  checkboxLabelRecipe,\n  checkboxMarkRecipe,\n  checkboxRecipe,\n  checkboxTitleRecipe,\n  defaultCheckboxAccent,\n}\n"],"mappings":";;;;;;AAmBA,MAAM,kBAAkB;AAIxB,MAAM,wBAAwB;AAE9B,MAAM,OAAO,CAAC,gBAAgB,SAAS;AAEvC,MAAM,MAAM,CAAC,8EAA8E;AAE3F,MAAM,KAAK;CACT;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAQ;CACZ;CACA;CACA;CACA;AACF;AAEA,MAAM,OAAO;CAAE,MAAM;CAAS,MAAM;CAAS,MAAM;AAAQ;AAE3D,MAAM,aAAa,WAAW,KAAK,WAAW;CAC5C,OAAO,GAAG,KAAK,OAAO,GAAG,UAAU,OAAO,GAAG,WAAW;CACxD,UAAU;CACV;AACF,EAAE;AAEF,MAAM,gBAAgB,WAAW,KAAK,WAAW;CAC/C,OAAO,GAAG,WAAW,OAAO,GAAG,WAAW;CAC1C,UAAU;CACV;AACF,EAAE;AAEF,MAAM,iBAAiB,IAAI,SAAS;CAClC,kBAAkB,CAAC,GAAG,YAAY,GAAG,aAAa;CAClD,iBAAiB;EAAE,UAAU;EAAM,OAAO;CAAiB;CAC3D,UAAU;EACR,UAAU;GAAE,OAAO;GAAI,MAAM;EAAG;EAChC,OAAO;GAAE,MAAM;GAAI,MAAM;GAAI,MAAM;EAAG;CACxC;AACF,CAAC;AAED,MAAM,wBAAwB,IAC5B;CAAC,GAAG;CAAS;CAAqB;CAAW,GAAG;CAAM,GAAG;CAAK,GAAG;CAAI,GAAG;AAAK,GAC7E;CACE,kBAAkB,CAAC;EAAE,OAAO,UAAU;EAAQ,SAAS;CAAK,CAAC;CAC7D,iBAAiB;EAAE,QAAQ;EAAuB,SAAS;CAAM;CACjE,UAAU;EACR,QAAQ;EACR,SAAS;GAAE,OAAO;GAAI,MAAM;EAAW;CACzC;AACF,CACF;AAEA,MAAM,0BAA0B,IAAI,uDAAuD;AAE3F,MAAM,qBAAqB,IAAI,oBAAoB;AAEnD,MAAM,qBAAqB,IAAI,CAC7B,8EACA,iBACF,CAAC;AAED,MAAM,sBAAsB,IAAI,CAAC,GAAG,WAAW,QAAQ,GAAG;CACxD,iBAAiB,EAAE,QAAQ,MAAM;CACjC,UAAU,EACR,QAAQ;EAAE,OAAO;EAAI,MAAM;CAAU,EACvC;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,SAAS;AAEzC,MAAM,qBAAqB,IAAI,+BAA+B;CAC5D,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EAAE,OAAO;EAAiB,MAAM;CAA+B,EAC1E;AACF,CAAC"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/recipes/checkbox.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport type { MarkPlate } from '#mark'\nimport { defaultMarkPlate, markPlates } from '#mark'\nimport {\n  markBox,\n  markFailed,\n  markPlate,\n  markPlated,\n  markPress,\n  markRow,\n  markSquare,\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 checkboxAccents = tones\n\ntype CheckboxAccent = Tone\n\nconst defaultCheckboxAccent = defaultTone\n\nconst FILL = ['bg-tf-sunken', 'tf-ramp']\n\nconst OFF = ['data-[state=unchecked]:interactive:not-data-readonly:hovered:bg-tf-sunken-hi']\n\nconst ON = [\n  'data-[state=checked]:tf-mark-lit',\n  'data-[state=checked]:bg-tf-blend',\n  'data-[state=checked]:text-tf-on-accent',\n  'data-[state=checked]:tf-icons-solo',\n  'data-[state=checked]:interactive:not-data-readonly:hovered:tf-blended',\n]\n\nconst MIXED = [\n  'data-[state=indeterminate]:tf-mark-lit',\n  'data-[state=indeterminate]:bg-tf-blend',\n  'data-[state=indeterminate]:text-tf-on-accent',\n  'data-[state=indeterminate]:interactive:not-data-readonly:hovered:tf-blended',\n]\n\nconst GAPS = { bare: 'gap-2', full: 'gap-3', snug: 'gap-2' } satisfies Record<MarkPlate, string>\n\nconst platedRows = markPlates.map((plate) => ({\n  class: `${GAPS[plate]} ${markPlate[plate]} ${markPlated[plate]}`,\n  labelled: true,\n  plate,\n}))\n\nconst platedSquares = markPlates.map((plate) => ({\n  class: `${markSquare[plate]} ${markPlated[plate]}`,\n  labelled: false,\n  plate,\n}))\n\nconst checkboxRecipe = cva(markRow, {\n  compoundVariants: [...platedRows, ...platedSquares],\n  defaultVariants: { labelled: true, plate: defaultMarkPlate },\n  variants: {\n    labelled: { false: '', true: '' },\n    plate: { bare: '', full: '', snug: '' } satisfies Record<MarkPlate, string>,\n  },\n})\n\nconst checkboxControlRecipe = cva(\n  [...markBox, 'rounded-tf-inline', markPress, ...FILL, ...OFF, ...ON, ...MIXED],\n  {\n    compoundVariants: [{ class: toneBlend.danger, invalid: true }],\n    defaultVariants: { accent: defaultCheckboxAccent, invalid: false },\n    variants: {\n      accent: toneBlend,\n      invalid: { false: '', true: markFailed },\n    },\n  },\n)\n\nconst checkboxIndicatorRecipe = cva('inline-flex tf-mark-draws items-center justify-center')\n\nconst checkboxMarkRecipe = cva('size-tf-mark-glyph')\n\nconst checkboxDashRecipe = cva([\n  'block h-[calc(var(--spacing-tf-hairline)*2)] w-tf-mark-dot rounded-tf-pill',\n  'bg-tf-on-accent',\n])\n\nconst checkboxLabelRecipe = cva([...markStack, 'flex-1'], {\n  defaultVariants: { hidden: false },\n  variants: {\n    hidden: { false: '', true: 'sr-only' },\n  },\n})\n\nconst checkboxTitleRecipe = cva(markTitle)\n\nconst checkboxHintRecipe = cva('text-tf-caption font-medium', {\n  defaultVariants: { invalid: false },\n  variants: {\n    invalid: { false: 'text-tf-muted', true: 'text-tf-danger-hi tf-arrives' },\n  },\n})\n\nconst checkboxAnatomy = anatomy({\n  dash: { part: 'dash', recipe: checkboxDashRecipe, required: true },\n  root: { part: 'checkbox', recipe: checkboxRecipe, required: true },\n})\n\nexport {\n  type CheckboxAccent,\n  checkboxAccents,\n  checkboxAnatomy,\n  checkboxControlRecipe,\n  checkboxDashRecipe,\n  checkboxHintRecipe,\n  checkboxIndicatorRecipe,\n  checkboxLabelRecipe,\n  checkboxMarkRecipe,\n  checkboxRecipe,\n  checkboxTitleRecipe,\n  defaultCheckboxAccent,\n}\n"],"mappings":";;;;;;;AAoBA,MAAM,kBAAkB;AAIxB,MAAM,wBAAwB;AAE9B,MAAM,OAAO,CAAC,gBAAgB,SAAS;AAEvC,MAAM,MAAM,CAAC,8EAA8E;AAE3F,MAAM,KAAK;CACT;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAQ;CACZ;CACA;CACA;CACA;AACF;AAEA,MAAM,OAAO;CAAE,MAAM;CAAS,MAAM;CAAS,MAAM;AAAQ;AAE3D,MAAM,aAAa,WAAW,KAAK,WAAW;CAC5C,OAAO,GAAG,KAAK,OAAO,GAAG,UAAU,OAAO,GAAG,WAAW;CACxD,UAAU;CACV;AACF,EAAE;AAEF,MAAM,gBAAgB,WAAW,KAAK,WAAW;CAC/C,OAAO,GAAG,WAAW,OAAO,GAAG,WAAW;CAC1C,UAAU;CACV;AACF,EAAE;AAEF,MAAM,iBAAiB,IAAI,SAAS;CAClC,kBAAkB,CAAC,GAAG,YAAY,GAAG,aAAa;CAClD,iBAAiB;EAAE,UAAU;EAAM,OAAO;CAAiB;CAC3D,UAAU;EACR,UAAU;GAAE,OAAO;GAAI,MAAM;EAAG;EAChC,OAAO;GAAE,MAAM;GAAI,MAAM;GAAI,MAAM;EAAG;CACxC;AACF,CAAC;AAED,MAAM,wBAAwB,IAC5B;CAAC,GAAG;CAAS;CAAqB;CAAW,GAAG;CAAM,GAAG;CAAK,GAAG;CAAI,GAAG;AAAK,GAC7E;CACE,kBAAkB,CAAC;EAAE,OAAO,UAAU;EAAQ,SAAS;CAAK,CAAC;CAC7D,iBAAiB;EAAE,QAAQ;EAAuB,SAAS;CAAM;CACjE,UAAU;EACR,QAAQ;EACR,SAAS;GAAE,OAAO;GAAI,MAAM;EAAW;CACzC;AACF,CACF;AAEA,MAAM,0BAA0B,IAAI,uDAAuD;AAE3F,MAAM,qBAAqB,IAAI,oBAAoB;AAEnD,MAAM,qBAAqB,IAAI,CAC7B,8EACA,iBACF,CAAC;AAED,MAAM,sBAAsB,IAAI,CAAC,GAAG,WAAW,QAAQ,GAAG;CACxD,iBAAiB,EAAE,QAAQ,MAAM;CACjC,UAAU,EACR,QAAQ;EAAE,OAAO;EAAI,MAAM;CAAU,EACvC;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,SAAS;AAEzC,MAAM,qBAAqB,IAAI,+BAA+B;CAC5D,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EAAE,OAAO;EAAiB,MAAM;CAA+B,EAC1E;AACF,CAAC;AAED,MAAM,kBAAkB,QAAQ;CAC9B,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAoB,UAAU;CAAK;CACjE,MAAM;EAAE,MAAM;EAAY,QAAQ;EAAgB,UAAU;CAAK;AACnE,CAAC"}

package/dist/recipes/chip.d.ts

@@ -12,7 +12,7 @@ declare const chipRecipe: (props?: ({
   accent?: "accent" | "success" | "warning" | "info" | "danger" | "neutral" | null | undefined;
   removable?: boolean | null | undefined;
   size?: "sm" | "md" | null | undefined;
-  tone?: "quiet" | "outline" | "tint" | null | undefined;
+  tone?: "tint" | "outline" | "quiet" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const chipDotRecipe: (props?: ({
   accent?: "accent" | "success" | "warning" | "info" | "danger" | "neutral" | null | undefined;
@@ -21,6 +21,45 @@ declare const chipTextRecipe: (props?: import("class-variance-authority/types").
 declare const chipLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const chipCountRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const chipCloseRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const chipAnatomy: {
+  readonly close: {
+    readonly part: "close";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly count: {
+    readonly part: "count";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly dot: {
+    readonly part: "dot";
+    readonly recipe: (props?: ({
+      accent?: "accent" | "success" | "warning" | "info" | "danger" | "neutral" | 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 root: {
+    readonly part: "chip";
+    readonly recipe: (props?: ({
+      accent?: "accent" | "success" | "warning" | "info" | "danger" | "neutral" | null | undefined;
+      removable?: boolean | null | undefined;
+      size?: "sm" | "md" | null | undefined;
+      tone?: "tint" | "outline" | "quiet" | null | undefined;
+    } & 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: true;
+  };
+};
 //#endregion
-export { type ChipAccent, type ChipSize, type ChipTone, chipAccents, chipCloseRecipe, chipCountRecipe, chipDotRecipe, chipLabelRecipe, chipRecipe, chipSizes, chipTextRecipe, chipTones, defaultChipAccent, defaultChipSize, defaultChipTone };
+export { type ChipAccent, type ChipSize, type ChipTone, chipAccents, chipAnatomy, chipCloseRecipe, chipCountRecipe, chipDotRecipe, chipLabelRecipe, chipRecipe, chipSizes, chipTextRecipe, chipTones, defaultChipAccent, defaultChipSize, defaultChipTone };
 //# sourceMappingURL=chip.d.ts.map

package/dist/recipes/chip.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { controlPress, controlReach, hitArea } from "../parts/control.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/chip.ts
@@ -117,7 +118,39 @@ const chipCloseRecipe = cva([
 	...controlPress,
 	...CLOSE_HELD
 ]);
+const chipAnatomy = anatomy({
+	close: {
+		part: "close",
+		recipe: chipCloseRecipe,
+		required: false
+	},
+	count: {
+		part: "count",
+		recipe: chipCountRecipe,
+		required: false
+	},
+	dot: {
+		part: "dot",
+		recipe: chipDotRecipe,
+		required: false
+	},
+	label: {
+		part: "label",
+		recipe: chipLabelRecipe,
+		required: true
+	},
+	root: {
+		part: "chip",
+		recipe: chipRecipe,
+		required: true
+	},
+	text: {
+		part: "text",
+		recipe: chipTextRecipe,
+		required: true
+	}
+});
 //#endregion
-export { chipAccents, chipCloseRecipe, chipCountRecipe, chipDotRecipe, chipLabelRecipe, chipRecipe, chipSizes, chipTextRecipe, chipTones, defaultChipAccent, defaultChipSize, defaultChipTone };
+export { chipAccents, chipAnatomy, chipCloseRecipe, chipCountRecipe, chipDotRecipe, chipLabelRecipe, chipRecipe, chipSizes, chipTextRecipe, chipTones, defaultChipAccent, defaultChipSize, defaultChipTone };
 
 //# sourceMappingURL=chip.js.map

package/dist/recipes/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","names":[],"sources":["../../src/recipes/chip.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlPress, controlReach, hitArea } from '#parts/control'\n\ntype ChipTone = 'quiet' | 'outline' | 'tint'\n\ntype ChipSize = 'sm' | 'md'\n\ntype ChipAccent = 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'\n\nconst defaultChipTone = 'quiet' satisfies ChipTone\n\nconst defaultChipSize = 'md' satisfies ChipSize\n\nconst defaultChipAccent = 'neutral' satisfies ChipAccent\n\nconst chipTones = ['quiet', 'outline', 'tint'] as const satisfies readonly ChipTone[]\n\nconst chipSizes = ['sm', 'md'] as const satisfies readonly ChipSize[]\n\nconst chipAccents = [\n  'neutral',\n  'accent',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const satisfies readonly ChipAccent[]\n\nconst HIT_AREA = hitArea('after:h-tf-target')\n\nconst TINT = {\n  accent: 'bg-tf-accent-tint text-tf-accent-hi [--tf-mark-rest:var(--color-tf-accent-edge)]',\n  danger: 'bg-tf-danger-tint text-tf-danger-hi [--tf-mark-rest:var(--color-tf-danger-edge)]',\n  info: 'bg-tf-info-tint text-tf-info-hi [--tf-mark-rest:var(--color-tf-info-edge)]',\n  neutral: 'bg-tf-panel text-tf-fg',\n  success: 'bg-tf-success-tint text-tf-success-hi [--tf-mark-rest:var(--color-tf-success-edge)]',\n  warning: 'bg-tf-warning-tint text-tf-warning-hi [--tf-mark-rest:var(--color-tf-warning-edge)]',\n} satisfies Record<ChipAccent, string>\n\nconst OUTLINE = {\n  accent: 'text-tf-accent-hi blend-tf-accent',\n  danger: 'text-tf-danger-hi blend-tf-danger',\n  info: 'text-tf-info-hi blend-tf-info',\n  neutral: 'text-tf-fg blend-tf-accent',\n  success: 'text-tf-success-hi blend-tf-success',\n  warning: 'text-tf-warning-hi blend-tf-warning',\n} satisfies Record<ChipAccent, string>\n\nconst LEAVES = [\n  'motion-safe:tf-chip-arrives',\n  'data-[state=closed]:overflow-hidden',\n  'data-[state=closed]:**:data-[part=label]:flex-none',\n  'data-[state=closed]:motion-safe:tf-chip-departs',\n  'motion-reduce:animate-none',\n].join(' ')\n\nconst chipRecipe = cva(\n  [\n    'relative isolate inline-flex max-w-full min-w-0 flex-none items-center rounded-tf-pill',\n    'font-tf-body font-medium whitespace-nowrap',\n    'tf-icons [&>svg]:shrink-0',\n    'data-disabled:opacity-50',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    compoundVariants: [\n      ...chipAccents.map((accent) => ({ accent, class: TINT[accent], tone: 'tint' as const })),\n      ...chipAccents.map((accent) => ({\n        accent,\n        class: OUTLINE[accent],\n        tone: 'outline' as const,\n      })),\n    ],\n    defaultVariants: {\n      accent: defaultChipAccent,\n      removable: false,\n      size: defaultChipSize,\n      tone: defaultChipTone,\n    },\n    variants: {\n      accent: {\n        accent: '',\n        danger: '',\n        info: '',\n        neutral: '',\n        success: '',\n        warning: '',\n      } satisfies Record<ChipAccent, string>,\n      removable: { false: '', true: LEAVES },\n      size: {\n        md: 'h-tf-row gap-2 px-3 text-tf-body-sm [&>svg]:size-tf-icon-sm',\n        sm: 'h-tf-chip-sm gap-1.5 px-2 text-tf-caption-sm [&>svg]:size-tf-icon-2xs',\n      } satisfies Record<ChipSize, string>,\n      tone: {\n        outline: 'tf-blend-outline',\n        quiet: 'bg-tf-panel text-tf-fg tf-mark-edge',\n        tint: 'tf-mark-edge **:data-[part=count]:text-current',\n      } satisfies Record<ChipTone, string>,\n    },\n  },\n)\n\nconst chipDotRecipe = cva('size-2 flex-none rounded-tf-pill', {\n  defaultVariants: { accent: defaultChipAccent },\n  variants: {\n    accent: {\n      accent: 'bg-tf-accent-hi',\n      danger: 'bg-tf-danger-hi',\n      info: 'bg-tf-info-hi',\n      neutral: 'bg-tf-muted',\n      success: 'bg-tf-success-hi',\n      warning: 'bg-tf-warning-hi',\n    } satisfies Record<ChipAccent, string>,\n  },\n})\n\nconst chipTextRecipe = cva('flex min-w-0 items-baseline gap-[inherit]')\n\nconst chipLabelRecipe = cva('min-w-0 truncate')\n\nconst chipCountRecipe = cva('flex-none font-mono text-tf-caption-sm text-tf-muted tabular-nums')\n\nconst CLOSE_HELD = [\n  'disabled:cursor-not-allowed',\n  'aria-disabled:cursor-not-allowed',\n  'data-disabled:cursor-not-allowed',\n]\n\nconst chipCloseRecipe = cva([\n  'relative inline-flex size-tf-icon-md flex-none items-center justify-center rounded-tf-pill',\n  '[&_svg]:size-tf-icon-2xs [&_svg]:shrink-0',\n  'text-tf-muted interactive:hovered:bg-tf-panel-hi interactive:hovered:text-tf-fg',\n  'cursor-pointer tf-transition motion-reduce:transition-none',\n  HIT_AREA,\n  ...controlReach,\n  ...controlPress,\n  ...CLOSE_HELD,\n])\n\nexport {\n  type ChipAccent,\n  type ChipSize,\n  type ChipTone,\n  chipAccents,\n  chipCloseRecipe,\n  chipCountRecipe,\n  chipDotRecipe,\n  chipLabelRecipe,\n  chipRecipe,\n  chipSizes,\n  chipTextRecipe,\n  chipTones,\n  defaultChipAccent,\n  defaultChipSize,\n  defaultChipTone,\n}\n"],"mappings":";;;AAUA,MAAM,kBAAkB;AAExB,MAAM,kBAAkB;AAExB,MAAM,oBAAoB;AAE1B,MAAM,YAAY;CAAC;CAAS;CAAW;AAAM;AAE7C,MAAM,YAAY,CAAC,MAAM,IAAI;AAE7B,MAAM,cAAc;CAClB;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,WAAW,QAAQ,mBAAmB;AAE5C,MAAM,OAAO;CACX,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;AACX;AAEA,MAAM,UAAU;CACd,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;AACX;AAEA,MAAM,SAAS;CACb;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,aAAa,IACjB;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB,GAAG,YAAY,KAAK,YAAY;EAAE;EAAQ,OAAO,KAAK;EAAS,MAAM;CAAgB,EAAE,GACvF,GAAG,YAAY,KAAK,YAAY;EAC9B;EACA,OAAO,QAAQ;EACf,MAAM;CACR,EAAE,CACJ;CACA,iBAAiB;EACf,QAAQ;EACR,WAAW;EACX,MAAA;EACA,MAAM;CACR;CACA,UAAU;EACR,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,SAAS;GACT,SAAS;GACT,SAAS;EACX;EACA,WAAW;GAAE,OAAO;GAAI,MAAM;EAAO;EACrC,MAAM;GACJ,IAAI;GACJ,IAAI;EACN;EACA,MAAM;GACJ,SAAS;GACT,OAAO;GACP,MAAM;EACR;CACF;AACF,CACF;AAEA,MAAM,gBAAgB,IAAI,oCAAoC;CAC5D,iBAAiB,EAAE,QAAQ,kBAAkB;CAC7C,UAAU,EACR,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,SAAS;EACT,SAAS;EACT,SAAS;CACX,EACF;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,2CAA2C;AAEtE,MAAM,kBAAkB,IAAI,kBAAkB;AAE9C,MAAM,kBAAkB,IAAI,mEAAmE;AAE/F,MAAM,aAAa;CACjB;CACA;CACA;AACF;AAEA,MAAM,kBAAkB,IAAI;CAC1B;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC"}
+{"version":3,"file":"chip.js","names":[],"sources":["../../src/recipes/chip.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { controlPress, controlReach, hitArea } from '#parts/control'\n\ntype ChipTone = 'quiet' | 'outline' | 'tint'\n\ntype ChipSize = 'sm' | 'md'\n\ntype ChipAccent = 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'\n\nconst defaultChipTone = 'quiet' satisfies ChipTone\n\nconst defaultChipSize = 'md' satisfies ChipSize\n\nconst defaultChipAccent = 'neutral' satisfies ChipAccent\n\nconst chipTones = ['quiet', 'outline', 'tint'] as const satisfies readonly ChipTone[]\n\nconst chipSizes = ['sm', 'md'] as const satisfies readonly ChipSize[]\n\nconst chipAccents = [\n  'neutral',\n  'accent',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const satisfies readonly ChipAccent[]\n\nconst HIT_AREA = hitArea('after:h-tf-target')\n\nconst TINT = {\n  accent: 'bg-tf-accent-tint text-tf-accent-hi [--tf-mark-rest:var(--color-tf-accent-edge)]',\n  danger: 'bg-tf-danger-tint text-tf-danger-hi [--tf-mark-rest:var(--color-tf-danger-edge)]',\n  info: 'bg-tf-info-tint text-tf-info-hi [--tf-mark-rest:var(--color-tf-info-edge)]',\n  neutral: 'bg-tf-panel text-tf-fg',\n  success: 'bg-tf-success-tint text-tf-success-hi [--tf-mark-rest:var(--color-tf-success-edge)]',\n  warning: 'bg-tf-warning-tint text-tf-warning-hi [--tf-mark-rest:var(--color-tf-warning-edge)]',\n} satisfies Record<ChipAccent, string>\n\nconst OUTLINE = {\n  accent: 'text-tf-accent-hi blend-tf-accent',\n  danger: 'text-tf-danger-hi blend-tf-danger',\n  info: 'text-tf-info-hi blend-tf-info',\n  neutral: 'text-tf-fg blend-tf-accent',\n  success: 'text-tf-success-hi blend-tf-success',\n  warning: 'text-tf-warning-hi blend-tf-warning',\n} satisfies Record<ChipAccent, string>\n\nconst LEAVES = [\n  'motion-safe:tf-chip-arrives',\n  'data-[state=closed]:overflow-hidden',\n  'data-[state=closed]:**:data-[part=label]:flex-none',\n  'data-[state=closed]:motion-safe:tf-chip-departs',\n  'motion-reduce:animate-none',\n].join(' ')\n\nconst chipRecipe = cva(\n  [\n    'relative isolate inline-flex max-w-full min-w-0 flex-none items-center rounded-tf-pill',\n    'font-tf-body font-medium whitespace-nowrap',\n    'tf-icons [&>svg]:shrink-0',\n    'data-disabled:opacity-50',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    compoundVariants: [\n      ...chipAccents.map((accent) => ({ accent, class: TINT[accent], tone: 'tint' as const })),\n      ...chipAccents.map((accent) => ({\n        accent,\n        class: OUTLINE[accent],\n        tone: 'outline' as const,\n      })),\n    ],\n    defaultVariants: {\n      accent: defaultChipAccent,\n      removable: false,\n      size: defaultChipSize,\n      tone: defaultChipTone,\n    },\n    variants: {\n      accent: {\n        accent: '',\n        danger: '',\n        info: '',\n        neutral: '',\n        success: '',\n        warning: '',\n      } satisfies Record<ChipAccent, string>,\n      removable: { false: '', true: LEAVES },\n      size: {\n        md: 'h-tf-row gap-2 px-3 text-tf-body-sm [&>svg]:size-tf-icon-sm',\n        sm: 'h-tf-chip-sm gap-1.5 px-2 text-tf-caption-sm [&>svg]:size-tf-icon-2xs',\n      } satisfies Record<ChipSize, string>,\n      tone: {\n        outline: 'tf-blend-outline',\n        quiet: 'bg-tf-panel text-tf-fg tf-mark-edge',\n        tint: 'tf-mark-edge **:data-[part=count]:text-current',\n      } satisfies Record<ChipTone, string>,\n    },\n  },\n)\n\nconst chipDotRecipe = cva('size-2 flex-none rounded-tf-pill', {\n  defaultVariants: { accent: defaultChipAccent },\n  variants: {\n    accent: {\n      accent: 'bg-tf-accent-hi',\n      danger: 'bg-tf-danger-hi',\n      info: 'bg-tf-info-hi',\n      neutral: 'bg-tf-muted',\n      success: 'bg-tf-success-hi',\n      warning: 'bg-tf-warning-hi',\n    } satisfies Record<ChipAccent, string>,\n  },\n})\n\nconst chipTextRecipe = cva('flex min-w-0 items-baseline gap-[inherit]')\n\nconst chipLabelRecipe = cva('min-w-0 truncate')\n\nconst chipCountRecipe = cva('flex-none font-mono text-tf-caption-sm text-tf-muted tabular-nums')\n\nconst CLOSE_HELD = [\n  'disabled:cursor-not-allowed',\n  'aria-disabled:cursor-not-allowed',\n  'data-disabled:cursor-not-allowed',\n]\n\nconst chipCloseRecipe = cva([\n  'relative inline-flex size-tf-icon-md flex-none items-center justify-center rounded-tf-pill',\n  '[&_svg]:size-tf-icon-2xs [&_svg]:shrink-0',\n  'text-tf-muted interactive:hovered:bg-tf-panel-hi interactive:hovered:text-tf-fg',\n  'cursor-pointer tf-transition motion-reduce:transition-none',\n  HIT_AREA,\n  ...controlReach,\n  ...controlPress,\n  ...CLOSE_HELD,\n])\n\nconst chipAnatomy = anatomy({\n  close: { part: 'close', recipe: chipCloseRecipe, required: false },\n  count: { part: 'count', recipe: chipCountRecipe, required: false },\n  dot: { part: 'dot', recipe: chipDotRecipe, required: false },\n  label: { part: 'label', recipe: chipLabelRecipe, required: true },\n  root: { part: 'chip', recipe: chipRecipe, required: true },\n  text: { part: 'text', recipe: chipTextRecipe, required: true },\n})\n\nexport {\n  type ChipAccent,\n  type ChipSize,\n  type ChipTone,\n  chipAccents,\n  chipAnatomy,\n  chipCloseRecipe,\n  chipCountRecipe,\n  chipDotRecipe,\n  chipLabelRecipe,\n  chipRecipe,\n  chipSizes,\n  chipTextRecipe,\n  chipTones,\n  defaultChipAccent,\n  defaultChipSize,\n  defaultChipTone,\n}\n"],"mappings":";;;;AAWA,MAAM,kBAAkB;AAExB,MAAM,kBAAkB;AAExB,MAAM,oBAAoB;AAE1B,MAAM,YAAY;CAAC;CAAS;CAAW;AAAM;AAE7C,MAAM,YAAY,CAAC,MAAM,IAAI;AAE7B,MAAM,cAAc;CAClB;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,WAAW,QAAQ,mBAAmB;AAE5C,MAAM,OAAO;CACX,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;AACX;AAEA,MAAM,UAAU;CACd,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;AACX;AAEA,MAAM,SAAS;CACb;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,aAAa,IACjB;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB,GAAG,YAAY,KAAK,YAAY;EAAE;EAAQ,OAAO,KAAK;EAAS,MAAM;CAAgB,EAAE,GACvF,GAAG,YAAY,KAAK,YAAY;EAC9B;EACA,OAAO,QAAQ;EACf,MAAM;CACR,EAAE,CACJ;CACA,iBAAiB;EACf,QAAQ;EACR,WAAW;EACX,MAAA;EACA,MAAM;CACR;CACA,UAAU;EACR,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,SAAS;GACT,SAAS;GACT,SAAS;EACX;EACA,WAAW;GAAE,OAAO;GAAI,MAAM;EAAO;EACrC,MAAM;GACJ,IAAI;GACJ,IAAI;EACN;EACA,MAAM;GACJ,SAAS;GACT,OAAO;GACP,MAAM;EACR;CACF;AACF,CACF;AAEA,MAAM,gBAAgB,IAAI,oCAAoC;CAC5D,iBAAiB,EAAE,QAAQ,kBAAkB;CAC7C,UAAU,EACR,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,SAAS;EACT,SAAS;EACT,SAAS;CACX,EACF;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,2CAA2C;AAEtE,MAAM,kBAAkB,IAAI,kBAAkB;AAE9C,MAAM,kBAAkB,IAAI,mEAAmE;AAE/F,MAAM,aAAa;CACjB;CACA;CACA;AACF;AAEA,MAAM,kBAAkB,IAAI;CAC1B;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,cAAc,QAAQ;CAC1B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAM;CACjE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAM;CACjE,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAe,UAAU;CAAM;CAC3D,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAiB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAY,UAAU;CAAK;CACzD,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAK;AAC/D,CAAC"}

package/dist/recipes/codeEditor.d.ts

@@ -69,6 +69,13 @@ declare const codeSyntaxColors: {
   punctuation: string;
   text: string;
 };
+declare const codeEditorAnatomy: {
+  readonly root: {
+    readonly part: "code-editor";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { codeEditorRecipe, codeEditorTheme, codeSyntaxColors };
+export { codeEditorAnatomy, codeEditorRecipe, codeEditorTheme, codeSyntaxColors };
 //# sourceMappingURL=codeEditor.d.ts.map

package/dist/recipes/codeEditor.js

@@ -1,3 +1,4 @@
+import { anatomy } from "../anatomy.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/codeEditor.ts
 const PAD = "calc(var(--spacing) * 4)";
@@ -65,7 +66,12 @@ const codeSyntaxColors = {
 	punctuation: "var(--color-tf-muted)",
 	text: "var(--color-tf-success-hi)"
 };
+const codeEditorAnatomy = anatomy({ root: {
+	part: "code-editor",
+	recipe: codeEditorRecipe,
+	required: true
+} });
 //#endregion
-export { codeEditorRecipe, codeEditorTheme, codeSyntaxColors };
+export { codeEditorAnatomy, codeEditorRecipe, codeEditorTheme, codeSyntaxColors };
 
 //# sourceMappingURL=codeEditor.js.map

package/dist/recipes/codeEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"codeEditor.js","names":[],"sources":["../../src/recipes/codeEditor.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst PAD = 'calc(var(--spacing) * 4)'\n\nconst LIFT = 'var(--color-tf-panel-2)'\n\nconst LEADING = 'var(--text-tf-caption-sm--line-height)'\n\nconst codeEditorRecipe = cva([\n  'relative isolate w-full overflow-hidden rounded-tf-control',\n  'empty:min-h-(--tf-code-height)',\n  'bg-tf-sunken font-tf-body blend-tf-accent',\n  'tf-edge-sweep tf-edge-plain reached:tf-edge-lit',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst codeEditorTheme = {\n  '&': {\n    backgroundColor: 'transparent',\n    color: 'var(--color-tf-fg)',\n    fontSize: 'var(--text-tf-caption-sm)',\n    lineHeight: LEADING,\n    maxHeight: 'var(--tf-code-height)',\n  },\n  '&.cm-focused': { outline: 'none' },\n  '&:not(.cm-focused) .cm-activeLine': { backgroundColor: 'transparent' },\n  '&:not(.cm-focused) .cm-activeLineGutter': {\n    backgroundColor: 'transparent',\n    color: 'inherit',\n  },\n  '.cm-activeLine': { backgroundColor: LIFT },\n  '.cm-activeLineGutter': { backgroundColor: LIFT, color: 'var(--color-tf-fg)' },\n  '.cm-content': {\n    caretColor: 'var(--color-tf-accent-hi)',\n    fontFamily: 'var(--font-mono)',\n    padding: '0',\n  },\n  '.cm-cursor': { borderLeftColor: 'var(--color-tf-accent-hi)' },\n  '.cm-gutters': {\n    backgroundColor: 'transparent',\n    border: 'none',\n    color: 'var(--color-tf-muted)',\n    fontFamily: 'var(--font-mono)',\n    paddingLeft: PAD,\n  },\n  '.cm-line': {\n    padding: `0 ${PAD}`,\n    transition: 'background-color var(--tf-timing-quick)',\n  },\n  '.cm-lineNumbers .cm-gutterElement': { minWidth: 'calc(var(--spacing) * 4)' },\n  '.cm-placeholder': { color: 'var(--color-tf-muted)' },\n  '.cm-scroller': {\n    fontFamily: 'inherit',\n    lineHeight: LEADING,\n    overflow: 'auto',\n    padding: `${PAD} 0`,\n    scrollbarColor: 'var(--color-tf-line-hi) transparent',\n    scrollbarWidth: 'thin',\n  },\n  '.cm-selectionBackground': { backgroundColor: 'var(--color-tf-control) !important' },\n}\n\nconst codeSyntaxColors = {\n  key: 'var(--color-tf-info-hi)',\n  literal: 'var(--color-tf-accent-hi)',\n  number: 'var(--color-tf-warning-hi)',\n  punctuation: 'var(--color-tf-muted)',\n  text: 'var(--color-tf-success-hi)',\n}\n\nexport { codeEditorRecipe, codeEditorTheme, codeSyntaxColors }\n"],"mappings":";;AAEA,MAAM,MAAM;AAEZ,MAAM,OAAO;AAEb,MAAM,UAAU;AAEhB,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,kBAAkB;CACtB,KAAK;EACH,iBAAiB;EACjB,OAAO;EACP,UAAU;EACV,YAAY;EACZ,WAAW;CACb;CACA,gBAAgB,EAAE,SAAS,OAAO;CAClC,qCAAqC,EAAE,iBAAiB,cAAc;CACtE,2CAA2C;EACzC,iBAAiB;EACjB,OAAO;CACT;CACA,kBAAkB,EAAE,iBAAiB,KAAK;CAC1C,wBAAwB;EAAE,iBAAiB;EAAM,OAAO;CAAqB;CAC7E,eAAe;EACb,YAAY;EACZ,YAAY;EACZ,SAAS;CACX;CACA,cAAc,EAAE,iBAAiB,4BAA4B;CAC7D,eAAe;EACb,iBAAiB;EACjB,QAAQ;EACR,OAAO;EACP,YAAY;EACZ,aAAa;CACf;CACA,YAAY;EACV,SAAS,KAAK;EACd,YAAY;CACd;CACA,qCAAqC,EAAE,UAAU,2BAA2B;CAC5E,mBAAmB,EAAE,OAAO,wBAAwB;CACpD,gBAAgB;EACd,YAAY;EACZ,YAAY;EACZ,UAAU;EACV,SAAS,GAAG,IAAI;EAChB,gBAAgB;EAChB,gBAAgB;CAClB;CACA,2BAA2B,EAAE,iBAAiB,qCAAqC;AACrF;AAEA,MAAM,mBAAmB;CACvB,KAAK;CACL,SAAS;CACT,QAAQ;CACR,aAAa;CACb,MAAM;AACR"}
+{"version":3,"file":"codeEditor.js","names":[],"sources":["../../src/recipes/codeEditor.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nconst PAD = 'calc(var(--spacing) * 4)'\n\nconst LIFT = 'var(--color-tf-panel-2)'\n\nconst LEADING = 'var(--text-tf-caption-sm--line-height)'\n\nconst codeEditorRecipe = cva([\n  'relative isolate w-full overflow-hidden rounded-tf-control',\n  'empty:min-h-(--tf-code-height)',\n  'bg-tf-sunken font-tf-body blend-tf-accent',\n  'tf-edge-sweep tf-edge-plain reached:tf-edge-lit',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst codeEditorTheme = {\n  '&': {\n    backgroundColor: 'transparent',\n    color: 'var(--color-tf-fg)',\n    fontSize: 'var(--text-tf-caption-sm)',\n    lineHeight: LEADING,\n    maxHeight: 'var(--tf-code-height)',\n  },\n  '&.cm-focused': { outline: 'none' },\n  '&:not(.cm-focused) .cm-activeLine': { backgroundColor: 'transparent' },\n  '&:not(.cm-focused) .cm-activeLineGutter': {\n    backgroundColor: 'transparent',\n    color: 'inherit',\n  },\n  '.cm-activeLine': { backgroundColor: LIFT },\n  '.cm-activeLineGutter': { backgroundColor: LIFT, color: 'var(--color-tf-fg)' },\n  '.cm-content': {\n    caretColor: 'var(--color-tf-accent-hi)',\n    fontFamily: 'var(--font-mono)',\n    padding: '0',\n  },\n  '.cm-cursor': { borderLeftColor: 'var(--color-tf-accent-hi)' },\n  '.cm-gutters': {\n    backgroundColor: 'transparent',\n    border: 'none',\n    color: 'var(--color-tf-muted)',\n    fontFamily: 'var(--font-mono)',\n    paddingLeft: PAD,\n  },\n  '.cm-line': {\n    padding: `0 ${PAD}`,\n    transition: 'background-color var(--tf-timing-quick)',\n  },\n  '.cm-lineNumbers .cm-gutterElement': { minWidth: 'calc(var(--spacing) * 4)' },\n  '.cm-placeholder': { color: 'var(--color-tf-muted)' },\n  '.cm-scroller': {\n    fontFamily: 'inherit',\n    lineHeight: LEADING,\n    overflow: 'auto',\n    padding: `${PAD} 0`,\n    scrollbarColor: 'var(--color-tf-line-hi) transparent',\n    scrollbarWidth: 'thin',\n  },\n  '.cm-selectionBackground': { backgroundColor: 'var(--color-tf-control) !important' },\n}\n\nconst codeSyntaxColors = {\n  key: 'var(--color-tf-info-hi)',\n  literal: 'var(--color-tf-accent-hi)',\n  number: 'var(--color-tf-warning-hi)',\n  punctuation: 'var(--color-tf-muted)',\n  text: 'var(--color-tf-success-hi)',\n}\n\nconst codeEditorAnatomy = anatomy({\n  root: { part: 'code-editor', recipe: codeEditorRecipe, required: true },\n})\n\nexport { codeEditorAnatomy, codeEditorRecipe, codeEditorTheme, codeSyntaxColors }\n"],"mappings":";;;AAIA,MAAM,MAAM;AAEZ,MAAM,OAAO;AAEb,MAAM,UAAU;AAEhB,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,kBAAkB;CACtB,KAAK;EACH,iBAAiB;EACjB,OAAO;EACP,UAAU;EACV,YAAY;EACZ,WAAW;CACb;CACA,gBAAgB,EAAE,SAAS,OAAO;CAClC,qCAAqC,EAAE,iBAAiB,cAAc;CACtE,2CAA2C;EACzC,iBAAiB;EACjB,OAAO;CACT;CACA,kBAAkB,EAAE,iBAAiB,KAAK;CAC1C,wBAAwB;EAAE,iBAAiB;EAAM,OAAO;CAAqB;CAC7E,eAAe;EACb,YAAY;EACZ,YAAY;EACZ,SAAS;CACX;CACA,cAAc,EAAE,iBAAiB,4BAA4B;CAC7D,eAAe;EACb,iBAAiB;EACjB,QAAQ;EACR,OAAO;EACP,YAAY;EACZ,aAAa;CACf;CACA,YAAY;EACV,SAAS,KAAK;EACd,YAAY;CACd;CACA,qCAAqC,EAAE,UAAU,2BAA2B;CAC5E,mBAAmB,EAAE,OAAO,wBAAwB;CACpD,gBAAgB;EACd,YAAY;EACZ,YAAY;EACZ,UAAU;EACV,SAAS,GAAG,IAAI;EAChB,gBAAgB;EAChB,gBAAgB;CAClB;CACA,2BAA2B,EAAE,iBAAiB,qCAAqC;AACrF;AAEA,MAAM,mBAAmB;CACvB,KAAK;CACL,SAAS;CACT,QAAQ;CACR,aAAa;CACb,MAAM;AACR;AAEA,MAAM,oBAAoB,QAAQ,EAChC,MAAM;CAAE,MAAM;CAAe,QAAQ;CAAkB,UAAU;AAAK,EACxE,CAAC"}