@techfides/ui-library-design 0.1.0

package/dist/recipes/field.js

@@ -0,0 +1,129 @@
+import "../control.js";
+import { controlBase, controlBox, controlInert, controlReach, hitArea } from "../parts/control.js";
+import { controlFailed, controlHealthy, controlShell } from "../parts/shell.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/field.ts
+const HEALTHY = [
+	controlHealthy,
+	"reached:**:data-[part=leading]:text-tf-accent-hi",
+	"reached:**:data-[part=leading]:stroke-tf-ink",
+	"reached:**:data-[part=unit]:tf-blended"
+].join(" ");
+const FAILED = [
+	controlFailed,
+	"**:data-[part=leading]:text-tf-danger-hi",
+	"**:data-[part=trailing]:text-tf-danger-hi",
+	"**:data-[part=leading]:stroke-tf-ink",
+	"**:data-[part=trailing]:stroke-tf-ink"
+].join(" ");
+const PENDING = [
+	"tf-edge-lit tf-pulsing tf-clouding",
+	"**:data-[part=nebula]:tf-cloud-breathing",
+	"**:data-[part=leading]:text-tf-accent-hi",
+	"**:data-[part=trailing]:text-tf-accent-hi",
+	"**:data-[part=trailing]:stroke-tf-ink"
+].join(" ");
+const INPUT_WAKES = ["reached:[&_input]:placeholder:opacity-100", "reached:[&_input]:placeholder:delay-(--tf-duration-1)"];
+const LABEL_RESTS_CENTRED = {
+	lg: "asleep:**:data-[part=label]:translate-y-1.5",
+	md: "asleep:**:data-[part=label]:translate-y-1.75"
+};
+const LABEL_FLOATS_AT = {
+	lg: "top-3 text-tf-body",
+	md: "top-2 text-tf-body-sm"
+};
+const A_HALF_IS_ENOUGH = ["data-filled:asleep:**:data-[part=label]:translate-y-0", "data-filled:asleep:**:data-[part=label]:scale-80"];
+const shellOf = (size) => [
+	"relative isolate w-full",
+	"font-tf-body",
+	...controlShell(INPUT_WAKES, LABEL_RESTS_CENTRED[size]),
+	...A_HALF_IS_ENOUGH
+];
+const SHELLS = {
+	lg: [...shellOf("lg"), controlBox.lg].join(" "),
+	md: [...shellOf("md"), controlBox.md].join(" ")
+};
+const fieldRecipe = cva(["grid w-full max-w-tf-panel grid-cols-1 font-tf-body", "tf-grows"], {
+	defaultVariants: { message: false },
+	variants: { message: {
+		false: "grid-rows-[auto_0fr]",
+		true: "grid-rows-[auto_1fr]"
+	} }
+});
+const fieldRowRecipe = cva(controlBase, {
+	defaultVariants: {
+		invalid: false,
+		loading: false,
+		size: "lg"
+	},
+	variants: {
+		invalid: {
+			false: HEALTHY,
+			true: FAILED
+		},
+		loading: {
+			false: "",
+			true: PENDING
+		},
+		size: SHELLS
+	}
+});
+const fieldLabelRecipe = cva([
+	"pointer-events-none absolute origin-top-left",
+	"scale-80 tf-label-ramp tf-label-lit",
+	"tf-moves-glide tf-transition motion-reduce:transition-none",
+	"data-disabled:opacity-50",
+	"**:data-[part=required-indicator]:text-tf-danger-hi"
+], {
+	defaultVariants: {
+		hidden: false,
+		leading: false,
+		size: "lg"
+	},
+	variants: {
+		hidden: {
+			false: "",
+			true: "sr-only"
+		},
+		leading: {
+			false: "left-4",
+			true: "left-13"
+		},
+		size: LABEL_FLOATS_AT
+	}
+});
+const MESSAGE = "min-w-0 flex-1 pt-2 text-tf-caption font-medium sm:truncate";
+const fieldHintRecipe = cva(`${MESSAGE} text-tf-muted`);
+const fieldErrorRecipe = cva(`${MESSAGE} text-tf-danger-hi tf-arrives`, {
+	defaultVariants: { alone: false },
+	variants: { alone: {
+		false: "text-right",
+		true: "text-left"
+	} }
+});
+const fieldFootRecipe = cva([
+	"flex min-h-0 items-start justify-between overflow-hidden",
+	"gap-x-4 gap-y-1",
+	"**:[text-box-trim:trim-start]"
+]);
+const fieldUnitRecipe = cva("text-tf-unit [font-size:var(--text-tf-body-sm)] font-medium");
+const ADORNMENT_BOX = "absolute top-1/2 flex -translate-y-1/2 items-center text-tf-muted tf-icons";
+const ADORNMENT = `pointer-events-none ${ADORNMENT_BOX}`;
+const ADORNMENT_EDGE = "text-tf-body [&_svg]:size-tf-icon-lg";
+const leadingRecipe = cva(`${ADORNMENT} left-4 ${ADORNMENT_EDGE}`);
+const trailingRecipe = cva(`${ADORNMENT} right-4 ${ADORNMENT_EDGE}`);
+const TRAILING_HIT = hitArea("after:h-tf-control-sm", "after:w-tf-control-sm");
+const trailingActionRecipe = cva([
+	ADORNMENT_BOX,
+	ADORNMENT_EDGE,
+	"right-4 cursor-pointer",
+	"interactive:hovered:text-tf-fg",
+	"tf-transition motion-reduce:transition-none",
+	TRAILING_HIT,
+	...controlReach,
+	...controlInert
+]);
+//#endregion
+export { fieldErrorRecipe, fieldFootRecipe, fieldHintRecipe, fieldLabelRecipe, fieldRecipe, fieldRowRecipe, fieldUnitRecipe, leadingRecipe, trailingActionRecipe, trailingRecipe };
+
+//# sourceMappingURL=field.js.map

package/dist/recipes/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../../src/recipes/field.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\nimport { controlBase, controlBox, controlInert, controlReach, hitArea } from '#parts/control'\nimport { controlFailed, controlHealthy, controlShell } from '#parts/shell'\n\nconst HEALTHY = [\n  controlHealthy,\n  'reached:**:data-[part=leading]:text-tf-accent-hi',\n  'reached:**:data-[part=leading]:stroke-tf-ink',\n  'reached:**:data-[part=unit]:tf-blended',\n].join(' ')\n\nconst FAILED = [\n  controlFailed,\n  '**:data-[part=leading]:text-tf-danger-hi',\n  '**:data-[part=trailing]:text-tf-danger-hi',\n  '**:data-[part=leading]:stroke-tf-ink',\n  '**:data-[part=trailing]:stroke-tf-ink',\n].join(' ')\n\nconst PENDING = [\n  'tf-edge-lit tf-pulsing tf-clouding',\n  '**:data-[part=nebula]:tf-cloud-breathing',\n  '**:data-[part=leading]:text-tf-accent-hi',\n  '**:data-[part=trailing]:text-tf-accent-hi',\n  '**:data-[part=trailing]:stroke-tf-ink',\n].join(' ')\n\nconst INPUT_WAKES = [\n  'reached:[&_input]:placeholder:opacity-100',\n  'reached:[&_input]:placeholder:delay-(--tf-duration-1)',\n]\n\nconst LABEL_RESTS_CENTRED = {\n  lg: 'asleep:**:data-[part=label]:translate-y-1.5',\n  md: 'asleep:**:data-[part=label]:translate-y-1.75',\n} satisfies Record<FieldSize, string>\n\nconst LABEL_FLOATS_AT = {\n  lg: 'top-3 text-tf-body',\n  md: 'top-2 text-tf-body-sm',\n} satisfies Record<FieldSize, string>\n\nconst A_HALF_IS_ENOUGH = [\n  'data-filled:asleep:**:data-[part=label]:translate-y-0',\n  'data-filled:asleep:**:data-[part=label]:scale-80',\n]\n\nconst shellOf = (size: FieldSize): string[] => [\n  'relative isolate w-full',\n  'font-tf-body',\n  ...controlShell(INPUT_WAKES, LABEL_RESTS_CENTRED[size]),\n  ...A_HALF_IS_ENOUGH,\n]\n\nconst SHELLS = {\n  lg: [...shellOf('lg'), controlBox.lg].join(' '),\n  md: [...shellOf('md'), controlBox.md].join(' '),\n} satisfies Record<FieldSize, string>\n\nconst fieldRecipe = cva(['grid w-full max-w-tf-panel grid-cols-1 font-tf-body', 'tf-grows'], {\n  defaultVariants: { message: false },\n  variants: {\n    message: { false: 'grid-rows-[auto_0fr]', true: 'grid-rows-[auto_1fr]' },\n  },\n})\n\nconst fieldRowRecipe = cva(controlBase, {\n  defaultVariants: { invalid: false, loading: false, size: defaultFieldSize },\n  variants: {\n    invalid: { false: HEALTHY, true: FAILED },\n    loading: { false: '', true: PENDING },\n    size: SHELLS,\n  },\n})\n\nconst fieldLabelRecipe = cva(\n  [\n    'pointer-events-none absolute origin-top-left',\n    'scale-80 tf-label-ramp tf-label-lit',\n    'tf-moves-glide tf-transition motion-reduce:transition-none',\n    'data-disabled:opacity-50',\n    '**:data-[part=required-indicator]:text-tf-danger-hi',\n  ],\n  {\n    defaultVariants: { hidden: false, leading: false, size: defaultFieldSize },\n    variants: {\n      hidden: { false: '', true: 'sr-only' },\n      leading: { false: 'left-4', true: 'left-13' },\n      size: LABEL_FLOATS_AT,\n    },\n  },\n)\n\nconst MESSAGE = 'min-w-0 flex-1 pt-2 text-tf-caption font-medium sm:truncate'\n\nconst fieldHintRecipe = cva(`${MESSAGE} text-tf-muted`)\n\nconst fieldErrorRecipe = cva(`${MESSAGE} text-tf-danger-hi tf-arrives`, {\n  defaultVariants: { alone: false },\n  variants: {\n    alone: { false: 'text-right', true: 'text-left' },\n  },\n})\n\nconst fieldFootRecipe = cva([\n  'flex min-h-0 items-start justify-between overflow-hidden',\n  'gap-x-4 gap-y-1',\n  '**:[text-box-trim:trim-start]',\n])\n\nconst fieldUnitRecipe = cva('text-tf-unit [font-size:var(--text-tf-body-sm)] font-medium')\n\nconst ADORNMENT_BOX = 'absolute top-1/2 flex -translate-y-1/2 items-center text-tf-muted tf-icons'\n\nconst ADORNMENT = `pointer-events-none ${ADORNMENT_BOX}`\n\nconst ADORNMENT_EDGE = 'text-tf-body [&_svg]:size-tf-icon-lg'\n\nconst leadingRecipe = cva(`${ADORNMENT} left-4 ${ADORNMENT_EDGE}`)\n\nconst trailingRecipe = cva(`${ADORNMENT} right-4 ${ADORNMENT_EDGE}`)\n\nconst TRAILING_HIT = hitArea('after:h-tf-control-sm', 'after:w-tf-control-sm')\n\nconst trailingActionRecipe = cva([\n  ADORNMENT_BOX,\n  ADORNMENT_EDGE,\n  'right-4 cursor-pointer',\n  'interactive:hovered:text-tf-fg',\n  'tf-transition motion-reduce:transition-none',\n  TRAILING_HIT,\n  ...controlReach,\n  ...controlInert,\n])\n\nexport {\n  fieldErrorRecipe,\n  fieldFootRecipe,\n  fieldHintRecipe,\n  fieldLabelRecipe,\n  fieldRecipe,\n  fieldRowRecipe,\n  fieldUnitRecipe,\n  leadingRecipe,\n  trailingActionRecipe,\n  trailingRecipe,\n}\n"],"mappings":";;;;;AAOA,MAAM,UAAU;CACd;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,SAAS;CACb;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,UAAU;CACd;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,cAAc,CAClB,6CACA,uDACF;AAEA,MAAM,sBAAsB;CAC1B,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,mBAAmB,CACvB,yDACA,kDACF;AAEA,MAAM,WAAW,SAA8B;CAC7C;CACA;CACA,GAAG,aAAa,aAAa,oBAAoB,KAAK;CACtD,GAAG;AACL;AAEA,MAAM,SAAS;CACb,IAAI,CAAC,GAAG,QAAQ,IAAI,GAAG,WAAW,EAAE,CAAC,CAAC,KAAK,GAAG;CAC9C,IAAI,CAAC,GAAG,QAAQ,IAAI,GAAG,WAAW,EAAE,CAAC,CAAC,KAAK,GAAG;AAChD;AAEA,MAAM,cAAc,IAAI,CAAC,uDAAuD,UAAU,GAAG;CAC3F,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EAAE,OAAO;EAAwB,MAAM;CAAuB,EACzE;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,aAAa;CACtC,iBAAiB;EAAE,SAAS;EAAO,SAAS;EAAO,MAAA;CAAuB;CAC1E,UAAU;EACR,SAAS;GAAE,OAAO;GAAS,MAAM;EAAO;EACxC,SAAS;GAAE,OAAO;GAAI,MAAM;EAAQ;EACpC,MAAM;CACR;AACF,CAAC;AAED,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB;EAAE,QAAQ;EAAO,SAAS;EAAO,MAAA;CAAuB;CACzE,UAAU;EACR,QAAQ;GAAE,OAAO;GAAI,MAAM;EAAU;EACrC,SAAS;GAAE,OAAO;GAAU,MAAM;EAAU;EAC5C,MAAM;CACR;AACF,CACF;AAEA,MAAM,UAAU;AAEhB,MAAM,kBAAkB,IAAI,GAAG,QAAQ,eAAe;AAEtD,MAAM,mBAAmB,IAAI,GAAG,QAAQ,gCAAgC;CACtE,iBAAiB,EAAE,OAAO,MAAM;CAChC,UAAU,EACR,OAAO;EAAE,OAAO;EAAc,MAAM;CAAY,EAClD;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI;CAC1B;CACA;CACA;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,6DAA6D;AAEzF,MAAM,gBAAgB;AAEtB,MAAM,YAAY,uBAAuB;AAEzC,MAAM,iBAAiB;AAEvB,MAAM,gBAAgB,IAAI,GAAG,UAAU,UAAU,gBAAgB;AAEjE,MAAM,iBAAiB,IAAI,GAAG,UAAU,WAAW,gBAAgB;AAEnE,MAAM,eAAe,QAAQ,yBAAyB,uBAAuB;AAE7E,MAAM,uBAAuB,IAAI;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;AACL,CAAC"}

package/dist/recipes/findings.d.ts

@@ -0,0 +1,11 @@
+//#region src/recipes/findings.d.ts
+declare const findingsRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const findingRecipe: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const findingIconRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const findingTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const findingPathRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const findingMessageRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const findingsSummaryRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { findingIconRecipe, findingMessageRecipe, findingPathRecipe, findingRecipe, findingTextRecipe, findingsRecipe, findingsSummaryRecipe };
+//# sourceMappingURL=findings.d.ts.map

package/dist/recipes/findings.js

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/findings.ts
+const findingsRecipe = cva("flex flex-col gap-1");
+const findingRecipe = cva(["flex items-start gap-2 rounded-tf-control tf-tinted px-4 py-3 blend-tf-accent", "[&_svg]:size-tf-icon-sm [&_svg]:shrink-0"], {
+	defaultVariants: {},
+	variants: {}
+});
+const findingIconRecipe = cva("mt-0.5 flex-none");
+const findingTextRecipe = cva("flex min-w-0 flex-col gap-0");
+const findingPathRecipe = cva("truncate font-mono text-tf-caption-sm");
+const findingMessageRecipe = cva("text-tf-body-sm font-medium text-tf-fg");
+const findingsSummaryRecipe = cva("flex items-center gap-2 px-4 py-3 text-tf-caption-sm text-tf-muted");
+//#endregion
+export { findingIconRecipe, findingMessageRecipe, findingPathRecipe, findingRecipe, findingTextRecipe, findingsRecipe, findingsSummaryRecipe };
+
+//# sourceMappingURL=findings.js.map

package/dist/recipes/findings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"findings.js","names":[],"sources":["../../src/recipes/findings.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst findingsRecipe = cva('flex flex-col gap-1')\n\nconst findingRecipe = cva(\n  [\n    'flex items-start gap-2 rounded-tf-control tf-tinted px-4 py-3 blend-tf-accent',\n    '[&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ],\n  { defaultVariants: {}, variants: {} },\n)\n\nconst findingIconRecipe = cva('mt-0.5 flex-none')\n\nconst findingTextRecipe = cva('flex min-w-0 flex-col gap-0')\n\nconst findingPathRecipe = cva('truncate font-mono text-tf-caption-sm')\n\nconst findingMessageRecipe = cva('text-tf-body-sm font-medium text-tf-fg')\n\nconst findingsSummaryRecipe = cva(\n  'flex items-center gap-2 px-4 py-3 text-tf-caption-sm text-tf-muted',\n)\n\nexport {\n  findingIconRecipe,\n  findingMessageRecipe,\n  findingPathRecipe,\n  findingRecipe,\n  findingTextRecipe,\n  findingsRecipe,\n  findingsSummaryRecipe,\n}\n"],"mappings":";;AAEA,MAAM,iBAAiB,IAAI,qBAAqB;AAEhD,MAAM,gBAAgB,IACpB,CACE,iFACA,0CACF,GACA;CAAE,iBAAiB,CAAC;CAAG,UAAU,CAAC;AAAE,CACtC;AAEA,MAAM,oBAAoB,IAAI,kBAAkB;AAEhD,MAAM,oBAAoB,IAAI,6BAA6B;AAE3D,MAAM,oBAAoB,IAAI,uCAAuC;AAErE,MAAM,uBAAuB,IAAI,wCAAwC;AAEzE,MAAM,wBAAwB,IAC5B,oEACF"}

package/dist/recipes/heading.d.ts

@@ -0,0 +1,17 @@
+//#region src/recipes/heading.d.ts
+type HeadingLevel = 'display' | 'h2' | 'h3' | 'h4';
+declare const defaultHeadingLevel = "h3";
+declare const headingLevels: readonly ["display", "h2", "h3", "h4"];
+declare const headingRecipe: (props?: ({
+  level?: "h2" | "h3" | "h4" | "display" | null | undefined;
+  tabular?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const HEADING_DEFAULT_TAG: {
+  display: string;
+  h2: string;
+  h3: string;
+  h4: string;
+};
+//#endregion
+export { HEADING_DEFAULT_TAG, type HeadingLevel, defaultHeadingLevel, headingLevels, headingRecipe };
+//# sourceMappingURL=heading.d.ts.map

package/dist/recipes/heading.js

@@ -0,0 +1,37 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/heading.ts
+const defaultHeadingLevel = "h3";
+const headingLevels = [
+	"display",
+	"h2",
+	"h3",
+	"h4"
+];
+const headingRecipe = cva(["font-tf-display font-bold tracking-tf-tight text-tf-fg"], {
+	defaultVariants: {
+		level: "h3",
+		tabular: false
+	},
+	variants: {
+		level: {
+			display: "text-tf-display",
+			h2: "text-tf-h2",
+			h3: "text-tf-h3",
+			h4: "text-tf-h4"
+		},
+		tabular: {
+			false: "",
+			true: "tabular-nums"
+		}
+	}
+});
+const HEADING_DEFAULT_TAG = {
+	display: "h1",
+	h2: "h2",
+	h3: "h3",
+	h4: "h3"
+};
+//#endregion
+export { HEADING_DEFAULT_TAG, defaultHeadingLevel, headingLevels, headingRecipe };
+
+//# sourceMappingURL=heading.js.map

package/dist/recipes/heading.js.map

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

package/dist/recipes/heartbeat.d.ts

@@ -0,0 +1,23 @@
+//#region src/recipes/heartbeat.d.ts
+declare const heartbeatStates: readonly ["beating", "late", "silent"];
+type HeartbeatState = (typeof heartbeatStates)[number];
+declare const defaultHeartbeatState = "beating";
+declare const heartbeatRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const heartbeatRowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const heartbeatMarkRecipe: (props?: ({
+  state?: "beating" | "late" | "silent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const heartbeatRingRecipe: (props?: ({
+  state?: "beating" | "late" | "silent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const heartbeatDotRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const heartbeatTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const heartbeatLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const heartbeatHintRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const heartbeatBeatsRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const heartbeatBeatRecipe: (props?: ({
+  flagged?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { type HeartbeatState, defaultHeartbeatState, heartbeatBeatRecipe, heartbeatBeatsRecipe, heartbeatDotRecipe, heartbeatHintRecipe, heartbeatLabelRecipe, heartbeatMarkRecipe, heartbeatRecipe, heartbeatRingRecipe, heartbeatRowRecipe, heartbeatStates, heartbeatTextRecipe };
+//# sourceMappingURL=heartbeat.d.ts.map

package/dist/recipes/heartbeat.js

@@ -0,0 +1,43 @@
+import { toneBlend } from "../tone.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/heartbeat.ts
+const heartbeatStates = [
+	"beating",
+	"late",
+	"silent"
+];
+const defaultHeartbeatState = "beating";
+const heartbeatRecipe = cva(["flex flex-col gap-4 rounded-tf-block bg-tf-sunken p-6", "font-tf-body text-tf-fg"]);
+const heartbeatRowRecipe = cva("flex items-center gap-3");
+const heartbeatMarkRecipe = cva("relative flex size-tf-mark-dot flex-none", {
+	defaultVariants: { state: defaultHeartbeatState },
+	variants: { state: {
+		beating: toneBlend.success,
+		late: toneBlend.warning,
+		silent: toneBlend.danger
+	} }
+});
+const heartbeatRingRecipe = cva(["absolute inset-0 rounded-tf-pill bg-tf-blend"], {
+	defaultVariants: { state: defaultHeartbeatState },
+	variants: { state: {
+		beating: "tf-pinging",
+		late: "tf-pinging",
+		silent: ""
+	} }
+});
+const heartbeatDotRecipe = cva(["relative size-tf-mark-dot rounded-tf-pill bg-tf-blend"]);
+const heartbeatTextRecipe = cva("flex min-w-0 flex-1 flex-col gap-0");
+const heartbeatLabelRecipe = cva("text-tf-body-sm font-medium text-tf-fg");
+const heartbeatHintRecipe = cva("text-tf-caption-sm text-tf-muted");
+const heartbeatBeatsRecipe = cva("flex h-9 items-end gap-0.5");
+const heartbeatBeatRecipe = cva("flex-1 rounded-tf-inline", {
+	defaultVariants: { flagged: false },
+	variants: { flagged: {
+		false: "bg-tf-accent-surface",
+		true: "bg-tf-warning-hi"
+	} }
+});
+//#endregion
+export { defaultHeartbeatState, heartbeatBeatRecipe, heartbeatBeatsRecipe, heartbeatDotRecipe, heartbeatHintRecipe, heartbeatLabelRecipe, heartbeatMarkRecipe, heartbeatRecipe, heartbeatRingRecipe, heartbeatRowRecipe, heartbeatStates, heartbeatTextRecipe };
+
+//# sourceMappingURL=heartbeat.js.map

package/dist/recipes/heartbeat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heartbeat.js","names":[],"sources":["../../src/recipes/heartbeat.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { toneBlend } from '#tone'\n\nconst heartbeatStates = ['beating', 'late', 'silent'] as const\n\ntype HeartbeatState = (typeof heartbeatStates)[number]\n\nconst defaultHeartbeatState = 'beating' satisfies HeartbeatState\n\nconst heartbeatRecipe = cva([\n  'flex flex-col gap-4 rounded-tf-block bg-tf-sunken p-6',\n  'font-tf-body text-tf-fg',\n])\n\nconst heartbeatRowRecipe = cva('flex items-center gap-3')\n\nconst heartbeatMarkRecipe = cva('relative flex size-tf-mark-dot flex-none', {\n  defaultVariants: { state: defaultHeartbeatState },\n  variants: {\n    state: {\n      beating: toneBlend.success,\n      late: toneBlend.warning,\n      silent: toneBlend.danger,\n    },\n  },\n})\n\nconst heartbeatRingRecipe = cva(['absolute inset-0 rounded-tf-pill bg-tf-blend'], {\n  defaultVariants: { state: defaultHeartbeatState },\n  variants: {\n    state: {\n      beating: 'tf-pinging',\n      late: 'tf-pinging',\n      silent: '',\n    } satisfies Record<HeartbeatState, string>,\n  },\n})\n\nconst heartbeatDotRecipe = cva(['relative size-tf-mark-dot rounded-tf-pill bg-tf-blend'])\n\nconst heartbeatTextRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nconst heartbeatLabelRecipe = cva('text-tf-body-sm font-medium text-tf-fg')\n\nconst heartbeatHintRecipe = cva('text-tf-caption-sm text-tf-muted')\n\nconst heartbeatBeatsRecipe = cva('flex h-9 items-end gap-0.5')\n\nconst heartbeatBeatRecipe = cva('flex-1 rounded-tf-inline', {\n  defaultVariants: { flagged: false },\n  variants: {\n    flagged: {\n      false: 'bg-tf-accent-surface',\n      true: 'bg-tf-warning-hi',\n    },\n  },\n})\n\nexport {\n  type HeartbeatState,\n  defaultHeartbeatState,\n  heartbeatBeatRecipe,\n  heartbeatBeatsRecipe,\n  heartbeatDotRecipe,\n  heartbeatHintRecipe,\n  heartbeatLabelRecipe,\n  heartbeatMarkRecipe,\n  heartbeatRecipe,\n  heartbeatRingRecipe,\n  heartbeatRowRecipe,\n  heartbeatStates,\n  heartbeatTextRecipe,\n}\n"],"mappings":";;;AAIA,MAAM,kBAAkB;CAAC;CAAW;CAAQ;AAAQ;AAIpD,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB,IAAI,CAC1B,yDACA,yBACF,CAAC;AAED,MAAM,qBAAqB,IAAI,yBAAyB;AAExD,MAAM,sBAAsB,IAAI,4CAA4C;CAC1E,iBAAiB,EAAE,OAAO,sBAAsB;CAChD,UAAU,EACR,OAAO;EACL,SAAS,UAAU;EACnB,MAAM,UAAU;EAChB,QAAQ,UAAU;CACpB,EACF;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,CAAC,8CAA8C,GAAG;CAChF,iBAAiB,EAAE,OAAO,sBAAsB;CAChD,UAAU,EACR,OAAO;EACL,SAAS;EACT,MAAM;EACN,QAAQ;CACV,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAAC,uDAAuD,CAAC;AAExF,MAAM,sBAAsB,IAAI,oCAAoC;AAEpE,MAAM,uBAAuB,IAAI,wCAAwC;AAEzE,MAAM,sBAAsB,IAAI,kCAAkC;AAElE,MAAM,uBAAuB,IAAI,4BAA4B;AAE7D,MAAM,sBAAsB,IAAI,4BAA4B;CAC1D,iBAAiB,EAAE,SAAS,MAAM;CAClC,UAAU,EACR,SAAS;EACP,OAAO;EACP,MAAM;CACR,EACF;AACF,CAAC"}

package/dist/recipes/input.d.ts

@@ -0,0 +1,17 @@
+//#region src/recipes/input.d.ts
+declare const inputTypes: readonly ["text", "email", "tel", "url", "search", "password"];
+type InputType = (typeof inputTypes)[number];
+declare const TRAILING_INSET = "pr-13";
+declare const labelRoom: {
+  lg: string;
+  md: string;
+};
+declare const inputRecipe: (props?: ({
+  labelled?: boolean | null | undefined;
+  leading?: boolean | null | undefined;
+  size?: "md" | "lg" | null | undefined;
+  trailing?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { type InputType, TRAILING_INSET, inputRecipe, inputTypes, labelRoom };
+//# sourceMappingURL=input.d.ts.map

package/dist/recipes/input.js

@@ -0,0 +1,90 @@
+import "../control.js";
+import { controlFocus, controlInert } from "../parts/control.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/input.ts
+const inputTypes = [
+	"text",
+	"email",
+	"tel",
+	"url",
+	"search",
+	"password"
+];
+const INPUT_INSET = "px-4";
+const LEADING_INSET = "pl-13";
+const TRAILING_INSET = "pr-13";
+const labelRoom = {
+	lg: "pt-6 pb-2",
+	md: "pt-5 pb-1"
+};
+const inputRecipe = cva([
+	...[
+		"size-full bg-transparent text-tf-fg tf-writes",
+		"placeholder:text-tf-muted placeholder:opacity-0",
+		"data-readonly:text-tf-muted",
+		"disabled:cursor-not-allowed"
+	],
+	...controlFocus,
+	...controlInert
+], {
+	compoundVariants: [
+		{
+			class: labelRoom.lg,
+			labelled: true,
+			size: "lg"
+		},
+		{
+			class: labelRoom.md,
+			labelled: true,
+			size: "md"
+		},
+		{
+			class: INPUT_INSET,
+			leading: false,
+			trailing: false
+		},
+		{
+			class: `${LEADING_INSET} pr-3`,
+			leading: true,
+			trailing: false
+		},
+		{
+			class: `${TRAILING_INSET} pl-4`,
+			leading: false,
+			trailing: true
+		},
+		{
+			class: `${LEADING_INSET} ${TRAILING_INSET}`,
+			leading: true,
+			trailing: true
+		}
+	],
+	defaultVariants: {
+		labelled: true,
+		leading: false,
+		size: "lg",
+		trailing: false
+	},
+	variants: {
+		labelled: {
+			false: "placeholder:opacity-100",
+			true: ""
+		},
+		leading: {
+			false: "",
+			true: ""
+		},
+		size: {
+			lg: "",
+			md: ""
+		},
+		trailing: {
+			false: "",
+			true: ""
+		}
+	}
+});
+//#endregion
+export { TRAILING_INSET, inputRecipe, inputTypes, labelRoom };
+
+//# sourceMappingURL=input.js.map

package/dist/recipes/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../src/recipes/input.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\nimport { controlFocus, controlInert } from '#parts/control'\n\nconst inputTypes = ['text', 'email', 'tel', 'url', 'search', 'password'] as const\n\ntype InputType = (typeof inputTypes)[number]\n\nconst INPUT_INSET = 'px-4'\nconst LEADING_INSET = 'pl-13'\nconst TRAILING_INSET = 'pr-13'\n\nconst labelRoom = {\n  lg: 'pt-6 pb-2',\n  md: 'pt-5 pb-1',\n} satisfies Record<FieldSize, string>\n\nconst inputSurface = [\n  'size-full bg-transparent text-tf-fg tf-writes',\n  'placeholder:text-tf-muted placeholder:opacity-0',\n  'data-readonly:text-tf-muted',\n  'disabled:cursor-not-allowed',\n]\n\nconst inputRecipe = cva([...inputSurface, ...controlFocus, ...controlInert], {\n  compoundVariants: [\n    { class: labelRoom.lg, labelled: true, size: 'lg' },\n    { class: labelRoom.md, labelled: true, size: 'md' },\n    { class: INPUT_INSET, leading: false, trailing: false },\n    { class: `${LEADING_INSET} pr-3`, leading: true, trailing: false },\n    { class: `${TRAILING_INSET} pl-4`, leading: false, trailing: true },\n    { class: `${LEADING_INSET} ${TRAILING_INSET}`, leading: true, trailing: true },\n  ],\n  defaultVariants: {\n    labelled: true,\n    leading: false,\n    size: defaultFieldSize,\n    trailing: false,\n  },\n  variants: {\n    labelled: { false: 'placeholder:opacity-100', true: '' },\n    leading: { false: '', true: '' },\n    size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n    trailing: { false: '', true: '' },\n  },\n})\n\nexport { type InputType, inputRecipe, inputTypes, labelRoom, TRAILING_INSET }\n"],"mappings":";;;;AAMA,MAAM,aAAa;CAAC;CAAQ;CAAS;CAAO;CAAO;CAAU;AAAU;AAIvE,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AAEvB,MAAM,YAAY;CAChB,IAAI;CACJ,IAAI;AACN;AASA,MAAM,cAAc,IAAI;CAAC,GAAG;EAN1B;EACA;EACA;EACA;CAGqC;CAAG,GAAG;CAAc,GAAG;AAAY,GAAG;CAC3E,kBAAkB;EAChB;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;EAClD;GAAE,OAAO,UAAU;GAAI,UAAU;GAAM,MAAM;EAAK;EAClD;GAAE,OAAO;GAAa,SAAS;GAAO,UAAU;EAAM;EACtD;GAAE,OAAO,GAAG,cAAc;GAAQ,SAAS;GAAM,UAAU;EAAM;EACjE;GAAE,OAAO,GAAG,eAAe;GAAQ,SAAS;GAAO,UAAU;EAAK;EAClE;GAAE,OAAO,GAAG,cAAc,GAAG;GAAkB,SAAS;GAAM,UAAU;EAAK;CAC/E;CACA,iBAAiB;EACf,UAAU;EACV,SAAS;EACT,MAAA;EACA,UAAU;CACZ;CACA,UAAU;EACR,UAAU;GAAE,OAAO;GAA2B,MAAM;EAAG;EACvD,SAAS;GAAE,OAAO;GAAI,MAAM;EAAG;EAC/B,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;EACvB,UAAU;GAAE,OAAO;GAAI,MAAM;EAAG;CAClC;AACF,CAAC"}

package/dist/recipes/listItem.d.ts

@@ -0,0 +1,6 @@
+//#region src/recipes/listItem.d.ts
+declare const listItemRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const listItemStackRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { listItemRecipe, listItemStackRecipe };
+//# sourceMappingURL=listItem.d.ts.map

package/dist/recipes/listItem.js

@@ -0,0 +1,8 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/listItem.ts
+const listItemRecipe = cva("flex min-w-0 items-center gap-4");
+const listItemStackRecipe = cva("flex min-w-0 flex-1 flex-col gap-0");
+//#endregion
+export { listItemRecipe, listItemStackRecipe };
+
+//# sourceMappingURL=listItem.js.map

package/dist/recipes/listItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listItem.js","names":[],"sources":["../../src/recipes/listItem.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst listItemRecipe = cva('flex min-w-0 items-center gap-4')\n\nconst listItemStackRecipe = cva('flex min-w-0 flex-1 flex-col gap-0')\n\nexport { listItemRecipe, listItemStackRecipe }\n"],"mappings":";;AAEA,MAAM,iBAAiB,IAAI,iCAAiC;AAE5D,MAAM,sBAAsB,IAAI,oCAAoC"}

package/dist/recipes/listbox.d.ts

@@ -0,0 +1,12 @@
+//#region src/recipes/listbox.d.ts
+type ListboxMark = 'lit' | 'chosen';
+declare const listboxRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const listboxLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const listboxItemRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const listboxMarkRecipe: (props?: ({
+  mark?: "lit" | "chosen" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const listboxEmptyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { type ListboxMark, listboxEmptyRecipe, listboxItemRecipe, listboxLabelRecipe, listboxMarkRecipe, listboxRecipe };
+//# sourceMappingURL=listbox.d.ts.map

package/dist/recipes/listbox.js

@@ -0,0 +1,29 @@
+import { controlInert } from "../parts/control.js";
+import { travelMarkBase } from "../parts/travel.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/listbox.ts
+const RAIL = [
+	"before:absolute before:inset-y-3 before:left-0 before:w-0.5",
+	"before:rounded-tf-pill before:bg-tf-accent-hi",
+	"before:content-['']"
+].join(" ");
+const listboxRecipe = cva(["relative isolate flex min-w-0 flex-col gap-1", "font-tf-body outline-hidden"]);
+const listboxLabelRecipe = cva("sr-only");
+const listboxItemRecipe = cva([
+	"relative rounded-tf-control px-4 py-3",
+	"cursor-pointer select-none tf-transition motion-reduce:transition-none",
+	"data-selected:text-tf-fg",
+	...controlInert
+]);
+const listboxMarkRecipe = cva([...travelMarkBase, "inset-x-0 h-(--tf-travel-height) tf-rails"], {
+	defaultVariants: { mark: "lit" },
+	variants: { mark: {
+		chosen: `rounded-tf-control bg-tf-accent-tint ${RAIL}`,
+		lit: "rounded-tf-control bg-tf-panel-hi"
+	} }
+});
+const listboxEmptyRecipe = cva(["flex h-tf-control-lg flex-none items-center justify-center px-4", "text-tf-caption font-medium text-tf-muted"]);
+//#endregion
+export { listboxEmptyRecipe, listboxItemRecipe, listboxLabelRecipe, listboxMarkRecipe, listboxRecipe };
+
+//# sourceMappingURL=listbox.js.map

package/dist/recipes/listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.js","names":[],"sources":["../../src/recipes/listbox.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert } from '#parts/control'\nimport { travelMarkBase } from '#parts/travel'\n\ntype ListboxMark = 'lit' | 'chosen'\n\nconst RAIL = [\n  'before:absolute before:inset-y-3 before:left-0 before:w-0.5',\n  'before:rounded-tf-pill before:bg-tf-accent-hi',\n  \"before:content-['']\",\n].join(' ')\n\nconst listboxRecipe = cva([\n  'relative isolate flex min-w-0 flex-col gap-1',\n  'font-tf-body outline-hidden',\n])\n\nconst listboxLabelRecipe = cva('sr-only')\n\nconst listboxItemRecipe = cva([\n  'relative rounded-tf-control px-4 py-3',\n  'cursor-pointer select-none tf-transition motion-reduce:transition-none',\n  'data-selected:text-tf-fg',\n  ...controlInert,\n])\n\nconst listboxMarkRecipe = cva([...travelMarkBase, 'inset-x-0 h-(--tf-travel-height) tf-rails'], {\n  defaultVariants: { mark: 'lit' },\n  variants: {\n    mark: {\n      chosen: `rounded-tf-control bg-tf-accent-tint ${RAIL}`,\n      lit: 'rounded-tf-control bg-tf-panel-hi',\n    } satisfies Record<ListboxMark, string>,\n  },\n})\n\nconst listboxEmptyRecipe = cva([\n  'flex h-tf-control-lg flex-none items-center justify-center px-4',\n  'text-tf-caption font-medium text-tf-muted',\n])\n\nexport {\n  type ListboxMark,\n  listboxEmptyRecipe,\n  listboxItemRecipe,\n  listboxLabelRecipe,\n  listboxMarkRecipe,\n  listboxRecipe,\n}\n"],"mappings":";;;;AAOA,MAAM,OAAO;CACX;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,gBAAgB,IAAI,CACxB,gDACA,6BACF,CAAC;AAED,MAAM,qBAAqB,IAAI,SAAS;AAExC,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA,GAAG;AACL,CAAC;AAED,MAAM,oBAAoB,IAAI,CAAC,GAAG,gBAAgB,2CAA2C,GAAG;CAC9F,iBAAiB,EAAE,MAAM,MAAM;CAC/B,UAAU,EACR,MAAM;EACJ,QAAQ,wCAAwC;EAChD,KAAK;CACP,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,IAAI,CAC7B,mEACA,2CACF,CAAC"}

package/dist/recipes/marquee.d.ts

@@ -0,0 +1,19 @@
+//#region src/recipes/marquee.d.ts
+interface MarqueeItem {
+  name: string;
+  src: string;
+}
+declare const marqueeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const marqueeRuleRecipe: (props?: ({
+  edge?: "head" | "foot" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const marqueeStageRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const marqueeViewportRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const marqueeCopyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const marqueeItemRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const marqueeMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const marqueeNameRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const marqueeSpacing = "3rem";
+//#endregion
+export { type MarqueeItem, marqueeCopyRecipe, marqueeItemRecipe, marqueeMarkRecipe, marqueeNameRecipe, marqueeRecipe, marqueeRuleRecipe, marqueeSpacing, marqueeStageRecipe, marqueeViewportRecipe };
+//# sourceMappingURL=marquee.d.ts.map

package/dist/recipes/marquee.js

@@ -0,0 +1,36 @@
+import { ruleFading } from "../parts/rule.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/marquee.ts
+const WRAPS = "motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center";
+const marqueeRecipe = cva([
+	"relative isolate py-8",
+	"font-tf-body",
+	"tf-slows hovered:[--tf-marquee-rate:0]"
+]);
+const marqueeRuleRecipe = cva(`absolute inset-x-0 ${ruleFading}`, {
+	defaultVariants: { edge: "head" },
+	variants: { edge: {
+		foot: "bottom-0",
+		head: "top-0"
+	} }
+});
+const marqueeStageRecipe = cva("w-full");
+const marqueeViewportRecipe = cva(["relative overflow-hidden", "tf-faded-x motion-reduce:mask-none"]);
+const marqueeCopyRecipe = cva([
+	"tf-looping items-center",
+	"motion-reduce:gap-y-4 motion-reduce:data-clone:hidden",
+	WRAPS
+]);
+const marqueeItemRecipe = cva([
+	"flex flex-none items-center gap-3",
+	"cursor-default select-none",
+	"text-tf-muted hovered:text-tf-fg",
+	"tf-ink-glide tf-transition"
+]);
+const marqueeMarkRecipe = cva("block size-tf-icon-solo-lg bg-contain bg-center bg-no-repeat");
+const marqueeNameRecipe = cva("font-tf-display text-tf-h4 font-bold whitespace-nowrap");
+const marqueeSpacing = "3rem";
+//#endregion
+export { marqueeCopyRecipe, marqueeItemRecipe, marqueeMarkRecipe, marqueeNameRecipe, marqueeRecipe, marqueeRuleRecipe, marqueeSpacing, marqueeStageRecipe, marqueeViewportRecipe };
+
+//# sourceMappingURL=marquee.js.map

package/dist/recipes/marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.js","names":[],"sources":["../../src/recipes/marquee.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { ruleFading } from '#parts/rule'\n\ninterface MarqueeItem {\n  name: string\n  src: string\n}\n\nconst WRAPS = 'motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center'\n\nconst marqueeRecipe = cva([\n  'relative isolate py-8',\n  'font-tf-body',\n  'tf-slows hovered:[--tf-marquee-rate:0]',\n])\n\nconst marqueeRuleRecipe = cva(`absolute inset-x-0 ${ruleFading}`, {\n  defaultVariants: { edge: 'head' },\n  variants: { edge: { foot: 'bottom-0', head: 'top-0' } },\n})\n\nconst marqueeStageRecipe = cva('w-full')\n\nconst marqueeViewportRecipe = cva([\n  'relative overflow-hidden',\n  'tf-faded-x motion-reduce:mask-none',\n])\n\nconst marqueeCopyRecipe = cva([\n  'tf-looping items-center',\n  'motion-reduce:gap-y-4 motion-reduce:data-clone:hidden',\n  WRAPS,\n])\n\nconst marqueeItemRecipe = cva([\n  'flex flex-none items-center gap-3',\n  'cursor-default select-none',\n  'text-tf-muted hovered:text-tf-fg',\n  'tf-ink-glide tf-transition',\n])\n\nconst marqueeMarkRecipe = cva('block size-tf-icon-solo-lg bg-contain bg-center bg-no-repeat')\n\nconst marqueeNameRecipe = cva('font-tf-display text-tf-h4 font-bold whitespace-nowrap')\n\nconst marqueeSpacing = '3rem'\n\nexport {\n  type MarqueeItem,\n  marqueeCopyRecipe,\n  marqueeItemRecipe,\n  marqueeMarkRecipe,\n  marqueeNameRecipe,\n  marqueeRecipe,\n  marqueeRuleRecipe,\n  marqueeSpacing,\n  marqueeStageRecipe,\n  marqueeViewportRecipe,\n}\n"],"mappings":";;;AASA,MAAM,QAAQ;AAEd,MAAM,gBAAgB,IAAI;CACxB;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,sBAAsB,cAAc;CAChE,iBAAiB,EAAE,MAAM,OAAO;CAChC,UAAU,EAAE,MAAM;EAAE,MAAM;EAAY,MAAM;CAAQ,EAAE;AACxD,CAAC;AAED,MAAM,qBAAqB,IAAI,QAAQ;AAEvC,MAAM,wBAAwB,IAAI,CAChC,4BACA,oCACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,8DAA8D;AAE5F,MAAM,oBAAoB,IAAI,wDAAwD;AAEtF,MAAM,iBAAiB"}

package/dist/recipes/menu.d.ts

@@ -0,0 +1,26 @@
+//#region src/recipes/menu.d.ts
+type MenuTone = 'neutral' | 'danger';
+declare const defaultMenuTone = "neutral";
+declare const menuTones: readonly ["neutral", "danger"];
+type MenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+declare const defaultMenuPlacement = "bottom-start";
+declare const menuPlacements: readonly ["bottom-start", "bottom-end", "top-start", "top-end", "right-start", "right-end", "left-start", "left-end"];
+declare const menuSurfaceRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const menuListRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const menuMarkRecipe: (props?: ({
+  tone?: "danger" | "neutral" | "chosen" | null | undefined;
+  within?: "surface" | "list" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const menuGroupRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const menuItemRecipe: (props?: ({
+  tone?: "danger" | "neutral" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const menuLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const menuTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const menuShortcutRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const menuSeparatorRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const menuArrowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const menuArrowTipRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { type MenuPlacement, type MenuTone, defaultMenuPlacement, defaultMenuTone, menuArrowRecipe, menuArrowTipRecipe, menuGroupRecipe, menuItemRecipe, menuLabelRecipe, menuListRecipe, menuMarkRecipe, menuPlacements, menuSeparatorRecipe, menuShortcutRecipe, menuSurfaceRecipe, menuTextRecipe, menuTones };
+//# sourceMappingURL=menu.d.ts.map