@techfides/ui-library-design 0.1.0

package/dist/recipes/radioGroup.js

@@ -0,0 +1,68 @@
+import { defaultMarkPlate } from "../mark.js";
+import { toneBlend } from "../tone.js";
+import { defaultTone, tones } from "../parts/tone.js";
+import { markBox, markGroup, markPlate, markPress, markRow, markStack, markTitle } from "../parts/mark.js";
+import { eyebrowQuiet } from "../parts/eyebrow.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/radioGroup.ts
+const radioAccents = tones;
+const defaultRadioAccent = defaultTone;
+const radioGroupRecipe = cva([markGroup, "font-tf-body"]);
+const radioGroupLabelRecipe = cva([
+	`text-tf-caption-sm ${eyebrowQuiet}`,
+	"px-3 pb-1 font-medium",
+	"**:data-[part=required-indicator]:text-tf-danger-hi"
+]);
+const radioRecipe = cva([...markRow, "justify-between gap-6"], {
+	defaultVariants: { plate: defaultMarkPlate },
+	variants: { plate: {
+		bare: markPlate.bare,
+		full: `${markPlate.full} not-data-[state=checked]:not-data-readonly:interactive:hovered:bg-tf-panel-hi`,
+		snug: `${markPlate.snug} not-data-[state=checked]:not-data-readonly:interactive:hovered:bg-tf-panel-hi`
+	} }
+});
+const radioIndicatorRecipe = cva([
+	"pointer-events-none left-0 h-(--height) w-(--width)",
+	"rounded-tf-block tf-tinted data-disabled:opacity-50",
+	"[--transition-duration:var(--tf-duration-2)]",
+	"[--transition-timing-function:var(--ease-tf-glide)]"
+], {
+	compoundVariants: [{
+		class: toneBlend.danger,
+		invalid: true
+	}],
+	defaultVariants: {
+		accent: defaultRadioAccent,
+		invalid: false
+	},
+	variants: {
+		accent: toneBlend,
+		invalid: {
+			false: "",
+			true: ""
+		}
+	}
+});
+const radioLeadRecipe = cva("flex min-w-0 items-center gap-3");
+const radioControlRecipe = cva([
+	...markBox,
+	"rounded-tf-pill bg-tf-sunken",
+	"not-data-readonly:interactive:hovered:bg-tf-sunken-hi",
+	"data-[state=checked]:tf-mark-lit",
+	"data-[state=checked]:**:data-[part=dot]:scale-100",
+	"data-invalid:blend-tf-danger data-invalid:tf-mark-failed",
+	markPress
+], {
+	defaultVariants: { accent: defaultRadioAccent },
+	variants: { accent: toneBlend }
+});
+const radioDotRecipe = cva(["block size-tf-mark-dot rounded-tf-pill bg-tf-blend", "scale-0 tf-moves-spring tf-transition motion-reduce:transition-none"]);
+const radioLabelRecipe = cva(markStack);
+const radioTitleRecipe = cva(markTitle);
+const radioHintRecipe = cva("text-tf-caption font-medium text-tf-muted");
+const radioAsideRecipe = cva("shrink-0 text-tf-body-sm font-medium text-tf-muted tabular-nums");
+const radioErrorRecipe = cva("px-3 pt-1 text-tf-caption font-medium text-tf-danger-hi tf-arrives");
+//#endregion
+export { defaultRadioAccent, radioAccents, radioAsideRecipe, radioControlRecipe, radioDotRecipe, radioErrorRecipe, radioGroupLabelRecipe, radioGroupRecipe, radioHintRecipe, radioIndicatorRecipe, radioLabelRecipe, radioLeadRecipe, radioRecipe, radioTitleRecipe };
+
+//# sourceMappingURL=radioGroup.js.map

package/dist/recipes/radioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radioGroup.js","names":[],"sources":["../../src/recipes/radioGroup.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { MarkPlate } from '#mark'\nimport { defaultMarkPlate } from '#mark'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport {\n  markBox,\n  markGroup,\n  markPlate,\n  markPress,\n  markRow,\n  markStack,\n  markTitle,\n} from '#parts/mark'\nimport { defaultTone, tones } from '#parts/tone'\nimport type { Tone } from '#tone'\nimport { toneBlend } from '#tone'\n\nconst radioAccents = tones\n\ntype RadioAccent = Tone\n\nconst defaultRadioAccent = defaultTone\n\nconst radioGroupRecipe = cva([markGroup, 'font-tf-body'])\n\nconst radioGroupLabelRecipe = cva([\n  `text-tf-caption-sm ${eyebrowQuiet}`,\n  'px-3 pb-1 font-medium',\n  '**:data-[part=required-indicator]:text-tf-danger-hi',\n])\n\nconst radioRecipe = cva([...markRow, 'justify-between gap-6'], {\n  defaultVariants: { plate: defaultMarkPlate },\n  variants: {\n    plate: {\n      bare: markPlate.bare,\n      full: `${markPlate.full} not-data-[state=checked]:not-data-readonly:interactive:hovered:bg-tf-panel-hi`,\n      snug: `${markPlate.snug} not-data-[state=checked]:not-data-readonly:interactive:hovered:bg-tf-panel-hi`,\n    } satisfies Record<MarkPlate, string>,\n  },\n})\n\nconst radioIndicatorRecipe = cva(\n  [\n    'pointer-events-none left-0 h-(--height) w-(--width)',\n    'rounded-tf-block tf-tinted data-disabled:opacity-50',\n    '[--transition-duration:var(--tf-duration-2)]',\n    '[--transition-timing-function:var(--ease-tf-glide)]',\n  ],\n  {\n    compoundVariants: [{ class: toneBlend.danger, invalid: true }],\n    defaultVariants: { accent: defaultRadioAccent, invalid: false },\n    variants: {\n      accent: toneBlend,\n      invalid: { false: '', true: '' },\n    },\n  },\n)\n\nconst radioLeadRecipe = cva('flex min-w-0 items-center gap-3')\n\nconst radioControlRecipe = cva(\n  [\n    ...markBox,\n    'rounded-tf-pill bg-tf-sunken',\n    'not-data-readonly:interactive:hovered:bg-tf-sunken-hi',\n    'data-[state=checked]:tf-mark-lit',\n    'data-[state=checked]:**:data-[part=dot]:scale-100',\n    'data-invalid:blend-tf-danger data-invalid:tf-mark-failed',\n    markPress,\n  ],\n  {\n    defaultVariants: { accent: defaultRadioAccent },\n    variants: { accent: toneBlend },\n  },\n)\n\nconst radioDotRecipe = cva([\n  'block size-tf-mark-dot rounded-tf-pill bg-tf-blend',\n  'scale-0 tf-moves-spring tf-transition motion-reduce:transition-none',\n])\n\nconst radioLabelRecipe = cva(markStack)\n\nconst radioTitleRecipe = cva(markTitle)\n\nconst radioHintRecipe = cva('text-tf-caption font-medium text-tf-muted')\n\nconst radioAsideRecipe = cva('shrink-0 text-tf-body-sm font-medium text-tf-muted tabular-nums')\n\nconst radioErrorRecipe = cva('px-3 pt-1 text-tf-caption font-medium text-tf-danger-hi tf-arrives')\n\nexport {\n  type RadioAccent,\n  defaultRadioAccent,\n  radioAccents,\n  radioAsideRecipe,\n  radioControlRecipe,\n  radioDotRecipe,\n  radioErrorRecipe,\n  radioGroupLabelRecipe,\n  radioGroupRecipe,\n  radioHintRecipe,\n  radioIndicatorRecipe,\n  radioLabelRecipe,\n  radioLeadRecipe,\n  radioRecipe,\n  radioTitleRecipe,\n}\n"],"mappings":";;;;;;;AAkBA,MAAM,eAAe;AAIrB,MAAM,qBAAqB;AAE3B,MAAM,mBAAmB,IAAI,CAAC,WAAW,cAAc,CAAC;AAExD,MAAM,wBAAwB,IAAI;CAChC,sBAAsB;CACtB;CACA;AACF,CAAC;AAED,MAAM,cAAc,IAAI,CAAC,GAAG,SAAS,uBAAuB,GAAG;CAC7D,iBAAiB,EAAE,OAAO,iBAAiB;CAC3C,UAAU,EACR,OAAO;EACL,MAAM,UAAU;EAChB,MAAM,GAAG,UAAU,KAAK;EACxB,MAAM,GAAG,UAAU,KAAK;CAC1B,EACF;AACF,CAAC;AAED,MAAM,uBAAuB,IAC3B;CACE;CACA;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAAC;EAAE,OAAO,UAAU;EAAQ,SAAS;CAAK,CAAC;CAC7D,iBAAiB;EAAE,QAAQ;EAAoB,SAAS;CAAM;CAC9D,UAAU;EACR,QAAQ;EACR,SAAS;GAAE,OAAO;GAAI,MAAM;EAAG;CACjC;AACF,CACF;AAEA,MAAM,kBAAkB,IAAI,iCAAiC;AAE7D,MAAM,qBAAqB,IACzB;CACE,GAAG;CACH;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,QAAQ,mBAAmB;CAC9C,UAAU,EAAE,QAAQ,UAAU;AAChC,CACF;AAEA,MAAM,iBAAiB,IAAI,CACzB,sDACA,qEACF,CAAC;AAED,MAAM,mBAAmB,IAAI,SAAS;AAEtC,MAAM,mBAAmB,IAAI,SAAS;AAEtC,MAAM,kBAAkB,IAAI,2CAA2C;AAEvE,MAAM,mBAAmB,IAAI,iEAAiE;AAE9F,MAAM,mBAAmB,IAAI,oEAAoE"}

package/dist/recipes/scopeSwitcher.d.ts

@@ -0,0 +1,26 @@
+//#region src/recipes/scopeSwitcher.d.ts
+declare const scopeSwitcherRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherPillRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherEyebrowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherValueRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherChevronsRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherPillIconRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherIconRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherListRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherRowRecipe: (props?: ({
+  selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const scopeSwitcherCodeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherRowTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherRowNameRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherRowMetaRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherBadgeRecipe: (props?: ({
+  tone?: "accent" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const scopeSwitcherDotRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scopeSwitcherWarningRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { scopeSwitcherBadgeRecipe, scopeSwitcherChevronsRecipe, scopeSwitcherCodeRecipe, scopeSwitcherDotRecipe, scopeSwitcherEyebrowRecipe, scopeSwitcherIconRecipe, scopeSwitcherListRecipe, scopeSwitcherMarkRecipe, scopeSwitcherPillIconRecipe, scopeSwitcherPillRecipe, scopeSwitcherRecipe, scopeSwitcherRowMetaRecipe, scopeSwitcherRowNameRecipe, scopeSwitcherRowRecipe, scopeSwitcherRowTextRecipe, scopeSwitcherTextRecipe, scopeSwitcherValueRecipe, scopeSwitcherWarningRecipe };
+//# sourceMappingURL=scopeSwitcher.d.ts.map

package/dist/recipes/scopeSwitcher.js

@@ -0,0 +1,80 @@
+import { controlInert, controlPress, controlQuiet, controlReach } from "../parts/control.js";
+import { collapseMotion, railCollapse, railMorph } from "./motion.js";
+import { eyebrowType } from "../parts/eyebrow.js";
+import { travelMarkBase } from "../parts/travel.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/scopeSwitcher.ts
+const scopeSwitcherRecipe = cva([
+	"group relative flex w-full items-center gap-2 rounded-tf-block px-3 py-1.5 text-left",
+	"in-data-rail:justify-center in-data-rail:gap-0 in-data-rail:px-2",
+	"bg-tf-sunken",
+	"[&>svg]:size-tf-icon-sm [&>svg]:shrink-0",
+	...controlQuiet,
+	...controlReach,
+	...controlPress,
+	...controlInert
+]);
+const scopeSwitcherPillRecipe = cva([
+	"inline-flex flex-none items-center gap-2 rounded-tf-pill px-3 py-1.5",
+	"bg-tf-panel-2 text-tf-body-sm font-medium text-tf-fg",
+	"[&_svg]:size-tf-icon-sm [&_svg]:shrink-0",
+	...controlQuiet,
+	...controlReach,
+	...controlPress,
+	...controlInert
+]);
+const scopeSwitcherTextRecipe = cva(`flex flex-col gap-0 ${railCollapse}`);
+const scopeSwitcherEyebrowRecipe = cva(["truncate text-tf-caption-sm text-tf-accent-hi", eyebrowType]);
+const scopeSwitcherValueRecipe = cva("truncate font-tf-display text-tf-body-sm font-medium tracking-tf-tight text-tf-fg");
+const scopeSwitcherChevronsRecipe = cva([
+	"flex-none text-tf-muted",
+	"in-data-rail:size-0! in-data-rail:opacity-0",
+	"[--tf-travel:opacity_var(--tf-timing-glide)]",
+	railMorph
+]);
+const scopeSwitcherPillIconRecipe = cva("flex-none text-tf-accent-hi");
+const scopeSwitcherIconRecipe = cva([
+	"relative isolate flex size-tf-control-sm flex-none items-center justify-center rounded-tf-control",
+	"bg-tf-blend text-tf-on-accent tf-cloud-brand tf-clouded blend-tf-accent tf-blend-drift",
+	"tf-edge-sweep tf-swept tf-icons-solo tf-inner-lit",
+	"[&_svg]:size-tf-icon-md [&_svg]:shrink-0"
+]);
+const scopeSwitcherListRecipe = cva(["relative flex flex-col gap-1 pt-2", ...collapseMotion]);
+const scopeSwitcherMarkRecipe = cva([...travelMarkBase, "inset-x-0 h-[61px] rounded-tf-control bg-tf-panel-hi"]);
+const scopeSwitcherRowRecipe = cva([
+	"group relative flex w-full items-center gap-2 rounded-tf-control px-3 py-2 text-left",
+	"tf-transition data-highlighted:bg-tf-panel-hi",
+	"[&>svg]:size-tf-icon-sm [&>svg]:shrink-0",
+	...controlQuiet,
+	...controlReach,
+	...controlPress,
+	...controlInert
+], {
+	defaultVariants: { selected: false },
+	variants: { selected: {
+		false: "",
+		true: "tf-tinted blend-tf-accent"
+	} }
+});
+const scopeSwitcherCodeRecipe = cva([
+	"relative isolate flex size-tf-control-sm flex-none items-center justify-center rounded-tf-pill",
+	"bg-tf-panel-hi text-tf-caption font-medium text-tf-fg",
+	"tf-edge-sweep tf-swept blend-tf-accent",
+	"tf-transition motion-reduce:transition-none"
+]);
+const scopeSwitcherRowTextRecipe = cva("flex min-w-0 flex-1 flex-col gap-0");
+const scopeSwitcherRowNameRecipe = cva("truncate text-tf-body-sm font-medium text-tf-fg");
+const scopeSwitcherRowMetaRecipe = cva("truncate text-tf-caption-sm text-tf-muted");
+const scopeSwitcherBadgeRecipe = cva(["inline-flex flex-none items-center gap-2 rounded-tf-pill bg-tf-panel-hi px-2 py-1", "text-tf-caption-sm font-normal tabular-nums"], {
+	defaultVariants: { tone: "accent" },
+	variants: { tone: {
+		accent: "text-tf-accent-hi",
+		warning: "text-tf-warning-hi"
+	} }
+});
+const scopeSwitcherDotRecipe = cva("size-1.5 flex-none rounded-tf-pill bg-current");
+const scopeSwitcherWarningRecipe = cva("flex-none text-tf-danger-hi");
+//#endregion
+export { scopeSwitcherBadgeRecipe, scopeSwitcherChevronsRecipe, scopeSwitcherCodeRecipe, scopeSwitcherDotRecipe, scopeSwitcherEyebrowRecipe, scopeSwitcherIconRecipe, scopeSwitcherListRecipe, scopeSwitcherMarkRecipe, scopeSwitcherPillIconRecipe, scopeSwitcherPillRecipe, scopeSwitcherRecipe, scopeSwitcherRowMetaRecipe, scopeSwitcherRowNameRecipe, scopeSwitcherRowRecipe, scopeSwitcherRowTextRecipe, scopeSwitcherTextRecipe, scopeSwitcherValueRecipe, scopeSwitcherWarningRecipe };
+
+//# sourceMappingURL=scopeSwitcher.js.map

package/dist/recipes/scopeSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scopeSwitcher.js","names":[],"sources":["../../src/recipes/scopeSwitcher.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, controlQuiet, controlReach } from '#parts/control'\nimport { eyebrowType } from '#parts/eyebrow'\nimport { travelMarkBase } from '#parts/travel'\n\nimport { collapseMotion, railCollapse, railMorph } from './motion'\n\nconst scopeSwitcherRecipe = cva([\n  'group relative flex w-full items-center gap-2 rounded-tf-block px-3 py-1.5 text-left',\n  'in-data-rail:justify-center in-data-rail:gap-0 in-data-rail:px-2',\n  'bg-tf-sunken',\n  '[&>svg]:size-tf-icon-sm [&>svg]:shrink-0',\n  ...controlQuiet,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst scopeSwitcherPillRecipe = cva([\n  'inline-flex flex-none items-center gap-2 rounded-tf-pill px-3 py-1.5',\n  'bg-tf-panel-2 text-tf-body-sm font-medium text-tf-fg',\n  '[&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ...controlQuiet,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst scopeSwitcherTextRecipe = cva(`flex flex-col gap-0 ${railCollapse}`)\n\nconst scopeSwitcherEyebrowRecipe = cva([\n  'truncate text-tf-caption-sm text-tf-accent-hi',\n  eyebrowType,\n])\n\nconst scopeSwitcherValueRecipe = cva(\n  'truncate font-tf-display text-tf-body-sm font-medium tracking-tf-tight text-tf-fg',\n)\n\nconst scopeSwitcherChevronsRecipe = cva([\n  'flex-none text-tf-muted',\n  'in-data-rail:size-0! in-data-rail:opacity-0',\n  '[--tf-travel:opacity_var(--tf-timing-glide)]',\n  railMorph,\n])\n\nconst scopeSwitcherPillIconRecipe = cva('flex-none text-tf-accent-hi')\n\nconst scopeSwitcherIconRecipe = cva([\n  'relative isolate flex size-tf-control-sm flex-none items-center justify-center rounded-tf-control',\n  'bg-tf-blend text-tf-on-accent tf-cloud-brand tf-clouded blend-tf-accent tf-blend-drift',\n  'tf-edge-sweep tf-swept tf-icons-solo tf-inner-lit',\n  '[&_svg]:size-tf-icon-md [&_svg]:shrink-0',\n])\n\nconst scopeSwitcherListRecipe = cva(['relative flex flex-col gap-1 pt-2', ...collapseMotion])\n\nconst scopeSwitcherMarkRecipe = cva([\n  ...travelMarkBase,\n  'inset-x-0 h-[61px] rounded-tf-control bg-tf-panel-hi',\n])\n\nconst scopeSwitcherRowRecipe = cva(\n  [\n    'group relative flex w-full items-center gap-2 rounded-tf-control px-3 py-2 text-left',\n    'tf-transition data-highlighted:bg-tf-panel-hi',\n    '[&>svg]:size-tf-icon-sm [&>svg]:shrink-0',\n    ...controlQuiet,\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { selected: false },\n    variants: {\n      selected: {\n        false: '',\n        true: 'tf-tinted blend-tf-accent',\n      },\n    },\n  },\n)\n\nconst scopeSwitcherCodeRecipe = cva([\n  'relative isolate flex size-tf-control-sm flex-none items-center justify-center rounded-tf-pill',\n  'bg-tf-panel-hi text-tf-caption font-medium text-tf-fg',\n  'tf-edge-sweep tf-swept blend-tf-accent',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst scopeSwitcherRowTextRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst scopeSwitcherRowNameRecipe = cva('truncate text-tf-body-sm font-medium text-tf-fg')\n\nconst scopeSwitcherRowMetaRecipe = cva('truncate text-tf-caption-sm text-tf-muted')\n\nconst scopeSwitcherBadgeRecipe = cva(\n  [\n    'inline-flex flex-none items-center gap-2 rounded-tf-pill bg-tf-panel-hi px-2 py-1',\n    'text-tf-caption-sm font-normal tabular-nums',\n  ],\n  {\n    defaultVariants: { tone: 'accent' },\n    variants: {\n      tone: {\n        accent: 'text-tf-accent-hi',\n        warning: 'text-tf-warning-hi',\n      },\n    },\n  },\n)\n\nconst scopeSwitcherDotRecipe = cva('size-1.5 flex-none rounded-tf-pill bg-current')\n\nconst scopeSwitcherWarningRecipe = cva('flex-none text-tf-danger-hi')\n\nexport {\n  scopeSwitcherBadgeRecipe,\n  scopeSwitcherChevronsRecipe,\n  scopeSwitcherCodeRecipe,\n  scopeSwitcherDotRecipe,\n  scopeSwitcherEyebrowRecipe,\n  scopeSwitcherIconRecipe,\n  scopeSwitcherListRecipe,\n  scopeSwitcherMarkRecipe,\n  scopeSwitcherPillIconRecipe,\n  scopeSwitcherPillRecipe,\n  scopeSwitcherRecipe,\n  scopeSwitcherRowNameRecipe,\n  scopeSwitcherRowMetaRecipe,\n  scopeSwitcherRowRecipe,\n  scopeSwitcherRowTextRecipe,\n  scopeSwitcherTextRecipe,\n  scopeSwitcherValueRecipe,\n  scopeSwitcherWarningRecipe,\n}\n"],"mappings":";;;;;;AAQA,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,0BAA0B,IAAI;CAClC;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,0BAA0B,IAAI,uBAAuB,cAAc;AAEzE,MAAM,6BAA6B,IAAI,CACrC,iDACA,WACF,CAAC;AAED,MAAM,2BAA2B,IAC/B,mFACF;AAEA,MAAM,8BAA8B,IAAI;CACtC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,8BAA8B,IAAI,6BAA6B;AAErE,MAAM,0BAA0B,IAAI;CAClC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,0BAA0B,IAAI,CAAC,qCAAqC,GAAG,cAAc,CAAC;AAE5F,MAAM,0BAA0B,IAAI,CAClC,GAAG,gBACH,sDACF,CAAC;AAED,MAAM,yBAAyB,IAC7B;CACE;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,UAAU,MAAM;CACnC,UAAU,EACR,UAAU;EACR,OAAO;EACP,MAAM;CACR,EACF;AACF,CACF;AAEA,MAAM,0BAA0B,IAAI;CAClC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,6BAA6B,IAAI,oCAAoC;AAE3E,MAAM,6BAA6B,IAAI,iDAAiD;AAExF,MAAM,6BAA6B,IAAI,2CAA2C;AAElF,MAAM,2BAA2B,IAC/B,CACE,qFACA,6CACF,GACA;CACE,iBAAiB,EAAE,MAAM,SAAS;CAClC,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,SAAS;CACX,EACF;AACF,CACF;AAEA,MAAM,yBAAyB,IAAI,+CAA+C;AAElF,MAAM,6BAA6B,IAAI,6BAA6B"}

package/dist/recipes/scrollArea.d.ts

@@ -0,0 +1,19 @@
+//#region src/recipes/scrollArea.d.ts
+type ScrollAreaSurface = 'card' | 'bare';
+declare const defaultScrollAreaSurface = "card";
+declare const scrollAreaSurfaces: readonly ["card", "bare"];
+declare const scrollAreaRecipe: (props?: ({
+  surface?: "bare" | "card" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const scrollViewportRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scrollContentRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const scrollBarRecipe: (props?: ({
+  way?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const scrollThumbRecipe: (props?: ({
+  way?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const scrollCornerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { type ScrollAreaSurface, defaultScrollAreaSurface, scrollAreaRecipe, scrollAreaSurfaces, scrollBarRecipe, scrollContentRecipe, scrollCornerRecipe, scrollThumbRecipe, scrollViewportRecipe };
+//# sourceMappingURL=scrollArea.d.ts.map

package/dist/recipes/scrollArea.js

@@ -0,0 +1,43 @@
+import { scrollFades } from "../parts/scroll.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/scrollArea.ts
+const RAIL = "rounded-tf-inline";
+const defaultScrollAreaSurface = "card";
+const scrollAreaSurfaces = ["card", "bare"];
+const scrollAreaRecipe = cva(["relative flex flex-col", "font-tf-body"], {
+	defaultVariants: { surface: defaultScrollAreaSurface },
+	variants: { surface: {
+		bare: "",
+		card: "tf-edge-sweep rounded-tf-block bg-tf-panel px-2 shadow-tf-float tf-edge-plain"
+	} }
+});
+const scrollViewportRecipe = cva([
+	"flex tf-scroll-hidden min-h-0 flex-col py-2 pr-3 outline-hidden",
+	"in-data-overflow-x:pb-3",
+	...scrollFades
+]);
+const scrollContentRecipe = cva("flex flex-col");
+const scrollBarRecipe = cva([`${RAIL} bg-tf-panel`, "tf-transition motion-reduce:transition-none"], {
+	defaultVariants: { way: "vertical" },
+	variants: { way: {
+		horizontal: "mx-2 mb-1 h-1 opacity-0 in-data-overflow-x:opacity-100",
+		vertical: "my-2 mr-1 w-1 opacity-0 in-data-overflow-y:opacity-100"
+	} }
+});
+const scrollThumbRecipe = cva([
+	`${RAIL} bg-tf-line`,
+	"in-data-hover:bg-tf-line-hi in-data-scrolling:bg-tf-line-hi",
+	"data-dragging:bg-tf-accent-hi",
+	"tf-transition motion-reduce:transition-none"
+], {
+	defaultVariants: { way: "vertical" },
+	variants: { way: {
+		horizontal: "h-1 min-w-tf-icon-solo-lg",
+		vertical: "min-h-tf-icon-solo-lg w-1"
+	} }
+});
+const scrollCornerRecipe = cva("bg-transparent");
+//#endregion
+export { defaultScrollAreaSurface, scrollAreaRecipe, scrollAreaSurfaces, scrollBarRecipe, scrollContentRecipe, scrollCornerRecipe, scrollThumbRecipe, scrollViewportRecipe };
+
+//# sourceMappingURL=scrollArea.js.map

package/dist/recipes/scrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollArea.js","names":[],"sources":["../../src/recipes/scrollArea.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { scrollFades } from '#parts/scroll'\n\nconst RAIL = 'rounded-tf-inline'\n\ntype ScrollAreaSurface = 'card' | 'bare'\n\ntype ScrollAreaWay = 'vertical' | 'horizontal'\n\nconst defaultScrollAreaSurface = 'card' satisfies ScrollAreaSurface\n\nconst scrollAreaSurfaces = ['card', 'bare'] as const satisfies readonly ScrollAreaSurface[]\n\nconst scrollAreaRecipe = cva(['relative flex flex-col', 'font-tf-body'], {\n  defaultVariants: { surface: defaultScrollAreaSurface },\n  variants: {\n    surface: {\n      bare: '',\n      card: 'tf-edge-sweep rounded-tf-block bg-tf-panel px-2 shadow-tf-float tf-edge-plain',\n    } satisfies Record<ScrollAreaSurface, string>,\n  },\n})\n\nconst scrollViewportRecipe = cva([\n  'flex tf-scroll-hidden min-h-0 flex-col py-2 pr-3 outline-hidden',\n  'in-data-overflow-x:pb-3',\n  ...scrollFades,\n])\n\nconst scrollContentRecipe = cva('flex flex-col')\n\nconst scrollBarRecipe = cva(\n  [`${RAIL} bg-tf-panel`, 'tf-transition motion-reduce:transition-none'],\n  {\n    defaultVariants: { way: 'vertical' },\n    variants: {\n      way: {\n        horizontal: 'mx-2 mb-1 h-1 opacity-0 in-data-overflow-x:opacity-100',\n        vertical: 'my-2 mr-1 w-1 opacity-0 in-data-overflow-y:opacity-100',\n      } satisfies Record<ScrollAreaWay, string>,\n    },\n  },\n)\n\nconst scrollThumbRecipe = cva(\n  [\n    `${RAIL} bg-tf-line`,\n    'in-data-hover:bg-tf-line-hi in-data-scrolling:bg-tf-line-hi',\n    'data-dragging:bg-tf-accent-hi',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    defaultVariants: { way: 'vertical' },\n    variants: {\n      way: {\n        horizontal: 'h-1 min-w-tf-icon-solo-lg',\n        vertical: 'min-h-tf-icon-solo-lg w-1',\n      } satisfies Record<ScrollAreaWay, string>,\n    },\n  },\n)\n\nconst scrollCornerRecipe = cva('bg-transparent')\n\nexport {\n  type ScrollAreaSurface,\n  defaultScrollAreaSurface,\n  scrollAreaRecipe,\n  scrollAreaSurfaces,\n  scrollBarRecipe,\n  scrollContentRecipe,\n  scrollCornerRecipe,\n  scrollThumbRecipe,\n  scrollViewportRecipe,\n}\n"],"mappings":";;;AAIA,MAAM,OAAO;AAMb,MAAM,2BAA2B;AAEjC,MAAM,qBAAqB,CAAC,QAAQ,MAAM;AAE1C,MAAM,mBAAmB,IAAI,CAAC,0BAA0B,cAAc,GAAG;CACvE,iBAAiB,EAAE,SAAS,yBAAyB;CACrD,UAAU,EACR,SAAS;EACP,MAAM;EACN,MAAM;CACR,EACF;AACF,CAAC;AAED,MAAM,uBAAuB,IAAI;CAC/B;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,sBAAsB,IAAI,eAAe;AAE/C,MAAM,kBAAkB,IACtB,CAAC,GAAG,KAAK,eAAe,6CAA6C,GACrE;CACE,iBAAiB,EAAE,KAAK,WAAW;CACnC,UAAU,EACR,KAAK;EACH,YAAY;EACZ,UAAU;CACZ,EACF;AACF,CACF;AAEA,MAAM,oBAAoB,IACxB;CACE,GAAG,KAAK;CACR;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,KAAK,WAAW;CACnC,UAAU,EACR,KAAK;EACH,YAAY;EACZ,UAAU;CACZ,EACF;AACF,CACF;AAEA,MAAM,qBAAqB,IAAI,gBAAgB"}

package/dist/recipes/searchPalette.d.ts

@@ -0,0 +1,19 @@
+//#region src/recipes/searchPalette.d.ts
+declare const searchTriggerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchKeyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchPositionerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchPanelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchFieldRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchInputRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchRuleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchListRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchHitRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchHitTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchHitMetaRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchEmptyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const searchFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { searchEmptyRecipe, searchFieldRecipe, searchFootRecipe, searchHitMetaRecipe, searchHitRecipe, searchHitTextRecipe, searchInputRecipe, searchKeyRecipe, searchLabelRecipe, searchListRecipe, searchMarkRecipe, searchPanelRecipe, searchPositionerRecipe, searchRuleRecipe, searchTriggerRecipe };
+//# sourceMappingURL=searchPalette.d.ts.map

package/dist/recipes/searchPalette.js

@@ -0,0 +1,63 @@
+import { controlInert, controlPress, controlReach } from "../parts/control.js";
+import { ruleFading } from "../parts/rule.js";
+import { mirrorMotion } from "./motion.js";
+import { travelMarkBase } from "../parts/travel.js";
+import { scrollFades } from "../parts/scroll.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/searchPalette.ts
+const GROUND = "relative flex-none bg-tf-shade-under";
+const searchTriggerRecipe = cva([
+	"relative isolate inline-flex h-tf-control-sm min-w-60 items-center gap-3",
+	"rounded-tf-control bg-tf-control pr-3 pl-3",
+	"font-tf-body text-tf-body-sm font-medium text-tf-muted",
+	"interactive:hovered:bg-tf-control-hi interactive:hovered:text-tf-fg",
+	"tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0",
+	"cursor-pointer tf-transition motion-reduce:transition-none",
+	...controlReach,
+	...controlInert
+]);
+const searchLabelRecipe = cva("min-w-0 flex-1 truncate text-left");
+const searchKeyRecipe = cva(["flex h-6 flex-none items-center rounded-tf-inline bg-tf-panel-hi px-2", "text-tf-caption-sm font-normal text-tf-muted"]);
+const searchPositionerRecipe = cva(["fixed inset-0 z-tf-modal flex items-start justify-center", "px-4 pt-24 pb-10 font-tf-body sm:px-10"]);
+const searchPanelRecipe = cva([
+	"relative isolate rounded-tf-card bg-tf-shade-deep backdrop-blur-tf-panel",
+	"tf-edge-sweep tf-swept blend-tf-accent tf-edge-plain",
+	"flex max-h-full w-full max-w-tf-measure flex-col overflow-hidden",
+	"text-tf-body-sm font-medium text-tf-fg shadow-tf-float",
+	...mirrorMotion,
+	"motion-reduce:animate-none"
+]);
+const searchFieldRecipe = cva([
+	GROUND,
+	"flex h-tf-control-lg items-center gap-3 rounded-t-tf-card px-5",
+	"tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0 [&_svg]:text-tf-muted"
+]);
+const searchInputRecipe = cva(["min-w-0 flex-1 border-0 bg-transparent outline-hidden", "font-tf-body text-tf-body text-tf-fg placeholder:text-tf-muted"]);
+const searchRuleRecipe = cva(`absolute inset-x-0 bottom-0 ${ruleFading}`);
+const searchListRecipe = cva([
+	"relative flex tf-scroll-hidden max-h-80 min-h-0 flex-col overflow-auto p-2",
+	"outline-hidden data-empty:hidden",
+	...scrollFades
+]);
+const searchHitRecipe = cva([
+	"relative flex h-tf-control-md min-h-tf-control-md flex-none items-center gap-4",
+	"rounded-tf-control px-3 text-left text-tf-fg",
+	"tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0 [&_svg]:text-tf-muted",
+	"cursor-pointer tf-transition motion-reduce:transition-none",
+	...controlReach,
+	...controlPress,
+	...controlInert
+]);
+const searchMarkRecipe = cva([...travelMarkBase, "inset-x-2 h-tf-control-md rounded-tf-control bg-tf-panel-hi"]);
+const searchHitTextRecipe = cva("min-w-0 flex-1 truncate");
+const searchHitMetaRecipe = cva(["flex-none text-tf-caption-sm whitespace-nowrap text-tf-muted tabular-nums"]);
+const searchEmptyRecipe = cva(["flex h-tf-control-lg flex-none items-center justify-center px-3", "bg-tf-panel-2 text-tf-caption font-medium text-tf-muted"]);
+const searchFootRecipe = cva([
+	GROUND,
+	"flex items-center justify-between gap-3 rounded-b-tf-card px-5 py-3",
+	"text-tf-caption-sm text-tf-muted"
+]);
+//#endregion
+export { searchEmptyRecipe, searchFieldRecipe, searchFootRecipe, searchHitMetaRecipe, searchHitRecipe, searchHitTextRecipe, searchInputRecipe, searchKeyRecipe, searchLabelRecipe, searchListRecipe, searchMarkRecipe, searchPanelRecipe, searchPositionerRecipe, searchRuleRecipe, searchTriggerRecipe };
+
+//# sourceMappingURL=searchPalette.js.map

package/dist/recipes/searchPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchPalette.js","names":[],"sources":["../../src/recipes/searchPalette.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, controlReach } from '#parts/control'\nimport { ruleFading } from '#parts/rule'\nimport { scrollFades } from '#parts/scroll'\nimport { travelMarkBase } from '#parts/travel'\n\nimport { mirrorMotion } from './motion'\n\nconst GROUND = 'relative flex-none bg-tf-shade-under'\n\nconst searchTriggerRecipe = cva([\n  'relative isolate inline-flex h-tf-control-sm min-w-60 items-center gap-3',\n  'rounded-tf-control bg-tf-control pr-3 pl-3',\n  'font-tf-body text-tf-body-sm font-medium text-tf-muted',\n  'interactive:hovered:bg-tf-control-hi interactive:hovered:text-tf-fg',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  'cursor-pointer tf-transition motion-reduce:transition-none',\n  ...controlReach,\n  ...controlInert,\n])\n\nconst searchLabelRecipe = cva('min-w-0 flex-1 truncate text-left')\n\nconst searchKeyRecipe = cva([\n  'flex h-6 flex-none items-center rounded-tf-inline bg-tf-panel-hi px-2',\n  'text-tf-caption-sm font-normal text-tf-muted',\n])\n\nconst searchPositionerRecipe = cva([\n  'fixed inset-0 z-tf-modal flex items-start justify-center',\n  'px-4 pt-24 pb-10 font-tf-body sm:px-10',\n])\n\nconst searchPanelRecipe = cva([\n  'relative isolate rounded-tf-card bg-tf-shade-deep backdrop-blur-tf-panel',\n  'tf-edge-sweep tf-swept blend-tf-accent tf-edge-plain',\n  'flex max-h-full w-full max-w-tf-measure flex-col overflow-hidden',\n  'text-tf-body-sm font-medium text-tf-fg shadow-tf-float',\n  ...mirrorMotion,\n  'motion-reduce:animate-none',\n])\n\nconst searchFieldRecipe = cva([\n  GROUND,\n  'flex h-tf-control-lg items-center gap-3 rounded-t-tf-card px-5',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0 [&_svg]:text-tf-muted',\n])\n\nconst searchInputRecipe = cva([\n  'min-w-0 flex-1 border-0 bg-transparent outline-hidden',\n  'font-tf-body text-tf-body text-tf-fg placeholder:text-tf-muted',\n])\n\nconst searchRuleRecipe = cva(`absolute inset-x-0 bottom-0 ${ruleFading}`)\n\nconst searchListRecipe = cva([\n  'relative flex tf-scroll-hidden max-h-80 min-h-0 flex-col overflow-auto p-2',\n  'outline-hidden data-empty:hidden',\n  ...scrollFades,\n])\n\nconst searchHitRecipe = cva([\n  'relative flex h-tf-control-md min-h-tf-control-md flex-none items-center gap-4',\n  'rounded-tf-control px-3 text-left text-tf-fg',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0 [&_svg]:text-tf-muted',\n  'cursor-pointer tf-transition motion-reduce:transition-none',\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst searchMarkRecipe = cva([\n  ...travelMarkBase,\n  'inset-x-2 h-tf-control-md rounded-tf-control bg-tf-panel-hi',\n])\n\nconst searchHitTextRecipe = cva('min-w-0 flex-1 truncate')\n\nconst searchHitMetaRecipe = cva([\n  'flex-none text-tf-caption-sm whitespace-nowrap text-tf-muted tabular-nums',\n])\n\nconst searchEmptyRecipe = cva([\n  'flex h-tf-control-lg flex-none items-center justify-center px-3',\n  'bg-tf-panel-2 text-tf-caption font-medium text-tf-muted',\n])\n\nconst searchFootRecipe = cva([\n  GROUND,\n  'flex items-center justify-between gap-3 rounded-b-tf-card px-5 py-3',\n  'text-tf-caption-sm text-tf-muted',\n])\n\nexport {\n  searchEmptyRecipe,\n  searchFieldRecipe,\n  searchFootRecipe,\n  searchHitMetaRecipe,\n  searchHitRecipe,\n  searchHitTextRecipe,\n  searchInputRecipe,\n  searchKeyRecipe,\n  searchLabelRecipe,\n  searchListRecipe,\n  searchMarkRecipe,\n  searchPanelRecipe,\n  searchPositionerRecipe,\n  searchRuleRecipe,\n  searchTriggerRecipe,\n}\n"],"mappings":";;;;;;;AASA,MAAM,SAAS;AAEf,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,oBAAoB,IAAI,mCAAmC;AAEjE,MAAM,kBAAkB,IAAI,CAC1B,yEACA,8CACF,CAAC;AAED,MAAM,yBAAyB,IAAI,CACjC,4DACA,wCACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,yDACA,gEACF,CAAC;AAED,MAAM,mBAAmB,IAAI,+BAA+B,YAAY;AAExE,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,kBAAkB,IAAI;CAC1B;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,mBAAmB,IAAI,CAC3B,GAAG,gBACH,6DACF,CAAC;AAED,MAAM,sBAAsB,IAAI,yBAAyB;AAEzD,MAAM,sBAAsB,IAAI,CAC9B,2EACF,CAAC;AAED,MAAM,oBAAoB,IAAI,CAC5B,mEACA,yDACF,CAAC;AAED,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA;AACF,CAAC"}

package/dist/recipes/sectionHeader.d.ts

@@ -0,0 +1,9 @@
+//#region src/recipes/sectionHeader.d.ts
+type SectionHeaderSize = 'section' | 'hero';
+declare const defaultSectionHeaderSize = "section";
+declare const sectionHeaderSizes: readonly ["section", "hero"];
+declare const sectionHeaderRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sectionHeaderLabelStackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { type SectionHeaderSize, defaultSectionHeaderSize, sectionHeaderLabelStackRecipe, sectionHeaderRecipe, sectionHeaderSizes };
+//# sourceMappingURL=sectionHeader.d.ts.map

package/dist/recipes/sectionHeader.js

@@ -0,0 +1,10 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/sectionHeader.ts
+const defaultSectionHeaderSize = "section";
+const sectionHeaderSizes = ["section", "hero"];
+const sectionHeaderRecipe = cva("flex flex-col gap-6");
+const sectionHeaderLabelStackRecipe = cva("flex flex-col gap-4");
+//#endregion
+export { defaultSectionHeaderSize, sectionHeaderLabelStackRecipe, sectionHeaderRecipe, sectionHeaderSizes };
+
+//# sourceMappingURL=sectionHeader.js.map

package/dist/recipes/sectionHeader.js.map

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

package/dist/recipes/segmentedControl.d.ts

@@ -0,0 +1,9 @@
+//#region src/recipes/segmentedControl.d.ts
+declare const segmentedControlRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const segmentedControlIndicatorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const segmentedControlItemRecipe: (props?: ({
+  checked?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { segmentedControlIndicatorRecipe, segmentedControlItemRecipe, segmentedControlRecipe };
+//# sourceMappingURL=segmentedControl.d.ts.map

package/dist/recipes/segmentedControl.js

@@ -0,0 +1,29 @@
+import { controlInert, controlPress, controlReach, hitArea } from "../parts/control.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/segmentedControl.ts
+const HIT_AREA = hitArea("after:h-tf-target");
+const segmentedControlRecipe = cva("relative isolate flex items-center gap-1 rounded-tf-pill bg-tf-panel p-1");
+const segmentedControlIndicatorRecipe = cva([
+	"pointer-events-none absolute z-[-1] rounded-tf-pill bg-tf-blend blend-tf-accent",
+	"top-(--top) left-(--left) h-(--height) w-(--width)",
+	"[--transition-duration:var(--tf-duration-1)]",
+	"[--transition-timing-function:var(--ease-tf)]"
+]);
+const segmentedControlItemRecipe = cva([
+	"relative flex h-tf-control-2xs items-center rounded-tf-pill px-3 text-tf-caption-sm font-normal",
+	"cursor-pointer tf-transition motion-reduce:transition-none",
+	HIT_AREA,
+	...controlReach,
+	...controlPress,
+	...controlInert
+], {
+	defaultVariants: { checked: false },
+	variants: { checked: {
+		false: "text-tf-muted interactive:hovered:text-tf-fg",
+		true: "text-tf-on-accent"
+	} }
+});
+//#endregion
+export { segmentedControlIndicatorRecipe, segmentedControlItemRecipe, segmentedControlRecipe };
+
+//# sourceMappingURL=segmentedControl.js.map

package/dist/recipes/segmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmentedControl.js","names":[],"sources":["../../src/recipes/segmentedControl.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, controlReach, hitArea } from '#parts/control'\n\nconst HIT_AREA = hitArea('after:h-tf-target')\n\nconst segmentedControlRecipe = cva(\n  'relative isolate flex items-center gap-1 rounded-tf-pill bg-tf-panel p-1',\n)\n\nconst segmentedControlIndicatorRecipe = cva([\n  'pointer-events-none absolute z-[-1] rounded-tf-pill bg-tf-blend blend-tf-accent',\n  'top-(--top) left-(--left) h-(--height) w-(--width)',\n  '[--transition-duration:var(--tf-duration-1)]',\n  '[--transition-timing-function:var(--ease-tf)]',\n])\n\nconst segmentedControlItemRecipe = cva(\n  [\n    'relative flex h-tf-control-2xs items-center rounded-tf-pill px-3 text-tf-caption-sm font-normal',\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    HIT_AREA,\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { checked: false },\n    variants: {\n      checked: {\n        false: 'text-tf-muted interactive:hovered:text-tf-fg',\n        true: 'text-tf-on-accent',\n      },\n    },\n  },\n)\n\nexport { segmentedControlIndicatorRecipe, segmentedControlItemRecipe, segmentedControlRecipe }\n"],"mappings":";;;AAIA,MAAM,WAAW,QAAQ,mBAAmB;AAE5C,MAAM,yBAAyB,IAC7B,0EACF;AAEA,MAAM,kCAAkC,IAAI;CAC1C;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,6BAA6B,IACjC;CACE;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EACP,OAAO;EACP,MAAM;CACR,EACF;AACF,CACF"}

package/dist/recipes/select.d.ts

@@ -0,0 +1,9 @@
+//#region src/recipes/select.d.ts
+declare const selectTriggerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const selectValueRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const selectIndicatorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const selectRowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const selectEmptyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { selectEmptyRecipe, selectIndicatorRecipe, selectRowRecipe, selectTriggerRecipe, selectValueRecipe };
+//# sourceMappingURL=select.d.ts.map

package/dist/recipes/select.js

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/select.ts
+const selectTriggerRecipe = cva([
+	"flex items-center text-left",
+	"cursor-pointer disabled:cursor-not-allowed",
+	"data-readonly:cursor-default",
+	"outline-hidden"
+]);
+const selectValueRecipe = cva("min-w-0 flex-1 truncate");
+const selectIndicatorRecipe = cva(["tf-transition motion-reduce:transition-none", "data-[state=open]:rotate-180"]);
+const selectRowRecipe = cva([
+	"reached:**:data-[part=trailing]:text-tf-accent-hi",
+	"reached:**:data-[part=trailing]:stroke-tf-ink",
+	"has-data-[state=open]:**:data-[part=trailing]:text-tf-accent-hi",
+	"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"]);
+//#endregion
+export { selectEmptyRecipe, selectIndicatorRecipe, selectRowRecipe, selectTriggerRecipe, selectValueRecipe };
+
+//# sourceMappingURL=select.js.map

package/dist/recipes/select.js.map

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

package/dist/recipes/separator.d.ts

@@ -0,0 +1,14 @@
+//#region src/recipes/separator.d.ts
+type SeparatorOrientation = 'horizontal' | 'vertical';
+type SeparatorVariant = 'fade' | 'filled' | 'quiet';
+declare const defaultSeparatorOrientation = "horizontal";
+declare const defaultSeparatorVariant = "filled";
+declare const separatorRecipe: (props?: ({
+  orientation?: "vertical" | "horizontal" | 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"];
+//#endregion
+export { type SeparatorOrientation, type SeparatorVariant, defaultSeparatorOrientation, defaultSeparatorVariant, separatorOrientations, separatorRecipe, separatorVariants };
+//# sourceMappingURL=separator.d.ts.map

package/dist/recipes/separator.js

@@ -0,0 +1,59 @@
+import { ruleFading, ruleFadingDown, ruleFilled, ruleFilledDown, ruleQuiet } from "../parts/rule.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/separator.ts
+const defaultSeparatorOrientation = "horizontal";
+const defaultSeparatorVariant = "filled";
+const separatorRecipe = cva("shrink-0", {
+	compoundVariants: [
+		{
+			class: ruleFading,
+			orientation: "horizontal",
+			variant: "fade"
+		},
+		{
+			class: ruleQuiet,
+			orientation: "horizontal",
+			variant: "quiet"
+		},
+		{
+			class: ruleFilled,
+			orientation: "horizontal",
+			variant: "filled"
+		},
+		{
+			class: ruleFadingDown,
+			orientation: "vertical",
+			variant: "fade"
+		},
+		{
+			class: ruleFilledDown,
+			orientation: "vertical",
+			variant: "filled"
+		}
+	],
+	defaultVariants: {
+		orientation: defaultSeparatorOrientation,
+		variant: defaultSeparatorVariant
+	},
+	variants: {
+		orientation: {
+			horizontal: "w-full",
+			vertical: "self-stretch"
+		},
+		variant: {
+			fade: "",
+			filled: "",
+			quiet: ""
+		}
+	}
+});
+const separatorOrientations = ["horizontal", "vertical"];
+const separatorVariants = [
+	"fade",
+	"filled",
+	"quiet"
+];
+//#endregion
+export { defaultSeparatorOrientation, defaultSeparatorVariant, separatorOrientations, separatorRecipe, separatorVariants };
+
+//# sourceMappingURL=separator.js.map

package/dist/recipes/separator.js.map

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

package/dist/recipes/sidebar.d.ts

@@ -0,0 +1,40 @@
+//#region src/recipes/sidebar.d.ts
+declare const sidebarTravel: (index: number, rail: boolean) => string;
+declare const sidebarRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarScopeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarMobileBarRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarMobileHeadingsRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarMobileEyebrowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarMobileTitleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarOverlayBackdropRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarOverlayPositionerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarOverlayPanelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarOverlayHeadRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarOverlayBrandRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarOverlayScopeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarOverlayBodyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarOverlayNavRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarOverlaySeparatorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarOverlayItemActive = "aria-[current=page]:bg-tf-blend aria-[current=page]:blend-tf-accent";
+declare const sidebarHeadRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarBrandRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarBrandStackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarWordmarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarBrandSubtitleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarToggleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarSwitchRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sidebarNavRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+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;
+} & 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;
+declare const sidebarChevronRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+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;
+//#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 };
+//# sourceMappingURL=sidebar.d.ts.map