@nocoo/basalt 2.1.8 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ai/INTEGRATION.md +64 -28
- package/ai/RECIPES.md +46 -1
- package/ai/USAGE.md +2 -2
- package/ai/registry.json +56 -14
- package/dist/assets/brand-mark.js.map +1 -1
- package/dist/charts/area.js.map +1 -1
- package/dist/charts/bar.js.map +1 -1
- package/dist/charts/bullet.js.map +1 -1
- package/dist/charts/charts.js.map +1 -1
- package/dist/charts/config.js.map +1 -1
- package/dist/charts/custom-chart.js.map +1 -1
- package/dist/charts/date-navigation.js.map +1 -1
- package/dist/charts/donut.js.map +1 -1
- package/dist/charts/frame.js.map +1 -1
- package/dist/charts/funnel.js.map +1 -1
- package/dist/charts/gauge.js.map +1 -1
- package/dist/charts/grouped-bar.js.map +1 -1
- package/dist/charts/heatmap-calendar.js.map +1 -1
- package/dist/charts/heatmap-matrix.js.map +1 -1
- package/dist/charts/item-list.js.map +1 -1
- package/dist/charts/legend.js.map +1 -1
- package/dist/charts/line.js.map +1 -1
- package/dist/charts/palette.js.map +1 -1
- package/dist/charts/radar.js.map +1 -1
- package/dist/charts/sample.js.map +1 -1
- package/dist/charts/sankey.js.map +1 -1
- package/dist/charts/series.js.map +1 -1
- package/dist/charts/slot-bar.js.map +1 -1
- package/dist/charts/sparkline.js.map +1 -1
- package/dist/charts/stacked-bar.js.map +1 -1
- package/dist/charts/stat-card.js.map +1 -1
- package/dist/charts/timeline.js.map +1 -1
- package/dist/charts/timeseries.js.map +1 -1
- package/dist/charts/tooltip.js.map +1 -1
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/alert-dialog.js.map +1 -1
- package/dist/components/app-header.d.ts +5 -1
- package/dist/components/app-header.js +12 -4
- package/dist/components/app-header.js.map +1 -1
- package/dist/components/app-shell.d.ts +4 -1
- package/dist/components/app-shell.js +7 -4
- package/dist/components/app-shell.js.map +1 -1
- package/dist/components/autocomplete.js.map +1 -1
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/badge.js.map +1 -1
- package/dist/components/banner.js.map +1 -1
- package/dist/components/basalt-mark.js.map +1 -1
- package/dist/components/battery-meter.js.map +1 -1
- package/dist/components/breadcrumbs.js.map +1 -1
- package/dist/components/button.js.map +1 -1
- package/dist/components/chat-bubble.js.map +1 -1
- package/dist/components/chat-composer.js.map +1 -1
- package/dist/components/chat-header.js.map +1 -1
- package/dist/components/chat-inbox.js.map +1 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/clipboard-text.js.map +1 -1
- package/dist/components/code.js.map +1 -1
- package/dist/components/collapsible.js.map +1 -1
- package/dist/components/combobox.js.map +1 -1
- package/dist/components/command-palette.js.map +1 -1
- package/dist/components/confirm-dialog.d.ts +4 -1
- package/dist/components/confirm-dialog.js +20 -18
- package/dist/components/confirm-dialog.js.map +1 -1
- package/dist/components/context-menu.js.map +1 -1
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/delete-resource.js.map +1 -1
- package/dist/components/description-list.js.map +1 -1
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/dock.js.map +1 -1
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/editable-nav-item.js.map +1 -1
- package/dist/components/empty.js.map +1 -1
- package/dist/components/fab.js.map +1 -1
- package/dist/components/field.js.map +1 -1
- package/dist/components/file-dropzone.js.map +1 -1
- package/dist/components/filter-bar.js.map +1 -1
- package/dist/components/flow.js.map +1 -1
- package/dist/components/grid.js.map +1 -1
- package/dist/components/hover-card.js.map +1 -1
- package/dist/components/icon-picker.js.map +1 -1
- package/dist/components/inline-editable.js.map +1 -1
- package/dist/components/input-area.js.map +1 -1
- package/dist/components/input-group.js.map +1 -1
- package/dist/components/input.js.map +1 -1
- package/dist/components/label.js.map +1 -1
- package/dist/components/layer-card.js.map +1 -1
- package/dist/components/link.js.map +1 -1
- package/dist/components/loader.js.map +1 -1
- package/dist/components/loading-screen.js.map +1 -1
- package/dist/components/menu-bar.js.map +1 -1
- package/dist/components/meter.js.map +1 -1
- package/dist/components/multi-select.js.map +1 -1
- package/dist/components/navigation-menu.js.map +1 -1
- package/dist/components/overlay.js.map +1 -1
- package/dist/components/page-header.js.map +1 -1
- package/dist/components/pagination.js.map +1 -1
- package/dist/components/popover.js.map +1 -1
- package/dist/components/radio.js.map +1 -1
- package/dist/components/resource-list.js.map +1 -1
- package/dist/components/responsive-master-detail.js +5 -5
- package/dist/components/responsive-master-detail.js.map +1 -1
- package/dist/components/scroll-area.js.map +1 -1
- package/dist/components/section-rule.js.map +1 -1
- package/dist/components/segment-control.js.map +1 -1
- package/dist/components/select.js.map +1 -1
- package/dist/components/sensitive-input.js.map +1 -1
- package/dist/components/separator.js.map +1 -1
- package/dist/components/sheet.js +1 -0
- package/dist/components/sheet.js.map +1 -1
- package/dist/components/sidebar.d.ts +3 -1
- package/dist/components/sidebar.js +8 -5
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/skeleton-line.js.map +1 -1
- package/dist/components/slider.js.map +1 -1
- package/dist/components/stat-strip.js.map +1 -1
- package/dist/components/switch.js.map +1 -1
- package/dist/components/table-of-contents.js.map +1 -1
- package/dist/components/table-pager.js.map +1 -1
- package/dist/components/table.js.map +1 -1
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/tag-badge.js.map +1 -1
- package/dist/components/tag-color-picker.js.map +1 -1
- package/dist/components/text.js.map +1 -1
- package/dist/components/theme-toggle.js.map +1 -1
- package/dist/components/toast.js.map +1 -1
- package/dist/components/toggle-group.js.map +1 -1
- package/dist/components/toggle.js.map +1 -1
- package/dist/components/toolbar.js.map +1 -1
- package/dist/components/tooltip.js.map +1 -1
- package/dist/components/typeahead-field.js.map +1 -1
- package/dist/components/upload-queue.js.map +1 -1
- package/dist/providers/accent.js +1 -1
- package/dist/providers/accent.js.map +1 -1
- package/dist/providers/link.js.map +1 -1
- package/dist/providers/theme.js +1 -1
- package/dist/providers/theme.js.map +1 -1
- package/dist/styles/base.css +116 -0
- package/dist/styles/standalone.css +124 -3
- package/dist/utils/cn.js.map +1 -1
- package/dist/utils/control-surface.js.map +1 -1
- package/dist/utils/preference-store.js +1 -1
- package/dist/utils/preference-store.js.map +1 -1
- package/dist/utils/selection-indicator.js.map +1 -1
- package/dist/utils/use-checkable-group.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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<ChartTooltipRow\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tlabel={labelText}\n\t\t\t\t\t\t\tcolor={seriesSwatch(item)}\n\t\t\t\t\t\t\tvalue={Number.isFinite(numeric) ? format(numeric) : String(raw ?? \"—\")}\n\t\t\t\t\t\t\tdata-testid={undefined}\n\t\t\t\t\t\t/>\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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"}
|
|
1
|
+
{"version":3,"file":"tooltip.js","names":["HIDDEN_SERIES_KEYS","TITLE_SIZE","BODY_SIZE","DOT_SIZE","formatChartNumber","value","seriesLabel","name","item","key","seriesSwatch","formatTooltipValue","val","formatter","ChartTooltipRow","rest","formattedValue","hasLabel","label","swatchColor","color","style","hideIndicator","unit","ChartTooltipDivider","ChartTooltipSummary","ChartTooltipContent","active","payload","format","title","raw","numeric","labelText","index"],"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<ChartTooltipRow\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tlabel={labelText}\n\t\t\t\t\t\t\tcolor={seriesSwatch(item)}\n\t\t\t\t\t\t\tvalue={Number.isFinite(numeric) ? format(numeric) : String(raw ?? \"—\")}\n\t\t\t\t\t\t\tdata-testid={undefined}\n\t\t\t\t\t\t/>\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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"}
|
|
@@ -1 +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\";\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,
|
|
1
|
+
{"version":3,"file":"accordion.js","names":["React","AccordionPrimitive","Accordion","props","cn","BASALT_UI_CLASS","className","AccordionItem","AccordionTrigger","AccordionContent"],"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,IAAaE,IAAYF,EAAM,YAG5B,EAAE,cAAW,GAAGG,KAAS,MAC3B,kBAACF,EAAmB,MAApB;CAA8B;CAAK,WAAWG,EAAGC,GAAiBC,CAAS;CAAG,GAAIH;AAAQ,CAAA,CAC1F;AACD,EAAU,cAAcF,EAAmB,KAAK;AAiBhD,IAAaM,IAAgBN,EAAmB,MAWnCO,IAAmBR,EAAM,YAGnC,EAAE,cAAW,aAAU,GAAGG,KAAS,MACrC,kBAACF,EAAmB,QAApB;CAA2B,WAAWG,EAAGC,GAAiB,MAAM;CAC/D,UAAA,kBAACJ,EAAmB,SAApB;EACM;EACL,WAAWG,EACVC,GACA,qEACAC,CACD;EACA,GAAIH;EAEH;CAC0B,CAAA;AACF,CAAA,CAC3B;AACD,EAAiB,cAAcF,EAAmB,QAAQ;AAgB1D,IAAaQ,IAAmBR,EAAmB"}
|
|
@@ -1 +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\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"}
|
|
1
|
+
{"version":3,"file":"alert-dialog.js","names":["AlertDialogPrimitive","React","AlertDialog","AlertDialogTrigger","AlertDialogPortal","AlertDialogOverlay","props","dialogOverlayClass","className","AlertDialogContent","dialogPanelClass","AlertDialogTitle","cn","AlertDialogDescription","AlertDialogCancel","buttonVariants","AlertDialogAction","AlertDialogHeader","AlertDialogFooter"],"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,IAAaE,IAA0CF,EAAqB,MAW/DG,IAAqBH,EAAqB,SAc1CI,IAAoBJ,EAAqB,QAgBzCK,IAAqBJ,EAAM,YAGrC,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACN,EAAqB,SAAtB;CAAmC;CAAK,WAAWO,EAAmBC,CAAS;CAAG,GAAIF;AAAQ,CAAA,CAC9F;AACD,EAAmB,cAAcN,EAAqB,QAAQ;AA6C9D,IAAaS,IAAqBR,EAAM,YAGrC,EAAE,cAAW,UAAO,QAAQ,GAAGK,KAAS,MAC1C,kBAACF,GAAD;CAAmB,YAAYE,EAAM;CAArC,UAAA,CACC,kBAACD,GAAD,EAAoB,YAAYC,EAAM,WAAa,CAAA,GACnD,kBAACN,EAAqB,SAAtB;EACM;EACL,4BAAyB;EACzB,WAAWU,EAAiB;GAAE;GAAM;EAAU,CAAC;EAC/C,GAAIJ;CACJ,CAAA,CACiB;AACnB,CAAA,CAAA;AACD,EAAmB,cAAcN,EAAqB,QAAQ;AAW9D,IAAaW,IAAmBV,EAAM,YAGnC,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACN,EAAqB,OAAtB;CACM;CACL,WAAWY,EAAG,yCAAyCJ,CAAS;CAChE,GAAIF;AACJ,CAAA,CACD;AACD,EAAiB,cAAcN,EAAqB,MAAM;AAY1D,IAAaa,IAAyBZ,EAAM,YAGzC,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACN,EAAqB,aAAtB;CACM;CACL,WAAWY,EAAG,0CAA0CJ,CAAS;CACjE,GAAIF;AACJ,CAAA,CACD;AACD,EAAuB,cAAcN,EAAqB,YAAY;AAWtE,IAAac,IAAoBb,EAAM,YAGpC,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACN,EAAqB,QAAtB;CACM;CACL,WAAWY,EAAGG,EAAe,EAAE,SAAS,UAAU,CAAC,GAAGP,CAAS;CAC/D,GAAIF;AACJ,CAAA,CACD;AACD,EAAkB,cAAcN,EAAqB,OAAO;AAW5D,IAAagB,IAAoBf,EAAM,YAGpC,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACN,EAAqB,QAAtB;CACM;CACL,WAAWY,EAAGG,EAAe,EAAE,SAAS,cAAc,CAAC,GAAGP,CAAS;CACnE,GAAIF;AACJ,CAAA,CACD;AACD,EAAkB,cAAcN,EAAqB,OAAO;AAI5D,IAAaiB,KAAqB,EAAE,cAAW,GAAGX,QACjD,kBAAC,OAAD;CAAK,WAAWM,EAAG,qCAAqCJ,CAAS;CAAG,GAAIF;AAAQ,CAAA;AAEjF,EAAkB,cAAc;AAIhC,IAAaY,KAAqB,EAAE,cAAW,GAAGZ,QACjD,kBAAC,OAAD;CACC,WAAWM,EAAG,+DAA+DJ,CAAS;CACtF,GAAIF;AACJ,CAAA;AAEF,EAAkB,cAAc"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { HTMLAttributes, ReactNode } from "react";
|
|
2
|
-
export declare function AppHeader({ leading, breadcrumbs, title, actions, className, ...props }: HTMLAttributes<HTMLElement> & {
|
|
2
|
+
export declare function AppHeader({ leading, breadcrumbs, title, actions, sticky, density, className, ...props }: HTMLAttributes<HTMLElement> & {
|
|
3
3
|
leading?: ReactNode;
|
|
4
4
|
breadcrumbs?: {
|
|
5
5
|
href?: string;
|
|
@@ -7,4 +7,8 @@ export declare function AppHeader({ leading, breadcrumbs, title, actions, classN
|
|
|
7
7
|
}[];
|
|
8
8
|
title?: ReactNode;
|
|
9
9
|
actions?: ReactNode;
|
|
10
|
+
/** Keep this row visible in its current scroll owner, including the shell safe area. */
|
|
11
|
+
sticky?: boolean;
|
|
12
|
+
/** Compact is a 52px row; comfortable is 56px. */
|
|
13
|
+
density?: "comfortable" | "compact";
|
|
10
14
|
}): import("react").JSX.Element;
|
|
@@ -5,13 +5,20 @@ import { Breadcrumbs as n } from "./breadcrumbs.js";
|
|
|
5
5
|
import { ChevronRight as r } from "lucide-react";
|
|
6
6
|
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/app-header.tsx
|
|
8
|
-
function s({ leading: s, breadcrumbs: c, title: l, actions: u,
|
|
8
|
+
function s({ leading: s, breadcrumbs: c, title: l, actions: u, sticky: d = !1, density: f = "comfortable", className: p, ...m }) {
|
|
9
9
|
return /* @__PURE__ */ o("header", {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
"data-basalt-header": "",
|
|
11
|
+
"data-sticky": d || void 0,
|
|
12
|
+
"data-density": f,
|
|
13
|
+
className: e(t, "flex shrink-0 items-center justify-between gap-3 px-4 md:px-6", f === "compact" ? "h-[52px]" : "h-14", p),
|
|
14
|
+
...m,
|
|
12
15
|
children: [/* @__PURE__ */ o("div", {
|
|
13
16
|
className: "flex min-w-0 items-center gap-3",
|
|
14
|
-
children: [s
|
|
17
|
+
children: [s ? /* @__PURE__ */ a("div", {
|
|
18
|
+
"data-basalt-header-leading": "",
|
|
19
|
+
className: "flex shrink-0 items-center",
|
|
20
|
+
children: s
|
|
21
|
+
}) : null, /* @__PURE__ */ o("div", {
|
|
15
22
|
className: "flex min-w-0 items-center gap-1",
|
|
16
23
|
children: [c && c.length > 0 ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
|
|
17
24
|
items: c,
|
|
@@ -25,6 +32,7 @@ function s({ leading: s, breadcrumbs: c, title: l, actions: u, className: d, ...
|
|
|
25
32
|
}) : null]
|
|
26
33
|
})]
|
|
27
34
|
}), u ? /* @__PURE__ */ a("div", {
|
|
35
|
+
"data-basalt-header-actions": "",
|
|
28
36
|
className: "flex shrink-0 items-center gap-1",
|
|
29
37
|
children: u
|
|
30
38
|
}) : null]
|
|
@@ -1 +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 { 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
|
|
1
|
+
{"version":3,"file":"app-header.js","names":["_Fragment","AppHeader","props","sticky","density","cn","BASALT_UI_CLASS","className","leading","breadcrumbs","Fragment","Breadcrumbs","ChevronRight","title","actions"],"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\tsticky = false,\n\tdensity = \"comfortable\",\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLElement> & {\n\tleading?: ReactNode;\n\tbreadcrumbs?: { href?: string; label: ReactNode }[];\n\ttitle?: ReactNode;\n\tactions?: ReactNode;\n\t/** Keep this row visible in its current scroll owner, including the shell safe area. */\n\tsticky?: boolean;\n\t/** Compact is a 52px row; comfortable is 56px. */\n\tdensity?: \"comfortable\" | \"compact\";\n}) {\n\treturn (\n\t\t<header\n\t\t\tdata-basalt-header=\"\"\n\t\t\tdata-sticky={sticky || undefined}\n\t\t\tdata-density={density}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex shrink-0 items-center justify-between gap-3 px-4 md:px-6\",\n\t\t\t\tdensity === \"compact\" ? \"h-[52px]\" : \"h-14\",\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\t<div data-basalt-header-leading=\"\" className=\"flex shrink-0 items-center\">\n\t\t\t\t\t\t{leading}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\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 ? (\n\t\t\t\t<div data-basalt-header-actions=\"\" className=\"flex shrink-0 items-center gap-1\">\n\t\t\t\t\t{actions}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;;;AAMA,SAAgBC,EAAU,EACzB,YACA,gBACA,UACA,YACA,YAAS,IACT,aAAU,eACV,cACA,GAAGC,KAUD;CACF,OACC,kBAAC,UAAD;EACC,sBAAmB;EACnB,eAAaC,KAAU,KAAA;EACvB,gBAAcC;EACd,WAAWC,EACVC,GACA,iEACAF,MAAY,YAAY,aAAa,QACrCG,CACD;EACA,GAAIL;EAVL,UAAA,CAYC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACEM,IACA,kBAAC,OAAD;IAAK,8BAA2B;IAAG,WAAU;IAC3C,UAAAA;GACG,CAAA,IACF,MACJ,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACEC,KAAeA,EAAY,SAAS,IACpC,kBAAAT,GAAA,EAAA,UAAA,CACC,kBAACW,GAAD;KAAa,OAAOF;KAAa,WAAU;IAAW,CAAA,GACtD,kBAACG,GAAD;KACC,WAAU;KACV,eAAY;IACZ,CAAA,CACA,EAAA,CAAA,IACC,MACHC,IACA,kBAAC,MAAD;KAAI,WAAU;KAAuD,UAAAA;IAAU,CAAA,IAC5E,IACA;GACD,CAAA,CAAA;EACJ,CAAA,GAAAC,IACA,kBAAC,OAAD;GAAK,8BAA2B;GAAG,WAAU;GAC3C,UAAAA;EACG,CAAA,IACF,IACG;;AAEV"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import type { AnchorHTMLAttributes, HTMLAttributes } from "react";
|
|
2
2
|
export declare function AppSkipLink({ href, className, children, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>): import("react").JSX.Element;
|
|
3
|
-
export declare function AppShell({ className, ...props }: HTMLAttributes<HTMLDivElement>
|
|
3
|
+
export declare function AppShell({ layout, className, ...props }: HTMLAttributes<HTMLDivElement> & {
|
|
4
|
+
/** Scroll owner: bounded panes, document, or document below 768px. */
|
|
5
|
+
layout?: "workspace" | "document" | "responsive";
|
|
6
|
+
}): import("react").JSX.Element;
|
|
4
7
|
export declare function AppMain({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
|
|
@@ -11,16 +11,19 @@ function r({ href: r = "#main-content", className: i, children: a, ...o }) {
|
|
|
11
11
|
children: a
|
|
12
12
|
});
|
|
13
13
|
}
|
|
14
|
-
function i({
|
|
14
|
+
function i({ layout: t = "workspace", className: r, ...i }) {
|
|
15
15
|
return /* @__PURE__ */ n("div", {
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
"data-basalt-shell": t,
|
|
17
|
+
className: e("flex w-full bg-basalt-background", r),
|
|
18
|
+
...i
|
|
18
19
|
});
|
|
19
20
|
}
|
|
20
21
|
function a({ className: t, ...r }) {
|
|
21
22
|
return /* @__PURE__ */ n("main", {
|
|
22
23
|
id: "main-content",
|
|
23
|
-
|
|
24
|
+
tabIndex: -1,
|
|
25
|
+
"data-basalt-main": "",
|
|
26
|
+
className: e("flex min-h-0 min-w-0 flex-1 flex-col", t),
|
|
24
27
|
...r
|
|
25
28
|
});
|
|
26
29
|
}
|
|
@@ -1 +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\";\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({
|
|
1
|
+
{"version":3,"file":"app-shell.js","names":["AppSkipLink","props","cn","BASALT_UI_CLASS","className","AppShell","layout","AppMain"],"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({\n\tlayout = \"workspace\",\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement> & {\n\t/** Scroll owner: bounded panes, document, or document below 768px. */\n\tlayout?: \"workspace\" | \"document\" | \"responsive\";\n}) {\n\treturn (\n\t\t<div\n\t\t\tdata-basalt-shell={layout}\n\t\t\tclassName={cn(\"flex w-full 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\ttabIndex={-1}\n\t\t\tdata-basalt-main=\"\"\n\t\t\tclassName={cn(\"flex min-h-0 min-w-0 flex-1 flex-col\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;AAIA,SAAgBA,EAAY,EAC3B,UAAO,iBACP,cACA,aACA,GAAGC,KACwC;CAC3C,OACC,kBAAC,KAAD;EACO;EACN,WAAWC,EACVC,GACA,uNACAC,CACD;EACA,GAAIH;EAEH;CACC,CAAA;AAEL;AAEA,SAAgBI,EAAS,EACxB,YAAS,aACT,cACA,GAAGJ,KAID;CACF,OACC,kBAAC,OAAD;EACC,qBAAmBK;EACnB,WAAWJ,EAAG,oCAAoCE,CAAS;EAC3D,GAAIH;CACJ,CAAA;AAEH;AAEA,SAAgBM,EAAQ,EAAE,cAAW,GAAGN,KAAsC;CAC7E,OACC,kBAAC,QAAD;EACC,IAAG;EACH,UAAU;EACV,oBAAiB;EACjB,WAAWC,EAAG,wCAAwCE,CAAS;EAC/D,GAAIH;CACJ,CAAA;AAEH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport type { InputSize } from \"./input\";\nimport { TypeaheadField, type TypeaheadItem } from \"./typeahead-field\";\n\nexport type AutocompleteItem = TypeaheadItem;\n\nexport type AutocompleteProps = Omit<\n\tComponentPropsWithoutRef<\"div\">,\n\t\"children\" | \"defaultValue\" | \"onChange\"\n> & {\n\t/**\n\t * Suggestions shown as the query matches. Values outside the list are allowed.\n\t *\n\t * Note: When focus leaves the field (via pointer click or Tab/Shift+Tab navigation),\n\t * any uncommitted text or matching suggestion is committed once without stealing focus\n\t * back to the input, allowing natural focus traversal.\n\t */\n\titems: AutocompleteItem[];\n\t/**\n\t * The controlled value.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the value changes, including freeform text.\n\t */\n\tonValueChange?: (value: string) => void;\n\t/**\n\t * Native form field name.\n\t */\n\tname?: string;\n\t/**\n\t * Placeholder shown when the field is empty.\n\t * @default Search…\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Disable the field.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Disable the field and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n};\n\nexport function Autocomplete({ placeholder = \"Search…\", ...rest }: AutocompleteProps) {\n\treturn <TypeaheadField placeholder={placeholder} allowFreeform {...rest} />;\n}\n"],"mappings":";;;;AAwDA,
|
|
1
|
+
{"version":3,"file":"autocomplete.js","names":["Autocomplete","rest","TypeaheadField"],"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport type { InputSize } from \"./input\";\nimport { TypeaheadField, type TypeaheadItem } from \"./typeahead-field\";\n\nexport type AutocompleteItem = TypeaheadItem;\n\nexport type AutocompleteProps = Omit<\n\tComponentPropsWithoutRef<\"div\">,\n\t\"children\" | \"defaultValue\" | \"onChange\"\n> & {\n\t/**\n\t * Suggestions shown as the query matches. Values outside the list are allowed.\n\t *\n\t * Note: When focus leaves the field (via pointer click or Tab/Shift+Tab navigation),\n\t * any uncommitted text or matching suggestion is committed once without stealing focus\n\t * back to the input, allowing natural focus traversal.\n\t */\n\titems: AutocompleteItem[];\n\t/**\n\t * The controlled value.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the value changes, including freeform text.\n\t */\n\tonValueChange?: (value: string) => void;\n\t/**\n\t * Native form field name.\n\t */\n\tname?: string;\n\t/**\n\t * Placeholder shown when the field is empty.\n\t * @default Search…\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Disable the field.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Disable the field and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n};\n\nexport function Autocomplete({ placeholder = \"Search…\", ...rest }: AutocompleteProps) {\n\treturn <TypeaheadField placeholder={placeholder} allowFreeform {...rest} />;\n}\n"],"mappings":";;;;AAwDA,SAAgBA,EAAa,EAAE,iBAAc,WAAW,GAAGC,KAA2B;CACrF,OAAO,kBAACC,GAAD;EAA6B;EAAa,eAAA;EAAc,GAAID;CAAO,CAAA;AAC3E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.js","names":[],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type AvatarProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n\t\"asChild\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n};\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n\t({ className, ...props }, ref) => (\n\t\t<AvatarPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\nexport type AvatarImageProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>,\n\t\"asChild\" | \"onLoadingStatusChange\" | \"src\" | \"alt\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Image source URL for the avatar image.\n\t */\n\tsrc?: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>[\"src\"];\n\t/**\n\t * Text description of the image for accessibility and screen readers.\n\t */\n\talt?: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>[\"alt\"];\n\t/**\n\t * A callback providing the current loading status of the image ('idle' | 'loading' | 'loaded' | 'error').\n\t */\n\tonLoadingStatusChange?: React.ComponentPropsWithoutRef<\n\t\ttypeof AvatarPrimitive.Image\n\t>[\"onLoadingStatusChange\"];\n};\n\nexport const AvatarImage = React.forwardRef<\n\tReact.ElementRef<typeof AvatarPrimitive.Image>,\n\tAvatarImageProps\n>(({ className, ...props }, ref) => (\n\t<AvatarPrimitive.Image\n\t\tref={ref}\n\t\tclassName={cn(\"aspect-square h-full w-full\", className)}\n\t\t{...props}\n\t/>\n));\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nexport type AvatarFallbackProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>,\n\t\"asChild\" | \"delayMs\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Useful for delaying rendering so it only appears for those with slower connections.\n\t * Unset by default, rendering immediately without delay.\n\t */\n\tdelayMs?: number;\n};\n\nexport const AvatarFallback = React.forwardRef<\n\tReact.ElementRef<typeof AvatarPrimitive.Fallback>,\n\tAvatarFallbackProps\n>(({ className, ...props }, ref) => (\n\t<AvatarPrimitive.Fallback\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-full w-full items-center justify-center rounded-full bg-basalt-muted text-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n"],"mappings":";;;;;;AAeA,
|
|
1
|
+
{"version":3,"file":"avatar.js","names":["React","AvatarPrimitive","Avatar","props","cn","className","AvatarImage","AvatarFallback"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type AvatarProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n\t\"asChild\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n};\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n\t({ className, ...props }, ref) => (\n\t\t<AvatarPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\nexport type AvatarImageProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>,\n\t\"asChild\" | \"onLoadingStatusChange\" | \"src\" | \"alt\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Image source URL for the avatar image.\n\t */\n\tsrc?: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>[\"src\"];\n\t/**\n\t * Text description of the image for accessibility and screen readers.\n\t */\n\talt?: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>[\"alt\"];\n\t/**\n\t * A callback providing the current loading status of the image ('idle' | 'loading' | 'loaded' | 'error').\n\t */\n\tonLoadingStatusChange?: React.ComponentPropsWithoutRef<\n\t\ttypeof AvatarPrimitive.Image\n\t>[\"onLoadingStatusChange\"];\n};\n\nexport const AvatarImage = React.forwardRef<\n\tReact.ElementRef<typeof AvatarPrimitive.Image>,\n\tAvatarImageProps\n>(({ className, ...props }, ref) => (\n\t<AvatarPrimitive.Image\n\t\tref={ref}\n\t\tclassName={cn(\"aspect-square h-full w-full\", className)}\n\t\t{...props}\n\t/>\n));\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nexport type AvatarFallbackProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>,\n\t\"asChild\" | \"delayMs\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Useful for delaying rendering so it only appears for those with slower connections.\n\t * Unset by default, rendering immediately without delay.\n\t */\n\tdelayMs?: number;\n};\n\nexport const AvatarFallback = React.forwardRef<\n\tReact.ElementRef<typeof AvatarPrimitive.Fallback>,\n\tAvatarFallbackProps\n>(({ className, ...props }, ref) => (\n\t<AvatarPrimitive.Fallback\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-full w-full items-center justify-center rounded-full bg-basalt-muted text-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n"],"mappings":";;;;;;AAeA,IAAaE,IAASF,EAAM,YAC1B,EAAE,cAAW,GAAGG,KAAS,MACzB,kBAACF,EAAgB,MAAjB;CACM;CACL,WAAWG,EAAG,+DAA+DC,CAAS;CACtF,GAAIF;AACJ,CAAA,CAEH;AACA,EAAO,cAAcF,EAAgB,KAAK;AA2B1C,IAAaK,IAAcN,EAAM,YAG9B,EAAE,cAAW,GAAGG,KAAS,MAC3B,kBAACF,EAAgB,OAAjB;CACM;CACL,WAAWG,EAAG,+BAA+BC,CAAS;CACtD,GAAIF;AACJ,CAAA,CACD;AACD,EAAY,cAAcF,EAAgB,MAAM;AAkBhD,IAAaM,IAAiBP,EAAM,YAGjC,EAAE,cAAW,GAAGG,KAAS,MAC3B,kBAACF,EAAgB,UAAjB;CACM;CACL,WAAWG,EACV,uFACAC,CACD;CACA,GAAIF;AACJ,CAAA,CACD;AACD,EAAe,cAAcF,EAAgB,SAAS"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nconst badgeVariants = cva(\n\t\"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"border-transparent bg-basalt-primary text-basalt-primary-foreground\",\n\t\t\t\tsecondary: \"border-transparent bg-basalt-secondary text-basalt-foreground\",\n\t\t\t\tdestructive: \"border-transparent bg-basalt-destructive text-basalt-destructive-foreground\",\n\t\t\t\toutline: \"border-basalt-border text-basalt-foreground\",\n\t\t\t\tinfo: \"border-transparent bg-basalt-info-tint text-basalt-info\",\n\t\t\t\tsuccess: \"border-transparent bg-basalt-heatmap-green-3 text-white\",\n\t\t\t\twarning: \"border-transparent bg-basalt-warning-tint text-basalt-warning\",\n\t\t\t\terror: \"border-transparent bg-basalt-danger-tint text-basalt-danger\",\n\t\t\t\tred: \"border-transparent bg-basalt-danger text-white\",\n\t\t\t\torange: \"border-transparent bg-basalt-warning text-white\",\n\t\t\t\tteal: \"border-transparent bg-basalt-badge-teal text-white\",\n\t\t\t\tblue: \"border-transparent bg-basalt-info text-white\",\n\t\t\t\tpurple: \"border-transparent bg-basalt-badge-purple text-white\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { variant: \"default\" },\n\t},\n);\n\nexport interface BadgeProps\n\textends React.HTMLAttributes<HTMLSpanElement>,\n\t\tOmit<VariantProps<typeof badgeVariants>, \"variant\"> {\n\t/**\n\t * Visual style variant for the badge.\n\t *\n\t * Note: Supports standard semantic tones and decorative color tokens.\n\t * Pass null to omit variant styling.\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof badgeVariants>[\"variant\"];\n\n\t/**\n\t * Renders a small circular dot indicator before children.\n\t *\n\t * @default false\n\t */\n\tdot?: boolean;\n}\n\nexport function Badge({ className, variant, dot, children, ...props }: BadgeProps) {\n\treturn (\n\t\t<span className={cn(BASALT_UI_CLASS, badgeVariants({ variant }), className)} {...props}>\n\t\t\t{dot ? <span className=\"size-1.5 rounded-full bg-current\" aria-hidden=\"true\" /> : null}\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;AAKA,
|
|
1
|
+
{"version":3,"file":"badge.js","names":["badgeVariants","cva","Badge","props","cn","BASALT_UI_CLASS","className","dot","children"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nconst badgeVariants = cva(\n\t\"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"border-transparent bg-basalt-primary text-basalt-primary-foreground\",\n\t\t\t\tsecondary: \"border-transparent bg-basalt-secondary text-basalt-foreground\",\n\t\t\t\tdestructive: \"border-transparent bg-basalt-destructive text-basalt-destructive-foreground\",\n\t\t\t\toutline: \"border-basalt-border text-basalt-foreground\",\n\t\t\t\tinfo: \"border-transparent bg-basalt-info-tint text-basalt-info\",\n\t\t\t\tsuccess: \"border-transparent bg-basalt-heatmap-green-3 text-white\",\n\t\t\t\twarning: \"border-transparent bg-basalt-warning-tint text-basalt-warning\",\n\t\t\t\terror: \"border-transparent bg-basalt-danger-tint text-basalt-danger\",\n\t\t\t\tred: \"border-transparent bg-basalt-danger text-white\",\n\t\t\t\torange: \"border-transparent bg-basalt-warning text-white\",\n\t\t\t\tteal: \"border-transparent bg-basalt-badge-teal text-white\",\n\t\t\t\tblue: \"border-transparent bg-basalt-info text-white\",\n\t\t\t\tpurple: \"border-transparent bg-basalt-badge-purple text-white\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { variant: \"default\" },\n\t},\n);\n\nexport interface BadgeProps\n\textends React.HTMLAttributes<HTMLSpanElement>,\n\t\tOmit<VariantProps<typeof badgeVariants>, \"variant\"> {\n\t/**\n\t * Visual style variant for the badge.\n\t *\n\t * Note: Supports standard semantic tones and decorative color tokens.\n\t * Pass null to omit variant styling.\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof badgeVariants>[\"variant\"];\n\n\t/**\n\t * Renders a small circular dot indicator before children.\n\t *\n\t * @default false\n\t */\n\tdot?: boolean;\n}\n\nexport function Badge({ className, variant, dot, children, ...props }: BadgeProps) {\n\treturn (\n\t\t<span className={cn(BASALT_UI_CLASS, badgeVariants({ variant }), className)} {...props}>\n\t\t\t{dot ? <span className=\"size-1.5 rounded-full bg-current\" aria-hidden=\"true\" /> : null}\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;AAKA,IAAMA,IAAgBC,EACrB,0FACA;CACC,UAAU,EACT,SAAS;EACR,SAAS;EACT,WAAW;EACX,aAAa;EACb,SAAS;EACT,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,KAAK;EACL,QAAQ;EACR,MAAM;EACN,MAAM;EACN,QAAQ;CACT,EACD;CACA,iBAAiB,EAAE,SAAS,UAAU;AACvC,CACD;AAuBA,SAAgBC,EAAM,EAAE,cAAW,YAAS,QAAK,aAAU,GAAGC,KAAqB;CAClF,OACC,kBAAC,QAAD;EAAM,WAAWC,EAAGC,GAAiBL,EAAc,EAAE,WAAQ,CAAC,GAAGM,CAAS;EAAG,GAAIH;EAAjF,UAAA,CACEI,IAAM,kBAAC,QAAD;GAAM,WAAU;GAAmC,eAAY;EAAQ,CAAA,IAAI,MACjFC,CACI;;AAER"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner.js","names":[],"sources":["../../src/components/banner.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n\tChildren,\n\tcreateContext,\n\ttype HTMLAttributes,\n\tisValidElement,\n\ttype ReactNode,\n\tuseContext,\n} from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button, type ButtonProps } from \"./button\";\n\nconst bannerVariants = cva(\"flex w-full items-start gap-3 rounded-basalt-md text-sm\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"bg-basalt-info-tint text-basalt-info\",\n\t\t\talert: \"bg-basalt-warning-tint text-basalt-warning\",\n\t\t\terror: \"bg-basalt-danger-tint text-basalt-danger\",\n\t\t\tsecondary: \"bg-basalt-muted text-basalt-foreground\",\n\t\t},\n\t\tsize: {\n\t\t\tbase: \"px-4 py-3\",\n\t\t\tsm: \"px-3 py-2\",\n\t\t},\n\t},\n\tdefaultVariants: { variant: \"default\", size: \"base\" },\n});\n\ntype BannerVariant = NonNullable<VariantProps<typeof bannerVariants>[\"variant\"]>;\ntype BannerSize = NonNullable<VariantProps<typeof bannerVariants>[\"size\"]>;\n\nconst BannerContext = createContext<{ variant: BannerVariant; size: BannerSize }>({\n\tvariant: \"default\",\n\tsize: \"base\",\n});\n\nexport interface BannerProps\n\textends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"children\">,\n\t\tOmit<VariantProps<typeof bannerVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual tone variant of the banner.\n\t *\n\t * Note: Defaults to \"default\" (informational). Passing null falls back to \"default\".\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof bannerVariants>[\"variant\"];\n\n\t/**\n\t * Sizing preset controlling padding geometry and action placement.\n\t *\n\t * Note: Defaults to \"base\". In compact mode (\"sm\"), only direct `<Banner.Action>` elements\n\t * are placed in the trailing slot, while other action content renders inline next to the description.\n\t * Passing null falls back to \"base\".\n\t *\n\t * @default \"base\"\n\t */\n\tsize?: VariantProps<typeof bannerVariants>[\"size\"];\n\n\t/**\n\t * Primary heading text.\n\t *\n\t * Note: When present (or when description is present), structured mode is enabled\n\t * and standard children are not rendered.\n\t */\n\ttitle?: string;\n\n\t/**\n\t * Secondary copy rendered below the title.\n\t */\n\tdescription?: ReactNode;\n\n\t/**\n\t * Visual icon rendered before the banner content.\n\t */\n\ticon?: ReactNode;\n\n\t/**\n\t * Trailing or inline call-to-action slot.\n\t * Pass `<Banner.Action>` elements for contextual styling.\n\t * In compact mode (\"sm\"), only direct `<Banner.Action>` elements are placed in the trailing slot,\n\t * while other action content renders inline next to the description.\n\t */\n\taction?: ReactNode;\n\n\t/**\n\t * Unstructured child content rendered only when both title and description are null or undefined.\n\t * When title or description is non-null/non-undefined (including empty string or false),\n\t * structured mode is active and children are ignored.\n\t */\n\tchildren?: HTMLAttributes<HTMLDivElement>[\"children\"];\n}\n\nexport interface BannerActionProps\n\textends Omit<\n\t\tButtonProps,\n\t\t\"variant\" | \"size\" | \"asChild\" | \"type\" | \"loading\" | \"icon\" | \"children\"\n\t> {\n\t/**\n\t * Visual style variant. Preserves \"ghost\" and \"secondary\"; all other values\n\t * are mapped contextually to \"destructive\" (when parent Banner variant is \"error\")\n\t * or \"default\".\n\t *\n\t * Note: Ordinary function component without forwarded ref.\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: ButtonProps[\"variant\"];\n\n\t/**\n\t * Sizing preset. When unspecified or null, resolves to \"icon\" if children are omitted,\n\t * null, or an empty string, \"sm\" when parent Banner is compact (\"sm\"), or \"default\" otherwise.\n\t * When iconOnly mode is resolved, an additional \"size-8\" class is attached.\n\t */\n\tsize?: ButtonProps[\"size\"];\n\n\t/**\n\t * Pass control to child element slot.\n\t *\n\t * @default false\n\t */\n\tasChild?: ButtonProps[\"asChild\"];\n\n\t/**\n\t * Button type attribute.\n\t *\n\t * @default \"button\"\n\t */\n\ttype?: ButtonProps[\"type\"];\n\n\t/**\n\t * Display loading spinner and disable interactions.\n\t *\n\t * @default false\n\t */\n\tloading?: ButtonProps[\"loading\"];\n\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: ButtonProps[\"icon\"];\n\n\t/**\n\t * Action label content. When null, undefined, or empty string, enables iconOnly sizing mode.\n\t */\n\tchildren?: ButtonProps[\"children\"];\n}\n\nfunction isBannerAction(node: ReactNode): boolean {\n\treturn isValidElement(node) && node.type === BannerAction;\n}\n\nfunction BannerRoot({\n\tclassName,\n\tvariant = \"default\",\n\tsize = \"base\",\n\ttitle,\n\tdescription,\n\ticon,\n\taction,\n\tchildren,\n\t...props\n}: BannerProps) {\n\tconst resolvedVariant = variant ?? \"default\";\n\tconst resolvedSize = size ?? \"base\";\n\tconst structured = title != null || description != null;\n\tconst nodes = Children.toArray(action);\n\tconst ctas = nodes.filter(isBannerAction);\n\tconst other = nodes.filter((node) => !isBannerAction(node));\n\tconst trailing = resolvedSize === \"sm\" ? ctas : [...other, ...ctas];\n\tconst inlineActions = resolvedSize === \"sm\" ? other : [];\n\n\treturn (\n\t\t<BannerContext.Provider value={{ variant: resolvedVariant, size: resolvedSize }}>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\tbannerVariants({ variant: resolvedVariant, size: resolvedSize }),\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{icon ? <span className=\"mt-0.5 inline-flex shrink-0 [&_svg]:size-5\">{icon}</span> : null}\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-0.5\">\n\t\t\t\t\t{title ? <p className=\"font-medium\">{title}</p> : null}\n\t\t\t\t\t{description ? (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tresolvedVariant === \"secondary\" ? \"text-basalt-muted-foreground\" : \"text-current\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t{inlineActions.length > 0 ? <> {inlineActions}</> : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : inlineActions.length > 0 ? (\n\t\t\t\t\t\t<div>{inlineActions}</div>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{structured ? null : children}\n\t\t\t\t</div>\n\t\t\t\t{trailing.length > 0 ? (\n\t\t\t\t\t<div className=\"flex shrink-0 items-center gap-2\">{trailing}</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</BannerContext.Provider>\n\t);\n}\n\nexport function BannerAction({\n\tclassName,\n\tvariant = \"default\",\n\tsize,\n\ticon,\n\tchildren,\n\t...props\n}: BannerActionProps) {\n\tconst banner = useContext(BannerContext);\n\tconst mapped =\n\t\tvariant === \"ghost\"\n\t\t\t? \"ghost\"\n\t\t\t: variant === \"secondary\"\n\t\t\t\t? \"secondary\"\n\t\t\t\t: banner.variant === \"error\"\n\t\t\t\t\t? \"destructive\"\n\t\t\t\t\t: \"default\";\n\tconst iconOnly = children == null || children === \"\";\n\treturn (\n\t\t<Button\n\t\t\tvariant={mapped}\n\t\t\tsize={size ?? (iconOnly ? \"icon\" : banner.size === \"sm\" ? \"sm\" : \"default\")}\n\t\t\ticon={icon}\n\t\t\tclassName={cn(iconOnly && \"size-8\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\nBannerAction.displayName = \"Banner.Action\";\n\nexport const Banner = Object.assign(BannerRoot, { Action: BannerAction });\n"],"mappings":";;;;;;;;AAaA,
|
|
1
|
+
{"version":3,"file":"banner.js","names":["_Fragment","Fragment$1","bannerVariants","cva","BannerContext","createContext","isBannerAction","isValidElement","node","BannerAction","BannerRoot","props","resolvedVariant","variant","resolvedSize","size","structured","title","description","nodes","Children","action","ctas","other","trailing","inlineActions","cn","BASALT_UI_CLASS","className","icon","children","banner","useContext","mapped","iconOnly","Button","Banner"],"sources":["../../src/components/banner.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n\tChildren,\n\tcreateContext,\n\ttype HTMLAttributes,\n\tisValidElement,\n\ttype ReactNode,\n\tuseContext,\n} from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button, type ButtonProps } from \"./button\";\n\nconst bannerVariants = cva(\"flex w-full items-start gap-3 rounded-basalt-md text-sm\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"bg-basalt-info-tint text-basalt-info\",\n\t\t\talert: \"bg-basalt-warning-tint text-basalt-warning\",\n\t\t\terror: \"bg-basalt-danger-tint text-basalt-danger\",\n\t\t\tsecondary: \"bg-basalt-muted text-basalt-foreground\",\n\t\t},\n\t\tsize: {\n\t\t\tbase: \"px-4 py-3\",\n\t\t\tsm: \"px-3 py-2\",\n\t\t},\n\t},\n\tdefaultVariants: { variant: \"default\", size: \"base\" },\n});\n\ntype BannerVariant = NonNullable<VariantProps<typeof bannerVariants>[\"variant\"]>;\ntype BannerSize = NonNullable<VariantProps<typeof bannerVariants>[\"size\"]>;\n\nconst BannerContext = createContext<{ variant: BannerVariant; size: BannerSize }>({\n\tvariant: \"default\",\n\tsize: \"base\",\n});\n\nexport interface BannerProps\n\textends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"children\">,\n\t\tOmit<VariantProps<typeof bannerVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual tone variant of the banner.\n\t *\n\t * Note: Defaults to \"default\" (informational). Passing null falls back to \"default\".\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof bannerVariants>[\"variant\"];\n\n\t/**\n\t * Sizing preset controlling padding geometry and action placement.\n\t *\n\t * Note: Defaults to \"base\". In compact mode (\"sm\"), only direct `<Banner.Action>` elements\n\t * are placed in the trailing slot, while other action content renders inline next to the description.\n\t * Passing null falls back to \"base\".\n\t *\n\t * @default \"base\"\n\t */\n\tsize?: VariantProps<typeof bannerVariants>[\"size\"];\n\n\t/**\n\t * Primary heading text.\n\t *\n\t * Note: When present (or when description is present), structured mode is enabled\n\t * and standard children are not rendered.\n\t */\n\ttitle?: string;\n\n\t/**\n\t * Secondary copy rendered below the title.\n\t */\n\tdescription?: ReactNode;\n\n\t/**\n\t * Visual icon rendered before the banner content.\n\t */\n\ticon?: ReactNode;\n\n\t/**\n\t * Trailing or inline call-to-action slot.\n\t * Pass `<Banner.Action>` elements for contextual styling.\n\t * In compact mode (\"sm\"), only direct `<Banner.Action>` elements are placed in the trailing slot,\n\t * while other action content renders inline next to the description.\n\t */\n\taction?: ReactNode;\n\n\t/**\n\t * Unstructured child content rendered only when both title and description are null or undefined.\n\t * When title or description is non-null/non-undefined (including empty string or false),\n\t * structured mode is active and children are ignored.\n\t */\n\tchildren?: HTMLAttributes<HTMLDivElement>[\"children\"];\n}\n\nexport interface BannerActionProps\n\textends Omit<\n\t\tButtonProps,\n\t\t\"variant\" | \"size\" | \"asChild\" | \"type\" | \"loading\" | \"icon\" | \"children\"\n\t> {\n\t/**\n\t * Visual style variant. Preserves \"ghost\" and \"secondary\"; all other values\n\t * are mapped contextually to \"destructive\" (when parent Banner variant is \"error\")\n\t * or \"default\".\n\t *\n\t * Note: Ordinary function component without forwarded ref.\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: ButtonProps[\"variant\"];\n\n\t/**\n\t * Sizing preset. When unspecified or null, resolves to \"icon\" if children are omitted,\n\t * null, or an empty string, \"sm\" when parent Banner is compact (\"sm\"), or \"default\" otherwise.\n\t * When iconOnly mode is resolved, an additional \"size-8\" class is attached.\n\t */\n\tsize?: ButtonProps[\"size\"];\n\n\t/**\n\t * Pass control to child element slot.\n\t *\n\t * @default false\n\t */\n\tasChild?: ButtonProps[\"asChild\"];\n\n\t/**\n\t * Button type attribute.\n\t *\n\t * @default \"button\"\n\t */\n\ttype?: ButtonProps[\"type\"];\n\n\t/**\n\t * Display loading spinner and disable interactions.\n\t *\n\t * @default false\n\t */\n\tloading?: ButtonProps[\"loading\"];\n\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: ButtonProps[\"icon\"];\n\n\t/**\n\t * Action label content. When null, undefined, or empty string, enables iconOnly sizing mode.\n\t */\n\tchildren?: ButtonProps[\"children\"];\n}\n\nfunction isBannerAction(node: ReactNode): boolean {\n\treturn isValidElement(node) && node.type === BannerAction;\n}\n\nfunction BannerRoot({\n\tclassName,\n\tvariant = \"default\",\n\tsize = \"base\",\n\ttitle,\n\tdescription,\n\ticon,\n\taction,\n\tchildren,\n\t...props\n}: BannerProps) {\n\tconst resolvedVariant = variant ?? \"default\";\n\tconst resolvedSize = size ?? \"base\";\n\tconst structured = title != null || description != null;\n\tconst nodes = Children.toArray(action);\n\tconst ctas = nodes.filter(isBannerAction);\n\tconst other = nodes.filter((node) => !isBannerAction(node));\n\tconst trailing = resolvedSize === \"sm\" ? ctas : [...other, ...ctas];\n\tconst inlineActions = resolvedSize === \"sm\" ? other : [];\n\n\treturn (\n\t\t<BannerContext.Provider value={{ variant: resolvedVariant, size: resolvedSize }}>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\tbannerVariants({ variant: resolvedVariant, size: resolvedSize }),\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{icon ? <span className=\"mt-0.5 inline-flex shrink-0 [&_svg]:size-5\">{icon}</span> : null}\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-0.5\">\n\t\t\t\t\t{title ? <p className=\"font-medium\">{title}</p> : null}\n\t\t\t\t\t{description ? (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tresolvedVariant === \"secondary\" ? \"text-basalt-muted-foreground\" : \"text-current\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t{inlineActions.length > 0 ? <> {inlineActions}</> : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : inlineActions.length > 0 ? (\n\t\t\t\t\t\t<div>{inlineActions}</div>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{structured ? null : children}\n\t\t\t\t</div>\n\t\t\t\t{trailing.length > 0 ? (\n\t\t\t\t\t<div className=\"flex shrink-0 items-center gap-2\">{trailing}</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</BannerContext.Provider>\n\t);\n}\n\nexport function BannerAction({\n\tclassName,\n\tvariant = \"default\",\n\tsize,\n\ticon,\n\tchildren,\n\t...props\n}: BannerActionProps) {\n\tconst banner = useContext(BannerContext);\n\tconst mapped =\n\t\tvariant === \"ghost\"\n\t\t\t? \"ghost\"\n\t\t\t: variant === \"secondary\"\n\t\t\t\t? \"secondary\"\n\t\t\t\t: banner.variant === \"error\"\n\t\t\t\t\t? \"destructive\"\n\t\t\t\t\t: \"default\";\n\tconst iconOnly = children == null || children === \"\";\n\treturn (\n\t\t<Button\n\t\t\tvariant={mapped}\n\t\t\tsize={size ?? (iconOnly ? \"icon\" : banner.size === \"sm\" ? \"sm\" : \"default\")}\n\t\t\ticon={icon}\n\t\t\tclassName={cn(iconOnly && \"size-8\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\nBannerAction.displayName = \"Banner.Action\";\n\nexport const Banner = Object.assign(BannerRoot, { Action: BannerAction });\n"],"mappings":";;;;;;;;AAaA,IAAME,IAAiBC,EAAI,2DAA2D;CACrF,UAAU;EACT,SAAS;GACR,SAAS;GACT,OAAO;GACP,OAAO;GACP,WAAW;EACZ;EACA,MAAM;GACL,MAAM;GACN,IAAI;EACL;CACD;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAO;AACrD,CAAC,GAKKC,IAAgBC,EAA4D;CACjF,SAAS;CACT,MAAM;AACP,CAAC;AAkHD,SAASC,EAAe,GAA0B;CACjD,OAAOC,EAAeC,CAAI,KAAKA,EAAK,SAASC;AAC9C;AAEA,SAASC,EAAW,EACnB,cACA,aAAU,WACV,UAAO,QACP,UACA,gBACA,SACA,WACA,aACA,GAAGC,KACY;CACf,IAAMC,IAAkBC,KAAW,WAC7BC,IAAeC,KAAQ,QACvBC,IAAaC,KAAS,QAAQC,KAAe,MAC7CC,IAAQC,EAAS,QAAQC,CAAM,GAC/BC,IAAOH,EAAM,OAAOb,CAAc,GAClCiB,IAAQJ,EAAM,QAAQ,MAAS,CAACb,EAAeE,CAAI,CAAC,GACpDgB,IAAWV,MAAiB,OAAOQ,IAAO,CAAC,GAAGC,GAAO,GAAGD,CAAI,GAC5DG,IAAgBX,MAAiB,OAAOS,IAAQ,CAAC;CAEvD,OACC,kBAACnB,EAAc,UAAf;EAAwB,OAAO;GAAE,SAASQ;GAAiB,MAAME;EAAa;EAC7E,UAAA,kBAAC,OAAD;GACC,WAAWY,EACVC,GACAzB,EAAe;IAAE,SAASU;IAAiB,MAAME;GAAa,CAAC,GAC/Dc,CACD;GACA,GAAIjB;GANL,UAAA;IAQEkB,IAAO,kBAAC,QAAD;KAAM,WAAU;KAA8C,UAAAA;IAAW,CAAA,IAAI;IACrF,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACEZ,IAAQ,kBAAC,KAAD;OAAG,WAAU;OAAe,UAAAA;MAAS,CAAA,IAAI;MACjDC,IACA,kBAAC,OAAD;OACC,WAAWQ,EACVd,MAAoB,cAAc,iCAAiC,cACpE;OAHD,UAAA,CAKEM,GACAO,EAAc,SAAS,IAAI,kBAAAzB,GAAA,EAAA,UAAA,CAAE,KAAEyB,CAAgB,EAAA,CAAA,IAAI,IAChD;MACF,CAAA,IAAAA,EAAc,SAAS,IAC1B,kBAAC,OAAD,EAAA,UAAMA,EAAmB,CAAA,IACtB;MACHT,IAAa,OAAOc;KACjB;;IACJN,EAAS,SAAS,IAClB,kBAAC,OAAD;KAAK,WAAU;KAAoC,UAAAA;IAAc,CAAA,IAC9D;GACA;;CACkB,CAAA;AAE1B;AAEA,SAAgBf,EAAa,EAC5B,cACA,aAAU,WACV,SACA,SACA,aACA,GAAGE,KACkB;CACrB,IAAMoB,IAASC,EAAW5B,CAAa,GACjC6B,IACLpB,MAAY,UACT,UACAA,MAAY,cACX,cACAkB,EAAO,YAAY,UAClB,gBACA,WACAG,IAAWJ,KAAY,QAAQA,MAAa;CAClD,OACC,kBAACK,GAAD;EACC,SAASF;EACT,MAAMlB,MAASmB,IAAW,SAASH,EAAO,SAAS,OAAO,OAAO;EAC3D;EACN,WAAWL,EAAGQ,KAAY,UAAUN,CAAS;EAC7C,GAAIjB;EAEH;CACM,CAAA;AAEV;AACA,EAAa,cAAc;AAE3B,IAAayB,IAAS,OAAO,OAAO1B,GAAY,EAAE,QAAQD,EAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"basalt-mark.js","names":[],"sources":["../../src/components/basalt-mark.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport { basaltMarkPng } from \"../assets/brand-mark\";\nimport { cn } from \"../utils/cn\";\n\nexport type BasaltMarkProps = Omit<SVGAttributes<SVGSVGElement>, \"className\"> & {\n\t/**\n\t * Additional classes for the mark.\n\t */\n\tclassName?: string;\n};\n\nexport function BasaltMark({ className, ...props }: BasaltMarkProps) {\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\"h-5 w-5\", className)}\n\t\t\tviewBox=\"0 0 128 128\"\n\t\t\trole=\"img\"\n\t\t\taria-label=\"Basalt\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<title>Basalt</title>\n\t\t\t<image href={basaltMarkPng} width=\"128\" height=\"128\" />\n\t\t</svg>\n\t);\n}\n"],"mappings":";;;;;AAWA,
|
|
1
|
+
{"version":3,"file":"basalt-mark.js","names":["BasaltMark","props","cn","className","basaltMarkPng"],"sources":["../../src/components/basalt-mark.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport { basaltMarkPng } from \"../assets/brand-mark\";\nimport { cn } from \"../utils/cn\";\n\nexport type BasaltMarkProps = Omit<SVGAttributes<SVGSVGElement>, \"className\"> & {\n\t/**\n\t * Additional classes for the mark.\n\t */\n\tclassName?: string;\n};\n\nexport function BasaltMark({ className, ...props }: BasaltMarkProps) {\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\"h-5 w-5\", className)}\n\t\t\tviewBox=\"0 0 128 128\"\n\t\t\trole=\"img\"\n\t\t\taria-label=\"Basalt\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<title>Basalt</title>\n\t\t\t<image href={basaltMarkPng} width=\"128\" height=\"128\" />\n\t\t</svg>\n\t);\n}\n"],"mappings":";;;;;AAWA,SAAgBA,EAAW,EAAE,cAAW,GAAGC,KAA0B;CACpE,OACC,kBAAC,OAAD;EACC,WAAWC,EAAG,WAAWC,CAAS;EAClC,SAAQ;EACR,MAAK;EACL,cAAW;EACX,GAAIF;EALL,UAAA,CAOC,kBAAC,SAAD,EAAA,UAAO,SAAa,CAAA,GACpB,kBAAC,SAAD;GAAO,MAAMG;GAAe,OAAM;GAAM,QAAO;EAAO,CAAA,CAClD;;AAEP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"battery-meter.js","names":[],"sources":["../../src/components/battery-meter.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport interface BatteryMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n\t/** Battery charge in percent, clamped to 0–100. Non-finite readings are unavailable. */\n\tvalue: number;\n\t/** Accessible name of the battery. */\n\tlabel: string;\n\t/** Device state, also announced with the value. @default \"discharging\" */\n\tstatus?: \"charging\" | \"discharging\" | \"offline\";\n}\n\nexport function BatteryMeter({\n\tvalue,\n\tlabel,\n\tstatus = \"discharging\",\n\tclassName,\n\t...props\n}: BatteryMeterProps) {\n\tconst available = status !== \"offline\" && Number.isFinite(value);\n\tconst charge = available ? Math.min(100, Math.max(0, value)) : 0;\n\tconst color =\n\t\tcharge <= 20 ? \"bg-basalt-danger\" : charge <= 50 ? \"bg-basalt-warning\" : \"bg-basalt-primary\";\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex items-center gap-2 text-xs tabular-nums\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{available ? (\n\t\t\t\t<meter\n\t\t\t\t\tclassName=\"sr-only\"\n\t\t\t\t\tmin={0}\n\t\t\t\t\tmax={100}\n\t\t\t\t\tlow={20}\n\t\t\t\t\thigh={80}\n\t\t\t\t\toptimum={100}\n\t\t\t\t\tvalue={charge}\n\t\t\t\t\taria-label={`${label}, ${status}`}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<span className=\"sr-only\">{label}: unavailable</span>\n\t\t\t)}\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"relative inline-flex h-4 w-9 gap-0.5 rounded-sm border border-basalt-muted-foreground/60 p-0.5\"\n\t\t\t>\n\t\t\t\t{[0, 1, 2, 3].map((segment) => (\n\t\t\t\t\t<span\n\t\t\t\t\t\tkey={segment}\n\t\t\t\t\t\tclassName=\"relative flex-1 overflow-hidden rounded-[1px] bg-basalt-muted\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={cn(\"absolute inset-y-0 left-0\", color)}\n\t\t\t\t\t\t\tstyle={{ width: `${Math.min(100, Math.max(0, charge - segment * 25) * 4)}%` }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t\t<span className=\"absolute -right-1 top-1 h-1.5 w-0.5 rounded-r-sm bg-basalt-muted-foreground/60\" />\n\t\t\t</span>\n\t\t\t<span aria-hidden=\"true\" className=\"min-w-9 text-basalt-foreground\">\n\t\t\t\t{available ? `${Math.round(charge)}%` : \"Offline\"}\n\t\t\t</span>\n\t\t\t{status === \"charging\" && available ? (\n\t\t\t\t<span className=\"text-basalt-muted-foreground\">Charging</span>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAaA,
|
|
1
|
+
{"version":3,"file":"battery-meter.js","names":["BatteryMeter","props","available","status","value","charge","color","cn","BASALT_UI_CLASS","className","label","segment"],"sources":["../../src/components/battery-meter.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport interface BatteryMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n\t/** Battery charge in percent, clamped to 0–100. Non-finite readings are unavailable. */\n\tvalue: number;\n\t/** Accessible name of the battery. */\n\tlabel: string;\n\t/** Device state, also announced with the value. @default \"discharging\" */\n\tstatus?: \"charging\" | \"discharging\" | \"offline\";\n}\n\nexport function BatteryMeter({\n\tvalue,\n\tlabel,\n\tstatus = \"discharging\",\n\tclassName,\n\t...props\n}: BatteryMeterProps) {\n\tconst available = status !== \"offline\" && Number.isFinite(value);\n\tconst charge = available ? Math.min(100, Math.max(0, value)) : 0;\n\tconst color =\n\t\tcharge <= 20 ? \"bg-basalt-danger\" : charge <= 50 ? \"bg-basalt-warning\" : \"bg-basalt-primary\";\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex items-center gap-2 text-xs tabular-nums\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{available ? (\n\t\t\t\t<meter\n\t\t\t\t\tclassName=\"sr-only\"\n\t\t\t\t\tmin={0}\n\t\t\t\t\tmax={100}\n\t\t\t\t\tlow={20}\n\t\t\t\t\thigh={80}\n\t\t\t\t\toptimum={100}\n\t\t\t\t\tvalue={charge}\n\t\t\t\t\taria-label={`${label}, ${status}`}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<span className=\"sr-only\">{label}: unavailable</span>\n\t\t\t)}\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"relative inline-flex h-4 w-9 gap-0.5 rounded-sm border border-basalt-muted-foreground/60 p-0.5\"\n\t\t\t>\n\t\t\t\t{[0, 1, 2, 3].map((segment) => (\n\t\t\t\t\t<span\n\t\t\t\t\t\tkey={segment}\n\t\t\t\t\t\tclassName=\"relative flex-1 overflow-hidden rounded-[1px] bg-basalt-muted\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={cn(\"absolute inset-y-0 left-0\", color)}\n\t\t\t\t\t\t\tstyle={{ width: `${Math.min(100, Math.max(0, charge - segment * 25) * 4)}%` }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t\t<span className=\"absolute -right-1 top-1 h-1.5 w-0.5 rounded-r-sm bg-basalt-muted-foreground/60\" />\n\t\t\t</span>\n\t\t\t<span aria-hidden=\"true\" className=\"min-w-9 text-basalt-foreground\">\n\t\t\t\t{available ? `${Math.round(charge)}%` : \"Offline\"}\n\t\t\t</span>\n\t\t\t{status === \"charging\" && available ? (\n\t\t\t\t<span className=\"text-basalt-muted-foreground\">Charging</span>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAaA,SAAgBA,EAAa,EAC5B,UACA,UACA,YAAS,eACT,cACA,GAAGC,KACkB;CACrB,IAAMC,IAAYC,MAAW,aAAa,OAAO,SAASC,CAAK,GACzDC,IAASH,IAAY,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGE,CAAK,CAAC,IAAI,GACzDE,IACLD,KAAU,KAAK,qBAAqBA,KAAU,KAAK,sBAAsB;CAC1E,OACC,kBAAC,OAAD;EACC,WAAWE,EACVC,GACA,uDACAC,CACD;EACA,GAAIR;EANL,UAAA;GAQEC,IACA,kBAAC,SAAD;IACC,WAAU;IACV,KAAK;IACL,KAAK;IACL,KAAK;IACL,MAAM;IACN,SAAS;IACT,OAAOG;IACP,cAAY,GAAGK,EAAM,IAAIP;GACzB,CAAA,IAED,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAA2BO,GAAM,eAAmB;;GAErD,kBAAC,QAAD;IACC,eAAY;IACZ,WAAU;IAFX,UAAA,CAIE;KAAC;KAAG;KAAG;KAAG;IAAC,CAAC,CAAC,KAAK,MAClB,kBAAC,QAAD;KAEC,WAAU;KAEV,UAAA,kBAAC,QAAD;MACC,WAAWH,EAAG,6BAA6BD,CAAK;MAChD,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGD,IAASM,IAAU,EAAE,IAAI,CAAC,EAAE,GAAG;KAC5E,CAAA;IACI,GAPAA,CAOA,CACN,GACD,kBAAC,QAAD,EAAM,WAAU,iFAAkF,CAAA,CAC7F;;GACN,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IACjC,UAAAT,IAAY,GAAG,KAAK,MAAMG,CAAM,EAAE,KAAK;GACnC,CAAA;GACLF,MAAW,cAAcD,IACzB,kBAAC,QAAD;IAAM,WAAU;IAA+B,UAAA;GAAc,CAAA,IAC1D;EACA;;AAEP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Link } from \"./link\";\n\nconst crumbTypeClass = \"text-sm font-normal\";\n\nexport interface BreadcrumbItem {\n\t/**\n\t * Navigation target URL. When omitted, item renders as unlinked text (and only receives aria-current=\"page\" if it is the final item).\n\t */\n\thref?: string;\n\t/**\n\t * Content label rendered inside the breadcrumb segment.\n\t */\n\tlabel: ReactNode;\n\t/**\n\t * Optional leading icon rendered before the label.\n\t */\n\ticon?: ReactNode;\n}\n\nexport interface BreadcrumbsProps {\n\t/**\n\t * List of breadcrumb segments ({ label: ReactNode, href?: string, icon?: ReactNode }[]) in hierarchical order from root to current page.\n\t * Only the final item in the array without an href receives aria-current=\"page\".\n\t * Interactive items render via Link, delegating routing to LinkProvider when configured.\n\t * Component only accepts items and className without native HTML rest attribute forwarding or forwarded ref.\n\t */\n\titems: BreadcrumbItem[];\n\t/**\n\t * Optional class name applied to the outer nav element.\n\t */\n\tclassName?: string;\n}\n\nexport function Breadcrumbs({ items, className }: BreadcrumbsProps) {\n\treturn (\n\t\t<nav\n\t\t\taria-label=\"Breadcrumb\"\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex items-center gap-1 text-sm font-normal text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{items.map((item, index) => {\n\t\t\t\tconst current = index === items.length - 1 && !item.href;\n\t\t\t\tconst label = item.icon ? (\n\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\titem.label\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<span key={`${String(item.label)}-${index}`} className=\"flex items-center gap-1\">\n\t\t\t\t\t\t{index > 0 ? <ChevronRight className=\"size-3\" aria-hidden=\"true\" /> : null}\n\t\t\t\t\t\t{item.href ? (\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\thref={item.href}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tcrumbTypeClass,\n\t\t\t\t\t\t\t\t\t\"text-basalt-muted-foreground no-underline transition-colors hover:text-basalt-foreground\",\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{label}\n\t\t\t\t\t\t\t</Link>\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-current={current ? \"page\" : undefined}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tcrumbTypeClass,\n\t\t\t\t\t\t\t\t\tcurrent ? \"text-basalt-foreground\" : \"text-basalt-muted-foreground\",\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{label}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t);\n\t\t\t})}\n\t\t</nav>\n\t);\n}\n"],"mappings":";;;;;;;AAMA,
|
|
1
|
+
{"version":3,"file":"breadcrumbs.js","names":["crumbTypeClass","Breadcrumbs","cn","BASALT_UI_CLASS","className","items","current","index","item","label","ChevronRight","Link"],"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Link } from \"./link\";\n\nconst crumbTypeClass = \"text-sm font-normal\";\n\nexport interface BreadcrumbItem {\n\t/**\n\t * Navigation target URL. When omitted, item renders as unlinked text (and only receives aria-current=\"page\" if it is the final item).\n\t */\n\thref?: string;\n\t/**\n\t * Content label rendered inside the breadcrumb segment.\n\t */\n\tlabel: ReactNode;\n\t/**\n\t * Optional leading icon rendered before the label.\n\t */\n\ticon?: ReactNode;\n}\n\nexport interface BreadcrumbsProps {\n\t/**\n\t * List of breadcrumb segments ({ label: ReactNode, href?: string, icon?: ReactNode }[]) in hierarchical order from root to current page.\n\t * Only the final item in the array without an href receives aria-current=\"page\".\n\t * Interactive items render via Link, delegating routing to LinkProvider when configured.\n\t * Component only accepts items and className without native HTML rest attribute forwarding or forwarded ref.\n\t */\n\titems: BreadcrumbItem[];\n\t/**\n\t * Optional class name applied to the outer nav element.\n\t */\n\tclassName?: string;\n}\n\nexport function Breadcrumbs({ items, className }: BreadcrumbsProps) {\n\treturn (\n\t\t<nav\n\t\t\taria-label=\"Breadcrumb\"\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex items-center gap-1 text-sm font-normal text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{items.map((item, index) => {\n\t\t\t\tconst current = index === items.length - 1 && !item.href;\n\t\t\t\tconst label = item.icon ? (\n\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\titem.label\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<span key={`${String(item.label)}-${index}`} className=\"flex items-center gap-1\">\n\t\t\t\t\t\t{index > 0 ? <ChevronRight className=\"size-3\" aria-hidden=\"true\" /> : null}\n\t\t\t\t\t\t{item.href ? (\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\thref={item.href}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tcrumbTypeClass,\n\t\t\t\t\t\t\t\t\t\"text-basalt-muted-foreground no-underline transition-colors hover:text-basalt-foreground\",\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{label}\n\t\t\t\t\t\t\t</Link>\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-current={current ? \"page\" : undefined}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tcrumbTypeClass,\n\t\t\t\t\t\t\t\t\tcurrent ? \"text-basalt-foreground\" : \"text-basalt-muted-foreground\",\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{label}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t);\n\t\t\t})}\n\t\t</nav>\n\t);\n}\n"],"mappings":";;;;;;;AAMA,IAAMA,IAAiB;AA+BvB,SAAgBC,EAAY,EAAE,UAAO,gBAA+B;CACnE,OACC,kBAAC,OAAD;EACC,cAAW;EACX,WAAWC,EACVC,GACA,4EACAC,CACD;EAEC,UAAAC,EAAM,KAAK,GAAM,MAAU;GAC3B,IAAMC,IAAUC,MAAUF,EAAM,SAAS,KAAK,CAACG,EAAK,MAC9CC,IAAQD,EAAK,OAClB,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACEA,EAAK,MACLA,EAAK,KACD;GAEN,CAAA,IAAAA,EAAK;GAEN,OACC,kBAAC,QAAD;IAA6C,WAAU;IAAvD,UAAA,CACED,IAAQ,IAAI,kBAACG,GAAD;KAAc,WAAU;KAAS,eAAY;IAAQ,CAAA,IAAI,MACrEF,EAAK,OACL,kBAACG,GAAD;KACC,MAAMH,EAAK;KACX,WAAWN,EACVF,GACA,0FACD;KAEC,UAAAS;IACI,CAAA,IAEN,kBAAC,QAAD;KACC,gBAAcH,IAAU,SAAS,KAAA;KACjC,WAAWJ,EACVF,GACAM,IAAU,2BAA2B,8BACtC;KAEC,UAAAG;IACI,CAAA,CAEF;GAvBK,GAAA,GAAG,OAAOD,EAAK,KAAK,EAAE,GAAGD,GAuB9B;EAER,CAAC;CACG,CAAA;AAEP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\n// Keep rounded corners inside the button's rectangular pointer target.\nconst buttonVariants = cva(\n\t`${BASALT_UI_CLASS} relative inline-flex cursor-pointer items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors before:absolute before:inset-0 ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary/90\",\n\t\t\t\tsecondary: \"bg-basalt-control text-basalt-foreground hover:bg-basalt-accent\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"bg-basalt-destructive text-basalt-destructive-foreground hover:bg-basalt-destructive/90\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-basalt-border bg-basalt-control hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tghost: \"hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tlink: \"text-basalt-primary underline-offset-4 hover:underline\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-9 px-4 py-2\",\n\t\t\t\tsm: \"h-8 rounded-basalt-md px-3 text-xs\",\n\t\t\t\tlg: \"h-10 rounded-basalt-md px-6\",\n\t\t\t\ticon: \"h-9 w-9 shrink-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\nexport interface ButtonProps\n\textends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\">,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Pass control to child element slot.\n\t *\n\t * Note: Child element must forward props and ref in all states. When disabled or loading,\n\t * asChild suppresses click, keyboard activation (Enter/Space), and pointer handlers on both\n\t * child and parent while retaining browser default Tab navigation without trapping focus.\n\t * To preserve single DOM node layout and avoid unexpected child layout shifts, no internal\n\t * spinner is inserted in asChild loading mode; visual disabled state is expressed via aria-disabled.\n\t *\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Button type attribute.\n\t * @default \"button\"\n\t */\n\ttype?: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t/**\n\t * Display loading spinner and disable interactions.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\tsize,\n\t\t\tasChild = false,\n\t\t\ttype = \"button\",\n\t\t\tloading = false,\n\t\t\ticon,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isDisabled = Boolean(disabled || loading);\n\n\t\tif (asChild) {\n\t\t\tif (isDisabled && React.isValidElement(children)) {\n\t\t\t\tconst childElement = children as React.ReactElement<Record<string, unknown>>;\n\t\t\t\tconst isNativeButton =\n\t\t\t\t\ttypeof childElement.type === \"string\" && childElement.type.toLowerCase() === \"button\";\n\n\t\t\t\tconst blockActivationEvent = (event: React.SyntheticEvent | Event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif (\n\t\t\t\t\t\t\"stopImmediatePropagation\" in event &&\n\t\t\t\t\t\ttypeof event.stopImmediatePropagation === \"function\"\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst handleKeyEvent = (event: React.KeyboardEvent) => {\n\t\t\t\t\tif (event.key === \"Enter\" || event.key === \" \" || event.key === \"Spacebar\") {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif (typeof event.nativeEvent?.stopImmediatePropagation === \"function\") {\n\t\t\t\t\t\tevent.nativeEvent.stopImmediatePropagation();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst blockedHandlers = {\n\t\t\t\t\tonClick: blockActivationEvent,\n\t\t\t\t\tonClickCapture: blockActivationEvent,\n\t\t\t\t\tonKeyDown: handleKeyEvent,\n\t\t\t\t\tonKeyDownCapture: handleKeyEvent,\n\t\t\t\t\tonKeyUp: handleKeyEvent,\n\t\t\t\t\tonKeyUpCapture: handleKeyEvent,\n\t\t\t\t\tonKeyPress: handleKeyEvent,\n\t\t\t\t\tonKeyPressCapture: handleKeyEvent,\n\t\t\t\t\tonMouseDown: blockActivationEvent,\n\t\t\t\t\tonMouseDownCapture: blockActivationEvent,\n\t\t\t\t\tonMouseUp: blockActivationEvent,\n\t\t\t\t\tonMouseUpCapture: blockActivationEvent,\n\t\t\t\t\tonPointerDown: blockActivationEvent,\n\t\t\t\t\tonPointerDownCapture: blockActivationEvent,\n\t\t\t\t\tonPointerUp: blockActivationEvent,\n\t\t\t\t\tonPointerUpCapture: blockActivationEvent,\n\t\t\t\t\tonAuxClick: blockActivationEvent,\n\t\t\t\t\tonAuxClickCapture: blockActivationEvent,\n\t\t\t\t};\n\n\t\t\t\tconst sanitizedChild = React.cloneElement(childElement, {\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t...(isNativeButton ? { disabled: true } : {}),\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? true : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t});\n\n\t\t\t\tconst slotProps: Record<string, unknown> = {\n\t\t\t\t\t...props,\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? \"true\" : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t};\n\t\t\t\tif (isNativeButton) {\n\t\t\t\t\tslotProps.disabled = true;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Slot\n\t\t\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...slotProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t{sanitizedChild}\n\t\t\t\t\t</Slot>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<Slot className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\tconst iconNode = loading ? (\n\t\t\t<Loader2 className=\"animate-basalt-spin motion-reduce:animate-none\" aria-hidden=\"true\" />\n\t\t) : (\n\t\t\ticon\n\t\t);\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\tref={ref}\n\t\t\t\ttype={type}\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\taria-busy={loading || undefined}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{iconNode}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport interface LinkButtonProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement>,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n\t({ className, variant, size, icon, children, ...props }, ref) => (\n\t\t<a ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props}>\n\t\t\t{icon}\n\t\t\t{children}\n\t\t</a>\n\t),\n);\nLinkButton.displayName = \"LinkButton\";\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;AASA,IAAM,IAAiB,EACtB,GAAG,EAAgB,gKAAgK,EAAW,0KAC9L;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,WAAW;GACX,aACC;GACD,SACC;GACD,OAAO;GACP,MAAM;EACP;EACA,MAAM;GACL,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;EACP;CACD;CACA,iBAAiB;EAChB,SAAS;EACT,MAAM;CACP;AACD,CACD,GA2Ca,IAAS,EAAM,YAE1B,EACC,cACA,YACA,SACA,aAAU,IACV,UAAO,UACP,aAAU,IACV,SACA,aACA,aACA,GAAG,KAEJ,MACI;CACJ,IAAM,IAAa,GAAQ,KAAY;CAEvC,IAAI,GAAS;EACZ,IAAI,KAAc,EAAM,eAAe,CAAQ,GAAG;GACjD,IAAM,IAAe,GACf,IACL,OAAO,EAAa,QAAS,YAAY,EAAa,KAAK,YAAY,MAAM,UAExE,KAAwB,MAAwC;IAGrE,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAErB,8BAA8B,KAC9B,OAAO,EAAM,4BAA6B,cAE1C,EAAM,yBAAyB;GAEjC,GAEM,KAAkB,MAA+B;IAKtD,CAJI,EAAM,QAAQ,WAAW,EAAM,QAAQ,OAAO,EAAM,QAAQ,eAC/D,EAAM,eAAe,GAEtB,EAAM,gBAAgB,GAClB,OAAO,EAAM,aAAa,4BAA6B,cAC1D,EAAM,YAAY,yBAAyB;GAE7C,GAEM,IAAkB;IACvB,SAAS;IACT,gBAAgB;IAChB,WAAW;IACX,kBAAkB;IAClB,SAAS;IACT,gBAAgB;IAChB,YAAY;IACZ,mBAAmB;IACnB,aAAa;IACb,oBAAoB;IACpB,WAAW;IACX,kBAAkB;IAClB,eAAe;IACf,sBAAsB;IACtB,aAAa;IACb,oBAAoB;IACpB,YAAY;IACZ,mBAAmB;GACpB,GAEM,IAAiB,EAAM,aAAa,GAAc;IACvD,GAAG;IACH,GAAI,IAAiB,EAAE,UAAU,GAAK,IAAI,CAAC;IAC3C,iBAAiB;IACjB,aAAa,IAAU,KAAO,KAAA;IAC9B,UAAU;GACX,CAAC,GAEK,IAAqC;IAC1C,GAAG;IACH,GAAG;IACH,iBAAiB;IACjB,aAAa,IAAU,SAAS,KAAA;IAChC,UAAU;GACX;GAKA,OAJI,MACH,EAAU,WAAW,KAIrB,kBAAC,GAAD;IACC,WAAW,EAAG,EAAe;KAAE;KAAS;IAAK,CAAC,GAAG,CAAS;IACrD;IACL,GAAI;IAEH,UAAA;GACI,CAAA;EAER;EAEA,OACC,kBAAC,GAAD;GAAM,WAAW,EAAG,EAAe;IAAE;IAAS;GAAK,CAAC,GAAG,CAAS;GAAQ;GAAK,GAAI;GAC/E;EACI,CAAA;CAER;CAEA,IAAM,IAAW,IAChB,kBAAC,GAAD;EAAS,WAAU;EAAiD,eAAY;CAAQ,CAAA,IAExF;CAED,OACC,kBAAC,UAAD;EACC,WAAW,EAAG,EAAe;GAAE;GAAS;EAAK,CAAC,GAAG,CAAS;EACrD;EACC;EACN,UAAU;EACV,aAAW,KAAW,KAAA;EACtB,GAAI;EANL,UAAA,CAQE,GACA,CACM;;AAEV,CACD;AACA,EAAO,cAAc;AAqBrB,IAAa,IAAa,EAAM,YAC9B,EAAE,cAAW,YAAS,SAAM,SAAM,aAAU,GAAG,KAAS,MACxD,kBAAC,KAAD;CAAQ;CAAK,WAAW,EAAG,EAAe;EAAE;EAAS;CAAK,CAAC,GAAG,CAAS;CAAG,GAAI;CAA9E,UAAA,CACE,GACA,CACC;AAEL,CAAA,CAAA;AACA,EAAW,cAAc"}
|
|
1
|
+
{"version":3,"file":"button.js","names":["React","buttonVariants","cva","BASALT_UI_CLASS","FOCUS_RING","Button","props","isDisabled","disabled","loading","asChild","children","childElement","isNativeButton","blockActivationEvent","event","handleKeyEvent","blockedHandlers","sanitizedChild","slotProps","Slot","cn","className","iconNode","Loader2","icon","LinkButton"],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\n// Keep rounded corners inside the button's rectangular pointer target.\nconst buttonVariants = cva(\n\t`${BASALT_UI_CLASS} relative inline-flex cursor-pointer items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors before:absolute before:inset-0 ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary/90\",\n\t\t\t\tsecondary: \"bg-basalt-control text-basalt-foreground hover:bg-basalt-accent\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"bg-basalt-destructive text-basalt-destructive-foreground hover:bg-basalt-destructive/90\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-basalt-border bg-basalt-control hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tghost: \"hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tlink: \"text-basalt-primary underline-offset-4 hover:underline\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-9 px-4 py-2\",\n\t\t\t\tsm: \"h-8 rounded-basalt-md px-3 text-xs\",\n\t\t\t\tlg: \"h-10 rounded-basalt-md px-6\",\n\t\t\t\ticon: \"h-9 w-9 shrink-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\nexport interface ButtonProps\n\textends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\">,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Pass control to child element slot.\n\t *\n\t * Note: Child element must forward props and ref in all states. When disabled or loading,\n\t * asChild suppresses click, keyboard activation (Enter/Space), and pointer handlers on both\n\t * child and parent while retaining browser default Tab navigation without trapping focus.\n\t * To preserve single DOM node layout and avoid unexpected child layout shifts, no internal\n\t * spinner is inserted in asChild loading mode; visual disabled state is expressed via aria-disabled.\n\t *\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Button type attribute.\n\t * @default \"button\"\n\t */\n\ttype?: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t/**\n\t * Display loading spinner and disable interactions.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\tsize,\n\t\t\tasChild = false,\n\t\t\ttype = \"button\",\n\t\t\tloading = false,\n\t\t\ticon,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isDisabled = Boolean(disabled || loading);\n\n\t\tif (asChild) {\n\t\t\tif (isDisabled && React.isValidElement(children)) {\n\t\t\t\tconst childElement = children as React.ReactElement<Record<string, unknown>>;\n\t\t\t\tconst isNativeButton =\n\t\t\t\t\ttypeof childElement.type === \"string\" && childElement.type.toLowerCase() === \"button\";\n\n\t\t\t\tconst blockActivationEvent = (event: React.SyntheticEvent | Event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif (\n\t\t\t\t\t\t\"stopImmediatePropagation\" in event &&\n\t\t\t\t\t\ttypeof event.stopImmediatePropagation === \"function\"\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst handleKeyEvent = (event: React.KeyboardEvent) => {\n\t\t\t\t\tif (event.key === \"Enter\" || event.key === \" \" || event.key === \"Spacebar\") {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif (typeof event.nativeEvent?.stopImmediatePropagation === \"function\") {\n\t\t\t\t\t\tevent.nativeEvent.stopImmediatePropagation();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst blockedHandlers = {\n\t\t\t\t\tonClick: blockActivationEvent,\n\t\t\t\t\tonClickCapture: blockActivationEvent,\n\t\t\t\t\tonKeyDown: handleKeyEvent,\n\t\t\t\t\tonKeyDownCapture: handleKeyEvent,\n\t\t\t\t\tonKeyUp: handleKeyEvent,\n\t\t\t\t\tonKeyUpCapture: handleKeyEvent,\n\t\t\t\t\tonKeyPress: handleKeyEvent,\n\t\t\t\t\tonKeyPressCapture: handleKeyEvent,\n\t\t\t\t\tonMouseDown: blockActivationEvent,\n\t\t\t\t\tonMouseDownCapture: blockActivationEvent,\n\t\t\t\t\tonMouseUp: blockActivationEvent,\n\t\t\t\t\tonMouseUpCapture: blockActivationEvent,\n\t\t\t\t\tonPointerDown: blockActivationEvent,\n\t\t\t\t\tonPointerDownCapture: blockActivationEvent,\n\t\t\t\t\tonPointerUp: blockActivationEvent,\n\t\t\t\t\tonPointerUpCapture: blockActivationEvent,\n\t\t\t\t\tonAuxClick: blockActivationEvent,\n\t\t\t\t\tonAuxClickCapture: blockActivationEvent,\n\t\t\t\t};\n\n\t\t\t\tconst sanitizedChild = React.cloneElement(childElement, {\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t...(isNativeButton ? { disabled: true } : {}),\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? true : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t});\n\n\t\t\t\tconst slotProps: Record<string, unknown> = {\n\t\t\t\t\t...props,\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? \"true\" : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t};\n\t\t\t\tif (isNativeButton) {\n\t\t\t\t\tslotProps.disabled = true;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Slot\n\t\t\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...slotProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t{sanitizedChild}\n\t\t\t\t\t</Slot>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<Slot className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\tconst iconNode = loading ? (\n\t\t\t<Loader2 className=\"animate-basalt-spin motion-reduce:animate-none\" aria-hidden=\"true\" />\n\t\t) : (\n\t\t\ticon\n\t\t);\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\tref={ref}\n\t\t\t\ttype={type}\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\taria-busy={loading || undefined}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{iconNode}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport interface LinkButtonProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement>,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n\t({ className, variant, size, icon, children, ...props }, ref) => (\n\t\t<a ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props}>\n\t\t\t{icon}\n\t\t\t{children}\n\t\t</a>\n\t),\n);\nLinkButton.displayName = \"LinkButton\";\n\nexport { buttonVariants };\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chat-bubble.js","names":[],"sources":["../../src/components/chat-bubble.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type ChatBubbleVariant = \"assistant\" | \"system\" | \"user\";\n\nexport interface ChatBubbleProps {\n\t/**\n\t * Alignment and fill.\n\t * @default \"assistant\"\n\t */\n\tvariant?: ChatBubbleVariant;\n\t/**\n\t * Show a streaming caret after the body.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Optional class name applied to the message bubble.\n\t * Component only accepts variant, streaming, className, and children without native HTML rest forwarding or forwarded ref.\n\t */\n\tclassName?: string;\n\t/**\n\t * Message content.\n\t */\n\tchildren: ReactNode;\n}\n\nexport function ChatBubble({\n\tvariant = \"assistant\",\n\tstreaming = false,\n\tclassName,\n\tchildren,\n}: ChatBubbleProps) {\n\tif (variant === \"system\") {\n\t\treturn (\n\t\t\t<p\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\t\"px-1 text-center text-[11px] text-basalt-muted-foreground\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</p>\n\t\t);\n\t}\n\tconst user = variant === \"user\";\n\treturn (\n\t\t<div className={cn(BASALT_UI_CLASS, \"flex w-full\", user ? \"justify-end\" : \"justify-start\")}>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"max-w-[92%] px-3.5 py-2 text-sm leading-5 shadow-sm\",\n\t\t\t\t\tuser\n\t\t\t\t\t\t? \"rounded-2xl rounded-br-md bg-basalt-primary text-basalt-primary-foreground\"\n\t\t\t\t\t\t: \"rounded-2xl rounded-bl-md bg-basalt-secondary text-basalt-foreground ring-1 ring-basalt-border/50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName=\"mt-1 inline-block h-3 w-1.5 animate-pulse rounded-sm bg-basalt-primary/70 align-middle motion-reduce:animate-none\"\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AA4BA,
|
|
1
|
+
{"version":3,"file":"chat-bubble.js","names":["ChatBubble","variant","cn","BASALT_UI_CLASS","className","user","children","streaming"],"sources":["../../src/components/chat-bubble.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type ChatBubbleVariant = \"assistant\" | \"system\" | \"user\";\n\nexport interface ChatBubbleProps {\n\t/**\n\t * Alignment and fill.\n\t * @default \"assistant\"\n\t */\n\tvariant?: ChatBubbleVariant;\n\t/**\n\t * Show a streaming caret after the body.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Optional class name applied to the message bubble.\n\t * Component only accepts variant, streaming, className, and children without native HTML rest forwarding or forwarded ref.\n\t */\n\tclassName?: string;\n\t/**\n\t * Message content.\n\t */\n\tchildren: ReactNode;\n}\n\nexport function ChatBubble({\n\tvariant = \"assistant\",\n\tstreaming = false,\n\tclassName,\n\tchildren,\n}: ChatBubbleProps) {\n\tif (variant === \"system\") {\n\t\treturn (\n\t\t\t<p\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\t\"px-1 text-center text-[11px] text-basalt-muted-foreground\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</p>\n\t\t);\n\t}\n\tconst user = variant === \"user\";\n\treturn (\n\t\t<div className={cn(BASALT_UI_CLASS, \"flex w-full\", user ? \"justify-end\" : \"justify-start\")}>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"max-w-[92%] px-3.5 py-2 text-sm leading-5 shadow-sm\",\n\t\t\t\t\tuser\n\t\t\t\t\t\t? \"rounded-2xl rounded-br-md bg-basalt-primary text-basalt-primary-foreground\"\n\t\t\t\t\t\t: \"rounded-2xl rounded-bl-md bg-basalt-secondary text-basalt-foreground ring-1 ring-basalt-border/50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName=\"mt-1 inline-block h-3 w-1.5 animate-pulse rounded-sm bg-basalt-primary/70 align-middle motion-reduce:animate-none\"\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AA4BA,SAAgBA,EAAW,EAC1B,aAAU,aACV,eAAY,IACZ,cACA,eACmB;CACnB,IAAIC,MAAY,UACf,OACC,kBAAC,KAAD;EACC,WAAWC,EACVC,GACA,6DACAC,CACD;EAEC;CACC,CAAA;CAGL,IAAMC,IAAOJ,MAAY;CACzB,OACC,kBAAC,OAAD;EAAK,WAAWC,EAAGC,GAAiB,eAAeE,IAAO,gBAAgB,eAAe;EACxF,UAAA,kBAAC,OAAD;GACC,WAAWH,EACV,uDACAG,IACG,+EACA,qGACHD,CACD;GAPD,UAAA,CASEE,GACAC,IACA,kBAAC,QAAD;IACC,WAAU;IACV,eAAA;GACA,CAAA,IACE,IACA;;CACD,CAAA;AAEP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chat-composer.js","names":[],"sources":["../../src/components/chat-composer.tsx"],"sourcesContent":["import { ArrowUp, Square } from \"lucide-react\";\nimport { type FormEvent, type KeyboardEvent, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\nimport { InputArea } from \"./input-area\";\n\nexport interface ChatComposerProps {\n\t/**\n\t * Disable the field and send.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Replace send with stop. When streaming is true, the stop button renders and triggers onCancel.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Field accessible name.\n\t * @default \"Message\"\n\t */\n\tlabel?: string;\n\t/**\n\t * Placeholder when empty.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Called with trimmed text on send. Operates on internal draft state and does not wait for a Promise (caller manages asynchronous errors).\n\t */\n\tonSend: (text: string) => void;\n\t/**\n\t * Called when the stop control is pressed while streaming is active.\n\t */\n\tonCancel?: () => void;\n\t/**\n\t * Send control accessible name.\n\t * @default \"Send message\"\n\t */\n\tsendLabel?: string;\n\t/**\n\t * Stop control accessible name.\n\t * @default \"Stop generating\"\n\t */\n\tcancelLabel?: string;\n\t/**\n\t * Optional class name applied to the form container.\n\t * Component manages internal draft/height state and does not forward native form rest attributes or ref.\n\t */\n\tclassName?: string;\n}\n\nexport function ChatComposer({\n\tdisabled = false,\n\tstreaming = false,\n\tlabel = \"Message\",\n\tplaceholder,\n\tonSend,\n\tonCancel,\n\tsendLabel = \"Send message\",\n\tcancelLabel = \"Stop generating\",\n\tclassName,\n}: ChatComposerProps) {\n\tconst [value, setValue] = useState(\"\");\n\tconst ref = useRef<HTMLTextAreaElement>(null);\n\tconst composingRef = useRef(false);\n\n\tconst resize = () => {\n\t\tconst el = ref.current;\n\t\tif (!el) {\n\t\t\treturn;\n\t\t}\n\t\tel.style.height = \"0px\";\n\t\tel.style.height = `${Math.min(el.scrollHeight, 160)}px`;\n\t};\n\n\tconst submit = () => {\n\t\tconst text = value.trim();\n\t\tif (!text || disabled || streaming) {\n\t\t\treturn;\n\t\t}\n\t\tonSend(text);\n\t\tsetValue(\"\");\n\t\trequestAnimationFrame(() => {\n\t\t\tresize();\n\t\t\tref.current?.focus();\n\t\t});\n\t};\n\n\tconst onSubmit = (event: FormEvent) => {\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\tconst onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n\t\tif (composingRef.current || event.nativeEvent.isComposing) {\n\t\t\treturn;\n\t\t}\n\t\tif (event.key !== \"Enter\" || event.shiftKey) {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\treturn (\n\t\t<form\n\t\t\tclassName={cn(\"border-t border-basalt-border/50 bg-basalt-card p-3\", className)}\n\t\t\tonSubmit={onSubmit}\n\t\t>\n\t\t\t<div className=\"flex items-end gap-2 rounded-2xl bg-basalt-secondary p-2 ring-1 ring-basalt-border/50\">\n\t\t\t\t<InputArea\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\tsetValue(event.target.value);\n\t\t\t\t\t\trequestAnimationFrame(resize);\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionStart={() => {\n\t\t\t\t\t\tcomposingRef.current = true;\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionEnd={() => {\n\t\t\t\t\t\tcomposingRef.current = false;\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\trows={1}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tclassName=\"max-h-40 min-h-[40px] flex-1 resize-none border-0 bg-transparent p-2 shadow-none ring-0\"\n\t\t\t\t/>\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\tdisabled={!onCancel}\n\t\t\t\t\t\taria-label={cancelLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Square className=\"h-3.5 w-3.5 fill-current\" strokeWidth={0} />\n\t\t\t\t\t</Button>\n\t\t\t\t) : (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tdisabled={disabled || !value.trim()}\n\t\t\t\t\t\taria-label={sendLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ArrowUp className=\"h-4 w-4\" strokeWidth={2.25} />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</form>\n\t);\n}\n"],"mappings":";;;;;;;;AAmDA,
|
|
1
|
+
{"version":3,"file":"chat-composer.js","names":["ChatComposer","value","setValue","useState","ref","useRef","composingRef","resize","el","submit","text","disabled","streaming","onSend","cn","className","event","InputArea","label","Button","onCancel","cancelLabel","Square","sendLabel","ArrowUp"],"sources":["../../src/components/chat-composer.tsx"],"sourcesContent":["import { ArrowUp, Square } from \"lucide-react\";\nimport { type FormEvent, type KeyboardEvent, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\nimport { InputArea } from \"./input-area\";\n\nexport interface ChatComposerProps {\n\t/**\n\t * Disable the field and send.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Replace send with stop. When streaming is true, the stop button renders and triggers onCancel.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Field accessible name.\n\t * @default \"Message\"\n\t */\n\tlabel?: string;\n\t/**\n\t * Placeholder when empty.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Called with trimmed text on send. Operates on internal draft state and does not wait for a Promise (caller manages asynchronous errors).\n\t */\n\tonSend: (text: string) => void;\n\t/**\n\t * Called when the stop control is pressed while streaming is active.\n\t */\n\tonCancel?: () => void;\n\t/**\n\t * Send control accessible name.\n\t * @default \"Send message\"\n\t */\n\tsendLabel?: string;\n\t/**\n\t * Stop control accessible name.\n\t * @default \"Stop generating\"\n\t */\n\tcancelLabel?: string;\n\t/**\n\t * Optional class name applied to the form container.\n\t * Component manages internal draft/height state and does not forward native form rest attributes or ref.\n\t */\n\tclassName?: string;\n}\n\nexport function ChatComposer({\n\tdisabled = false,\n\tstreaming = false,\n\tlabel = \"Message\",\n\tplaceholder,\n\tonSend,\n\tonCancel,\n\tsendLabel = \"Send message\",\n\tcancelLabel = \"Stop generating\",\n\tclassName,\n}: ChatComposerProps) {\n\tconst [value, setValue] = useState(\"\");\n\tconst ref = useRef<HTMLTextAreaElement>(null);\n\tconst composingRef = useRef(false);\n\n\tconst resize = () => {\n\t\tconst el = ref.current;\n\t\tif (!el) {\n\t\t\treturn;\n\t\t}\n\t\tel.style.height = \"0px\";\n\t\tel.style.height = `${Math.min(el.scrollHeight, 160)}px`;\n\t};\n\n\tconst submit = () => {\n\t\tconst text = value.trim();\n\t\tif (!text || disabled || streaming) {\n\t\t\treturn;\n\t\t}\n\t\tonSend(text);\n\t\tsetValue(\"\");\n\t\trequestAnimationFrame(() => {\n\t\t\tresize();\n\t\t\tref.current?.focus();\n\t\t});\n\t};\n\n\tconst onSubmit = (event: FormEvent) => {\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\tconst onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n\t\tif (composingRef.current || event.nativeEvent.isComposing) {\n\t\t\treturn;\n\t\t}\n\t\tif (event.key !== \"Enter\" || event.shiftKey) {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\treturn (\n\t\t<form\n\t\t\tclassName={cn(\"border-t border-basalt-border/50 bg-basalt-card p-3\", className)}\n\t\t\tonSubmit={onSubmit}\n\t\t>\n\t\t\t<div className=\"flex items-end gap-2 rounded-2xl bg-basalt-secondary p-2 ring-1 ring-basalt-border/50\">\n\t\t\t\t<InputArea\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\tsetValue(event.target.value);\n\t\t\t\t\t\trequestAnimationFrame(resize);\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionStart={() => {\n\t\t\t\t\t\tcomposingRef.current = true;\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionEnd={() => {\n\t\t\t\t\t\tcomposingRef.current = false;\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\trows={1}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tclassName=\"max-h-40 min-h-[40px] flex-1 resize-none border-0 bg-transparent p-2 shadow-none ring-0\"\n\t\t\t\t/>\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\tdisabled={!onCancel}\n\t\t\t\t\t\taria-label={cancelLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Square className=\"h-3.5 w-3.5 fill-current\" strokeWidth={0} />\n\t\t\t\t\t</Button>\n\t\t\t\t) : (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tdisabled={disabled || !value.trim()}\n\t\t\t\t\t\taria-label={sendLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ArrowUp className=\"h-4 w-4\" strokeWidth={2.25} />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</form>\n\t);\n}\n"],"mappings":";;;;;;;;AAmDA,SAAgBA,EAAa,EAC5B,cAAW,IACX,eAAY,IACZ,WAAQ,WACR,gBACA,WACA,aACA,eAAY,gBACZ,iBAAc,mBACd,gBACqB;CACrB,IAAM,CAACC,GAAOC,KAAYC,EAAS,EAAE,GAC/BC,IAAMC,EAA4B,IAAI,GACtCC,IAAeD,EAAO,EAAK,GAE3BE,UAAe;EACpB,IAAMC,IAAKJ,EAAI;EACf,AAAKI,MAGL,EAAG,MAAM,SAAS,OAClB,EAAG,MAAM,SAAS,GAAG,KAAK,IAAIA,EAAG,cAAc,GAAG,EAAE;CACrD,GAEMC,UAAe;EACpB,IAAMC,IAAOT,EAAM,KAAK;EACxB,AAAI,CAACS,KAAQC,KAAYC,MAGzBC,EAAOH,CAAI,GACXR,EAAS,EAAE,GACX,4BAA4B;GAE3B,AADAK,EAAO,GACPH,EAAI,SAAS,MAAM;EACpB,CAAC;CACF;CAkBA,OACC,kBAAC,QAAD;EACC,WAAWU,EAAG,uDAAuDC,CAAS;EACpE,WAnBM,MAAqB;GAEtC,AADAC,EAAM,eAAe,GACrBP,EAAO;EACR;EAkBE,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAACQ,GAAD;IACM;IACE;IACP,WAAW,MAAU;KAEpB,AADAf,EAASc,EAAM,OAAO,KAAK,GAC3B,sBAAsBT,CAAM;IAC7B;IACA,0BAA0B;KACzB,EAAa,UAAU;IACxB;IACA,wBAAwB;KACvB,EAAa,UAAU;IACxB;IACW,YA9BI,MAA8C;KAChE,AAAID,EAAa,WAAWU,EAAM,YAAY,eAG1CA,EAAM,QAAQ,WAAWA,EAAM,aAGnCA,EAAM,eAAe,GACrBP,EAAO;IACR;IAsBI,MAAM;IACO;IACH;IACV,cAAYS;IACZ,WAAU;GACV,CAAA,GACAN,IACA,kBAACO,GAAD;IACC,MAAK;IACL,MAAK;IACL,SAAQ;IACR,SAASC;IACT,UAAU,CAACA;IACX,cAAYC;IAEZ,UAAA,kBAACC,GAAD;KAAQ,WAAU;KAA2B,aAAa;IAAI,CAAA;GACvD,CAAA,IAER,kBAACH,GAAD;IACC,MAAK;IACL,MAAK;IACL,UAAUR,KAAY,CAACV,EAAM,KAAK;IAClC,cAAYsB;IAEZ,UAAA,kBAACC,GAAD;KAAS,WAAU;KAAU,aAAa;IAAO,CAAA;GAC1C,CAAA,CAEL;;CACA,CAAA;AAER"}
|