@techfides/ui-library-design 0.1.0

package/dist/recipes/button.js

@@ -0,0 +1,229 @@
+import { toneBlend } from "../tone.js";
+import { controlBase, controlBox, controlGap, controlInert, controlReach, controlSizes, hitArea } from "../parts/control.js";
+import { defaultTone, tones } from "../parts/tone.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/button.ts
+const HIT_AREA = hitArea("after:h-tf-target");
+const QUIET_HIT = hitArea("after:h-tf-target", "after:w-tf-target");
+const buttonFace = [
+	"isolate",
+	"justify-center",
+	"whitespace-nowrap",
+	"tracking-tf-tight",
+	"tf-cloud-md"
+];
+const buttonSpinnerRecipe = cva(["absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", "tf-arrives motion-reduce:transition-none"]);
+const buttonWordsRecipe = cva([
+	"inline-flex items-center justify-center tf-text-trim",
+	"tf-crossfades motion-reduce:transition-none",
+	"in-data-loading:opacity-0"
+], {
+	defaultVariants: { size: "md" },
+	variants: { size: controlGap }
+});
+const buttonTempo = ["tf-blend-drift", "tf-weather-trail"];
+const buttonGeometry = {
+	lg: `${controlBox.lg} rounded-tf-card px-8 font-medium`,
+	md: `${controlBox.md} rounded-tf-block px-6`,
+	sm: `${controlBox.sm} px-4 ${HIT_AREA}`,
+	xs: `${controlBox.xs} px-2 ${QUIET_HIT}`
+};
+const CLOUD = [
+	"tf-cloud-brand",
+	"tf-clouded",
+	"interactive:hovered:tf-clouding"
+].join(" ");
+const CLOUD_INK = [
+	"tf-cloud-ink",
+	"tf-clouded",
+	"interactive:hovered:tf-clouding"
+].join(" ");
+const CLOUD_ON_REACH = [
+	"tf-cloud-ink",
+	"tf-cloud-hidden",
+	"interactive:hovered:tf-clouding",
+	"interactive:hovered:tf-plated"
+].join(" ");
+const BLEND = [
+	"bg-tf-blend",
+	CLOUD,
+	"tf-edge-sweep tf-edge-milk tf-swept-top",
+	"tf-glow tf-lit-rest tf-settled",
+	"interactive:hovered:tf-blended",
+	"interactive:hovered:tf-milked",
+	"interactive:hovered:tf-lit-inside",
+	"interactive:hovered:tf-lifted",
+	"interactive:pressed:tf-pressed",
+	"motion-safe:interactive:pressed:tf-tilted"
+].join(" ");
+const INK = [
+	"tf-ink-glide",
+	"data-loading:bg-none",
+	"[&_svg]:tf-transition [&_svg]:text-tf-muted"
+].join(" ");
+const MARK_ON_REACH = {
+	accent: "interactive:hovered:[&_svg]:text-tf-accent-hi",
+	danger: "interactive:hovered:[&_svg]:text-tf-danger-hi",
+	info: "interactive:hovered:[&_svg]:text-tf-info-hi",
+	success: "interactive:hovered:[&_svg]:text-tf-success-hi",
+	warning: "interactive:hovered:[&_svg]:text-tf-warning-hi"
+};
+const WORDS_ON_REACH = {
+	accent: "interactive:hovered:text-tf-accent-hi",
+	danger: "interactive:hovered:text-tf-danger-hi",
+	info: "interactive:hovered:text-tf-info-hi",
+	success: "interactive:hovered:text-tf-success-hi",
+	warning: "interactive:hovered:text-tf-warning-hi"
+};
+const FLAT_INK = "text-tf-muted interactive:hovered:text-tf-fg";
+const buttonPress = ["motion-safe:interactive:pressed:translate-y-px", "motion-reduce:interactive:pressed:brightness-95"];
+const buttonRecipe = cva([
+	...controlBase,
+	...buttonFace,
+	...buttonTempo,
+	...controlReach,
+	...buttonPress,
+	...controlInert,
+	"data-loading:opacity-100"
+], {
+	compoundVariants: [
+		{
+			class: "tf-cloud-tight",
+			variant: "ghost"
+		},
+		...tones.map((accent) => ({
+			accent,
+			class: `${toneBlend[accent]} ${WORDS_ON_REACH[accent]} ${MARK_ON_REACH[accent]}`,
+			variant: "ghost"
+		})),
+		{
+			class: FLAT_INK,
+			iconOnly: true,
+			variant: "ghost"
+		},
+		{
+			class: FLAT_INK,
+			iconOnly: true,
+			variant: "secondary"
+		},
+		{
+			class: "px-0",
+			iconOnly: true
+		},
+		{
+			class: "tf-icons-solo [&_svg]:size-tf-icon-solo-xs",
+			iconOnly: true,
+			size: "xs"
+		},
+		{
+			class: "tf-icons-solo [&_svg]:size-tf-icon-solo-sm",
+			iconOnly: true,
+			size: "sm"
+		},
+		{
+			class: "tf-icons-solo [&_svg]:size-tf-icon-solo-md",
+			iconOnly: true,
+			size: "md"
+		},
+		{
+			class: "tf-icons-solo [&_svg]:size-tf-icon-solo-lg",
+			iconOnly: true,
+			size: "lg"
+		},
+		{
+			class: "pr-7",
+			size: "lg",
+			trailing: true
+		},
+		{
+			class: "pr-5",
+			size: "md",
+			trailing: true
+		},
+		{
+			class: "pr-3",
+			size: "sm",
+			trailing: true
+		},
+		{
+			class: "pl-7",
+			leading: true,
+			size: "lg"
+		},
+		{
+			class: "pl-5",
+			leading: true,
+			size: "md"
+		},
+		{
+			class: "pl-3",
+			leading: true,
+			size: "sm"
+		},
+		{
+			class: "h-auto w-auto justify-start bg-transparent p-0 shadow-none outline-offset-4",
+			variant: "link"
+		}
+	],
+	defaultVariants: {
+		accent: defaultTone,
+		fullWidth: false,
+		iconOnly: false,
+		leading: false,
+		size: "md",
+		trailing: false,
+		variant: "primary"
+	},
+	variants: {
+		accent: {
+			accent: "",
+			danger: "",
+			info: "",
+			success: "",
+			warning: ""
+		},
+		fullWidth: {
+			false: "",
+			true: "w-full"
+		},
+		iconOnly: {
+			false: "",
+			true: "aspect-square"
+		},
+		leading: {
+			false: "",
+			true: ""
+		},
+		size: buttonGeometry,
+		trailing: {
+			false: "",
+			true: ""
+		},
+		variant: {
+			danger: `${BLEND} text-tf-on-semantic blend-tf-danger`,
+			ghost: `${INK} text-tf-fg tf-plated-quiet ${CLOUD_ON_REACH}`,
+			info: `${BLEND} text-tf-on-semantic blend-tf-info`,
+			link: "text-tf-accent-hi underline underline-offset-2 interactive:hovered:text-tf-accent",
+			primary: `${BLEND} text-tf-on-accent blend-tf-accent`,
+			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`,
+			success: `${BLEND} text-tf-on-semantic blend-tf-success`,
+			warning: `${BLEND} text-tf-on-semantic blend-tf-warning`
+		}
+	}
+});
+const buttonVariants = [
+	"primary",
+	"secondary",
+	"ghost",
+	"success",
+	"warning",
+	"danger",
+	"info",
+	"link"
+];
+const buttonSizes = ["xs", ...controlSizes];
+const buttonAccents = tones;
+//#endregion
+export { buttonAccents, buttonRecipe, buttonSizes, buttonSpinnerRecipe, buttonVariants, buttonWordsRecipe };
+
+//# sourceMappingURL=button.js.map

package/dist/recipes/button.js.map

@@ -0,0 +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"}

package/dist/recipes/cardHeader.d.ts

@@ -0,0 +1,10 @@
+//#region src/recipes/cardHeader.d.ts
+type CardHeaderRank = 'card' | 'module';
+declare const defaultCardHeaderRank = "card";
+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;
+//#endregion
+export { type CardHeaderRank, cardHeaderActionRecipe, cardHeaderRanks, cardHeaderRecipe, cardHeaderStackRecipe, defaultCardHeaderRank };
+//# sourceMappingURL=cardHeader.d.ts.map

package/dist/recipes/cardHeader.js

@@ -0,0 +1,11 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/cardHeader.ts
+const defaultCardHeaderRank = "card";
+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");
+//#endregion
+export { cardHeaderActionRecipe, cardHeaderRanks, cardHeaderRecipe, cardHeaderStackRecipe, defaultCardHeaderRank };
+
+//# sourceMappingURL=cardHeader.js.map

package/dist/recipes/cardHeader.js.map

@@ -0,0 +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"}

package/dist/recipes/checkbox.d.ts

@@ -0,0 +1,26 @@
+import { Tone } from "../tone.js";
+//#region src/recipes/checkbox.d.ts
+declare const checkboxAccents: readonly ["accent", "success", "warning", "info", "danger"];
+type CheckboxAccent = Tone;
+declare const defaultCheckboxAccent = "accent";
+declare const checkboxRecipe: (props?: ({
+  labelled?: boolean | null | undefined;
+  plate?: "full" | "snug" | "bare" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const checkboxControlRecipe: (props?: ({
+  accent?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+  invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const checkboxIndicatorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const checkboxMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const checkboxDashRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const checkboxLabelRecipe: (props?: ({
+  hidden?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const checkboxTitleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const checkboxHintRecipe: (props?: ({
+  invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { type CheckboxAccent, checkboxAccents, checkboxControlRecipe, checkboxDashRecipe, checkboxHintRecipe, checkboxIndicatorRecipe, checkboxLabelRecipe, checkboxMarkRecipe, checkboxRecipe, checkboxTitleRecipe, defaultCheckboxAccent };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/recipes/checkbox.js

@@ -0,0 +1,103 @@
+import { defaultMarkPlate, markPlates } from "../mark.js";
+import { toneBlend } from "../tone.js";
+import { defaultTone, tones } from "../parts/tone.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
+const checkboxAccents = tones;
+const defaultCheckboxAccent = defaultTone;
+const FILL = ["bg-tf-sunken", "tf-ramp"];
+const OFF = ["data-[state=unchecked]:interactive:not-data-readonly:hovered:bg-tf-sunken-hi"];
+const ON = [
+	"data-[state=checked]:tf-mark-lit",
+	"data-[state=checked]:bg-tf-blend",
+	"data-[state=checked]:text-tf-on-accent",
+	"data-[state=checked]:tf-icons-solo",
+	"data-[state=checked]:interactive:not-data-readonly:hovered:tf-blended"
+];
+const MIXED = [
+	"data-[state=indeterminate]:tf-mark-lit",
+	"data-[state=indeterminate]:bg-tf-blend",
+	"data-[state=indeterminate]:text-tf-on-accent",
+	"data-[state=indeterminate]:interactive:not-data-readonly:hovered:tf-blended"
+];
+const GAPS = {
+	bare: "gap-2",
+	full: "gap-3",
+	snug: "gap-2"
+};
+const platedRows = markPlates.map((plate) => ({
+	class: `${GAPS[plate]} ${markPlate[plate]} ${markPlated[plate]}`,
+	labelled: true,
+	plate
+}));
+const platedSquares = markPlates.map((plate) => ({
+	class: `${markSquare[plate]} ${markPlated[plate]}`,
+	labelled: false,
+	plate
+}));
+const checkboxRecipe = cva(markRow, {
+	compoundVariants: [...platedRows, ...platedSquares],
+	defaultVariants: {
+		labelled: true,
+		plate: defaultMarkPlate
+	},
+	variants: {
+		labelled: {
+			false: "",
+			true: ""
+		},
+		plate: {
+			bare: "",
+			full: "",
+			snug: ""
+		}
+	}
+});
+const checkboxControlRecipe = cva([
+	...markBox,
+	"rounded-tf-inline",
+	markPress,
+	...FILL,
+	...OFF,
+	...ON,
+	...MIXED
+], {
+	compoundVariants: [{
+		class: toneBlend.danger,
+		invalid: true
+	}],
+	defaultVariants: {
+		accent: defaultCheckboxAccent,
+		invalid: false
+	},
+	variants: {
+		accent: toneBlend,
+		invalid: {
+			false: "",
+			true: markFailed
+		}
+	}
+});
+const checkboxIndicatorRecipe = cva("inline-flex tf-mark-draws items-center justify-center");
+const checkboxMarkRecipe = cva("size-tf-mark-glyph");
+const checkboxDashRecipe = cva(["block h-[calc(var(--spacing-tf-hairline)*2)] w-tf-mark-dot rounded-tf-pill", "bg-tf-on-accent"]);
+const checkboxLabelRecipe = cva([...markStack, "flex-1"], {
+	defaultVariants: { hidden: false },
+	variants: { hidden: {
+		false: "",
+		true: "sr-only"
+	} }
+});
+const checkboxTitleRecipe = cva(markTitle);
+const checkboxHintRecipe = cva("text-tf-caption font-medium", {
+	defaultVariants: { invalid: false },
+	variants: { invalid: {
+		false: "text-tf-muted",
+		true: "text-tf-danger-hi tf-arrives"
+	} }
+});
+//#endregion
+export { checkboxAccents, checkboxControlRecipe, checkboxDashRecipe, checkboxHintRecipe, checkboxIndicatorRecipe, checkboxLabelRecipe, checkboxMarkRecipe, checkboxRecipe, checkboxTitleRecipe, defaultCheckboxAccent };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/recipes/checkbox.js.map

@@ -0,0 +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"}

package/dist/recipes/chip.d.ts

@@ -0,0 +1,26 @@
+//#region src/recipes/chip.d.ts
+type ChipTone = 'quiet' | 'outline' | 'tint';
+type ChipSize = 'sm' | 'md';
+type ChipAccent = 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+declare const defaultChipTone = "quiet";
+declare const defaultChipSize = "md";
+declare const defaultChipAccent = "neutral";
+declare const chipTones: readonly ["quiet", "outline", "tint"];
+declare const chipSizes: readonly ["sm", "md"];
+declare const chipAccents: readonly ["neutral", "accent", "info", "success", "warning", "danger"];
+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;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const chipDotRecipe: (props?: ({
+  accent?: "accent" | "success" | "warning" | "info" | "danger" | "neutral" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const chipTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+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;
+//#endregion
+export { type ChipAccent, type ChipSize, type ChipTone, chipAccents, chipCloseRecipe, chipCountRecipe, chipDotRecipe, chipLabelRecipe, chipRecipe, chipSizes, chipTextRecipe, chipTones, defaultChipAccent, defaultChipSize, defaultChipTone };
+//# sourceMappingURL=chip.d.ts.map

package/dist/recipes/chip.js

@@ -0,0 +1,123 @@
+import { controlPress, controlReach, hitArea } from "../parts/control.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/chip.ts
+const defaultChipTone = "quiet";
+const defaultChipSize = "md";
+const defaultChipAccent = "neutral";
+const chipTones = [
+	"quiet",
+	"outline",
+	"tint"
+];
+const chipSizes = ["sm", "md"];
+const chipAccents = [
+	"neutral",
+	"accent",
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+const HIT_AREA = hitArea("after:h-tf-target");
+const TINT = {
+	accent: "bg-tf-accent-tint text-tf-accent-hi [--tf-mark-rest:var(--color-tf-accent-edge)]",
+	danger: "bg-tf-danger-tint text-tf-danger-hi [--tf-mark-rest:var(--color-tf-danger-edge)]",
+	info: "bg-tf-info-tint text-tf-info-hi [--tf-mark-rest:var(--color-tf-info-edge)]",
+	neutral: "bg-tf-panel text-tf-fg",
+	success: "bg-tf-success-tint text-tf-success-hi [--tf-mark-rest:var(--color-tf-success-edge)]",
+	warning: "bg-tf-warning-tint text-tf-warning-hi [--tf-mark-rest:var(--color-tf-warning-edge)]"
+};
+const OUTLINE = {
+	accent: "text-tf-accent-hi blend-tf-accent",
+	danger: "text-tf-danger-hi blend-tf-danger",
+	info: "text-tf-info-hi blend-tf-info",
+	neutral: "text-tf-fg blend-tf-accent",
+	success: "text-tf-success-hi blend-tf-success",
+	warning: "text-tf-warning-hi blend-tf-warning"
+};
+const LEAVES = [
+	"motion-safe:tf-chip-arrives",
+	"data-[state=closed]:overflow-hidden",
+	"data-[state=closed]:**:data-[part=label]:flex-none",
+	"data-[state=closed]:motion-safe:tf-chip-departs",
+	"motion-reduce:animate-none"
+].join(" ");
+const chipRecipe = cva([
+	"relative isolate inline-flex max-w-full min-w-0 flex-none items-center rounded-tf-pill",
+	"font-tf-body font-medium whitespace-nowrap",
+	"tf-icons [&>svg]:shrink-0",
+	"data-disabled:opacity-50",
+	"tf-transition motion-reduce:transition-none"
+], {
+	compoundVariants: [...chipAccents.map((accent) => ({
+		accent,
+		class: TINT[accent],
+		tone: "tint"
+	})), ...chipAccents.map((accent) => ({
+		accent,
+		class: OUTLINE[accent],
+		tone: "outline"
+	}))],
+	defaultVariants: {
+		accent: defaultChipAccent,
+		removable: false,
+		size: "md",
+		tone: defaultChipTone
+	},
+	variants: {
+		accent: {
+			accent: "",
+			danger: "",
+			info: "",
+			neutral: "",
+			success: "",
+			warning: ""
+		},
+		removable: {
+			false: "",
+			true: LEAVES
+		},
+		size: {
+			md: "h-tf-row gap-2 px-3 text-tf-body-sm [&>svg]:size-tf-icon-sm",
+			sm: "h-tf-chip-sm gap-1.5 px-2 text-tf-caption-sm [&>svg]:size-tf-icon-2xs"
+		},
+		tone: {
+			outline: "tf-blend-outline",
+			quiet: "bg-tf-panel text-tf-fg tf-mark-edge",
+			tint: "tf-mark-edge **:data-[part=count]:text-current"
+		}
+	}
+});
+const chipDotRecipe = cva("size-2 flex-none rounded-tf-pill", {
+	defaultVariants: { accent: defaultChipAccent },
+	variants: { accent: {
+		accent: "bg-tf-accent-hi",
+		danger: "bg-tf-danger-hi",
+		info: "bg-tf-info-hi",
+		neutral: "bg-tf-muted",
+		success: "bg-tf-success-hi",
+		warning: "bg-tf-warning-hi"
+	} }
+});
+const chipTextRecipe = cva("flex min-w-0 items-baseline gap-[inherit]");
+const chipLabelRecipe = cva("min-w-0 truncate");
+const chipCountRecipe = cva("flex-none font-mono text-tf-caption-sm text-tf-muted tabular-nums");
+const CLOSE_HELD = [
+	"disabled:cursor-not-allowed",
+	"aria-disabled:cursor-not-allowed",
+	"data-disabled:cursor-not-allowed"
+];
+const chipCloseRecipe = cva([
+	"relative inline-flex size-tf-icon-md flex-none items-center justify-center rounded-tf-pill",
+	"[&_svg]:size-tf-icon-2xs [&_svg]:shrink-0",
+	"text-tf-muted interactive:hovered:bg-tf-panel-hi interactive:hovered:text-tf-fg",
+	"cursor-pointer tf-transition motion-reduce:transition-none",
+	HIT_AREA,
+	...controlReach,
+	...controlPress,
+	...CLOSE_HELD
+]);
+//#endregion
+export { chipAccents, chipCloseRecipe, chipCountRecipe, chipDotRecipe, chipLabelRecipe, chipRecipe, chipSizes, chipTextRecipe, chipTones, defaultChipAccent, defaultChipSize, defaultChipTone };
+
+//# sourceMappingURL=chip.js.map

package/dist/recipes/chip.js.map

@@ -0,0 +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"}

package/dist/recipes/codeEditor.d.ts

@@ -0,0 +1,74 @@
+//#region src/recipes/codeEditor.d.ts
+declare const codeEditorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const codeEditorTheme: {
+  '&': {
+    backgroundColor: string;
+    color: string;
+    fontSize: string;
+    lineHeight: string;
+    maxHeight: string;
+  };
+  '&.cm-focused': {
+    outline: string;
+  };
+  '&:not(.cm-focused) .cm-activeLine': {
+    backgroundColor: string;
+  };
+  '&:not(.cm-focused) .cm-activeLineGutter': {
+    backgroundColor: string;
+    color: string;
+  };
+  '.cm-activeLine': {
+    backgroundColor: string;
+  };
+  '.cm-activeLineGutter': {
+    backgroundColor: string;
+    color: string;
+  };
+  '.cm-content': {
+    caretColor: string;
+    fontFamily: string;
+    padding: string;
+  };
+  '.cm-cursor': {
+    borderLeftColor: string;
+  };
+  '.cm-gutters': {
+    backgroundColor: string;
+    border: string;
+    color: string;
+    fontFamily: string;
+    paddingLeft: string;
+  };
+  '.cm-line': {
+    padding: string;
+    transition: string;
+  };
+  '.cm-lineNumbers .cm-gutterElement': {
+    minWidth: string;
+  };
+  '.cm-placeholder': {
+    color: string;
+  };
+  '.cm-scroller': {
+    fontFamily: string;
+    lineHeight: string;
+    overflow: string;
+    padding: string;
+    scrollbarColor: string;
+    scrollbarWidth: string;
+  };
+  '.cm-selectionBackground': {
+    backgroundColor: string;
+  };
+};
+declare const codeSyntaxColors: {
+  key: string;
+  literal: string;
+  number: string;
+  punctuation: string;
+  text: string;
+};
+//#endregion
+export { codeEditorRecipe, codeEditorTheme, codeSyntaxColors };
+//# sourceMappingURL=codeEditor.d.ts.map