@techfides/ui-library-design 0.1.0 → 0.3.0

package/dist/recipes/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","names":[],"sources":["../../src/recipes/heading.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\ntype HeadingLevel = 'display' | 'h2' | 'h3' | 'h4'\n\nconst defaultHeadingLevel = 'h3' satisfies HeadingLevel\n\nconst headingLevels = ['display', 'h2', 'h3', 'h4'] as const satisfies readonly HeadingLevel[]\n\nconst headingRecipe = cva(['font-tf-display font-bold tracking-tf-tight text-tf-fg'], {\n  defaultVariants: { level: defaultHeadingLevel, tabular: false },\n  variants: {\n    level: {\n      display: 'text-tf-display',\n      h2: 'text-tf-h2',\n      h3: 'text-tf-h3',\n      h4: 'text-tf-h4',\n    } satisfies Record<HeadingLevel, string>,\n    tabular: { false: '', true: 'tabular-nums' },\n  },\n})\n\nconst HEADING_DEFAULT_TAG = {\n  display: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h3',\n} satisfies Record<HeadingLevel, string>\n\nexport { type HeadingLevel, HEADING_DEFAULT_TAG, defaultHeadingLevel, headingLevels, headingRecipe }\n"],"mappings":";;AAIA,MAAM,sBAAsB;AAE5B,MAAM,gBAAgB;CAAC;CAAW;CAAM;CAAM;AAAI;AAElD,MAAM,gBAAgB,IAAI,CAAC,wDAAwD,GAAG;CACpF,iBAAiB;EAAE,OAAA;EAA4B,SAAS;CAAM;CAC9D,UAAU;EACR,OAAO;GACL,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS;GAAE,OAAO;GAAI,MAAM;EAAe;CAC7C;AACF,CAAC;AAED,MAAM,sBAAsB;CAC1B,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;AACN"}
+{"version":3,"file":"heading.js","names":[],"sources":["../../src/recipes/heading.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\ntype HeadingLevel = 'numeral' | 'display' | 'h2' | 'h3' | 'h4'\n\nconst defaultHeadingLevel = 'h3' satisfies HeadingLevel\n\nconst headingLevels = [\n  'numeral',\n  'display',\n  'h2',\n  'h3',\n  'h4',\n] as const satisfies readonly HeadingLevel[]\n\nconst headingRecipe = cva(['font-tf-display font-bold tracking-tf-tight text-tf-fg'], {\n  defaultVariants: { level: defaultHeadingLevel, tabular: false },\n  variants: {\n    level: {\n      display: 'text-tf-display',\n      h2: 'text-tf-h2',\n      h3: 'text-tf-h3',\n      h4: 'text-tf-h4',\n      numeral: 'text-tf-numeral',\n    } satisfies Record<HeadingLevel, string>,\n    tabular: { false: '', true: 'tabular-nums' },\n  },\n})\n\nconst HEADING_DEFAULT_TAG = {\n  display: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h3',\n  numeral: 'p',\n} satisfies Record<HeadingLevel, string>\n\nexport { type HeadingLevel, HEADING_DEFAULT_TAG, defaultHeadingLevel, headingLevels, headingRecipe }\n"],"mappings":";;AAIA,MAAM,sBAAsB;AAE5B,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAAgB,IAAI,CAAC,wDAAwD,GAAG;CACpF,iBAAiB;EAAE,OAAA;EAA4B,SAAS;CAAM;CAC9D,UAAU;EACR,OAAO;GACL,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;EACX;EACA,SAAS;GAAE,OAAO;GAAI,MAAM;EAAe;CAC7C;AACF,CAAC;AAED,MAAM,sBAAsB;CAC1B,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,SAAS;AACX"}

package/dist/recipes/metaRow.d.ts

@@ -1,14 +1,15 @@
 //#region src/recipes/metaRow.d.ts
-type MetaRowLayout = 'justify' | 'inline';
+type MetaRowLayout = 'justify' | 'inline' | 'note';
+type MetaRowPairedLayout = Exclude<MetaRowLayout, 'note'>;
 type MetaRowEmphasis = 'normal' | 'strong';
 declare const defaultMetaRowLayout = "justify";
 declare const defaultMetaRowEmphasis = "normal";
-declare const metaRowLayouts: readonly ["justify", "inline"];
+declare const metaRowLayouts: readonly ["justify", "inline", "note"];
 declare const metaRowEmphases: readonly ["normal", "strong"];
 declare const metaRowTones: readonly ["accent", "success", "warning", "info", "danger"];
 declare const metaRowRecipe: (props?: ({
-  layout?: "inline" | "justify" | null | undefined;
+  layout?: "inline" | "justify" | "note" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
-export { type MetaRowEmphasis, type MetaRowLayout, defaultMetaRowEmphasis, defaultMetaRowLayout, metaRowEmphases, metaRowLayouts, metaRowRecipe, metaRowTones };
+export { type MetaRowEmphasis, type MetaRowLayout, type MetaRowPairedLayout, defaultMetaRowEmphasis, defaultMetaRowLayout, metaRowEmphases, metaRowLayouts, metaRowRecipe, metaRowTones };
 //# sourceMappingURL=metaRow.d.ts.map

package/dist/recipes/metaRow.js

@@ -3,14 +3,20 @@ import { cva } from "class-variance-authority";
 //#region src/recipes/metaRow.ts
 const defaultMetaRowLayout = "justify";
 const defaultMetaRowEmphasis = "normal";
-const metaRowLayouts = ["justify", "inline"];
+const metaRowLayouts = [
+	"justify",
+	"inline",
+	"note"
+];
 const metaRowEmphases = ["normal", "strong"];
 const metaRowTones = tones;
+const NOTE = ["items-center text-tf-muted", "[&_svg]:size-tf-icon-sm"].join(" ");
 const metaRowRecipe = cva("flex items-baseline gap-2 tf-icons", {
 	defaultVariants: { layout: defaultMetaRowLayout },
 	variants: { layout: {
 		inline: "",
-		justify: "justify-between gap-4"
+		justify: "justify-between gap-4",
+		note: NOTE
 	} }
 });
 //#endregion

package/dist/recipes/metaRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"metaRow.js","names":[],"sources":["../../src/recipes/metaRow.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { tones } from '#parts/tone'\n\ntype MetaRowLayout = 'justify' | 'inline'\n\ntype MetaRowEmphasis = 'normal' | 'strong'\n\nconst defaultMetaRowLayout = 'justify' satisfies MetaRowLayout\n\nconst defaultMetaRowEmphasis = 'normal' satisfies MetaRowEmphasis\n\nconst metaRowLayouts = ['justify', 'inline'] as const satisfies readonly MetaRowLayout[]\n\nconst metaRowEmphases = ['normal', 'strong'] as const satisfies readonly MetaRowEmphasis[]\n\nconst metaRowTones = tones\n\nconst metaRowRecipe = cva('flex items-baseline gap-2 tf-icons', {\n  defaultVariants: { layout: defaultMetaRowLayout },\n  variants: {\n    layout: {\n      inline: '',\n      justify: 'justify-between gap-4',\n    } satisfies Record<MetaRowLayout, string>,\n  },\n})\n\nexport {\n  type MetaRowEmphasis,\n  type MetaRowLayout,\n  defaultMetaRowEmphasis,\n  defaultMetaRowLayout,\n  metaRowEmphases,\n  metaRowLayouts,\n  metaRowRecipe,\n  metaRowTones,\n}\n"],"mappings":";;;AAQA,MAAM,uBAAuB;AAE7B,MAAM,yBAAyB;AAE/B,MAAM,iBAAiB,CAAC,WAAW,QAAQ;AAE3C,MAAM,kBAAkB,CAAC,UAAU,QAAQ;AAE3C,MAAM,eAAe;AAErB,MAAM,gBAAgB,IAAI,sCAAsC;CAC9D,iBAAiB,EAAE,QAAQ,qBAAqB;CAChD,UAAU,EACR,QAAQ;EACN,QAAQ;EACR,SAAS;CACX,EACF;AACF,CAAC"}
+{"version":3,"file":"metaRow.js","names":[],"sources":["../../src/recipes/metaRow.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { tones } from '#parts/tone'\n\ntype MetaRowLayout = 'justify' | 'inline' | 'note'\n\ntype MetaRowPairedLayout = Exclude<MetaRowLayout, 'note'>\n\ntype MetaRowEmphasis = 'normal' | 'strong'\n\nconst defaultMetaRowLayout = 'justify' satisfies MetaRowLayout\n\nconst defaultMetaRowEmphasis = 'normal' satisfies MetaRowEmphasis\n\nconst metaRowLayouts = ['justify', 'inline', 'note'] as const satisfies readonly MetaRowLayout[]\n\nconst metaRowEmphases = ['normal', 'strong'] as const satisfies readonly MetaRowEmphasis[]\n\nconst metaRowTones = tones\n\nconst NOTE = ['items-center text-tf-muted', '[&_svg]:size-tf-icon-sm'].join(' ')\n\nconst metaRowRecipe = cva('flex items-baseline gap-2 tf-icons', {\n  defaultVariants: { layout: defaultMetaRowLayout },\n  variants: {\n    layout: {\n      inline: '',\n      justify: 'justify-between gap-4',\n      note: NOTE,\n    } satisfies Record<MetaRowLayout, string>,\n  },\n})\n\nexport {\n  type MetaRowEmphasis,\n  type MetaRowLayout,\n  type MetaRowPairedLayout,\n  defaultMetaRowEmphasis,\n  defaultMetaRowLayout,\n  metaRowEmphases,\n  metaRowLayouts,\n  metaRowRecipe,\n  metaRowTones,\n}\n"],"mappings":";;;AAUA,MAAM,uBAAuB;AAE7B,MAAM,yBAAyB;AAE/B,MAAM,iBAAiB;CAAC;CAAW;CAAU;AAAM;AAEnD,MAAM,kBAAkB,CAAC,UAAU,QAAQ;AAE3C,MAAM,eAAe;AAErB,MAAM,OAAO,CAAC,8BAA8B,yBAAyB,CAAC,CAAC,KAAK,GAAG;AAE/E,MAAM,gBAAgB,IAAI,sCAAsC;CAC9D,iBAAiB,EAAE,QAAQ,qBAAqB;CAChD,UAAU,EACR,QAAQ;EACN,QAAQ;EACR,SAAS;EACT,MAAM;CACR,EACF;AACF,CAAC"}

package/dist/recipes/nebula.d.ts

@@ -1,9 +1,16 @@
 //#region src/recipes/nebula.d.ts
-declare const nebulaRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+type NebulaOrigin = 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left';
+declare const defaultNebulaTone = "accent";
+declare const nebulaTones: readonly ["accent", "success", "warning", "info", "danger"];
+declare const nebulaOrigins: readonly ["top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left"];
+declare const nebulaRecipe: (props?: ({
+  origin?: "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left" | "top-left" | null | undefined;
+  tone?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const nebulaVeilRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const nebulaCloudRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const nebulaCloudLowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const nebulaCloudWideRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { nebulaCloudLowRecipe, nebulaCloudRecipe, nebulaCloudWideRecipe, nebulaRecipe, nebulaVeilRecipe };
+export { type NebulaOrigin, defaultNebulaTone, nebulaCloudLowRecipe, nebulaCloudRecipe, nebulaCloudWideRecipe, nebulaOrigins, nebulaRecipe, nebulaTones, nebulaVeilRecipe };
 //# sourceMappingURL=nebula.d.ts.map

package/dist/recipes/nebula.js

@@ -1,15 +1,44 @@
+import { toneBlend } from "../tone.js";
+import { defaultTone, tones } from "../parts/tone.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/nebula.ts
+const defaultNebulaTone = defaultTone;
+const nebulaTones = tones;
+const nebulaOrigins = [
+	"top",
+	"top-right",
+	"right",
+	"bottom-right",
+	"bottom",
+	"bottom-left",
+	"left",
+	"top-left"
+];
 const nebulaRecipe = cva([
 	"pointer-events-none absolute -inset-1/2",
-	"tf-turning tf-nebula blend-tf-accent",
+	"tf-turning tf-nebula",
 	"[animation-duration:calc(var(--tf-sweep-duration)*30)]"
-]);
+], {
+	defaultVariants: { tone: defaultNebulaTone },
+	variants: {
+		origin: {
+			bottom: "[animation-delay:calc(var(--tf-sweep-duration)*-7.5)] motion-reduce:[--tf-sweep:90deg]",
+			"bottom-left": "[animation-delay:calc(var(--tf-sweep-duration)*-11.25)] motion-reduce:[--tf-sweep:135deg]",
+			"bottom-right": "[animation-delay:calc(var(--tf-sweep-duration)*-3.75)] motion-reduce:[--tf-sweep:45deg]",
+			left: "[animation-delay:calc(var(--tf-sweep-duration)*-15)] motion-reduce:[--tf-sweep:180deg]",
+			right: "[animation-delay:0s] motion-reduce:[--tf-sweep:0deg]",
+			top: "[animation-delay:calc(var(--tf-sweep-duration)*-22.5)] motion-reduce:[--tf-sweep:270deg]",
+			"top-left": "[animation-delay:calc(var(--tf-sweep-duration)*-18.75)] motion-reduce:[--tf-sweep:225deg]",
+			"top-right": "[animation-delay:calc(var(--tf-sweep-duration)*-26.25)] motion-reduce:[--tf-sweep:315deg]"
+		},
+		tone: toneBlend
+	}
+});
 const nebulaVeilRecipe = cva("tf-nebula-veil");
 const nebulaCloudRecipe = cva("tf-nebula-cloud");
 const nebulaCloudLowRecipe = cva("tf-nebula-cloud tf-cloud-low");
 const nebulaCloudWideRecipe = cva("tf-nebula-cloud tf-cloud-wide");
 //#endregion
-export { nebulaCloudLowRecipe, nebulaCloudRecipe, nebulaCloudWideRecipe, nebulaRecipe, nebulaVeilRecipe };
+export { defaultNebulaTone, nebulaCloudLowRecipe, nebulaCloudRecipe, nebulaCloudWideRecipe, nebulaOrigins, nebulaRecipe, nebulaTones, nebulaVeilRecipe };
 
 //# sourceMappingURL=nebula.js.map

package/dist/recipes/nebula.js.map

@@ -1 +1 @@
-{"version":3,"file":"nebula.js","names":[],"sources":["../../src/recipes/nebula.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst nebulaRecipe = cva([\n  'pointer-events-none absolute -inset-1/2',\n  'tf-turning tf-nebula blend-tf-accent',\n  '[animation-duration:calc(var(--tf-sweep-duration)*30)]',\n])\n\nconst nebulaVeilRecipe = cva('tf-nebula-veil')\n\nconst nebulaCloudRecipe = cva('tf-nebula-cloud')\n\nconst nebulaCloudLowRecipe = cva('tf-nebula-cloud tf-cloud-low')\n\nconst nebulaCloudWideRecipe = cva('tf-nebula-cloud tf-cloud-wide')\n\nexport {\n  nebulaCloudLowRecipe,\n  nebulaCloudRecipe,\n  nebulaCloudWideRecipe,\n  nebulaRecipe,\n  nebulaVeilRecipe,\n}\n"],"mappings":";;AAEA,MAAM,eAAe,IAAI;CACvB;CACA;CACA;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,gBAAgB;AAE7C,MAAM,oBAAoB,IAAI,iBAAiB;AAE/C,MAAM,uBAAuB,IAAI,8BAA8B;AAE/D,MAAM,wBAAwB,IAAI,+BAA+B"}
+{"version":3,"file":"nebula.js","names":[],"sources":["../../src/recipes/nebula.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { defaultTone, tones } from '#parts/tone'\nimport type { Tone } from '#tone'\nimport { toneBlend } from '#tone'\n\ntype NebulaOrigin =\n  | 'top'\n  | 'top-right'\n  | 'right'\n  | 'bottom-right'\n  | 'bottom'\n  | 'bottom-left'\n  | 'left'\n  | 'top-left'\n\nconst defaultNebulaTone = defaultTone\n\nconst nebulaTones = tones\n\nconst nebulaOrigins = [\n  'top',\n  'top-right',\n  'right',\n  'bottom-right',\n  'bottom',\n  'bottom-left',\n  'left',\n  'top-left',\n] as const satisfies readonly NebulaOrigin[]\n\nconst NEBULA_STARTS = {\n  bottom: '[animation-delay:calc(var(--tf-sweep-duration)*-7.5)] motion-reduce:[--tf-sweep:90deg]',\n  'bottom-left':\n    '[animation-delay:calc(var(--tf-sweep-duration)*-11.25)] motion-reduce:[--tf-sweep:135deg]',\n  'bottom-right':\n    '[animation-delay:calc(var(--tf-sweep-duration)*-3.75)] motion-reduce:[--tf-sweep:45deg]',\n  left: '[animation-delay:calc(var(--tf-sweep-duration)*-15)] motion-reduce:[--tf-sweep:180deg]',\n  right: '[animation-delay:0s] motion-reduce:[--tf-sweep:0deg]',\n  top: '[animation-delay:calc(var(--tf-sweep-duration)*-22.5)] motion-reduce:[--tf-sweep:270deg]',\n  'top-left':\n    '[animation-delay:calc(var(--tf-sweep-duration)*-18.75)] motion-reduce:[--tf-sweep:225deg]',\n  'top-right':\n    '[animation-delay:calc(var(--tf-sweep-duration)*-26.25)] motion-reduce:[--tf-sweep:315deg]',\n} satisfies Record<NebulaOrigin, string>\n\nconst nebulaRecipe = cva(\n  [\n    'pointer-events-none absolute -inset-1/2',\n    'tf-turning tf-nebula',\n    '[animation-duration:calc(var(--tf-sweep-duration)*30)]',\n  ],\n  {\n    defaultVariants: { tone: defaultNebulaTone },\n    variants: {\n      origin: NEBULA_STARTS,\n      tone: toneBlend satisfies Record<Tone, string>,\n    },\n  },\n)\n\nconst nebulaVeilRecipe = cva('tf-nebula-veil')\n\nconst nebulaCloudRecipe = cva('tf-nebula-cloud')\n\nconst nebulaCloudLowRecipe = cva('tf-nebula-cloud tf-cloud-low')\n\nconst nebulaCloudWideRecipe = cva('tf-nebula-cloud tf-cloud-wide')\n\nexport {\n  type NebulaOrigin,\n  defaultNebulaTone,\n  nebulaCloudLowRecipe,\n  nebulaCloudRecipe,\n  nebulaCloudWideRecipe,\n  nebulaOrigins,\n  nebulaRecipe,\n  nebulaTones,\n  nebulaVeilRecipe,\n}\n"],"mappings":";;;;AAgBA,MAAM,oBAAoB;AAE1B,MAAM,cAAc;AAEpB,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAiBA,MAAM,eAAe,IACnB;CACE;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,MAAM,kBAAkB;CAC3C,UAAU;EACR,QAAQ;GAvBZ,QAAQ;GACR,eACE;GACF,gBACE;GACF,MAAM;GACN,OAAO;GACP,KAAK;GACL,YACE;GACF,aACE;EAYsB;EACpB,MAAM;CACR;AACF,CACF;AAEA,MAAM,mBAAmB,IAAI,gBAAgB;AAE7C,MAAM,oBAAoB,IAAI,iBAAiB;AAE/C,MAAM,uBAAuB,IAAI,8BAA8B;AAE/D,MAAM,wBAAwB,IAAI,+BAA+B"}

package/dist/recipes/paper.d.ts

@@ -1,22 +1,30 @@
 //#region src/recipes/paper.d.ts
 type PaperVariant = 'plain' | 'elevated';
-type PaperInset = 'padded' | 'flush';
+type PaperInset = 'padded' | 'flush' | 'roomy';
 declare const defaultPaperVariant = "plain";
 declare const defaultPaperInset = "padded";
+declare const defaultPaperTone = "accent";
 declare const paperRecipe: (props?: ({
+  tone?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
   variant?: "plain" | "elevated" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const paperBodyRecipe: (props?: ({
-  inset?: "padded" | "flush" | null | undefined;
+  inset?: "roomy" | "padded" | "flush" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const paperHeaderRecipe: (props?: ({
+  inset?: "roomy" | "padded" | "flush" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const paperRuleRecipe: (props?: ({
+  inset?: "roomy" | "padded" | "flush" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const paperHeaderRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-declare const paperRuleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const paperBadgeRecipe: (props?: ({
   headed?: boolean | null | undefined;
+  inset?: "roomy" | "padded" | "flush" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const paperActionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const paperVariants: readonly ["plain", "elevated"];
-declare const paperInsets: readonly ["padded", "flush"];
+declare const paperTones: readonly ["accent", "success", "warning", "info", "danger"];
+declare const paperInsets: readonly ["padded", "flush", "roomy"];
 //#endregion
-export { type PaperInset, type PaperVariant, defaultPaperInset, defaultPaperVariant, paperActionRecipe, paperBadgeRecipe, paperBodyRecipe, paperHeaderRecipe, paperInsets, paperRecipe, paperRuleRecipe, paperVariants };
+export { type PaperInset, type PaperVariant, defaultPaperInset, defaultPaperTone, defaultPaperVariant, paperActionRecipe, paperBadgeRecipe, paperBodyRecipe, paperHeaderRecipe, paperInsets, paperRecipe, paperRuleRecipe, paperTones, paperVariants };
 //# sourceMappingURL=paper.d.ts.map

package/dist/recipes/paper.js

@@ -1,42 +1,83 @@
+import { toneBlend } from "../tone.js";
 import { ruleFading } from "../parts/rule.js";
-import { surfaceLifted, surfacePanel } from "../parts/surface.js";
+import { defaultTone, tones } from "../parts/tone.js";
+import { surfaceLifted, surfaceSkin } from "../parts/surface.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/paper.ts
 const defaultPaperVariant = "plain";
 const defaultPaperInset = "padded";
+const defaultPaperTone = defaultTone;
 const paperBase = [
 	"@container relative w-full",
-	...surfacePanel,
+	...surfaceSkin,
 	"font-tf-body text-tf-body-sm font-medium text-tf-fg"
 ];
 const paperRecipe = cva(paperBase, {
-	defaultVariants: { variant: defaultPaperVariant },
-	variants: { variant: {
-		elevated: surfaceLifted.join(" "),
-		plain: ""
-	} }
+	defaultVariants: {
+		tone: defaultPaperTone,
+		variant: defaultPaperVariant
+	},
+	variants: {
+		tone: toneBlend,
+		variant: {
+			elevated: surfaceLifted.join(" "),
+			plain: ""
+		}
+	}
 });
 const GUTTER = "px-4 @tf-panel:px-8";
-const paperBodyRecipe = cva("py-6 @tf-panel:py-8", {
+const ROOMY_GUTTER = "px-6 @tf-panel:px-14";
+const RIBS = "py-6 @tf-panel:py-8";
+const paperBodyRecipe = cva("", {
 	defaultVariants: { inset: defaultPaperInset },
 	variants: { inset: {
-		flush: "",
-		padded: GUTTER
+		flush: RIBS,
+		padded: `${RIBS} ${GUTTER}`,
+		roomy: `py-8 @tf-panel:py-14 ${ROOMY_GUTTER}`
 	} }
 });
-const paperHeaderRecipe = cva([`relative flex flex-wrap items-center justify-between gap-4 py-5 ${GUTTER}`, "min-h-[calc(var(--spacing-tf-control-sm)+var(--spacing)*10)]"]);
-const paperRuleRecipe = cva(`absolute inset-x-4 bottom-0 @tf-panel:inset-x-8 ${ruleFading}`);
-const paperBadgeRecipe = cva("absolute right-4 @tf-panel:right-8", {
-	defaultVariants: { headed: false },
-	variants: { headed: {
-		false: "top-4",
-		true: "top-10 -translate-y-1/2"
+const paperHeaderRecipe = cva([`relative flex flex-wrap items-center justify-between gap-4 py-5`, "min-h-[calc(var(--spacing-tf-control-sm)+var(--spacing)*10)]"], {
+	defaultVariants: { inset: defaultPaperInset },
+	variants: { inset: {
+		flush: GUTTER,
+		padded: GUTTER,
+		roomy: ROOMY_GUTTER
 	} }
 });
+const paperRuleRecipe = cva(`absolute bottom-0 ${ruleFading}`, {
+	defaultVariants: { inset: defaultPaperInset },
+	variants: { inset: {
+		flush: "inset-x-4 @tf-panel:inset-x-8",
+		padded: "inset-x-4 @tf-panel:inset-x-8",
+		roomy: "inset-x-6 @tf-panel:inset-x-14"
+	} }
+});
+const paperBadgeRecipe = cva("absolute", {
+	defaultVariants: {
+		headed: false,
+		inset: defaultPaperInset
+	},
+	variants: {
+		headed: {
+			false: "top-4",
+			true: "top-10 -translate-y-1/2"
+		},
+		inset: {
+			flush: "right-4 @tf-panel:right-8",
+			padded: "right-4 @tf-panel:right-8",
+			roomy: "right-6 @tf-panel:right-14"
+		}
+	}
+});
 const paperActionRecipe = cva("-mr-3 flex min-w-0 flex-initial flex-wrap items-center justify-end gap-4");
 const paperVariants = ["plain", "elevated"];
-const paperInsets = ["padded", "flush"];
+const paperTones = tones;
+const paperInsets = [
+	"padded",
+	"flush",
+	"roomy"
+];
 //#endregion
-export { defaultPaperInset, defaultPaperVariant, paperActionRecipe, paperBadgeRecipe, paperBodyRecipe, paperHeaderRecipe, paperInsets, paperRecipe, paperRuleRecipe, paperVariants };
+export { defaultPaperInset, defaultPaperTone, defaultPaperVariant, paperActionRecipe, paperBadgeRecipe, paperBodyRecipe, paperHeaderRecipe, paperInsets, paperRecipe, paperRuleRecipe, paperTones, paperVariants };
 
 //# sourceMappingURL=paper.js.map

package/dist/recipes/paper.js.map

@@ -1 +1 @@
-{"version":3,"file":"paper.js","names":[],"sources":["../../src/recipes/paper.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { ruleFading } from '#parts/rule'\nimport { surfaceLifted, surfacePanel } from '#parts/surface'\n\ntype PaperVariant = 'plain' | 'elevated'\n\ntype PaperInset = 'padded' | 'flush'\n\nconst defaultPaperVariant = 'plain' satisfies PaperVariant\n\nconst defaultPaperInset = 'padded' satisfies PaperInset\n\nconst paperBase = [\n  '@container relative w-full',\n  ...surfacePanel,\n  'font-tf-body text-tf-body-sm font-medium text-tf-fg',\n]\n\nconst paperRecipe = cva(paperBase, {\n  defaultVariants: { variant: defaultPaperVariant },\n  variants: {\n    variant: {\n      elevated: surfaceLifted.join(' '),\n      plain: '',\n    } satisfies Record<PaperVariant, string>,\n  },\n})\n\nconst GUTTER = 'px-4 @tf-panel:px-8'\n\nconst paperBodyRecipe = cva('py-6 @tf-panel:py-8', {\n  defaultVariants: { inset: defaultPaperInset },\n  variants: {\n    inset: { flush: '', padded: GUTTER } satisfies Record<PaperInset, string>,\n  },\n})\n\nconst HEAD_ROW = 'min-h-[calc(var(--spacing-tf-control-sm)+var(--spacing)*10)]'\n\nconst paperHeaderRecipe = cva([\n  `relative flex flex-wrap items-center justify-between gap-4 py-5 ${GUTTER}`,\n  HEAD_ROW,\n])\n\nconst paperRuleRecipe = cva(`absolute inset-x-4 bottom-0 @tf-panel:inset-x-8 ${ruleFading}`)\n\nconst paperBadgeRecipe = cva('absolute right-4 @tf-panel:right-8', {\n  defaultVariants: { headed: false },\n  variants: {\n    headed: { false: 'top-4', true: 'top-10 -translate-y-1/2' },\n  },\n})\n\nconst paperActionRecipe = cva(\n  '-mr-3 flex min-w-0 flex-initial flex-wrap items-center justify-end gap-4',\n)\n\nconst paperVariants = ['plain', 'elevated'] as const satisfies readonly PaperVariant[]\n\nconst paperInsets = ['padded', 'flush'] as const satisfies readonly PaperInset[]\n\nexport {\n  type PaperInset,\n  type PaperVariant,\n  defaultPaperInset,\n  defaultPaperVariant,\n  paperActionRecipe,\n  paperBadgeRecipe,\n  paperBodyRecipe,\n  paperHeaderRecipe,\n  paperInsets,\n  paperRecipe,\n  paperRuleRecipe,\n  paperVariants,\n}\n"],"mappings":";;;;AASA,MAAM,sBAAsB;AAE5B,MAAM,oBAAoB;AAE1B,MAAM,YAAY;CAChB;CACA,GAAG;CACH;AACF;AAEA,MAAM,cAAc,IAAI,WAAW;CACjC,iBAAiB,EAAE,SAAS,oBAAoB;CAChD,UAAU,EACR,SAAS;EACP,UAAU,cAAc,KAAK,GAAG;EAChC,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,SAAS;AAEf,MAAM,kBAAkB,IAAI,uBAAuB;CACjD,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EAAE,OAAO;EAAI,QAAQ;CAAO,EACrC;AACF,CAAC;AAID,MAAM,oBAAoB,IAAI,CAC5B,mEAAmE,UACnE,8DACF,CAAC;AAED,MAAM,kBAAkB,IAAI,mDAAmD,YAAY;AAE3F,MAAM,mBAAmB,IAAI,sCAAsC;CACjE,iBAAiB,EAAE,QAAQ,MAAM;CACjC,UAAU,EACR,QAAQ;EAAE,OAAO;EAAS,MAAM;CAA0B,EAC5D;AACF,CAAC;AAED,MAAM,oBAAoB,IACxB,0EACF;AAEA,MAAM,gBAAgB,CAAC,SAAS,UAAU;AAE1C,MAAM,cAAc,CAAC,UAAU,OAAO"}
+{"version":3,"file":"paper.js","names":[],"sources":["../../src/recipes/paper.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { ruleFading } from '#parts/rule'\nimport { surfaceLifted, surfaceSkin } from '#parts/surface'\nimport { defaultTone, tones } from '#parts/tone'\nimport type { Tone } from '#tone'\nimport { toneBlend } from '#tone'\n\ntype PaperVariant = 'plain' | 'elevated'\n\ntype PaperInset = 'padded' | 'flush' | 'roomy'\n\nconst defaultPaperVariant = 'plain' satisfies PaperVariant\n\nconst defaultPaperInset = 'padded' satisfies PaperInset\n\nconst defaultPaperTone = defaultTone\n\nconst paperBase = [\n  '@container relative w-full',\n  ...surfaceSkin,\n  'font-tf-body text-tf-body-sm font-medium text-tf-fg',\n]\n\nconst paperRecipe = cva(paperBase, {\n  defaultVariants: { tone: defaultPaperTone, variant: defaultPaperVariant },\n  variants: {\n    tone: toneBlend satisfies Record<Tone, string>,\n    variant: {\n      elevated: surfaceLifted.join(' '),\n      plain: '',\n    } satisfies Record<PaperVariant, string>,\n  },\n})\n\nconst GUTTER = 'px-4 @tf-panel:px-8'\n\nconst ROOMY_GUTTER = 'px-6 @tf-panel:px-14'\n\nconst RIBS = 'py-6 @tf-panel:py-8'\n\nconst ROOMY_RIBS = 'py-8 @tf-panel:py-14'\n\nconst paperBodyRecipe = cva('', {\n  defaultVariants: { inset: defaultPaperInset },\n  variants: {\n    inset: {\n      flush: RIBS,\n      padded: `${RIBS} ${GUTTER}`,\n      roomy: `${ROOMY_RIBS} ${ROOMY_GUTTER}`,\n    } satisfies Record<PaperInset, string>,\n  },\n})\n\nconst HEAD_ROW = 'min-h-[calc(var(--spacing-tf-control-sm)+var(--spacing)*10)]'\n\nconst paperHeaderRecipe = cva(\n  [`relative flex flex-wrap items-center justify-between gap-4 py-5`, HEAD_ROW],\n  {\n    defaultVariants: { inset: defaultPaperInset },\n    variants: {\n      inset: {\n        flush: GUTTER,\n        padded: GUTTER,\n        roomy: ROOMY_GUTTER,\n      } satisfies Record<PaperInset, string>,\n    },\n  },\n)\n\nconst paperRuleRecipe = cva(`absolute bottom-0 ${ruleFading}`, {\n  defaultVariants: { inset: defaultPaperInset },\n  variants: {\n    inset: {\n      flush: 'inset-x-4 @tf-panel:inset-x-8',\n      padded: 'inset-x-4 @tf-panel:inset-x-8',\n      roomy: 'inset-x-6 @tf-panel:inset-x-14',\n    } satisfies Record<PaperInset, string>,\n  },\n})\n\nconst paperBadgeRecipe = cva('absolute', {\n  defaultVariants: { headed: false, inset: defaultPaperInset },\n  variants: {\n    headed: { false: 'top-4', true: 'top-10 -translate-y-1/2' },\n    inset: {\n      flush: 'right-4 @tf-panel:right-8',\n      padded: 'right-4 @tf-panel:right-8',\n      roomy: 'right-6 @tf-panel:right-14',\n    } satisfies Record<PaperInset, string>,\n  },\n})\n\nconst paperActionRecipe = cva(\n  '-mr-3 flex min-w-0 flex-initial flex-wrap items-center justify-end gap-4',\n)\n\nconst paperVariants = ['plain', 'elevated'] as const satisfies readonly PaperVariant[]\n\nconst paperTones = tones\n\nconst paperInsets = ['padded', 'flush', 'roomy'] as const satisfies readonly PaperInset[]\n\nexport {\n  type PaperInset,\n  type PaperVariant,\n  defaultPaperInset,\n  defaultPaperTone,\n  defaultPaperVariant,\n  paperActionRecipe,\n  paperBadgeRecipe,\n  paperBodyRecipe,\n  paperHeaderRecipe,\n  paperInsets,\n  paperRecipe,\n  paperRuleRecipe,\n  paperTones,\n  paperVariants,\n}\n"],"mappings":";;;;;;AAYA,MAAM,sBAAsB;AAE5B,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;AAEzB,MAAM,YAAY;CAChB;CACA,GAAG;CACH;AACF;AAEA,MAAM,cAAc,IAAI,WAAW;CACjC,iBAAiB;EAAE,MAAM;EAAkB,SAAS;CAAoB;CACxE,UAAU;EACR,MAAM;EACN,SAAS;GACP,UAAU,cAAc,KAAK,GAAG;GAChC,OAAO;EACT;CACF;AACF,CAAC;AAED,MAAM,SAAS;AAEf,MAAM,eAAe;AAErB,MAAM,OAAO;AAIb,MAAM,kBAAkB,IAAI,IAAI;CAC9B,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EACL,OAAO;EACP,QAAQ,GAAG,KAAK,GAAG;EACnB,OAAO,wBAAiB;CAC1B,EACF;AACF,CAAC;AAID,MAAM,oBAAoB,IACxB,CAAC,mEAAmE,8DAAQ,GAC5E;CACE,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EACL,OAAO;EACP,QAAQ;EACR,OAAO;CACT,EACF;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,qBAAqB,cAAc;CAC7D,iBAAiB,EAAE,OAAO,kBAAkB;CAC5C,UAAU,EACR,OAAO;EACL,OAAO;EACP,QAAQ;EACR,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,YAAY;CACvC,iBAAiB;EAAE,QAAQ;EAAO,OAAO;CAAkB;CAC3D,UAAU;EACR,QAAQ;GAAE,OAAO;GAAS,MAAM;EAA0B;EAC1D,OAAO;GACL,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;AACF,CAAC;AAED,MAAM,oBAAoB,IACxB,0EACF;AAEA,MAAM,gBAAgB,CAAC,SAAS,UAAU;AAE1C,MAAM,aAAa;AAEnB,MAAM,cAAc;CAAC;CAAU;CAAS;AAAO"}

package/dist/recipes/sectionHeader.d.ts

@@ -1,9 +1,15 @@
 //#region src/recipes/sectionHeader.d.ts
-type SectionHeaderSize = 'section' | 'hero';
+type SectionHeaderSize = 'section' | 'hero' | 'panel';
+type SectionHeaderEyebrow = 'lead' | 'quiet';
 declare const defaultSectionHeaderSize = "section";
-declare const sectionHeaderSizes: readonly ["section", "hero"];
+declare const sectionHeaderSizes: readonly ["section", "hero", "panel"];
+declare const sectionHeaderEyebrows: readonly ["lead", "quiet"];
+declare const sectionHeaderTones: readonly ["accent", "success", "warning", "info", "danger"];
+declare const restingEyebrow: (size: SectionHeaderSize) => SectionHeaderEyebrow;
 declare const sectionHeaderRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-declare const sectionHeaderLabelStackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sectionHeaderLabelStackRecipe: (props?: ({
+  size?: "panel" | "section" | "hero" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
-export { type SectionHeaderSize, defaultSectionHeaderSize, sectionHeaderLabelStackRecipe, sectionHeaderRecipe, sectionHeaderSizes };
+export { type SectionHeaderEyebrow, type SectionHeaderSize, defaultSectionHeaderSize, restingEyebrow, sectionHeaderEyebrows, sectionHeaderLabelStackRecipe, sectionHeaderRecipe, sectionHeaderSizes, sectionHeaderTones };
 //# sourceMappingURL=sectionHeader.d.ts.map

package/dist/recipes/sectionHeader.js

@@ -1,10 +1,30 @@
+import { tones } from "../parts/tone.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/sectionHeader.ts
 const defaultSectionHeaderSize = "section";
-const sectionHeaderSizes = ["section", "hero"];
+const sectionHeaderSizes = [
+	"section",
+	"hero",
+	"panel"
+];
+const sectionHeaderEyebrows = ["lead", "quiet"];
+const sectionHeaderTones = tones;
+const RESTING_EYEBROW = {
+	hero: "lead",
+	panel: "quiet",
+	section: "quiet"
+};
+const restingEyebrow = (size) => RESTING_EYEBROW[size];
 const sectionHeaderRecipe = cva("flex flex-col gap-6");
-const sectionHeaderLabelStackRecipe = cva("flex flex-col gap-4");
+const sectionHeaderLabelStackRecipe = cva("flex flex-col", {
+	defaultVariants: { size: defaultSectionHeaderSize },
+	variants: { size: {
+		hero: "gap-4",
+		panel: "gap-2",
+		section: "gap-4"
+	} }
+});
 //#endregion
-export { defaultSectionHeaderSize, sectionHeaderLabelStackRecipe, sectionHeaderRecipe, sectionHeaderSizes };
+export { defaultSectionHeaderSize, restingEyebrow, sectionHeaderEyebrows, sectionHeaderLabelStackRecipe, sectionHeaderRecipe, sectionHeaderSizes, sectionHeaderTones };
 
 //# sourceMappingURL=sectionHeader.js.map

package/dist/recipes/sectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"sectionHeader.js","names":[],"sources":["../../src/recipes/sectionHeader.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\ntype SectionHeaderSize = 'section' | 'hero'\n\nconst defaultSectionHeaderSize = 'section' satisfies SectionHeaderSize\n\nconst sectionHeaderSizes = ['section', 'hero'] as const satisfies readonly SectionHeaderSize[]\n\nconst sectionHeaderRecipe = cva('flex flex-col gap-6')\n\nconst sectionHeaderLabelStackRecipe = cva('flex flex-col gap-4')\n\nexport {\n  type SectionHeaderSize,\n  defaultSectionHeaderSize,\n  sectionHeaderLabelStackRecipe,\n  sectionHeaderRecipe,\n  sectionHeaderSizes,\n}\n"],"mappings":";;AAIA,MAAM,2BAA2B;AAEjC,MAAM,qBAAqB,CAAC,WAAW,MAAM;AAE7C,MAAM,sBAAsB,IAAI,qBAAqB;AAErD,MAAM,gCAAgC,IAAI,qBAAqB"}
+{"version":3,"file":"sectionHeader.js","names":[],"sources":["../../src/recipes/sectionHeader.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { tones } from '#parts/tone'\n\ntype SectionHeaderSize = 'section' | 'hero' | 'panel'\n\ntype SectionHeaderEyebrow = 'lead' | 'quiet'\n\nconst defaultSectionHeaderSize = 'section' satisfies SectionHeaderSize\n\nconst sectionHeaderSizes = [\n  'section',\n  'hero',\n  'panel',\n] as const satisfies readonly SectionHeaderSize[]\n\nconst sectionHeaderEyebrows = ['lead', 'quiet'] as const satisfies readonly SectionHeaderEyebrow[]\n\nconst sectionHeaderTones = tones\n\nconst RESTING_EYEBROW = {\n  hero: 'lead',\n  panel: 'quiet',\n  section: 'quiet',\n} satisfies Record<SectionHeaderSize, SectionHeaderEyebrow>\n\nconst restingEyebrow = (size: SectionHeaderSize): SectionHeaderEyebrow => RESTING_EYEBROW[size]\n\nconst sectionHeaderRecipe = cva('flex flex-col gap-6')\n\nconst sectionHeaderLabelStackRecipe = cva('flex flex-col', {\n  defaultVariants: { size: defaultSectionHeaderSize },\n  variants: {\n    size: {\n      hero: 'gap-4',\n      panel: 'gap-2',\n      section: 'gap-4',\n    } satisfies Record<SectionHeaderSize, string>,\n  },\n})\n\nexport {\n  type SectionHeaderEyebrow,\n  type SectionHeaderSize,\n  defaultSectionHeaderSize,\n  restingEyebrow,\n  sectionHeaderEyebrows,\n  sectionHeaderLabelStackRecipe,\n  sectionHeaderRecipe,\n  sectionHeaderSizes,\n  sectionHeaderTones,\n}\n"],"mappings":";;;AAQA,MAAM,2BAA2B;AAEjC,MAAM,qBAAqB;CACzB;CACA;CACA;AACF;AAEA,MAAM,wBAAwB,CAAC,QAAQ,OAAO;AAE9C,MAAM,qBAAqB;AAE3B,MAAM,kBAAkB;CACtB,MAAM;CACN,OAAO;CACP,SAAS;AACX;AAEA,MAAM,kBAAkB,SAAkD,gBAAgB;AAE1F,MAAM,sBAAsB,IAAI,qBAAqB;AAErD,MAAM,gCAAgC,IAAI,iBAAiB;CACzD,iBAAiB,EAAE,MAAM,yBAAyB;CAClD,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;EACP,SAAS;CACX,EACF;AACF,CAAC"}

package/dist/recipes/separator.d.ts

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

package/dist/recipes/separator.js

@@ -1,38 +1,57 @@
-import { ruleFading, ruleFadingDown, ruleFilled, ruleFilledDown, ruleQuiet } from "../parts/rule.js";
+import { toneBlend } from "../tone.js";
+import { fadingDownOf, fadingOf, filledDownOf, filledOf, ruleQuiet, ruleQuietDown } from "../parts/rule.js";
+import { defaultTone, tones } from "../parts/tone.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/separator.ts
 const defaultSeparatorOrientation = "horizontal";
 const defaultSeparatorVariant = "filled";
-const separatorRecipe = cva("shrink-0", {
-	compoundVariants: [
+const defaultSeparatorTone = defaultTone;
+const tonedRules = tones.flatMap((tone) => {
+	const blend = toneBlend[tone];
+	return [
 		{
-			class: ruleFading,
+			class: fadingOf(blend),
 			orientation: "horizontal",
+			tone,
 			variant: "fade"
 		},
 		{
-			class: ruleQuiet,
-			orientation: "horizontal",
-			variant: "quiet"
-		},
-		{
-			class: ruleFilled,
+			class: filledOf(blend),
 			orientation: "horizontal",
+			tone,
 			variant: "filled"
 		},
 		{
-			class: ruleFadingDown,
+			class: fadingDownOf(blend),
 			orientation: "vertical",
+			tone,
 			variant: "fade"
 		},
 		{
-			class: ruleFilledDown,
+			class: filledDownOf(blend),
 			orientation: "vertical",
+			tone,
 			variant: "filled"
 		}
+	];
+});
+const separatorRecipe = cva("shrink-0", {
+	compoundVariants: [
+		{
+			class: ruleQuiet,
+			orientation: "horizontal",
+			variant: "quiet"
+		},
+		{
+			class: ruleQuietDown,
+			orientation: "vertical",
+			variant: "quiet"
+		},
+		...tonedRules
 	],
 	defaultVariants: {
 		orientation: defaultSeparatorOrientation,
+		tone: defaultSeparatorTone,
 		variant: defaultSeparatorVariant
 	},
 	variants: {
@@ -40,6 +59,13 @@ const separatorRecipe = cva("shrink-0", {
 			horizontal: "w-full",
 			vertical: "self-stretch"
 		},
+		tone: {
+			accent: "",
+			danger: "",
+			info: "",
+			success: "",
+			warning: ""
+		},
 		variant: {
 			fade: "",
 			filled: "",
@@ -53,7 +79,8 @@ const separatorVariants = [
 	"filled",
 	"quiet"
 ];
+const separatorTones = tones;
 //#endregion
-export { defaultSeparatorOrientation, defaultSeparatorVariant, separatorOrientations, separatorRecipe, separatorVariants };
+export { defaultSeparatorOrientation, defaultSeparatorTone, defaultSeparatorVariant, separatorOrientations, separatorRecipe, separatorTones, separatorVariants };
 
 //# sourceMappingURL=separator.js.map

package/dist/recipes/separator.js.map

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

package/dist/recipes/slider.d.ts

@@ -1,6 +1,8 @@
 //#region src/recipes/slider.d.ts
 declare const sliderKnobSize = 20;
-declare const sliderRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderRecipe: (props?: ({
+  fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const sliderHeadRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sliderLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sliderValueRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/recipes/slider.js

@@ -4,11 +4,17 @@ import { cva } from "class-variance-authority";
 //#region src/recipes/slider.ts
 const sliderKnobSize = 20;
 const sliderRecipe = cva([
-	"flex w-full max-w-tf-panel flex-col gap-2",
+	"flex w-full flex-col gap-2",
 	"font-tf-body",
 	"data-disabled:cursor-not-allowed",
 	"data-disabled:**:data-[part=value-text]:text-tf-muted"
-]);
+], {
+	defaultVariants: { fullWidth: false },
+	variants: { fullWidth: {
+		false: "max-w-tf-panel",
+		true: ""
+	} }
+});
 const sliderHeadRecipe = cva("flex items-baseline justify-between gap-4");
 const sliderLabelRecipe = cva("text-tf-body text-tf-fg data-disabled:text-tf-muted");
 const sliderValueRecipe = cva([

package/dist/recipes/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/recipes/slider.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlReach } from '#parts/control'\nimport { markKnob } from '#parts/mark'\n\nconst sliderKnobSize = 20\n\nconst sliderRecipe = cva([\n  'flex w-full max-w-tf-panel flex-col gap-2',\n  'font-tf-body',\n  'data-disabled:cursor-not-allowed',\n  'data-disabled:**:data-[part=value-text]:text-tf-muted',\n])\n\nconst sliderHeadRecipe = cva('flex items-baseline justify-between gap-4')\n\nconst sliderLabelRecipe = cva('text-tf-body text-tf-fg data-disabled:text-tf-muted')\n\nconst sliderValueRecipe = cva([\n  'font-tf-display text-tf-h4 font-bold tracking-tf-tight tabular-nums',\n  'text-tf-fg in-data-dragging:text-tf-accent-hi in-data-focus:text-tf-accent-hi',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst sliderControlRecipe = cva([\n  'relative flex min-h-tf-target w-full items-center',\n  'not-data-readonly:interactive:cursor-pointer',\n  'data-readonly:cursor-default',\n])\n\nconst sliderTrackRecipe = cva([\n  'h-tf-mark-track w-full overflow-hidden rounded-tf-inline bg-tf-line',\n  'data-disabled:opacity-50',\n])\n\nconst sliderRangeRecipe = cva([\n  'h-tf-mark-track',\n  'bg-tf-blend-rise blend-tf-accent',\n  'data-invalid:blend-tf-danger',\n  'tf-transition not-data-dragging:tf-travels motion-reduce:transition-none',\n])\n\nconst sliderNotchesRecipe = cva('pointer-events-none absolute inset-0')\n\nconst sliderNotchRecipe = cva([\n  'h-full w-tf-hairline',\n  'data-[state=over-value]:bg-tf-line-hi data-[state=under-value]:bg-tf-shade-under',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst sliderThumbRecipe = cva([\n  ...markKnob,\n  'size-tf-icon-solo-sm blend-tf-accent',\n  'inset-ring inset-ring-tf-line-hi',\n  'in-data-invalid:inset-ring-tf-danger-hi',\n  'tf-glow tf-fill-scale tf-settled-quiet',\n  'interactive:hovered:tf-raised',\n  'not-data-dragging:tf-travels',\n  'data-dragging:bg-tf-fg-held data-dragging:tf-raised',\n  'motion-safe:data-dragging:scale-112',\n  'data-disabled:opacity-50',\n  ...controlReach,\n])\n\nconst sliderFootRecipe = cva('flex items-baseline justify-between gap-4')\n\nconst sliderHintRecipe = cva('text-tf-caption font-medium', {\n  defaultVariants: { invalid: false },\n  variants: {\n    invalid: { false: 'text-tf-muted', true: 'text-tf-danger-hi tf-arrives' },\n  },\n})\n\nconst sliderBoundsRecipe = cva(\n  'ms-auto shrink-0 text-tf-caption font-medium text-tf-muted tabular-nums',\n)\n\nexport {\n  sliderBoundsRecipe,\n  sliderControlRecipe,\n  sliderFootRecipe,\n  sliderHeadRecipe,\n  sliderHintRecipe,\n  sliderKnobSize,\n  sliderLabelRecipe,\n  sliderNotchRecipe,\n  sliderNotchesRecipe,\n  sliderRangeRecipe,\n  sliderRecipe,\n  sliderThumbRecipe,\n  sliderTrackRecipe,\n  sliderValueRecipe,\n}\n"],"mappings":";;;;AAKA,MAAM,iBAAiB;AAEvB,MAAM,eAAe,IAAI;CACvB;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,2CAA2C;AAExE,MAAM,oBAAoB,IAAI,qDAAqD;AAEnF,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,uEACA,0BACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,sCAAsC;AAEtE,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B,GAAG;CACH;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,mBAAmB,IAAI,2CAA2C;AAExE,MAAM,mBAAmB,IAAI,+BAA+B;CAC1D,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EAAE,OAAO;EAAiB,MAAM;CAA+B,EAC1E;AACF,CAAC;AAED,MAAM,qBAAqB,IACzB,yEACF"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/recipes/slider.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlReach } from '#parts/control'\nimport { markKnob } from '#parts/mark'\n\nconst sliderKnobSize = 20\n\nconst sliderRecipe = cva(\n  [\n    'flex w-full flex-col gap-2',\n    'font-tf-body',\n    'data-disabled:cursor-not-allowed',\n    'data-disabled:**:data-[part=value-text]:text-tf-muted',\n  ],\n  {\n    defaultVariants: { fullWidth: false },\n    variants: {\n      fullWidth: { false: 'max-w-tf-panel', true: '' },\n    },\n  },\n)\n\nconst sliderHeadRecipe = cva('flex items-baseline justify-between gap-4')\n\nconst sliderLabelRecipe = cva('text-tf-body text-tf-fg data-disabled:text-tf-muted')\n\nconst sliderValueRecipe = cva([\n  'font-tf-display text-tf-h4 font-bold tracking-tf-tight tabular-nums',\n  'text-tf-fg in-data-dragging:text-tf-accent-hi in-data-focus:text-tf-accent-hi',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst sliderControlRecipe = cva([\n  'relative flex min-h-tf-target w-full items-center',\n  'not-data-readonly:interactive:cursor-pointer',\n  'data-readonly:cursor-default',\n])\n\nconst sliderTrackRecipe = cva([\n  'h-tf-mark-track w-full overflow-hidden rounded-tf-inline bg-tf-line',\n  'data-disabled:opacity-50',\n])\n\nconst sliderRangeRecipe = cva([\n  'h-tf-mark-track',\n  'bg-tf-blend-rise blend-tf-accent',\n  'data-invalid:blend-tf-danger',\n  'tf-transition not-data-dragging:tf-travels motion-reduce:transition-none',\n])\n\nconst sliderNotchesRecipe = cva('pointer-events-none absolute inset-0')\n\nconst sliderNotchRecipe = cva([\n  'h-full w-tf-hairline',\n  'data-[state=over-value]:bg-tf-line-hi data-[state=under-value]:bg-tf-shade-under',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst sliderThumbRecipe = cva([\n  ...markKnob,\n  'size-tf-icon-solo-sm blend-tf-accent',\n  'inset-ring inset-ring-tf-line-hi',\n  'in-data-invalid:inset-ring-tf-danger-hi',\n  'tf-glow tf-fill-scale tf-settled-quiet',\n  'interactive:hovered:tf-raised',\n  'not-data-dragging:tf-travels',\n  'data-dragging:bg-tf-fg-held data-dragging:tf-raised',\n  'motion-safe:data-dragging:scale-112',\n  'data-disabled:opacity-50',\n  ...controlReach,\n])\n\nconst sliderFootRecipe = cva('flex items-baseline justify-between gap-4')\n\nconst sliderHintRecipe = cva('text-tf-caption font-medium', {\n  defaultVariants: { invalid: false },\n  variants: {\n    invalid: { false: 'text-tf-muted', true: 'text-tf-danger-hi tf-arrives' },\n  },\n})\n\nconst sliderBoundsRecipe = cva(\n  'ms-auto shrink-0 text-tf-caption font-medium text-tf-muted tabular-nums',\n)\n\nexport {\n  sliderBoundsRecipe,\n  sliderControlRecipe,\n  sliderFootRecipe,\n  sliderHeadRecipe,\n  sliderHintRecipe,\n  sliderKnobSize,\n  sliderLabelRecipe,\n  sliderNotchRecipe,\n  sliderNotchesRecipe,\n  sliderRangeRecipe,\n  sliderRecipe,\n  sliderThumbRecipe,\n  sliderTrackRecipe,\n  sliderValueRecipe,\n}\n"],"mappings":";;;;AAKA,MAAM,iBAAiB;AAEvB,MAAM,eAAe,IACnB;CACE;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,WAAW,MAAM;CACpC,UAAU,EACR,WAAW;EAAE,OAAO;EAAkB,MAAM;CAAG,EACjD;AACF,CACF;AAEA,MAAM,mBAAmB,IAAI,2CAA2C;AAExE,MAAM,oBAAoB,IAAI,qDAAqD;AAEnF,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,uEACA,0BACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,sCAAsC;AAEtE,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B,GAAG;CACH;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,mBAAmB,IAAI,2CAA2C;AAExE,MAAM,mBAAmB,IAAI,+BAA+B;CAC1D,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EAAE,OAAO;EAAiB,MAAM;CAA+B,EAC1E;AACF,CAAC;AAED,MAAM,qBAAqB,IACzB,yEACF"}

package/dist/recipes/text.d.ts

@@ -14,7 +14,7 @@ declare const textFamilies: readonly ["sans", "mono", "display"];
 declare const restingWeight: (size: TextSize, uppercase?: boolean) => TextWeight;
 declare const textRecipe: (props?: ({
   family?: "display" | "sans" | "mono" | null | undefined;
-  size?: "caption-sm" | "caption" | "body-sm" | "body" | "lead" | null | undefined;
+  size?: "lead" | "caption-sm" | "caption" | "body-sm" | "body" | null | undefined;
   tabular?: boolean | null | undefined;
   tone?: "accent" | "success" | "warning" | "info" | "danger" | "fg" | "muted" | null | undefined;
   uppercase?: boolean | null | undefined;