@viax.io/uxm 4.39.0 → 4.40.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/LICENSE.md +21 -0
- package/README.md +33 -44
- package/dist/hooks/index.cjs.map +1 -1
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js.map +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.js.map +1 -1
- package/dist/previews/index.cjs.map +1 -1
- package/dist/previews/index.d.ts +2 -2
- package/dist/previews/index.js.map +1 -1
- package/dist/studio/index.cjs.map +1 -1
- package/dist/studio/index.d.ts +2 -2
- package/dist/studio/index.js.map +1 -1
- package/dist/studio/lib/registry/buttons.cjs +2 -2
- package/dist/studio/lib/registry/buttons.cjs.map +1 -1
- package/dist/studio/lib/registry/buttons.js +2 -2
- package/dist/studio/lib/registry/buttons.js.map +1 -1
- package/dist/studio/lib/registry/composite/sidebar-nav-trigger.cjs +1 -1
- package/dist/studio/lib/registry/composite/sidebar-nav-trigger.cjs.map +1 -1
- package/dist/studio/lib/registry/composite/sidebar-nav-trigger.js +1 -1
- package/dist/studio/lib/registry/composite/sidebar-nav-trigger.js.map +1 -1
- package/dist/studio/lib/registry/diagram.cjs +1 -1
- package/dist/studio/lib/registry/diagram.cjs.map +1 -1
- package/dist/studio/lib/registry/diagram.js +1 -1
- package/dist/studio/lib/registry/diagram.js.map +1 -1
- package/dist/studio/lib/registry/display.cjs +2 -2
- package/dist/studio/lib/registry/display.cjs.map +1 -1
- package/dist/studio/lib/registry/display.js +2 -2
- package/dist/studio/lib/registry/display.js.map +1 -1
- package/dist/studio/lib/registry/feedback.cjs +3 -3
- package/dist/studio/lib/registry/feedback.cjs.map +1 -1
- package/dist/studio/lib/registry/feedback.js +3 -3
- package/dist/studio/lib/registry/feedback.js.map +1 -1
- package/dist/studio/lib/registry/inputs/color-input.cjs +1 -1
- package/dist/studio/lib/registry/inputs/color-input.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/color-input.js +1 -1
- package/dist/studio/lib/registry/inputs/color-input.js.map +1 -1
- package/dist/studio/lib/registry/inputs/currency-input.cjs +1 -1
- package/dist/studio/lib/registry/inputs/currency-input.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/currency-input.js +1 -1
- package/dist/studio/lib/registry/inputs/currency-input.js.map +1 -1
- package/dist/studio/lib/registry/inputs/editable-cell.cjs +1 -1
- package/dist/studio/lib/registry/inputs/editable-cell.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/editable-cell.js +1 -1
- package/dist/studio/lib/registry/inputs/editable-cell.js.map +1 -1
- package/dist/studio/lib/registry/inputs/file-upload.cjs +1 -1
- package/dist/studio/lib/registry/inputs/file-upload.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/file-upload.js +1 -1
- package/dist/studio/lib/registry/inputs/file-upload.js.map +1 -1
- package/dist/studio/lib/registry/inputs/input-text.cjs +1 -1
- package/dist/studio/lib/registry/inputs/input-text.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/input-text.js +1 -1
- package/dist/studio/lib/registry/inputs/input-text.js.map +1 -1
- package/dist/studio/lib/registry/inputs/listbox.cjs +1 -1
- package/dist/studio/lib/registry/inputs/listbox.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/listbox.js +1 -1
- package/dist/studio/lib/registry/inputs/listbox.js.map +1 -1
- package/dist/studio/lib/registry/inputs/menu.cjs +1 -1
- package/dist/studio/lib/registry/inputs/menu.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/menu.js +1 -1
- package/dist/studio/lib/registry/inputs/menu.js.map +1 -1
- package/dist/studio/lib/registry/inputs/number-input.cjs +1 -1
- package/dist/studio/lib/registry/inputs/number-input.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/number-input.js +1 -1
- package/dist/studio/lib/registry/inputs/number-input.js.map +1 -1
- package/dist/studio/lib/registry/inputs/password-input.cjs +1 -1
- package/dist/studio/lib/registry/inputs/password-input.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/password-input.js +1 -1
- package/dist/studio/lib/registry/inputs/password-input.js.map +1 -1
- package/dist/studio/lib/registry/inputs/phone-input.cjs +1 -1
- package/dist/studio/lib/registry/inputs/phone-input.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/phone-input.js +1 -1
- package/dist/studio/lib/registry/inputs/phone-input.js.map +1 -1
- package/dist/studio/lib/registry/inputs/slider.cjs +1 -1
- package/dist/studio/lib/registry/inputs/slider.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/slider.js +1 -1
- package/dist/studio/lib/registry/inputs/slider.js.map +1 -1
- package/dist/studio/lib/registry/inputs/time-input.cjs +1 -1
- package/dist/studio/lib/registry/inputs/time-input.cjs.map +1 -1
- package/dist/studio/lib/registry/inputs/time-input.js +1 -1
- package/dist/studio/lib/registry/inputs/time-input.js.map +1 -1
- package/dist/studio/lib/types.cjs.map +1 -1
- package/dist/studio/persistence/generate-css.cjs.map +1 -1
- package/dist/studio/persistence/generate-css.js.map +1 -1
- package/dist/ui/editable-cell/editable-cell-date.cjs +226 -0
- package/dist/ui/editable-cell/editable-cell-date.cjs.map +1 -0
- package/dist/ui/editable-cell/editable-cell-date.d.ts +4 -0
- package/dist/ui/editable-cell/editable-cell-date.d.ts.map +1 -0
- package/dist/ui/editable-cell/editable-cell-date.js +202 -0
- package/dist/ui/editable-cell/editable-cell-date.js.map +1 -0
- package/dist/ui/editable-cell/editable-cell-select.cjs +297 -0
- package/dist/ui/editable-cell/editable-cell-select.cjs.map +1 -0
- package/dist/ui/editable-cell/editable-cell-select.d.ts +4 -0
- package/dist/ui/editable-cell/editable-cell-select.d.ts.map +1 -0
- package/dist/ui/editable-cell/editable-cell-select.js +273 -0
- package/dist/ui/editable-cell/editable-cell-select.js.map +1 -0
- package/dist/ui/editable-cell/editable-cell-text.cjs +175 -0
- package/dist/ui/editable-cell/editable-cell-text.cjs.map +1 -0
- package/dist/ui/editable-cell/editable-cell-text.d.ts +4 -0
- package/dist/ui/editable-cell/editable-cell-text.d.ts.map +1 -0
- package/dist/ui/editable-cell/editable-cell-text.js +151 -0
- package/dist/ui/editable-cell/editable-cell-text.js.map +1 -0
- package/dist/ui/editable-cell/editable-cell.cjs +27 -705
- package/dist/ui/editable-cell/editable-cell.cjs.map +1 -1
- package/dist/ui/editable-cell/editable-cell.d.ts +1 -1
- package/dist/ui/editable-cell/editable-cell.d.ts.map +1 -1
- package/dist/ui/editable-cell/editable-cell.js +28 -706
- package/dist/ui/editable-cell/editable-cell.js.map +1 -1
- package/dist/ui/editable-cell/use-editable-cell.cjs +284 -0
- package/dist/ui/editable-cell/use-editable-cell.cjs.map +1 -0
- package/dist/ui/editable-cell/use-editable-cell.d.ts +51 -0
- package/dist/ui/editable-cell/use-editable-cell.d.ts.map +1 -0
- package/dist/ui/editable-cell/use-editable-cell.js +260 -0
- package/dist/ui/editable-cell/use-editable-cell.js.map +1 -0
- package/dist/ui/page-shell/page-shell.cjs.map +1 -1
- package/dist/ui/page-shell/page-shell.d.ts +1 -1
- package/dist/ui/page-shell/page-shell.d.ts.map +1 -1
- package/dist/ui/page-shell/page-shell.js.map +1 -1
- package/dist/ui/styles.css +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/number-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const numberInputDef: ComponentDef = {\n id: 'number-input',\n name: 'Number Input',\n category: 'Inputs',\n description: 'Plain typing-only numeric field — no increment/decrement buttons (use `Number Field` for that, soon to be renamed `Stepper`). Masks non-digits in real time; optional sign and decimal support; min/max clamping on blur. For monetary values use `Currency Input`. State knobs cover default / hover / focus / disabled / error on the input itself (the root IS the visible surface, same shape as `Text Input`).',\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorColor', label: '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 // Shared\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: 12, min: 4, max: 24, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n // Number-specific: digits read more naturally right-aligned in\n // tables and forms with mixed-width numbers, but the default\n // mirrors text-input's left alignment so it drops in next to\n // other fields without surprise.\n { key: 'textAlign', label: 'Text Align', control: 'select', options: ['left', 'right'], defaultValue: 'left' },\n ],\n layoutVariants: [\n // No label-position variant — NumberInput is intentionally bare\n // (just the field). Labels, hints, and error messages are the\n // FormField atom's concern; consumers compose them together\n // when they need a labeled control.\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 on every keystroke. Payload is the masked, digit-only string.', payload: '{ value: string }' },\n { name: 'onBlur', description: 'Fires when the field loses focus. Triggers min/max clamping if bounds are set.', payload: 'FocusEvent' },\n { name: 'onFocus', description: 'Fires when the field receives focus.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: 'NumberInput',\n props: [\n { name: 'value', type: 'string', description: 'Current value as a digit string (controlled).' },\n { name: 'onChange', type: '(value: string) => void', description: 'Called with the masked, digit-only string on every keystroke.' },\n { name: 'defaultValue', type: 'string', description: 'Initial value for uncontrolled usage.' },\n { name: 'min', type: 'number', description: 'Lower bound. Clamping fires on blur, not per-keystroke.' },\n { name: 'max', type: 'number', description: 'Upper bound. Same blur-clamp behavior.' },\n { name: 'allowNegative', type: 'boolean', defaultValue: 'false', description: 'Allow a leading `-` sign.' },\n { name: 'allowDecimal', type: 'boolean', defaultValue: 'false', description: 'Allow a single `.` decimal separator.' },\n { name: 'decimals', type: 'number', defaultValue: '2', description: 'Max decimal places when `allowDecimal` is true. Excess digits are dropped during masking.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/number-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const numberInputDef: ComponentDef = {\n id: 'number-input',\n name: 'Number Input',\n category: 'Inputs',\n description: 'Plain typing-only numeric field — no increment/decrement buttons (use `Number Field` for that, soon to be renamed `Stepper`). Masks non-digits in real time; optional sign and decimal support; min/max clamping on blur. For monetary values use `Currency Input`. State knobs cover default / hover / focus / disabled / error on the input itself (the root IS the visible surface, same shape as `Text Input`).',\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorColor', label: '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 // Shared\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: 12, min: 4, max: 24, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n // Number-specific: digits read more naturally right-aligned in\n // tables and forms with mixed-width numbers, but the default\n // mirrors text-input's left alignment so it drops in next to\n // other fields without surprise.\n { key: 'textAlign', label: 'Text Align', control: 'select', options: ['left', 'right'], defaultValue: 'left' },\n ],\n layoutVariants: [\n // No label-position variant — NumberInput is intentionally bare\n // (just the field). Labels, hints, and error messages are the\n // FormField atom's concern; consumers compose them together\n // when they need a labeled control.\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 on every keystroke. Payload is the masked, digit-only string.', payload: '{ value: string }' },\n { name: 'onBlur', description: 'Fires when the field loses focus. Triggers min/max clamping if bounds are set.', payload: 'FocusEvent' },\n { name: 'onFocus', description: 'Fires when the field receives focus.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: 'NumberInput',\n props: [\n { name: 'value', type: 'string', description: 'Current value as a digit string (controlled).' },\n { name: 'onChange', type: '(value: string) => void', description: 'Called with the masked, digit-only string on every keystroke.' },\n { name: 'defaultValue', type: 'string', description: 'Initial value for uncontrolled usage.' },\n { name: 'min', type: 'number', description: 'Lower bound. Clamping fires on blur, not per-keystroke.' },\n { name: 'max', type: 'number', description: 'Upper bound. Same blur-clamp behavior.' },\n { name: 'allowNegative', type: 'boolean', defaultValue: 'false', description: 'Allow a leading `-` sign.' },\n { name: 'allowDecimal', type: 'boolean', defaultValue: 'false', description: 'Allow a single `.` decimal separator.' },\n { name: 'decimals', type: 'number', defaultValue: '2', description: 'Max decimal places when `allowDecimal` is true. Excess digits are dropped during masking.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
@@ -59,7 +59,7 @@ const numberInputDef = {
|
|
|
59
59
|
{ name: "onFocus", description: "Fires when the field receives focus.", payload: "FocusEvent" }
|
|
60
60
|
],
|
|
61
61
|
api: {
|
|
62
|
-
importPath: "@viax/uxm/ui",
|
|
62
|
+
importPath: "@viax.io/uxm/ui",
|
|
63
63
|
importNames: "NumberInput",
|
|
64
64
|
props: [
|
|
65
65
|
{ name: "value", type: "string", description: "Current value as a digit string (controlled)." },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/number-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const numberInputDef: ComponentDef = {\n id: 'number-input',\n name: 'Number Input',\n category: 'Inputs',\n description: 'Plain typing-only numeric field — no increment/decrement buttons (use `Number Field` for that, soon to be renamed `Stepper`). Masks non-digits in real time; optional sign and decimal support; min/max clamping on blur. For monetary values use `Currency Input`. State knobs cover default / hover / focus / disabled / error on the input itself (the root IS the visible surface, same shape as `Text Input`).',\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorColor', label: '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 // Shared\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: 12, min: 4, max: 24, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n // Number-specific: digits read more naturally right-aligned in\n // tables and forms with mixed-width numbers, but the default\n // mirrors text-input's left alignment so it drops in next to\n // other fields without surprise.\n { key: 'textAlign', label: 'Text Align', control: 'select', options: ['left', 'right'], defaultValue: 'left' },\n ],\n layoutVariants: [\n // No label-position variant — NumberInput is intentionally bare\n // (just the field). Labels, hints, and error messages are the\n // FormField atom's concern; consumers compose them together\n // when they need a labeled control.\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 on every keystroke. Payload is the masked, digit-only string.', payload: '{ value: string }' },\n { name: 'onBlur', description: 'Fires when the field loses focus. Triggers min/max clamping if bounds are set.', payload: 'FocusEvent' },\n { name: 'onFocus', description: 'Fires when the field receives focus.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: 'NumberInput',\n props: [\n { name: 'value', type: 'string', description: 'Current value as a digit string (controlled).' },\n { name: 'onChange', type: '(value: string) => void', description: 'Called with the masked, digit-only string on every keystroke.' },\n { name: 'defaultValue', type: 'string', description: 'Initial value for uncontrolled usage.' },\n { name: 'min', type: 'number', description: 'Lower bound. Clamping fires on blur, not per-keystroke.' },\n { name: 'max', type: 'number', description: 'Upper bound. Same blur-clamp behavior.' },\n { name: 'allowNegative', type: 'boolean', defaultValue: 'false', description: 'Allow a leading `-` sign.' },\n { name: 'allowDecimal', type: 'boolean', defaultValue: 'false', description: 'Allow a single `.` decimal separator.' },\n { name: 'decimals', type: 'number', defaultValue: '2', description: 'Max decimal places when `allowDecimal` is true. Excess digits are dropped during masking.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/number-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const numberInputDef: ComponentDef = {\n id: 'number-input',\n name: 'Number Input',\n category: 'Inputs',\n description: 'Plain typing-only numeric field — no increment/decrement buttons (use `Number Field` for that, soon to be renamed `Stepper`). Masks non-digits in real time; optional sign and decimal support; min/max clamping on blur. For monetary values use `Currency Input`. State knobs cover default / hover / focus / disabled / error on the input itself (the root IS the visible surface, same shape as `Text Input`).',\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorColor', label: '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 // Shared\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: 12, min: 4, max: 24, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n // Number-specific: digits read more naturally right-aligned in\n // tables and forms with mixed-width numbers, but the default\n // mirrors text-input's left alignment so it drops in next to\n // other fields without surprise.\n { key: 'textAlign', label: 'Text Align', control: 'select', options: ['left', 'right'], defaultValue: 'left' },\n ],\n layoutVariants: [\n // No label-position variant — NumberInput is intentionally bare\n // (just the field). Labels, hints, and error messages are the\n // FormField atom's concern; consumers compose them together\n // when they need a labeled control.\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 on every keystroke. Payload is the masked, digit-only string.', payload: '{ value: string }' },\n { name: 'onBlur', description: 'Fires when the field loses focus. Triggers min/max clamping if bounds are set.', payload: 'FocusEvent' },\n { name: 'onFocus', description: 'Fires when the field receives focus.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: 'NumberInput',\n props: [\n { name: 'value', type: 'string', description: 'Current value as a digit string (controlled).' },\n { name: 'onChange', type: '(value: string) => void', description: 'Called with the masked, digit-only string on every keystroke.' },\n { name: 'defaultValue', type: 'string', description: 'Initial value for uncontrolled usage.' },\n { name: 'min', type: 'number', description: 'Lower bound. Clamping fires on blur, not per-keystroke.' },\n { name: 'max', type: 'number', description: 'Upper bound. Same blur-clamp behavior.' },\n { name: 'allowNegative', type: 'boolean', defaultValue: 'false', description: 'Allow a leading `-` sign.' },\n { name: 'allowDecimal', type: 'boolean', defaultValue: 'false', description: 'Allow a single `.` decimal separator.' },\n { name: 'decimals', type: 'number', defaultValue: '2', description: 'Max decimal places when `allowDecimal` is true. Excess digits are dropped during masking.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
@@ -85,7 +85,7 @@ const passwordInputDef = {
|
|
|
85
85
|
{ name: "onBlur", description: "Fires when the field loses focus.", payload: "FocusEvent" }
|
|
86
86
|
],
|
|
87
87
|
api: {
|
|
88
|
-
importPath: "@viax/uxm/ui",
|
|
88
|
+
importPath: "@viax.io/uxm/ui",
|
|
89
89
|
importNames: "PasswordInput",
|
|
90
90
|
props: [
|
|
91
91
|
{ name: "value", type: "string", description: "Current value (controlled)." },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/password-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const passwordInputDef: ComponentDef = {\n id: 'password-input',\n name: 'Password Input',\n category: 'Inputs',\n description: \"Password entry field with a trailing show/hide eye toggle. State knobs cover default / hover / focus / disabled / error; the trailing toggle has its own hover knob since it's an interactive button. The toggle can be disabled per-instance with the `toggle` variant for stricter UX.\",\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'iconColor', label: 'Toggle Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\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 // Shared\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 99, 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: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n { key: 'iconSize', label: 'Toggle Size', control: 'number', defaultValue: 16, min: 12, max: 24, step: 1, unit: 'px' },\n { key: 'iconOffset', label: 'Toggle Offset', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px' },\n { key: 'iconHoverColor', label: 'Toggle Hover', control: 'color', defaultValue: 'var(--color-text)' },\n ],\n layoutVariants: [\n // No `toggle` variant. The show/hide eye is a consumer-code decision\n // (the `toggle` prop on PasswordInput), not a design-system decision —\n // turning it off doesn't introduce a new theming surface, the trailing\n // button simply isn't rendered. Same pattern as InputWithIcon's\n // `clearable` prop: exposed on the component, not promoted to a UXM\n // variant. Designers theme the canonical shape (toggle on) and call\n // sites override at the prop layer when policy demands a strict field.\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 on every keystroke. `e.target.value` is the password text.', payload: 'ChangeEvent<HTMLInputElement>' },\n { name: 'onToggleVisible', description: 'Fires when the user clicks the show/hide eye toggle.', payload: '{ visible: boolean }' },\n { name: 'onFocus', description: 'Fires when the field receives focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when the field loses focus.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: 'PasswordInput',\n props: [\n { name: 'value', type: 'string', description: 'Current value (controlled).' },\n { name: 'onChange', type: '(e: ChangeEvent<HTMLInputElement>) => void', description: 'Change handler — `e.target.value` is the password.' },\n { name: 'toggle', type: 'boolean', defaultValue: 'true', description: 'Render the trailing show/hide eye toggle. Pass `false` to suppress.' },\n { name: 'visible', type: 'boolean', description: 'Visibility (controlled). Pair with `onToggleVisible` to drive the toggle externally.' },\n { name: 'defaultVisible', type: 'boolean', defaultValue: 'false', description: 'Initial visibility for uncontrolled toggle usage.' },\n { name: 'onToggleVisible', type: '(visible: boolean) => void', description: 'Fires when the user clicks the eye toggle.' },\n { name: 'autoComplete', type: 'string', defaultValue: '\"current-password\"', description: 'Browser autofill hint — `current-password` for sign-in, `new-password` for sign-up.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input and the toggle.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/password-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const passwordInputDef: ComponentDef = {\n id: 'password-input',\n name: 'Password Input',\n category: 'Inputs',\n description: \"Password entry field with a trailing show/hide eye toggle. State knobs cover default / hover / focus / disabled / error; the trailing toggle has its own hover knob since it's an interactive button. The toggle can be disabled per-instance with the `toggle` variant for stricter UX.\",\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'iconColor', label: 'Toggle Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\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 // Shared\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 99, 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: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n { key: 'iconSize', label: 'Toggle Size', control: 'number', defaultValue: 16, min: 12, max: 24, step: 1, unit: 'px' },\n { key: 'iconOffset', label: 'Toggle Offset', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px' },\n { key: 'iconHoverColor', label: 'Toggle Hover', control: 'color', defaultValue: 'var(--color-text)' },\n ],\n layoutVariants: [\n // No `toggle` variant. The show/hide eye is a consumer-code decision\n // (the `toggle` prop on PasswordInput), not a design-system decision —\n // turning it off doesn't introduce a new theming surface, the trailing\n // button simply isn't rendered. Same pattern as InputWithIcon's\n // `clearable` prop: exposed on the component, not promoted to a UXM\n // variant. Designers theme the canonical shape (toggle on) and call\n // sites override at the prop layer when policy demands a strict field.\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 on every keystroke. `e.target.value` is the password text.', payload: 'ChangeEvent<HTMLInputElement>' },\n { name: 'onToggleVisible', description: 'Fires when the user clicks the show/hide eye toggle.', payload: '{ visible: boolean }' },\n { name: 'onFocus', description: 'Fires when the field receives focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when the field loses focus.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: 'PasswordInput',\n props: [\n { name: 'value', type: 'string', description: 'Current value (controlled).' },\n { name: 'onChange', type: '(e: ChangeEvent<HTMLInputElement>) => void', description: 'Change handler — `e.target.value` is the password.' },\n { name: 'toggle', type: 'boolean', defaultValue: 'true', description: 'Render the trailing show/hide eye toggle. Pass `false` to suppress.' },\n { name: 'visible', type: 'boolean', description: 'Visibility (controlled). Pair with `onToggleVisible` to drive the toggle externally.' },\n { name: 'defaultVisible', type: 'boolean', defaultValue: 'false', description: 'Initial visibility for uncontrolled toggle usage.' },\n { name: 'onToggleVisible', type: '(visible: boolean) => void', description: 'Fires when the user clicks the eye toggle.' },\n { name: 'autoComplete', type: 'string', defaultValue: '\"current-password\"', description: 'Browser autofill hint — `current-password` for sign-in, `new-password` for sign-up.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input and the toggle.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
@@ -62,7 +62,7 @@ const passwordInputDef = {
|
|
|
62
62
|
{ name: "onBlur", description: "Fires when the field loses focus.", payload: "FocusEvent" }
|
|
63
63
|
],
|
|
64
64
|
api: {
|
|
65
|
-
importPath: "@viax/uxm/ui",
|
|
65
|
+
importPath: "@viax.io/uxm/ui",
|
|
66
66
|
importNames: "PasswordInput",
|
|
67
67
|
props: [
|
|
68
68
|
{ name: "value", type: "string", description: "Current value (controlled)." },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/password-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const passwordInputDef: ComponentDef = {\n id: 'password-input',\n name: 'Password Input',\n category: 'Inputs',\n description: \"Password entry field with a trailing show/hide eye toggle. State knobs cover default / hover / focus / disabled / error; the trailing toggle has its own hover knob since it's an interactive button. The toggle can be disabled per-instance with the `toggle` variant for stricter UX.\",\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'iconColor', label: 'Toggle Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\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 // Shared\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 99, 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: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n { key: 'iconSize', label: 'Toggle Size', control: 'number', defaultValue: 16, min: 12, max: 24, step: 1, unit: 'px' },\n { key: 'iconOffset', label: 'Toggle Offset', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px' },\n { key: 'iconHoverColor', label: 'Toggle Hover', control: 'color', defaultValue: 'var(--color-text)' },\n ],\n layoutVariants: [\n // No `toggle` variant. The show/hide eye is a consumer-code decision\n // (the `toggle` prop on PasswordInput), not a design-system decision —\n // turning it off doesn't introduce a new theming surface, the trailing\n // button simply isn't rendered. Same pattern as InputWithIcon's\n // `clearable` prop: exposed on the component, not promoted to a UXM\n // variant. Designers theme the canonical shape (toggle on) and call\n // sites override at the prop layer when policy demands a strict field.\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 on every keystroke. `e.target.value` is the password text.', payload: 'ChangeEvent<HTMLInputElement>' },\n { name: 'onToggleVisible', description: 'Fires when the user clicks the show/hide eye toggle.', payload: '{ visible: boolean }' },\n { name: 'onFocus', description: 'Fires when the field receives focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when the field loses focus.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: 'PasswordInput',\n props: [\n { name: 'value', type: 'string', description: 'Current value (controlled).' },\n { name: 'onChange', type: '(e: ChangeEvent<HTMLInputElement>) => void', description: 'Change handler — `e.target.value` is the password.' },\n { name: 'toggle', type: 'boolean', defaultValue: 'true', description: 'Render the trailing show/hide eye toggle. Pass `false` to suppress.' },\n { name: 'visible', type: 'boolean', description: 'Visibility (controlled). Pair with `onToggleVisible` to drive the toggle externally.' },\n { name: 'defaultVisible', type: 'boolean', defaultValue: 'false', description: 'Initial visibility for uncontrolled toggle usage.' },\n { name: 'onToggleVisible', type: '(visible: boolean) => void', description: 'Fires when the user clicks the eye toggle.' },\n { name: 'autoComplete', type: 'string', defaultValue: '\"current-password\"', description: 'Browser autofill hint — `current-password` for sign-in, `new-password` for sign-up.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input and the toggle.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through.' },\n ],\n },\n};\n"],"mappings":"AAEO,MAAM,mBAAiC;AAAA,EAC5C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA,IAEf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IAC3J,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IACrJ,EAAE,KAAK,SAAS,OAAO,QAAQ,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IAC3I,EAAE,KAAK,aAAa,OAAO,eAAe,SAAS,SAAS,cAAc,2BAA2B,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA;AAAA,IAE5J,EAAE,KAAK,WAAW,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACjJ,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAEnJ,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACnJ,EAAE,KAAK,aAAa,OAAO,QAAQ,SAAS,SAAS,cAAc,uBAAuB,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAE9I,EAAE,KAAK,cAAc,OAAO,cAAc,SAAS,SAAS,cAAc,4BAA4B,SAAS,eAAe,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA,IAC9J,EAAE,KAAK,kBAAkB,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA,IACzJ,EAAE,KAAK,iBAAiB,OAAO,QAAQ,SAAS,SAAS,cAAc,2BAA2B,SAAS,eAAe,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA,IAC1J,EAAE,KAAK,mBAAmB,OAAO,WAAW,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,GAAG,MAAM,MAAM,SAAS,iBAAiB,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA;AAAA,IAE1K,EAAE,KAAK,WAAW,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACjJ,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,4BAA4B,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACxJ,EAAE,KAAK,cAAc,OAAO,WAAW,SAAS,SAAS,cAAc,4BAA4B,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACvJ,EAAE,KAAK,oBAAoB,OAAO,gBAAgB,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAElL,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACjH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACjH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAClH,EAAE,KAAK,YAAY,OAAO,eAAe,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,cAAc,OAAO,iBAAiB,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACvH,EAAE,KAAK,kBAAkB,OAAO,gBAAgB,SAAS,SAAS,cAAc,oBAAoB;AAAA,EACtG;AAAA,EACA,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQd;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,QACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,QACvC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,MACnC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,YAAY,aAAa,oEAAoE,SAAS,gCAAgC;AAAA,IAC9I,EAAE,MAAM,mBAAmB,aAAa,wDAAwD,SAAS,uBAAuB;AAAA,IAChI,EAAE,MAAM,WAAW,aAAa,wCAAwC,SAAS,aAAa;AAAA,IAC9F,EAAE,MAAM,UAAU,aAAa,qCAAqC,SAAS,aAAa;AAAA,EAC5F;AAAA,EACA,KAAK;AAAA,IACH,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,OAAO;AAAA,MACL,EAAE,MAAM,SAAS,MAAM,UAAU,aAAa,8BAA8B;AAAA,MAC5E,EAAE,MAAM,YAAY,MAAM,8CAA8C,aAAa,0DAAqD;AAAA,MAC1I,EAAE,MAAM,UAAU,MAAM,WAAW,cAAc,QAAQ,aAAa,sEAAsE;AAAA,MAC5I,EAAE,MAAM,WAAW,MAAM,WAAW,aAAa,uFAAuF;AAAA,MACxI,EAAE,MAAM,kBAAkB,MAAM,WAAW,cAAc,SAAS,aAAa,oDAAoD;AAAA,MACnI,EAAE,MAAM,mBAAmB,MAAM,8BAA8B,aAAa,6CAA6C;AAAA,MACzH,EAAE,MAAM,gBAAgB,MAAM,UAAU,cAAc,sBAAsB,aAAa,2FAAsF;AAAA,MAC/K,EAAE,MAAM,YAAY,MAAM,WAAW,cAAc,SAAS,aAAa,qCAAqC;AAAA,MAC9G,EAAE,MAAM,WAAW,MAAM,yCAAyC,aAAa,wFAAwF;AAAA,IACzK;AAAA,EACF;AACF;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/password-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const passwordInputDef: ComponentDef = {\n id: 'password-input',\n name: 'Password Input',\n category: 'Inputs',\n description: \"Password entry field with a trailing show/hide eye toggle. State knobs cover default / hover / focus / disabled / error; the trailing toggle has its own hover knob since it's an interactive button. The toggle can be disabled per-instance with the `toggle` variant for stricter UX.\",\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'iconColor', label: 'Toggle Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\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 // Shared\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 99, 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: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n { key: 'iconSize', label: 'Toggle Size', control: 'number', defaultValue: 16, min: 12, max: 24, step: 1, unit: 'px' },\n { key: 'iconOffset', label: 'Toggle Offset', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px' },\n { key: 'iconHoverColor', label: 'Toggle Hover', control: 'color', defaultValue: 'var(--color-text)' },\n ],\n layoutVariants: [\n // No `toggle` variant. The show/hide eye is a consumer-code decision\n // (the `toggle` prop on PasswordInput), not a design-system decision —\n // turning it off doesn't introduce a new theming surface, the trailing\n // button simply isn't rendered. Same pattern as InputWithIcon's\n // `clearable` prop: exposed on the component, not promoted to a UXM\n // variant. Designers theme the canonical shape (toggle on) and call\n // sites override at the prop layer when policy demands a strict field.\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 on every keystroke. `e.target.value` is the password text.', payload: 'ChangeEvent<HTMLInputElement>' },\n { name: 'onToggleVisible', description: 'Fires when the user clicks the show/hide eye toggle.', payload: '{ visible: boolean }' },\n { name: 'onFocus', description: 'Fires when the field receives focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when the field loses focus.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: 'PasswordInput',\n props: [\n { name: 'value', type: 'string', description: 'Current value (controlled).' },\n { name: 'onChange', type: '(e: ChangeEvent<HTMLInputElement>) => void', description: 'Change handler — `e.target.value` is the password.' },\n { name: 'toggle', type: 'boolean', defaultValue: 'true', description: 'Render the trailing show/hide eye toggle. Pass `false` to suppress.' },\n { name: 'visible', type: 'boolean', description: 'Visibility (controlled). Pair with `onToggleVisible` to drive the toggle externally.' },\n { name: 'defaultVisible', type: 'boolean', defaultValue: 'false', description: 'Initial visibility for uncontrolled toggle usage.' },\n { name: 'onToggleVisible', type: '(visible: boolean) => void', description: 'Fires when the user clicks the eye toggle.' },\n { name: 'autoComplete', type: 'string', defaultValue: '\"current-password\"', description: 'Browser autofill hint — `current-password` for sign-in, `new-password` for sign-up.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input and the toggle.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through.' },\n ],\n },\n};\n"],"mappings":"AAEO,MAAM,mBAAiC;AAAA,EAC5C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA,IAEf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IAC3J,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IACrJ,EAAE,KAAK,SAAS,OAAO,QAAQ,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IAC3I,EAAE,KAAK,aAAa,OAAO,eAAe,SAAS,SAAS,cAAc,2BAA2B,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA;AAAA,IAE5J,EAAE,KAAK,WAAW,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACjJ,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAEnJ,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACnJ,EAAE,KAAK,aAAa,OAAO,QAAQ,SAAS,SAAS,cAAc,uBAAuB,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAE9I,EAAE,KAAK,cAAc,OAAO,cAAc,SAAS,SAAS,cAAc,4BAA4B,SAAS,eAAe,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA,IAC9J,EAAE,KAAK,kBAAkB,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA,IACzJ,EAAE,KAAK,iBAAiB,OAAO,QAAQ,SAAS,SAAS,cAAc,2BAA2B,SAAS,eAAe,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA,IAC1J,EAAE,KAAK,mBAAmB,OAAO,WAAW,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,GAAG,MAAM,MAAM,SAAS,iBAAiB,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA;AAAA,IAE1K,EAAE,KAAK,WAAW,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACjJ,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,4BAA4B,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACxJ,EAAE,KAAK,cAAc,OAAO,WAAW,SAAS,SAAS,cAAc,4BAA4B,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACvJ,EAAE,KAAK,oBAAoB,OAAO,gBAAgB,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAElL,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACjH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACjH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAClH,EAAE,KAAK,YAAY,OAAO,eAAe,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,cAAc,OAAO,iBAAiB,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACvH,EAAE,KAAK,kBAAkB,OAAO,gBAAgB,SAAS,SAAS,cAAc,oBAAoB;AAAA,EACtG;AAAA,EACA,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQd;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,QACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,QACvC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,MACnC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,YAAY,aAAa,oEAAoE,SAAS,gCAAgC;AAAA,IAC9I,EAAE,MAAM,mBAAmB,aAAa,wDAAwD,SAAS,uBAAuB;AAAA,IAChI,EAAE,MAAM,WAAW,aAAa,wCAAwC,SAAS,aAAa;AAAA,IAC9F,EAAE,MAAM,UAAU,aAAa,qCAAqC,SAAS,aAAa;AAAA,EAC5F;AAAA,EACA,KAAK;AAAA,IACH,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,OAAO;AAAA,MACL,EAAE,MAAM,SAAS,MAAM,UAAU,aAAa,8BAA8B;AAAA,MAC5E,EAAE,MAAM,YAAY,MAAM,8CAA8C,aAAa,0DAAqD;AAAA,MAC1I,EAAE,MAAM,UAAU,MAAM,WAAW,cAAc,QAAQ,aAAa,sEAAsE;AAAA,MAC5I,EAAE,MAAM,WAAW,MAAM,WAAW,aAAa,uFAAuF;AAAA,MACxI,EAAE,MAAM,kBAAkB,MAAM,WAAW,cAAc,SAAS,aAAa,oDAAoD;AAAA,MACnI,EAAE,MAAM,mBAAmB,MAAM,8BAA8B,aAAa,6CAA6C;AAAA,MACzH,EAAE,MAAM,gBAAgB,MAAM,UAAU,cAAc,sBAAsB,aAAa,2FAAsF;AAAA,MAC/K,EAAE,MAAM,YAAY,MAAM,WAAW,cAAc,SAAS,aAAa,qCAAqC;AAAA,MAC9G,EAAE,MAAM,WAAW,MAAM,yCAAyC,aAAa,wFAAwF;AAAA,IACzK;AAAA,EACF;AACF;","names":[]}
|
|
@@ -85,7 +85,7 @@ const phoneInputDef = {
|
|
|
85
85
|
{ name: "onBlur", description: "Fires when focus leaves the field.", payload: "FocusEvent" }
|
|
86
86
|
],
|
|
87
87
|
api: {
|
|
88
|
-
importPath: "@viax/uxm/ui",
|
|
88
|
+
importPath: "@viax.io/uxm/ui",
|
|
89
89
|
importNames: "PhoneInput",
|
|
90
90
|
props: [
|
|
91
91
|
{ name: "value", type: "{ country: string, number: string }", description: "Controlled value. `country` is an ISO-3166 alpha-2 code; `number` is raw digits." },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/phone-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const phoneInputDef: ComponentDef = {\n id: 'phone-input',\n name: 'Phone Input',\n category: 'Inputs',\n description: 'International phone field: leading country picker (flag + dial code) with a searchable popover, followed by a national number input with per-country digit masking. Value is an object `{ country, number }` — `country` is the ISO-3166 alpha-2 code, `number` is raw digits. The component handles display formatting and consumers get clean digits back.',\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'countryHoverBg', label: 'Country Hover', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\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 // Shared geometry — same across all states\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 99, 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: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n // Shared trim — picker chrome that stays constant across states.\n // Country divider + caret don't morph between hover / focus /\n // disabled in any meaningful way (the field bg + border do all\n // the state work). Keeping them out of the per-state section\n // prevents the misleading \"tune these per state\" affordance.\n { key: 'dividerColor', label: 'Country Divider', control: 'color', defaultValue: 'var(--color-border)' },\n { key: 'caretColor', label: 'Caret', control: 'color', defaultValue: 'var(--color-text-muted)' },\n // No popover knobs here: the country picker is the shared Listbox panel,\n // themed once via the `listbox` registry entry (`.uxm-listbox__panel`).\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 on every keystroke and on country pick. Payload is the next `{ country, number }` object.', payload: '{ country: string, number: string }' },\n { name: 'onOpen', description: 'Fires when the country popover opens.', payload: 'void' },\n { name: 'onClose', description: 'Fires when the country popover closes (selection or outside click).', payload: 'void' },\n { name: 'onFocus', description: 'Fires when either the country button or national-number input receives focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when focus leaves the field.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: 'PhoneInput',\n props: [\n { name: 'value', type: '{ country: string, number: string }', description: 'Controlled value. `country` is an ISO-3166 alpha-2 code; `number` is raw digits.' },\n { name: 'onChange', type: '(value: PhoneValue) => void', description: 'Called with the next value after each keystroke or country pick.' },\n { name: 'defaultValue', type: 'PhoneValue', defaultValue: '{ country: \"US\", number: \"\" }', description: 'Initial value for uncontrolled usage.' },\n { name: 'countries', type: 'PhoneCountry[]', defaultValue: 'CURATED_COUNTRIES', description: 'Country list shown in the picker. Default is ~30 curated countries; pass a custom list to extend or restrict coverage.' },\n { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Show a trailing clear (✕) button when the number has digits. Clearing wipes the number and keeps the selected country.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the field and country picker.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through to the national-number input.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/phone-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const phoneInputDef: ComponentDef = {\n id: 'phone-input',\n name: 'Phone Input',\n category: 'Inputs',\n description: 'International phone field: leading country picker (flag + dial code) with a searchable popover, followed by a national number input with per-country digit masking. Value is an object `{ country, number }` — `country` is the ISO-3166 alpha-2 code, `number` is raw digits. The component handles display formatting and consumers get clean digits back.',\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'countryHoverBg', label: 'Country Hover', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\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 // Shared geometry — same across all states\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 99, 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: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n // Shared trim — picker chrome that stays constant across states.\n // Country divider + caret don't morph between hover / focus /\n // disabled in any meaningful way (the field bg + border do all\n // the state work). Keeping them out of the per-state section\n // prevents the misleading \"tune these per state\" affordance.\n { key: 'dividerColor', label: 'Country Divider', control: 'color', defaultValue: 'var(--color-border)' },\n { key: 'caretColor', label: 'Caret', control: 'color', defaultValue: 'var(--color-text-muted)' },\n // No popover knobs here: the country picker is the shared Listbox panel,\n // themed once via the `listbox` registry entry (`.uxm-listbox__panel`).\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 on every keystroke and on country pick. Payload is the next `{ country, number }` object.', payload: '{ country: string, number: string }' },\n { name: 'onOpen', description: 'Fires when the country popover opens.', payload: 'void' },\n { name: 'onClose', description: 'Fires when the country popover closes (selection or outside click).', payload: 'void' },\n { name: 'onFocus', description: 'Fires when either the country button or national-number input receives focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when focus leaves the field.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: 'PhoneInput',\n props: [\n { name: 'value', type: '{ country: string, number: string }', description: 'Controlled value. `country` is an ISO-3166 alpha-2 code; `number` is raw digits.' },\n { name: 'onChange', type: '(value: PhoneValue) => void', description: 'Called with the next value after each keystroke or country pick.' },\n { name: 'defaultValue', type: 'PhoneValue', defaultValue: '{ country: \"US\", number: \"\" }', description: 'Initial value for uncontrolled usage.' },\n { name: 'countries', type: 'PhoneCountry[]', defaultValue: 'CURATED_COUNTRIES', description: 'Country list shown in the picker. Default is ~30 curated countries; pass a custom list to extend or restrict coverage.' },\n { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Show a trailing clear (✕) button when the number has digits. Clearing wipes the number and keeps the selected country.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the field and country picker.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through to the national-number input.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
@@ -62,7 +62,7 @@ const phoneInputDef = {
|
|
|
62
62
|
{ name: "onBlur", description: "Fires when focus leaves the field.", payload: "FocusEvent" }
|
|
63
63
|
],
|
|
64
64
|
api: {
|
|
65
|
-
importPath: "@viax/uxm/ui",
|
|
65
|
+
importPath: "@viax.io/uxm/ui",
|
|
66
66
|
importNames: "PhoneInput",
|
|
67
67
|
props: [
|
|
68
68
|
{ name: "value", type: "{ country: string, number: string }", description: "Controlled value. `country` is an ISO-3166 alpha-2 code; `number` is raw digits." },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/phone-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const phoneInputDef: ComponentDef = {\n id: 'phone-input',\n name: 'Phone Input',\n category: 'Inputs',\n description: 'International phone field: leading country picker (flag + dial code) with a searchable popover, followed by a national number input with per-country digit masking. Value is an object `{ country, number }` — `country` is the ISO-3166 alpha-2 code, `number` is raw digits. The component handles display formatting and consumers get clean digits back.',\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'countryHoverBg', label: 'Country Hover', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\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 // Shared geometry — same across all states\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 99, 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: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n // Shared trim — picker chrome that stays constant across states.\n // Country divider + caret don't morph between hover / focus /\n // disabled in any meaningful way (the field bg + border do all\n // the state work). Keeping them out of the per-state section\n // prevents the misleading \"tune these per state\" affordance.\n { key: 'dividerColor', label: 'Country Divider', control: 'color', defaultValue: 'var(--color-border)' },\n { key: 'caretColor', label: 'Caret', control: 'color', defaultValue: 'var(--color-text-muted)' },\n // No popover knobs here: the country picker is the shared Listbox panel,\n // themed once via the `listbox` registry entry (`.uxm-listbox__panel`).\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 on every keystroke and on country pick. Payload is the next `{ country, number }` object.', payload: '{ country: string, number: string }' },\n { name: 'onOpen', description: 'Fires when the country popover opens.', payload: 'void' },\n { name: 'onClose', description: 'Fires when the country popover closes (selection or outside click).', payload: 'void' },\n { name: 'onFocus', description: 'Fires when either the country button or national-number input receives focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when focus leaves the field.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: 'PhoneInput',\n props: [\n { name: 'value', type: '{ country: string, number: string }', description: 'Controlled value. `country` is an ISO-3166 alpha-2 code; `number` is raw digits.' },\n { name: 'onChange', type: '(value: PhoneValue) => void', description: 'Called with the next value after each keystroke or country pick.' },\n { name: 'defaultValue', type: 'PhoneValue', defaultValue: '{ country: \"US\", number: \"\" }', description: 'Initial value for uncontrolled usage.' },\n { name: 'countries', type: 'PhoneCountry[]', defaultValue: 'CURATED_COUNTRIES', description: 'Country list shown in the picker. Default is ~30 curated countries; pass a custom list to extend or restrict coverage.' },\n { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Show a trailing clear (✕) button when the number has digits. Clearing wipes the number and keeps the selected country.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the field and country picker.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through to the national-number input.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/phone-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const phoneInputDef: ComponentDef = {\n id: 'phone-input',\n name: 'Phone Input',\n category: 'Inputs',\n description: 'International phone field: leading country picker (flag + dial code) with a searchable popover, followed by a national number input with per-country digit masking. Value is an object `{ country, number }` — `country` is the ISO-3166 alpha-2 code, `number` is raw digits. The component handles display formatting and consumers get clean digits back.',\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'countryHoverBg', label: 'Country Hover', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\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 // Shared geometry — same across all states\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 99, 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: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n // Shared trim — picker chrome that stays constant across states.\n // Country divider + caret don't morph between hover / focus /\n // disabled in any meaningful way (the field bg + border do all\n // the state work). Keeping them out of the per-state section\n // prevents the misleading \"tune these per state\" affordance.\n { key: 'dividerColor', label: 'Country Divider', control: 'color', defaultValue: 'var(--color-border)' },\n { key: 'caretColor', label: 'Caret', control: 'color', defaultValue: 'var(--color-text-muted)' },\n // No popover knobs here: the country picker is the shared Listbox panel,\n // themed once via the `listbox` registry entry (`.uxm-listbox__panel`).\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 on every keystroke and on country pick. Payload is the next `{ country, number }` object.', payload: '{ country: string, number: string }' },\n { name: 'onOpen', description: 'Fires when the country popover opens.', payload: 'void' },\n { name: 'onClose', description: 'Fires when the country popover closes (selection or outside click).', payload: 'void' },\n { name: 'onFocus', description: 'Fires when either the country button or national-number input receives focus.', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when focus leaves the field.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: 'PhoneInput',\n props: [\n { name: 'value', type: '{ country: string, number: string }', description: 'Controlled value. `country` is an ISO-3166 alpha-2 code; `number` is raw digits.' },\n { name: 'onChange', type: '(value: PhoneValue) => void', description: 'Called with the next value after each keystroke or country pick.' },\n { name: 'defaultValue', type: 'PhoneValue', defaultValue: '{ country: \"US\", number: \"\" }', description: 'Initial value for uncontrolled usage.' },\n { name: 'countries', type: 'PhoneCountry[]', defaultValue: 'CURATED_COUNTRIES', description: 'Country list shown in the picker. Default is ~30 curated countries; pass a custom list to extend or restrict coverage.' },\n { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Show a trailing clear (✕) button when the number has digits. Clearing wipes the number and keeps the selected country.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the field and country picker.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through to the national-number input.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
@@ -81,7 +81,7 @@ const sliderDef = {
|
|
|
81
81
|
{ name: "onChange", description: "Fires continuously while the user drags either thumb. Payload is the full [start, end] range.", payload: "{ value: [number, number] }", showWhen: { mode: "range" } }
|
|
82
82
|
],
|
|
83
83
|
api: {
|
|
84
|
-
importPath: "@viax/uxm/ui",
|
|
84
|
+
importPath: "@viax.io/uxm/ui",
|
|
85
85
|
importNames: ["Slider", "RangeSlider"],
|
|
86
86
|
props: [
|
|
87
87
|
{ name: "value", type: "number // (Slider) | [number, number] // (RangeSlider)", description: "Current value. Tuple for RangeSlider." },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/slider.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sliderDef: ComponentDef = {\n id: 'slider',\n name: 'Slider',\n category: 'Inputs',\n description: 'Native range slider with themable track and thumb. Two modes: `single` is a one-thumb value picker; `range` is a dual-thumb start/end selector. Both modes share the same theming surface. State knobs cover default / hover / focus / disabled — only the thumb changes across interaction states; track + accent stay constant.',\n styleProperties: [\n // Default — track + thumb both visible since slider always has both\n { key: 'trackColor', label: 'Track', control: 'color', defaultValue: 'var(--color-border)', section: 'states', showWhen: { state: 'default' } },\n { key: 'accentColor', label: 'Accent (Filled)', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n { key: 'thumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n // Hover — thumb tint when hovered or actively being dragged (one\n // knob covers both since the visual difference is rarely worth\n // exposing as two; the underlying CSS still applies `:active`).\n { key: 'hoverThumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { state: 'hover' } },\n // Focus — single shared ring around the thumb / track\n { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled — shared opacity\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 style — always visible\n { key: 'trackHeight', label: 'Track Height', control: 'number', defaultValue: 6, min: 2, max: 16, step: 1, unit: 'px' },\n { key: 'trackRadius', label: 'Track Radius', control: 'slider', defaultValue: 999, min: 0, max: 999, step: 1, unit: 'px' },\n { key: 'thumbSize', label: 'Thumb Size', control: 'number', defaultValue: 14, min: 8, max: 24, step: 1, unit: 'px' },\n // Range-mode-only — value labels and show toggles. Grouped into\n // their own section so the panel's auto-derived \"Per Mode · Range\"\n // scope label applies only to these knobs and doesn't bleed into\n // the truly-shared STYLE section above (Track Height / Radius /\n // Thumb Size, which apply uniformly to both modes).\n { key: 'valueColor', label: 'Value Label Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'valueSize', label: 'Value Label Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showStart', label: 'Show Start', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showEnd', label: 'Show End', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showRange', label: 'Show Range', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\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 ],\n defaultValue: 'default',\n },\n {\n key: 'mode',\n label: 'Mode',\n options: [\n { value: 'single', label: 'Single' },\n { value: 'range', label: 'Range' },\n ],\n defaultValue: 'single',\n },\n ],\n events: [\n { name: 'onChange', description: 'Fires continuously while the user drags the thumb. High-frequency — debounce before persisting.', payload: '{ value: number }', showWhen: { mode: 'single' } },\n { name: 'onChange', description: 'Fires continuously while the user drags either thumb. Payload is the full [start, end] range.', payload: '{ value: [number, number] }', showWhen: { mode: 'range' } },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: ['Slider', 'RangeSlider'],\n props: [\n { name: 'value', type: 'number // (Slider) | [number, number] // (RangeSlider)', description: 'Current value. Tuple for RangeSlider.' },\n { name: 'onChange', type: '(value: number) => void // or ([start, end]) => void', description: 'Change handler. Already unwrapped from DOM event — receives the parsed number(s).' },\n { name: 'min', type: 'number', defaultValue: '0', description: 'Lower bound.' },\n { name: 'max', type: 'number', defaultValue: '100', description: 'Upper bound.' },\n { name: 'step', type: 'number', defaultValue: '1', description: 'Increment per arrow/drag tick.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/slider.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sliderDef: ComponentDef = {\n id: 'slider',\n name: 'Slider',\n category: 'Inputs',\n description: 'Native range slider with themable track and thumb. Two modes: `single` is a one-thumb value picker; `range` is a dual-thumb start/end selector. Both modes share the same theming surface. State knobs cover default / hover / focus / disabled — only the thumb changes across interaction states; track + accent stay constant.',\n styleProperties: [\n // Default — track + thumb both visible since slider always has both\n { key: 'trackColor', label: 'Track', control: 'color', defaultValue: 'var(--color-border)', section: 'states', showWhen: { state: 'default' } },\n { key: 'accentColor', label: 'Accent (Filled)', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n { key: 'thumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n // Hover — thumb tint when hovered or actively being dragged (one\n // knob covers both since the visual difference is rarely worth\n // exposing as two; the underlying CSS still applies `:active`).\n { key: 'hoverThumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { state: 'hover' } },\n // Focus — single shared ring around the thumb / track\n { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled — shared opacity\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 style — always visible\n { key: 'trackHeight', label: 'Track Height', control: 'number', defaultValue: 6, min: 2, max: 16, step: 1, unit: 'px' },\n { key: 'trackRadius', label: 'Track Radius', control: 'slider', defaultValue: 999, min: 0, max: 999, step: 1, unit: 'px' },\n { key: 'thumbSize', label: 'Thumb Size', control: 'number', defaultValue: 14, min: 8, max: 24, step: 1, unit: 'px' },\n // Range-mode-only — value labels and show toggles. Grouped into\n // their own section so the panel's auto-derived \"Per Mode · Range\"\n // scope label applies only to these knobs and doesn't bleed into\n // the truly-shared STYLE section above (Track Height / Radius /\n // Thumb Size, which apply uniformly to both modes).\n { key: 'valueColor', label: 'Value Label Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'valueSize', label: 'Value Label Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showStart', label: 'Show Start', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showEnd', label: 'Show End', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showRange', label: 'Show Range', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\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 ],\n defaultValue: 'default',\n },\n {\n key: 'mode',\n label: 'Mode',\n options: [\n { value: 'single', label: 'Single' },\n { value: 'range', label: 'Range' },\n ],\n defaultValue: 'single',\n },\n ],\n events: [\n { name: 'onChange', description: 'Fires continuously while the user drags the thumb. High-frequency — debounce before persisting.', payload: '{ value: number }', showWhen: { mode: 'single' } },\n { name: 'onChange', description: 'Fires continuously while the user drags either thumb. Payload is the full [start, end] range.', payload: '{ value: [number, number] }', showWhen: { mode: 'range' } },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: ['Slider', 'RangeSlider'],\n props: [\n { name: 'value', type: 'number // (Slider) | [number, number] // (RangeSlider)', description: 'Current value. Tuple for RangeSlider.' },\n { name: 'onChange', type: '(value: number) => void // or ([start, end]) => void', description: 'Change handler. Already unwrapped from DOM event — receives the parsed number(s).' },\n { name: 'min', type: 'number', defaultValue: '0', description: 'Lower bound.' },\n { name: 'max', type: 'number', defaultValue: '100', description: 'Upper bound.' },\n { name: 'step', type: 'number', defaultValue: '1', description: 'Increment per arrow/drag tick.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
@@ -58,7 +58,7 @@ const sliderDef = {
|
|
|
58
58
|
{ name: "onChange", description: "Fires continuously while the user drags either thumb. Payload is the full [start, end] range.", payload: "{ value: [number, number] }", showWhen: { mode: "range" } }
|
|
59
59
|
],
|
|
60
60
|
api: {
|
|
61
|
-
importPath: "@viax/uxm/ui",
|
|
61
|
+
importPath: "@viax.io/uxm/ui",
|
|
62
62
|
importNames: ["Slider", "RangeSlider"],
|
|
63
63
|
props: [
|
|
64
64
|
{ name: "value", type: "number // (Slider) | [number, number] // (RangeSlider)", description: "Current value. Tuple for RangeSlider." },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/slider.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sliderDef: ComponentDef = {\n id: 'slider',\n name: 'Slider',\n category: 'Inputs',\n description: 'Native range slider with themable track and thumb. Two modes: `single` is a one-thumb value picker; `range` is a dual-thumb start/end selector. Both modes share the same theming surface. State knobs cover default / hover / focus / disabled — only the thumb changes across interaction states; track + accent stay constant.',\n styleProperties: [\n // Default — track + thumb both visible since slider always has both\n { key: 'trackColor', label: 'Track', control: 'color', defaultValue: 'var(--color-border)', section: 'states', showWhen: { state: 'default' } },\n { key: 'accentColor', label: 'Accent (Filled)', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n { key: 'thumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n // Hover — thumb tint when hovered or actively being dragged (one\n // knob covers both since the visual difference is rarely worth\n // exposing as two; the underlying CSS still applies `:active`).\n { key: 'hoverThumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { state: 'hover' } },\n // Focus — single shared ring around the thumb / track\n { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled — shared opacity\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 style — always visible\n { key: 'trackHeight', label: 'Track Height', control: 'number', defaultValue: 6, min: 2, max: 16, step: 1, unit: 'px' },\n { key: 'trackRadius', label: 'Track Radius', control: 'slider', defaultValue: 999, min: 0, max: 999, step: 1, unit: 'px' },\n { key: 'thumbSize', label: 'Thumb Size', control: 'number', defaultValue: 14, min: 8, max: 24, step: 1, unit: 'px' },\n // Range-mode-only — value labels and show toggles. Grouped into\n // their own section so the panel's auto-derived \"Per Mode · Range\"\n // scope label applies only to these knobs and doesn't bleed into\n // the truly-shared STYLE section above (Track Height / Radius /\n // Thumb Size, which apply uniformly to both modes).\n { key: 'valueColor', label: 'Value Label Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'valueSize', label: 'Value Label Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showStart', label: 'Show Start', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showEnd', label: 'Show End', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showRange', label: 'Show Range', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\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 ],\n defaultValue: 'default',\n },\n {\n key: 'mode',\n label: 'Mode',\n options: [\n { value: 'single', label: 'Single' },\n { value: 'range', label: 'Range' },\n ],\n defaultValue: 'single',\n },\n ],\n events: [\n { name: 'onChange', description: 'Fires continuously while the user drags the thumb. High-frequency — debounce before persisting.', payload: '{ value: number }', showWhen: { mode: 'single' } },\n { name: 'onChange', description: 'Fires continuously while the user drags either thumb. Payload is the full [start, end] range.', payload: '{ value: [number, number] }', showWhen: { mode: 'range' } },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: ['Slider', 'RangeSlider'],\n props: [\n { name: 'value', type: 'number // (Slider) | [number, number] // (RangeSlider)', description: 'Current value. Tuple for RangeSlider.' },\n { name: 'onChange', type: '(value: number) => void // or ([start, end]) => void', description: 'Change handler. Already unwrapped from DOM event — receives the parsed number(s).' },\n { name: 'min', type: 'number', defaultValue: '0', description: 'Lower bound.' },\n { name: 'max', type: 'number', defaultValue: '100', description: 'Upper bound.' },\n { name: 'step', type: 'number', defaultValue: '1', description: 'Increment per arrow/drag tick.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/slider.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sliderDef: ComponentDef = {\n id: 'slider',\n name: 'Slider',\n category: 'Inputs',\n description: 'Native range slider with themable track and thumb. Two modes: `single` is a one-thumb value picker; `range` is a dual-thumb start/end selector. Both modes share the same theming surface. State knobs cover default / hover / focus / disabled — only the thumb changes across interaction states; track + accent stay constant.',\n styleProperties: [\n // Default — track + thumb both visible since slider always has both\n { key: 'trackColor', label: 'Track', control: 'color', defaultValue: 'var(--color-border)', section: 'states', showWhen: { state: 'default' } },\n { key: 'accentColor', label: 'Accent (Filled)', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n { key: 'thumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n // Hover — thumb tint when hovered or actively being dragged (one\n // knob covers both since the visual difference is rarely worth\n // exposing as two; the underlying CSS still applies `:active`).\n { key: 'hoverThumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { state: 'hover' } },\n // Focus — single shared ring around the thumb / track\n { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled — shared opacity\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 style — always visible\n { key: 'trackHeight', label: 'Track Height', control: 'number', defaultValue: 6, min: 2, max: 16, step: 1, unit: 'px' },\n { key: 'trackRadius', label: 'Track Radius', control: 'slider', defaultValue: 999, min: 0, max: 999, step: 1, unit: 'px' },\n { key: 'thumbSize', label: 'Thumb Size', control: 'number', defaultValue: 14, min: 8, max: 24, step: 1, unit: 'px' },\n // Range-mode-only — value labels and show toggles. Grouped into\n // their own section so the panel's auto-derived \"Per Mode · Range\"\n // scope label applies only to these knobs and doesn't bleed into\n // the truly-shared STYLE section above (Track Height / Radius /\n // Thumb Size, which apply uniformly to both modes).\n { key: 'valueColor', label: 'Value Label Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'valueSize', label: 'Value Label Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showStart', label: 'Show Start', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showEnd', label: 'Show End', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n { key: 'showRange', label: 'Show Range', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\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 ],\n defaultValue: 'default',\n },\n {\n key: 'mode',\n label: 'Mode',\n options: [\n { value: 'single', label: 'Single' },\n { value: 'range', label: 'Range' },\n ],\n defaultValue: 'single',\n },\n ],\n events: [\n { name: 'onChange', description: 'Fires continuously while the user drags the thumb. High-frequency — debounce before persisting.', payload: '{ value: number }', showWhen: { mode: 'single' } },\n { name: 'onChange', description: 'Fires continuously while the user drags either thumb. Payload is the full [start, end] range.', payload: '{ value: [number, number] }', showWhen: { mode: 'range' } },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: ['Slider', 'RangeSlider'],\n props: [\n { name: 'value', type: 'number // (Slider) | [number, number] // (RangeSlider)', description: 'Current value. Tuple for RangeSlider.' },\n { name: 'onChange', type: '(value: number) => void // or ([start, end]) => void', description: 'Change handler. Already unwrapped from DOM event — receives the parsed number(s).' },\n { name: 'min', type: 'number', defaultValue: '0', description: 'Lower bound.' },\n { name: 'max', type: 'number', defaultValue: '100', description: 'Upper bound.' },\n { name: 'step', type: 'number', defaultValue: '1', description: 'Increment per arrow/drag tick.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
|
|
@@ -109,7 +109,7 @@ const timeInputDef = {
|
|
|
109
109
|
{ name: "onBlur", description: "Fires when the field loses focus.", payload: "FocusEvent" }
|
|
110
110
|
],
|
|
111
111
|
api: {
|
|
112
|
-
importPath: "@viax/uxm/ui",
|
|
112
|
+
importPath: "@viax.io/uxm/ui",
|
|
113
113
|
importNames: "TimeInput",
|
|
114
114
|
props: [
|
|
115
115
|
{ name: "value", type: "string", description: 'Current value (controlled). 24h: `"HH:MM"`. 12h: `"HH:MM AM"` or `"HH:MM PM"`.' },
|