@techfides/ui-library-design 0.5.0 → 0.8.0

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

package/dist/recipes/datePicker.d.ts

@@ -34,6 +34,67 @@ declare const datePickerFootRecipe: (props?: import("class-variance-authority/ty
 declare const datePickerPresetRecipe: (props?: ({
   current?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const datePickerAnatomy: {
+  readonly body: {
+    readonly part: "body";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly dash: {
+    readonly part: "dash";
+    readonly recipe: (props?: ({
+      filled?: boolean | null | undefined;
+      labelled?: boolean | null | undefined;
+      size?: "md" | "lg" | null | undefined;
+    } & 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 leading: {
+    readonly part: "leading";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly presets: {
+    readonly part: "presets";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly rangeLabel: {
+    readonly part: "range-label";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "date-picker";
+    readonly recipe: (props?: ({
+      fullWidth?: boolean | null | undefined;
+      message?: boolean | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly row: {
+    readonly part: "row";
+    readonly recipe: (props?: ({
+      ranged?: boolean | null | undefined;
+    } & 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 views: {
+    readonly part: "views";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type DatePickerMode, type DatePickerRangePreset, datePickerBodyRecipe, datePickerContentRecipe, datePickerDashRecipe, datePickerDayRecipe, datePickerEndRecipe, datePickerFootRecipe, datePickerGridRecipe, datePickerHeadRecipe, datePickerModes, datePickerNavRecipe, datePickerPresetRecipe, datePickerRangePresets, datePickerRangeTextRecipe, datePickerRowRecipe, datePickerRuleRecipe, datePickerStartRecipe, datePickerTriggerRecipe, datePickerValueRecipe, datePickerViewRecipe, datePickerViewTriggerRecipe, datePickerViewsRecipe, datePickerWeekCellRecipe, defaultDatePickerMode };
+export { type DatePickerMode, type DatePickerRangePreset, datePickerAnatomy, datePickerBodyRecipe, datePickerContentRecipe, datePickerDashRecipe, datePickerDayRecipe, datePickerEndRecipe, datePickerFootRecipe, datePickerGridRecipe, datePickerHeadRecipe, datePickerModes, datePickerNavRecipe, datePickerPresetRecipe, datePickerRangePresets, datePickerRangeTextRecipe, datePickerRowRecipe, datePickerRuleRecipe, datePickerStartRecipe, datePickerTriggerRecipe, datePickerValueRecipe, datePickerViewRecipe, datePickerViewTriggerRecipe, datePickerViewsRecipe, datePickerWeekCellRecipe, defaultDatePickerMode };
 //# sourceMappingURL=datePicker.d.ts.map

package/dist/recipes/datePicker.js

@@ -1,8 +1,9 @@
-import "../control.js";
+import { anatomy } from "../anatomy.js";
 import { controlInert, controlPress, controlQuiet, controlQuietIcon, controlReach } from "../parts/control.js";
 import { ruleQuiet } from "../parts/rule.js";
+import "../control.js";
 import { eyebrowQuiet } from "../parts/eyebrow.js";
-import { trailingActionRecipe } from "./field.js";
+import { fieldFootRecipe, fieldRecipe, leadingRecipe, trailingActionRecipe } from "./field.js";
 import { TRAILING_INSET, labelRoom } from "./input.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/datePicker.ts
@@ -160,7 +161,59 @@ const datePickerPresetRecipe = cva([
 		true: "bg-tf-blend text-tf-on-accent interactive:hovered:tf-blended"
 	} }
 });
+const datePickerAnatomy = anatomy({
+	body: {
+		part: "body",
+		recipe: datePickerBodyRecipe,
+		required: true
+	},
+	dash: {
+		part: "dash",
+		recipe: datePickerDashRecipe,
+		required: false
+	},
+	foot: {
+		part: "foot",
+		recipe: fieldFootRecipe,
+		required: true
+	},
+	leading: {
+		part: "leading",
+		recipe: leadingRecipe,
+		required: true
+	},
+	presets: {
+		part: "presets",
+		recipe: datePickerFootRecipe,
+		required: false
+	},
+	rangeLabel: {
+		part: "range-label",
+		recipe: datePickerRangeTextRecipe,
+		required: true
+	},
+	root: {
+		part: "date-picker",
+		recipe: fieldRecipe,
+		required: true
+	},
+	row: {
+		part: "row",
+		recipe: datePickerRowRecipe,
+		required: true
+	},
+	rule: {
+		part: "rule",
+		recipe: datePickerRuleRecipe,
+		required: true
+	},
+	views: {
+		part: "views",
+		recipe: datePickerViewsRecipe,
+		required: true
+	}
+});
 //#endregion
-export { datePickerBodyRecipe, datePickerContentRecipe, datePickerDashRecipe, datePickerDayRecipe, datePickerEndRecipe, datePickerFootRecipe, datePickerGridRecipe, datePickerHeadRecipe, datePickerModes, datePickerNavRecipe, datePickerPresetRecipe, datePickerRangePresets, datePickerRangeTextRecipe, datePickerRowRecipe, datePickerRuleRecipe, datePickerStartRecipe, datePickerTriggerRecipe, datePickerValueRecipe, datePickerViewRecipe, datePickerViewTriggerRecipe, datePickerViewsRecipe, datePickerWeekCellRecipe, defaultDatePickerMode };
+export { datePickerAnatomy, datePickerBodyRecipe, datePickerContentRecipe, datePickerDashRecipe, datePickerDayRecipe, datePickerEndRecipe, datePickerFootRecipe, datePickerGridRecipe, datePickerHeadRecipe, datePickerModes, datePickerNavRecipe, datePickerPresetRecipe, datePickerRangePresets, datePickerRangeTextRecipe, datePickerRowRecipe, datePickerRuleRecipe, datePickerStartRecipe, datePickerTriggerRecipe, datePickerValueRecipe, datePickerViewRecipe, datePickerViewTriggerRecipe, datePickerViewsRecipe, datePickerWeekCellRecipe, defaultDatePickerMode };
 
 //# sourceMappingURL=datePicker.js.map

package/dist/recipes/datePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datePicker.js","names":[],"sources":["../../src/recipes/datePicker.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\nimport {\n  controlInert,\n  controlPress,\n  controlQuiet,\n  controlQuietIcon,\n  controlReach,\n} from '#parts/control'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport { ruleQuiet } from '#parts/rule'\n\nimport { trailingActionRecipe } from './field'\nimport { labelRoom, TRAILING_INSET } from './input'\n\ntype DatePickerMode = 'single' | 'range'\n\nconst defaultDatePickerMode = 'single' satisfies DatePickerMode\n\nconst datePickerModes = ['single', 'range'] as const satisfies readonly DatePickerMode[]\n\ntype DatePickerRangePreset =\n  | 'thisWeek'\n  | 'lastWeek'\n  | 'thisMonth'\n  | 'lastMonth'\n  | 'thisQuarter'\n  | 'lastQuarter'\n  | 'thisYear'\n  | 'lastYear'\n  | 'last3Days'\n  | 'last7Days'\n  | 'last14Days'\n  | 'last30Days'\n  | 'last90Days'\n\nconst datePickerRangePresets = [\n  'thisWeek',\n  'lastWeek',\n  'thisMonth',\n  'lastMonth',\n  'thisQuarter',\n  'lastQuarter',\n  'thisYear',\n  'lastYear',\n  'last3Days',\n  'last7Days',\n  'last14Days',\n  'last30Days',\n  'last90Days',\n] as const satisfies readonly DatePickerRangePreset[]\n\nconst datePickerRowRecipe = cva(\n  [\n    'data-[state=open]:bg-tf-sunken-hi data-[state=open]:tf-edge-lit',\n    'data-[state=open]:**:data-[part=leading]:text-tf-accent-hi',\n    'data-[state=open]:**:data-[part=leading]:stroke-tf-ink',\n    'data-[state=open]:**:data-[part=trigger]:text-tf-accent-hi',\n    'data-[state=open]:**:data-[part=trigger]:stroke-tf-ink',\n    'reached:**:data-[part=trigger]:text-tf-accent-hi',\n    'reached:**:data-[part=trigger]:stroke-tf-ink',\n    'reached:**:data-[part=dash]:opacity-100',\n    'reached:**:data-[part=dash]:delay-(--tf-duration-1)',\n  ],\n  {\n    defaultVariants: { ranged: false },\n    variants: {\n      ranged: { false: '', true: 'w-fit max-w-full min-w-60' },\n    },\n  },\n)\n\nconst datePickerTriggerRecipe = cva([trailingActionRecipe(), 'data-[state=open]:rotate-180'])\n\nconst datePickerDashRecipe = cva(\n  [\n    'flex flex-none items-center self-stretch px-2',\n    'text-tf-body-sm font-medium text-tf-muted',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    compoundVariants: [\n      { class: labelRoom.lg, labelled: true, size: 'lg' },\n      { class: labelRoom.md, labelled: true, size: 'md' },\n    ],\n    defaultVariants: { filled: false, labelled: true, size: defaultFieldSize },\n    variants: {\n      filled: { false: 'opacity-0', true: 'opacity-100' },\n      labelled: { false: 'py-0', true: '' },\n      size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n    },\n  },\n)\n\nconst TRIGGER_ROOM = TRAILING_INSET\n\nconst datePickerStartRecipe = cva('field-sizing-content h-full w-auto min-w-36 pr-0 tabular-nums')\n\nconst datePickerEndRecipe = cva([\n  'field-sizing-content h-full w-auto min-w-36 pl-0 tabular-nums',\n  TRIGGER_ROOM,\n])\n\nconst datePickerValueRecipe = cva(['tabular-nums', TRIGGER_ROOM])\n\nconst datePickerContentRecipe = cva([\n  'w-tf-panel max-w-[calc(100vw-2rem)] overflow-hidden px-0',\n  'blend-tf-accent',\n])\n\nconst datePickerViewsRecipe = cva('flex min-h-(--container-tf-panel) flex-col')\n\nconst datePickerViewRecipe = cva('flex flex-1 flex-col tf-arrives motion-reduce:transition-none')\n\nconst datePickerHeadRecipe = cva('relative flex flex-none items-center justify-between gap-2 p-2')\n\nconst datePickerRuleRecipe = cva(`absolute inset-x-0 bottom-0 ${ruleQuiet}`)\n\nconst datePickerNavRecipe = cva(controlQuietIcon)\n\nconst datePickerViewTriggerRecipe = cva([\n  'inline-flex h-tf-control-sm items-center gap-2 rounded-tf-control px-3',\n  'font-tf-display text-tf-body-sm font-medium text-tf-fg',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ...controlQuiet,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst PAGING = [\n  'data-[going=forward]:[--tf-page-from:calc(var(--spacing)*4)]',\n  'data-[going=back]:[--tf-page-from:calc(var(--spacing)*-4)]',\n  'data-[step=a]:motion-safe:animate-tf-page',\n  'data-[step=b]:motion-safe:animate-tf-page-again',\n]\n\nconst datePickerRangeTextRecipe = cva([\n  'inline-flex min-w-36 items-center justify-center gap-2',\n  ...PAGING,\n])\n\nconst datePickerBodyRecipe = cva(['flex flex-1 flex-col px-3 pt-3 pb-1', ...PAGING])\n\nconst datePickerGridRecipe = cva([\n  'w-full flex-1 table-fixed border-separate border-spacing-1',\n  'has-data-[in-hover-range]:**:data-[part=table-cell-trigger]:transition-none',\n])\n\nconst datePickerWeekCellRecipe = cva([`h-tf-row text-tf-caption-sm ${eyebrowQuiet}`])\n\nconst DAY_BAND = [\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:bg-tf-accent-tint',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:text-tf-accent-hi',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:rounded-tf-none',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:bg-tf-accent-tint',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:text-tf-accent-hi',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:rounded-tf-none',\n]\n\nconst DAY_ENDS = [\n  'data-[hover-range-start]:bg-tf-blend data-[hover-range-start]:text-tf-on-accent',\n  'data-[hover-range-end]:bg-tf-blend data-[hover-range-end]:text-tf-on-accent',\n  'data-[in-range]:not-data-[range-end]:data-[range-start]:rounded-r-tf-none',\n  'data-[in-range]:not-data-[range-start]:data-[range-end]:rounded-l-tf-none',\n  'data-[in-hover-range]:not-data-[hover-range-end]:data-[hover-range-start]:rounded-r-tf-none',\n  'data-[in-hover-range]:not-data-[hover-range-start]:data-[hover-range-end]:rounded-l-tf-none',\n]\n\nconst DAY_QUIET = [\n  'not-data-selected:not-data-[in-range]:data-weekend:text-tf-muted',\n  'data-[outside-range]:opacity-50',\n]\n\nconst datePickerDayRecipe = cva(\n  [\n    'inline-flex w-full items-center justify-center rounded-tf-control',\n    'text-tf-body-sm font-medium text-tf-fg tabular-nums blend-tf-accent',\n    'tf-ramp',\n    'not-data-[in-range]:interactive:hovered:bg-tf-panel-hi',\n    'data-today:tf-mark-edge data-today:tf-mark-lit',\n    'data-today:interactive:hovered:tf-mark-bloomed',\n    'data-selected:bg-tf-blend data-selected:text-tf-on-accent',\n    'motion-safe:data-selected:tf-pops',\n    ...DAY_BAND,\n    ...DAY_ENDS,\n    ...DAY_QUIET,\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { roomy: false },\n    variants: {\n      roomy: { false: 'h-tf-control-sm', true: 'h-15' },\n    },\n  },\n)\n\nconst datePickerFootRecipe = cva('flex flex-none flex-wrap gap-2 px-3 pt-2 pb-3')\n\nconst datePickerPresetRecipe = cva(\n  [\n    'relative isolate inline-flex h-tf-row flex-none items-center rounded-tf-pill px-3',\n    'text-tf-caption font-medium',\n    'tf-blend-outline blend-tf-accent',\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { current: false },\n    variants: {\n      current: {\n        false: 'text-tf-fg interactive:hovered:bg-tf-panel-hi',\n        true: 'bg-tf-blend text-tf-on-accent interactive:hovered:tf-blended',\n      },\n    },\n  },\n)\n\nexport {\n  type DatePickerMode,\n  type DatePickerRangePreset,\n  datePickerBodyRecipe,\n  datePickerContentRecipe,\n  datePickerDashRecipe,\n  datePickerDayRecipe,\n  datePickerEndRecipe,\n  datePickerFootRecipe,\n  datePickerGridRecipe,\n  datePickerHeadRecipe,\n  datePickerModes,\n  datePickerNavRecipe,\n  datePickerPresetRecipe,\n  datePickerRangePresets,\n  datePickerRangeTextRecipe,\n  datePickerRowRecipe,\n  datePickerRuleRecipe,\n  datePickerStartRecipe,\n  datePickerTriggerRecipe,\n  datePickerValueRecipe,\n  datePickerViewRecipe,\n  datePickerViewsRecipe,\n  datePickerViewTriggerRecipe,\n  datePickerWeekCellRecipe,\n  defaultDatePickerMode,\n}\n"],"mappings":";;;;;;;;AAmBA,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB,CAAC,UAAU,OAAO;AAiB1C,MAAM,yBAAyB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,sBAAsB,IAC1B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,QAAQ,MAAM;CACjC,UAAU,EACR,QAAQ;EAAE,OAAO;EAAI,MAAM;CAA4B,EACzD;AACF,CACF;AAEA,MAAM,0BAA0B,IAAI,CAAC,qBAAqB,GAAG,8BAA8B,CAAC;AAE5F,MAAM,uBAAuB,IAC3B;CACE;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB;EAAE,OAAO,UAAU;EAAI,UAAU;EAAM,MAAM;CAAK,GAClD;EAAE,OAAO,UAAU;EAAI,UAAU;EAAM,MAAM;CAAK,CACpD;CACA,iBAAiB;EAAE,QAAQ;EAAO,UAAU;EAAM,MAAA;CAAuB;CACzE,UAAU;EACR,QAAQ;GAAE,OAAO;GAAa,MAAM;EAAc;EAClD,UAAU;GAAE,OAAO;GAAQ,MAAM;EAAG;EACpC,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;CACzB;AACF,CACF;AAEA,MAAM,eAAe;AAErB,MAAM,wBAAwB,IAAI,+DAA+D;AAEjG,MAAM,sBAAsB,IAAI,CAC9B,iEACA,YACF,CAAC;AAED,MAAM,wBAAwB,IAAI,CAAC,gBAAgB,YAAY,CAAC;AAEhE,MAAM,0BAA0B,IAAI,CAClC,4DACA,iBACF,CAAC;AAED,MAAM,wBAAwB,IAAI,4CAA4C;AAE9E,MAAM,uBAAuB,IAAI,+DAA+D;AAEhG,MAAM,uBAAuB,IAAI,gEAAgE;AAEjG,MAAM,uBAAuB,IAAI,+BAA+B,WAAW;AAE3E,MAAM,sBAAsB,IAAI,gBAAgB;AAEhD,MAAM,8BAA8B,IAAI;CACtC;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,SAAS;CACb;CACA;CACA;CACA;AACF;AAEA,MAAM,4BAA4B,IAAI,CACpC,0DACA,GAAG,MACL,CAAC;AAED,MAAM,uBAAuB,IAAI,CAAC,uCAAuC,GAAG,MAAM,CAAC;AAEnF,MAAM,uBAAuB,IAAI,CAC/B,8DACA,6EACF,CAAC;AAED,MAAM,2BAA2B,IAAI,CAAC,+BAA+B,cAAc,CAAC;AAEpF,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,YAAY,CAChB,oEACA,iCACF;AAEA,MAAM,sBAAsB,IAC1B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,OAAO,MAAM;CAChC,UAAU,EACR,OAAO;EAAE,OAAO;EAAmB,MAAM;CAAO,EAClD;AACF,CACF;AAEA,MAAM,uBAAuB,IAAI,+CAA+C;AAEhF,MAAM,yBAAyB,IAC7B;CACE;CACA;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":"datePicker.js","names":[],"sources":["../../src/recipes/datePicker.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\nimport {\n  controlInert,\n  controlPress,\n  controlQuiet,\n  controlQuietIcon,\n  controlReach,\n} from '#parts/control'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport { ruleQuiet } from '#parts/rule'\n\nimport { fieldFootRecipe, fieldRecipe, leadingRecipe, trailingActionRecipe } from './field'\nimport { labelRoom, TRAILING_INSET } from './input'\n\ntype DatePickerMode = 'single' | 'range'\n\nconst defaultDatePickerMode = 'single' satisfies DatePickerMode\n\nconst datePickerModes = ['single', 'range'] as const satisfies readonly DatePickerMode[]\n\ntype DatePickerRangePreset =\n  | 'thisWeek'\n  | 'lastWeek'\n  | 'thisMonth'\n  | 'lastMonth'\n  | 'thisQuarter'\n  | 'lastQuarter'\n  | 'thisYear'\n  | 'lastYear'\n  | 'last3Days'\n  | 'last7Days'\n  | 'last14Days'\n  | 'last30Days'\n  | 'last90Days'\n\nconst datePickerRangePresets = [\n  'thisWeek',\n  'lastWeek',\n  'thisMonth',\n  'lastMonth',\n  'thisQuarter',\n  'lastQuarter',\n  'thisYear',\n  'lastYear',\n  'last3Days',\n  'last7Days',\n  'last14Days',\n  'last30Days',\n  'last90Days',\n] as const satisfies readonly DatePickerRangePreset[]\n\nconst datePickerRowRecipe = cva(\n  [\n    'data-[state=open]:bg-tf-sunken-hi data-[state=open]:tf-edge-lit',\n    'data-[state=open]:**:data-[part=leading]:text-tf-accent-hi',\n    'data-[state=open]:**:data-[part=leading]:stroke-tf-ink',\n    'data-[state=open]:**:data-[part=trigger]:text-tf-accent-hi',\n    'data-[state=open]:**:data-[part=trigger]:stroke-tf-ink',\n    'reached:**:data-[part=trigger]:text-tf-accent-hi',\n    'reached:**:data-[part=trigger]:stroke-tf-ink',\n    'reached:**:data-[part=dash]:opacity-100',\n    'reached:**:data-[part=dash]:delay-(--tf-duration-1)',\n  ],\n  {\n    defaultVariants: { ranged: false },\n    variants: {\n      ranged: { false: '', true: 'w-fit max-w-full min-w-60' },\n    },\n  },\n)\n\nconst datePickerTriggerRecipe = cva([trailingActionRecipe(), 'data-[state=open]:rotate-180'])\n\nconst datePickerDashRecipe = cva(\n  [\n    'flex flex-none items-center self-stretch px-2',\n    'text-tf-body-sm font-medium text-tf-muted',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    compoundVariants: [\n      { class: labelRoom.lg, labelled: true, size: 'lg' },\n      { class: labelRoom.md, labelled: true, size: 'md' },\n    ],\n    defaultVariants: { filled: false, labelled: true, size: defaultFieldSize },\n    variants: {\n      filled: { false: 'opacity-0', true: 'opacity-100' },\n      labelled: { false: 'py-0', true: '' },\n      size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n    },\n  },\n)\n\nconst TRIGGER_ROOM = TRAILING_INSET\n\nconst datePickerStartRecipe = cva('field-sizing-content h-full w-auto min-w-36 pr-0 tabular-nums')\n\nconst datePickerEndRecipe = cva([\n  'field-sizing-content h-full w-auto min-w-36 pl-0 tabular-nums',\n  TRIGGER_ROOM,\n])\n\nconst datePickerValueRecipe = cva(['tabular-nums', TRIGGER_ROOM])\n\nconst datePickerContentRecipe = cva([\n  'w-tf-panel max-w-[calc(100vw-2rem)] overflow-hidden px-0',\n  'blend-tf-accent',\n])\n\nconst datePickerViewsRecipe = cva('flex min-h-(--container-tf-panel) flex-col')\n\nconst datePickerViewRecipe = cva('flex flex-1 flex-col tf-arrives motion-reduce:transition-none')\n\nconst datePickerHeadRecipe = cva('relative flex flex-none items-center justify-between gap-2 p-2')\n\nconst datePickerRuleRecipe = cva(`absolute inset-x-0 bottom-0 ${ruleQuiet}`)\n\nconst datePickerNavRecipe = cva(controlQuietIcon)\n\nconst datePickerViewTriggerRecipe = cva([\n  'inline-flex h-tf-control-sm items-center gap-2 rounded-tf-control px-3',\n  'font-tf-display text-tf-body-sm font-medium text-tf-fg',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ...controlQuiet,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst PAGING = [\n  'data-[going=forward]:[--tf-page-from:calc(var(--spacing)*4)]',\n  'data-[going=back]:[--tf-page-from:calc(var(--spacing)*-4)]',\n  'data-[step=a]:motion-safe:animate-tf-page',\n  'data-[step=b]:motion-safe:animate-tf-page-again',\n]\n\nconst datePickerRangeTextRecipe = cva([\n  'inline-flex min-w-36 items-center justify-center gap-2',\n  ...PAGING,\n])\n\nconst datePickerBodyRecipe = cva(['flex flex-1 flex-col px-3 pt-3 pb-1', ...PAGING])\n\nconst datePickerGridRecipe = cva([\n  'w-full flex-1 table-fixed border-separate border-spacing-1',\n  'has-data-[in-hover-range]:**:data-[part=table-cell-trigger]:transition-none',\n])\n\nconst datePickerWeekCellRecipe = cva([`h-tf-row text-tf-caption-sm ${eyebrowQuiet}`])\n\nconst DAY_BAND = [\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:bg-tf-accent-tint',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:text-tf-accent-hi',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:rounded-tf-none',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:bg-tf-accent-tint',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:text-tf-accent-hi',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:rounded-tf-none',\n]\n\nconst DAY_ENDS = [\n  'data-[hover-range-start]:bg-tf-blend data-[hover-range-start]:text-tf-on-accent',\n  'data-[hover-range-end]:bg-tf-blend data-[hover-range-end]:text-tf-on-accent',\n  'data-[in-range]:not-data-[range-end]:data-[range-start]:rounded-r-tf-none',\n  'data-[in-range]:not-data-[range-start]:data-[range-end]:rounded-l-tf-none',\n  'data-[in-hover-range]:not-data-[hover-range-end]:data-[hover-range-start]:rounded-r-tf-none',\n  'data-[in-hover-range]:not-data-[hover-range-start]:data-[hover-range-end]:rounded-l-tf-none',\n]\n\nconst DAY_QUIET = [\n  'not-data-selected:not-data-[in-range]:data-weekend:text-tf-muted',\n  'data-[outside-range]:opacity-50',\n]\n\nconst datePickerDayRecipe = cva(\n  [\n    'inline-flex w-full items-center justify-center rounded-tf-control',\n    'text-tf-body-sm font-medium text-tf-fg tabular-nums blend-tf-accent',\n    'tf-ramp',\n    'not-data-[in-range]:interactive:hovered:bg-tf-panel-hi',\n    'data-today:tf-mark-edge data-today:tf-mark-lit',\n    'data-today:interactive:hovered:tf-mark-bloomed',\n    'data-selected:bg-tf-blend data-selected:text-tf-on-accent',\n    'motion-safe:data-selected:tf-pops',\n    ...DAY_BAND,\n    ...DAY_ENDS,\n    ...DAY_QUIET,\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { roomy: false },\n    variants: {\n      roomy: { false: 'h-tf-control-sm', true: 'h-15' },\n    },\n  },\n)\n\nconst datePickerFootRecipe = cva('flex flex-none flex-wrap gap-2 px-3 pt-2 pb-3')\n\nconst datePickerPresetRecipe = cva(\n  [\n    'relative isolate inline-flex h-tf-row flex-none items-center rounded-tf-pill px-3',\n    'text-tf-caption font-medium',\n    'tf-blend-outline blend-tf-accent',\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { current: false },\n    variants: {\n      current: {\n        false: 'text-tf-fg interactive:hovered:bg-tf-panel-hi',\n        true: 'bg-tf-blend text-tf-on-accent interactive:hovered:tf-blended',\n      },\n    },\n  },\n)\n\nconst datePickerAnatomy = anatomy({\n  body: { part: 'body', recipe: datePickerBodyRecipe, required: true },\n  dash: { part: 'dash', recipe: datePickerDashRecipe, required: false },\n  foot: { part: 'foot', recipe: fieldFootRecipe, required: true },\n  leading: { part: 'leading', recipe: leadingRecipe, required: true },\n  presets: { part: 'presets', recipe: datePickerFootRecipe, required: false },\n  rangeLabel: { part: 'range-label', recipe: datePickerRangeTextRecipe, required: true },\n  root: { part: 'date-picker', recipe: fieldRecipe, required: true },\n  row: { part: 'row', recipe: datePickerRowRecipe, required: true },\n  rule: { part: 'rule', recipe: datePickerRuleRecipe, required: true },\n  views: { part: 'views', recipe: datePickerViewsRecipe, required: true },\n})\n\nexport {\n  type DatePickerMode,\n  type DatePickerRangePreset,\n  datePickerAnatomy,\n  datePickerBodyRecipe,\n  datePickerContentRecipe,\n  datePickerDashRecipe,\n  datePickerDayRecipe,\n  datePickerEndRecipe,\n  datePickerFootRecipe,\n  datePickerGridRecipe,\n  datePickerHeadRecipe,\n  datePickerModes,\n  datePickerNavRecipe,\n  datePickerPresetRecipe,\n  datePickerRangePresets,\n  datePickerRangeTextRecipe,\n  datePickerRowRecipe,\n  datePickerRuleRecipe,\n  datePickerStartRecipe,\n  datePickerTriggerRecipe,\n  datePickerValueRecipe,\n  datePickerViewRecipe,\n  datePickerViewsRecipe,\n  datePickerViewTriggerRecipe,\n  datePickerWeekCellRecipe,\n  defaultDatePickerMode,\n}\n"],"mappings":";;;;;;;;;AAoBA,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB,CAAC,UAAU,OAAO;AAiB1C,MAAM,yBAAyB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,sBAAsB,IAC1B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,QAAQ,MAAM;CACjC,UAAU,EACR,QAAQ;EAAE,OAAO;EAAI,MAAM;CAA4B,EACzD;AACF,CACF;AAEA,MAAM,0BAA0B,IAAI,CAAC,qBAAqB,GAAG,8BAA8B,CAAC;AAE5F,MAAM,uBAAuB,IAC3B;CACE;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB;EAAE,OAAO,UAAU;EAAI,UAAU;EAAM,MAAM;CAAK,GAClD;EAAE,OAAO,UAAU;EAAI,UAAU;EAAM,MAAM;CAAK,CACpD;CACA,iBAAiB;EAAE,QAAQ;EAAO,UAAU;EAAM,MAAA;CAAuB;CACzE,UAAU;EACR,QAAQ;GAAE,OAAO;GAAa,MAAM;EAAc;EAClD,UAAU;GAAE,OAAO;GAAQ,MAAM;EAAG;EACpC,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;CACzB;AACF,CACF;AAEA,MAAM,eAAe;AAErB,MAAM,wBAAwB,IAAI,+DAA+D;AAEjG,MAAM,sBAAsB,IAAI,CAC9B,iEACA,YACF,CAAC;AAED,MAAM,wBAAwB,IAAI,CAAC,gBAAgB,YAAY,CAAC;AAEhE,MAAM,0BAA0B,IAAI,CAClC,4DACA,iBACF,CAAC;AAED,MAAM,wBAAwB,IAAI,4CAA4C;AAE9E,MAAM,uBAAuB,IAAI,+DAA+D;AAEhG,MAAM,uBAAuB,IAAI,gEAAgE;AAEjG,MAAM,uBAAuB,IAAI,+BAA+B,WAAW;AAE3E,MAAM,sBAAsB,IAAI,gBAAgB;AAEhD,MAAM,8BAA8B,IAAI;CACtC;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,SAAS;CACb;CACA;CACA;CACA;AACF;AAEA,MAAM,4BAA4B,IAAI,CACpC,0DACA,GAAG,MACL,CAAC;AAED,MAAM,uBAAuB,IAAI,CAAC,uCAAuC,GAAG,MAAM,CAAC;AAEnF,MAAM,uBAAuB,IAAI,CAC/B,8DACA,6EACF,CAAC;AAED,MAAM,2BAA2B,IAAI,CAAC,+BAA+B,cAAc,CAAC;AAEpF,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,YAAY,CAChB,oEACA,iCACF;AAEA,MAAM,sBAAsB,IAC1B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,OAAO,MAAM;CAChC,UAAU,EACR,OAAO;EAAE,OAAO;EAAmB,MAAM;CAAO,EAClD;AACF,CACF;AAEA,MAAM,uBAAuB,IAAI,+CAA+C;AAEhF,MAAM,yBAAyB,IAC7B;CACE;CACA;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,oBAAoB,QAAQ;CAChC,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAsB,UAAU;CAAK;CACnE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAsB,UAAU;CAAM;CACpE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAK;CAC9D,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAe,UAAU;CAAK;CAClE,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAsB,UAAU;CAAM;CAC1E,YAAY;EAAE,MAAM;EAAe,QAAQ;EAA2B,UAAU;CAAK;CACrF,MAAM;EAAE,MAAM;EAAe,QAAQ;EAAa,UAAU;CAAK;CACjE,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAqB,UAAU;CAAK;CAChE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAsB,UAAU;CAAK;CACnE,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAuB,UAAU;CAAK;AACxE,CAAC"}

package/dist/recipes/dialog.d.ts

@@ -32,6 +32,54 @@ declare const dialogRowRecipe: (props?: import("class-variance-authority/types")
 declare const dialogRowValueRecipe: (props?: ({
   lit?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const dialogAnatomy: {
+  readonly body: {
+    readonly part: "body";
+    readonly recipe: (props?: ({
+      layout?: "panel" | "confirm" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly cloud: {
+    readonly part: "cloud";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly footer: {
+    readonly part: "footer";
+    readonly recipe: (props?: ({
+      layout?: "panel" | "confirm" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+  readonly head: {
+    readonly part: "head";
+    readonly recipe: (props?: ({
+      layout?: "panel" | "confirm" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly headings: {
+    readonly part: "headings";
+    readonly recipe: (props?: ({
+      layout?: "panel" | "confirm" | null | undefined;
+      roomy?: boolean | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly nebula: {
+    readonly part: "nebula";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "dialog";
+    readonly recipe: (props?: ({
+      size?: "sm" | "md" | "lg" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type DialogLayout, type DialogSize, defaultDialogLayout, defaultDialogSize, dialogBackdropRecipe, dialogBodyRecipe, dialogCloseRecipe, dialogDescriptionRecipe, dialogFooterRecipe, dialogHeadRecipe, dialogHeadingsRecipe, dialogHeldRecipe, dialogLayouts, dialogNoteRecipe, dialogPositionerRecipe, dialogRecipe, dialogRowRecipe, dialogRowValueRecipe, dialogSizes, dialogTitleRecipe };
+export { type DialogLayout, type DialogSize, defaultDialogLayout, defaultDialogSize, dialogAnatomy, dialogBackdropRecipe, dialogBodyRecipe, dialogCloseRecipe, dialogDescriptionRecipe, dialogFooterRecipe, dialogHeadRecipe, dialogHeadingsRecipe, dialogHeldRecipe, dialogLayouts, dialogNoteRecipe, dialogPositionerRecipe, dialogRecipe, dialogRowRecipe, dialogRowValueRecipe, dialogSizes, dialogTitleRecipe };
 //# sourceMappingURL=dialog.d.ts.map

package/dist/recipes/dialog.js

@@ -1,5 +1,7 @@
+import { anatomy } from "../anatomy.js";
 import { liftMotion, scrimMirrorMotion } from "./motion.js";
 import { surfaceLifted, surfacePanel } from "../parts/surface.js";
+import { nebulaCloudWideRecipe, nebulaVeilRecipe } from "./nebula.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/dialog.ts
 const defaultDialogLayout = "panel";
@@ -110,7 +112,44 @@ const dialogRowValueRecipe = cva("text-tf-fg tabular-nums", {
 		true: "text-tf-accent-hi"
 	} }
 });
+const dialogAnatomy = anatomy({
+	body: {
+		part: "body",
+		recipe: dialogBodyRecipe,
+		required: true
+	},
+	cloud: {
+		part: "cloud",
+		recipe: nebulaCloudWideRecipe,
+		required: true
+	},
+	footer: {
+		part: "footer",
+		recipe: dialogFooterRecipe,
+		required: false
+	},
+	head: {
+		part: "head",
+		recipe: dialogHeadRecipe,
+		required: true
+	},
+	headings: {
+		part: "headings",
+		recipe: dialogHeadingsRecipe,
+		required: true
+	},
+	nebula: {
+		part: "nebula",
+		recipe: nebulaVeilRecipe,
+		required: true
+	},
+	root: {
+		part: "dialog",
+		recipe: dialogRecipe,
+		required: true
+	}
+});
 //#endregion
-export { defaultDialogLayout, defaultDialogSize, dialogBackdropRecipe, dialogBodyRecipe, dialogCloseRecipe, dialogDescriptionRecipe, dialogFooterRecipe, dialogHeadRecipe, dialogHeadingsRecipe, dialogHeldRecipe, dialogLayouts, dialogNoteRecipe, dialogPositionerRecipe, dialogRecipe, dialogRowRecipe, dialogRowValueRecipe, dialogSizes, dialogTitleRecipe };
+export { defaultDialogLayout, defaultDialogSize, dialogAnatomy, dialogBackdropRecipe, dialogBodyRecipe, dialogCloseRecipe, dialogDescriptionRecipe, dialogFooterRecipe, dialogHeadRecipe, dialogHeadingsRecipe, dialogHeldRecipe, dialogLayouts, dialogNoteRecipe, dialogPositionerRecipe, dialogRecipe, dialogRowRecipe, dialogRowValueRecipe, dialogSizes, dialogTitleRecipe };
 
 //# sourceMappingURL=dialog.js.map

package/dist/recipes/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../src/recipes/dialog.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { surfaceLifted, surfacePanel } from '#parts/surface'\n\nimport { liftMotion, scrimMirrorMotion } from './motion'\n\ntype DialogSize = 'sm' | 'md' | 'lg'\n\ntype DialogLayout = 'panel' | 'confirm'\n\nconst defaultDialogLayout = 'panel' satisfies DialogLayout\n\nconst dialogLayouts = ['panel', 'confirm'] as const satisfies readonly DialogLayout[]\n\nconst defaultDialogSize = 'md' satisfies DialogSize\n\nconst dialogSizes = ['sm', 'md', 'lg'] as const satisfies readonly DialogSize[]\n\nconst WIDTH = {\n  lg: 'max-w-tf-page',\n  md: 'max-w-tf-measure',\n  sm: 'max-w-tf-panel',\n} satisfies Record<DialogSize, string>\n\nconst GROUND = 'relative bg-tf-shade-under'\n\nconst REGION = 'relative'\n\nconst FULL = [\n  '@max-tf-panel:absolute @max-tf-panel:inset-0',\n  '@max-tf-panel:max-h-none @max-tf-panel:max-w-none',\n  '@max-tf-panel:rounded-tf-none',\n]\n\nconst dialogBackdropRecipe = cva([\n  'fixed inset-0 z-tf-modal bg-tf-scrim backdrop-blur-tf-scrim',\n  ...scrimMirrorMotion,\n  'motion-reduce:animate-none',\n])\n\nconst dialogPositionerRecipe = cva([\n  '@container fixed inset-0 z-tf-modal flex items-center justify-center p-4 sm:p-10',\n  'font-tf-body',\n])\n\nconst dialogRecipe = cva(\n  [\n    ...surfacePanel,\n    'tf-edge-plain',\n    ...surfaceLifted,\n    'flex max-h-full w-full flex-col overflow-hidden outline-hidden',\n    'text-tf-body-sm font-medium text-tf-fg',\n    ...FULL,\n    ...liftMotion,\n    'motion-reduce:animate-none',\n  ],\n  {\n    defaultVariants: { size: defaultDialogSize },\n    variants: { size: WIDTH },\n  },\n)\n\nconst dialogHeldRecipe = cva('motion-safe:data-[state=open]:data-held:tf-shaken')\n\nconst dialogHeadRecipe = cva([REGION, 'flex flex-none flex-col px-6 pt-8'], {\n  defaultVariants: { layout: defaultDialogLayout },\n  variants: {\n    layout: {\n      confirm: 'items-center gap-6 text-center',\n      panel: 'gap-6 @max-tf-panel:pt-6',\n    } satisfies Record<DialogLayout, string>,\n  },\n})\n\nconst dialogHeadingsRecipe = cva('flex min-w-0 flex-none flex-col', {\n  compoundVariants: [{ class: 'pr-12', layout: 'panel', roomy: true }],\n  defaultVariants: { layout: defaultDialogLayout, roomy: false },\n  variants: {\n    layout: {\n      confirm: 'items-center gap-3 text-center',\n      panel: 'gap-2 pb-2',\n    } satisfies Record<DialogLayout, string>,\n    roomy: { false: '', true: '' },\n  },\n})\n\nconst dialogTitleRecipe = cva('font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg')\n\nconst dialogDescriptionRecipe = cva('text-tf-body-sm font-medium text-tf-muted')\n\nconst dialogCloseRecipe = cva('absolute top-3 right-3 z-tf-raised')\n\nconst FADED = [\n  'tf-scroll-faded tf-scroll-thin',\n  '[--tf-fade-head:calc(var(--spacing)*6)] [--tf-fade-foot:calc(var(--spacing)*8)]',\n  'outline-hidden focused:outline-2 focused:-outline-offset-2 focused:outline-tf-accent-hi',\n].join(' ')\n\nconst dialogBodyRecipe = cva(\n  [REGION, 'flex min-h-0 flex-col overflow-y-auto px-6 pt-6', FADED, '@max-tf-panel:flex-1'],\n  {\n    defaultVariants: { layout: defaultDialogLayout },\n    variants: {\n      layout: {\n        confirm: 'items-center gap-6 pb-0 text-center',\n        panel: 'gap-6 pb-8 @max-tf-panel:pb-6',\n      } satisfies Record<DialogLayout, string>,\n    },\n  },\n)\n\nconst dialogFooterRecipe = cva(\n  ['flex flex-none gap-3 rounded-b-tf-card px-6', '@max-tf-panel:rounded-tf-none'],\n  {\n    defaultVariants: { layout: defaultDialogLayout },\n    variants: {\n      layout: {\n        confirm: `${REGION} flex-nowrap items-center pt-6 pb-6 *:flex-1`,\n        panel: [\n          GROUND,\n          'flex-wrap items-center justify-end py-5',\n          '@max-tf-panel:flex-col-reverse @max-tf-panel:flex-nowrap @max-tf-panel:*:w-full',\n        ].join(' '),\n      } satisfies Record<DialogLayout, string>,\n    },\n  },\n)\n\nconst dialogNoteRecipe = cva('mr-auto text-tf-caption font-medium text-tf-muted tabular-nums')\n\nconst dialogRowRecipe = cva([\n  'flex h-tf-row flex-none items-center justify-between gap-3',\n  'rounded-tf-inline px-3 text-tf-muted',\n])\n\nconst dialogRowValueRecipe = cva('text-tf-fg tabular-nums', {\n  defaultVariants: { lit: false },\n  variants: {\n    lit: { false: '', true: 'text-tf-accent-hi' },\n  },\n})\n\nexport {\n  type DialogLayout,\n  type DialogSize,\n  defaultDialogLayout,\n  defaultDialogSize,\n  dialogLayouts,\n  dialogBackdropRecipe,\n  dialogBodyRecipe,\n  dialogCloseRecipe,\n  dialogDescriptionRecipe,\n  dialogFooterRecipe,\n  dialogHeadRecipe,\n  dialogHeadingsRecipe,\n  dialogHeldRecipe,\n  dialogNoteRecipe,\n  dialogPositionerRecipe,\n  dialogRecipe,\n  dialogRowRecipe,\n  dialogRowValueRecipe,\n  dialogSizes,\n  dialogTitleRecipe,\n}\n"],"mappings":";;;;AAUA,MAAM,sBAAsB;AAE5B,MAAM,gBAAgB,CAAC,SAAS,SAAS;AAEzC,MAAM,oBAAoB;AAE1B,MAAM,cAAc;CAAC;CAAM;CAAM;AAAI;AAErC,MAAM,QAAQ;CACZ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,SAAS;AAEf,MAAM,SAAS;AAEf,MAAM,OAAO;CACX;CACA;CACA;AACF;AAEA,MAAM,uBAAuB,IAAI;CAC/B;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,yBAAyB,IAAI,CACjC,oFACA,cACF,CAAC;AAED,MAAM,eAAe,IACnB;CACE,GAAG;CACH;CACA,GAAG;CACH;CACA;CACA,GAAG;CACH,GAAG;CACH;AACF,GACA;CACE,iBAAiB,EAAE,MAAA,KAAwB;CAC3C,UAAU,EAAE,MAAM,MAAM;AAC1B,CACF;AAEA,MAAM,mBAAmB,IAAI,mDAAmD;AAEhF,MAAM,mBAAmB,IAAI,CAAC,QAAQ,mCAAmC,GAAG;CAC1E,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,uBAAuB,IAAI,mCAAmC;CAClE,kBAAkB,CAAC;EAAE,OAAO;EAAS,QAAQ;EAAS,OAAO;CAAK,CAAC;CACnE,iBAAiB;EAAE,QAAQ;EAAqB,OAAO;CAAM;CAC7D,UAAU;EACR,QAAQ;GACN,SAAS;GACT,OAAO;EACT;EACA,OAAO;GAAE,OAAO;GAAI,MAAM;EAAG;CAC/B;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,mEAAmE;AAEjG,MAAM,0BAA0B,IAAI,2CAA2C;AAE/E,MAAM,oBAAoB,IAAI,oCAAoC;AAElE,MAAM,QAAQ;CACZ;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,mBAAmB,IACvB;CAAC;CAAQ;CAAmD;CAAO;AAAsB,GACzF;CACE,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;CACT,EACF;AACF,CACF;AAEA,MAAM,qBAAqB,IACzB,CAAC,+CAA+C,+BAA+B,GAC/E;CACE,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS,GAAG,OAAO;EACnB,OAAO;GACL;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ,EACF;AACF,CACF;AAEA,MAAM,mBAAmB,IAAI,gEAAgE;AAE7F,MAAM,kBAAkB,IAAI,CAC1B,8DACA,sCACF,CAAC;AAED,MAAM,uBAAuB,IAAI,2BAA2B;CAC1D,iBAAiB,EAAE,KAAK,MAAM;CAC9B,UAAU,EACR,KAAK;EAAE,OAAO;EAAI,MAAM;CAAoB,EAC9C;AACF,CAAC"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../src/recipes/dialog.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { surfaceLifted, surfacePanel } from '#parts/surface'\n\nimport { liftMotion, scrimMirrorMotion } from './motion'\nimport { nebulaCloudWideRecipe, nebulaVeilRecipe } from './nebula'\n\ntype DialogSize = 'sm' | 'md' | 'lg'\n\ntype DialogLayout = 'panel' | 'confirm'\n\nconst defaultDialogLayout = 'panel' satisfies DialogLayout\n\nconst dialogLayouts = ['panel', 'confirm'] as const satisfies readonly DialogLayout[]\n\nconst defaultDialogSize = 'md' satisfies DialogSize\n\nconst dialogSizes = ['sm', 'md', 'lg'] as const satisfies readonly DialogSize[]\n\nconst WIDTH = {\n  lg: 'max-w-tf-page',\n  md: 'max-w-tf-measure',\n  sm: 'max-w-tf-panel',\n} satisfies Record<DialogSize, string>\n\nconst GROUND = 'relative bg-tf-shade-under'\n\nconst REGION = 'relative'\n\nconst FULL = [\n  '@max-tf-panel:absolute @max-tf-panel:inset-0',\n  '@max-tf-panel:max-h-none @max-tf-panel:max-w-none',\n  '@max-tf-panel:rounded-tf-none',\n]\n\nconst dialogBackdropRecipe = cva([\n  'fixed inset-0 z-tf-modal bg-tf-scrim backdrop-blur-tf-scrim',\n  ...scrimMirrorMotion,\n  'motion-reduce:animate-none',\n])\n\nconst dialogPositionerRecipe = cva([\n  '@container fixed inset-0 z-tf-modal flex items-center justify-center p-4 sm:p-10',\n  'font-tf-body',\n])\n\nconst dialogRecipe = cva(\n  [\n    ...surfacePanel,\n    'tf-edge-plain',\n    ...surfaceLifted,\n    'flex max-h-full w-full flex-col overflow-hidden outline-hidden',\n    'text-tf-body-sm font-medium text-tf-fg',\n    ...FULL,\n    ...liftMotion,\n    'motion-reduce:animate-none',\n  ],\n  {\n    defaultVariants: { size: defaultDialogSize },\n    variants: { size: WIDTH },\n  },\n)\n\nconst dialogHeldRecipe = cva('motion-safe:data-[state=open]:data-held:tf-shaken')\n\nconst dialogHeadRecipe = cva([REGION, 'flex flex-none flex-col px-6 pt-8'], {\n  defaultVariants: { layout: defaultDialogLayout },\n  variants: {\n    layout: {\n      confirm: 'items-center gap-6 text-center',\n      panel: 'gap-6 @max-tf-panel:pt-6',\n    } satisfies Record<DialogLayout, string>,\n  },\n})\n\nconst dialogHeadingsRecipe = cva('flex min-w-0 flex-none flex-col', {\n  compoundVariants: [{ class: 'pr-12', layout: 'panel', roomy: true }],\n  defaultVariants: { layout: defaultDialogLayout, roomy: false },\n  variants: {\n    layout: {\n      confirm: 'items-center gap-3 text-center',\n      panel: 'gap-2 pb-2',\n    } satisfies Record<DialogLayout, string>,\n    roomy: { false: '', true: '' },\n  },\n})\n\nconst dialogTitleRecipe = cva('font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg')\n\nconst dialogDescriptionRecipe = cva('text-tf-body-sm font-medium text-tf-muted')\n\nconst dialogCloseRecipe = cva('absolute top-3 right-3 z-tf-raised')\n\nconst FADED = [\n  'tf-scroll-faded tf-scroll-thin',\n  '[--tf-fade-head:calc(var(--spacing)*6)] [--tf-fade-foot:calc(var(--spacing)*8)]',\n  'outline-hidden focused:outline-2 focused:-outline-offset-2 focused:outline-tf-accent-hi',\n].join(' ')\n\nconst dialogBodyRecipe = cva(\n  [REGION, 'flex min-h-0 flex-col overflow-y-auto px-6 pt-6', FADED, '@max-tf-panel:flex-1'],\n  {\n    defaultVariants: { layout: defaultDialogLayout },\n    variants: {\n      layout: {\n        confirm: 'items-center gap-6 pb-0 text-center',\n        panel: 'gap-6 pb-8 @max-tf-panel:pb-6',\n      } satisfies Record<DialogLayout, string>,\n    },\n  },\n)\n\nconst dialogFooterRecipe = cva(\n  ['flex flex-none gap-3 rounded-b-tf-card px-6', '@max-tf-panel:rounded-tf-none'],\n  {\n    defaultVariants: { layout: defaultDialogLayout },\n    variants: {\n      layout: {\n        confirm: `${REGION} flex-nowrap items-center pt-6 pb-6 *:flex-1`,\n        panel: [\n          GROUND,\n          'flex-wrap items-center justify-end py-5',\n          '@max-tf-panel:flex-col-reverse @max-tf-panel:flex-nowrap @max-tf-panel:*:w-full',\n        ].join(' '),\n      } satisfies Record<DialogLayout, string>,\n    },\n  },\n)\n\nconst dialogNoteRecipe = cva('mr-auto text-tf-caption font-medium text-tf-muted tabular-nums')\n\nconst dialogRowRecipe = cva([\n  'flex h-tf-row flex-none items-center justify-between gap-3',\n  'rounded-tf-inline px-3 text-tf-muted',\n])\n\nconst dialogRowValueRecipe = cva('text-tf-fg tabular-nums', {\n  defaultVariants: { lit: false },\n  variants: {\n    lit: { false: '', true: 'text-tf-accent-hi' },\n  },\n})\n\nconst dialogAnatomy = anatomy({\n  body: { part: 'body', recipe: dialogBodyRecipe, required: true },\n  cloud: { part: 'cloud', recipe: nebulaCloudWideRecipe, required: true },\n  footer: { part: 'footer', recipe: dialogFooterRecipe, required: false },\n  head: { part: 'head', recipe: dialogHeadRecipe, required: true },\n  headings: { part: 'headings', recipe: dialogHeadingsRecipe, required: true },\n  nebula: { part: 'nebula', recipe: nebulaVeilRecipe, required: true },\n  root: { part: 'dialog', recipe: dialogRecipe, required: true },\n})\n\nexport {\n  type DialogLayout,\n  type DialogSize,\n  defaultDialogLayout,\n  defaultDialogSize,\n  dialogLayouts,\n  dialogAnatomy,\n  dialogBackdropRecipe,\n  dialogBodyRecipe,\n  dialogCloseRecipe,\n  dialogDescriptionRecipe,\n  dialogFooterRecipe,\n  dialogHeadRecipe,\n  dialogHeadingsRecipe,\n  dialogHeldRecipe,\n  dialogNoteRecipe,\n  dialogPositionerRecipe,\n  dialogRecipe,\n  dialogRowRecipe,\n  dialogRowValueRecipe,\n  dialogSizes,\n  dialogTitleRecipe,\n}\n"],"mappings":";;;;;;AAYA,MAAM,sBAAsB;AAE5B,MAAM,gBAAgB,CAAC,SAAS,SAAS;AAEzC,MAAM,oBAAoB;AAE1B,MAAM,cAAc;CAAC;CAAM;CAAM;AAAI;AAErC,MAAM,QAAQ;CACZ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,SAAS;AAEf,MAAM,SAAS;AAEf,MAAM,OAAO;CACX;CACA;CACA;AACF;AAEA,MAAM,uBAAuB,IAAI;CAC/B;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,yBAAyB,IAAI,CACjC,oFACA,cACF,CAAC;AAED,MAAM,eAAe,IACnB;CACE,GAAG;CACH;CACA,GAAG;CACH;CACA;CACA,GAAG;CACH,GAAG;CACH;AACF,GACA;CACE,iBAAiB,EAAE,MAAA,KAAwB;CAC3C,UAAU,EAAE,MAAM,MAAM;AAC1B,CACF;AAEA,MAAM,mBAAmB,IAAI,mDAAmD;AAEhF,MAAM,mBAAmB,IAAI,CAAC,QAAQ,mCAAmC,GAAG;CAC1E,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,uBAAuB,IAAI,mCAAmC;CAClE,kBAAkB,CAAC;EAAE,OAAO;EAAS,QAAQ;EAAS,OAAO;CAAK,CAAC;CACnE,iBAAiB;EAAE,QAAQ;EAAqB,OAAO;CAAM;CAC7D,UAAU;EACR,QAAQ;GACN,SAAS;GACT,OAAO;EACT;EACA,OAAO;GAAE,OAAO;GAAI,MAAM;EAAG;CAC/B;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,mEAAmE;AAEjG,MAAM,0BAA0B,IAAI,2CAA2C;AAE/E,MAAM,oBAAoB,IAAI,oCAAoC;AAElE,MAAM,QAAQ;CACZ;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,mBAAmB,IACvB;CAAC;CAAQ;CAAmD;CAAO;AAAsB,GACzF;CACE,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;CACT,EACF;AACF,CACF;AAEA,MAAM,qBAAqB,IACzB,CAAC,+CAA+C,+BAA+B,GAC/E;CACE,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS,GAAG,OAAO;EACnB,OAAO;GACL;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ,EACF;AACF,CACF;AAEA,MAAM,mBAAmB,IAAI,gEAAgE;AAE7F,MAAM,kBAAkB,IAAI,CAC1B,8DACA,sCACF,CAAC;AAED,MAAM,uBAAuB,IAAI,2BAA2B;CAC1D,iBAAiB,EAAE,KAAK,MAAM;CAC9B,UAAU,EACR,KAAK;EAAE,OAAO;EAAI,MAAM;CAAoB,EAC9C;AACF,CAAC;AAED,MAAM,gBAAgB,QAAQ;CAC5B,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAkB,UAAU;CAAK;CAC/D,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAuB,UAAU;CAAK;CACtE,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAoB,UAAU;CAAM;CACtE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAkB,UAAU;CAAK;CAC/D,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAsB,UAAU;CAAK;CAC3E,QAAQ;EAAE,MAAM;EAAU,QAAQ;EAAkB,UAAU;CAAK;CACnE,MAAM;EAAE,MAAM;EAAU,QAAQ;EAAc,UAAU;CAAK;AAC/D,CAAC"}

package/dist/recipes/feature.d.ts

@@ -10,6 +10,35 @@ declare const featureTitleRecipe: (props?: import("class-variance-authority/type
 declare const featureLinkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const featureBodyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const featureFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const featureAnatomy: {
+  readonly action: {
+    readonly part: "action";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly description: {
+    readonly part: "description";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly link: {
+    readonly part: "link";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "feature";
+    readonly recipe: (props?: ({
+      interactive?: boolean | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+  readonly title: {
+    readonly part: "title";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type FeatureLevel, defaultFeatureLevel, featureBodyRecipe, featureFootRecipe, featureLevels, featureLinkRecipe, featureRecipe, featureTileRecipe, featureTitleRecipe };
+export { type FeatureLevel, defaultFeatureLevel, featureAnatomy, featureBodyRecipe, featureFootRecipe, featureLevels, featureLinkRecipe, featureRecipe, featureTileRecipe, featureTitleRecipe };
 //# sourceMappingURL=feature.d.ts.map

package/dist/recipes/feature.js

@@ -1,5 +1,6 @@
-import { surfacePanel } from "../parts/surface.js";
+import { anatomy } from "../anatomy.js";
 import { tileReached, tileRoused } from "../parts/rouse.js";
+import { surfacePanel } from "../parts/surface.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/feature.ts
 const featureLevels = [
@@ -42,7 +43,34 @@ const featureFootRecipe = cva([
 	"[&_svg]:size-tf-icon-sm [&_svg]:tf-nudge-follow",
 	"pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto"
 ]);
+const featureAnatomy = anatomy({
+	action: {
+		part: "action",
+		recipe: featureFootRecipe,
+		required: false
+	},
+	description: {
+		part: "description",
+		recipe: featureBodyRecipe,
+		required: false
+	},
+	link: {
+		part: "link",
+		recipe: featureLinkRecipe,
+		required: false
+	},
+	root: {
+		part: "feature",
+		recipe: featureRecipe,
+		required: true
+	},
+	title: {
+		part: "title",
+		recipe: featureTitleRecipe,
+		required: true
+	}
+});
 //#endregion
-export { defaultFeatureLevel, featureBodyRecipe, featureFootRecipe, featureLevels, featureLinkRecipe, featureRecipe, featureTileRecipe, featureTitleRecipe };
+export { defaultFeatureLevel, featureAnatomy, featureBodyRecipe, featureFootRecipe, featureLevels, featureLinkRecipe, featureRecipe, featureTileRecipe, featureTitleRecipe };
 
 //# sourceMappingURL=feature.js.map