@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/lib/registry/inputs/currency-input.cjs

@@ -0,0 +1,112 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var currency_input_exports = {};
+__export(currency_input_exports, {
+  currencyInputDef: () => currencyInputDef
+});
+module.exports = __toCommonJS(currency_input_exports);
+const currencyInputDef = {
+  id: "currency-input",
+  name: "Currency Input",
+  category: "Inputs",
+  description: "Monetary input with a leading interactive currency picker (searchable popover, ~20 curated currencies by default). End users pick the currency at runtime \u2014 there's no design-time currency variant. Value is an object `{ currency, amount }`; amount is the raw digit string (consumers get clean data, the component owns display formatting). Standard finance UX: focus reveals raw digits, blur renders locale-formatted with thousands separators.",
+  styleProperties: [
+    // Default
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "color", label: "Text", control: "color", defaultValue: "var(--color-text)", section: "fieldColors", showWhen: { state: "default" } },
+    // Hover
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "hover" } },
+    { key: "hoverBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "hover" } },
+    { key: "pickerHoverBg", label: "Picker Hover", control: "color", defaultValue: "var(--color-surface-alt)", section: "fieldColors", showWhen: { state: "hover" } },
+    // Focus
+    { key: "focusBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "focus" } },
+    { key: "focusRing", label: "Ring", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledColor", label: "Text", control: "color", defaultValue: "var(--color-text-muted)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Error
+    { key: "errorBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorBorder", label: "Border", control: "color", defaultValue: "var(--color-danger-text)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorColor", label: "Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+    // Shared geometry — same across all states
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 10, min: 4, max: 20, step: 2, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 10, max: 20, step: 1, unit: "px" },
+    // Shared trim — picker chrome that stays constant across states.
+    // Symbol / caret / divider don't morph between hover / focus /
+    // disabled in any meaningful way (the field bg + border do all
+    // the state work). Keeping them out of the per-state section
+    // prevents the misleading "tune these per state" affordance.
+    { key: "dividerColor", label: "Picker Divider", control: "color", defaultValue: "var(--color-border)" },
+    { key: "symbolColor", label: "Symbol", control: "color", defaultValue: "var(--color-text)" },
+    { key: "caretColor", label: "Caret", control: "color", defaultValue: "var(--color-text-muted)" }
+    // No popover knobs here: the currency picker is the shared Listbox panel,
+    // themed once via the `listbox` registry entry (`.uxm-listbox__panel`).
+  ],
+  layoutVariants: [
+    // No `currency` variant — that's an end-user runtime choice
+    // handled by the picker. The picker always sits on the left
+    // (the prefix `$1,234.56` read), so there's no position knob.
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" },
+        { value: "error", label: "Error" }
+      ],
+      defaultValue: "default"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires on every keystroke or currency pick. Payload is the next `{ currency, amount }` object.", payload: "{ currency: string, amount: string }" },
+    { name: "onOpen", description: "Fires when the currency popover opens.", payload: "void" },
+    { name: "onClose", description: "Fires when the currency popover closes (selection or outside click).", payload: "void" },
+    { name: "onFocus", description: "Fires when the amount input receives focus. Display flips from formatted to raw digits.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the amount input loses focus. Triggers min/max clamping AND switches display back to locale-formatted.", payload: "FocusEvent" }
+  ],
+  api: {
+    importPath: "@viax.io/uxm/ui",
+    importNames: "CurrencyInput",
+    props: [
+      { name: "value", type: "{ currency: string, amount: string }", description: "Controlled value. `currency` is an ISO 4217 code; `amount` is the raw digit string." },
+      { name: "onChange", type: "(value: CurrencyValue) => void", description: "Called with the next value after each keystroke or currency pick." },
+      { name: "defaultValue", type: "CurrencyValue", defaultValue: '{ currency: "USD", amount: "" }', description: "Initial value for uncontrolled usage." },
+      { name: "currencies", type: "Currency[]", defaultValue: "CURATED_CURRENCIES", description: "List shown in the picker. Default is ~20 curated currencies. Pass a single-entry array to effectively lock currency selection." },
+      { name: "locale", type: "string", defaultValue: '"en-US"', description: "BCP-47 locale tag. Drives thousands separator style on blur display." },
+      { name: "allowNegative", type: "boolean", defaultValue: "false", description: "Allow a leading `-` sign for refunds / credits." },
+      { name: "clearable", type: "boolean", defaultValue: "true", description: "Show a trailing clear (\u2715) button when the amount has a value. Clearing wipes the amount and keeps the selected currency." },
+      { name: "min", type: "number", description: "Lower bound on the amount. Clamped on blur." },
+      { name: "max", type: "number", description: "Upper bound on the amount. Clamped on blur." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the input and the currency picker." }
+    ]
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  currencyInputDef
+});
+//# sourceMappingURL=currency-input.cjs.map

package/dist/studio/lib/registry/inputs/currency-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/currency-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const currencyInputDef: ComponentDef = {\n  id: 'currency-input',\n  name: 'Currency Input',\n  category: 'Inputs',\n  description: \"Monetary input with a leading interactive currency picker (searchable popover, ~20 curated currencies by default). End users pick the currency at runtime — there's no design-time currency variant. Value is an object `{ currency, amount }`; amount is the raw digit string (consumers get clean data, the component owns display formatting). Standard finance UX: focus reveals raw digits, blur renders locale-formatted with thousands separators.\",\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: 'pickerHoverBg', label: 'Picker 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: 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    // Shared trim — picker chrome that stays constant across states.\n    // Symbol / caret / divider 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: 'Picker Divider', control: 'color', defaultValue: 'var(--color-border)' },\n    { key: 'symbolColor', label: 'Symbol', control: 'color', defaultValue: 'var(--color-text)' },\n    { key: 'caretColor', label: 'Caret', control: 'color', defaultValue: 'var(--color-text-muted)' },\n    // No popover knobs here: the currency picker is the shared Listbox panel,\n    // themed once via the `listbox` registry entry (`.uxm-listbox__panel`).\n  ],\n  layoutVariants: [\n    // No `currency` variant — that's an end-user runtime choice\n    // handled by the picker. The picker always sits on the left\n    // (the prefix `$1,234.56` read), so there's no position knob.\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 or currency pick. Payload is the next `{ currency, amount }` object.', payload: '{ currency: string, amount: string }' },\n    { name: 'onOpen', description: 'Fires when the currency popover opens.', payload: 'void' },\n    { name: 'onClose', description: 'Fires when the currency popover closes (selection or outside click).', payload: 'void' },\n    { name: 'onFocus', description: 'Fires when the amount input receives focus. Display flips from formatted to raw digits.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the amount input loses focus. Triggers min/max clamping AND switches display back to locale-formatted.', payload: 'FocusEvent' },\n  ],\n  api: {\n    importPath: '@viax.io/uxm/ui',\n    importNames: 'CurrencyInput',\n    props: [\n      { name: 'value', type: '{ currency: string, amount: string }', description: 'Controlled value. `currency` is an ISO 4217 code; `amount` is the raw digit string.' },\n      { name: 'onChange', type: '(value: CurrencyValue) => void', description: 'Called with the next value after each keystroke or currency pick.' },\n      { name: 'defaultValue', type: 'CurrencyValue', defaultValue: '{ currency: \"USD\", amount: \"\" }', description: 'Initial value for uncontrolled usage.' },\n      { name: 'currencies', type: 'Currency[]', defaultValue: 'CURATED_CURRENCIES', description: 'List shown in the picker. Default is ~20 curated currencies. Pass a single-entry array to effectively lock currency selection.' },\n      { name: 'locale', type: 'string', defaultValue: '\"en-US\"', description: 'BCP-47 locale tag. Drives thousands separator style on blur display.' },\n      { name: 'allowNegative', type: 'boolean', defaultValue: 'false', description: 'Allow a leading `-` sign for refunds / credits.' },\n      { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Show a trailing clear (✕) button when the amount has a value. Clearing wipes the amount and keeps the selected currency.' },\n      { name: 'min', type: 'number', description: 'Lower bound on the amount. Clamped on blur.' },\n      { name: 'max', type: 'number', description: 'Upper bound on the amount. Clamped on blur.' },\n      { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input and the currency picker.' },\n    ],\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/currency-input.d.ts

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

package/dist/studio/lib/registry/inputs/currency-input.d.ts.map

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

package/dist/studio/lib/registry/inputs/currency-input.js

@@ -0,0 +1,88 @@
+const currencyInputDef = {
+  id: "currency-input",
+  name: "Currency Input",
+  category: "Inputs",
+  description: "Monetary input with a leading interactive currency picker (searchable popover, ~20 curated currencies by default). End users pick the currency at runtime \u2014 there's no design-time currency variant. Value is an object `{ currency, amount }`; amount is the raw digit string (consumers get clean data, the component owns display formatting). Standard finance UX: focus reveals raw digits, blur renders locale-formatted with thousands separators.",
+  styleProperties: [
+    // Default
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "color", label: "Text", control: "color", defaultValue: "var(--color-text)", section: "fieldColors", showWhen: { state: "default" } },
+    // Hover
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "hover" } },
+    { key: "hoverBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "hover" } },
+    { key: "pickerHoverBg", label: "Picker Hover", control: "color", defaultValue: "var(--color-surface-alt)", section: "fieldColors", showWhen: { state: "hover" } },
+    // Focus
+    { key: "focusBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "focus" } },
+    { key: "focusRing", label: "Ring", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledColor", label: "Text", control: "color", defaultValue: "var(--color-text-muted)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Error
+    { key: "errorBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorBorder", label: "Border", control: "color", defaultValue: "var(--color-danger-text)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorColor", label: "Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+    // Shared geometry — same across all states
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 10, min: 4, max: 20, step: 2, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 10, max: 20, step: 1, unit: "px" },
+    // Shared trim — picker chrome that stays constant across states.
+    // Symbol / caret / divider don't morph between hover / focus /
+    // disabled in any meaningful way (the field bg + border do all
+    // the state work). Keeping them out of the per-state section
+    // prevents the misleading "tune these per state" affordance.
+    { key: "dividerColor", label: "Picker Divider", control: "color", defaultValue: "var(--color-border)" },
+    { key: "symbolColor", label: "Symbol", control: "color", defaultValue: "var(--color-text)" },
+    { key: "caretColor", label: "Caret", control: "color", defaultValue: "var(--color-text-muted)" }
+    // No popover knobs here: the currency picker is the shared Listbox panel,
+    // themed once via the `listbox` registry entry (`.uxm-listbox__panel`).
+  ],
+  layoutVariants: [
+    // No `currency` variant — that's an end-user runtime choice
+    // handled by the picker. The picker always sits on the left
+    // (the prefix `$1,234.56` read), so there's no position knob.
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" },
+        { value: "error", label: "Error" }
+      ],
+      defaultValue: "default"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires on every keystroke or currency pick. Payload is the next `{ currency, amount }` object.", payload: "{ currency: string, amount: string }" },
+    { name: "onOpen", description: "Fires when the currency popover opens.", payload: "void" },
+    { name: "onClose", description: "Fires when the currency popover closes (selection or outside click).", payload: "void" },
+    { name: "onFocus", description: "Fires when the amount input receives focus. Display flips from formatted to raw digits.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the amount input loses focus. Triggers min/max clamping AND switches display back to locale-formatted.", payload: "FocusEvent" }
+  ],
+  api: {
+    importPath: "@viax.io/uxm/ui",
+    importNames: "CurrencyInput",
+    props: [
+      { name: "value", type: "{ currency: string, amount: string }", description: "Controlled value. `currency` is an ISO 4217 code; `amount` is the raw digit string." },
+      { name: "onChange", type: "(value: CurrencyValue) => void", description: "Called with the next value after each keystroke or currency pick." },
+      { name: "defaultValue", type: "CurrencyValue", defaultValue: '{ currency: "USD", amount: "" }', description: "Initial value for uncontrolled usage." },
+      { name: "currencies", type: "Currency[]", defaultValue: "CURATED_CURRENCIES", description: "List shown in the picker. Default is ~20 curated currencies. Pass a single-entry array to effectively lock currency selection." },
+      { name: "locale", type: "string", defaultValue: '"en-US"', description: "BCP-47 locale tag. Drives thousands separator style on blur display." },
+      { name: "allowNegative", type: "boolean", defaultValue: "false", description: "Allow a leading `-` sign for refunds / credits." },
+      { name: "clearable", type: "boolean", defaultValue: "true", description: "Show a trailing clear (\u2715) button when the amount has a value. Clearing wipes the amount and keeps the selected currency." },
+      { name: "min", type: "number", description: "Lower bound on the amount. Clamped on blur." },
+      { name: "max", type: "number", description: "Upper bound on the amount. Clamped on blur." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the input and the currency picker." }
+    ]
+  }
+};
+export {
+  currencyInputDef
+};
+//# sourceMappingURL=currency-input.js.map

package/dist/studio/lib/registry/inputs/currency-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/currency-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const currencyInputDef: ComponentDef = {\n  id: 'currency-input',\n  name: 'Currency Input',\n  category: 'Inputs',\n  description: \"Monetary input with a leading interactive currency picker (searchable popover, ~20 curated currencies by default). End users pick the currency at runtime — there's no design-time currency variant. Value is an object `{ currency, amount }`; amount is the raw digit string (consumers get clean data, the component owns display formatting). Standard finance UX: focus reveals raw digits, blur renders locale-formatted with thousands separators.\",\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: 'pickerHoverBg', label: 'Picker 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: 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    // Shared trim — picker chrome that stays constant across states.\n    // Symbol / caret / divider 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: 'Picker Divider', control: 'color', defaultValue: 'var(--color-border)' },\n    { key: 'symbolColor', label: 'Symbol', control: 'color', defaultValue: 'var(--color-text)' },\n    { key: 'caretColor', label: 'Caret', control: 'color', defaultValue: 'var(--color-text-muted)' },\n    // No popover knobs here: the currency picker is the shared Listbox panel,\n    // themed once via the `listbox` registry entry (`.uxm-listbox__panel`).\n  ],\n  layoutVariants: [\n    // No `currency` variant — that's an end-user runtime choice\n    // handled by the picker. The picker always sits on the left\n    // (the prefix `$1,234.56` read), so there's no position knob.\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 or currency pick. Payload is the next `{ currency, amount }` object.', payload: '{ currency: string, amount: string }' },\n    { name: 'onOpen', description: 'Fires when the currency popover opens.', payload: 'void' },\n    { name: 'onClose', description: 'Fires when the currency popover closes (selection or outside click).', payload: 'void' },\n    { name: 'onFocus', description: 'Fires when the amount input receives focus. Display flips from formatted to raw digits.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the amount input loses focus. Triggers min/max clamping AND switches display back to locale-formatted.', payload: 'FocusEvent' },\n  ],\n  api: {\n    importPath: '@viax.io/uxm/ui',\n    importNames: 'CurrencyInput',\n    props: [\n      { name: 'value', type: '{ currency: string, amount: string }', description: 'Controlled value. `currency` is an ISO 4217 code; `amount` is the raw digit string.' },\n      { name: 'onChange', type: '(value: CurrencyValue) => void', description: 'Called with the next value after each keystroke or currency pick.' },\n      { name: 'defaultValue', type: 'CurrencyValue', defaultValue: '{ currency: \"USD\", amount: \"\" }', description: 'Initial value for uncontrolled usage.' },\n      { name: 'currencies', type: 'Currency[]', defaultValue: 'CURATED_CURRENCIES', description: 'List shown in the picker. Default is ~20 curated currencies. Pass a single-entry array to effectively lock currency selection.' },\n      { name: 'locale', type: 'string', defaultValue: '\"en-US\"', description: 'BCP-47 locale tag. Drives thousands separator style on blur display.' },\n      { name: 'allowNegative', type: 'boolean', defaultValue: 'false', description: 'Allow a leading `-` sign for refunds / credits.' },\n      { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Show a trailing clear (✕) button when the amount has a value. Clearing wipes the amount and keeps the selected currency.' },\n      { name: 'min', type: 'number', description: 'Lower bound on the amount. Clamped on blur.' },\n      { name: 'max', type: 'number', description: 'Upper bound on the amount. Clamped on blur.' },\n      { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input and the currency picker.' },\n    ],\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/date-input.cjs

@@ -0,0 +1,105 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var date_input_exports = {};
+__export(date_input_exports, {
+  dateInputDef: () => dateInputDef
+});
+module.exports = __toCommonJS(date_input_exports);
+const dateInputDef = {
+  id: "date-input",
+  name: "Date Input",
+  category: "Inputs",
+  description: "Date entry field with a trailing calendar icon and format-mask placeholder. State knobs cover default / hover / focus / disabled / error; the trailing calendar icon has its own hover knob since it's an interactive button.",
+  styleProperties: [
+    // Default
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "color", label: "Text", control: "color", defaultValue: "var(--color-text)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "iconColor", label: "Icon", control: "color", defaultValue: "var(--color-text-muted)", section: "fieldColors", showWhen: { state: "default" } },
+    // Hover
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "hover" } },
+    { key: "hoverBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "hover" } },
+    // Focus
+    { key: "focusBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "focus" } },
+    { key: "focusRing", label: "Ring", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledColor", label: "Text", control: "color", defaultValue: "var(--color-text-muted)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Error
+    { key: "errorBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorBorder", label: "Border", control: "color", defaultValue: "var(--color-danger-text)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorColor", label: "Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+    // Shared
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 99, step: 1, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 10, min: 4, max: 20, step: 2, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 10, max: 20, step: 1, unit: "px" },
+    { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 12, max: 24, step: 1, unit: "px" },
+    { key: "iconOffset", label: "Icon Offset", control: "number", defaultValue: 12, min: 4, max: 24, step: 1, unit: "px" },
+    { key: "iconHoverColor", label: "Icon Hover", control: "color", defaultValue: "var(--color-text)" }
+  ],
+  layoutVariants: [
+    {
+      key: "mode",
+      label: "Mode",
+      options: [
+        { value: "single", label: "Single Date" },
+        { value: "range", label: "Range" }
+      ],
+      defaultValue: "single"
+    },
+    {
+      key: "format",
+      label: "Format",
+      options: [
+        { value: "mdy", label: "MM/DD/YYYY" },
+        { value: "dmy", label: "DD/MM/YYYY" },
+        { value: "ymd", label: "YYYY-MM-DD" }
+      ],
+      defaultValue: "mdy"
+    },
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" },
+        { value: "error", label: "Error" }
+      ],
+      defaultValue: "default"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the picker selects a date or the user commits a manual edit.", payload: "{ value: Date | null }" },
+    { name: "onOpen", description: "Fires when the calendar popover opens.", payload: "void" },
+    { name: "onClose", description: "Fires when the calendar popover closes (selection or outside click).", payload: "void" },
+    { name: "onFocus", description: "Fires when the field receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the field loses focus.", payload: "FocusEvent" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dateInputDef
+});
+//# sourceMappingURL=date-input.cjs.map

package/dist/studio/lib/registry/inputs/date-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/date-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const dateInputDef: ComponentDef = {\n  id: 'date-input',\n  name: 'Date Input',\n  category: 'Inputs',\n  description: \"Date entry field with a trailing calendar icon and format-mask placeholder. State knobs cover default / hover / focus / disabled / error; the trailing calendar icon has its own hover knob since it's an interactive button.\",\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: '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: 'Icon Size', control: 'number', defaultValue: 16, min: 12, max: 24, step: 1, unit: 'px' },\n    { key: 'iconOffset', label: 'Icon Offset', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px' },\n    { key: 'iconHoverColor', label: 'Icon Hover', control: 'color', defaultValue: 'var(--color-text)' },\n  ],\n  layoutVariants: [\n    {\n      key: 'mode',\n      label: 'Mode',\n      options: [\n        { value: 'single', label: 'Single Date' },\n        { value: 'range', label: 'Range' },\n      ],\n      defaultValue: 'single',\n    },\n    {\n      key: 'format',\n      label: 'Format',\n      options: [\n        { value: 'mdy', label: 'MM/DD/YYYY' },\n        { value: 'dmy', label: 'DD/MM/YYYY' },\n        { value: 'ymd', label: 'YYYY-MM-DD' },\n      ],\n      defaultValue: 'mdy',\n    },\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the picker selects a date or the user commits a manual edit.', payload: '{ value: Date | null }' },\n    { name: 'onOpen', description: 'Fires when the calendar popover opens.', payload: 'void' },\n    { name: 'onClose', description: 'Fires when the calendar popover closes (selection or outside click).', payload: 'void' },\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};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/date-input.d.ts

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

package/dist/studio/lib/registry/inputs/date-input.d.ts.map

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

package/dist/studio/lib/registry/inputs/date-input.js

@@ -0,0 +1,81 @@
+const dateInputDef = {
+  id: "date-input",
+  name: "Date Input",
+  category: "Inputs",
+  description: "Date entry field with a trailing calendar icon and format-mask placeholder. State knobs cover default / hover / focus / disabled / error; the trailing calendar icon has its own hover knob since it's an interactive button.",
+  styleProperties: [
+    // Default
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "color", label: "Text", control: "color", defaultValue: "var(--color-text)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "iconColor", label: "Icon", control: "color", defaultValue: "var(--color-text-muted)", section: "fieldColors", showWhen: { state: "default" } },
+    // Hover
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "hover" } },
+    { key: "hoverBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "hover" } },
+    // Focus
+    { key: "focusBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "focus" } },
+    { key: "focusRing", label: "Ring", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledColor", label: "Text", control: "color", defaultValue: "var(--color-text-muted)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Error
+    { key: "errorBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorBorder", label: "Border", control: "color", defaultValue: "var(--color-danger-text)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorColor", label: "Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+    // Shared
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 99, step: 1, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 10, min: 4, max: 20, step: 2, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 10, max: 20, step: 1, unit: "px" },
+    { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 12, max: 24, step: 1, unit: "px" },
+    { key: "iconOffset", label: "Icon Offset", control: "number", defaultValue: 12, min: 4, max: 24, step: 1, unit: "px" },
+    { key: "iconHoverColor", label: "Icon Hover", control: "color", defaultValue: "var(--color-text)" }
+  ],
+  layoutVariants: [
+    {
+      key: "mode",
+      label: "Mode",
+      options: [
+        { value: "single", label: "Single Date" },
+        { value: "range", label: "Range" }
+      ],
+      defaultValue: "single"
+    },
+    {
+      key: "format",
+      label: "Format",
+      options: [
+        { value: "mdy", label: "MM/DD/YYYY" },
+        { value: "dmy", label: "DD/MM/YYYY" },
+        { value: "ymd", label: "YYYY-MM-DD" }
+      ],
+      defaultValue: "mdy"
+    },
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" },
+        { value: "error", label: "Error" }
+      ],
+      defaultValue: "default"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the picker selects a date or the user commits a manual edit.", payload: "{ value: Date | null }" },
+    { name: "onOpen", description: "Fires when the calendar popover opens.", payload: "void" },
+    { name: "onClose", description: "Fires when the calendar popover closes (selection or outside click).", payload: "void" },
+    { name: "onFocus", description: "Fires when the field receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the field loses focus.", payload: "FocusEvent" }
+  ]
+};
+export {
+  dateInputDef
+};
+//# sourceMappingURL=date-input.js.map

package/dist/studio/lib/registry/inputs/date-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/date-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const dateInputDef: ComponentDef = {\n  id: 'date-input',\n  name: 'Date Input',\n  category: 'Inputs',\n  description: \"Date entry field with a trailing calendar icon and format-mask placeholder. State knobs cover default / hover / focus / disabled / error; the trailing calendar icon has its own hover knob since it's an interactive button.\",\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: '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: 'Icon Size', control: 'number', defaultValue: 16, min: 12, max: 24, step: 1, unit: 'px' },\n    { key: 'iconOffset', label: 'Icon Offset', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px' },\n    { key: 'iconHoverColor', label: 'Icon Hover', control: 'color', defaultValue: 'var(--color-text)' },\n  ],\n  layoutVariants: [\n    {\n      key: 'mode',\n      label: 'Mode',\n      options: [\n        { value: 'single', label: 'Single Date' },\n        { value: 'range', label: 'Range' },\n      ],\n      defaultValue: 'single',\n    },\n    {\n      key: 'format',\n      label: 'Format',\n      options: [\n        { value: 'mdy', label: 'MM/DD/YYYY' },\n        { value: 'dmy', label: 'DD/MM/YYYY' },\n        { value: 'ymd', label: 'YYYY-MM-DD' },\n      ],\n      defaultValue: 'mdy',\n    },\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the picker selects a date or the user commits a manual edit.', payload: '{ value: Date | null }' },\n    { name: 'onOpen', description: 'Fires when the calendar popover opens.', payload: 'void' },\n    { name: 'onClose', description: 'Fires when the calendar popover closes (selection or outside click).', payload: 'void' },\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};\n"],"mappings":"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","names":[]}