npm - @viax.io/uxm - Versions diffs - 4.38.0 → 4.40.0 - Mend

@viax.io/uxm 4.38.0 → 4.40.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.

Files changed (1189) hide show

package/dist/studio/lib/registry/feedback.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/studio/lib/registry/feedback.ts"],"sourcesContent":["import type { ComponentDef } from '../types';\n\nexport const feedbackDefs: ComponentDef[] = [\n // ── Feedback ──\n {\n id: 'timeline-entry',\n name: 'Timeline Entry',\n category: 'Display',\n description: 'Single entry in a vertical history timeline — dot + connecting line + content card.',\n styleProperties: [\n { key: 'dotColor', label: 'Dot Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'colors' },\n { key: 'dotIdleColor', label: 'Idle Dot Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n { key: 'dotSize', label: 'Dot Size', control: 'number', defaultValue: 8, min: 4, max: 20, step: 1, unit: 'px' },\n { key: 'dotRingColor', label: 'Dot Ring', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n { key: 'lineColor', label: 'Line Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n { key: 'lineWidth', label: 'Line Width', control: 'number', defaultValue: 1, min: 1, max: 4, step: 1, unit: 'px' },\n { key: 'contentBg', label: 'Content Bg', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n { key: 'contentBorderColor', label: 'Content Border', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n { key: 'contentRadius', label: 'Content Radius', control: 'slider', defaultValue: 5, min: 0, max: 12, step: 1, unit: 'px' },\n { key: 'contentPadding', label: 'Content Padding', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'gap', label: 'Gap', control: 'number', defaultValue: 10, min: 4, max: 24, step: 2, unit: 'px' },\n { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px' },\n { key: 'titleColor', label: 'Title Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n { key: 'metaSize', label: 'Meta Size', control: 'number', defaultValue: 10.5, min: 9, max: 14, step: 0.5, unit: 'px' },\n { key: 'metaColor', label: 'Meta Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n ],\n layoutVariants: [\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'active', label: 'Active' },\n { value: 'past', label: 'Past' },\n ],\n defaultValue: 'active',\n },\n ],\n },\n {\n id: 'loader',\n name: 'Loader',\n category: 'Feedback',\n description: 'Small in-flight indicator — spinner, pulsing dots, or indeterminate bar — with an optional message.',\n styleProperties: [\n { key: 'size', label: 'Size', control: 'number', defaultValue: 24, min: 12, max: 64, step: 2, unit: 'px' },\n { key: 'color', label: 'Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'colors' },\n { key: 'trackColor', label: 'Track Color', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-accent-bold) 18%, transparent)', section: 'colors' },\n { key: 'speed', label: 'Speed (ms)', control: 'number', defaultValue: 800, min: 200, max: 2400, step: 50 },\n { key: 'barWidth', label: 'Bar Width', control: 'number', defaultValue: 200, min: 80, max: 480, step: 10, unit: 'px' },\n { key: 'message', label: 'Message', control: 'text', defaultValue: 'Loading…' },\n { key: 'messageInterval', label: 'Cycle (ms)', control: 'number', defaultValue: 2400, min: 600, max: 8000, step: 100 },\n { key: 'messageSize', label: 'Message Size', control: 'number', defaultValue: 13, min: 10, max: 18, step: 1, unit: 'px' },\n { key: 'messageColor', label: 'Message Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n { key: 'gap', label: 'Gap', control: 'number', defaultValue: 12, min: 4, max: 32, step: 2, unit: 'px' },\n ],\n layoutVariants: [\n {\n key: 'variant',\n label: 'Variant',\n options: [\n { value: 'spinner', label: 'Spinner' },\n { value: 'dots', label: 'Dots' },\n { value: 'bar', label: 'Bar' },\n ],\n defaultValue: 'spinner',\n },\n {\n key: 'layout',\n label: 'Layout',\n options: [\n { value: 'stacked', label: 'Stacked' },\n { value: 'inline', label: 'Inline' },\n ],\n defaultValue: 'stacked',\n },\n ],\n },\n {\n id: 'progress-bar',\n name: 'Progress Bar',\n category: 'Feedback',\n description:\n 'Determinate progress (0–100%) — the companion to Loader\\'s indeterminate spinner/dots/bar. Use for uploads, batch operations, and stepped flows where the share of work done is known; for \"something is happening, no ETA\" use Loader instead. Two variants share one Value knob: a linear track+fill and a circular ring (CSS conic-gradient, no SVG). Root is layout-only — all theming routes through `--uxm-progress-bar-` vars on inner elements, so saves need no PER_COMPONENT_MAPPING entry. The value drives the linear fill width and the ring sweep via the same var.',\n styleProperties: [\n // `value` is a preview proxy for what will be runtime/dynamic data — the\n // editor slider lets designers eyeball fill levels, but in production the\n // consumer drives it via the `value` prop (the saved\n // `--uxm-progress-bar-value` is always overridden inline). The numeric\n // percentage label is always shown (determinate by nature).\n { key: 'value', label: 'Value (%)', control: 'slider', defaultValue: 60, min: 0, max: 100, step: 1 },\n { key: 'fillColor', label: 'Fill Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'colors' },\n { key: 'trackColor', label: 'Track Color', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-accent-bold) 16%, transparent)', section: 'colors' },\n // ── Linear shape (showWhen variant=linear) ──\n { key: 'barHeight', label: 'Bar Height', control: 'number', defaultValue: 8, min: 2, max: 24, step: 1, unit: 'px', showWhen: { variant: 'linear' } },\n { key: 'barRadius', label: 'Bar Radius', control: 'slider', defaultValue: 999, min: 0, max: 999, step: 1, unit: 'px', showWhen: { variant: 'linear' } },\n // ── Ring shape (showWhen variant=ring) ──\n { key: 'ringSize', label: 'Ring Size', control: 'number', defaultValue: 72, min: 40, max: 160, step: 2, unit: 'px', showWhen: { variant: 'ring' } },\n { key: 'ringThickness', label: 'Ring Thickness', control: 'number', defaultValue: 8, min: 2, max: 28, step: 1, unit: 'px', showWhen: { variant: 'ring' } },\n // ── Value label — always rendered; its own section ──\n { key: 'valueColor', label: 'Value Color', control: 'color', defaultValue: 'var(--color-text)', section: 'value' },\n { key: 'valueSize', label: 'Value Size', control: 'number', defaultValue: 13, min: 10, max: 28, step: 1, unit: 'px', section: 'value' },\n // ── Caption + layout ──\n { key: 'label', label: 'Caption', control: 'text', defaultValue: 'Uploading…' },\n { key: 'labelColor', label: 'Caption Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n { key: 'labelSize', label: 'Caption Size', control: 'number', defaultValue: 13, min: 10, max: 18, step: 1, unit: 'px' },\n { key: 'stackGap', label: 'Gap', control: 'number', defaultValue: 8, min: 0, max: 24, step: 2, unit: 'px' },\n ],\n layoutVariants: [\n {\n key: 'variant',\n label: 'Variant',\n options: [\n { value: 'linear', label: 'Linear' },\n { value: 'ring', label: 'Ring' },\n ],\n defaultValue: 'linear',\n },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: 'ProgressBar',\n props: [\n { name: 'value', type: 'number', required: true, description: 'Completion 0–100. Clamped into range. In production the consumer drives this from real progress data.' },\n { name: 'variant', type: '\"linear\" \| \"ring\"', defaultValue: '\"linear\"', description: 'Linear track+fill or circular ring (CSS conic-gradient, no SVG). Both are determinate.' },\n { name: 'label', type: 'string', description: 'Optional caption — above the bar (linear) / below the ring (ring). Also becomes the accessible name.' },\n { name: 'valueText', type: 'string', description: 'Override the percentage text (defaults to `${Math.round(value)}%`).' },\n { name: '...rest', type: 'HTMLAttributes<HTMLDivElement>', description: 'Native attributes pass through to the root.' },\n ],\n },\n },\n {\n id: 'banner',\n name: 'Banner',\n category: 'Feedback',\n description: 'Persistent full-width strip rendered inline in page flow — stays until user dismisses or consumer removes. Use for system states and announcements (e.g. \"Maintenance at 02:00\", \"Q1 forecast beat target\"). For transient feedback (\"Saved\", \"Copied\") use Toast via `toast.()` instead. Color knobs are variant-scoped via `showWhen` (success / info / warning / error) — switching the variant picker swaps which 3 color knobs are visible, each defaulting to its own semantic palette. Shape knobs (radius / paddings / font) apply across all variants.',\n styleProperties: [\n // ── Success colors (showWhen: variant=success) ──\n { key: 'successBg', label: 'Background', control: 'color', defaultValue: 'var(--color-success-bg)', section: 'colors', showWhen: { variant: 'success' } },\n { key: 'successText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-success-text)', section: 'colors', showWhen: { variant: 'success' } },\n { key: 'successBorder', label: 'Border Color', control: 'color', defaultValue: 'var(--color-success-border)', section: 'colors', showWhen: { variant: 'success' } },\n // ── Info colors (showWhen: variant=info) ──\n { key: 'infoBg', label: 'Background', control: 'color', defaultValue: 'var(--color-info-bg)', section: 'colors', showWhen: { variant: 'info' } },\n { key: 'infoText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-info-text)', section: 'colors', showWhen: { variant: 'info' } },\n { key: 'infoBorder', label: 'Border Color', control: 'color', defaultValue: 'var(--color-info-border)', section: 'colors', showWhen: { variant: 'info' } },\n // ── Warning colors (showWhen: variant=warning) ──\n { key: 'warningBg', label: 'Background', control: 'color', defaultValue: 'var(--color-warning-bg)', section: 'colors', showWhen: { variant: 'warning' } },\n { key: 'warningText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-warning-text)', section: 'colors', showWhen: { variant: 'warning' } },\n { key: 'warningBorder', label: 'Border Color', control: 'color', defaultValue: 'var(--color-warning-border)', section: 'colors', showWhen: { variant: 'warning' } },\n // ── Error colors (showWhen: variant=error) — defaults reference the\n // `--color-danger-` token family (existing token naming) but the\n // variant key itself is `error` to match the BannerVariant union. ──\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-danger-bg)', section: 'colors', showWhen: { variant: 'error' } },\n { key: 'errorText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'colors', showWhen: { variant: 'error' } },\n { key: 'errorBorder', label: 'Border Color', control: 'color', defaultValue: 'var(--color-danger-border)', section: 'colors', showWhen: { variant: 'error' } },\n // ── Shape (variant-agnostic) ──\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 16, min: 8, max: 32, step: 4, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 12, min: 4, max: 24, step: 4, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n ],\n layoutVariants: [\n {\n key: 'variant',\n label: 'Variant',\n options: [\n { value: 'success', label: 'Success' },\n { value: 'info', label: 'Info' },\n { value: 'warning', label: 'Warning' },\n { value: 'error', label: 'Error' },\n ],\n defaultValue: 'success',\n },\n ],\n events: [\n { name: 'onDismiss', description: 'Fires when the user clicks the close affordance — only present if the Banner was rendered with one.', payload: 'void' },\n ],\n },\n {\n id: 'bulk-action-bar',\n name: 'Bulk Action Bar',\n category: 'Feedback',\n description: \"Floating toolbar that surfaces once rows are selected: \\\"{N} selected · actions · × clear\\\". Purely presentational — the consumer wires it to its own `selectedKeys` state and positions it (typically fixed/sticky near the bottom of a table view). Pairs with the DataTable's row selection. The `.uxm-bulk-action-bar` root IS the styled card surface (background / border / decomposed shadow); the per-part colours (action / danger / divider / clear ×) theme the inner buttons. Destructive actions get the danger treatment via `danger: true`.\",\n styleProperties: [\n // ── Bar surface (the floating card) ──\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'bar' },\n { key: 'color', label: 'Count Text', control: 'color', defaultValue: 'var(--color-text)', section: 'bar' },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'bar' },\n { key: 'borderRadius', label: 'Radius', control: 'slider', defaultValue: 12, min: 0, max: 24, step: 1, unit: 'px', section: 'bar' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 28, step: 2, unit: 'px', section: 'bar' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 8, min: 2, max: 20, step: 1, unit: 'px', section: 'bar' },\n { key: 'gap', label: 'Gap', control: 'number', defaultValue: 8, min: 0, max: 20, step: 1, unit: 'px', section: 'bar' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 18, step: 1, unit: 'px', section: 'bar' },\n\n // ── Drop shadow — decomposed into Color / Blur / Offset Y (same\n // pattern as the Menu / Calendar floating panels). Composed into\n // a single box-shadow in styles.css. Default lifts the bar off\n // the page (0 10px 28px rgba(0,0,0,0.16)). ──\n { key: 'shadowColor', label: 'Color', control: 'color', defaultValue: 'rgba(0, 0, 0, 0.16)', section: 'shadow' },\n { key: 'shadowBlur', label: 'Blur', control: 'slider', defaultValue: 28, min: 0, max: 60, step: 1, unit: 'px', section: 'shadow' },\n { key: 'shadowOffsetY', label: 'Offset Y', control: 'slider', defaultValue: 10, min: 0, max: 32, step: 1, unit: 'px', section: 'shadow' },\n\n // ── Action buttons (the plain commands) ──\n { key: 'actionColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'actions' },\n { key: 'actionHoverBg', label: 'Hover Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'actions' },\n { key: 'actionRadius', label: 'Radius', control: 'slider', defaultValue: 6, min: 0, max: 12, step: 1, unit: 'px', section: 'actions' },\n\n // ── Destructive action (Delete etc.) — danger text at rest, a\n // danger-tinted surface on hover. Reuses the danger token trio. ──\n { key: 'dangerColor', label: 'Text', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'danger' },\n { key: 'dangerHoverBg', label: 'Hover Background', control: 'color', defaultValue: 'var(--color-danger-bg)', section: 'danger' },\n\n // ── Divider ── (the clear × is the IconButton atom, themed there)\n { key: 'dividerColor', label: 'Divider', control: 'color', defaultValue: 'var(--color-border)', section: 'divider' },\n ],\n // No layout variants — the selection count is runtime data, not a\n // design knob, and the × clear is a behavioral prop (`onClear`), so the\n // preview just renders a representative count.\n layoutVariants: [],\n events: [\n { name: 'onClear', description: 'Fires when the user clicks the trailing × to clear the selection. Omit `onClear` to hide the ×.', payload: 'void' },\n { name: 'action.onClick', description: \"Per-action handler — fires when an action button is clicked. Wired via each entry's `onClick`.\", payload: 'void' },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: 'BulkActionBar',\n props: [\n { name: 'count', type: 'number', required: true, description: 'Number of selected items. Drives the default \"{n} selected\" label.' },\n { name: 'actions', type: 'BulkAction[]', description: 'Action buttons in display order. Each: { key, label, icon?, danger?, disabled?, onClick? }. Set `danger: true` for destructive actions (Delete/Remove).' },\n { name: 'onClear', type: '() => void', description: 'When provided, renders a trailing × that clears the selection.' },\n { name: 'countLabel', type: '(count: number) => ReactNode', description: 'Override the count label — e.g. for pluralisation or a different noun (\"3 rows\").' },\n { name: 'className', type: 'string', description: \"Extra classes appended after the atom's own `uxm-bulk-action-bar`.\" },\n { name: 'style', type: 'CSSProperties', description: 'Inline style — use for fixed/sticky positioning in the consuming layout.' },\n ],\n },\n },\n {\n id: 'toast',\n name: 'Toast',\n category: 'Feedback',\n description: 'Transient corner notification rendered inside the Toaster shell. Neutral elevated card surface (matches the active theme — white in light, raised-dark in dark) with a colored left-edge accent + colored icon communicating the variant. Fired imperatively via `toast.success(\"…\")`. Use for brief after-the-fact feedback (\"Saved\", \"Copied\"); for persistent status messages inline in the page, use Banner instead.',\n styleProperties: [\n // ── Neutral surface (variant-agnostic) ──\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n { key: 'color', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n // Default `transparent` — the shadow does the lift; outer border\n // is opt-in for designers who want a visible outline. The colored\n // left-edge accent is set per-variant and isn't affected by this.\n { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'transparent', section: 'colors' },\n // ── Per-variant icon color — only the active variant's knob is\n // visible at a time. The icon is the sole variant signal; no\n // stripe / pill / background tint. ──\n { key: 'successAccent', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-success-text)', section: 'colors', showWhen: { variant: 'success' } },\n { key: 'infoAccent', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-info-text)', section: 'colors', showWhen: { variant: 'info' } },\n { key: 'warningAccent', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-warning-text)', section: 'colors', showWhen: { variant: 'warning' } },\n // Error variant: default references the `--color-danger-` family\n // (existing brand-token naming). Save var name: `--uxm-toast-\n // error-accent`.\n { key: 'errorAccent', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'colors', showWhen: { variant: 'error' } },\n // ── Shape (variant-agnostic) ──\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 10, min: 0, max: 16, step: 1, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 16, min: 8, max: 24, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 12, min: 6, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 16, step: 1, unit: 'px' },\n { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 12, max: 24, step: 1, unit: 'px' },\n ],\n layoutVariants: [\n {\n key: 'variant',\n label: 'Variant',\n options: [\n { value: 'success', label: 'Success' },\n { value: 'info', label: 'Info' },\n { value: 'warning', label: 'Warning' },\n { value: 'error', label: 'Error' },\n ],\n defaultValue: 'success',\n },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: ['Toaster', 'toast'],\n props: [\n { name: 'toast.success(message, options?)', type: '(message: string, options?: { duration?: number, id?: string }) => string', description: 'Fire a success toast. Returns the toast id for manual dismissal via toast.dismiss(id).' },\n { name: 'toast.info(message, options?)', type: '(message: string, options?: ToastOptions) => string', description: 'Fire an info toast.' },\n { name: 'toast.warning(message, options?)', type: '(message: string, options?: ToastOptions) => string', description: 'Fire a warning toast.' },\n { name: 'toast.error(message, options?)', type: '(message: string, options?: ToastOptions) => string', description: 'Fire an error toast.' },\n { name: '<Toaster position max />', type: 'ToasterProps', description: \"Mount once at the app root. `position`: 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' \| 'top-center' \| 'bottom-center'. `max`: stack cap.\" },\n ],\n },\n events: [\n { name: 'onDismiss', description: 'Fires when the user clicks the close X or the auto-dismiss timer elapses.', payload: 'void' },\n ],\n },\n {\n id: 'tooltip',\n name: 'Tooltip',\n category: 'Feedback',\n description: 'Small popup tooltip for extra information.',\n styleProperties: [\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n { key: 'color', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'colors' },\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 6, min: 0, max: 16, step: 1, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 6, min: 2, max: 16, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px' },\n { key: 'showArrow', label: 'Show Arrow', control: 'toggle', defaultValue: true },\n ],\n layoutVariants: [],\n },\n];\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../src/studio/lib/registry/feedback.ts"],"sourcesContent":["import type { ComponentDef } from '../types';\n\nexport const feedbackDefs: ComponentDef[] = [\n // ── Feedback ──\n {\n id: 'timeline-entry',\n name: 'Timeline Entry',\n category: 'Display',\n description: 'Single entry in a vertical history timeline — dot + connecting line + content card.',\n styleProperties: [\n { key: 'dotColor', label: 'Dot Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'colors' },\n { key: 'dotIdleColor', label: 'Idle Dot Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n { key: 'dotSize', label: 'Dot Size', control: 'number', defaultValue: 8, min: 4, max: 20, step: 1, unit: 'px' },\n { key: 'dotRingColor', label: 'Dot Ring', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n { key: 'lineColor', label: 'Line Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n { key: 'lineWidth', label: 'Line Width', control: 'number', defaultValue: 1, min: 1, max: 4, step: 1, unit: 'px' },\n { key: 'contentBg', label: 'Content Bg', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n { key: 'contentBorderColor', label: 'Content Border', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n { key: 'contentRadius', label: 'Content Radius', control: 'slider', defaultValue: 5, min: 0, max: 12, step: 1, unit: 'px' },\n { key: 'contentPadding', label: 'Content Padding', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'gap', label: 'Gap', control: 'number', defaultValue: 10, min: 4, max: 24, step: 2, unit: 'px' },\n { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px' },\n { key: 'titleColor', label: 'Title Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n { key: 'metaSize', label: 'Meta Size', control: 'number', defaultValue: 10.5, min: 9, max: 14, step: 0.5, unit: 'px' },\n { key: 'metaColor', label: 'Meta Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n ],\n layoutVariants: [\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'active', label: 'Active' },\n { value: 'past', label: 'Past' },\n ],\n defaultValue: 'active',\n },\n ],\n },\n {\n id: 'loader',\n name: 'Loader',\n category: 'Feedback',\n description: 'Small in-flight indicator — spinner, pulsing dots, or indeterminate bar — with an optional message.',\n styleProperties: [\n { key: 'size', label: 'Size', control: 'number', defaultValue: 24, min: 12, max: 64, step: 2, unit: 'px' },\n { key: 'color', label: 'Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'colors' },\n { key: 'trackColor', label: 'Track Color', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-accent-bold) 18%, transparent)', section: 'colors' },\n { key: 'speed', label: 'Speed (ms)', control: 'number', defaultValue: 800, min: 200, max: 2400, step: 50 },\n { key: 'barWidth', label: 'Bar Width', control: 'number', defaultValue: 200, min: 80, max: 480, step: 10, unit: 'px' },\n { key: 'message', label: 'Message', control: 'text', defaultValue: 'Loading…' },\n { key: 'messageInterval', label: 'Cycle (ms)', control: 'number', defaultValue: 2400, min: 600, max: 8000, step: 100 },\n { key: 'messageSize', label: 'Message Size', control: 'number', defaultValue: 13, min: 10, max: 18, step: 1, unit: 'px' },\n { key: 'messageColor', label: 'Message Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n { key: 'gap', label: 'Gap', control: 'number', defaultValue: 12, min: 4, max: 32, step: 2, unit: 'px' },\n ],\n layoutVariants: [\n {\n key: 'variant',\n label: 'Variant',\n options: [\n { value: 'spinner', label: 'Spinner' },\n { value: 'dots', label: 'Dots' },\n { value: 'bar', label: 'Bar' },\n ],\n defaultValue: 'spinner',\n },\n {\n key: 'layout',\n label: 'Layout',\n options: [\n { value: 'stacked', label: 'Stacked' },\n { value: 'inline', label: 'Inline' },\n ],\n defaultValue: 'stacked',\n },\n ],\n },\n {\n id: 'progress-bar',\n name: 'Progress Bar',\n category: 'Feedback',\n description:\n 'Determinate progress (0–100%) — the companion to Loader\\'s indeterminate spinner/dots/bar. Use for uploads, batch operations, and stepped flows where the share of work done is known; for \"something is happening, no ETA\" use Loader instead. Two variants share one Value knob: a linear track+fill and a circular ring (CSS conic-gradient, no SVG). Root is layout-only — all theming routes through `--uxm-progress-bar-` vars on inner elements, so saves need no PER_COMPONENT_MAPPING entry. The value drives the linear fill width and the ring sweep via the same var.',\n styleProperties: [\n // `value` is a preview proxy for what will be runtime/dynamic data — the\n // editor slider lets designers eyeball fill levels, but in production the\n // consumer drives it via the `value` prop (the saved\n // `--uxm-progress-bar-value` is always overridden inline). The numeric\n // percentage label is always shown (determinate by nature).\n { key: 'value', label: 'Value (%)', control: 'slider', defaultValue: 60, min: 0, max: 100, step: 1 },\n { key: 'fillColor', label: 'Fill Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'colors' },\n { key: 'trackColor', label: 'Track Color', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-accent-bold) 16%, transparent)', section: 'colors' },\n // ── Linear shape (showWhen variant=linear) ──\n { key: 'barHeight', label: 'Bar Height', control: 'number', defaultValue: 8, min: 2, max: 24, step: 1, unit: 'px', showWhen: { variant: 'linear' } },\n { key: 'barRadius', label: 'Bar Radius', control: 'slider', defaultValue: 999, min: 0, max: 999, step: 1, unit: 'px', showWhen: { variant: 'linear' } },\n // ── Ring shape (showWhen variant=ring) ──\n { key: 'ringSize', label: 'Ring Size', control: 'number', defaultValue: 72, min: 40, max: 160, step: 2, unit: 'px', showWhen: { variant: 'ring' } },\n { key: 'ringThickness', label: 'Ring Thickness', control: 'number', defaultValue: 8, min: 2, max: 28, step: 1, unit: 'px', showWhen: { variant: 'ring' } },\n // ── Value label — always rendered; its own section ──\n { key: 'valueColor', label: 'Value Color', control: 'color', defaultValue: 'var(--color-text)', section: 'value' },\n { key: 'valueSize', label: 'Value Size', control: 'number', defaultValue: 13, min: 10, max: 28, step: 1, unit: 'px', section: 'value' },\n // ── Caption + layout ──\n { key: 'label', label: 'Caption', control: 'text', defaultValue: 'Uploading…' },\n { key: 'labelColor', label: 'Caption Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n { key: 'labelSize', label: 'Caption Size', control: 'number', defaultValue: 13, min: 10, max: 18, step: 1, unit: 'px' },\n { key: 'stackGap', label: 'Gap', control: 'number', defaultValue: 8, min: 0, max: 24, step: 2, unit: 'px' },\n ],\n layoutVariants: [\n {\n key: 'variant',\n label: 'Variant',\n options: [\n { value: 'linear', label: 'Linear' },\n { value: 'ring', label: 'Ring' },\n ],\n defaultValue: 'linear',\n },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: 'ProgressBar',\n props: [\n { name: 'value', type: 'number', required: true, description: 'Completion 0–100. Clamped into range. In production the consumer drives this from real progress data.' },\n { name: 'variant', type: '\"linear\" \| \"ring\"', defaultValue: '\"linear\"', description: 'Linear track+fill or circular ring (CSS conic-gradient, no SVG). Both are determinate.' },\n { name: 'label', type: 'string', description: 'Optional caption — above the bar (linear) / below the ring (ring). Also becomes the accessible name.' },\n { name: 'valueText', type: 'string', description: 'Override the percentage text (defaults to `${Math.round(value)}%`).' },\n { name: '...rest', type: 'HTMLAttributes<HTMLDivElement>', description: 'Native attributes pass through to the root.' },\n ],\n },\n },\n {\n id: 'banner',\n name: 'Banner',\n category: 'Feedback',\n description: 'Persistent full-width strip rendered inline in page flow — stays until user dismisses or consumer removes. Use for system states and announcements (e.g. \"Maintenance at 02:00\", \"Q1 forecast beat target\"). For transient feedback (\"Saved\", \"Copied\") use Toast via `toast.()` instead. Color knobs are variant-scoped via `showWhen` (success / info / warning / error) — switching the variant picker swaps which 3 color knobs are visible, each defaulting to its own semantic palette. Shape knobs (radius / paddings / font) apply across all variants.',\n styleProperties: [\n // ── Success colors (showWhen: variant=success) ──\n { key: 'successBg', label: 'Background', control: 'color', defaultValue: 'var(--color-success-bg)', section: 'colors', showWhen: { variant: 'success' } },\n { key: 'successText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-success-text)', section: 'colors', showWhen: { variant: 'success' } },\n { key: 'successBorder', label: 'Border Color', control: 'color', defaultValue: 'var(--color-success-border)', section: 'colors', showWhen: { variant: 'success' } },\n // ── Info colors (showWhen: variant=info) ──\n { key: 'infoBg', label: 'Background', control: 'color', defaultValue: 'var(--color-info-bg)', section: 'colors', showWhen: { variant: 'info' } },\n { key: 'infoText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-info-text)', section: 'colors', showWhen: { variant: 'info' } },\n { key: 'infoBorder', label: 'Border Color', control: 'color', defaultValue: 'var(--color-info-border)', section: 'colors', showWhen: { variant: 'info' } },\n // ── Warning colors (showWhen: variant=warning) ──\n { key: 'warningBg', label: 'Background', control: 'color', defaultValue: 'var(--color-warning-bg)', section: 'colors', showWhen: { variant: 'warning' } },\n { key: 'warningText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-warning-text)', section: 'colors', showWhen: { variant: 'warning' } },\n { key: 'warningBorder', label: 'Border Color', control: 'color', defaultValue: 'var(--color-warning-border)', section: 'colors', showWhen: { variant: 'warning' } },\n // ── Error colors (showWhen: variant=error) — defaults reference the\n // `--color-danger-` token family (existing token naming) but the\n // variant key itself is `error` to match the BannerVariant union. ──\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-danger-bg)', section: 'colors', showWhen: { variant: 'error' } },\n { key: 'errorText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'colors', showWhen: { variant: 'error' } },\n { key: 'errorBorder', label: 'Border Color', control: 'color', defaultValue: 'var(--color-danger-border)', section: 'colors', showWhen: { variant: 'error' } },\n // ── Shape (variant-agnostic) ──\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 16, min: 8, max: 32, step: 4, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 12, min: 4, max: 24, step: 4, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n ],\n layoutVariants: [\n {\n key: 'variant',\n label: 'Variant',\n options: [\n { value: 'success', label: 'Success' },\n { value: 'info', label: 'Info' },\n { value: 'warning', label: 'Warning' },\n { value: 'error', label: 'Error' },\n ],\n defaultValue: 'success',\n },\n ],\n events: [\n { name: 'onDismiss', description: 'Fires when the user clicks the close affordance — only present if the Banner was rendered with one.', payload: 'void' },\n ],\n },\n {\n id: 'bulk-action-bar',\n name: 'Bulk Action Bar',\n category: 'Feedback',\n description: \"Floating toolbar that surfaces once rows are selected: \\\"{N} selected · actions · × clear\\\". Purely presentational — the consumer wires it to its own `selectedKeys` state and positions it (typically fixed/sticky near the bottom of a table view). Pairs with the DataTable's row selection. The `.uxm-bulk-action-bar` root IS the styled card surface (background / border / decomposed shadow); the per-part colours (action / danger / divider / clear ×) theme the inner buttons. Destructive actions get the danger treatment via `danger: true`.\",\n styleProperties: [\n // ── Bar surface (the floating card) ──\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'bar' },\n { key: 'color', label: 'Count Text', control: 'color', defaultValue: 'var(--color-text)', section: 'bar' },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'bar' },\n { key: 'borderRadius', label: 'Radius', control: 'slider', defaultValue: 12, min: 0, max: 24, step: 1, unit: 'px', section: 'bar' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 28, step: 2, unit: 'px', section: 'bar' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 8, min: 2, max: 20, step: 1, unit: 'px', section: 'bar' },\n { key: 'gap', label: 'Gap', control: 'number', defaultValue: 8, min: 0, max: 20, step: 1, unit: 'px', section: 'bar' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 18, step: 1, unit: 'px', section: 'bar' },\n\n // ── Drop shadow — decomposed into Color / Blur / Offset Y (same\n // pattern as the Menu / Calendar floating panels). Composed into\n // a single box-shadow in styles.css. Default lifts the bar off\n // the page (0 10px 28px rgba(0,0,0,0.16)). ──\n { key: 'shadowColor', label: 'Color', control: 'color', defaultValue: 'rgba(0, 0, 0, 0.16)', section: 'shadow' },\n { key: 'shadowBlur', label: 'Blur', control: 'slider', defaultValue: 28, min: 0, max: 60, step: 1, unit: 'px', section: 'shadow' },\n { key: 'shadowOffsetY', label: 'Offset Y', control: 'slider', defaultValue: 10, min: 0, max: 32, step: 1, unit: 'px', section: 'shadow' },\n\n // ── Action buttons (the plain commands) ──\n { key: 'actionColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'actions' },\n { key: 'actionHoverBg', label: 'Hover Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'actions' },\n { key: 'actionRadius', label: 'Radius', control: 'slider', defaultValue: 6, min: 0, max: 12, step: 1, unit: 'px', section: 'actions' },\n\n // ── Destructive action (Delete etc.) — danger text at rest, a\n // danger-tinted surface on hover. Reuses the danger token trio. ──\n { key: 'dangerColor', label: 'Text', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'danger' },\n { key: 'dangerHoverBg', label: 'Hover Background', control: 'color', defaultValue: 'var(--color-danger-bg)', section: 'danger' },\n\n // ── Divider ── (the clear × is the IconButton atom, themed there)\n { key: 'dividerColor', label: 'Divider', control: 'color', defaultValue: 'var(--color-border)', section: 'divider' },\n ],\n // No layout variants — the selection count is runtime data, not a\n // design knob, and the × clear is a behavioral prop (`onClear`), so the\n // preview just renders a representative count.\n layoutVariants: [],\n events: [\n { name: 'onClear', description: 'Fires when the user clicks the trailing × to clear the selection. Omit `onClear` to hide the ×.', payload: 'void' },\n { name: 'action.onClick', description: \"Per-action handler — fires when an action button is clicked. Wired via each entry's `onClick`.\", payload: 'void' },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: 'BulkActionBar',\n props: [\n { name: 'count', type: 'number', required: true, description: 'Number of selected items. Drives the default \"{n} selected\" label.' },\n { name: 'actions', type: 'BulkAction[]', description: 'Action buttons in display order. Each: { key, label, icon?, danger?, disabled?, onClick? }. Set `danger: true` for destructive actions (Delete/Remove).' },\n { name: 'onClear', type: '() => void', description: 'When provided, renders a trailing × that clears the selection.' },\n { name: 'countLabel', type: '(count: number) => ReactNode', description: 'Override the count label — e.g. for pluralisation or a different noun (\"3 rows\").' },\n { name: 'className', type: 'string', description: \"Extra classes appended after the atom's own `uxm-bulk-action-bar`.\" },\n { name: 'style', type: 'CSSProperties', description: 'Inline style — use for fixed/sticky positioning in the consuming layout.' },\n ],\n },\n },\n {\n id: 'toast',\n name: 'Toast',\n category: 'Feedback',\n description: 'Transient corner notification rendered inside the Toaster shell. Neutral elevated card surface (matches the active theme — white in light, raised-dark in dark) with a colored left-edge accent + colored icon communicating the variant. Fired imperatively via `toast.success(\"…\")`. Use for brief after-the-fact feedback (\"Saved\", \"Copied\"); for persistent status messages inline in the page, use Banner instead.',\n styleProperties: [\n // ── Neutral surface (variant-agnostic) ──\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n { key: 'color', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n // Default `transparent` — the shadow does the lift; outer border\n // is opt-in for designers who want a visible outline. The colored\n // left-edge accent is set per-variant and isn't affected by this.\n { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'transparent', section: 'colors' },\n // ── Per-variant icon color — only the active variant's knob is\n // visible at a time. The icon is the sole variant signal; no\n // stripe / pill / background tint. ──\n { key: 'successAccent', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-success-text)', section: 'colors', showWhen: { variant: 'success' } },\n { key: 'infoAccent', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-info-text)', section: 'colors', showWhen: { variant: 'info' } },\n { key: 'warningAccent', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-warning-text)', section: 'colors', showWhen: { variant: 'warning' } },\n // Error variant: default references the `--color-danger-` family\n // (existing brand-token naming). Save var name: `--uxm-toast-\n // error-accent`.\n { key: 'errorAccent', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'colors', showWhen: { variant: 'error' } },\n // ── Shape (variant-agnostic) ──\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 10, min: 0, max: 16, step: 1, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 16, min: 8, max: 24, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 12, min: 6, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 16, step: 1, unit: 'px' },\n { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 12, max: 24, step: 1, unit: 'px' },\n ],\n layoutVariants: [\n {\n key: 'variant',\n label: 'Variant',\n options: [\n { value: 'success', label: 'Success' },\n { value: 'info', label: 'Info' },\n { value: 'warning', label: 'Warning' },\n { value: 'error', label: 'Error' },\n ],\n defaultValue: 'success',\n },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: ['Toaster', 'toast'],\n props: [\n { name: 'toast.success(message, options?)', type: '(message: string, options?: { duration?: number, id?: string }) => string', description: 'Fire a success toast. Returns the toast id for manual dismissal via toast.dismiss(id).' },\n { name: 'toast.info(message, options?)', type: '(message: string, options?: ToastOptions) => string', description: 'Fire an info toast.' },\n { name: 'toast.warning(message, options?)', type: '(message: string, options?: ToastOptions) => string', description: 'Fire a warning toast.' },\n { name: 'toast.error(message, options?)', type: '(message: string, options?: ToastOptions) => string', description: 'Fire an error toast.' },\n { name: '<Toaster position max />', type: 'ToasterProps', description: \"Mount once at the app root. `position`: 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' \| 'top-center' \| 'bottom-center'. `max`: stack cap.\" },\n ],\n },\n events: [\n { name: 'onDismiss', description: 'Fires when the user clicks the close X or the auto-dismiss timer elapses.', payload: 'void' },\n ],\n },\n {\n id: 'tooltip',\n name: 'Tooltip',\n category: 'Feedback',\n description: 'Small popup tooltip for extra information.',\n styleProperties: [\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n { key: 'color', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'colors' },\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 6, min: 0, max: 16, step: 1, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 6, min: 2, max: 16, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px' },\n { key: 'showArrow', label: 'Show Arrow', control: 'toggle', defaultValue: true },\n ],\n layoutVariants: [],\n },\n];\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/icons.cjs CHANGED Viewed

@@ -47,26 +47,47 @@ const iconsDefs = [
     id: "icon-button",
     name: "Icon Button",
     category: "Buttons",
-    description: "Utility icon-only button used inside other components (close, edit, delete, kebab, etc.). Full state coverage parity with the rest of the button family.",
+    description: "Icon-only button. `ghost` (default) is the utility button used inside other components (close, edit, delete, kebab); `filled` is the standalone action (add, create) that replaces the deprecated Button \u2014 Icon atom. Full state coverage parity with the rest of the button family.",
     styleProperties: [
       // State-scoped colors — Tag-style filter via showWhen.
-      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "default" } },
-      { key: "color", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
-      { key: "hoverBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { state: "hover" } },
-      { key: "hoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
-      { key: "activeBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { state: "active" } },
-      { key: "activeColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { variant: "ghost", state: "default" } },
+      { key: "color", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { variant: "ghost", state: "default" } },
+      { key: "hoverBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { variant: "ghost", state: "hover" } },
+      { key: "hoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "ghost", state: "hover" } },
+      { key: "activeBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { variant: "ghost", state: "active" } },
+      { key: "activeColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "ghost", state: "active" } },
       { key: "focusRingColor", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "focus" } },
       { key: "focusColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
       { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: "states", showWhen: { state: "disabled" } },
       { key: "disabledColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
       // Shared style
-      { key: "size", label: "Button Size", control: "number", defaultValue: 32, min: 20, max: 48, step: 2, unit: "px" },
-      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 10, max: 28, step: 1, unit: "px" },
-      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
-      { key: "strokeWidth", label: "Stroke Width", control: "slider", defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: "px" }
+      { key: "size", label: "Button Size", control: "number", defaultValue: 32, min: 20, max: 48, step: 2, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 10, max: 28, step: 1, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "strokeWidth", label: "Stroke Width", control: "slider", defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: "px" },
+      // `filled` variant — its own var set (`--uxm-icon-button-filled-*`), so a
+      // saved ghost theme never leaks into the filled look. Defaults are the
+      // deprecated ButtonIcon's, which this variant replaces.
+      { key: "filledBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { variant: "filled", state: "default" } },
+      { key: "filledColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "filled", state: "default" } },
+      { key: "filledHoverBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "states", showWhen: { variant: "filled", state: "hover" } },
+      { key: "filledHoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "filled", state: "hover" } },
+      { key: "filledActiveBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { variant: "filled", state: "active" } },
+      { key: "filledActiveColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "states", showWhen: { variant: "filled", state: "active" } },
+      { key: "filledSize", label: "Button Size", control: "number", defaultValue: 40, min: 24, max: 64, step: 4, unit: "px", showWhen: { variant: "filled" } },
+      { key: "filledIconSize", label: "Icon Size", control: "number", defaultValue: 18, min: 10, max: 28, step: 1, unit: "px", showWhen: { variant: "filled" } },
+      { key: "filledRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px", showWhen: { variant: "filled" } }
     ],
     layoutVariants: [
+      {
+        key: "variant",
+        label: "Variant",
+        options: [
+          { value: "ghost", label: "Ghost" },
+          { value: "filled", label: "Filled" }
+        ],
+        defaultValue: "ghost"
+      },
       {
         key: "glyph",
         label: "Glyph",

package/dist/studio/lib/registry/icons.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/studio/lib/registry/icons.ts"],"sourcesContent":["import { ICON_OPTIONS } from '@/ui';\n\nimport type { ComponentDef } from '../types';\n\nexport const iconsDefs: ComponentDef[] = [\n // ── Icons ──\n {\n id: 'icon',\n name: 'Icon',\n category: 'Icons',\n description: 'Decorative line icon. Browse the full modo icon set as a searchable, labelled grid — each cell shows the glyph above the `id` you pass to `glyph=`. The size / stroke / colour knobs tune every icon at once.',\n // Gallery preview: fill the canvas width (flexible column count) and top-\n // align so the grid filters in place — nothing re-centres as the result\n // count changes.\n canvasFill: true,\n styleProperties: [\n { key: 'color', label: 'Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 10, max: 48, step: 1, unit: 'px' },\n { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.5, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n ],\n // No glyph picker: the preview renders the entire ICONS set as a grid, so\n // there's no single glyph to choose. (The icon-button entry below keeps its\n // glyph variant — it previews one button.)\n layoutVariants: [],\n },\n {\n id: 'icon-button',\n name: 'Icon Button',\n category: 'Buttons',\n description: 'Utility icon-only button used inside other components (close, edit, delete, kebab, etc.). Full state coverage parity with the rest of the button family.',\n styleProperties: [\n // State-scoped colors — Tag-style filter via showWhen.\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { state: 'default' } },\n { key: 'color', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'default' } },\n { key: 'hoverBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { state: 'hover' } },\n { key: 'hoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n { key: 'activeBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'states', showWhen: { state: 'active' } },\n { key: 'activeColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'active' } },\n { key: 'focusRingColor', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'focus' } },\n { key: 'focusColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: 'states', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n // Shared style\n { key: 'size', label: 'Button Size', control: 'number', defaultValue: 32, min: 20, max: 48, step: 2, unit: 'px' },\n { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 10, max: 28, step: 1, unit: 'px' },\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n ],\n layoutVariants: [\n {\n key: 'glyph',\n label: 'Glyph',\n options: ICON_OPTIONS,\n defaultValue: 'close',\n },\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'default', label: 'Default' },\n { value: 'hover', label: 'Hover' },\n { value: 'active', label: 'Pressed' },\n { value: 'focus', label: 'Focus' },\n { value: 'disabled', label: 'Disabled' },\n ],\n defaultValue: 'default',\n },\n ],\n events: [\n { name: 'onClick', description: 'Fires on mouse click or Enter/Space activation while focused.', payload: 'MouseEvent<HTMLButtonElement>' },\n { name: 'onFocus', description: 'Fires when the button receives keyboard focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when the button loses keyboard focus.', payload: 'FocusEvent' },\n ],\n },\n];\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../src/studio/lib/registry/icons.ts"],"sourcesContent":["import { ICON_OPTIONS } from '@/ui';\n\nimport type { ComponentDef } from '../types';\n\nexport const iconsDefs: ComponentDef[] = [\n // ── Icons ──\n {\n id: 'icon',\n name: 'Icon',\n category: 'Icons',\n description: 'Decorative line icon. Browse the full modo icon set as a searchable, labelled grid — each cell shows the glyph above the `id` you pass to `glyph=`. The size / stroke / colour knobs tune every icon at once.',\n // Gallery preview: fill the canvas width (flexible column count) and top-\n // align so the grid filters in place — nothing re-centres as the result\n // count changes.\n canvasFill: true,\n styleProperties: [\n { key: 'color', label: 'Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 10, max: 48, step: 1, unit: 'px' },\n { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.5, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n ],\n // No glyph picker: the preview renders the entire ICONS set as a grid, so\n // there's no single glyph to choose. (The icon-button entry below keeps its\n // glyph variant — it previews one button.)\n layoutVariants: [],\n },\n {\n id: 'icon-button',\n name: 'Icon Button',\n category: 'Buttons',\n description: 'Icon-only button. `ghost` (default) is the utility button used inside other components (close, edit, delete, kebab); `filled` is the standalone action (add, create) that replaces the deprecated Button — Icon atom. Full state coverage parity with the rest of the button family.',\n styleProperties: [\n // State-scoped colors — Tag-style filter via showWhen.\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { variant: 'ghost', state: 'default' } },\n { key: 'color', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { variant: 'ghost', state: 'default' } },\n { key: 'hoverBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { variant: 'ghost', state: 'hover' } },\n { key: 'hoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'ghost', state: 'hover' } },\n { key: 'activeBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'states', showWhen: { variant: 'ghost', state: 'active' } },\n { key: 'activeColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'ghost', state: 'active' } },\n { key: 'focusRingColor', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'focus' } },\n { key: 'focusColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: 'states', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n // Shared style\n { key: 'size', label: 'Button Size', control: 'number', defaultValue: 32, min: 20, max: 48, step: 2, unit: 'px', showWhen: { variant: 'ghost' } },\n { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 10, max: 28, step: 1, unit: 'px', showWhen: { variant: 'ghost' } },\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', showWhen: { variant: 'ghost' } },\n { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n // `filled` variant — its own var set (`--uxm-icon-button-filled-*`), so a\n // saved ghost theme never leaks into the filled look. Defaults are the\n // deprecated ButtonIcon's, which this variant replaces.\n { key: 'filledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { variant: 'filled', state: 'default' } },\n { key: 'filledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'filled', state: 'default' } },\n { key: 'filledHoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'states', showWhen: { variant: 'filled', state: 'hover' } },\n { key: 'filledHoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'filled', state: 'hover' } },\n { key: 'filledActiveBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { variant: 'filled', state: 'active' } },\n { key: 'filledActiveColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'states', showWhen: { variant: 'filled', state: 'active' } },\n { key: 'filledSize', label: 'Button Size', control: 'number', defaultValue: 40, min: 24, max: 64, step: 4, unit: 'px', showWhen: { variant: 'filled' } },\n { key: 'filledIconSize', label: 'Icon Size', control: 'number', defaultValue: 18, min: 10, max: 28, step: 1, unit: 'px', showWhen: { variant: 'filled' } },\n { key: 'filledRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', showWhen: { variant: 'filled' } },\n ],\n layoutVariants: [\n {\n key: 'variant',\n label: 'Variant',\n options: [\n { value: 'ghost', label: 'Ghost' },\n { value: 'filled', label: 'Filled' },\n ],\n defaultValue: 'ghost',\n },\n {\n key: 'glyph',\n label: 'Glyph',\n options: ICON_OPTIONS,\n defaultValue: 'close',\n },\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'default', label: 'Default' },\n { value: 'hover', label: 'Hover' },\n { value: 'active', label: 'Pressed' },\n { value: 'focus', label: 'Focus' },\n { value: 'disabled', label: 'Disabled' },\n ],\n defaultValue: 'default',\n },\n ],\n events: [\n { name: 'onClick', description: 'Fires on mouse click or Enter/Space activation while focused.', payload: 'MouseEvent<HTMLButtonElement>' },\n { name: 'onFocus', description: 'Fires when the button receives keyboard focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when the button loses keyboard focus.', payload: 'FocusEvent' },\n ],\n },\n];\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/icons.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/studio/lib/registry/icons.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,SAAS,EAAE,YAAY,~~EAsEnC~~,CAAC"}
1	+ {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/studio/lib/registry/icons.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,SAAS,EAAE,YAAY,EA2FnC,CAAC"}

package/dist/studio/lib/registry/icons.js CHANGED Viewed

@@ -24,26 +24,47 @@ const iconsDefs = [
     id: "icon-button",
     name: "Icon Button",
     category: "Buttons",
-    description: "Utility icon-only button used inside other components (close, edit, delete, kebab, etc.). Full state coverage parity with the rest of the button family.",
+    description: "Icon-only button. `ghost` (default) is the utility button used inside other components (close, edit, delete, kebab); `filled` is the standalone action (add, create) that replaces the deprecated Button \u2014 Icon atom. Full state coverage parity with the rest of the button family.",
     styleProperties: [
       // State-scoped colors — Tag-style filter via showWhen.
-      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "default" } },
-      { key: "color", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
-      { key: "hoverBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { state: "hover" } },
-      { key: "hoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
-      { key: "activeBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { state: "active" } },
-      { key: "activeColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { variant: "ghost", state: "default" } },
+      { key: "color", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { variant: "ghost", state: "default" } },
+      { key: "hoverBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { variant: "ghost", state: "hover" } },
+      { key: "hoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "ghost", state: "hover" } },
+      { key: "activeBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { variant: "ghost", state: "active" } },
+      { key: "activeColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "ghost", state: "active" } },
       { key: "focusRingColor", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "focus" } },
       { key: "focusColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
       { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: "states", showWhen: { state: "disabled" } },
       { key: "disabledColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
       // Shared style
-      { key: "size", label: "Button Size", control: "number", defaultValue: 32, min: 20, max: 48, step: 2, unit: "px" },
-      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 10, max: 28, step: 1, unit: "px" },
-      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
-      { key: "strokeWidth", label: "Stroke Width", control: "slider", defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: "px" }
+      { key: "size", label: "Button Size", control: "number", defaultValue: 32, min: 20, max: 48, step: 2, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 10, max: 28, step: 1, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "strokeWidth", label: "Stroke Width", control: "slider", defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: "px" },
+      // `filled` variant — its own var set (`--uxm-icon-button-filled-*`), so a
+      // saved ghost theme never leaks into the filled look. Defaults are the
+      // deprecated ButtonIcon's, which this variant replaces.
+      { key: "filledBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { variant: "filled", state: "default" } },
+      { key: "filledColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "filled", state: "default" } },
+      { key: "filledHoverBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "states", showWhen: { variant: "filled", state: "hover" } },
+      { key: "filledHoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "filled", state: "hover" } },
+      { key: "filledActiveBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { variant: "filled", state: "active" } },
+      { key: "filledActiveColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "states", showWhen: { variant: "filled", state: "active" } },
+      { key: "filledSize", label: "Button Size", control: "number", defaultValue: 40, min: 24, max: 64, step: 4, unit: "px", showWhen: { variant: "filled" } },
+      { key: "filledIconSize", label: "Icon Size", control: "number", defaultValue: 18, min: 10, max: 28, step: 1, unit: "px", showWhen: { variant: "filled" } },
+      { key: "filledRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px", showWhen: { variant: "filled" } }
     ],
     layoutVariants: [
+      {
+        key: "variant",
+        label: "Variant",
+        options: [
+          { value: "ghost", label: "Ghost" },
+          { value: "filled", label: "Filled" }
+        ],
+        defaultValue: "ghost"
+      },
       {
         key: "glyph",
         label: "Glyph",

package/dist/studio/lib/registry/icons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/studio/lib/registry/icons.ts"],"sourcesContent":["import { ICON_OPTIONS } from '@/ui';\n\nimport type { ComponentDef } from '../types';\n\nexport const iconsDefs: ComponentDef[] = [\n // ── Icons ──\n {\n id: 'icon',\n name: 'Icon',\n category: 'Icons',\n description: 'Decorative line icon. Browse the full modo icon set as a searchable, labelled grid — each cell shows the glyph above the `id` you pass to `glyph=`. The size / stroke / colour knobs tune every icon at once.',\n // Gallery preview: fill the canvas width (flexible column count) and top-\n // align so the grid filters in place — nothing re-centres as the result\n // count changes.\n canvasFill: true,\n styleProperties: [\n { key: 'color', label: 'Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 10, max: 48, step: 1, unit: 'px' },\n { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.5, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n ],\n // No glyph picker: the preview renders the entire ICONS set as a grid, so\n // there's no single glyph to choose. (The icon-button entry below keeps its\n // glyph variant — it previews one button.)\n layoutVariants: [],\n },\n {\n id: 'icon-button',\n name: 'Icon Button',\n category: 'Buttons',\n description: 'Utility icon-only button used inside other components (close, edit, delete, kebab, etc.). Full state coverage parity with the rest of the button family.',\n styleProperties: [\n // State-scoped colors — Tag-style filter via showWhen.\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { state: 'default' } },\n { key: 'color', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'default' } },\n { key: 'hoverBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { state: 'hover' } },\n { key: 'hoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n { key: 'activeBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'states', showWhen: { state: 'active' } },\n { key: 'activeColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'active' } },\n { key: 'focusRingColor', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'focus' } },\n { key: 'focusColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: 'states', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n // Shared style\n { key: 'size', label: 'Button Size', control: 'number', defaultValue: 32, min: 20, max: 48, step: 2, unit: 'px' },\n { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 10, max: 28, step: 1, unit: 'px' },\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n ],\n layoutVariants: [\n {\n key: 'glyph',\n label: 'Glyph',\n options: ICON_OPTIONS,\n defaultValue: 'close',\n },\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'default', label: 'Default' },\n { value: 'hover', label: 'Hover' },\n { value: 'active', label: 'Pressed' },\n { value: 'focus', label: 'Focus' },\n { value: 'disabled', label: 'Disabled' },\n ],\n defaultValue: 'default',\n },\n ],\n events: [\n { name: 'onClick', description: 'Fires on mouse click or Enter/Space activation while focused.', payload: 'MouseEvent<HTMLButtonElement>' },\n { name: 'onFocus', description: 'Fires when the button receives keyboard focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when the button loses keyboard focus.', payload: 'FocusEvent' },\n ],\n },\n];\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../src/studio/lib/registry/icons.ts"],"sourcesContent":["import { ICON_OPTIONS } from '@/ui';\n\nimport type { ComponentDef } from '../types';\n\nexport const iconsDefs: ComponentDef[] = [\n // ── Icons ──\n {\n id: 'icon',\n name: 'Icon',\n category: 'Icons',\n description: 'Decorative line icon. Browse the full modo icon set as a searchable, labelled grid — each cell shows the glyph above the `id` you pass to `glyph=`. The size / stroke / colour knobs tune every icon at once.',\n // Gallery preview: fill the canvas width (flexible column count) and top-\n // align so the grid filters in place — nothing re-centres as the result\n // count changes.\n canvasFill: true,\n styleProperties: [\n { key: 'color', label: 'Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 10, max: 48, step: 1, unit: 'px' },\n { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.5, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n ],\n // No glyph picker: the preview renders the entire ICONS set as a grid, so\n // there's no single glyph to choose. (The icon-button entry below keeps its\n // glyph variant — it previews one button.)\n layoutVariants: [],\n },\n {\n id: 'icon-button',\n name: 'Icon Button',\n category: 'Buttons',\n description: 'Icon-only button. `ghost` (default) is the utility button used inside other components (close, edit, delete, kebab); `filled` is the standalone action (add, create) that replaces the deprecated Button — Icon atom. Full state coverage parity with the rest of the button family.',\n styleProperties: [\n // State-scoped colors — Tag-style filter via showWhen.\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { variant: 'ghost', state: 'default' } },\n { key: 'color', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { variant: 'ghost', state: 'default' } },\n { key: 'hoverBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { variant: 'ghost', state: 'hover' } },\n { key: 'hoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'ghost', state: 'hover' } },\n { key: 'activeBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'states', showWhen: { variant: 'ghost', state: 'active' } },\n { key: 'activeColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'ghost', state: 'active' } },\n { key: 'focusRingColor', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'focus' } },\n { key: 'focusColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: 'states', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n // Shared style\n { key: 'size', label: 'Button Size', control: 'number', defaultValue: 32, min: 20, max: 48, step: 2, unit: 'px', showWhen: { variant: 'ghost' } },\n { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 10, max: 28, step: 1, unit: 'px', showWhen: { variant: 'ghost' } },\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', showWhen: { variant: 'ghost' } },\n { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n // `filled` variant — its own var set (`--uxm-icon-button-filled-*`), so a\n // saved ghost theme never leaks into the filled look. Defaults are the\n // deprecated ButtonIcon's, which this variant replaces.\n { key: 'filledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { variant: 'filled', state: 'default' } },\n { key: 'filledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'filled', state: 'default' } },\n { key: 'filledHoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'states', showWhen: { variant: 'filled', state: 'hover' } },\n { key: 'filledHoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'filled', state: 'hover' } },\n { key: 'filledActiveBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { variant: 'filled', state: 'active' } },\n { key: 'filledActiveColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'states', showWhen: { variant: 'filled', state: 'active' } },\n { key: 'filledSize', label: 'Button Size', control: 'number', defaultValue: 40, min: 24, max: 64, step: 4, unit: 'px', showWhen: { variant: 'filled' } },\n { key: 'filledIconSize', label: 'Icon Size', control: 'number', defaultValue: 18, min: 10, max: 28, step: 1, unit: 'px', showWhen: { variant: 'filled' } },\n { key: 'filledRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', showWhen: { variant: 'filled' } },\n ],\n layoutVariants: [\n {\n key: 'variant',\n label: 'Variant',\n options: [\n { value: 'ghost', label: 'Ghost' },\n { value: 'filled', label: 'Filled' },\n ],\n defaultValue: 'ghost',\n },\n {\n key: 'glyph',\n label: 'Glyph',\n options: ICON_OPTIONS,\n defaultValue: 'close',\n },\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'default', label: 'Default' },\n { value: 'hover', label: 'Hover' },\n { value: 'active', label: 'Pressed' },\n { value: 'focus', label: 'Focus' },\n { value: 'disabled', label: 'Disabled' },\n ],\n defaultValue: 'default',\n },\n ],\n events: [\n { name: 'onClick', description: 'Fires on mouse click or Enter/Space activation while focused.', payload: 'MouseEvent<HTMLButtonElement>' },\n { name: 'onFocus', description: 'Fires when the button receives keyboard focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when the button loses keyboard focus.', payload: 'FocusEvent' },\n ],\n },\n];\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/index.cjs CHANGED Viewed

@@ -27,14 +27,14 @@ __export(registry_exports, {
 module.exports = __toCommonJS(registry_exports);
 var import_app = require("./app.cjs");
 var import_buttons = require("./buttons.cjs");
-var import_composite = require("./composite.cjs");
+var import_composite = require("./composite/index.cjs");
 var import_configuration = require("./configuration.cjs");
 var import_diagram = require("./diagram.cjs");
 var import_display = require("./display.cjs");
 var import_feedback = require("./feedback.cjs");
 var import_forms = require("./forms.cjs");
 var import_icons = require("./icons.cjs");
-var import_inputs = require("./inputs.cjs");
+var import_inputs = require("./inputs/index.cjs");
 var import_layout = require("./layout.cjs");
 const categories = ["App", "Buttons", "Inputs", "Display", "Feedback", "Forms", "Composite", "Configuration", "Layout", "Diagram", "Icons"];
 const categoryColors = {

package/dist/studio/lib/registry/index.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { appDefs } from "./app.js";
 import { buttonsDefs } from "./buttons.js";
-import { compositeDefs } from "./composite.js";
+import { compositeDefs } from "./composite/index.js";
 import { configurationDefs } from "./configuration.js";
 import { diagramDefs } from "./diagram.js";
 import { displayDefs } from "./display.js";
 import { feedbackDefs } from "./feedback.js";
 import { formsDefs } from "./forms.js";
 import { iconsDefs } from "./icons.js";
-import { inputsDefs } from "./inputs.js";
+import { inputsDefs } from "./inputs/index.js";
 import { layoutDefs } from "./layout.js";
 const categories = ["App", "Buttons", "Inputs", "Display", "Feedback", "Forms", "Composite", "Configuration", "Layout", "Diagram", "Icons"];
 const categoryColors = {

package/dist/studio/lib/registry/inputs/checkbox.cjs ADDED Viewed

@@ -0,0 +1,84 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkbox_exports = {};
+__export(checkbox_exports, {
+  checkboxDef: () => checkboxDef
+});
+module.exports = __toCommonJS(checkbox_exports);
+const checkboxDef = {
+  id: "checkbox",
+  name: "Checkbox",
+  category: "Inputs",
+  description: "Checkbox input with label. State knobs cover unchecked \xD7 checked across default / hover / focus, plus a shared disabled opacity.",
+  styleProperties: [
+    // Default — unchecked
+    { key: "uncheckedBg", label: "Background", control: "color", defaultValue: "transparent", section: "uncheckedColors", showWhen: { state: "default" } },
+    { key: "uncheckedBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "uncheckedColors", showWhen: { state: "default" } },
+    // Default — checked
+    { key: "checkedBg", label: "Background", control: "color", defaultValue: "var(--color-accent)", section: "checkedColors", showWhen: { state: "default" } },
+    { key: "checkedBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "checkedColors", showWhen: { state: "default" } },
+    { key: "checkGlyphColor", label: "Check Glyph", control: "color", defaultValue: "var(--color-text-inverse)", section: "checkedColors", showWhen: { state: "default" } },
+    // Hover — unchecked
+    { key: "hoverUncheckedBg", label: "Background", control: "color", defaultValue: "transparent", section: "uncheckedColors", showWhen: { state: "hover" } },
+    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)
+    { key: "hoverUncheckedBorder", label: "Border", control: "color", defaultValue: "var(--color-text-strong)", section: "uncheckedColors", showWhen: { state: "hover" } },
+    // Hover — checked
+    { key: "hoverCheckedBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "checkedColors", showWhen: { state: "hover" } },
+    { key: "hoverCheckedBorder", label: "Border", control: "color", defaultValue: "var(--color-accent-bold)", section: "checkedColors", showWhen: { state: "hover" } },
+    { key: "hoverCheckGlyphColor", label: "Check Glyph", control: "color", defaultValue: "var(--color-text-inverse)", section: "checkedColors", showWhen: { state: "hover" } },
+    // Focus — single shared ring color (outline applies the same to
+    // checked and unchecked; splitting it into two knobs was overkill).
+    { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled — single shared opacity (no per-mode colors)
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Shared — always visible
+    { key: "size", label: "Size", control: "number", defaultValue: 20, min: 14, max: 32, step: 2, unit: "px" },
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 4, min: 0, max: 12, step: 1, unit: "px" },
+    { key: "gap", label: "Label Gap", control: "number", defaultValue: 10, min: 4, max: 20, step: 2, unit: "px" },
+    // Error — the box + label stay neutral; the message below is the sole
+    // signal (errorColor colors it, errorMessageSize sizes it). Shared keys
+    // with the input family so the editor's "Match in N" sync applies.
+    { key: "errorColor", label: "Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } }
+  ],
+  layoutVariants: [
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" },
+        { value: "error", label: "Error" }
+      ],
+      defaultValue: "default"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the user toggles the checked state via click or Space.", payload: "{ checked: boolean }" },
+    { name: "onFocus", description: "Fires when the checkbox receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the checkbox loses focus.", payload: "FocusEvent" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  checkboxDef
+});
+//# sourceMappingURL=checkbox.cjs.map

package/dist/studio/lib/registry/inputs/checkbox.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/checkbox.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const checkboxDef: ComponentDef = {\n id: 'checkbox',\n name: 'Checkbox',\n category: 'Inputs',\n description: 'Checkbox input with label. State knobs cover unchecked × checked across default / hover / focus, plus a shared disabled opacity.',\n styleProperties: [\n // Default — unchecked\n { key: 'uncheckedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'uncheckedColors', showWhen: { state: 'default' } },\n { key: 'uncheckedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'uncheckedColors', showWhen: { state: 'default' } },\n // Default — checked\n { key: 'checkedBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent)', section: 'checkedColors', showWhen: { state: 'default' } },\n { key: 'checkedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'checkedColors', showWhen: { state: 'default' } },\n { key: 'checkGlyphColor', label: 'Check Glyph', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'checkedColors', showWhen: { state: 'default' } },\n // Hover — unchecked\n { key: 'hoverUncheckedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'uncheckedColors', showWhen: { state: 'hover' } },\n // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)\n { key: 'hoverUncheckedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'uncheckedColors', showWhen: { state: 'hover' } },\n // Hover — checked\n { key: 'hoverCheckedBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'checkedColors', showWhen: { state: 'hover' } },\n { key: 'hoverCheckedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'checkedColors', showWhen: { state: 'hover' } },\n { key: 'hoverCheckGlyphColor', label: 'Check Glyph', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'checkedColors', showWhen: { state: 'hover' } },\n // Focus — single shared ring color (outline applies the same to\n // checked and unchecked; splitting it into two knobs was overkill).\n { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled — single shared opacity (no per-mode colors)\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Shared — always visible\n { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 14, max: 32, step: 2, unit: 'px' },\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 4, min: 0, max: 12, step: 1, unit: 'px' },\n { key: 'gap', label: 'Label Gap', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n // Error — the box + label stay neutral; the message below is the sole\n // signal (errorColor colors it, errorMessageSize sizes it). Shared keys\n // with the input family so the editor's \"Match in N\" sync applies.\n { key: 'errorColor', label: 'Message', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'errorState', showWhen: { state: 'error' } },\n { key: 'errorMessageSize', label: 'Message Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px', section: 'errorState', showWhen: { state: 'error' } },\n ],\n layoutVariants: [\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'default', label: 'Default' },\n { value: 'hover', label: 'Hover' },\n { value: 'focus', label: 'Focus' },\n { value: 'disabled', label: 'Disabled' },\n { value: 'error', label: 'Error' },\n ],\n defaultValue: 'default',\n },\n ],\n events: [\n { name: 'onChange', description: 'Fires when the user toggles the checked state via click or Space.', payload: '{ checked: boolean }' },\n { name: 'onFocus', description: 'Fires when the checkbox receives focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when the checkbox loses focus.', payload: 'FocusEvent' },\n ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/checkbox.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import type { ComponentDef } from '../../types.js';
+export declare const checkboxDef: ComponentDef;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/studio/lib/registry/inputs/checkbox.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/studio/lib/registry/inputs/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,WAAW,EAAE,YAuDzB,CAAC"}