@techfides/ui-library-design 0.1.0

package/dist/recipes/table.d.ts

@@ -0,0 +1,74 @@
+//#region src/recipes/table.d.ts
+type TableAlign = 'start' | 'end';
+type TableFilterKind = 'text' | 'enum' | 'range';
+declare const tablePinWidth = 52;
+declare const tableActionsWidth = 160;
+declare const tableRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableToolbarRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableSearchRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableAppliedRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableSelectionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableSelectionCountRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableSelectionActionsRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableCardRecipe: (props?: ({
+  bordered?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableScrollRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableGridRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableHeadRowRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableHeadCellRecipe: (props?: ({
+  align?: "end" | "start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableHeadingRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableSortRecipe: (props?: ({
+  sorted?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableSortLabelRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableSortIconRecipe: (props?: ({
+  descending?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableSortMarkRecipe: (props?: ({
+  sorted?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableFilterMarkRecipe: (props?: ({
+  on?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableRankRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableFilterRecipe: (props?: ({
+  on?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableRuleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableBodyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableGroupRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableRowRecipe: (props?: ({
+  accent?: "accent" | "success" | "warning" | "info" | "danger" | "none" | null | undefined;
+  dense?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableSelectCellRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableCellRecipe: (props?: ({
+  align?: "end" | "start" | null | undefined;
+  mono?: boolean | null | undefined;
+  tabular?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableValueRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableExpandRecipe: (props?: ({
+  open?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableExpandIconRecipe: (props?: ({
+  open?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableActionsCellRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableStepRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableDetailRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableDetailBodyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableSkeletonBarRecipe: (props?: ({
+  numeric?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableSkeletonMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableEmptyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableEmptyTitleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableEmptyHintRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { type TableAlign, type TableFilterKind, tableActionsCellRecipe, tableActionsWidth, tableAppliedRecipe, tableBodyRecipe, tableCardRecipe, tableCellRecipe, tableDetailBodyRecipe, tableDetailRecipe, tableEmptyHintRecipe, tableEmptyRecipe, tableEmptyTitleRecipe, tableExpandIconRecipe, tableExpandRecipe, tableFilterMarkRecipe, tableFilterRecipe, tableGridRecipe, tableGroupRecipe, tableHeadCellRecipe, tableHeadRowRecipe, tableHeadingRecipe, tableMarkRecipe, tablePinWidth, tableRankRecipe, tableRecipe, tableRowRecipe, tableRuleRecipe, tableScrollRecipe, tableSearchRecipe, tableSelectCellRecipe, tableSelectionActionsRecipe, tableSelectionCountRecipe, tableSelectionRecipe, tableSkeletonBarRecipe, tableSkeletonMarkRecipe, tableSortIconRecipe, tableSortLabelRecipe, tableSortMarkRecipe, tableSortRecipe, tableStepRecipe, tableToolbarRecipe, tableValueRecipe };
+//# sourceMappingURL=table.d.ts.map

package/dist/recipes/table.js

@@ -0,0 +1,182 @@
+import { toneTint } from "../tone.js";
+import { controlInert, controlPress, controlQuietIcon, controlReach } from "../parts/control.js";
+import { ruleFading } from "../parts/rule.js";
+import { eyebrowQuiet, eyebrowType } from "../parts/eyebrow.js";
+import { revealedControl, revealedIcon, shownControl, shownIcon } from "../parts/reveal.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/table.ts
+const defaultTableAlign = "start";
+const TIGHT = [
+	"flex size-tf-control-2xs flex-none items-center justify-center rounded-tf-inline",
+	"tf-icons [&_svg]:size-tf-icon-2xs [&_svg]:shrink-0",
+	"cursor-pointer tf-transition motion-reduce:transition-none",
+	"interactive:hovered:bg-tf-panel-hi interactive:hovered:text-tf-fg",
+	...controlReach,
+	...controlInert
+];
+const CELL = "flex min-w-0 items-center px-4";
+const tablePinWidth = 52;
+const tableActionsWidth = 160;
+const tableRecipe = cva("flex w-full min-w-0 flex-col gap-8 font-tf-body");
+const tableToolbarRecipe = cva("flex flex-wrap items-center gap-3");
+const tableSearchRecipe = cva("max-w-tf-panel flex-none");
+const tableAppliedRecipe = cva("flex flex-1 flex-wrap items-center justify-end gap-2");
+const tableSelectionRecipe = cva(["flex flex-wrap items-center gap-4 rounded-tf-control bg-tf-accent-tint px-4 py-3", "animate-tf-in motion-reduce:animate-none"]);
+const tableSelectionCountRecipe = cva("text-tf-body-sm font-medium text-tf-accent-hi");
+const tableSelectionActionsRecipe = cva("ml-auto flex flex-wrap items-center gap-2");
+const tableCardRecipe = cva("relative isolate rounded-tf-card", {
+	defaultVariants: { bordered: true },
+	variants: { bordered: {
+		false: "",
+		true: "tf-edge-sweep tf-swept blend-tf-accent tf-edge-plain"
+	} }
+});
+const tableScrollRecipe = cva(["tf-scroll-thin overflow-x-auto rounded-tf-card", "tf-resizes motion-reduce:transition-none"]);
+const tableGridRecipe = cva("overflow-x-clip text-tf-body-sm font-medium text-tf-fg");
+const tableHeadRowRecipe = cva("grid h-tf-control-md");
+const tableHeadCellRecipe = cva([CELL, "gap-1 whitespace-nowrap"], {
+	defaultVariants: { align: defaultTableAlign },
+	variants: { align: {
+		end: "justify-end",
+		start: ""
+	} }
+});
+const tableHeadingRecipe = cva([`flex-none text-tf-caption ${eyebrowQuiet}`]);
+const tableSortRecipe = cva([
+	"-ml-2 flex h-tf-row min-w-0 items-center gap-2 rounded-tf-inline px-2",
+	`text-tf-caption ${eyebrowType}`,
+	"tf-icons [&_svg]:size-tf-icon-2xs [&_svg]:shrink-0",
+	"cursor-pointer tf-transition motion-reduce:transition-none",
+	"interactive:hovered:bg-tf-panel-hi interactive:hovered:text-tf-fg",
+	...controlReach,
+	...controlPress,
+	...controlInert
+], {
+	defaultVariants: { sorted: false },
+	variants: { sorted: {
+		false: "text-tf-muted",
+		true: "text-tf-accent-hi"
+	} }
+});
+const tableSortLabelRecipe = cva("min-w-0 truncate");
+const tableSortIconRecipe = cva("tf-transition motion-reduce:transition-none", {
+	defaultVariants: { descending: false },
+	variants: { descending: {
+		false: "",
+		true: "rotate-180"
+	} }
+});
+const tableSortMarkRecipe = cva("", {
+	defaultVariants: { sorted: false },
+	variants: { sorted: {
+		false: revealedIcon,
+		true: shownIcon
+	} }
+});
+const tableFilterMarkRecipe = cva("", {
+	defaultVariants: { on: false },
+	variants: { on: {
+		false: revealedControl,
+		true: shownControl
+	} }
+});
+const tableRankRecipe = cva(["flex-none rounded-tf-pill bg-tf-accent-tint px-1.5", "text-tf-caption-sm font-normal text-tf-accent-hi tabular-nums"]);
+const tableFilterRecipe = cva(TIGHT, {
+	defaultVariants: { on: false },
+	variants: { on: {
+		false: "text-tf-muted",
+		true: "bg-tf-accent-tint text-tf-accent-hi"
+	} }
+});
+const tableRuleRecipe = cva(`block ${ruleFading}`);
+const tableBodyRecipe = cva([
+	"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 tableGroupRecipe = cva("border-b border-tf-line-2 last:border-b-0");
+const tableRowRecipe = cva(["grid tf-transition motion-reduce:transition-none", ...[
+	"relative",
+	"before:pointer-events-none before:absolute before:inset-0 before:content-['']",
+	"before:tf-transition before:motion-reduce:transition-none",
+	"not-data-selected:hovered:before:bg-tf-panel-2",
+	"data-selected:before:bg-tf-accent-tint"
+]], {
+	defaultVariants: {
+		accent: "none",
+		dense: false
+	},
+	variants: {
+		accent: {
+			...toneTint,
+			none: ""
+		},
+		dense: {
+			false: "h-tf-control-lg",
+			true: "h-tf-control-md"
+		}
+	}
+});
+const tableSelectCellRecipe = cva("flex items-center justify-center");
+const tableMarkRecipe = cva("flex");
+const tableCellRecipe = cva([CELL, "gap-3"], {
+	defaultVariants: {
+		align: defaultTableAlign,
+		mono: false,
+		tabular: false
+	},
+	variants: {
+		align: {
+			end: "justify-end text-right",
+			start: ""
+		},
+		mono: {
+			false: "",
+			true: "font-mono"
+		},
+		tabular: {
+			false: "",
+			true: "whitespace-nowrap tabular-nums"
+		}
+	}
+});
+const tableValueRecipe = cva("min-w-0 truncate");
+const tableExpandRecipe = cva(TIGHT, {
+	defaultVariants: { open: false },
+	variants: { open: {
+		false: "text-tf-muted",
+		true: "text-tf-accent-hi"
+	} }
+});
+const tableExpandIconRecipe = cva("tf-transition motion-reduce:transition-none", {
+	defaultVariants: { open: false },
+	variants: { open: {
+		false: "",
+		true: "rotate-90"
+	} }
+});
+const tableActionsCellRecipe = cva([
+	"sticky right-0 flex items-center justify-end gap-2 pr-3 pl-6",
+	"backdrop-blur-tf-panel in-data-turning:bg-tf-surface-quiet",
+	"before:absolute before:inset-y-0 before:left-0 before:w-tf-hairline before:bg-tf-line-2",
+	"before:content-['']"
+]);
+const tableStepRecipe = cva(controlQuietIcon);
+const tableDetailRecipe = cva("tf-unfolds bg-tf-sunken-hi motion-reduce:transition-none");
+const tableDetailBodyRecipe = cva(["py-5 pr-6 pl-16", "animate-tf-fade-in motion-reduce:animate-none"]);
+const tableSkeletonBarRecipe = cva("h-3 tf-breathing rounded-tf-pill bg-tf-panel", {
+	defaultVariants: { numeric: false },
+	variants: { numeric: {
+		false: "w-3/5",
+		true: "w-2/5"
+	} }
+});
+const tableSkeletonMarkRecipe = cva("size-tf-icon-lg flex-none tf-breathing rounded-tf-inline bg-tf-panel");
+const tableEmptyRecipe = cva("flex flex-col items-center gap-2 px-6 py-14 text-center");
+const tableEmptyTitleRecipe = cva("font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg");
+const tableEmptyHintRecipe = cva("text-tf-body-sm font-medium text-tf-muted");
+//#endregion
+export { tableActionsCellRecipe, tableActionsWidth, tableAppliedRecipe, tableBodyRecipe, tableCardRecipe, tableCellRecipe, tableDetailBodyRecipe, tableDetailRecipe, tableEmptyHintRecipe, tableEmptyRecipe, tableEmptyTitleRecipe, tableExpandIconRecipe, tableExpandRecipe, tableFilterMarkRecipe, tableFilterRecipe, tableGridRecipe, tableGroupRecipe, tableHeadCellRecipe, tableHeadRowRecipe, tableHeadingRecipe, tableMarkRecipe, tablePinWidth, tableRankRecipe, tableRecipe, tableRowRecipe, tableRuleRecipe, tableScrollRecipe, tableSearchRecipe, tableSelectCellRecipe, tableSelectionActionsRecipe, tableSelectionCountRecipe, tableSelectionRecipe, tableSkeletonBarRecipe, tableSkeletonMarkRecipe, tableSortIconRecipe, tableSortLabelRecipe, tableSortMarkRecipe, tableSortRecipe, tableStepRecipe, tableToolbarRecipe, tableValueRecipe };
+
+//# sourceMappingURL=table.js.map

package/dist/recipes/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../../src/recipes/table.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, controlQuietIcon, controlReach } from '#parts/control'\nimport { eyebrowQuiet, eyebrowType } from '#parts/eyebrow'\nimport { revealedControl, revealedIcon, shownControl, shownIcon } from '#parts/reveal'\nimport { ruleFading } from '#parts/rule'\nimport { toneTint } from '#tone'\n\ntype TableAlign = 'start' | 'end'\n\ntype TableFilterKind = 'text' | 'enum' | 'range'\n\nconst defaultTableAlign = 'start' satisfies TableAlign\n\nconst TIGHT = [\n  'flex size-tf-control-2xs flex-none items-center justify-center rounded-tf-inline',\n  'tf-icons [&_svg]:size-tf-icon-2xs [&_svg]:shrink-0',\n  'cursor-pointer tf-transition motion-reduce:transition-none',\n  'interactive:hovered:bg-tf-panel-hi interactive:hovered:text-tf-fg',\n  ...controlReach,\n  ...controlInert,\n]\n\nconst CELL = 'flex min-w-0 items-center px-4'\n\nconst tablePinWidth = 52\n\nconst tableActionsWidth = 160\n\nconst tableRecipe = cva('flex w-full min-w-0 flex-col gap-8 font-tf-body')\n\nconst tableToolbarRecipe = cva('flex flex-wrap items-center gap-3')\n\nconst tableSearchRecipe = cva('max-w-tf-panel flex-none')\n\nconst tableAppliedRecipe = cva('flex flex-1 flex-wrap items-center justify-end gap-2')\n\nconst tableSelectionRecipe = cva([\n  'flex flex-wrap items-center gap-4 rounded-tf-control bg-tf-accent-tint px-4 py-3',\n  'animate-tf-in motion-reduce:animate-none',\n])\n\nconst tableSelectionCountRecipe = cva('text-tf-body-sm font-medium text-tf-accent-hi')\n\nconst tableSelectionActionsRecipe = cva('ml-auto flex flex-wrap items-center gap-2')\n\nconst tableCardRecipe = cva('relative isolate rounded-tf-card', {\n  defaultVariants: { bordered: true },\n  variants: {\n    bordered: {\n      false: '',\n      true: 'tf-edge-sweep tf-swept blend-tf-accent tf-edge-plain',\n    },\n  },\n})\n\nconst tableScrollRecipe = cva([\n  'tf-scroll-thin overflow-x-auto rounded-tf-card',\n  'tf-resizes motion-reduce:transition-none',\n])\n\nconst tableGridRecipe = cva('overflow-x-clip text-tf-body-sm font-medium text-tf-fg')\n\nconst tableHeadRowRecipe = cva('grid h-tf-control-md')\n\nconst tableHeadCellRecipe = cva([CELL, 'gap-1 whitespace-nowrap'], {\n  defaultVariants: { align: defaultTableAlign },\n  variants: {\n    align: {\n      end: 'justify-end',\n      start: '',\n    } satisfies Record<TableAlign, string>,\n  },\n})\n\nconst tableHeadingRecipe = cva([`flex-none text-tf-caption ${eyebrowQuiet}`])\n\nconst tableSortRecipe = cva(\n  [\n    '-ml-2 flex h-tf-row min-w-0 items-center gap-2 rounded-tf-inline px-2',\n    `text-tf-caption ${eyebrowType}`,\n    'tf-icons [&_svg]:size-tf-icon-2xs [&_svg]:shrink-0',\n    'cursor-pointer tf-transition motion-reduce:transition-none',\n    'interactive:hovered:bg-tf-panel-hi interactive:hovered:text-tf-fg',\n    ...controlReach,\n    ...controlPress,\n    ...controlInert,\n  ],\n  {\n    defaultVariants: { sorted: false },\n    variants: {\n      sorted: { false: 'text-tf-muted', true: 'text-tf-accent-hi' },\n    },\n  },\n)\n\nconst tableSortLabelRecipe = cva('min-w-0 truncate')\n\nconst tableSortIconRecipe = cva('tf-transition motion-reduce:transition-none', {\n  defaultVariants: { descending: false },\n  variants: {\n    descending: { false: '', true: 'rotate-180' },\n  },\n})\n\nconst tableSortMarkRecipe = cva('', {\n  defaultVariants: { sorted: false },\n  variants: {\n    sorted: { false: revealedIcon, true: shownIcon },\n  },\n})\n\nconst tableFilterMarkRecipe = cva('', {\n  defaultVariants: { on: false },\n  variants: {\n    on: { false: revealedControl, true: shownControl },\n  },\n})\n\nconst tableRankRecipe = cva([\n  'flex-none rounded-tf-pill bg-tf-accent-tint px-1.5',\n  'text-tf-caption-sm font-normal text-tf-accent-hi tabular-nums',\n])\n\nconst tableFilterRecipe = cva(TIGHT, {\n  defaultVariants: { on: false },\n  variants: {\n    on: { false: 'text-tf-muted', true: 'bg-tf-accent-tint text-tf-accent-hi' },\n  },\n})\n\nconst tableRuleRecipe = cva(`block ${ruleFading}`)\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 tableBodyRecipe = cva(PAGING)\n\nconst tableGroupRecipe = cva('border-b border-tf-line-2 last:border-b-0')\n\nconst A_WASH_OVER_WHATEVER_IS_THERE = [\n  'relative',\n  \"before:pointer-events-none before:absolute before:inset-0 before:content-['']\",\n  'before:tf-transition before:motion-reduce:transition-none',\n  'not-data-selected:hovered:before:bg-tf-panel-2',\n  'data-selected:before:bg-tf-accent-tint',\n]\n\nconst tableRowRecipe = cva(\n  ['grid tf-transition motion-reduce:transition-none', ...A_WASH_OVER_WHATEVER_IS_THERE],\n  {\n    defaultVariants: { accent: 'none', dense: false },\n    variants: {\n      accent: { ...toneTint, none: '' },\n      dense: { false: 'h-tf-control-lg', true: 'h-tf-control-md' },\n    },\n  },\n)\n\nconst tableSelectCellRecipe = cva('flex items-center justify-center')\n\nconst tableMarkRecipe = cva('flex')\n\nconst tableCellRecipe = cva([CELL, 'gap-3'], {\n  defaultVariants: { align: defaultTableAlign, mono: false, tabular: false },\n  variants: {\n    align: {\n      end: 'justify-end text-right',\n      start: '',\n    } satisfies Record<TableAlign, string>,\n    mono: { false: '', true: 'font-mono' },\n    tabular: { false: '', true: 'whitespace-nowrap tabular-nums' },\n  },\n})\n\nconst tableValueRecipe = cva('min-w-0 truncate')\n\nconst tableExpandRecipe = cva(TIGHT, {\n  defaultVariants: { open: false },\n  variants: {\n    open: { false: 'text-tf-muted', true: 'text-tf-accent-hi' },\n  },\n})\n\nconst tableExpandIconRecipe = cva('tf-transition motion-reduce:transition-none', {\n  defaultVariants: { open: false },\n  variants: {\n    open: { false: '', true: 'rotate-90' },\n  },\n})\n\nconst tableActionsCellRecipe = cva([\n  'sticky right-0 flex items-center justify-end gap-2 pr-3 pl-6',\n  'backdrop-blur-tf-panel in-data-turning:bg-tf-surface-quiet',\n  'before:absolute before:inset-y-0 before:left-0 before:w-tf-hairline before:bg-tf-line-2',\n  \"before:content-['']\",\n])\n\nconst tableStepRecipe = cva(controlQuietIcon)\n\nconst tableDetailRecipe = cva('tf-unfolds bg-tf-sunken-hi motion-reduce:transition-none')\n\nconst tableDetailBodyRecipe = cva([\n  'py-5 pr-6 pl-16',\n  'animate-tf-fade-in motion-reduce:animate-none',\n])\n\nconst tableSkeletonBarRecipe = cva('h-3 tf-breathing rounded-tf-pill bg-tf-panel', {\n  defaultVariants: { numeric: false },\n  variants: {\n    numeric: { false: 'w-3/5', true: 'w-2/5' },\n  },\n})\n\nconst tableSkeletonMarkRecipe = cva(\n  'size-tf-icon-lg flex-none tf-breathing rounded-tf-inline bg-tf-panel',\n)\n\nconst tableEmptyRecipe = cva('flex flex-col items-center gap-2 px-6 py-14 text-center')\n\nconst tableEmptyTitleRecipe = cva(\n  'font-tf-display text-tf-h4 font-bold tracking-tf-tight text-tf-fg',\n)\n\nconst tableEmptyHintRecipe = cva('text-tf-body-sm font-medium text-tf-muted')\n\nexport {\n  type TableAlign,\n  type TableFilterKind,\n  tableActionsCellRecipe,\n  tableActionsWidth,\n  tableAppliedRecipe,\n  tableBodyRecipe,\n  tableCardRecipe,\n  tableCellRecipe,\n  tableDetailBodyRecipe,\n  tableDetailRecipe,\n  tableEmptyHintRecipe,\n  tableEmptyRecipe,\n  tableEmptyTitleRecipe,\n  tableExpandIconRecipe,\n  tableExpandRecipe,\n  tableFilterRecipe,\n  tableGridRecipe,\n  tableGroupRecipe,\n  tableHeadCellRecipe,\n  tableHeadRowRecipe,\n  tableHeadingRecipe,\n  tableMarkRecipe,\n  tablePinWidth,\n  tableRecipe,\n  tableRowRecipe,\n  tableRuleRecipe,\n  tableScrollRecipe,\n  tableSearchRecipe,\n  tableSelectCellRecipe,\n  tableSelectionActionsRecipe,\n  tableSelectionCountRecipe,\n  tableSelectionRecipe,\n  tableSkeletonBarRecipe,\n  tableSkeletonMarkRecipe,\n  tableFilterMarkRecipe,\n  tableRankRecipe,\n  tableSortIconRecipe,\n  tableSortMarkRecipe,\n  tableSortLabelRecipe,\n  tableSortRecipe,\n  tableStepRecipe,\n  tableToolbarRecipe,\n  tableValueRecipe,\n}\n"],"mappings":"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"}

package/dist/recipes/tableFilter.d.ts

@@ -0,0 +1,14 @@
+//#region src/recipes/tableFilter.d.ts
+declare const tableFilterPanelRecipe: (props?: ({
+  wide?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tableFilterTitleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableFilterOptionsRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableFilterOptionRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableFilterCountRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableFilterFieldRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableFilterRuleRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableFilterFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { tableFilterCountRecipe, tableFilterFieldRecipe, tableFilterFootRecipe, tableFilterOptionRecipe, tableFilterOptionsRecipe, tableFilterPanelRecipe, tableFilterRuleRecipe, tableFilterTitleRecipe };
+//# sourceMappingURL=tableFilter.d.ts.map

package/dist/recipes/tableFilter.js

@@ -0,0 +1,28 @@
+import { ruleQuiet } from "../parts/rule.js";
+import { overlayMotion } from "./motion.js";
+import { eyebrowQuiet } from "../parts/eyebrow.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/tableFilter.ts
+const tableFilterPanelRecipe = cva([
+	"flex origin-top flex-col gap-3 rounded-tf-card bg-tf-glass p-3 backdrop-blur-tf-glass",
+	"tf-edge-sweep font-tf-body text-tf-body-sm font-medium shadow-tf-float tf-edge-plain",
+	"z-tf-dropdown outline-hidden",
+	...overlayMotion
+], {
+	defaultVariants: { wide: false },
+	variants: { wide: {
+		false: "w-72",
+		true: "w-84"
+	} }
+});
+const tableFilterTitleRecipe = cva(`text-tf-caption-sm ${eyebrowQuiet}`);
+const tableFilterOptionsRecipe = cva(["-mx-1 flex tf-scroll-thin max-h-64 flex-col overflow-y-auto px-1 py-1.5"]);
+const tableFilterOptionRecipe = cva("flex-none");
+const tableFilterCountRecipe = cva(["flex-none rounded-tf-pill bg-tf-panel px-1.5", "font-mono text-tf-caption-sm text-tf-muted tabular-nums"]);
+const tableFilterFieldRecipe = cva("w-full max-w-none");
+const tableFilterRuleRecipe = cva(`block ${ruleQuiet}`);
+const tableFilterFootRecipe = cva("flex items-center justify-between gap-2");
+//#endregion
+export { tableFilterCountRecipe, tableFilterFieldRecipe, tableFilterFootRecipe, tableFilterOptionRecipe, tableFilterOptionsRecipe, tableFilterPanelRecipe, tableFilterRuleRecipe, tableFilterTitleRecipe };
+
+//# sourceMappingURL=tableFilter.js.map

package/dist/recipes/tableFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableFilter.js","names":[],"sources":["../../src/recipes/tableFilter.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { eyebrowQuiet } from '#parts/eyebrow'\nimport { ruleQuiet } from '#parts/rule'\n\nimport { overlayMotion } from './motion'\n\nconst tableFilterPanelRecipe = cva(\n  [\n    'flex origin-top flex-col gap-3 rounded-tf-card bg-tf-glass p-3 backdrop-blur-tf-glass',\n    'tf-edge-sweep font-tf-body text-tf-body-sm font-medium shadow-tf-float tf-edge-plain',\n    'z-tf-dropdown outline-hidden',\n    ...overlayMotion,\n  ],\n  {\n    defaultVariants: { wide: false },\n    variants: {\n      wide: { false: 'w-72', true: 'w-84' },\n    },\n  },\n)\n\nconst tableFilterTitleRecipe = cva(`text-tf-caption-sm ${eyebrowQuiet}`)\n\nconst tableFilterOptionsRecipe = cva([\n  '-mx-1 flex tf-scroll-thin max-h-64 flex-col overflow-y-auto px-1 py-1.5',\n])\n\nconst tableFilterOptionRecipe = cva('flex-none')\n\nconst tableFilterCountRecipe = cva([\n  'flex-none rounded-tf-pill bg-tf-panel px-1.5',\n  'font-mono text-tf-caption-sm text-tf-muted tabular-nums',\n])\n\nconst tableFilterFieldRecipe = cva('w-full max-w-none')\n\nconst tableFilterRuleRecipe = cva(`block ${ruleQuiet}`)\n\nconst tableFilterFootRecipe = cva('flex items-center justify-between gap-2')\n\nexport {\n  tableFilterCountRecipe,\n  tableFilterFieldRecipe,\n  tableFilterFootRecipe,\n  tableFilterOptionRecipe,\n  tableFilterOptionsRecipe,\n  tableFilterPanelRecipe,\n  tableFilterRuleRecipe,\n  tableFilterTitleRecipe,\n}\n"],"mappings":";;;;;AAOA,MAAM,yBAAyB,IAC7B;CACE;CACA;CACA;CACA,GAAG;AACL,GACA;CACE,iBAAiB,EAAE,MAAM,MAAM;CAC/B,UAAU,EACR,MAAM;EAAE,OAAO;EAAQ,MAAM;CAAO,EACtC;AACF,CACF;AAEA,MAAM,yBAAyB,IAAI,sBAAsB,cAAc;AAEvE,MAAM,2BAA2B,IAAI,CACnC,yEACF,CAAC;AAED,MAAM,0BAA0B,IAAI,WAAW;AAE/C,MAAM,yBAAyB,IAAI,CACjC,gDACA,yDACF,CAAC;AAED,MAAM,yBAAyB,IAAI,mBAAmB;AAEtD,MAAM,wBAAwB,IAAI,SAAS,WAAW;AAEtD,MAAM,wBAAwB,IAAI,yCAAyC"}

package/dist/recipes/tablePaging.d.ts

@@ -0,0 +1,15 @@
+//#region src/recipes/tablePaging.d.ts
+declare const tableFootRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableRangeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tablePagingRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tablePageSizesRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tablePageSizeStripRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tablePageSizeMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tablePageSizeRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tablePagesRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tablePageMarkRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tablePageRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tableGapRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { tableFootRecipe, tableGapRecipe, tablePageMarkRecipe, tablePageRecipe, tablePageSizeMarkRecipe, tablePageSizeRecipe, tablePageSizeStripRecipe, tablePageSizesRecipe, tablePagesRecipe, tablePagingRecipe, tableRangeRecipe };
+//# sourceMappingURL=tablePaging.d.ts.map

package/dist/recipes/tablePaging.js

@@ -0,0 +1,50 @@
+import { controlInert, controlPress, controlReach, hitArea } from "../parts/control.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/tablePaging.ts
+const PAGE_INK = [
+	"font-mono tabular-nums",
+	"cursor-pointer tf-transition motion-reduce:transition-none",
+	...controlReach,
+	...controlPress,
+	...controlInert
+];
+const CURRENT = "data-selected:text-tf-on-accent";
+const HIT_AREA = hitArea("after:h-tf-target");
+const tableFootRecipe = cva("flex flex-wrap items-center gap-4 border-t border-tf-line-2 px-4 py-3");
+const tableRangeRecipe = cva("text-tf-caption font-medium text-tf-muted");
+const tablePagingRecipe = cva("ml-auto flex flex-wrap items-center gap-4");
+const tablePageSizesRecipe = cva("flex items-center gap-2 text-tf-caption font-medium text-tf-muted");
+const tablePageSizeStripRecipe = cva("relative isolate flex gap-1 rounded-tf-pill bg-tf-panel p-1");
+const tablePageSizeMarkRecipe = cva([
+	"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 tablePageSizeRecipe = cva([
+	"relative flex h-tf-control-2xs items-center rounded-tf-pill px-3 text-tf-caption-sm",
+	HIT_AREA,
+	...PAGE_INK,
+	"text-tf-muted interactive:hovered:text-tf-fg",
+	"data-[state=checked]:text-tf-on-accent"
+]);
+const tablePagesRecipe = cva("relative isolate flex items-center gap-1");
+const tablePageMarkRecipe = cva([
+	"absolute inset-y-0 left-0 z-[-1] rounded-tf-inline bg-tf-blend blend-tf-accent",
+	"w-(--width) translate-x-(--left)",
+	"transition-[translate,width] duration-(--tf-duration-1) ease-(--ease-tf)",
+	"motion-reduce:transition-none"
+]);
+const tablePageRecipe = cva([
+	"relative flex h-tf-row min-w-tf-row items-center justify-center rounded-tf-inline px-2",
+	"text-tf-caption font-medium",
+	HIT_AREA,
+	...PAGE_INK,
+	"text-tf-fg interactive:hovered:bg-tf-panel-hi",
+	CURRENT
+]);
+const tableGapRecipe = cva(["flex h-tf-row min-w-tf-row items-center justify-center", "text-tf-caption font-medium text-tf-muted"]);
+//#endregion
+export { tableFootRecipe, tableGapRecipe, tablePageMarkRecipe, tablePageRecipe, tablePageSizeMarkRecipe, tablePageSizeRecipe, tablePageSizeStripRecipe, tablePageSizesRecipe, tablePagesRecipe, tablePagingRecipe, tableRangeRecipe };
+
+//# sourceMappingURL=tablePaging.js.map

package/dist/recipes/tablePaging.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablePaging.js","names":[],"sources":["../../src/recipes/tablePaging.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { controlInert, controlPress, controlReach, hitArea } from '#parts/control'\n\nconst PAGE_INK = [\n  'font-mono tabular-nums',\n  'cursor-pointer tf-transition motion-reduce:transition-none',\n  ...controlReach,\n  ...controlPress,\n  ...controlInert,\n]\n\nconst CURRENT = 'data-selected:text-tf-on-accent'\n\nconst HIT_AREA = hitArea('after:h-tf-target')\n\nconst tableFootRecipe = cva('flex flex-wrap items-center gap-4 border-t border-tf-line-2 px-4 py-3')\n\nconst tableRangeRecipe = cva('text-tf-caption font-medium text-tf-muted')\n\nconst tablePagingRecipe = cva('ml-auto flex flex-wrap items-center gap-4')\n\nconst tablePageSizesRecipe = cva(\n  'flex items-center gap-2 text-tf-caption font-medium text-tf-muted',\n)\n\nconst tablePageSizeStripRecipe = cva('relative isolate flex gap-1 rounded-tf-pill bg-tf-panel p-1')\n\nconst tablePageSizeMarkRecipe = cva([\n  '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 tablePageSizeRecipe = cva([\n  'relative flex h-tf-control-2xs items-center rounded-tf-pill px-3 text-tf-caption-sm',\n  HIT_AREA,\n  ...PAGE_INK,\n  'text-tf-muted interactive:hovered:text-tf-fg',\n  'data-[state=checked]:text-tf-on-accent',\n])\n\nconst tablePagesRecipe = cva('relative isolate flex items-center gap-1')\n\nconst tablePageMarkRecipe = cva([\n  'absolute inset-y-0 left-0 z-[-1] rounded-tf-inline bg-tf-blend blend-tf-accent',\n  'w-(--width) translate-x-(--left)',\n  'transition-[translate,width] duration-(--tf-duration-1) ease-(--ease-tf)',\n  'motion-reduce:transition-none',\n])\n\nconst tablePageRecipe = cva([\n  'relative flex h-tf-row min-w-tf-row items-center justify-center rounded-tf-inline px-2',\n  'text-tf-caption font-medium',\n  HIT_AREA,\n  ...PAGE_INK,\n  'text-tf-fg interactive:hovered:bg-tf-panel-hi',\n  CURRENT,\n])\n\nconst tableGapRecipe = cva([\n  'flex h-tf-row min-w-tf-row items-center justify-center',\n  'text-tf-caption font-medium text-tf-muted',\n])\n\nexport {\n  tableFootRecipe,\n  tableGapRecipe,\n  tablePageMarkRecipe,\n  tablePageRecipe,\n  tablePageSizeMarkRecipe,\n  tablePageSizeRecipe,\n  tablePageSizeStripRecipe,\n  tablePageSizesRecipe,\n  tablePagesRecipe,\n  tablePagingRecipe,\n  tableRangeRecipe,\n}\n"],"mappings":";;;AAIA,MAAM,WAAW;CACf;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,MAAM,UAAU;AAEhB,MAAM,WAAW,QAAQ,mBAAmB;AAE5C,MAAM,kBAAkB,IAAI,uEAAuE;AAEnG,MAAM,mBAAmB,IAAI,2CAA2C;AAExE,MAAM,oBAAoB,IAAI,2CAA2C;AAEzE,MAAM,uBAAuB,IAC3B,mEACF;AAEA,MAAM,2BAA2B,IAAI,6DAA6D;AAElG,MAAM,0BAA0B,IAAI;CAClC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA,GAAG;CACH;CACA;AACF,CAAC;AAED,MAAM,mBAAmB,IAAI,0CAA0C;AAEvE,MAAM,sBAAsB,IAAI;CAC9B;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI;CAC1B;CACA;CACA;CACA,GAAG;CACH;CACA;AACF,CAAC;AAED,MAAM,iBAAiB,IAAI,CACzB,0DACA,2CACF,CAAC"}

package/dist/recipes/tail.d.ts

@@ -0,0 +1,20 @@
+//#region src/recipes/tail.d.ts
+declare const tailSeverities: readonly ["quiet", "plain", "warning", "danger", "success"];
+type TailSeverity = (typeof tailSeverities)[number];
+declare const defaultTailSeverity = "plain";
+declare const tailRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tailScrollRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tailLineRecipe: (props?: ({
+  severity?: "success" | "warning" | "danger" | "plain" | "quiet" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tailGutterRecipe: (props?: ({
+  severity?: "success" | "warning" | "danger" | "plain" | "quiet" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tailAtRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const tailTextRecipe: (props?: ({
+  severity?: "success" | "warning" | "danger" | "plain" | "quiet" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const tailEmptyRecipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { type TailSeverity, defaultTailSeverity, tailAtRecipe, tailEmptyRecipe, tailGutterRecipe, tailLineRecipe, tailRecipe, tailScrollRecipe, tailSeverities, tailTextRecipe };
+//# sourceMappingURL=tail.d.ts.map

package/dist/recipes/tail.js

@@ -0,0 +1,48 @@
+import { cva } from "class-variance-authority";
+//#region src/recipes/tail.ts
+const tailSeverities = [
+	"quiet",
+	"plain",
+	"warning",
+	"danger",
+	"success"
+];
+const defaultTailSeverity = "plain";
+const tailRecipe = cva(["overflow-hidden rounded-tf-block bg-tf-sunken-quiet", "shadow-[inset_0_0_0_var(--spacing-tf-hairline)_var(--color-tf-line-2)]"]);
+const tailScrollRecipe = cva("tf-scroll-thin overflow-x-auto overflow-y-auto");
+const tailLineRecipe = cva("grid min-w-max grid-cols-[3px_6.5rem_1fr] items-center gap-x-3 py-0.5", {
+	defaultVariants: { severity: defaultTailSeverity },
+	variants: { severity: {
+		danger: "bg-tf-danger-wash",
+		plain: "",
+		quiet: "",
+		success: "bg-tf-success-tint",
+		warning: "bg-tf-warning-tint"
+	} }
+});
+const tailGutterRecipe = cva("h-full", {
+	defaultVariants: { severity: defaultTailSeverity },
+	variants: { severity: {
+		danger: "bg-tf-danger-hi",
+		plain: "bg-transparent",
+		quiet: "bg-transparent",
+		success: "bg-tf-success-hi",
+		warning: "bg-tf-warning-hi"
+	} }
+});
+const tailAtRecipe = cva("py-0.5 pl-3 font-mono text-tf-caption-sm text-tf-muted");
+const tailTextRecipe = cva("py-0.5 pr-3 font-mono text-tf-caption-sm whitespace-nowrap", {
+	defaultVariants: { severity: defaultTailSeverity },
+	variants: { severity: {
+		danger: "text-tf-danger-hi",
+		plain: "text-tf-fg",
+		quiet: "text-tf-muted",
+		success: "text-tf-success-hi",
+		warning: "text-tf-warning-hi"
+	} }
+});
+const tailEmptyRecipe = cva("p-5 text-center text-tf-caption font-medium text-tf-muted");
+//#endregion
+export { defaultTailSeverity, tailAtRecipe, tailEmptyRecipe, tailGutterRecipe, tailLineRecipe, tailRecipe, tailScrollRecipe, tailSeverities, tailTextRecipe };
+
+//# sourceMappingURL=tail.js.map

package/dist/recipes/tail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tail.js","names":[],"sources":["../../src/recipes/tail.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nconst tailSeverities = ['quiet', 'plain', 'warning', 'danger', 'success'] as const\n\ntype TailSeverity = (typeof tailSeverities)[number]\n\nconst defaultTailSeverity = 'plain' satisfies TailSeverity\n\nconst tailRecipe = cva([\n  'overflow-hidden rounded-tf-block bg-tf-sunken-quiet',\n  'shadow-[inset_0_0_0_var(--spacing-tf-hairline)_var(--color-tf-line-2)]',\n])\n\nconst tailScrollRecipe = cva('tf-scroll-thin overflow-x-auto overflow-y-auto')\n\nconst tailLineRecipe = cva(\n  'grid min-w-max grid-cols-[3px_6.5rem_1fr] items-center gap-x-3 py-0.5',\n  {\n    defaultVariants: { severity: defaultTailSeverity },\n    variants: {\n      severity: {\n        danger: 'bg-tf-danger-wash',\n        plain: '',\n        quiet: '',\n        success: 'bg-tf-success-tint',\n        warning: 'bg-tf-warning-tint',\n      } satisfies Record<TailSeverity, string>,\n    },\n  },\n)\n\nconst tailGutterRecipe = cva('h-full', {\n  defaultVariants: { severity: defaultTailSeverity },\n  variants: {\n    severity: {\n      danger: 'bg-tf-danger-hi',\n      plain: 'bg-transparent',\n      quiet: 'bg-transparent',\n      success: 'bg-tf-success-hi',\n      warning: 'bg-tf-warning-hi',\n    } satisfies Record<TailSeverity, string>,\n  },\n})\n\nconst tailAtRecipe = cva('py-0.5 pl-3 font-mono text-tf-caption-sm text-tf-muted')\n\nconst tailTextRecipe = cva('py-0.5 pr-3 font-mono text-tf-caption-sm whitespace-nowrap', {\n  defaultVariants: { severity: defaultTailSeverity },\n  variants: {\n    severity: {\n      danger: 'text-tf-danger-hi',\n      plain: 'text-tf-fg',\n      quiet: 'text-tf-muted',\n      success: 'text-tf-success-hi',\n      warning: 'text-tf-warning-hi',\n    } satisfies Record<TailSeverity, string>,\n  },\n})\n\nconst tailEmptyRecipe = cva('p-5 text-center text-tf-caption font-medium text-tf-muted')\n\nexport {\n  type TailSeverity,\n  defaultTailSeverity,\n  tailAtRecipe,\n  tailEmptyRecipe,\n  tailGutterRecipe,\n  tailLineRecipe,\n  tailRecipe,\n  tailScrollRecipe,\n  tailSeverities,\n  tailTextRecipe,\n}\n"],"mappings":";;AAEA,MAAM,iBAAiB;CAAC;CAAS;CAAS;CAAW;CAAU;AAAS;AAIxE,MAAM,sBAAsB;AAE5B,MAAM,aAAa,IAAI,CACrB,uDACA,wEACF,CAAC;AAED,MAAM,mBAAmB,IAAI,gDAAgD;AAE7E,MAAM,iBAAiB,IACrB,yEACA;CACE,iBAAiB,EAAE,UAAU,oBAAoB;CACjD,UAAU,EACR,UAAU;EACR,QAAQ;EACR,OAAO;EACP,OAAO;EACP,SAAS;EACT,SAAS;CACX,EACF;AACF,CACF;AAEA,MAAM,mBAAmB,IAAI,UAAU;CACrC,iBAAiB,EAAE,UAAU,oBAAoB;CACjD,UAAU,EACR,UAAU;EACR,QAAQ;EACR,OAAO;EACP,OAAO;EACP,SAAS;EACT,SAAS;CACX,EACF;AACF,CAAC;AAED,MAAM,eAAe,IAAI,wDAAwD;AAEjF,MAAM,iBAAiB,IAAI,8DAA8D;CACvF,iBAAiB,EAAE,UAAU,oBAAoB;CACjD,UAAU,EACR,UAAU;EACR,QAAQ;EACR,OAAO;EACP,OAAO;EACP,SAAS;EACT,SAAS;CACX,EACF;AACF,CAAC;AAED,MAAM,kBAAkB,IAAI,2DAA2D"}

package/dist/recipes/text.d.ts

@@ -0,0 +1,25 @@
+//#region src/recipes/text.d.ts
+type TextSize = 'caption-sm' | 'caption' | 'body-sm' | 'body' | 'lead';
+type TextTone = 'fg' | 'muted' | 'accent' | 'danger' | 'info' | 'success' | 'warning';
+type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+type TextFamily = 'sans' | 'mono' | 'display';
+declare const defaultTextSize = "body";
+declare const defaultTextTone = "fg";
+declare const defaultTextWeight = "normal";
+declare const defaultTextFamily = "sans";
+declare const textSizes: readonly ["caption-sm", "caption", "body-sm", "body", "lead"];
+declare const textTones: readonly ["fg", "muted", "accent", "danger", "info", "success", "warning"];
+declare const textWeights: readonly ["normal", "medium", "semibold", "bold"];
+declare const textFamilies: readonly ["sans", "mono", "display"];
+declare const restingWeight: (size: TextSize, uppercase?: boolean) => TextWeight;
+declare const textRecipe: (props?: ({
+  family?: "display" | "sans" | "mono" | null | undefined;
+  size?: "caption-sm" | "caption" | "body-sm" | "body" | "lead" | null | undefined;
+  tabular?: boolean | null | undefined;
+  tone?: "accent" | "success" | "warning" | "info" | "danger" | "fg" | "muted" | null | undefined;
+  uppercase?: boolean | null | undefined;
+  weight?: "normal" | "medium" | "semibold" | "bold" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { type TextFamily, type TextSize, type TextTone, type TextWeight, defaultTextFamily, defaultTextSize, defaultTextTone, defaultTextWeight, restingWeight, textFamilies, textRecipe, textSizes, textTones, textWeights };
+//# sourceMappingURL=text.d.ts.map

package/dist/recipes/text.js

@@ -0,0 +1,94 @@
+import { toneText } from "../tone.js";
+import { eyebrowType } from "../parts/eyebrow.js";
+import { cva } from "class-variance-authority";
+//#region src/recipes/text.ts
+const defaultTextSize = "body";
+const defaultTextTone = "fg";
+const defaultTextWeight = "normal";
+const defaultTextFamily = "sans";
+const textSizes = [
+	"caption-sm",
+	"caption",
+	"body-sm",
+	"body",
+	"lead"
+];
+const textTones = [
+	"fg",
+	"muted",
+	"accent",
+	"danger",
+	"info",
+	"success",
+	"warning"
+];
+const textWeights = [
+	"normal",
+	"medium",
+	"semibold",
+	"bold"
+];
+const textFamilies = [
+	"sans",
+	"mono",
+	"display"
+];
+const SIZE_WEIGHT = {
+	body: "normal",
+	"body-sm": "medium",
+	caption: "medium",
+	"caption-sm": "medium",
+	lead: "normal"
+};
+const restingWeight = (size, uppercase) => {
+	if (uppercase === true) return "medium";
+	return SIZE_WEIGHT[size];
+};
+const TONE_CLASS = {
+	...toneText,
+	fg: "text-tf-fg",
+	muted: "text-tf-muted"
+};
+const textRecipe = cva("tf-transition motion-reduce:transition-none", {
+	defaultVariants: {
+		family: defaultTextFamily,
+		size: defaultTextSize,
+		tabular: false,
+		tone: "fg",
+		uppercase: false,
+		weight: defaultTextWeight
+	},
+	variants: {
+		family: {
+			display: "font-tf-display",
+			mono: "font-mono",
+			sans: "font-tf-body"
+		},
+		size: {
+			body: "text-tf-body",
+			"body-sm": "text-tf-body-sm",
+			caption: "text-tf-caption",
+			"caption-sm": "text-tf-caption-sm",
+			lead: "max-w-tf-measure text-tf-lead"
+		},
+		tabular: {
+			false: "",
+			true: "tabular-nums"
+		},
+		tone: TONE_CLASS,
+		uppercase: {
+			false: "",
+			true: eyebrowType
+		},
+		weight: {
+			bold: "font-bold",
+			medium: "font-medium",
+			normal: "font-normal",
+			semibold: "font-semibold"
+		}
+	}
+});
+//#endregion
+export { defaultTextFamily, defaultTextSize, defaultTextTone, defaultTextWeight, restingWeight, textFamilies, textRecipe, textSizes, textTones, textWeights };
+
+//# sourceMappingURL=text.js.map

package/dist/recipes/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../src/recipes/text.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nimport { eyebrowType } from '#parts/eyebrow'\nimport { toneText } from '#tone'\n\ntype TextSize = 'caption-sm' | 'caption' | 'body-sm' | 'body' | 'lead'\n\ntype TextTone = 'fg' | 'muted' | 'accent' | 'danger' | 'info' | 'success' | 'warning'\n\ntype TextWeight = 'normal' | 'medium' | 'semibold' | 'bold'\n\ntype TextFamily = 'sans' | 'mono' | 'display'\n\nconst defaultTextSize = 'body' satisfies TextSize\n\nconst defaultTextTone = 'fg' satisfies TextTone\n\nconst defaultTextWeight = 'normal' satisfies TextWeight\n\nconst defaultTextFamily = 'sans' satisfies TextFamily\n\nconst textSizes = [\n  'caption-sm',\n  'caption',\n  'body-sm',\n  'body',\n  'lead',\n] as const satisfies readonly TextSize[]\n\nconst textTones = [\n  'fg',\n  'muted',\n  'accent',\n  'danger',\n  'info',\n  'success',\n  'warning',\n] as const satisfies readonly TextTone[]\n\nconst textWeights = [\n  'normal',\n  'medium',\n  'semibold',\n  'bold',\n] as const satisfies readonly TextWeight[]\n\nconst textFamilies = ['sans', 'mono', 'display'] as const satisfies readonly TextFamily[]\n\nconst SIZE_WEIGHT = {\n  body: 'normal',\n  'body-sm': 'medium',\n  caption: 'medium',\n  'caption-sm': 'medium',\n  lead: 'normal',\n} satisfies Record<TextSize, TextWeight>\n\nconst restingWeight = (size: TextSize, uppercase?: boolean): TextWeight => {\n  if (uppercase === true) {\n    return 'medium'\n  }\n  return SIZE_WEIGHT[size]\n}\n\nconst TONE_CLASS = {\n  ...toneText,\n  fg: 'text-tf-fg',\n  muted: 'text-tf-muted',\n} satisfies Record<TextTone, string>\n\nconst textRecipe = cva('tf-transition motion-reduce:transition-none', {\n  defaultVariants: {\n    family: defaultTextFamily,\n    size: defaultTextSize,\n    tabular: false,\n    tone: defaultTextTone,\n    uppercase: false,\n    weight: defaultTextWeight,\n  },\n  variants: {\n    family: {\n      display: 'font-tf-display',\n      mono: 'font-mono',\n      sans: 'font-tf-body',\n    } satisfies Record<TextFamily, string>,\n    size: {\n      body: 'text-tf-body',\n      'body-sm': 'text-tf-body-sm',\n      caption: 'text-tf-caption',\n      'caption-sm': 'text-tf-caption-sm',\n      lead: 'max-w-tf-measure text-tf-lead',\n    } satisfies Record<TextSize, string>,\n    tabular: { false: '', true: 'tabular-nums' },\n    tone: TONE_CLASS,\n    uppercase: { false: '', true: eyebrowType },\n    weight: {\n      bold: 'font-bold',\n      medium: 'font-medium',\n      normal: 'font-normal',\n      semibold: 'font-semibold',\n    } satisfies Record<TextWeight, string>,\n  },\n})\n\nexport {\n  type TextFamily,\n  type TextSize,\n  type TextTone,\n  type TextWeight,\n  defaultTextFamily,\n  defaultTextSize,\n  defaultTextTone,\n  defaultTextWeight,\n  restingWeight,\n  textFamilies,\n  textRecipe,\n  textSizes,\n  textTones,\n  textWeights,\n}\n"],"mappings":";;;;AAaA,MAAM,kBAAkB;AAExB,MAAM,kBAAkB;AAExB,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAE1B,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,cAAc;CAClB;CACA;CACA;CACA;AACF;AAEA,MAAM,eAAe;CAAC;CAAQ;CAAQ;AAAS;AAE/C,MAAM,cAAc;CAClB,MAAM;CACN,WAAW;CACX,SAAS;CACT,cAAc;CACd,MAAM;AACR;AAEA,MAAM,iBAAiB,MAAgB,cAAoC;CACzE,IAAI,cAAc,MAChB,OAAO;CAET,OAAO,YAAY;AACrB;AAEA,MAAM,aAAa;CACjB,GAAG;CACH,IAAI;CACJ,OAAO;AACT;AAEA,MAAM,aAAa,IAAI,+CAA+C;CACpE,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;EACT,MAAA;EACA,WAAW;EACX,QAAQ;CACV;CACA,UAAU;EACR,QAAQ;GACN,SAAS;GACT,MAAM;GACN,MAAM;EACR;EACA,MAAM;GACJ,MAAM;GACN,WAAW;GACX,SAAS;GACT,cAAc;GACd,MAAM;EACR;EACA,SAAS;GAAE,OAAO;GAAI,MAAM;EAAe;EAC3C,MAAM;EACN,WAAW;GAAE,OAAO;GAAI,MAAM;EAAY;EAC1C,QAAQ;GACN,MAAM;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;CACF;AACF,CAAC"}