@nocoo/basalt 2.0.3 → 2.1.2

package/dist/charts/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/charts/tooltip.tsx"],"sourcesContent":["const HIDDEN_SERIES_KEYS = new Set([\"y\", \"y2\", \"y3\", \"value\", \"target\"]);\nconst TITLE_SIZE = 12;\nconst BODY_SIZE = 12;\nconst DOT_SIZE = 8;\n\nexport type ChartTooltipItem = {\n\tname?: string;\n\tvalue?: number | string;\n\tcolor?: string;\n\tfill?: string;\n\tstroke?: string;\n\tdataKey?: string | number;\n};\n\nexport type ChartTooltipContentProps = {\n\tactive?: boolean;\n\tpayload?: readonly ChartTooltipItem[];\n\tlabel?: string | number;\n\tformatter?: (value: number) => string;\n};\n\nexport function formatChartNumber(value: number): string {\n\tif (!Number.isFinite(value)) {\n\t\treturn \"—\";\n\t}\n\treturn new Intl.NumberFormat(undefined, {\n\t\tmaximumFractionDigits: Number.isInteger(value) ? 0 : 1,\n\t}).format(value);\n}\n\nfunction seriesLabel(item: ChartTooltipItem): string | undefined {\n\tconst name = item.name == null ? \"\" : String(item.name);\n\tconst key = item.dataKey == null ? \"\" : String(item.dataKey);\n\tif (HIDDEN_SERIES_KEYS.has(name) || HIDDEN_SERIES_KEYS.has(key)) {\n\t\treturn undefined;\n\t}\n\treturn name || undefined;\n}\n\nfunction seriesSwatch(item: ChartTooltipItem): string {\n\treturn item.color ?? item.fill ?? item.stroke ?? \"hsl(var(--basalt-chart-1))\";\n}\n\nexport function ChartTooltipContent({\n\tactive,\n\tpayload,\n\tlabel,\n\tformatter,\n}: ChartTooltipContentProps) {\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\tconst format = formatter ?? formatChartNumber;\n\tconst title = label == null || label === \"\" ? undefined : String(label);\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-tooltip\"\n\t\t\tstyle={{\n\t\t\t\tbackground: \"hsl(var(--basalt-popover))\",\n\t\t\t\tborder: \"1px solid hsl(var(--basalt-border) / 0.55)\",\n\t\t\t\tborderRadius: 10,\n\t\t\t\tboxShadow: \"0 12px 28px -8px rgb(0 0 0 / 0.28), 0 4px 10px -4px rgb(0 0 0 / 0.16)\",\n\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\tmaxWidth: 220,\n\t\t\t\tminWidth: 128,\n\t\t\t\tpadding: \"8px 12px\",\n\t\t\t}}\n\t\t>\n\t\t\t{title ? (\n\t\t\t\t<p\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\t\tfontSize: TITLE_SIZE,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\tlineHeight: 1.2,\n\t\t\t\t\t\tmargin: \"0 0 8px\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</p>\n\t\t\t) : null}\n\t\t\t<div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n\t\t\t\t{payload.map((item, index) => {\n\t\t\t\t\tconst raw = item.value;\n\t\t\t\t\tconst numeric =\n\t\t\t\t\t\ttypeof raw === \"number\" ? raw : typeof raw === \"string\" ? Number(raw) : Number.NaN;\n\t\t\t\t\tconst labelText = seriesLabel(item);\n\t\t\t\t\tconst key = `${String(item.dataKey ?? item.name ?? index)}-${String(index)}`;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\t\tfontSize: BODY_SIZE,\n\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t\tlineHeight: \"20px\",\n\t\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackground: seriesSwatch(item),\n\t\t\t\t\t\t\t\t\tborderRadius: 999,\n\t\t\t\t\t\t\t\t\tboxShadow: \"0 0 0 1px hsl(var(--basalt-popover-foreground) / 0.12)\",\n\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\theight: DOT_SIZE,\n\t\t\t\t\t\t\t\t\twidth: DOT_SIZE,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{labelText ? (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: \"hsl(var(--basalt-muted-foreground))\",\n\t\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\tfontVariantNumeric: \"tabular-nums\",\n\t\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t\t\tmarginLeft: labelText ? 0 : \"auto\",\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{Number.isFinite(numeric) ? format(numeric) : String(raw ?? \"—\")}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;AAAA,IAAM,oBAAqB,IAAI,IAAI;CAAC;CAAK;CAAM;CAAM;CAAS;AAAQ,CAAC,GACjE,IAAa,IACb,IAAY,IACZ,IAAW;AAkBjB,SAAgB,EAAkB,GAAuB;CAIxD,OAHK,OAAO,SAAS,CAAK,IAGnB,IAAI,KAAK,aAAa,KAAA,GAAW,EACvC,uBAAuB,SAAO,UAAU,CAAK,EAC9C,CAAC,CAAC,CAAC,OAAO,CAAK,IAJP;AAKT;AAEA,SAAS,EAAY,GAA4C;CAChE,IAAM,IAAO,EAAK,QAAQ,OAAO,KAAK,OAAO,EAAK,IAAI,GAChD,IAAM,EAAK,WAAW,OAAO,KAAK,OAAO,EAAK,OAAO;CACvD,QAAmB,IAAI,CAAI,KAAK,EAAmB,IAAI,CAAG,IAG9D,OAAO,KAAQ,KAAA;AAChB;AAEA,SAAS,EAAa,GAAgC;CACrD,OAAO,EAAK,SAAS,EAAK,QAAQ,EAAK,UAAU;AAClD;AAEA,SAAgB,EAAoB,EACnC,WACA,YACA,UACA,gBAC4B;CAC5B,IAAI,CAAC,KAAU,CAAC,GAAS,QACxB,OAAO;CAER,IAAM,IAAS,KAAa,GACtB,IAAQ,KAAS,QAAQ,MAAU,KAAK,KAAA,IAAY,OAAO,CAAK;CACtE,OACC,kBAAC,OAAD;EACC,eAAY;EACZ,OAAO;GACN,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,WAAW;GACX,OAAO;GACP,UAAU;GACV,UAAU;GACV,SAAS;EACV;EAXD,UAAA,CAaE,IACA,kBAAC,KAAD;GACC,OAAO;IACN,OAAO;IACP,UAAU;IACV,YAAY;IACZ,eAAe;IACf,YAAY;IACZ,QAAQ;GACT;GAEC,UAAA;EACC,CAAA,IACA,MACJ,kBAAC,OAAD;GAAK,OAAO;IAAE,SAAS;IAAQ,eAAe;IAAU,KAAK;GAAE;GAC7D,UAAA,EAAQ,KAAK,GAAM,MAAU;IAC7B,IAAM,IAAM,EAAK,OACX,IACL,OAAO,KAAQ,WAAW,IAAM,OAAO,KAAQ,WAAW,OAAO,CAAG,IAAI,KACnE,IAAY,EAAY,CAAI,GAC5B,IAAM,GAAG,OAAO,EAAK,WAAW,EAAK,QAAQ,CAAK,EAAE,GAAG,OAAO,CAAK;IACzE,OACC,kBAAC,OAAD;KAEC,OAAO;MACN,YAAY;MACZ,SAAS;MACT,UAAU;MACV,KAAK;MACL,YAAY;MACZ,UAAU;KACX;KATD,UAAA;MAWC,kBAAC,QAAD;OACC,eAAY;OACZ,OAAO;QACN,YAAY,EAAa,CAAI;QAC7B,cAAc;QACd,WAAW;QACX,YAAY;QACZ,QAAQ;QACR,OAAO;OACR;MACA,CAAA;MACA,IACA,kBAAC,QAAD;OACC,OAAO;QACN,OAAO;QACP,MAAM;QACN,UAAU;QACV,UAAU;QACV,cAAc;QACd,YAAY;OACb;OAEC,UAAA;MACI,CAAA,IACH;MACJ,kBAAC,QAAD;OACC,OAAO;QACN,OAAO;QACP,YAAY;QACZ,oBAAoB;QACpB,YAAY;QACZ,YAAY,IAAY,IAAI;OAC7B;OAEC,UAAA,OAAO,SAAS,CAAO,IAAI,EAAO,CAAO,IAAI,OAAO,KAAO,GAAG;MAC1D,CAAA;KACF;IA9CC,GAAA,CA8CD;GAEP,CAAC;EACG,CAAA,CACD;;AAEP"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/charts/tooltip.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nconst HIDDEN_SERIES_KEYS = new Set([\"y\", \"y2\", \"y3\", \"value\", \"target\"]);\nconst TITLE_SIZE = 12;\nconst BODY_SIZE = 12;\nconst DOT_SIZE = 8;\n\nexport type ChartTooltipItem = {\n\tname?: string;\n\tvalue?: number | string;\n\tcolor?: string;\n\tfill?: string;\n\tstroke?: string;\n\tdataKey?: string | number;\n};\n\nexport type ChartTooltipContentProps = {\n\tactive?: boolean;\n\tpayload?: readonly ChartTooltipItem[];\n\tlabel?: string | number;\n\tformatter?: (value: number) => string;\n};\n\nexport interface ChartTooltipRowProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n\t/**\n\t * Series or metric name displayed beside the color dot.\n\t * Preserves numeric `0` and React nodes; nullish values omit the label element.\n\t */\n\tlabel?: ReactNode;\n\t/**\n\t * Display value of the point or metric.\n\t * Finite numbers are automatically formatted via `formatter` or `formatChartNumber`.\n\t * `null` or `undefined` renders placeholder \"—\". ReactNode values are passed through.\n\t */\n\tvalue?: ReactNode;\n\t/**\n\t * Dot swatch indicator color. Defaults to `--basalt-chart-1`.\n\t */\n\tcolor?: string;\n\t/**\n\t * Optional unit suffix (e.g., \"ms\", \"req/s\", \"%\") rendered adjacent to valid values.\n\t * Omitted when `value` evaluates to placeholder \"—\".\n\t */\n\tunit?: ReactNode;\n\t/**\n\t * Custom numeric value formatter overriding `formatChartNumber`.\n\t */\n\tformatter?: (value: number) => string;\n\t/**\n\t * When true, suppresses rendering of the decorative color dot.\n\t * @default false\n\t */\n\thideIndicator?: boolean;\n}\n\nexport interface ChartTooltipSummaryProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n\t/**\n\t * Summary row heading label.\n\t * Preserves numeric `0` and custom nodes.\n\t * @default \"Total\"\n\t */\n\tlabel?: ReactNode;\n\t/**\n\t * Aggregated metric value. Finite numbers are formatted; nullish renders \"—\".\n\t */\n\tvalue?: ReactNode;\n\t/**\n\t * Optional unit suffix appended to the summary value.\n\t */\n\tunit?: ReactNode;\n\t/**\n\t * Custom numeric formatter for the summary value.\n\t */\n\tformatter?: (value: number) => string;\n}\n\nexport interface ChartTooltipDividerProps extends Omit<ComponentProps<\"hr\">, \"children\"> {}\n\nexport function formatChartNumber(value: number): string {\n\tif (!Number.isFinite(value)) {\n\t\treturn \"—\";\n\t}\n\treturn new Intl.NumberFormat(undefined, {\n\t\tmaximumFractionDigits: Number.isInteger(value) ? 0 : 1,\n\t}).format(value);\n}\n\nfunction seriesLabel(item: ChartTooltipItem): string | undefined {\n\tconst name = item.name == null ? \"\" : String(item.name);\n\tconst key = item.dataKey == null ? \"\" : String(item.dataKey);\n\tif (HIDDEN_SERIES_KEYS.has(name) || HIDDEN_SERIES_KEYS.has(key)) {\n\t\treturn undefined;\n\t}\n\treturn name || undefined;\n}\n\nfunction seriesSwatch(item: ChartTooltipItem): string {\n\treturn item.color ?? item.fill ?? item.stroke ?? \"hsl(var(--basalt-chart-1))\";\n}\n\nfunction formatTooltipValue(val: ReactNode, formatter?: (value: number) => string): ReactNode {\n\tif (val == null) {\n\t\treturn \"—\";\n\t}\n\tif (typeof val === \"number\") {\n\t\treturn formatter ? formatter(val) : formatChartNumber(val);\n\t}\n\treturn val;\n}\n\nexport function ChartTooltipRow({\n\tlabel,\n\tvalue,\n\tcolor,\n\tunit,\n\tformatter,\n\thideIndicator = false,\n\tstyle,\n\t...rest\n}: ChartTooltipRowProps) {\n\tconst formattedValue = formatTooltipValue(value, formatter);\n\tconst hasLabel = label != null;\n\tconst swatchColor = color ?? \"hsl(var(--basalt-chart-1))\";\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-tooltip-row\"\n\t\t\tstyle={{\n\t\t\t\talignItems: \"center\",\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tfontSize: BODY_SIZE,\n\t\t\t\tgap: 8,\n\t\t\t\tlineHeight: \"20px\",\n\t\t\t\tminWidth: 0,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{!hideIndicator ? (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: swatchColor,\n\t\t\t\t\t\tborderRadius: 999,\n\t\t\t\t\t\tboxShadow: \"0 0 0 1px hsl(var(--basalt-popover-foreground) / 0.12)\",\n\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\theight: DOT_SIZE,\n\t\t\t\t\t\twidth: DOT_SIZE,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{hasLabel ? (\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: \"hsl(var(--basalt-muted-foreground))\",\n\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\tfontVariantNumeric: \"tabular-nums\",\n\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\tmarginLeft: hasLabel ? 0 : \"auto\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{formattedValue}\n\t\t\t\t{unit != null && formattedValue !== \"—\" ? (\n\t\t\t\t\t<span style={{ fontWeight: 400, marginLeft: 2 }}>{unit}</span>\n\t\t\t\t) : null}\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n\nexport function ChartTooltipDivider({ style, ...rest }: ChartTooltipDividerProps) {\n\treturn (\n\t\t<hr\n\t\t\taria-orientation=\"horizontal\"\n\t\t\tdata-testid=\"chart-tooltip-divider\"\n\t\t\tstyle={{\n\t\t\t\tbackgroundColor: \"hsl(var(--basalt-border) / 0.55)\",\n\t\t\t\tborder: 0,\n\t\t\t\theight: 1,\n\t\t\t\tmargin: \"4px 0\",\n\t\t\t\twidth: \"100%\",\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport function ChartTooltipSummary({\n\tlabel = \"Total\",\n\tvalue,\n\tunit,\n\tformatter,\n\tstyle,\n\t...rest\n}: ChartTooltipSummaryProps) {\n\tconst formattedValue = formatTooltipValue(value, formatter);\n\tconst hasLabel = label != null;\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-tooltip-summary\"\n\t\t\tstyle={{\n\t\t\t\talignItems: \"center\",\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tfontSize: BODY_SIZE,\n\t\t\t\tgap: 8,\n\t\t\t\tlineHeight: \"20px\",\n\t\t\t\tminWidth: 0,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{hasLabel ? (\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: \"hsl(var(--basalt-muted-foreground))\",\n\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\tfontVariantNumeric: \"tabular-nums\",\n\t\t\t\t\tfontWeight: 700,\n\t\t\t\t\tmarginLeft: hasLabel ? 0 : \"auto\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{formattedValue}\n\t\t\t\t{unit != null && formattedValue !== \"—\" ? (\n\t\t\t\t\t<span style={{ fontWeight: 500, marginLeft: 2 }}>{unit}</span>\n\t\t\t\t) : null}\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n\nexport function ChartTooltipContent({\n\tactive,\n\tpayload,\n\tlabel,\n\tformatter,\n}: ChartTooltipContentProps) {\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\tconst format = formatter ?? formatChartNumber;\n\tconst title = label == null || label === \"\" ? undefined : String(label);\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-tooltip\"\n\t\t\tstyle={{\n\t\t\t\tbackground: \"hsl(var(--basalt-popover))\",\n\t\t\t\tborder: \"1px solid hsl(var(--basalt-border) / 0.55)\",\n\t\t\t\tborderRadius: 10,\n\t\t\t\tboxShadow: \"0 12px 28px -8px rgb(0 0 0 / 0.28), 0 4px 10px -4px rgb(0 0 0 / 0.16)\",\n\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\tmaxWidth: 220,\n\t\t\t\tminWidth: 128,\n\t\t\t\tpadding: \"8px 12px\",\n\t\t\t}}\n\t\t>\n\t\t\t{title ? (\n\t\t\t\t<p\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\t\tfontSize: TITLE_SIZE,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\tlineHeight: 1.2,\n\t\t\t\t\t\tmargin: \"0 0 8px\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</p>\n\t\t\t) : null}\n\t\t\t<div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n\t\t\t\t{payload.map((item, index) => {\n\t\t\t\t\tconst raw = item.value;\n\t\t\t\t\tconst numeric =\n\t\t\t\t\t\ttypeof raw === \"number\" ? raw : typeof raw === \"string\" ? Number(raw) : Number.NaN;\n\t\t\t\t\tconst labelText = seriesLabel(item);\n\t\t\t\t\tconst key = `${String(item.dataKey ?? item.name ?? index)}-${String(index)}`;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\t\tfontSize: BODY_SIZE,\n\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t\tlineHeight: \"20px\",\n\t\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackground: seriesSwatch(item),\n\t\t\t\t\t\t\t\t\tborderRadius: 999,\n\t\t\t\t\t\t\t\t\tboxShadow: \"0 0 0 1px hsl(var(--basalt-popover-foreground) / 0.12)\",\n\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\theight: DOT_SIZE,\n\t\t\t\t\t\t\t\t\twidth: DOT_SIZE,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{labelText ? (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: \"hsl(var(--basalt-muted-foreground))\",\n\t\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\tfontVariantNumeric: \"tabular-nums\",\n\t\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t\t\tmarginLeft: labelText ? 0 : \"auto\",\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{Number.isFinite(numeric) ? format(numeric) : String(raw ?? \"—\")}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/accordion.d.ts

@@ -1,6 +1,121 @@
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import * as React from "react";
-export declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionMultipleProps | AccordionPrimitive.AccordionSingleProps) & React.RefAttributes<HTMLDivElement>>;
+type RadixAccordionSingleProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    type: "single";
+};
+type RadixAccordionMultipleProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    type: "multiple";
+};
+type RadixAccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+export interface AccordionSingleProps extends Omit<RadixAccordionSingleProps, "type" | "value" | "defaultValue" | "onValueChange" | "collapsible" | "disabled" | "orientation" | "dir"> {
+    /**
+     * Single-expansion mode where at most one item is open.
+     */
+    type: "single";
+    /**
+     * Controlled string value of the expanded accordion item. Root forwards ref to HTMLDivElement.
+     */
+    value?: RadixAccordionSingleProps["value"];
+    /**
+     * Initial string value of the expanded accordion item when uncontrolled.
+     * @default ""
+     */
+    defaultValue?: RadixAccordionSingleProps["defaultValue"];
+    /**
+     * Callback invoked when the expanded accordion item changes.
+     */
+    onValueChange?: RadixAccordionSingleProps["onValueChange"];
+    /**
+     * Whether an open accordion item can be closed by clicking its trigger again in single mode.
+     * @default false
+     */
+    collapsible?: RadixAccordionSingleProps["collapsible"];
+    /**
+     * Whether interaction with the entire accordion is disabled.
+     * @default false
+     */
+    disabled?: RadixAccordionSingleProps["disabled"];
+    /**
+     * Layout orientation of the accordion used for roving keyboard navigation.
+     * @default "vertical"
+     */
+    orientation?: RadixAccordionSingleProps["orientation"];
+    /**
+     * Reading direction of the accordion for bidirectional text layouts.
+     * @default "ltr"
+     */
+    dir?: RadixAccordionSingleProps["dir"];
+}
+export interface AccordionMultipleProps extends Omit<RadixAccordionMultipleProps, "type" | "value" | "defaultValue" | "onValueChange" | "disabled" | "orientation" | "dir"> {
+    /**
+     * Multiple-expansion mode where multiple items can be open concurrently.
+     */
+    type: "multiple";
+    /**
+     * Controlled string array of expanded accordion items. Root forwards ref to HTMLDivElement.
+     */
+    value?: RadixAccordionMultipleProps["value"];
+    /**
+     * Initial string array of expanded accordion items when uncontrolled.
+     * @default []
+     */
+    defaultValue?: RadixAccordionMultipleProps["defaultValue"];
+    /**
+     * Callback invoked when expanded accordion items change.
+     */
+    onValueChange?: RadixAccordionMultipleProps["onValueChange"];
+    /**
+     * Whether interaction with the entire accordion is disabled.
+     * @default false
+     */
+    disabled?: RadixAccordionMultipleProps["disabled"];
+    /**
+     * Layout orientation of the accordion used for roving keyboard navigation.
+     * @default "vertical"
+     */
+    orientation?: RadixAccordionMultipleProps["orientation"];
+    /**
+     * Reading direction of the accordion for bidirectional text layouts.
+     * @default "ltr"
+     */
+    dir?: RadixAccordionMultipleProps["dir"];
+}
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+type RadixAccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;
+type RadixAccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
+export interface AccordionItemProps extends Omit<RadixAccordionItemProps, "value" | "disabled"> {
+    /**
+     * Unique string value identifying the accordion item. Item forwards ref to HTMLDivElement.
+     */
+    value: RadixAccordionItemProps["value"];
+    /**
+     * Whether this individual accordion item is disabled from user interaction.
+     * @default false
+     */
+    disabled?: RadixAccordionItemProps["disabled"];
+}
 export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
-export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface AccordionTriggerProps extends Omit<RadixAccordionTriggerProps, "asChild"> {
+    /**
+     * Change the default rendered button element to the child element, merging props and behavior.
+     * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.
+     * @default false
+     */
+    asChild?: RadixAccordionTriggerProps["asChild"];
+}
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface AccordionContentProps extends Omit<RadixAccordionContentProps, "asChild" | "forceMount"> {
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Content forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixAccordionContentProps["asChild"];
+    /**
+     * Force mounting content in DOM for external animation controls. Content unmounts when closed if omitted.
+     */
+    forceMount?: RadixAccordionContentProps["forceMount"];
+}
 export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/accordion.js

@@ -1,21 +1,28 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import * as t from "react";
-import { jsx as n } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-accordion";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-accordion";
 //#region src/components/accordion.tsx
-var i = r.Root, a = r.Item, o = t.forwardRef(({ className: t, children: i, ...a }, o) => /* @__PURE__ */ n(r.Header, {
-	className: "flex",
-	children: /* @__PURE__ */ n(r.Trigger, {
-		ref: o,
-		className: e("flex flex-1 items-center justify-between py-3 text-sm font-medium", t),
-		...a,
-		children: i
+var a = n.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ r(i.Root, {
+	ref: o,
+	className: e(t, n),
+	...a
+}));
+a.displayName = i.Root.displayName;
+var o = i.Item, s = n.forwardRef(({ className: n, children: a, ...o }, s) => /* @__PURE__ */ r(i.Header, {
+	className: e(t, "flex"),
+	children: /* @__PURE__ */ r(i.Trigger, {
+		ref: s,
+		className: e(t, "flex flex-1 items-center justify-between py-3 text-sm font-medium", n),
+		...o,
+		children: a
 	})
 }));
-o.displayName = r.Trigger.displayName;
-var s = r.Content;
+s.displayName = i.Trigger.displayName;
+var c = i.Content;
 //#endregion
-export { i as Accordion, s as AccordionContent, a as AccordionItem, o as AccordionTrigger };
+export { a as Accordion, c as AccordionContent, o as AccordionItem, s as AccordionTrigger };
 
 //# sourceMappingURL=accordion.js.map

package/dist/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":[],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport const Accordion = AccordionPrimitive.Root;\n\nexport const AccordionItem = AccordionPrimitive.Item;\n\nexport const AccordionTrigger = React.forwardRef<\n\tReact.ElementRef<typeof AccordionPrimitive.Trigger>,\n\tReact.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Header className=\"flex\">\n\t\t<AccordionPrimitive.Trigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-1 items-center justify-between py-3 text-sm font-medium\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</AccordionPrimitive.Trigger>\n\t</AccordionPrimitive.Header>\n));\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nexport const AccordionContent = AccordionPrimitive.Content;\n"],"mappings":";;;;;;AAIA,IAAa,IAAY,EAAmB,MAE/B,IAAgB,EAAmB,MAEnC,IAAmB,EAAM,YAGnC,EAAE,cAAW,aAAU,GAAG,KAAS,MACrC,kBAAC,EAAmB,QAApB;CAA2B,WAAU;CACpC,UAAA,kBAAC,EAAmB,SAApB;EACM;EACL,WAAW,EAAG,qEAAqE,CAAS;EAC5F,GAAI;EAEH;CAC0B,CAAA;AACF,CAAA,CAC3B;AACD,EAAiB,cAAc,EAAmB,QAAQ;AAE1D,IAAa,IAAmB,EAAmB"}
+{"version":3,"file":"accordion.js","names":[],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\ntype RadixAccordionSingleProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {\n\ttype: \"single\";\n};\ntype RadixAccordionMultipleProps = React.ComponentPropsWithoutRef<\n\ttypeof AccordionPrimitive.Root\n> & { type: \"multiple\" };\ntype RadixAccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;\n\nexport interface AccordionSingleProps\n\textends Omit<\n\t\tRadixAccordionSingleProps,\n\t\t| \"type\"\n\t\t| \"value\"\n\t\t| \"defaultValue\"\n\t\t| \"onValueChange\"\n\t\t| \"collapsible\"\n\t\t| \"disabled\"\n\t\t| \"orientation\"\n\t\t| \"dir\"\n\t> {\n\t/**\n\t * Single-expansion mode where at most one item is open.\n\t */\n\ttype: \"single\";\n\t/**\n\t * Controlled string value of the expanded accordion item. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixAccordionSingleProps[\"value\"];\n\t/**\n\t * Initial string value of the expanded accordion item when uncontrolled.\n\t * @default \"\"\n\t */\n\tdefaultValue?: RadixAccordionSingleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when the expanded accordion item changes.\n\t */\n\tonValueChange?: RadixAccordionSingleProps[\"onValueChange\"];\n\t/**\n\t * Whether an open accordion item can be closed by clicking its trigger again in single mode.\n\t * @default false\n\t */\n\tcollapsible?: RadixAccordionSingleProps[\"collapsible\"];\n\t/**\n\t * Whether interaction with the entire accordion is disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixAccordionSingleProps[\"disabled\"];\n\t/**\n\t * Layout orientation of the accordion used for roving keyboard navigation.\n\t * @default \"vertical\"\n\t */\n\torientation?: RadixAccordionSingleProps[\"orientation\"];\n\t/**\n\t * Reading direction of the accordion for bidirectional text layouts.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixAccordionSingleProps[\"dir\"];\n}\n\nexport interface AccordionMultipleProps\n\textends Omit<\n\t\tRadixAccordionMultipleProps,\n\t\t\"type\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"disabled\" | \"orientation\" | \"dir\"\n\t> {\n\t/**\n\t * Multiple-expansion mode where multiple items can be open concurrently.\n\t */\n\ttype: \"multiple\";\n\t/**\n\t * Controlled string array of expanded accordion items. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixAccordionMultipleProps[\"value\"];\n\t/**\n\t * Initial string array of expanded accordion items when uncontrolled.\n\t * @default []\n\t */\n\tdefaultValue?: RadixAccordionMultipleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when expanded accordion items change.\n\t */\n\tonValueChange?: RadixAccordionMultipleProps[\"onValueChange\"];\n\t/**\n\t * Whether interaction with the entire accordion is disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixAccordionMultipleProps[\"disabled\"];\n\t/**\n\t * Layout orientation of the accordion used for roving keyboard navigation.\n\t * @default \"vertical\"\n\t */\n\torientation?: RadixAccordionMultipleProps[\"orientation\"];\n\t/**\n\t * Reading direction of the accordion for bidirectional text layouts.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixAccordionMultipleProps[\"dir\"];\n}\n\nexport type AccordionProps = AccordionSingleProps | AccordionMultipleProps;\n\nexport const Accordion = React.forwardRef<\n\tReact.ElementRef<typeof AccordionPrimitive.Root>,\n\tAccordionProps\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Root ref={ref} className={cn(BASALT_UI_CLASS, className)} {...props} />\n));\nAccordion.displayName = AccordionPrimitive.Root.displayName;\n\ntype RadixAccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;\ntype RadixAccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;\n\nexport interface AccordionItemProps extends Omit<RadixAccordionItemProps, \"value\" | \"disabled\"> {\n\t/**\n\t * Unique string value identifying the accordion item. Item forwards ref to HTMLDivElement.\n\t */\n\tvalue: RadixAccordionItemProps[\"value\"];\n\t/**\n\t * Whether this individual accordion item is disabled from user interaction.\n\t * @default false\n\t */\n\tdisabled?: RadixAccordionItemProps[\"disabled\"];\n}\n\nexport const AccordionItem = AccordionPrimitive.Item;\n\nexport interface AccordionTriggerProps extends Omit<RadixAccordionTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAccordionTriggerProps[\"asChild\"];\n}\n\nexport const AccordionTrigger = React.forwardRef<\n\tReact.ElementRef<typeof AccordionPrimitive.Trigger>,\n\tAccordionTriggerProps\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Header className={cn(BASALT_UI_CLASS, \"flex\")}>\n\t\t<AccordionPrimitive.Trigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex flex-1 items-center justify-between py-3 text-sm font-medium\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</AccordionPrimitive.Trigger>\n\t</AccordionPrimitive.Header>\n));\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nexport interface AccordionContentProps\n\textends Omit<RadixAccordionContentProps, \"asChild\" | \"forceMount\"> {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAccordionContentProps[\"asChild\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls. Content unmounts when closed if omitted.\n\t */\n\tforceMount?: RadixAccordionContentProps[\"forceMount\"];\n}\n\nexport const AccordionContent = AccordionPrimitive.Content;\n"],"mappings":";;;;;;;AAyGA,IAAa,IAAY,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAmB,MAApB;CAA8B;CAAK,WAAW,EAAG,GAAiB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC1F;AACD,EAAU,cAAc,EAAmB,KAAK;AAiBhD,IAAa,IAAgB,EAAmB,MAWnC,IAAmB,EAAM,YAGnC,EAAE,cAAW,aAAU,GAAG,KAAS,MACrC,kBAAC,EAAmB,QAApB;CAA2B,WAAW,EAAG,GAAiB,MAAM;CAC/D,UAAA,kBAAC,EAAmB,SAApB;EACM;EACL,WAAW,EACV,GACA,qEACA,CACD;EACA,GAAI;EAEH;CAC0B,CAAA;AACF,CAAA,CAC3B;AACD,EAAiB,cAAc,EAAmB,QAAQ;AAgB1D,IAAa,IAAmB,EAAmB"}

package/dist/components/alert-dialog.d.ts

@@ -1,25 +1,143 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as React from "react";
 import { type DialogSize } from "./dialog.js";
-export declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+type RadixAlertDialogProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>;
+type RadixAlertDialogTriggerProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>;
+type RadixAlertDialogPortalProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>;
+type RadixAlertDialogOverlayProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>;
+type RadixAlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>;
+type RadixAlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;
+type RadixAlertDialogDescriptionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>;
+type RadixAlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>;
+type RadixAlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;
+export interface AlertDialogProps extends Omit<RadixAlertDialogProps, "open" | "defaultOpen" | "onOpenChange"> {
+    /**
+     * Controlled open state of the alert dialog.
+     */
+    open?: RadixAlertDialogProps["open"];
+    /**
+     * Uncontrolled default open state of the alert dialog on initial render.
+     * @default false
+     */
+    defaultOpen?: RadixAlertDialogProps["defaultOpen"];
+    /**
+     * Callback invoked when the open state changes.
+     */
+    onOpenChange?: RadixAlertDialogProps["onOpenChange"];
+}
+export declare const AlertDialog: React.FC<AlertDialogProps>;
+export interface AlertDialogTriggerProps extends Omit<RadixAlertDialogTriggerProps, "asChild"> {
+    /**
+     * Change the default rendered button element to the child element, merging props and behavior.
+     * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.
+     * @default false
+     */
+    asChild?: RadixAlertDialogTriggerProps["asChild"];
+}
 export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface AlertDialogPortalProps extends Omit<RadixAlertDialogPortalProps, "container" | "forceMount"> {
+    /**
+     * Target container element where the alert dialog overlay and content portal should mount.
+     */
+    container?: RadixAlertDialogPortalProps["container"];
+    /**
+     * Used to force mounting when controlling transition animations externally.
+     */
+    forceMount?: RadixAlertDialogPortalProps["forceMount"];
+}
 export declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
-export declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export type AlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
-    size?: DialogSize;
-};
-export declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+export interface AlertDialogOverlayProps extends Omit<RadixAlertDialogOverlayProps, "asChild" | "forceMount"> {
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Overlay forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixAlertDialogOverlayProps["asChild"];
+    /**
+     * Used to force mounting when controlling transition animations externally.
+     */
+    forceMount?: RadixAlertDialogOverlayProps["forceMount"];
+}
+export declare const AlertDialogOverlay: React.ForwardRefExoticComponent<AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export interface AlertDialogContentProps extends Omit<RadixAlertDialogContentProps, "size" | "asChild" | "forceMount" | "trapFocus" | "onOpenAutoFocus" | "onCloseAutoFocus" | "onEscapeKeyDown"> {
+    /**
+     * Fixed desktop width preset, shared with Dialog. Content scrolls vertically when overflowing available height.
+     * @default "base"
+     */
     size?: DialogSize;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-export declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare function AlertDialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Content forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixAlertDialogContentProps["asChild"];
+    /**
+     * Force mounting content in DOM for external animation controls.
+     * When forceMount is true, the content remains mounted even when closed.
+     * The caller is responsible for visibility transitions and unmounting after animation completes.
+     * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.
+     */
+    forceMount?: RadixAlertDialogContentProps["forceMount"];
+    /**
+     * Event handler called when auto-focusing on open. Defaults to focusing the cancel button. Can be prevented with event.preventDefault().
+     */
+    onOpenAutoFocus?: RadixAlertDialogContentProps["onOpenAutoFocus"];
+    /**
+     * Event handler called when restoring focus on close. Can be prevented with event.preventDefault().
+     */
+    onCloseAutoFocus?: RadixAlertDialogContentProps["onCloseAutoFocus"];
+    /**
+     * Event handler called when the Escape key is pressed. Can be prevented with event.preventDefault().
+     */
+    onEscapeKeyDown?: RadixAlertDialogContentProps["onEscapeKeyDown"];
+}
+export declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface AlertDialogTitleProps extends Omit<RadixAlertDialogTitleProps, "asChild"> {
+    /**
+     * Change the default rendered heading element to the child element, merging props and behavior.
+     * Title forwards ref to HTMLHeadingElement and inherits native h2 attributes.
+     * @default false
+     */
+    asChild?: RadixAlertDialogTitleProps["asChild"];
+}
+export declare const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface AlertDialogDescriptionProps extends Omit<RadixAlertDialogDescriptionProps, "asChild"> {
+    /**
+     * Change the default rendered paragraph element to the child element, merging props and behavior.
+     * Description forwards ref to HTMLParagraphElement and inherits native p attributes.
+     * @default false
+     */
+    asChild?: RadixAlertDialogDescriptionProps["asChild"];
+}
+export declare const AlertDialogDescription: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface AlertDialogCancelProps extends Omit<RadixAlertDialogCancelProps, "asChild"> {
+    /**
+     * Change the default rendered button element to the child element, merging props and behavior.
+     * Cancel forwards ref to HTMLButtonElement and inherits native button attributes.
+     * @default false
+     */
+    asChild?: RadixAlertDialogCancelProps["asChild"];
+}
+export declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
+export interface AlertDialogActionProps extends Omit<RadixAlertDialogActionProps, "asChild"> {
+    /**
+     * Change the default rendered button element to the child element, merging props and behavior.
+     * Action forwards ref to HTMLButtonElement and inherits native button attributes.
+     * @default false
+     */
+    asChild?: RadixAlertDialogActionProps["asChild"];
+}
+export declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
+export interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): React.JSX.Element;
 export declare namespace AlertDialogHeader {
     var displayName: string;
 }
-export declare function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): React.JSX.Element;
 export declare namespace AlertDialogFooter {
     var displayName: string;
 }
+export {};

package/dist/components/alert-dialog.js

@@ -12,15 +12,18 @@ var c = i.Root, l = i.Trigger, u = i.Portal, d = a.forwardRef(({ className: e, .
 	...t
 }));
 d.displayName = i.Overlay.displayName;
-var f = a.forwardRef(({ className: e, size: t = "base", ...n }, a) => /* @__PURE__ */ s(u, { children: [/* @__PURE__ */ o(d, {}), /* @__PURE__ */ o(i.Content, {
-	ref: a,
-	"data-basalt-surface-root": "",
-	className: r({
-		size: t,
-		className: e
-	}),
-	...n
-})] }));
+var f = a.forwardRef(({ className: e, size: t = "base", ...n }, a) => /* @__PURE__ */ s(u, {
+	forceMount: n.forceMount,
+	children: [/* @__PURE__ */ o(d, { forceMount: n.forceMount }), /* @__PURE__ */ o(i.Content, {
+		ref: a,
+		"data-basalt-surface-root": "",
+		className: r({
+			size: t,
+			className: e
+		}),
+		...n
+	})]
+}));
 f.displayName = i.Content.displayName;
 var p = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ o(i.Title, {
 	ref: r,

package/dist/components/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { buttonVariants } from \"./button\";\nimport { type DialogSize, dialogOverlayClass, dialogPanelClass } from \"./dialog\";\n\nexport const AlertDialog = AlertDialogPrimitive.Root;\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\nexport const AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nexport const AlertDialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nexport type AlertDialogContentProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Content\n> & {\n\tsize?: DialogSize;\n};\n\nexport const AlertDialogContent = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(({ className, size = \"base\", ...props }, ref) => (\n\t<AlertDialogPortal>\n\t\t<AlertDialogOverlay />\n\t\t<AlertDialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t{...props}\n\t\t/>\n\t</AlertDialogPortal>\n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nexport const AlertDialogTitle = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nexport const AlertDialogDescription = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;\n\nexport const AlertDialogCancel = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Cancel\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"outline\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport const AlertDialogAction = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Action>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Action\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"destructive\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nexport const AlertDialogHeader = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-2 text-left\", className)} {...props} />\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nexport const AlertDialogFooter = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cn(\"mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n\t\t{...props}\n\t/>\n);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n"],"mappings":";;;;;;;;AAMA,IAAa,IAAc,EAAqB,MACnC,IAAqB,EAAqB,SAC1C,IAAoB,EAAqB,QAEzC,IAAqB,EAAM,YAGrC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,SAAtB;CAAmC;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC9F;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAQ9D,IAAa,IAAqB,EAAM,YAGrC,EAAE,cAAW,UAAO,QAAQ,GAAG,KAAS,MAC1C,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,CAAqB,CAAA,GACrB,kBAAC,EAAqB,SAAtB;CACM;CACL,4BAAyB;CACzB,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CAC/C,GAAI;AACJ,CAAA,CACiB,EAAA,CAAA,CACnB;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAE9D,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,OAAtB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAqB,MAAM;AAE1D,IAAa,IAAyB,EAAM,YAGzC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,aAAtB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAuB,cAAc,EAAqB,YAAY;AAEtE,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,UAAU,CAAC,GAAG,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAE5D,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,cAAc,CAAC,GAAG,CAAS;CACnE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAE5D,IAAa,KAAqB,EACjC,cACA,GAAG,QAEH,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAkB,cAAc;AAEhC,IAAa,KAAqB,EACjC,cACA,GAAG,QAEH,kBAAC,OAAD;CACC,WAAW,EAAG,+DAA+D,CAAS;CACtF,GAAI;AACJ,CAAA;AAEF,EAAkB,cAAc"}
+{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { buttonVariants } from \"./button\";\nimport { type DialogSize, dialogOverlayClass, dialogPanelClass } from \"./dialog\";\n\ntype RadixAlertDialogProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>;\ntype RadixAlertDialogTriggerProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Trigger\n>;\ntype RadixAlertDialogPortalProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Portal\n>;\ntype RadixAlertDialogOverlayProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Overlay\n>;\ntype RadixAlertDialogContentProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Content\n>;\ntype RadixAlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;\ntype RadixAlertDialogDescriptionProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Description\n>;\ntype RadixAlertDialogActionProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Action\n>;\ntype RadixAlertDialogCancelProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Cancel\n>;\n\nexport interface AlertDialogProps\n\textends Omit<RadixAlertDialogProps, \"open\" | \"defaultOpen\" | \"onOpenChange\"> {\n\t/**\n\t * Controlled open state of the alert dialog.\n\t */\n\topen?: RadixAlertDialogProps[\"open\"];\n\t/**\n\t * Uncontrolled default open state of the alert dialog on initial render.\n\t * @default false\n\t */\n\tdefaultOpen?: RadixAlertDialogProps[\"defaultOpen\"];\n\t/**\n\t * Callback invoked when the open state changes.\n\t */\n\tonOpenChange?: RadixAlertDialogProps[\"onOpenChange\"];\n}\n\nexport const AlertDialog: React.FC<AlertDialogProps> = AlertDialogPrimitive.Root;\n\nexport interface AlertDialogTriggerProps extends Omit<RadixAlertDialogTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogTriggerProps[\"asChild\"];\n}\n\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\nexport interface AlertDialogPortalProps\n\textends Omit<RadixAlertDialogPortalProps, \"container\" | \"forceMount\"> {\n\t/**\n\t * Target container element where the alert dialog overlay and content portal should mount.\n\t */\n\tcontainer?: RadixAlertDialogPortalProps[\"container\"];\n\t/**\n\t * Used to force mounting when controlling transition animations externally.\n\t */\n\tforceMount?: RadixAlertDialogPortalProps[\"forceMount\"];\n}\n\nexport const AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nexport interface AlertDialogOverlayProps\n\textends Omit<RadixAlertDialogOverlayProps, \"asChild\" | \"forceMount\"> {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Overlay forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogOverlayProps[\"asChild\"];\n\t/**\n\t * Used to force mounting when controlling transition animations externally.\n\t */\n\tforceMount?: RadixAlertDialogOverlayProps[\"forceMount\"];\n}\n\nexport const AlertDialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n\tAlertDialogOverlayProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nexport interface AlertDialogContentProps\n\textends Omit<\n\t\tRadixAlertDialogContentProps,\n\t\t| \"size\"\n\t\t| \"asChild\"\n\t\t| \"forceMount\"\n\t\t| \"trapFocus\"\n\t\t| \"onOpenAutoFocus\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t> {\n\t/**\n\t * Fixed desktop width preset, shared with Dialog. Content scrolls vertically when overflowing available height.\n\t * @default \"base\"\n\t */\n\tsize?: DialogSize;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogContentProps[\"asChild\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * When forceMount is true, the content remains mounted even when closed.\n\t * The caller is responsible for visibility transitions and unmounting after animation completes.\n\t * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.\n\t */\n\tforceMount?: RadixAlertDialogContentProps[\"forceMount\"];\n\t/**\n\t * Event handler called when auto-focusing on open. Defaults to focusing the cancel button. Can be prevented with event.preventDefault().\n\t */\n\tonOpenAutoFocus?: RadixAlertDialogContentProps[\"onOpenAutoFocus\"];\n\t/**\n\t * Event handler called when restoring focus on close. Can be prevented with event.preventDefault().\n\t */\n\tonCloseAutoFocus?: RadixAlertDialogContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Event handler called when the Escape key is pressed. Can be prevented with event.preventDefault().\n\t */\n\tonEscapeKeyDown?: RadixAlertDialogContentProps[\"onEscapeKeyDown\"];\n}\n\nexport const AlertDialogContent = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(({ className, size = \"base\", ...props }, ref) => (\n\t<AlertDialogPortal forceMount={props.forceMount}>\n\t\t<AlertDialogOverlay forceMount={props.forceMount} />\n\t\t<AlertDialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t{...props}\n\t\t/>\n\t</AlertDialogPortal>\n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nexport interface AlertDialogTitleProps extends Omit<RadixAlertDialogTitleProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered heading element to the child element, merging props and behavior.\n\t * Title forwards ref to HTMLHeadingElement and inherits native h2 attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogTitleProps[\"asChild\"];\n}\n\nexport const AlertDialogTitle = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Title>,\n\tAlertDialogTitleProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nexport interface AlertDialogDescriptionProps\n\textends Omit<RadixAlertDialogDescriptionProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered paragraph element to the child element, merging props and behavior.\n\t * Description forwards ref to HTMLParagraphElement and inherits native p attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogDescriptionProps[\"asChild\"];\n}\n\nexport const AlertDialogDescription = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Description>,\n\tAlertDialogDescriptionProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;\n\nexport interface AlertDialogCancelProps extends Omit<RadixAlertDialogCancelProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Cancel forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogCancelProps[\"asChild\"];\n}\n\nexport const AlertDialogCancel = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n\tAlertDialogCancelProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Cancel\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"outline\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport interface AlertDialogActionProps extends Omit<RadixAlertDialogActionProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Action forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogActionProps[\"asChild\"];\n}\n\nexport const AlertDialogAction = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Action>,\n\tAlertDialogActionProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Action\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"destructive\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nexport interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const AlertDialogHeader = ({ className, ...props }: AlertDialogHeaderProps) => (\n\t<div className={cn(\"flex flex-col space-y-2 text-left\", className)} {...props} />\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nexport interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const AlertDialogFooter = ({ className, ...props }: AlertDialogFooterProps) => (\n\t<div\n\t\tclassName={cn(\"mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n\t\t{...props}\n\t/>\n);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n"],"mappings":";;;;;;;;AA+CA,IAAa,IAA0C,EAAqB,MAW/D,IAAqB,EAAqB,SAc1C,IAAoB,EAAqB,QAgBzC,IAAqB,EAAM,YAGrC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,SAAtB;CAAmC;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC9F;AACD,EAAmB,cAAc,EAAqB,QAAQ;AA6C9D,IAAa,IAAqB,EAAM,YAGrC,EAAE,cAAW,UAAO,QAAQ,GAAG,KAAS,MAC1C,kBAAC,GAAD;CAAmB,YAAY,EAAM;CAArC,UAAA,CACC,kBAAC,GAAD,EAAoB,YAAY,EAAM,WAAa,CAAA,GACnD,kBAAC,EAAqB,SAAtB;EACM;EACL,4BAAyB;EACzB,WAAW,EAAiB;GAAE;GAAM;EAAU,CAAC;EAC/C,GAAI;CACJ,CAAA,CACiB;AACnB,CAAA,CAAA;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAW9D,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,OAAtB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAqB,MAAM;AAY1D,IAAa,IAAyB,EAAM,YAGzC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,aAAtB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAuB,cAAc,EAAqB,YAAY;AAWtE,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,UAAU,CAAC,GAAG,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAW5D,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,cAAc,CAAC,GAAG,CAAS;CACnE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAI5D,IAAa,KAAqB,EAAE,cAAW,GAAG,QACjD,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAkB,cAAc;AAIhC,IAAa,KAAqB,EAAE,cAAW,GAAG,QACjD,kBAAC,OAAD;CACC,WAAW,EAAG,+DAA+D,CAAS;CACtF,GAAI;AACJ,CAAA;AAEF,EAAkB,cAAc"}

package/dist/components/app-header.js

@@ -1,35 +1,36 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Breadcrumbs as t } from "./breadcrumbs.js";
-import { ChevronRight as n } from "lucide-react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { Breadcrumbs as n } from "./breadcrumbs.js";
+import { ChevronRight as r } from "lucide-react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/app-header.tsx
-function o({ leading: o, breadcrumbs: s, title: c, actions: l, className: u, ...d }) {
-	return /* @__PURE__ */ a("header", {
-		className: e("flex h-14 shrink-0 items-center justify-between gap-3 px-4 md:px-6", u),
-		...d,
-		children: [/* @__PURE__ */ a("div", {
+function s({ leading: s, breadcrumbs: c, title: l, actions: u, className: d, ...f }) {
+	return /* @__PURE__ */ o("header", {
+		className: e(t, "flex h-14 shrink-0 items-center justify-between gap-3 px-4 md:px-6", d),
+		...f,
+		children: [/* @__PURE__ */ o("div", {
 			className: "flex min-w-0 items-center gap-3",
-			children: [o, /* @__PURE__ */ a("div", {
+			children: [s, /* @__PURE__ */ o("div", {
 				className: "flex min-w-0 items-center gap-1",
-				children: [s && s.length > 0 ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(t, {
-					items: s,
+				children: [c && c.length > 0 ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
+					items: c,
 					className: "min-w-0"
-				}), /* @__PURE__ */ i(n, {
+				}), /* @__PURE__ */ a(r, {
 					className: "size-3 shrink-0 text-basalt-muted-foreground",
 					"aria-hidden": "true"
-				})] }) : null, c ? /* @__PURE__ */ i("h1", {
+				})] }) : null, l ? /* @__PURE__ */ a("h1", {
 					className: "truncate text-sm font-normal text-basalt-foreground",
-					children: c
+					children: l
 				}) : null]
 			})]
-		}), l ? /* @__PURE__ */ i("div", {
+		}), u ? /* @__PURE__ */ a("div", {
 			className: "flex shrink-0 items-center gap-1",
-			children: l
+			children: u
 		}) : null]
 	});
 }
 //#endregion
-export { o as AppHeader };
+export { s as AppHeader };
 
 //# sourceMappingURL=app-header.js.map

package/dist/components/app-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-header.js","names":[],"sources":["../../src/components/app-header.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\n\nexport function AppHeader({\n\tleading,\n\tbreadcrumbs,\n\ttitle,\n\tactions,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLElement> & {\n\tleading?: ReactNode;\n\tbreadcrumbs?: { href?: string; label: ReactNode }[];\n\ttitle?: ReactNode;\n\tactions?: ReactNode;\n}) {\n\treturn (\n\t\t<header\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-14 shrink-0 items-center justify-between gap-3 px-4 md:px-6\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex min-w-0 items-center gap-3\">\n\t\t\t\t{leading}\n\t\t\t\t<div className=\"flex min-w-0 items-center gap-1\">\n\t\t\t\t\t{breadcrumbs && breadcrumbs.length > 0 ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Breadcrumbs items={breadcrumbs} className=\"min-w-0\" />\n\t\t\t\t\t\t\t<ChevronRight\n\t\t\t\t\t\t\t\tclassName=\"size-3 shrink-0 text-basalt-muted-foreground\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{title ? (\n\t\t\t\t\t\t<h1 className=\"truncate text-sm font-normal text-basalt-foreground\">{title}</h1>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{actions ? <div className=\"flex shrink-0 items-center gap-1\">{actions}</div> : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;;AAKA,SAAgB,EAAU,EACzB,YACA,gBACA,UACA,YACA,cACA,GAAG,KAMD;CACF,OACC,kBAAC,UAAD;EACC,WAAW,EACV,sEACA,CACD;EACA,GAAI;EALL,UAAA,CAOC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,GACD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,KAAe,EAAY,SAAS,IACpC,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,GAAD;KAAa,OAAO;KAAa,WAAU;IAAW,CAAA,GACtD,kBAAC,GAAD;KACC,WAAU;KACV,eAAY;IACZ,CAAA,CACA,EAAA,CAAA,IACC,MACH,IACA,kBAAC,MAAD;KAAI,WAAU;KAAuD,UAAA;IAAU,CAAA,IAC5E,IACA;GACD,CAAA,CAAA;EACJ,CAAA,GAAA,IAAU,kBAAC,OAAD;GAAK,WAAU;GAAoC,UAAA;EAAa,CAAA,IAAI,IACxE;;AAEV"}
+{"version":3,"file":"app-header.js","names":[],"sources":["../../src/components/app-header.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\n\nexport function AppHeader({\n\tleading,\n\tbreadcrumbs,\n\ttitle,\n\tactions,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLElement> & {\n\tleading?: ReactNode;\n\tbreadcrumbs?: { href?: string; label: ReactNode }[];\n\ttitle?: ReactNode;\n\tactions?: ReactNode;\n}) {\n\treturn (\n\t\t<header\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex h-14 shrink-0 items-center justify-between gap-3 px-4 md:px-6\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex min-w-0 items-center gap-3\">\n\t\t\t\t{leading}\n\t\t\t\t<div className=\"flex min-w-0 items-center gap-1\">\n\t\t\t\t\t{breadcrumbs && breadcrumbs.length > 0 ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Breadcrumbs items={breadcrumbs} className=\"min-w-0\" />\n\t\t\t\t\t\t\t<ChevronRight\n\t\t\t\t\t\t\t\tclassName=\"size-3 shrink-0 text-basalt-muted-foreground\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{title ? (\n\t\t\t\t\t\t<h1 className=\"truncate text-sm font-normal text-basalt-foreground\">{title}</h1>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{actions ? <div className=\"flex shrink-0 items-center gap-1\">{actions}</div> : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,EAAU,EACzB,YACA,gBACA,UACA,YACA,cACA,GAAG,KAMD;CACF,OACC,kBAAC,UAAD;EACC,WAAW,EACV,GACA,sEACA,CACD;EACA,GAAI;EANL,UAAA,CAQC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,GACD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,KAAe,EAAY,SAAS,IACpC,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,GAAD;KAAa,OAAO;KAAa,WAAU;IAAW,CAAA,GACtD,kBAAC,GAAD;KACC,WAAU;KACV,eAAY;IACZ,CAAA,CACA,EAAA,CAAA,IACC,MACH,IACA,kBAAC,MAAD;KAAI,WAAU;KAAuD,UAAA;IAAU,CAAA,IAC5E,IACA;GACD,CAAA,CAAA;EACJ,CAAA,GAAA,IAAU,kBAAC,OAAD;GAAK,WAAU;GAAoC,UAAA;EAAa,CAAA,IAAI,IACxE;;AAEV"}

package/dist/components/app-shell.js

@@ -1,29 +1,30 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { jsx as t } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/components/app-shell.tsx
-function n({ href: n = "#main-content", className: r, children: i, ...a }) {
-	return /* @__PURE__ */ t("a", {
-		href: n,
-		className: e("sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:rounded-lg focus:bg-basalt-primary focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-basalt-primary-foreground", r),
-		...a,
-		children: i
+function r({ href: r = "#main-content", className: i, children: a, ...o }) {
+	return /* @__PURE__ */ n("a", {
+		href: r,
+		className: e(t, "sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:rounded-lg focus:bg-basalt-primary focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-basalt-primary-foreground", i),
+		...o,
+		children: a
 	});
 }
-function r({ className: n, ...r }) {
-	return /* @__PURE__ */ t("div", {
-		className: e("flex h-screen w-full overflow-hidden bg-basalt-background", n),
+function i({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("flex h-screen w-full overflow-hidden overscroll-none bg-basalt-background", t),
 		...r
 	});
 }
-function i({ className: n, ...r }) {
-	return /* @__PURE__ */ t("main", {
+function a({ className: t, ...r }) {
+	return /* @__PURE__ */ n("main", {
 		id: "main-content",
-		className: e("flex h-full min-w-0 flex-1 flex-col overflow-hidden", n),
+		className: e("flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden", t),
 		...r
 	});
 }
 //#endregion
-export { i as AppMain, r as AppShell, n as AppSkipLink };
+export { a as AppMain, i as AppShell, r as AppSkipLink };
 
 //# sourceMappingURL=app-shell.js.map

package/dist/components/app-shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.js","names":[],"sources":["../../src/components/app-shell.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, HTMLAttributes } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport function AppSkipLink({\n\thref = \"#main-content\",\n\tclassName,\n\tchildren,\n\t...props\n}: AnchorHTMLAttributes<HTMLAnchorElement>) {\n\treturn (\n\t\t<a\n\t\t\thref={href}\n\t\t\tclassName={cn(\n\t\t\t\t\"sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:rounded-lg focus:bg-basalt-primary focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-basalt-primary-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</a>\n\t);\n}\n\nexport function AppShell({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex h-screen w-full overflow-hidden bg-basalt-background\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function AppMain({ className, ...props }: HTMLAttributes<HTMLElement>) {\n\treturn (\n\t\t<main\n\t\t\tid=\"main-content\"\n\t\t\tclassName={cn(\"flex h-full min-w-0 flex-1 flex-col overflow-hidden\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;AAGA,SAAgB,EAAY,EAC3B,UAAO,iBACP,cACA,aACA,GAAG,KACwC;CAC3C,OACC,kBAAC,KAAD;EACO;EACN,WAAW,EACV,uNACA,CACD;EACA,GAAI;EAEH;CACC,CAAA;AAEL;AAEA,SAAgB,EAAS,EAAE,cAAW,GAAG,KAAyC;CACjF,OACC,kBAAC,OAAD;EACC,WAAW,EAAG,6DAA6D,CAAS;EACpF,GAAI;CACJ,CAAA;AAEH;AAEA,SAAgB,EAAQ,EAAE,cAAW,GAAG,KAAsC;CAC7E,OACC,kBAAC,QAAD;EACC,IAAG;EACH,WAAW,EAAG,uDAAuD,CAAS;EAC9E,GAAI;CACJ,CAAA;AAEH"}
+{"version":3,"file":"app-shell.js","names":[],"sources":["../../src/components/app-shell.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, HTMLAttributes } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport function AppSkipLink({\n\thref = \"#main-content\",\n\tclassName,\n\tchildren,\n\t...props\n}: AnchorHTMLAttributes<HTMLAnchorElement>) {\n\treturn (\n\t\t<a\n\t\t\thref={href}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:rounded-lg focus:bg-basalt-primary focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-basalt-primary-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</a>\n\t);\n}\n\nexport function AppShell({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-screen w-full overflow-hidden overscroll-none bg-basalt-background\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function AppMain({ className, ...props }: HTMLAttributes<HTMLElement>) {\n\treturn (\n\t\t<main\n\t\t\tid=\"main-content\"\n\t\t\tclassName={cn(\"flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;AAIA,SAAgB,EAAY,EAC3B,UAAO,iBACP,cACA,aACA,GAAG,KACwC;CAC3C,OACC,kBAAC,KAAD;EACO;EACN,WAAW,EACV,GACA,uNACA,CACD;EACA,GAAI;EAEH;CACC,CAAA;AAEL;AAEA,SAAgB,EAAS,EAAE,cAAW,GAAG,KAAyC;CACjF,OACC,kBAAC,OAAD;EACC,WAAW,EACV,6EACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH;AAEA,SAAgB,EAAQ,EAAE,cAAW,GAAG,KAAsC;CAC7E,OACC,kBAAC,QAAD;EACC,IAAG;EACH,WAAW,EAAG,+DAA+D,CAAS;EACtF,GAAI;CACJ,CAAA;AAEH"}

package/dist/components/autocomplete.d.ts

@@ -5,6 +5,10 @@ export type AutocompleteItem = TypeaheadItem;
 export type AutocompleteProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue" | "onChange"> & {
     /**
      * Suggestions shown as the query matches. Values outside the list are allowed.
+     *
+     * Note: When focus leaves the field (via pointer click or Tab/Shift+Tab navigation),
+     * any uncommitted text or matching suggestion is committed once without stealing focus
+     * back to the input, allowing natural focus traversal.
      */
     items: AutocompleteItem[];
     /**