@techfides/ui-library-design 0.1.0

package/dist/recipes/codeEditor.js

@@ -0,0 +1,71 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/codeEditor.ts
+const PAD = "calc(var(--spacing) * 4)";
+const LIFT = "var(--color-tf-panel-2)";
+const LEADING = "var(--text-tf-caption-sm--line-height)";
+const codeEditorRecipe = cva([
+	"relative isolate w-full overflow-hidden rounded-tf-control",
+	"empty:min-h-(--tf-code-height)",
+	"bg-tf-sunken font-tf-body blend-tf-accent",
+	"tf-edge-sweep tf-edge-plain reached:tf-edge-lit",
+	"tf-transition motion-reduce:transition-none"
+]);
+const codeEditorTheme = {
+	"&": {
+		backgroundColor: "transparent",
+		color: "var(--color-tf-fg)",
+		fontSize: "var(--text-tf-caption-sm)",
+		lineHeight: LEADING,
+		maxHeight: "var(--tf-code-height)"
+	},
+	"&.cm-focused": { outline: "none" },
+	"&:not(.cm-focused) .cm-activeLine": { backgroundColor: "transparent" },
+	"&:not(.cm-focused) .cm-activeLineGutter": {
+		backgroundColor: "transparent",
+		color: "inherit"
+	},
+	".cm-activeLine": { backgroundColor: LIFT },
+	".cm-activeLineGutter": {
+		backgroundColor: LIFT,
+		color: "var(--color-tf-fg)"
+	},
+	".cm-content": {
+		caretColor: "var(--color-tf-accent-hi)",
+		fontFamily: "var(--font-mono)",
+		padding: "0"
+	},
+	".cm-cursor": { borderLeftColor: "var(--color-tf-accent-hi)" },
+	".cm-gutters": {
+		backgroundColor: "transparent",
+		border: "none",
+		color: "var(--color-tf-muted)",
+		fontFamily: "var(--font-mono)",
+		paddingLeft: PAD
+	},
+	".cm-line": {
+		padding: `0 ${PAD}`,
+		transition: "background-color var(--tf-timing-quick)"
+	},
+	".cm-lineNumbers .cm-gutterElement": { minWidth: "calc(var(--spacing) * 4)" },
+	".cm-placeholder": { color: "var(--color-tf-muted)" },
+	".cm-scroller": {
+		fontFamily: "inherit",
+		lineHeight: LEADING,
+		overflow: "auto",
+		padding: `${PAD} 0`,
+		scrollbarColor: "var(--color-tf-line-hi) transparent",
+		scrollbarWidth: "thin"
+	},
+	".cm-selectionBackground": { backgroundColor: "var(--color-tf-control) !important" }
+};
+const codeSyntaxColors = {
+	key: "var(--color-tf-info-hi)",
+	literal: "var(--color-tf-accent-hi)",
+	number: "var(--color-tf-warning-hi)",
+	punctuation: "var(--color-tf-muted)",
+	text: "var(--color-tf-success-hi)"
+};
+//#endregion
+export { codeEditorRecipe, codeEditorTheme, codeSyntaxColors };
+
+//# sourceMappingURL=codeEditor.js.map

package/dist/recipes/codeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeEditor.js","names":[],"sources":["../../src/recipes/codeEditor.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst PAD = 'calc(var(--spacing) * 4)'\n\nconst LIFT = 'var(--color-tf-panel-2)'\n\nconst LEADING = 'var(--text-tf-caption-sm--line-height)'\n\nconst codeEditorRecipe = cva([\n  'relative isolate w-full overflow-hidden rounded-tf-control',\n  'empty:min-h-(--tf-code-height)',\n  'bg-tf-sunken font-tf-body blend-tf-accent',\n  'tf-edge-sweep tf-edge-plain reached:tf-edge-lit',\n  'tf-transition motion-reduce:transition-none',\n])\n\nconst codeEditorTheme = {\n  '&': {\n    backgroundColor: 'transparent',\n    color: 'var(--color-tf-fg)',\n    fontSize: 'var(--text-tf-caption-sm)',\n    lineHeight: LEADING,\n    maxHeight: 'var(--tf-code-height)',\n  },\n  '&.cm-focused': { outline: 'none' },\n  '&:not(.cm-focused) .cm-activeLine': { backgroundColor: 'transparent' },\n  '&:not(.cm-focused) .cm-activeLineGutter': {\n    backgroundColor: 'transparent',\n    color: 'inherit',\n  },\n  '.cm-activeLine': { backgroundColor: LIFT },\n  '.cm-activeLineGutter': { backgroundColor: LIFT, color: 'var(--color-tf-fg)' },\n  '.cm-content': {\n    caretColor: 'var(--color-tf-accent-hi)',\n    fontFamily: 'var(--font-mono)',\n    padding: '0',\n  },\n  '.cm-cursor': { borderLeftColor: 'var(--color-tf-accent-hi)' },\n  '.cm-gutters': {\n    backgroundColor: 'transparent',\n    border: 'none',\n    color: 'var(--color-tf-muted)',\n    fontFamily: 'var(--font-mono)',\n    paddingLeft: PAD,\n  },\n  '.cm-line': {\n    padding: `0 ${PAD}`,\n    transition: 'background-color var(--tf-timing-quick)',\n  },\n  '.cm-lineNumbers .cm-gutterElement': { minWidth: 'calc(var(--spacing) * 4)' },\n  '.cm-placeholder': { color: 'var(--color-tf-muted)' },\n  '.cm-scroller': {\n    fontFamily: 'inherit',\n    lineHeight: LEADING,\n    overflow: 'auto',\n    padding: `${PAD} 0`,\n    scrollbarColor: 'var(--color-tf-line-hi) transparent',\n    scrollbarWidth: 'thin',\n  },\n  '.cm-selectionBackground': { backgroundColor: 'var(--color-tf-control) !important' },\n}\n\nconst codeSyntaxColors = {\n  key: 'var(--color-tf-info-hi)',\n  literal: 'var(--color-tf-accent-hi)',\n  number: 'var(--color-tf-warning-hi)',\n  punctuation: 'var(--color-tf-muted)',\n  text: 'var(--color-tf-success-hi)',\n}\n\nexport { codeEditorRecipe, codeEditorTheme, codeSyntaxColors }\n"],"mappings":";;AAEA,MAAM,MAAM;AAEZ,MAAM,OAAO;AAEb,MAAM,UAAU;AAEhB,MAAM,mBAAmB,IAAI;CAC3B;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,kBAAkB;CACtB,KAAK;EACH,iBAAiB;EACjB,OAAO;EACP,UAAU;EACV,YAAY;EACZ,WAAW;CACb;CACA,gBAAgB,EAAE,SAAS,OAAO;CAClC,qCAAqC,EAAE,iBAAiB,cAAc;CACtE,2CAA2C;EACzC,iBAAiB;EACjB,OAAO;CACT;CACA,kBAAkB,EAAE,iBAAiB,KAAK;CAC1C,wBAAwB;EAAE,iBAAiB;EAAM,OAAO;CAAqB;CAC7E,eAAe;EACb,YAAY;EACZ,YAAY;EACZ,SAAS;CACX;CACA,cAAc,EAAE,iBAAiB,4BAA4B;CAC7D,eAAe;EACb,iBAAiB;EACjB,QAAQ;EACR,OAAO;EACP,YAAY;EACZ,aAAa;CACf;CACA,YAAY;EACV,SAAS,KAAK;EACd,YAAY;CACd;CACA,qCAAqC,EAAE,UAAU,2BAA2B;CAC5E,mBAAmB,EAAE,OAAO,wBAAwB;CACpD,gBAAgB;EACd,YAAY;EACZ,YAAY;EACZ,UAAU;EACV,SAAS,GAAG,IAAI;EAChB,gBAAgB;EAChB,gBAAgB;CAClB;CACA,2BAA2B,EAAE,iBAAiB,qCAAqC;AACrF;AAEA,MAAM,mBAAmB;CACvB,KAAK;CACL,SAAS;CACT,QAAQ;CACR,aAAa;CACb,MAAM;AACR"}

package/dist/recipes/datePicker.d.ts

@@ -0,0 +1,39 @@
+//#region src/recipes/datePicker.d.ts
+type DatePickerMode = 'single' | 'range';
+declare const defaultDatePickerMode = "single";
+declare const datePickerModes: readonly ["single", "range"];
+type DatePickerRangePreset = 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth' | 'thisQuarter' | 'lastQuarter' | 'thisYear' | 'lastYear' | 'last3Days' | 'last7Days' | 'last14Days' | 'last30Days' | 'last90Days';
+declare const datePickerRangePresets: readonly ["thisWeek", "lastWeek", "thisMonth", "lastMonth", "thisQuarter", "lastQuarter", "thisYear", "lastYear", "last3Days", "last7Days", "last14Days", "last30Days", "last90Days"];
+declare const datePickerRowRecipe: (props?: ({
+  ranged?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const datePickerTriggerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerDashRecipe: (props?: ({
+  filled?: boolean | null | undefined;
+  labelled?: boolean | null | undefined;
+  size?: "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const datePickerStartRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerEndRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerValueRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerContentRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerViewsRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerViewRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerHeadRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerRuleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerNavRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerViewTriggerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerRangeTextRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerBodyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerGridRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerWeekCellRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerDayRecipe: (props?: ({
+  roomy?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const datePickerFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const datePickerPresetRecipe: (props?: ({
+  current?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { type DatePickerMode, type DatePickerRangePreset, datePickerBodyRecipe, datePickerContentRecipe, datePickerDashRecipe, datePickerDayRecipe, datePickerEndRecipe, datePickerFootRecipe, datePickerGridRecipe, datePickerHeadRecipe, datePickerModes, datePickerNavRecipe, datePickerPresetRecipe, datePickerRangePresets, datePickerRangeTextRecipe, datePickerRowRecipe, datePickerRuleRecipe, datePickerStartRecipe, datePickerTriggerRecipe, datePickerValueRecipe, datePickerViewRecipe, datePickerViewTriggerRecipe, datePickerViewsRecipe, datePickerWeekCellRecipe, defaultDatePickerMode };
+//# sourceMappingURL=datePicker.d.ts.map

package/dist/recipes/datePicker.js

@@ -0,0 +1,166 @@
+import "../control.js";
+import { controlInert, controlPress, controlQuiet, controlQuietIcon, controlReach } from "../parts/control.js";
+import { ruleQuiet } from "../parts/rule.js";
+import { eyebrowQuiet } from "../parts/eyebrow.js";
+import { trailingActionRecipe } from "./field.js";
+import { TRAILING_INSET, labelRoom } from "./input.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/datePicker.ts
+const defaultDatePickerMode = "single";
+const datePickerModes = ["single", "range"];
+const datePickerRangePresets = [
+	"thisWeek",
+	"lastWeek",
+	"thisMonth",
+	"lastMonth",
+	"thisQuarter",
+	"lastQuarter",
+	"thisYear",
+	"lastYear",
+	"last3Days",
+	"last7Days",
+	"last14Days",
+	"last30Days",
+	"last90Days"
+];
+const datePickerRowRecipe = cva([
+	"data-[state=open]:bg-tf-sunken-hi data-[state=open]:tf-edge-lit",
+	"data-[state=open]:**:data-[part=leading]:text-tf-accent-hi",
+	"data-[state=open]:**:data-[part=leading]:stroke-tf-ink",
+	"data-[state=open]:**:data-[part=trigger]:text-tf-accent-hi",
+	"data-[state=open]:**:data-[part=trigger]:stroke-tf-ink",
+	"reached:**:data-[part=trigger]:text-tf-accent-hi",
+	"reached:**:data-[part=trigger]:stroke-tf-ink",
+	"reached:**:data-[part=dash]:opacity-100",
+	"reached:**:data-[part=dash]:delay-(--tf-duration-1)"
+], {
+	defaultVariants: { ranged: false },
+	variants: { ranged: {
+		false: "",
+		true: "w-fit max-w-full min-w-60"
+	} }
+});
+const datePickerTriggerRecipe = cva([trailingActionRecipe(), "data-[state=open]:rotate-180"]);
+const datePickerDashRecipe = cva([
+	"flex flex-none items-center self-stretch px-2",
+	"text-tf-body-sm font-medium text-tf-muted",
+	"tf-transition motion-reduce:transition-none"
+], {
+	compoundVariants: [{
+		class: labelRoom.lg,
+		labelled: true,
+		size: "lg"
+	}, {
+		class: labelRoom.md,
+		labelled: true,
+		size: "md"
+	}],
+	defaultVariants: {
+		filled: false,
+		labelled: true,
+		size: "lg"
+	},
+	variants: {
+		filled: {
+			false: "opacity-0",
+			true: "opacity-100"
+		},
+		labelled: {
+			false: "py-0",
+			true: ""
+		},
+		size: {
+			lg: "",
+			md: ""
+		}
+	}
+});
+const TRIGGER_ROOM = TRAILING_INSET;
+const datePickerStartRecipe = cva("field-sizing-content h-full w-auto min-w-36 pr-0 tabular-nums");
+const datePickerEndRecipe = cva(["field-sizing-content h-full w-auto min-w-36 pl-0 tabular-nums", TRIGGER_ROOM]);
+const datePickerValueRecipe = cva(["tabular-nums", TRIGGER_ROOM]);
+const datePickerContentRecipe = cva(["w-tf-panel max-w-[calc(100vw-2rem)] overflow-hidden px-0", "blend-tf-accent"]);
+const datePickerViewsRecipe = cva("flex min-h-(--container-tf-panel) flex-col");
+const datePickerViewRecipe = cva("flex flex-1 flex-col tf-arrives motion-reduce:transition-none");
+const datePickerHeadRecipe = cva("relative flex flex-none items-center justify-between gap-2 p-2");
+const datePickerRuleRecipe = cva(`absolute inset-x-0 bottom-0 ${ruleQuiet}`);
+const datePickerNavRecipe = cva(controlQuietIcon);
+const datePickerViewTriggerRecipe = cva([
+	"inline-flex h-tf-control-sm items-center gap-2 rounded-tf-control px-3",
+	"font-tf-display text-tf-body-sm font-medium text-tf-fg",
+	"tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0",
+	...controlQuiet,
+	...controlReach,
+	...controlPress,
+	...controlInert
+]);
+const PAGING = [
+	"data-[going=forward]:[--tf-page-from:calc(var(--spacing)*4)]",
+	"data-[going=back]:[--tf-page-from:calc(var(--spacing)*-4)]",
+	"data-[step=a]:motion-safe:animate-tf-page",
+	"data-[step=b]:motion-safe:animate-tf-page-again"
+];
+const datePickerRangeTextRecipe = cva(["inline-flex min-w-36 items-center justify-center gap-2", ...PAGING]);
+const datePickerBodyRecipe = cva(["flex flex-1 flex-col px-3 pt-3 pb-1", ...PAGING]);
+const datePickerGridRecipe = cva(["w-full flex-1 table-fixed border-separate border-spacing-1", "has-data-[in-hover-range]:**:data-[part=table-cell-trigger]:transition-none"]);
+const datePickerWeekCellRecipe = cva([`h-tf-row text-tf-caption-sm ${eyebrowQuiet}`]);
+const DAY_BAND = [
+	"not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:bg-tf-accent-tint",
+	"not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:text-tf-accent-hi",
+	"not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:rounded-tf-none",
+	"not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:bg-tf-accent-tint",
+	"not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:text-tf-accent-hi",
+	"not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:rounded-tf-none"
+];
+const DAY_ENDS = [
+	"data-[hover-range-start]:bg-tf-blend data-[hover-range-start]:text-tf-on-accent",
+	"data-[hover-range-end]:bg-tf-blend data-[hover-range-end]:text-tf-on-accent",
+	"data-[in-range]:not-data-[range-end]:data-[range-start]:rounded-r-tf-none",
+	"data-[in-range]:not-data-[range-start]:data-[range-end]:rounded-l-tf-none",
+	"data-[in-hover-range]:not-data-[hover-range-end]:data-[hover-range-start]:rounded-r-tf-none",
+	"data-[in-hover-range]:not-data-[hover-range-start]:data-[hover-range-end]:rounded-l-tf-none"
+];
+const DAY_QUIET = ["not-data-selected:not-data-[in-range]:data-weekend:text-tf-muted", "data-[outside-range]:opacity-50"];
+const datePickerDayRecipe = cva([
+	"inline-flex w-full items-center justify-center rounded-tf-control",
+	"text-tf-body-sm font-medium text-tf-fg tabular-nums blend-tf-accent",
+	"tf-ramp",
+	"not-data-[in-range]:interactive:hovered:bg-tf-panel-hi",
+	"data-today:tf-mark-edge data-today:tf-mark-lit",
+	"data-today:interactive:hovered:tf-mark-bloomed",
+	"data-selected:bg-tf-blend data-selected:text-tf-on-accent",
+	"motion-safe:data-selected:tf-pops",
+	...DAY_BAND,
+	...DAY_ENDS,
+	...DAY_QUIET,
+	"cursor-pointer tf-transition motion-reduce:transition-none",
+	...controlReach,
+	...controlPress,
+	...controlInert
+], {
+	defaultVariants: { roomy: false },
+	variants: { roomy: {
+		false: "h-tf-control-sm",
+		true: "h-15"
+	} }
+});
+const datePickerFootRecipe = cva("flex flex-none flex-wrap gap-2 px-3 pt-2 pb-3");
+const datePickerPresetRecipe = cva([
+	"relative isolate inline-flex h-tf-row flex-none items-center rounded-tf-pill px-3",
+	"text-tf-caption font-medium",
+	"tf-blend-outline blend-tf-accent",
+	"cursor-pointer tf-transition motion-reduce:transition-none",
+	...controlReach,
+	...controlPress,
+	...controlInert
+], {
+	defaultVariants: { current: false },
+	variants: { current: {
+		false: "text-tf-fg interactive:hovered:bg-tf-panel-hi",
+		true: "bg-tf-blend text-tf-on-accent interactive:hovered:tf-blended"
+	} }
+});
+//#endregion
+export { datePickerBodyRecipe, datePickerContentRecipe, datePickerDashRecipe, datePickerDayRecipe, datePickerEndRecipe, datePickerFootRecipe, datePickerGridRecipe, datePickerHeadRecipe, datePickerModes, datePickerNavRecipe, datePickerPresetRecipe, datePickerRangePresets, datePickerRangeTextRecipe, datePickerRowRecipe, datePickerRuleRecipe, datePickerStartRecipe, datePickerTriggerRecipe, datePickerValueRecipe, datePickerViewRecipe, datePickerViewTriggerRecipe, datePickerViewsRecipe, datePickerWeekCellRecipe, defaultDatePickerMode };
+
+//# sourceMappingURL=datePicker.js.map

package/dist/recipes/datePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datePicker.js","names":[],"sources":["../../src/recipes/datePicker.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport type { FieldSize } from '#control'\nimport { defaultFieldSize } from '#control'\nimport {\n  controlInert,\n  controlPress,\n  controlQuiet,\n  controlQuietIcon,\n  controlReach,\n} from '#parts/control'\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport { ruleQuiet } from '#parts/rule'\n\nimport { trailingActionRecipe } from './field'\nimport { labelRoom, TRAILING_INSET } from './input'\n\ntype DatePickerMode = 'single' | 'range'\n\nconst defaultDatePickerMode = 'single' satisfies DatePickerMode\n\nconst datePickerModes = ['single', 'range'] as const satisfies readonly DatePickerMode[]\n\ntype DatePickerRangePreset =\n  | 'thisWeek'\n  | 'lastWeek'\n  | 'thisMonth'\n  | 'lastMonth'\n  | 'thisQuarter'\n  | 'lastQuarter'\n  | 'thisYear'\n  | 'lastYear'\n  | 'last3Days'\n  | 'last7Days'\n  | 'last14Days'\n  | 'last30Days'\n  | 'last90Days'\n\nconst datePickerRangePresets = [\n  'thisWeek',\n  'lastWeek',\n  'thisMonth',\n  'lastMonth',\n  'thisQuarter',\n  'lastQuarter',\n  'thisYear',\n  'lastYear',\n  'last3Days',\n  'last7Days',\n  'last14Days',\n  'last30Days',\n  'last90Days',\n] as const satisfies readonly DatePickerRangePreset[]\n\nconst datePickerRowRecipe = cva(\n  [\n    'data-[state=open]:bg-tf-sunken-hi data-[state=open]:tf-edge-lit',\n    'data-[state=open]:**:data-[part=leading]:text-tf-accent-hi',\n    'data-[state=open]:**:data-[part=leading]:stroke-tf-ink',\n    'data-[state=open]:**:data-[part=trigger]:text-tf-accent-hi',\n    'data-[state=open]:**:data-[part=trigger]:stroke-tf-ink',\n    'reached:**:data-[part=trigger]:text-tf-accent-hi',\n    'reached:**:data-[part=trigger]:stroke-tf-ink',\n    'reached:**:data-[part=dash]:opacity-100',\n    'reached:**:data-[part=dash]:delay-(--tf-duration-1)',\n  ],\n  {\n    defaultVariants: { ranged: false },\n    variants: {\n      ranged: { false: '', true: 'w-fit max-w-full min-w-60' },\n    },\n  },\n)\n\nconst datePickerTriggerRecipe = cva([trailingActionRecipe(), 'data-[state=open]:rotate-180'])\n\nconst datePickerDashRecipe = cva(\n  [\n    'flex flex-none items-center self-stretch px-2',\n    'text-tf-body-sm font-medium text-tf-muted',\n    'tf-transition motion-reduce:transition-none',\n  ],\n  {\n    compoundVariants: [\n      { class: labelRoom.lg, labelled: true, size: 'lg' },\n      { class: labelRoom.md, labelled: true, size: 'md' },\n    ],\n    defaultVariants: { filled: false, labelled: true, size: defaultFieldSize },\n    variants: {\n      filled: { false: 'opacity-0', true: 'opacity-100' },\n      labelled: { false: 'py-0', true: '' },\n      size: { lg: '', md: '' } satisfies Record<FieldSize, string>,\n    },\n  },\n)\n\nconst TRIGGER_ROOM = TRAILING_INSET\n\nconst datePickerStartRecipe = cva('field-sizing-content h-full w-auto min-w-36 pr-0 tabular-nums')\n\nconst datePickerEndRecipe = cva([\n  'field-sizing-content h-full w-auto min-w-36 pl-0 tabular-nums',\n  TRIGGER_ROOM,\n])\n\nconst datePickerValueRecipe = cva(['tabular-nums', TRIGGER_ROOM])\n\nconst datePickerContentRecipe = cva([\n  'w-tf-panel max-w-[calc(100vw-2rem)] overflow-hidden px-0',\n  'blend-tf-accent',\n])\n\nconst datePickerViewsRecipe = cva('flex min-h-(--container-tf-panel) flex-col')\n\nconst datePickerViewRecipe = cva('flex flex-1 flex-col tf-arrives motion-reduce:transition-none')\n\nconst datePickerHeadRecipe = cva('relative flex flex-none items-center justify-between gap-2 p-2')\n\nconst datePickerRuleRecipe = cva(`absolute inset-x-0 bottom-0 ${ruleQuiet}`)\n\nconst datePickerNavRecipe = cva(controlQuietIcon)\n\nconst datePickerViewTriggerRecipe = cva([\n  'inline-flex h-tf-control-sm items-center gap-2 rounded-tf-control px-3',\n  'font-tf-display text-tf-body-sm font-medium text-tf-fg',\n  'tf-icons [&_svg]:size-tf-icon-sm [&_svg]:shrink-0',\n  ...controlQuiet,\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n])\n\nconst PAGING = [\n  'data-[going=forward]:[--tf-page-from:calc(var(--spacing)*4)]',\n  'data-[going=back]:[--tf-page-from:calc(var(--spacing)*-4)]',\n  'data-[step=a]:motion-safe:animate-tf-page',\n  'data-[step=b]:motion-safe:animate-tf-page-again',\n]\n\nconst datePickerRangeTextRecipe = cva([\n  'inline-flex min-w-36 items-center justify-center gap-2',\n  ...PAGING,\n])\n\nconst datePickerBodyRecipe = cva(['flex flex-1 flex-col px-3 pt-3 pb-1', ...PAGING])\n\nconst datePickerGridRecipe = cva([\n  'w-full flex-1 table-fixed border-separate border-spacing-1',\n  'has-data-[in-hover-range]:**:data-[part=table-cell-trigger]:transition-none',\n])\n\nconst datePickerWeekCellRecipe = cva([`h-tf-row text-tf-caption-sm ${eyebrowQuiet}`])\n\nconst DAY_BAND = [\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:bg-tf-accent-tint',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:text-tf-accent-hi',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-range]:rounded-tf-none',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:bg-tf-accent-tint',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:text-tf-accent-hi',\n  'not-data-selected:not-data-[hover-range-start]:not-data-[hover-range-end]:data-[in-hover-range]:rounded-tf-none',\n]\n\nconst DAY_ENDS = [\n  'data-[hover-range-start]:bg-tf-blend data-[hover-range-start]:text-tf-on-accent',\n  'data-[hover-range-end]:bg-tf-blend data-[hover-range-end]:text-tf-on-accent',\n  'data-[in-range]:not-data-[range-end]:data-[range-start]:rounded-r-tf-none',\n  'data-[in-range]:not-data-[range-start]:data-[range-end]:rounded-l-tf-none',\n  'data-[in-hover-range]:not-data-[hover-range-end]:data-[hover-range-start]:rounded-r-tf-none',\n  'data-[in-hover-range]:not-data-[hover-range-start]:data-[hover-range-end]:rounded-l-tf-none',\n]\n\nconst DAY_QUIET = [\n  'not-data-selected:not-data-[in-range]:data-weekend:text-tf-muted',\n  'data-[outside-range]:opacity-50',\n]\n\nconst datePickerDayRecipe = cva(\n  [\n    'inline-flex w-full items-center justify-center rounded-tf-control',\n    'text-tf-body-sm font-medium text-tf-fg tabular-nums blend-tf-accent',\n    'tf-ramp',\n    'not-data-[in-range]:interactive:hovered:bg-tf-panel-hi',\n    'data-today:tf-mark-edge data-today:tf-mark-lit',\n    'data-today:interactive:hovered:tf-mark-bloomed',\n    'data-selected:bg-tf-blend data-selected:text-tf-on-accent',\n    'motion-safe:data-selected:tf-pops',\n    ...DAY_BAND,\n    ...DAY_ENDS,\n    ...DAY_QUIET,\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { roomy: false },\n    variants: {\n      roomy: { false: 'h-tf-control-sm', true: 'h-15' },\n    },\n  },\n)\n\nconst datePickerFootRecipe = cva('flex flex-none flex-wrap gap-2 px-3 pt-2 pb-3')\n\nconst datePickerPresetRecipe = cva(\n  [\n    'relative isolate inline-flex h-tf-row flex-none items-center rounded-tf-pill px-3',\n    'text-tf-caption font-medium',\n    'tf-blend-outline blend-tf-accent',\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { current: false },\n    variants: {\n      current: {\n        false: 'text-tf-fg interactive:hovered:bg-tf-panel-hi',\n        true: 'bg-tf-blend text-tf-on-accent interactive:hovered:tf-blended',\n      },\n    },\n  },\n)\n\nexport {\n  type DatePickerMode,\n  type DatePickerRangePreset,\n  datePickerBodyRecipe,\n  datePickerContentRecipe,\n  datePickerDashRecipe,\n  datePickerDayRecipe,\n  datePickerEndRecipe,\n  datePickerFootRecipe,\n  datePickerGridRecipe,\n  datePickerHeadRecipe,\n  datePickerModes,\n  datePickerNavRecipe,\n  datePickerPresetRecipe,\n  datePickerRangePresets,\n  datePickerRangeTextRecipe,\n  datePickerRowRecipe,\n  datePickerRuleRecipe,\n  datePickerStartRecipe,\n  datePickerTriggerRecipe,\n  datePickerValueRecipe,\n  datePickerViewRecipe,\n  datePickerViewsRecipe,\n  datePickerViewTriggerRecipe,\n  datePickerWeekCellRecipe,\n  defaultDatePickerMode,\n}\n"],"mappings":";;;;;;;;AAmBA,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB,CAAC,UAAU,OAAO;AAiB1C,MAAM,yBAAyB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,sBAAsB,IAC1B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,QAAQ,MAAM;CACjC,UAAU,EACR,QAAQ;EAAE,OAAO;EAAI,MAAM;CAA4B,EACzD;AACF,CACF;AAEA,MAAM,0BAA0B,IAAI,CAAC,qBAAqB,GAAG,8BAA8B,CAAC;AAE5F,MAAM,uBAAuB,IAC3B;CACE;CACA;CACA;AACF,GACA;CACE,kBAAkB,CAChB;EAAE,OAAO,UAAU;EAAI,UAAU;EAAM,MAAM;CAAK,GAClD;EAAE,OAAO,UAAU;EAAI,UAAU;EAAM,MAAM;CAAK,CACpD;CACA,iBAAiB;EAAE,QAAQ;EAAO,UAAU;EAAM,MAAA;CAAuB;CACzE,UAAU;EACR,QAAQ;GAAE,OAAO;GAAa,MAAM;EAAc;EAClD,UAAU;GAAE,OAAO;GAAQ,MAAM;EAAG;EACpC,MAAM;GAAE,IAAI;GAAI,IAAI;EAAG;CACzB;AACF,CACF;AAEA,MAAM,eAAe;AAErB,MAAM,wBAAwB,IAAI,+DAA+D;AAEjG,MAAM,sBAAsB,IAAI,CAC9B,iEACA,YACF,CAAC;AAED,MAAM,wBAAwB,IAAI,CAAC,gBAAgB,YAAY,CAAC;AAEhE,MAAM,0BAA0B,IAAI,CAClC,4DACA,iBACF,CAAC;AAED,MAAM,wBAAwB,IAAI,4CAA4C;AAE9E,MAAM,uBAAuB,IAAI,+DAA+D;AAEhG,MAAM,uBAAuB,IAAI,gEAAgE;AAEjG,MAAM,uBAAuB,IAAI,+BAA+B,WAAW;AAE3E,MAAM,sBAAsB,IAAI,gBAAgB;AAEhD,MAAM,8BAA8B,IAAI;CACtC;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,CAAC;AAED,MAAM,SAAS;CACb;CACA;CACA;CACA;AACF;AAEA,MAAM,4BAA4B,IAAI,CACpC,0DACA,GAAG,MACL,CAAC;AAED,MAAM,uBAAuB,IAAI,CAAC,uCAAuC,GAAG,MAAM,CAAC;AAEnF,MAAM,uBAAuB,IAAI,CAC/B,8DACA,6EACF,CAAC;AAED,MAAM,2BAA2B,IAAI,CAAC,+BAA+B,cAAc,CAAC;AAEpF,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,YAAY,CAChB,oEACA,iCACF;AAEA,MAAM,sBAAsB,IAC1B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,OAAO,MAAM;CAChC,UAAU,EACR,OAAO;EAAE,OAAO;EAAmB,MAAM;CAAO,EAClD;AACF,CACF;AAEA,MAAM,uBAAuB,IAAI,+CAA+C;AAEhF,MAAM,yBAAyB,IAC7B;CACE;CACA;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/dialog.d.ts

@@ -0,0 +1,37 @@
+//#region src/recipes/dialog.d.ts
+type DialogSize = 'sm' | 'md' | 'lg';
+type DialogLayout = 'panel' | 'confirm';
+declare const defaultDialogLayout = "panel";
+declare const dialogLayouts: readonly ["panel", "confirm"];
+declare const defaultDialogSize = "md";
+declare const dialogSizes: readonly ["sm", "md", "lg"];
+declare const dialogBackdropRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const dialogPositionerRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const dialogRecipe: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const dialogHeldRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const dialogHeadRecipe: (props?: ({
+  layout?: "panel" | "confirm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const dialogHeadingsRecipe: (props?: ({
+  layout?: "panel" | "confirm" | null | undefined;
+  roomy?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const dialogTitleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const dialogDescriptionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const dialogCloseRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const dialogBodyRecipe: (props?: ({
+  layout?: "panel" | "confirm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const dialogFooterRecipe: (props?: ({
+  layout?: "panel" | "confirm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const dialogNoteRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const dialogRowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const dialogRowValueRecipe: (props?: ({
+  lit?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { type DialogLayout, type DialogSize, defaultDialogLayout, defaultDialogSize, dialogBackdropRecipe, dialogBodyRecipe, dialogCloseRecipe, dialogDescriptionRecipe, dialogFooterRecipe, dialogHeadRecipe, dialogHeadingsRecipe, dialogHeldRecipe, dialogLayouts, dialogNoteRecipe, dialogPositionerRecipe, dialogRecipe, dialogRowRecipe, dialogRowValueRecipe, dialogSizes, dialogTitleRecipe };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/recipes/dialog.js

@@ -0,0 +1,116 @@
+import { liftMotion, scrimMirrorMotion } from "./motion.js";
+import { surfaceLifted, surfacePanel } from "../parts/surface.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/dialog.ts
+const defaultDialogLayout = "panel";
+const dialogLayouts = ["panel", "confirm"];
+const defaultDialogSize = "md";
+const dialogSizes = [
+	"sm",
+	"md",
+	"lg"
+];
+const WIDTH = {
+	lg: "max-w-tf-page",
+	md: "max-w-tf-measure",
+	sm: "max-w-tf-panel"
+};
+const GROUND = "relative bg-tf-shade-under";
+const REGION = "relative";
+const FULL = [
+	"@max-tf-panel:absolute @max-tf-panel:inset-0",
+	"@max-tf-panel:max-h-none @max-tf-panel:max-w-none",
+	"@max-tf-panel:rounded-tf-none"
+];
+const dialogBackdropRecipe = cva([
+	"fixed inset-0 z-tf-modal bg-tf-scrim backdrop-blur-tf-scrim",
+	...scrimMirrorMotion,
+	"motion-reduce:animate-none"
+]);
+const dialogPositionerRecipe = cva(["@container fixed inset-0 z-tf-modal flex items-center justify-center p-4 sm:p-10", "font-tf-body"]);
+const dialogRecipe = cva([
+	...surfacePanel,
+	"tf-edge-plain",
+	...surfaceLifted,
+	"flex max-h-full w-full flex-col overflow-hidden outline-hidden",
+	"text-tf-body-sm font-medium text-tf-fg",
+	...FULL,
+	...liftMotion,
+	"motion-reduce:animate-none"
+], {
+	defaultVariants: { size: "md" },
+	variants: { size: WIDTH }
+});
+const dialogHeldRecipe = cva("motion-safe:data-[state=open]:data-held:tf-shaken");
+const dialogHeadRecipe = cva([REGION, "flex flex-none flex-col px-6 pt-8"], {
+	defaultVariants: { layout: defaultDialogLayout },
+	variants: { layout: {
+		confirm: "items-center gap-6 text-center",
+		panel: "gap-6 @max-tf-panel:pt-6"
+	} }
+});
+const dialogHeadingsRecipe = cva("flex min-w-0 flex-none flex-col", {
+	compoundVariants: [{
+		class: "pr-12",
+		layout: "panel",
+		roomy: true
+	}],
+	defaultVariants: {
+		layout: defaultDialogLayout,
+		roomy: false
+	},
+	variants: {
+		layout: {
+			confirm: "items-center gap-3 text-center",
+			panel: "gap-2 pb-2"
+		},
+		roomy: {
+			false: "",
+			true: ""
+		}
+	}
+});
+const dialogTitleRecipe = cva("font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg");
+const dialogDescriptionRecipe = cva("text-tf-body-sm font-medium text-tf-muted");
+const dialogCloseRecipe = cva("absolute top-3 right-3 z-tf-raised");
+const FADED = [
+	"tf-scroll-faded tf-scroll-thin",
+	"[--tf-fade-head:calc(var(--spacing)*6)] [--tf-fade-foot:calc(var(--spacing)*8)]",
+	"outline-hidden focused:outline-2 focused:-outline-offset-2 focused:outline-tf-accent-hi"
+].join(" ");
+const dialogBodyRecipe = cva([
+	REGION,
+	"flex min-h-0 flex-col overflow-y-auto px-6 pt-6",
+	FADED,
+	"@max-tf-panel:flex-1"
+], {
+	defaultVariants: { layout: defaultDialogLayout },
+	variants: { layout: {
+		confirm: "items-center gap-6 pb-0 text-center",
+		panel: "gap-6 pb-8 @max-tf-panel:pb-6"
+	} }
+});
+const dialogFooterRecipe = cva(["flex flex-none gap-3 rounded-b-tf-card px-6", "@max-tf-panel:rounded-tf-none"], {
+	defaultVariants: { layout: defaultDialogLayout },
+	variants: { layout: {
+		confirm: `${REGION} flex-nowrap items-center pt-6 pb-6 *:flex-1`,
+		panel: [
+			GROUND,
+			"flex-wrap items-center justify-end py-5",
+			"@max-tf-panel:flex-col-reverse @max-tf-panel:flex-nowrap @max-tf-panel:*:w-full"
+		].join(" ")
+	} }
+});
+const dialogNoteRecipe = cva("mr-auto text-tf-caption font-medium text-tf-muted tabular-nums");
+const dialogRowRecipe = cva(["flex h-tf-row flex-none items-center justify-between gap-3", "rounded-tf-inline px-3 text-tf-muted"]);
+const dialogRowValueRecipe = cva("text-tf-fg tabular-nums", {
+	defaultVariants: { lit: false },
+	variants: { lit: {
+		false: "",
+		true: "text-tf-accent-hi"
+	} }
+});
+//#endregion
+export { defaultDialogLayout, defaultDialogSize, dialogBackdropRecipe, dialogBodyRecipe, dialogCloseRecipe, dialogDescriptionRecipe, dialogFooterRecipe, dialogHeadRecipe, dialogHeadingsRecipe, dialogHeldRecipe, dialogLayouts, dialogNoteRecipe, dialogPositionerRecipe, dialogRecipe, dialogRowRecipe, dialogRowValueRecipe, dialogSizes, dialogTitleRecipe };
+
+//# sourceMappingURL=dialog.js.map

package/dist/recipes/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":[],"sources":["../../src/recipes/dialog.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { surfaceLifted, surfacePanel } from '#parts/surface'\n\nimport { liftMotion, scrimMirrorMotion } from './motion'\n\ntype DialogSize = 'sm' | 'md' | 'lg'\n\ntype DialogLayout = 'panel' | 'confirm'\n\nconst defaultDialogLayout = 'panel' satisfies DialogLayout\n\nconst dialogLayouts = ['panel', 'confirm'] as const satisfies readonly DialogLayout[]\n\nconst defaultDialogSize = 'md' satisfies DialogSize\n\nconst dialogSizes = ['sm', 'md', 'lg'] as const satisfies readonly DialogSize[]\n\nconst WIDTH = {\n  lg: 'max-w-tf-page',\n  md: 'max-w-tf-measure',\n  sm: 'max-w-tf-panel',\n} satisfies Record<DialogSize, string>\n\nconst GROUND = 'relative bg-tf-shade-under'\n\nconst REGION = 'relative'\n\nconst FULL = [\n  '@max-tf-panel:absolute @max-tf-panel:inset-0',\n  '@max-tf-panel:max-h-none @max-tf-panel:max-w-none',\n  '@max-tf-panel:rounded-tf-none',\n]\n\nconst dialogBackdropRecipe = cva([\n  'fixed inset-0 z-tf-modal bg-tf-scrim backdrop-blur-tf-scrim',\n  ...scrimMirrorMotion,\n  'motion-reduce:animate-none',\n])\n\nconst dialogPositionerRecipe = cva([\n  '@container fixed inset-0 z-tf-modal flex items-center justify-center p-4 sm:p-10',\n  'font-tf-body',\n])\n\nconst dialogRecipe = cva(\n  [\n    ...surfacePanel,\n    'tf-edge-plain',\n    ...surfaceLifted,\n    'flex max-h-full w-full flex-col overflow-hidden outline-hidden',\n    'text-tf-body-sm font-medium text-tf-fg',\n    ...FULL,\n    ...liftMotion,\n    'motion-reduce:animate-none',\n  ],\n  {\n    defaultVariants: { size: defaultDialogSize },\n    variants: { size: WIDTH },\n  },\n)\n\nconst dialogHeldRecipe = cva('motion-safe:data-[state=open]:data-held:tf-shaken')\n\nconst dialogHeadRecipe = cva([REGION, 'flex flex-none flex-col px-6 pt-8'], {\n  defaultVariants: { layout: defaultDialogLayout },\n  variants: {\n    layout: {\n      confirm: 'items-center gap-6 text-center',\n      panel: 'gap-6 @max-tf-panel:pt-6',\n    } satisfies Record<DialogLayout, string>,\n  },\n})\n\nconst dialogHeadingsRecipe = cva('flex min-w-0 flex-none flex-col', {\n  compoundVariants: [{ class: 'pr-12', layout: 'panel', roomy: true }],\n  defaultVariants: { layout: defaultDialogLayout, roomy: false },\n  variants: {\n    layout: {\n      confirm: 'items-center gap-3 text-center',\n      panel: 'gap-2 pb-2',\n    } satisfies Record<DialogLayout, string>,\n    roomy: { false: '', true: '' },\n  },\n})\n\nconst dialogTitleRecipe = cva('font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg')\n\nconst dialogDescriptionRecipe = cva('text-tf-body-sm font-medium text-tf-muted')\n\nconst dialogCloseRecipe = cva('absolute top-3 right-3 z-tf-raised')\n\nconst FADED = [\n  'tf-scroll-faded tf-scroll-thin',\n  '[--tf-fade-head:calc(var(--spacing)*6)] [--tf-fade-foot:calc(var(--spacing)*8)]',\n  'outline-hidden focused:outline-2 focused:-outline-offset-2 focused:outline-tf-accent-hi',\n].join(' ')\n\nconst dialogBodyRecipe = cva(\n  [REGION, 'flex min-h-0 flex-col overflow-y-auto px-6 pt-6', FADED, '@max-tf-panel:flex-1'],\n  {\n    defaultVariants: { layout: defaultDialogLayout },\n    variants: {\n      layout: {\n        confirm: 'items-center gap-6 pb-0 text-center',\n        panel: 'gap-6 pb-8 @max-tf-panel:pb-6',\n      } satisfies Record<DialogLayout, string>,\n    },\n  },\n)\n\nconst dialogFooterRecipe = cva(\n  ['flex flex-none gap-3 rounded-b-tf-card px-6', '@max-tf-panel:rounded-tf-none'],\n  {\n    defaultVariants: { layout: defaultDialogLayout },\n    variants: {\n      layout: {\n        confirm: `${REGION} flex-nowrap items-center pt-6 pb-6 *:flex-1`,\n        panel: [\n          GROUND,\n          'flex-wrap items-center justify-end py-5',\n          '@max-tf-panel:flex-col-reverse @max-tf-panel:flex-nowrap @max-tf-panel:*:w-full',\n        ].join(' '),\n      } satisfies Record<DialogLayout, string>,\n    },\n  },\n)\n\nconst dialogNoteRecipe = cva('mr-auto text-tf-caption font-medium text-tf-muted tabular-nums')\n\nconst dialogRowRecipe = cva([\n  'flex h-tf-row flex-none items-center justify-between gap-3',\n  'rounded-tf-inline px-3 text-tf-muted',\n])\n\nconst dialogRowValueRecipe = cva('text-tf-fg tabular-nums', {\n  defaultVariants: { lit: false },\n  variants: {\n    lit: { false: '', true: 'text-tf-accent-hi' },\n  },\n})\n\nexport {\n  type DialogLayout,\n  type DialogSize,\n  defaultDialogLayout,\n  defaultDialogSize,\n  dialogLayouts,\n  dialogBackdropRecipe,\n  dialogBodyRecipe,\n  dialogCloseRecipe,\n  dialogDescriptionRecipe,\n  dialogFooterRecipe,\n  dialogHeadRecipe,\n  dialogHeadingsRecipe,\n  dialogHeldRecipe,\n  dialogNoteRecipe,\n  dialogPositionerRecipe,\n  dialogRecipe,\n  dialogRowRecipe,\n  dialogRowValueRecipe,\n  dialogSizes,\n  dialogTitleRecipe,\n}\n"],"mappings":";;;;AAUA,MAAM,sBAAsB;AAE5B,MAAM,gBAAgB,CAAC,SAAS,SAAS;AAEzC,MAAM,oBAAoB;AAE1B,MAAM,cAAc;CAAC;CAAM;CAAM;AAAI;AAErC,MAAM,QAAQ;CACZ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,SAAS;AAEf,MAAM,SAAS;AAEf,MAAM,OAAO;CACX;CACA;CACA;AACF;AAEA,MAAM,uBAAuB,IAAI;CAC/B;CACA,GAAG;CACH;AACF,CAAC;AAED,MAAM,yBAAyB,IAAI,CACjC,oFACA,cACF,CAAC;AAED,MAAM,eAAe,IACnB;CACE,GAAG;CACH;CACA,GAAG;CACH;CACA;CACA,GAAG;CACH,GAAG;CACH;AACF,GACA;CACE,iBAAiB,EAAE,MAAA,KAAwB;CAC3C,UAAU,EAAE,MAAM,MAAM;AAC1B,CACF;AAEA,MAAM,mBAAmB,IAAI,mDAAmD;AAEhF,MAAM,mBAAmB,IAAI,CAAC,QAAQ,mCAAmC,GAAG;CAC1E,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;CACT,EACF;AACF,CAAC;AAED,MAAM,uBAAuB,IAAI,mCAAmC;CAClE,kBAAkB,CAAC;EAAE,OAAO;EAAS,QAAQ;EAAS,OAAO;CAAK,CAAC;CACnE,iBAAiB;EAAE,QAAQ;EAAqB,OAAO;CAAM;CAC7D,UAAU;EACR,QAAQ;GACN,SAAS;GACT,OAAO;EACT;EACA,OAAO;GAAE,OAAO;GAAI,MAAM;EAAG;CAC/B;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,mEAAmE;AAEjG,MAAM,0BAA0B,IAAI,2CAA2C;AAE/E,MAAM,oBAAoB,IAAI,oCAAoC;AAElE,MAAM,QAAQ;CACZ;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,mBAAmB,IACvB;CAAC;CAAQ;CAAmD;CAAO;AAAsB,GACzF;CACE,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS;EACT,OAAO;CACT,EACF;AACF,CACF;AAEA,MAAM,qBAAqB,IACzB,CAAC,+CAA+C,+BAA+B,GAC/E;CACE,iBAAiB,EAAE,QAAQ,oBAAoB;CAC/C,UAAU,EACR,QAAQ;EACN,SAAS,GAAG,OAAO;EACnB,OAAO;GACL;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ,EACF;AACF,CACF;AAEA,MAAM,mBAAmB,IAAI,gEAAgE;AAE7F,MAAM,kBAAkB,IAAI,CAC1B,8DACA,sCACF,CAAC;AAED,MAAM,uBAAuB,IAAI,2BAA2B;CAC1D,iBAAiB,EAAE,KAAK,MAAM;CAC9B,UAAU,EACR,KAAK;EAAE,OAAO;EAAI,MAAM;CAAoB,EAC9C;AACF,CAAC"}

package/dist/recipes/feature.d.ts

@@ -0,0 +1,15 @@
+//#region src/recipes/feature.d.ts
+declare const featureLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
+type FeatureLevel = (typeof featureLevels)[number];
+declare const defaultFeatureLevel = "h3";
+declare const featureRecipe: (props?: ({
+  interactive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const featureTileRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const featureTitleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const featureLinkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const featureBodyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const featureFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { type FeatureLevel, defaultFeatureLevel, featureBodyRecipe, featureFootRecipe, featureLevels, featureLinkRecipe, featureRecipe, featureTileRecipe, featureTitleRecipe };
+//# sourceMappingURL=feature.d.ts.map

package/dist/recipes/feature.js

@@ -0,0 +1,48 @@
+import { surfacePanel } from "../parts/surface.js";
+import { tileReached, tileRoused } from "../parts/rouse.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/feature.ts
+const featureLevels = [
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+];
+const defaultFeatureLevel = "h3";
+const ROUSED_TILE = [tileRoused, tileReached].join(" ");
+const LIFTS = ["motion-safe:hovered:-translate-y-0.5", "motion-safe:reached:-translate-y-0.5"].join(" ");
+const featureRecipe = cva([
+	...surfacePanel,
+	"flex flex-col gap-5 p-6 font-tf-body text-tf-fg",
+	"tf-fill-scale tf-blend-drift tf-transition motion-reduce:transition-none"
+], {
+	defaultVariants: { interactive: false },
+	variants: { interactive: {
+		false: "",
+		true: [
+			"hovered:tf-edge-lit hovered:tf-nudged reached:tf-edge-lit reached:tf-nudged",
+			ROUSED_TILE,
+			LIFTS
+		].join(" ")
+	} }
+});
+const featureTileRecipe = cva("self-start");
+const featureTitleRecipe = cva("font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg");
+const featureLinkRecipe = cva([
+	"outline-hidden",
+	"before:absolute before:inset-0 before:rounded-tf-card before:content-['']",
+	"focused:before:outline-2 focused:before:outline-solid",
+	"focused:before:outline-offset-2 focused:before:outline-tf-accent-hi"
+]);
+const featureBodyRecipe = cva("text-tf-body-sm font-medium text-tf-muted");
+const featureFootRecipe = cva([
+	"relative mt-auto inline-flex items-center gap-1 self-start tf-icons",
+	"text-tf-caption font-medium text-tf-accent-hi",
+	"[&_svg]:size-tf-icon-sm [&_svg]:tf-nudge-follow",
+	"pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto"
+]);
+//#endregion
+export { defaultFeatureLevel, featureBodyRecipe, featureFootRecipe, featureLevels, featureLinkRecipe, featureRecipe, featureTileRecipe, featureTitleRecipe };
+
+//# sourceMappingURL=feature.js.map

package/dist/recipes/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature.js","names":[],"sources":["../../src/recipes/feature.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { tileReached, tileRoused } from '#parts/rouse'\nimport { surfacePanel } from '#parts/surface'\n\nconst featureLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const\n\ntype FeatureLevel = (typeof featureLevels)[number]\n\nconst defaultFeatureLevel = 'h3' satisfies FeatureLevel\n\nconst ROUSED_TILE = [tileRoused, tileReached].join(' ')\n\nconst LIFTS = ['motion-safe:hovered:-translate-y-0.5', 'motion-safe:reached:-translate-y-0.5'].join(\n  ' ',\n)\n\nconst featureRecipe = cva(\n  [\n    ...surfacePanel,\n    'flex flex-col gap-5 p-6 font-tf-body text-tf-fg',\n    'tf-fill-scale tf-blend-drift tf-transition motion-reduce:transition-none',\n  ],\n  {\n    defaultVariants: { interactive: false },\n    variants: {\n      interactive: {\n        false: '',\n        true: [\n          'hovered:tf-edge-lit hovered:tf-nudged reached:tf-edge-lit reached:tf-nudged',\n          ROUSED_TILE,\n          LIFTS,\n        ].join(' '),\n      },\n    },\n  },\n)\n\nconst featureTileRecipe = cva('self-start')\n\nconst featureTitleRecipe = cva('font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg')\n\nconst featureLinkRecipe = cva([\n  'outline-hidden',\n  \"before:absolute before:inset-0 before:rounded-tf-card before:content-['']\",\n  'focused:before:outline-2 focused:before:outline-solid',\n  'focused:before:outline-offset-2 focused:before:outline-tf-accent-hi',\n])\n\nconst featureBodyRecipe = cva('text-tf-body-sm font-medium text-tf-muted')\n\nconst featureFootRecipe = cva([\n  'relative mt-auto inline-flex items-center gap-1 self-start tf-icons',\n  'text-tf-caption font-medium text-tf-accent-hi',\n  '[&_svg]:size-tf-icon-sm [&_svg]:tf-nudge-follow',\n  'pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto',\n])\n\nexport {\n  type FeatureLevel,\n  defaultFeatureLevel,\n  featureBodyRecipe,\n  featureFootRecipe,\n  featureLevels,\n  featureLinkRecipe,\n  featureRecipe,\n  featureTileRecipe,\n  featureTitleRecipe,\n}\n"],"mappings":";;;;AAKA,MAAM,gBAAgB;CAAC;CAAM;CAAM;CAAM;CAAM;AAAI;AAInD,MAAM,sBAAsB;AAE5B,MAAM,cAAc,CAAC,YAAY,WAAW,CAAC,CAAC,KAAK,GAAG;AAEtD,MAAM,QAAQ,CAAC,wCAAwC,sCAAsC,CAAC,CAAC,KAC7F,GACF;AAEA,MAAM,gBAAgB,IACpB;CACE,GAAG;CACH;CACA;AACF,GACA;CACE,iBAAiB,EAAE,aAAa,MAAM;CACtC,UAAU,EACR,aAAa;EACX,OAAO;EACP,MAAM;GACJ;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ,EACF;AACF,CACF;AAEA,MAAM,oBAAoB,IAAI,YAAY;AAE1C,MAAM,qBAAqB,IAAI,mEAAmE;AAElG,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,oBAAoB,IAAI,2CAA2C;AAEzE,MAAM,oBAAoB,IAAI;CAC5B;CACA;CACA;CACA;AACF,CAAC"}

package/dist/recipes/field.d.ts

@@ -0,0 +1,26 @@
+//#region src/recipes/field.d.ts
+declare const fieldRecipe: (props?: ({
+  message?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const fieldRowRecipe: (props?: ({
+  invalid?: boolean | null | undefined;
+  loading?: boolean | null | undefined;
+  size?: "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const fieldLabelRecipe: (props?: ({
+  hidden?: boolean | null | undefined;
+  leading?: boolean | null | undefined;
+  size?: "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const fieldHintRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const fieldErrorRecipe: (props?: ({
+  alone?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const fieldFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const fieldUnitRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const leadingRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const trailingRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const trailingActionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { fieldErrorRecipe, fieldFootRecipe, fieldHintRecipe, fieldLabelRecipe, fieldRecipe, fieldRowRecipe, fieldUnitRecipe, leadingRecipe, trailingActionRecipe, trailingRecipe };
+//# sourceMappingURL=field.d.ts.map