@techfides/ui-library-design 0.5.0 → 0.7.0

package/dist/recipes/select.js

@@ -1,3 +1,6 @@
+import { anatomy } from "../anatomy.js";
+import { fieldFootRecipe, fieldRecipe, trailingRecipe } from "./field.js";
+import { menuMarkRecipe, menuShortcutRecipe } from "./menu.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/select.ts
 const selectTriggerRecipe = cva([
@@ -15,7 +18,54 @@ const selectRowRecipe = cva([
 	"has-data-[state=open]:**:data-[part=trailing]:stroke-tf-ink"
 ]);
 const selectEmptyRecipe = cva(["flex h-tf-row min-h-tf-row flex-none items-center px-3", "text-tf-body-sm font-medium text-tf-muted"]);
+const selectAnatomy = anatomy({
+	empty: {
+		part: "empty",
+		recipe: selectEmptyRecipe,
+		required: false
+	},
+	foot: {
+		part: "foot",
+		recipe: fieldFootRecipe,
+		required: true
+	},
+	held: {
+		part: "held",
+		recipe: menuMarkRecipe,
+		required: true
+	},
+	mark: {
+		part: "mark",
+		recipe: menuMarkRecipe,
+		required: true
+	},
+	meta: {
+		part: "meta",
+		recipe: menuShortcutRecipe,
+		required: false
+	},
+	root: {
+		part: "select",
+		recipe: fieldRecipe,
+		required: true
+	},
+	row: {
+		part: "row",
+		recipe: selectRowRecipe,
+		required: true
+	},
+	spinner: {
+		part: "spinner",
+		recipe: trailingRecipe,
+		required: false
+	},
+	trailing: {
+		part: "trailing",
+		recipe: trailingRecipe,
+		required: true
+	}
+});
 //#endregion
-export { selectEmptyRecipe, selectIndicatorRecipe, selectRowRecipe, selectTriggerRecipe, selectValueRecipe };
+export { selectAnatomy, selectEmptyRecipe, selectIndicatorRecipe, selectRowRecipe, selectTriggerRecipe, selectValueRecipe };
 
 //# sourceMappingURL=select.js.map

package/dist/recipes/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../src/recipes/select.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst selectTriggerRecipe = cva([\n  'flex items-center text-left',\n  'cursor-pointer disabled:cursor-not-allowed',\n  'data-readonly:cursor-default',\n  'outline-hidden',\n])\n\nconst selectValueRecipe = cva('min-w-0 flex-1 truncate')\n\nconst selectIndicatorRecipe = cva([\n  'tf-transition motion-reduce:transition-none',\n  'data-[state=open]:rotate-180',\n])\n\nconst selectRowRecipe = cva([\n  'reached:**:data-[part=trailing]:text-tf-accent-hi',\n  'reached:**:data-[part=trailing]:stroke-tf-ink',\n  'has-data-[state=open]:**:data-[part=trailing]:text-tf-accent-hi',\n  'has-data-[state=open]:**:data-[part=trailing]:stroke-tf-ink',\n])\n\nconst selectEmptyRecipe = cva([\n  'flex h-tf-row min-h-tf-row flex-none items-center px-3',\n  'text-tf-body-sm font-medium text-tf-muted',\n])\n\nexport {\n  selectEmptyRecipe,\n  selectIndicatorRecipe,\n  selectRowRecipe,\n  selectTriggerRecipe,\n  selectValueRecipe,\n}\n"],"mappings":";;AAEA,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,yBAAyB;AAEvD,MAAM,wBAAwB,IAAI,CAChC,+CACA,8BACF,CAAC;AAED,MAAM,kBAAkB,IAAI;CAC1B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,0DACA,2CACF,CAAC"}
+{"version":3,"file":"select.js","names":[],"sources":["../../src/recipes/select.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nimport { fieldFootRecipe, fieldRecipe, trailingRecipe } from './field'\nimport { menuMarkRecipe, menuShortcutRecipe } from './menu'\n\nconst selectTriggerRecipe = cva([\n  'flex items-center text-left',\n  'cursor-pointer disabled:cursor-not-allowed',\n  'data-readonly:cursor-default',\n  'outline-hidden',\n])\n\nconst selectValueRecipe = cva('min-w-0 flex-1 truncate')\n\nconst selectIndicatorRecipe = cva([\n  'tf-transition motion-reduce:transition-none',\n  'data-[state=open]:rotate-180',\n])\n\nconst selectRowRecipe = cva([\n  'reached:**:data-[part=trailing]:text-tf-accent-hi',\n  'reached:**:data-[part=trailing]:stroke-tf-ink',\n  'has-data-[state=open]:**:data-[part=trailing]:text-tf-accent-hi',\n  'has-data-[state=open]:**:data-[part=trailing]:stroke-tf-ink',\n])\n\nconst selectEmptyRecipe = cva([\n  'flex h-tf-row min-h-tf-row flex-none items-center px-3',\n  'text-tf-body-sm font-medium text-tf-muted',\n])\n\nconst selectAnatomy = anatomy({\n  empty: { part: 'empty', recipe: selectEmptyRecipe, required: false },\n  foot: { part: 'foot', recipe: fieldFootRecipe, required: true },\n  held: { part: 'held', recipe: menuMarkRecipe, required: true },\n  mark: { part: 'mark', recipe: menuMarkRecipe, required: true },\n  meta: { part: 'meta', recipe: menuShortcutRecipe, required: false },\n  root: { part: 'select', recipe: fieldRecipe, required: true },\n  row: { part: 'row', recipe: selectRowRecipe, required: true },\n  spinner: { part: 'spinner', recipe: trailingRecipe, required: false },\n  trailing: { part: 'trailing', recipe: trailingRecipe, required: true },\n})\n\nexport {\n  selectAnatomy,\n  selectEmptyRecipe,\n  selectIndicatorRecipe,\n  selectRowRecipe,\n  selectTriggerRecipe,\n  selectValueRecipe,\n}\n"],"mappings":";;;;;AAOA,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,yBAAyB;AAEvD,MAAM,wBAAwB,IAAI,CAChC,+CACA,8BACF,CAAC;AAED,MAAM,kBAAkB,IAAI;CAC1B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,0DACA,2CACF,CAAC;AAED,MAAM,gBAAgB,QAAQ;CAC5B,OAAO;EAAE,MAAM;EAAS,QAAQ;EAAmB,UAAU;CAAM;CACnE,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAiB,UAAU;CAAK;CAC9D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAK;CAC7D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAgB,UAAU;CAAK;CAC7D,MAAM;EAAE,MAAM;EAAQ,QAAQ;EAAoB,UAAU;CAAM;CAClE,MAAM;EAAE,MAAM;EAAU,QAAQ;EAAa,UAAU;CAAK;CAC5D,KAAK;EAAE,MAAM;EAAO,QAAQ;EAAiB,UAAU;CAAK;CAC5D,SAAS;EAAE,MAAM;EAAW,QAAQ;EAAgB,UAAU;CAAM;CACpE,UAAU;EAAE,MAAM;EAAY,QAAQ;EAAgB,UAAU;CAAK;AACvE,CAAC"}

package/dist/recipes/separator.d.ts

@@ -5,13 +5,24 @@ declare const defaultSeparatorOrientation = "horizontal";
 declare const defaultSeparatorVariant = "filled";
 declare const defaultSeparatorTone = "accent";
 declare const separatorRecipe: (props?: ({
-  orientation?: "vertical" | "horizontal" | null | undefined;
+  orientation?: "horizontal" | "vertical" | 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"];
+declare const separatorAnatomy: {
+  readonly root: {
+    readonly part: "separator";
+    readonly recipe: (props?: ({
+      orientation?: "horizontal" | "vertical" | null | undefined;
+      tone?: "accent" | "success" | "warning" | "info" | "danger" | null | undefined;
+      variant?: "quiet" | "filled" | "fade" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type SeparatorOrientation, type SeparatorVariant, defaultSeparatorOrientation, defaultSeparatorTone, defaultSeparatorVariant, separatorOrientations, separatorRecipe, separatorTones, separatorVariants };
+export { type SeparatorOrientation, type SeparatorVariant, defaultSeparatorOrientation, defaultSeparatorTone, defaultSeparatorVariant, separatorAnatomy, separatorOrientations, separatorRecipe, separatorTones, separatorVariants };
 //# sourceMappingURL=separator.d.ts.map

package/dist/recipes/separator.js

@@ -1,6 +1,7 @@
-import { toneBlend } from "../tone.js";
+import { anatomy } from "../anatomy.js";
 import { fadingDownOf, fadingOf, filledDownOf, filledOf, ruleQuiet, ruleQuietDown } from "../parts/rule.js";
 import { defaultTone, tones } from "../parts/tone.js";
+import { toneBlend } from "../tone.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/separator.ts
 const defaultSeparatorOrientation = "horizontal";
@@ -80,7 +81,12 @@ const separatorVariants = [
 	"quiet"
 ];
 const separatorTones = tones;
+const separatorAnatomy = anatomy({ root: {
+	part: "separator",
+	recipe: separatorRecipe,
+	required: true
+} });
 //#endregion
-export { defaultSeparatorOrientation, defaultSeparatorTone, defaultSeparatorVariant, separatorOrientations, separatorRecipe, separatorTones, separatorVariants };
+export { defaultSeparatorOrientation, defaultSeparatorTone, defaultSeparatorVariant, separatorAnatomy, 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 {\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"}
+{"version":3,"file":"separator.js","names":[],"sources":["../../src/recipes/separator.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\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\nconst separatorAnatomy = anatomy({\n  root: { part: 'separator', recipe: separatorRecipe, required: true },\n})\n\nexport {\n  type SeparatorOrientation,\n  type SeparatorVariant,\n  defaultSeparatorOrientation,\n  defaultSeparatorTone,\n  defaultSeparatorVariant,\n  separatorAnatomy,\n  separatorOrientations,\n  separatorRecipe,\n  separatorTones,\n  separatorVariants,\n}\n"],"mappings":";;;;;;AAmBA,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;AAEvB,MAAM,mBAAmB,QAAQ,EAC/B,MAAM;CAAE,MAAM;CAAa,QAAQ;CAAiB,UAAU;AAAK,EACrE,CAAC"}

package/dist/recipes/sidebar.d.ts

@@ -27,7 +27,7 @@ declare const sidebarNavRecipe: (props?: import("class-variance-authority/types"
 declare const sidebarMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sidebarGroupRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sidebarItemRecipe: (props?: ({
-  level?: "top" | "child" | null | undefined;
+  level?: "child" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const sidebarIconRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sidebarLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
@@ -35,6 +35,132 @@ declare const sidebarChevronRecipe: (props?: import("class-variance-authority/ty
 declare const sidebarDotRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sidebarSubRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const sidebarFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarAnatomy: {
+  readonly brand: {
+    readonly part: "brand";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly brandStack: {
+    readonly part: "brand-stack";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly brandSubtitle: {
+    readonly part: "brand-subtitle";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly child: {
+    readonly part: "child";
+    readonly recipe: (props?: ({
+      level?: "child" | "top" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+  readonly dot: {
+    readonly part: "dot";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly foot: {
+    readonly part: "foot";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly head: {
+    readonly part: "head";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly item: {
+    readonly part: "item";
+    readonly recipe: (props?: ({
+      level?: "child" | "top" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: false;
+  };
+  readonly label: {
+    readonly part: "label";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly mark: {
+    readonly part: "mark";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly mobileBar: {
+    readonly part: "mobile-bar";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly mobileEyebrow: {
+    readonly part: "mobile-eyebrow";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly mobileHeadings: {
+    readonly part: "mobile-headings";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly mobileTitle: {
+    readonly part: "mobile-title";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly nav: {
+    readonly part: "nav";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly overlayBody: {
+    readonly part: "overlay-body";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly overlayBrand: {
+    readonly part: "overlay-brand";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly overlayHead: {
+    readonly part: "overlay-head";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly overlayScope: {
+    readonly part: "overlay-scope";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly root: {
+    readonly part: "sidebar";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly scope: {
+    readonly part: "scope";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: false;
+  };
+  readonly separator: {
+    readonly part: "separator";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly switch: {
+    readonly part: "switch";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly wordmark: {
+    readonly part: "wordmark";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { sidebarBrandRecipe, sidebarBrandStackRecipe, sidebarBrandSubtitleRecipe, sidebarChevronRecipe, sidebarDotRecipe, sidebarFootRecipe, sidebarGroupRecipe, sidebarHeadRecipe, sidebarIconRecipe, sidebarItemRecipe, sidebarLabelRecipe, sidebarMarkRecipe, sidebarMobileBarRecipe, sidebarMobileEyebrowRecipe, sidebarMobileHeadingsRecipe, sidebarMobileTitleRecipe, sidebarNavRecipe, sidebarOverlayBackdropRecipe, sidebarOverlayBodyRecipe, sidebarOverlayBrandRecipe, sidebarOverlayHeadRecipe, sidebarOverlayItemActive, sidebarOverlayNavRecipe, sidebarOverlayPanelRecipe, sidebarOverlayPositionerRecipe, sidebarOverlayScopeRecipe, sidebarOverlaySeparatorRecipe, sidebarRecipe, sidebarScopeRecipe, sidebarSubRecipe, sidebarSwitchRecipe, sidebarToggleRecipe, sidebarTravel, sidebarWordmarkRecipe };
+export { sidebarAnatomy, sidebarBrandRecipe, sidebarBrandStackRecipe, sidebarBrandSubtitleRecipe, sidebarChevronRecipe, sidebarDotRecipe, sidebarFootRecipe, sidebarGroupRecipe, sidebarHeadRecipe, sidebarIconRecipe, sidebarItemRecipe, sidebarLabelRecipe, sidebarMarkRecipe, sidebarMobileBarRecipe, sidebarMobileEyebrowRecipe, sidebarMobileHeadingsRecipe, sidebarMobileTitleRecipe, sidebarNavRecipe, sidebarOverlayBackdropRecipe, sidebarOverlayBodyRecipe, sidebarOverlayBrandRecipe, sidebarOverlayHeadRecipe, sidebarOverlayItemActive, sidebarOverlayNavRecipe, sidebarOverlayPanelRecipe, sidebarOverlayPositionerRecipe, sidebarOverlayScopeRecipe, sidebarOverlaySeparatorRecipe, sidebarRecipe, sidebarScopeRecipe, sidebarSubRecipe, sidebarSwitchRecipe, sidebarToggleRecipe, sidebarTravel, sidebarWordmarkRecipe };
 //# sourceMappingURL=sidebar.d.ts.map

package/dist/recipes/sidebar.js

@@ -1,7 +1,8 @@
+import { anatomy } from "../anatomy.js";
 import { controlInert, controlPress, controlReach } from "../parts/control.js";
 import { collapseMotion, drawerMotion, railCollapse, railMorph, scrimMirrorMotion } from "./motion.js";
-import { eyebrowLead } from "../parts/eyebrow.js";
 import { surfaceLifted, surfacePanel } from "../parts/surface.js";
+import { eyebrowLead } from "../parts/eyebrow.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/sidebar.ts
 const CHILD_INSET = "pl-11";
@@ -122,7 +123,129 @@ const sidebarDotRecipe = cva([
 ]);
 const sidebarSubRecipe = cva(["flex flex-col gap-1 pt-1", ...collapseMotion]);
 const sidebarFootRecipe = cva("relative mt-auto flex flex-none flex-col gap-1 px-3");
+const sidebarAnatomy = anatomy({
+	brand: {
+		part: "brand",
+		recipe: sidebarBrandRecipe,
+		required: true
+	},
+	brandStack: {
+		part: "brand-stack",
+		recipe: sidebarBrandStackRecipe,
+		required: true
+	},
+	brandSubtitle: {
+		part: "brand-subtitle",
+		recipe: sidebarBrandSubtitleRecipe,
+		required: false
+	},
+	child: {
+		part: "child",
+		recipe: sidebarItemRecipe,
+		required: false
+	},
+	dot: {
+		part: "dot",
+		recipe: sidebarDotRecipe,
+		required: false
+	},
+	foot: {
+		part: "foot",
+		recipe: sidebarFootRecipe,
+		required: true
+	},
+	head: {
+		part: "head",
+		recipe: sidebarHeadRecipe,
+		required: true
+	},
+	item: {
+		part: "item",
+		recipe: sidebarItemRecipe,
+		required: false
+	},
+	label: {
+		part: "label",
+		recipe: sidebarLabelRecipe,
+		required: true
+	},
+	mark: {
+		part: "mark",
+		recipe: sidebarMarkRecipe,
+		required: true
+	},
+	mobileBar: {
+		part: "mobile-bar",
+		recipe: sidebarMobileBarRecipe,
+		required: true
+	},
+	mobileEyebrow: {
+		part: "mobile-eyebrow",
+		recipe: sidebarMobileEyebrowRecipe,
+		required: false
+	},
+	mobileHeadings: {
+		part: "mobile-headings",
+		recipe: sidebarMobileHeadingsRecipe,
+		required: false
+	},
+	mobileTitle: {
+		part: "mobile-title",
+		recipe: sidebarMobileTitleRecipe,
+		required: false
+	},
+	nav: {
+		part: "nav",
+		recipe: sidebarNavRecipe,
+		required: true
+	},
+	overlayBody: {
+		part: "overlay-body",
+		recipe: sidebarOverlayBodyRecipe,
+		required: true
+	},
+	overlayBrand: {
+		part: "overlay-brand",
+		recipe: sidebarOverlayBrandRecipe,
+		required: true
+	},
+	overlayHead: {
+		part: "overlay-head",
+		recipe: sidebarOverlayHeadRecipe,
+		required: true
+	},
+	overlayScope: {
+		part: "overlay-scope",
+		recipe: sidebarOverlayScopeRecipe,
+		required: false
+	},
+	root: {
+		part: "sidebar",
+		recipe: sidebarRecipe,
+		required: true
+	},
+	scope: {
+		part: "scope",
+		recipe: sidebarScopeRecipe,
+		required: false
+	},
+	separator: {
+		part: "separator",
+		recipe: sidebarOverlaySeparatorRecipe,
+		required: true
+	},
+	switch: {
+		part: "switch",
+		recipe: sidebarSwitchRecipe,
+		required: true
+	},
+	wordmark: {
+		part: "wordmark",
+		recipe: sidebarWordmarkRecipe,
+		required: true
+	}
+});
 //#endregion
-export { sidebarBrandRecipe, sidebarBrandStackRecipe, sidebarBrandSubtitleRecipe, sidebarChevronRecipe, sidebarDotRecipe, sidebarFootRecipe, sidebarGroupRecipe, sidebarHeadRecipe, sidebarIconRecipe, sidebarItemRecipe, sidebarLabelRecipe, sidebarMarkRecipe, sidebarMobileBarRecipe, sidebarMobileEyebrowRecipe, sidebarMobileHeadingsRecipe, sidebarMobileTitleRecipe, sidebarNavRecipe, sidebarOverlayBackdropRecipe, sidebarOverlayBodyRecipe, sidebarOverlayBrandRecipe, sidebarOverlayHeadRecipe, sidebarOverlayItemActive, sidebarOverlayNavRecipe, sidebarOverlayPanelRecipe, sidebarOverlayPositionerRecipe, sidebarOverlayScopeRecipe, sidebarOverlaySeparatorRecipe, sidebarRecipe, sidebarScopeRecipe, sidebarSubRecipe, sidebarSwitchRecipe, sidebarToggleRecipe, sidebarTravel, sidebarWordmarkRecipe };
+export { sidebarAnatomy, sidebarBrandRecipe, sidebarBrandStackRecipe, sidebarBrandSubtitleRecipe, sidebarChevronRecipe, sidebarDotRecipe, sidebarFootRecipe, sidebarGroupRecipe, sidebarHeadRecipe, sidebarIconRecipe, sidebarItemRecipe, sidebarLabelRecipe, sidebarMarkRecipe, sidebarMobileBarRecipe, sidebarMobileEyebrowRecipe, sidebarMobileHeadingsRecipe, sidebarMobileTitleRecipe, sidebarNavRecipe, sidebarOverlayBackdropRecipe, sidebarOverlayBodyRecipe, sidebarOverlayBrandRecipe, sidebarOverlayHeadRecipe, sidebarOverlayItemActive, sidebarOverlayNavRecipe, sidebarOverlayPanelRecipe, sidebarOverlayPositionerRecipe, sidebarOverlayScopeRecipe, sidebarOverlaySeparatorRecipe, sidebarRecipe, sidebarScopeRecipe, sidebarSubRecipe, sidebarSwitchRecipe, sidebarToggleRecipe, sidebarTravel, sidebarWordmarkRecipe };
 
 //# sourceMappingURL=sidebar.js.map

package/dist/recipes/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/recipes/sidebar.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, controlReach } from '#parts/control'\nimport { eyebrowLead } from '#parts/eyebrow'\nimport { surfaceLifted, surfacePanel } from '#parts/surface'\n\nimport { collapseMotion, drawerMotion, railCollapse, railMorph, scrimMirrorMotion } from './motion'\n\nconst CHILD_INSET = 'pl-11'\n\nconst ROW_STRIDE = `calc(var(--spacing-tf-control-md) + var(--spacing))`\n\nconst RAIL_STRIDE = `calc(var(--spacing-tf-control-md) + var(--spacing))`\n\nconst sidebarTravel = (index: number, rail: boolean): string => {\n  const step = String(index)\n\n  if (rail) {\n    return `0 calc(${RAIL_STRIDE} * ${step})`\n  }\n  return `0 calc(${ROW_STRIDE} * ${step})`\n}\n\nconst MORPHS = railMorph\n\nconst ITEM = [\n  'group relative flex flex-none items-center rounded-tf-control',\n  'text-tf-body text-tf-muted',\n  'interactive:hovered:text-tf-fg aria-[current=page]:text-tf-on-accent',\n  'not-aria-[current=page]:interactive:hovered:bg-tf-panel-hi',\n  `cursor-pointer ${MORPHS}`,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n]\n\nconst sidebarRecipe = cva([\n  'sticky top-0 z-tf-dropdown hidden h-dvh min-h-0 flex-none flex-col gap-6 py-6 lg:flex',\n  'w-tf-sidebar data-rail:w-tf-rail',\n  'border-r border-tf-line-2 bg-tf-glass backdrop-blur-tf-glass',\n  'tf-icons font-tf-body text-tf-fg',\n  MORPHS,\n])\n\nconst sidebarScopeRecipe = cva('flex-none px-3')\n\nconst sidebarMobileBarRecipe = cva([\n  'fixed inset-x-0 top-0 z-tf-dropdown flex items-center gap-3 px-4 lg:hidden',\n  'h-tf-control-lg border-b border-tf-line-2 bg-tf-panel-2 backdrop-blur-tf-panel',\n  'tf-icons font-tf-body text-tf-fg',\n])\n\nconst sidebarMobileHeadingsRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst sidebarMobileEyebrowRecipe = cva(['truncate', eyebrowLead])\n\nconst sidebarMobileTitleRecipe = cva(\n  'truncate font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg',\n)\n\nconst sidebarOverlayBackdropRecipe = cva([\n  'fixed inset-0 z-tf-modal bg-tf-scrim backdrop-blur-tf-scrim',\n  ...scrimMirrorMotion,\n  'motion-reduce:animate-none',\n])\n\nconst sidebarOverlayPositionerRecipe = cva('fixed inset-0 z-tf-modal flex flex-col font-tf-body')\n\nconst sidebarOverlayPanelRecipe = cva([\n  ...surfacePanel,\n  ...surfaceLifted,\n  'flex h-full w-full flex-col overflow-hidden rounded-tf-none',\n  'text-tf-body-sm font-medium text-tf-fg',\n  ...drawerMotion,\n  'motion-reduce:animate-none',\n])\n\nconst sidebarOverlayHeadRecipe = cva(\n  'relative flex flex-none items-center gap-5 border-b border-tf-line-2 px-4 py-3',\n)\n\nconst sidebarOverlayBrandRecipe = cva([\n  'flex min-w-0 items-center gap-3',\n  '[&_svg]:size-tf-icon-solo-sm [&_svg]:shrink-0',\n])\n\nconst sidebarOverlayScopeRecipe = cva('ml-auto truncate text-tf-body-sm font-medium text-tf-fg')\n\nconst sidebarOverlayBodyRecipe = cva([\n  'flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4',\n  'tf-scroll-thin tf-scroll-faded',\n  '[--tf-fade-foot:calc(var(--spacing)*2)] [--tf-fade-head:calc(var(--spacing)*2)]',\n])\n\nconst sidebarOverlayNavRecipe = cva('flex flex-none flex-col gap-1')\n\nconst sidebarOverlaySeparatorRecipe = cva('h-px w-full flex-none bg-tf-line-2')\n\nconst sidebarOverlayItemActive =\n  'aria-[current=page]:bg-tf-blend aria-[current=page]:blend-tf-accent'\n\nconst sidebarHeadRecipe = cva(['flex flex-none items-center gap-3 px-3', MORPHS])\n\nconst sidebarBrandRecipe = cva([\n  'flex min-w-0 items-center gap-3 pl-3',\n  'in-data-rail:gap-0 in-data-rail:pl-4',\n  '[&_svg]:size-tf-icon-solo-sm [&_svg]:shrink-0',\n  MORPHS,\n])\n\nconst sidebarBrandStackRecipe = cva(['flex flex-col gap-px', railCollapse])\n\nconst sidebarWordmarkRecipe = cva(['truncate font-tf-display text-tf-lead tracking-tf-tight'])\n\nconst sidebarBrandSubtitleRecipe = cva('truncate text-tf-caption-sm text-tf-muted')\n\nconst sidebarToggleRecipe = cva('flex-none [&_svg]:size-tf-icon-solo-sm')\n\nconst sidebarSwitchRecipe = cva([\n  'flex flex-none items-center justify-end in-data-rail:pr-2',\n  MORPHS,\n])\n\nconst FADED = [\n  'tf-scroll-faded tf-scroll-thin',\n  '[--tf-fade-head:calc(var(--spacing)*2)] [--tf-fade-foot:calc(var(--spacing)*2)]',\n  'outline-hidden focused:outline-2 focused:-outline-offset-2 focused:outline-tf-accent-hi',\n].join(' ')\n\nconst sidebarNavRecipe = cva([\n  'relative flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-3 py-2',\n  FADED,\n])\n\nconst sidebarMarkRecipe = cva([\n  'pointer-events-none absolute inset-x-3 top-2 h-tf-control-md rounded-tf-control',\n  'in-data-rail:inset-x-4',\n  'bg-tf-blend blend-tf-accent',\n  `tf-slides-settle ${MORPHS}`,\n])\n\nconst sidebarGroupRecipe = cva('flex flex-none flex-col')\n\nconst sidebarItemRecipe = cva(\n  [\n    ...ITEM,\n    'h-tf-control-md min-h-tf-control-md w-full text-left',\n    '[&>svg]:size-tf-icon-sm [&>svg]:shrink-0',\n  ],\n  {\n    defaultVariants: { level: 'top' },\n    variants: {\n      level: {\n        child: `${CHILD_INSET} pr-3`,\n        top: [\n          'gap-3 px-3',\n          'in-data-rail:gap-0',\n          'in-data-rail:px-[calc((var(--spacing-tf-rail)-var(--spacing)*6-var(--spacing-tf-icon-md))/2)]',\n        ].join(' '),\n      },\n    },\n  },\n)\n\nconst sidebarIconRecipe = cva([\n  'relative inline-flex size-tf-icon-md flex-none [&_svg]:size-tf-icon-md',\n  '[&_svg]:shrink-0',\n  MORPHS,\n])\n\nconst sidebarLabelRecipe = cva(['truncate text-left tf-text-trim', railCollapse])\n\nconst sidebarChevronRecipe = cva([\n  'w-tf-icon-sm flex-none overflow-hidden in-data-rail:w-0 in-data-rail:opacity-0',\n  'group-aria-expanded:rotate-180',\n  MORPHS,\n])\n\nconst sidebarDotRecipe = cva([\n  'pointer-events-none absolute -right-1 -bottom-1',\n  'size-1 rounded-tf-pill bg-current opacity-0 in-data-rail:opacity-100',\n  MORPHS,\n])\n\nconst sidebarSubRecipe = cva(['flex flex-col gap-1 pt-1', ...collapseMotion])\n\nconst sidebarFootRecipe = cva('relative mt-auto flex flex-none flex-col gap-1 px-3')\n\nexport {\n  sidebarBrandRecipe,\n  sidebarBrandStackRecipe,\n  sidebarBrandSubtitleRecipe,\n  sidebarChevronRecipe,\n  sidebarDotRecipe,\n  sidebarFootRecipe,\n  sidebarGroupRecipe,\n  sidebarHeadRecipe,\n  sidebarIconRecipe,\n  sidebarItemRecipe,\n  sidebarLabelRecipe,\n  sidebarMarkRecipe,\n  sidebarMobileBarRecipe,\n  sidebarMobileEyebrowRecipe,\n  sidebarMobileHeadingsRecipe,\n  sidebarMobileTitleRecipe,\n  sidebarNavRecipe,\n  sidebarOverlayBackdropRecipe,\n  sidebarOverlayBodyRecipe,\n  sidebarOverlayBrandRecipe,\n  sidebarOverlayHeadRecipe,\n  sidebarOverlayItemActive,\n  sidebarOverlayNavRecipe,\n  sidebarOverlayPanelRecipe,\n  sidebarOverlayPositionerRecipe,\n  sidebarOverlayScopeRecipe,\n  sidebarOverlaySeparatorRecipe,\n  sidebarRecipe,\n  sidebarScopeRecipe,\n  sidebarSubRecipe,\n  sidebarSwitchRecipe,\n  sidebarToggleRecipe,\n  sidebarTravel,\n  sidebarWordmarkRecipe,\n}\n"],"mappings":";;;;;;AAQA,MAAM,cAAc;AAEpB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAEpB,MAAM,iBAAiB,OAAe,SAA0B;CAC9D,MAAM,OAAO,OAAO,KAAK;CAEzB,IAAI,MACF,OAAO,UAAU,YAAY,KAAK,KAAK;CAEzC,OAAO,UAAU,WAAW,KAAK,KAAK;AACxC;AAEA,MAAM,SAAS;AAEf,MAAM,OAAO;CACX;CACA;CACA;CACA;CACA,kBAAkB;CAClB,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,MAAM,gBAAgB,IAAI;CACxB;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,gBAAgB;AAE/C,MAAM,yBAAyB,IAAI;CACjC;CACA;CACA;AACF,CAAC;AAED,MAAM,8BAA8B,IAAI,oCAAoC;AAE5E,MAAM,6BAA6B,IAAI,CAAC,YAAY,WAAW,CAAC;AAEhE,MAAM,2BAA2B,IAC/B,4EACF;AAEA,MAAM,+BAA+B,IAAI;CACvC;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,iCAAiC,IAAI,qDAAqD;AAEhG,MAAM,4BAA4B,IAAI;CACpC,GAAG;CACH,GAAG;CACH;CACA;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,2BAA2B,IAC/B,gFACF;AAEA,MAAM,4BAA4B,IAAI,CACpC,mCACA,+CACF,CAAC;AAED,MAAM,4BAA4B,IAAI,yDAAyD;AAE/F,MAAM,2BAA2B,IAAI;CACnC;CACA;CACA;AACF,CAAC;AAED,MAAM,0BAA0B,IAAI,+BAA+B;AAEnE,MAAM,gCAAgC,IAAI,oCAAoC;AAE9E,MAAM,2BACJ;AAEF,MAAM,oBAAoB,IAAI,CAAC,0CAA0C,MAAM,CAAC;AAEhF,MAAM,qBAAqB,IAAI;CAC7B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,0BAA0B,IAAI,CAAC,wBAAwB,YAAY,CAAC;AAE1E,MAAM,wBAAwB,IAAI,CAAC,yDAAyD,CAAC;AAE7F,MAAM,6BAA6B,IAAI,2CAA2C;AAElF,MAAM,sBAAsB,IAAI,wCAAwC;AAExE,MAAM,sBAAsB,IAAI,CAC9B,6DACA,MACF,CAAC;AAED,MAAM,QAAQ;CACZ;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,mBAAmB,IAAI,CAC3B,yEACA,KACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA,oBAAoB;AACtB,CAAC;AAED,MAAM,qBAAqB,IAAI,yBAAyB;AAExD,MAAM,oBAAoB,IACxB;CACE,GAAG;CACH;CACA;AACF,GACA;CACE,iBAAiB,EAAE,OAAO,MAAM;CAChC,UAAU,EACR,OAAO;EACL,OAAO,GAAG,YAAY;EACtB,KAAK;GACH;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ,EACF;AACF,CACF;AAEA,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAAC,mCAAmC,YAAY,CAAC;AAEhF,MAAM,uBAAuB,IAAI;CAC/B;CACA;CACA;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,CAAC,4BAA4B,GAAG,cAAc,CAAC;AAE5E,MAAM,oBAAoB,IAAI,qDAAqD"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/recipes/sidebar.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\nimport { controlInert, controlPress, controlReach } from '#parts/control'\nimport { eyebrowLead } from '#parts/eyebrow'\nimport { surfaceLifted, surfacePanel } from '#parts/surface'\n\nimport { collapseMotion, drawerMotion, railCollapse, railMorph, scrimMirrorMotion } from './motion'\n\nconst CHILD_INSET = 'pl-11'\n\nconst ROW_STRIDE = `calc(var(--spacing-tf-control-md) + var(--spacing))`\n\nconst RAIL_STRIDE = `calc(var(--spacing-tf-control-md) + var(--spacing))`\n\nconst sidebarTravel = (index: number, rail: boolean): string => {\n  const step = String(index)\n\n  if (rail) {\n    return `0 calc(${RAIL_STRIDE} * ${step})`\n  }\n  return `0 calc(${ROW_STRIDE} * ${step})`\n}\n\nconst MORPHS = railMorph\n\nconst ITEM = [\n  'group relative flex flex-none items-center rounded-tf-control',\n  'text-tf-body text-tf-muted',\n  'interactive:hovered:text-tf-fg aria-[current=page]:text-tf-on-accent',\n  'not-aria-[current=page]:interactive:hovered:bg-tf-panel-hi',\n  `cursor-pointer ${MORPHS}`,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n]\n\nconst sidebarRecipe = cva([\n  'sticky top-0 z-tf-dropdown hidden h-dvh min-h-0 flex-none flex-col gap-6 py-6 lg:flex',\n  'w-tf-sidebar data-rail:w-tf-rail',\n  'border-r border-tf-line-2 bg-tf-glass backdrop-blur-tf-glass',\n  'tf-icons font-tf-body text-tf-fg',\n  MORPHS,\n])\n\nconst sidebarScopeRecipe = cva('flex-none px-3')\n\nconst sidebarMobileBarRecipe = cva([\n  'fixed inset-x-0 top-0 z-tf-dropdown flex items-center gap-3 px-4 lg:hidden',\n  'h-tf-control-lg border-b border-tf-line-2 bg-tf-panel-2 backdrop-blur-tf-panel',\n  'tf-icons font-tf-body text-tf-fg',\n])\n\nconst sidebarMobileHeadingsRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst sidebarMobileEyebrowRecipe = cva(['truncate', eyebrowLead])\n\nconst sidebarMobileTitleRecipe = cva(\n  'truncate font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg',\n)\n\nconst sidebarOverlayBackdropRecipe = cva([\n  'fixed inset-0 z-tf-modal bg-tf-scrim backdrop-blur-tf-scrim',\n  ...scrimMirrorMotion,\n  'motion-reduce:animate-none',\n])\n\nconst sidebarOverlayPositionerRecipe = cva('fixed inset-0 z-tf-modal flex flex-col font-tf-body')\n\nconst sidebarOverlayPanelRecipe = cva([\n  ...surfacePanel,\n  ...surfaceLifted,\n  'flex h-full w-full flex-col overflow-hidden rounded-tf-none',\n  'text-tf-body-sm font-medium text-tf-fg',\n  ...drawerMotion,\n  'motion-reduce:animate-none',\n])\n\nconst sidebarOverlayHeadRecipe = cva(\n  'relative flex flex-none items-center gap-5 border-b border-tf-line-2 px-4 py-3',\n)\n\nconst sidebarOverlayBrandRecipe = cva([\n  'flex min-w-0 items-center gap-3',\n  '[&_svg]:size-tf-icon-solo-sm [&_svg]:shrink-0',\n])\n\nconst sidebarOverlayScopeRecipe = cva('ml-auto truncate text-tf-body-sm font-medium text-tf-fg')\n\nconst sidebarOverlayBodyRecipe = cva([\n  'flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4',\n  'tf-scroll-thin tf-scroll-faded',\n  '[--tf-fade-foot:calc(var(--spacing)*2)] [--tf-fade-head:calc(var(--spacing)*2)]',\n])\n\nconst sidebarOverlayNavRecipe = cva('flex flex-none flex-col gap-1')\n\nconst sidebarOverlaySeparatorRecipe = cva('h-px w-full flex-none bg-tf-line-2')\n\nconst sidebarOverlayItemActive =\n  'aria-[current=page]:bg-tf-blend aria-[current=page]:blend-tf-accent'\n\nconst sidebarHeadRecipe = cva(['flex flex-none items-center gap-3 px-3', MORPHS])\n\nconst sidebarBrandRecipe = cva([\n  'flex min-w-0 items-center gap-3 pl-3',\n  'in-data-rail:gap-0 in-data-rail:pl-4',\n  '[&_svg]:size-tf-icon-solo-sm [&_svg]:shrink-0',\n  MORPHS,\n])\n\nconst sidebarBrandStackRecipe = cva(['flex flex-col gap-px', railCollapse])\n\nconst sidebarWordmarkRecipe = cva(['truncate font-tf-display text-tf-lead tracking-tf-tight'])\n\nconst sidebarBrandSubtitleRecipe = cva('truncate text-tf-caption-sm text-tf-muted')\n\nconst sidebarToggleRecipe = cva('flex-none [&_svg]:size-tf-icon-solo-sm')\n\nconst sidebarSwitchRecipe = cva([\n  'flex flex-none items-center justify-end in-data-rail:pr-2',\n  MORPHS,\n])\n\nconst FADED = [\n  'tf-scroll-faded tf-scroll-thin',\n  '[--tf-fade-head:calc(var(--spacing)*2)] [--tf-fade-foot:calc(var(--spacing)*2)]',\n  'outline-hidden focused:outline-2 focused:-outline-offset-2 focused:outline-tf-accent-hi',\n].join(' ')\n\nconst sidebarNavRecipe = cva([\n  'relative flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-3 py-2',\n  FADED,\n])\n\nconst sidebarMarkRecipe = cva([\n  'pointer-events-none absolute inset-x-3 top-2 h-tf-control-md rounded-tf-control',\n  'in-data-rail:inset-x-4',\n  'bg-tf-blend blend-tf-accent',\n  `tf-slides-settle ${MORPHS}`,\n])\n\nconst sidebarGroupRecipe = cva('flex flex-none flex-col')\n\nconst sidebarItemRecipe = cva(\n  [\n    ...ITEM,\n    'h-tf-control-md min-h-tf-control-md w-full text-left',\n    '[&>svg]:size-tf-icon-sm [&>svg]:shrink-0',\n  ],\n  {\n    defaultVariants: { level: 'top' },\n    variants: {\n      level: {\n        child: `${CHILD_INSET} pr-3`,\n        top: [\n          'gap-3 px-3',\n          'in-data-rail:gap-0',\n          'in-data-rail:px-[calc((var(--spacing-tf-rail)-var(--spacing)*6-var(--spacing-tf-icon-md))/2)]',\n        ].join(' '),\n      },\n    },\n  },\n)\n\nconst sidebarIconRecipe = cva([\n  'relative inline-flex size-tf-icon-md flex-none [&_svg]:size-tf-icon-md',\n  '[&_svg]:shrink-0',\n  MORPHS,\n])\n\nconst sidebarLabelRecipe = cva(['truncate text-left tf-text-trim', railCollapse])\n\nconst sidebarChevronRecipe = cva([\n  'w-tf-icon-sm flex-none overflow-hidden in-data-rail:w-0 in-data-rail:opacity-0',\n  'group-aria-expanded:rotate-180',\n  MORPHS,\n])\n\nconst sidebarDotRecipe = cva([\n  'pointer-events-none absolute -right-1 -bottom-1',\n  'size-1 rounded-tf-pill bg-current opacity-0 in-data-rail:opacity-100',\n  MORPHS,\n])\n\nconst sidebarSubRecipe = cva(['flex flex-col gap-1 pt-1', ...collapseMotion])\n\nconst sidebarFootRecipe = cva('relative mt-auto flex flex-none flex-col gap-1 px-3')\n\nconst sidebarAnatomy = anatomy({\n  brand: { part: 'brand', recipe: sidebarBrandRecipe, required: true },\n  brandStack: { part: 'brand-stack', recipe: sidebarBrandStackRecipe, required: true },\n  brandSubtitle: { part: 'brand-subtitle', recipe: sidebarBrandSubtitleRecipe, required: false },\n  child: { part: 'child', recipe: sidebarItemRecipe, required: false },\n  dot: { part: 'dot', recipe: sidebarDotRecipe, required: false },\n  foot: { part: 'foot', recipe: sidebarFootRecipe, required: true },\n  head: { part: 'head', recipe: sidebarHeadRecipe, required: true },\n  item: { part: 'item', recipe: sidebarItemRecipe, required: false },\n  label: { part: 'label', recipe: sidebarLabelRecipe, required: true },\n  mark: { part: 'mark', recipe: sidebarMarkRecipe, required: true },\n  mobileBar: { part: 'mobile-bar', recipe: sidebarMobileBarRecipe, required: true },\n  mobileEyebrow: { part: 'mobile-eyebrow', recipe: sidebarMobileEyebrowRecipe, required: false },\n  mobileHeadings: {\n    part: 'mobile-headings',\n    recipe: sidebarMobileHeadingsRecipe,\n    required: false,\n  },\n  mobileTitle: { part: 'mobile-title', recipe: sidebarMobileTitleRecipe, required: false },\n  nav: { part: 'nav', recipe: sidebarNavRecipe, required: true },\n  overlayBody: { part: 'overlay-body', recipe: sidebarOverlayBodyRecipe, required: true },\n  overlayBrand: { part: 'overlay-brand', recipe: sidebarOverlayBrandRecipe, required: true },\n  overlayHead: { part: 'overlay-head', recipe: sidebarOverlayHeadRecipe, required: true },\n  overlayScope: { part: 'overlay-scope', recipe: sidebarOverlayScopeRecipe, required: false },\n  root: { part: 'sidebar', recipe: sidebarRecipe, required: true },\n  scope: { part: 'scope', recipe: sidebarScopeRecipe, required: false },\n  separator: { part: 'separator', recipe: sidebarOverlaySeparatorRecipe, required: true },\n  switch: { part: 'switch', recipe: sidebarSwitchRecipe, required: true },\n  wordmark: { part: 'wordmark', recipe: sidebarWordmarkRecipe, required: true },\n})\n\nexport {\n  sidebarAnatomy,\n  sidebarBrandRecipe,\n  sidebarBrandStackRecipe,\n  sidebarBrandSubtitleRecipe,\n  sidebarChevronRecipe,\n  sidebarDotRecipe,\n  sidebarFootRecipe,\n  sidebarGroupRecipe,\n  sidebarHeadRecipe,\n  sidebarIconRecipe,\n  sidebarItemRecipe,\n  sidebarLabelRecipe,\n  sidebarMarkRecipe,\n  sidebarMobileBarRecipe,\n  sidebarMobileEyebrowRecipe,\n  sidebarMobileHeadingsRecipe,\n  sidebarMobileTitleRecipe,\n  sidebarNavRecipe,\n  sidebarOverlayBackdropRecipe,\n  sidebarOverlayBodyRecipe,\n  sidebarOverlayBrandRecipe,\n  sidebarOverlayHeadRecipe,\n  sidebarOverlayItemActive,\n  sidebarOverlayNavRecipe,\n  sidebarOverlayPanelRecipe,\n  sidebarOverlayPositionerRecipe,\n  sidebarOverlayScopeRecipe,\n  sidebarOverlaySeparatorRecipe,\n  sidebarRecipe,\n  sidebarScopeRecipe,\n  sidebarSubRecipe,\n  sidebarSwitchRecipe,\n  sidebarToggleRecipe,\n  sidebarTravel,\n  sidebarWordmarkRecipe,\n}\n"],"mappings":"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"}

package/dist/recipes/sky.d.ts

@@ -15,6 +15,36 @@ declare const starRecipe: (props?: import("class-variance-authority/types").Clas
 declare const contentRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const starLayers: (count: number, seed: string) => StarLayer[];
 declare const cloudDrift: (seed: string) => Cloud;
+declare const skyAnatomy: {
+  readonly content: {
+    readonly part: "content";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly nebula: {
+    readonly part: "nebula";
+    readonly recipe: (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;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "sky";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly star: {
+    readonly part: "star";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly stars: {
+    readonly part: "stars";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { type Cloud, type StarLayer, cloudDrift, contentRecipe, driftRecipe, skyRecipe, starLayers, starRecipe };
+export { type Cloud, type StarLayer, cloudDrift, contentRecipe, driftRecipe, skyAnatomy, skyRecipe, starLayers, starRecipe };
 //# sourceMappingURL=sky.d.ts.map

package/dist/recipes/sky.js

@@ -1,3 +1,5 @@
+import { anatomy } from "../anatomy.js";
+import { nebulaRecipe } from "./nebula.js";
 import { cva } from "class-variance-authority";
 //#region src/recipes/sky.ts
 const DIM = 1;
@@ -121,7 +123,34 @@ const cloudDrift = (seed) => {
 		shift: `${String(across)}% ${String(down)}%`
 	};
 };
+const skyAnatomy = anatomy({
+	content: {
+		part: "content",
+		recipe: contentRecipe,
+		required: true
+	},
+	nebula: {
+		part: "nebula",
+		recipe: nebulaRecipe,
+		required: true
+	},
+	root: {
+		part: "sky",
+		recipe: skyRecipe,
+		required: true
+	},
+	star: {
+		part: "star",
+		recipe: starRecipe,
+		required: true
+	},
+	stars: {
+		part: "stars",
+		recipe: driftRecipe,
+		required: true
+	}
+});
 //#endregion
-export { cloudDrift, contentRecipe, driftRecipe, skyRecipe, starLayers, starRecipe };
+export { cloudDrift, contentRecipe, driftRecipe, skyAnatomy, skyRecipe, starLayers, starRecipe };
 
 //# sourceMappingURL=sky.js.map

package/dist/recipes/sky.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky.js","names":[],"sources":["../../src/recipes/sky.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst DIM = 1\nconst MID = 2\nconst BRIGHT = 3\n\nconst FAINT = 28\nconst DUSKY = 40\nconst STEADY = 55\nconst CLEAR = 70\nconst KEEN = 95\n\nconst STAR_PX = [DIM, DIM, MID, MID, BRIGHT] as const\nconst STAR_GLOW = [FAINT, DUSKY, STEADY, CLEAR, KEEN] as const\n\nconst SEED_BASE = 7\nconst SEED_STEP = 131\nconst LEHMER_MULTIPLIER = 16_807\nconst LEHMER_MODULUS = 2_147_483_647\n\nconst FIRST = 0\nconst ORIGIN = 0\nconst ONE = 1\nconst EDGE = 4\nconst FIELD = 92\nconst CLOUD_SHIFT = 26\nconst HALF = 0.5\n\nconst LAYERS = 4\n\nconst HALO_AT = CLEAR\n\nconst HALO_SCALE = 5\n\nconst HALO_GLOW = 7\n\nconst CORE_EDGE = 99\n\ninterface Speck {\n  across: number\n  down: number\n  glow: number\n  px: number\n}\n\ninterface StarLayer {\n  delay: string\n  image: string\n  position: string\n  size: string\n}\n\ninterface Cloud {\n  delay: string\n  shift: string\n}\n\nconst skyRecipe = cva([\n  'relative isolate overflow-hidden',\n  'rounded-tf-card bg-tf-bg',\n  'font-tf-body text-tf-fg',\n])\n\nconst driftRecipe = cva([\n  'pointer-events-none absolute -inset-1/4',\n  '[rotate:var(--tf-sweep)] tf-turning',\n  '[animation-duration:calc(var(--tf-sweep-duration)*45)]',\n])\n\nconst starRecipe = cva('pointer-events-none absolute inset-0 tf-twinkling bg-no-repeat')\n\nconst contentRecipe = cva('relative')\n\nconst hashOf = (seed: string): number => {\n  let value = SEED_BASE\n\n  for (const letter of seed) {\n    value = (value * SEED_STEP + (letter.codePointAt(FIRST) ?? ORIGIN)) % LEHMER_MODULUS\n  }\n  return value + ONE\n}\n\nconst streamFrom = (seed: string): (() => number) => {\n  let state = hashOf(seed)\n\n  return () => {\n    state = (state * LEHMER_MULTIPLIER) % LEHMER_MODULUS\n    return state / LEHMER_MODULUS\n  }\n}\n\nconst pick = <Value>(choices: readonly Value[], roll: number, fallback: Value): Value =>\n  choices[Math.floor(roll * choices.length)] ?? fallback\n\nconst glowOf = (strength: number): string =>\n  `color-mix(in oklab, var(--color-tf-fg) ${String(strength)}%, transparent)`\n\nconst circleOf = (strength: number): string => {\n  const ink = glowOf(strength)\n\n  return `radial-gradient(circle closest-side, ${ink} 0, ${ink} ${String(CORE_EDGE)}%, transparent 100%)`\n}\n\nconst haloOf = (strength: number): string => {\n  const ink = glowOf(strength)\n\n  return `radial-gradient(circle closest-side, ${ink} 0, transparent 100%)`\n}\n\nconst speckFrom = (roll: () => number): Speck => {\n  const step = roll()\n\n  return {\n    across: EDGE + roll() * FIELD,\n    down: EDGE + roll() * FIELD,\n    glow: pick(STAR_GLOW, step, FAINT),\n    px: pick(STAR_PX, step, DIM),\n  }\n}\n\nconst spotOf = (speck: Speck): string => `${String(speck.across)}% ${String(speck.down)}%`\n\nconst sizeOf = (across: number): string => `${String(across)}px ${String(across)}px`\n\ninterface Drawing {\n  images: string[]\n  positions: string[]\n  sizes: string[]\n}\n\nconst draw = (sheet: Drawing, speck: Speck): void => {\n  if (speck.glow >= HALO_AT) {\n    sheet.images.push(haloOf(HALO_GLOW))\n    sheet.positions.push(spotOf(speck))\n    sheet.sizes.push(sizeOf(speck.px * HALO_SCALE))\n  }\n  sheet.images.push(circleOf(speck.glow))\n  sheet.positions.push(spotOf(speck))\n  sheet.sizes.push(sizeOf(speck.px))\n}\n\nconst starLayers = (count: number, seed: string): StarLayer[] => {\n  const roll = streamFrom(seed)\n  const sheets: Drawing[] = Array.from({ length: LAYERS }, () => ({\n    images: [],\n    positions: [],\n    sizes: [],\n  }))\n\n  for (let drawn = ORIGIN; drawn < count; drawn += ONE) {\n    const speck = speckFrom(roll)\n    const sheet = sheets[Math.floor(roll() * LAYERS)] ?? sheets[FIRST]\n\n    if (sheet) {\n      draw(sheet, speck)\n    }\n  }\n  return sheets.map((sheet, index) => ({\n    delay: `calc(var(--tf-twinkle-duration) * -${String(index / LAYERS)})`,\n    image: sheet.images.join(', '),\n    position: sheet.positions.join(', '),\n    size: sheet.sizes.join(', '),\n  }))\n}\n\nconst cloudDrift = (seed: string): Cloud => {\n  const roll = streamFrom(`cloud:${seed}`)\n  const turn = roll()\n  const across = (roll() - HALF) * CLOUD_SHIFT\n  const down = (roll() - HALF) * CLOUD_SHIFT\n\n  return {\n    delay: `calc(var(--tf-sweep-duration) * -${String(turn)})`,\n    shift: `${String(across)}% ${String(down)}%`,\n  }\n}\n\nexport {\n  type Cloud,\n  type StarLayer,\n  cloudDrift,\n  contentRecipe,\n  driftRecipe,\n  skyRecipe,\n  starLayers,\n  starRecipe,\n}\n"],"mappings":"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"}
+{"version":3,"file":"sky.js","names":[],"sources":["../../src/recipes/sky.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { anatomy } from '#anatomy'\n\nimport { nebulaRecipe } from './nebula'\n\nconst DIM = 1\nconst MID = 2\nconst BRIGHT = 3\n\nconst FAINT = 28\nconst DUSKY = 40\nconst STEADY = 55\nconst CLEAR = 70\nconst KEEN = 95\n\nconst STAR_PX = [DIM, DIM, MID, MID, BRIGHT] as const\nconst STAR_GLOW = [FAINT, DUSKY, STEADY, CLEAR, KEEN] as const\n\nconst SEED_BASE = 7\nconst SEED_STEP = 131\nconst LEHMER_MULTIPLIER = 16_807\nconst LEHMER_MODULUS = 2_147_483_647\n\nconst FIRST = 0\nconst ORIGIN = 0\nconst ONE = 1\nconst EDGE = 4\nconst FIELD = 92\nconst CLOUD_SHIFT = 26\nconst HALF = 0.5\n\nconst LAYERS = 4\n\nconst HALO_AT = CLEAR\n\nconst HALO_SCALE = 5\n\nconst HALO_GLOW = 7\n\nconst CORE_EDGE = 99\n\ninterface Speck {\n  across: number\n  down: number\n  glow: number\n  px: number\n}\n\ninterface StarLayer {\n  delay: string\n  image: string\n  position: string\n  size: string\n}\n\ninterface Cloud {\n  delay: string\n  shift: string\n}\n\nconst skyRecipe = cva([\n  'relative isolate overflow-hidden',\n  'rounded-tf-card bg-tf-bg',\n  'font-tf-body text-tf-fg',\n])\n\nconst driftRecipe = cva([\n  'pointer-events-none absolute -inset-1/4',\n  '[rotate:var(--tf-sweep)] tf-turning',\n  '[animation-duration:calc(var(--tf-sweep-duration)*45)]',\n])\n\nconst starRecipe = cva('pointer-events-none absolute inset-0 tf-twinkling bg-no-repeat')\n\nconst contentRecipe = cva('relative')\n\nconst hashOf = (seed: string): number => {\n  let value = SEED_BASE\n\n  for (const letter of seed) {\n    value = (value * SEED_STEP + (letter.codePointAt(FIRST) ?? ORIGIN)) % LEHMER_MODULUS\n  }\n  return value + ONE\n}\n\nconst streamFrom = (seed: string): (() => number) => {\n  let state = hashOf(seed)\n\n  return () => {\n    state = (state * LEHMER_MULTIPLIER) % LEHMER_MODULUS\n    return state / LEHMER_MODULUS\n  }\n}\n\nconst pick = <Value>(choices: readonly Value[], roll: number, fallback: Value): Value =>\n  choices[Math.floor(roll * choices.length)] ?? fallback\n\nconst glowOf = (strength: number): string =>\n  `color-mix(in oklab, var(--color-tf-fg) ${String(strength)}%, transparent)`\n\nconst circleOf = (strength: number): string => {\n  const ink = glowOf(strength)\n\n  return `radial-gradient(circle closest-side, ${ink} 0, ${ink} ${String(CORE_EDGE)}%, transparent 100%)`\n}\n\nconst haloOf = (strength: number): string => {\n  const ink = glowOf(strength)\n\n  return `radial-gradient(circle closest-side, ${ink} 0, transparent 100%)`\n}\n\nconst speckFrom = (roll: () => number): Speck => {\n  const step = roll()\n\n  return {\n    across: EDGE + roll() * FIELD,\n    down: EDGE + roll() * FIELD,\n    glow: pick(STAR_GLOW, step, FAINT),\n    px: pick(STAR_PX, step, DIM),\n  }\n}\n\nconst spotOf = (speck: Speck): string => `${String(speck.across)}% ${String(speck.down)}%`\n\nconst sizeOf = (across: number): string => `${String(across)}px ${String(across)}px`\n\ninterface Drawing {\n  images: string[]\n  positions: string[]\n  sizes: string[]\n}\n\nconst draw = (sheet: Drawing, speck: Speck): void => {\n  if (speck.glow >= HALO_AT) {\n    sheet.images.push(haloOf(HALO_GLOW))\n    sheet.positions.push(spotOf(speck))\n    sheet.sizes.push(sizeOf(speck.px * HALO_SCALE))\n  }\n  sheet.images.push(circleOf(speck.glow))\n  sheet.positions.push(spotOf(speck))\n  sheet.sizes.push(sizeOf(speck.px))\n}\n\nconst starLayers = (count: number, seed: string): StarLayer[] => {\n  const roll = streamFrom(seed)\n  const sheets: Drawing[] = Array.from({ length: LAYERS }, () => ({\n    images: [],\n    positions: [],\n    sizes: [],\n  }))\n\n  for (let drawn = ORIGIN; drawn < count; drawn += ONE) {\n    const speck = speckFrom(roll)\n    const sheet = sheets[Math.floor(roll() * LAYERS)] ?? sheets[FIRST]\n\n    if (sheet) {\n      draw(sheet, speck)\n    }\n  }\n  return sheets.map((sheet, index) => ({\n    delay: `calc(var(--tf-twinkle-duration) * -${String(index / LAYERS)})`,\n    image: sheet.images.join(', '),\n    position: sheet.positions.join(', '),\n    size: sheet.sizes.join(', '),\n  }))\n}\n\nconst cloudDrift = (seed: string): Cloud => {\n  const roll = streamFrom(`cloud:${seed}`)\n  const turn = roll()\n  const across = (roll() - HALF) * CLOUD_SHIFT\n  const down = (roll() - HALF) * CLOUD_SHIFT\n\n  return {\n    delay: `calc(var(--tf-sweep-duration) * -${String(turn)})`,\n    shift: `${String(across)}% ${String(down)}%`,\n  }\n}\n\nconst skyAnatomy = anatomy({\n  content: { part: 'content', recipe: contentRecipe, required: true },\n  nebula: { part: 'nebula', recipe: nebulaRecipe, required: true },\n  root: { part: 'sky', recipe: skyRecipe, required: true },\n  star: { part: 'star', recipe: starRecipe, required: true },\n  stars: { part: 'stars', recipe: driftRecipe, required: true },\n})\n\nexport {\n  type Cloud,\n  type StarLayer,\n  cloudDrift,\n  contentRecipe,\n  driftRecipe,\n  skyAnatomy,\n  skyRecipe,\n  starLayers,\n  starRecipe,\n}\n"],"mappings":"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"}

package/dist/recipes/slider.d.ts

@@ -17,6 +17,20 @@ declare const sliderHintRecipe: (props?: ({
   invalid?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const sliderBoundsRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sliderAnatomy: {
+  readonly bounds: {
+    readonly part: "bounds";
+    readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+    readonly required: true;
+  };
+  readonly root: {
+    readonly part: "slider";
+    readonly recipe: (props?: ({
+      fullWidth?: boolean | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+    readonly required: true;
+  };
+};
 //#endregion
-export { sliderBoundsRecipe, sliderControlRecipe, sliderFootRecipe, sliderHeadRecipe, sliderHintRecipe, sliderKnobSize, sliderLabelRecipe, sliderNotchRecipe, sliderNotchesRecipe, sliderRangeRecipe, sliderRecipe, sliderThumbRecipe, sliderTrackRecipe, sliderValueRecipe };
+export { sliderAnatomy, sliderBoundsRecipe, sliderControlRecipe, sliderFootRecipe, sliderHeadRecipe, sliderHintRecipe, sliderKnobSize, sliderLabelRecipe, sliderNotchRecipe, sliderNotchesRecipe, sliderRangeRecipe, sliderRecipe, sliderThumbRecipe, sliderTrackRecipe, sliderValueRecipe };
 //# sourceMappingURL=slider.d.ts.map