@viax.io/uxm 4.44.0 → 4.46.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [4.46.0](https://github.com/viax-io/uxm/compare/v4.45.0...v4.46.0) (2026-09-22)
+
+
+### Features
+
+* **radio-group:** add a card variant for visual single-select ([5c9aa80](https://github.com/viax-io/uxm/commit/5c9aa801bf30630b628d7c3f312ade6dffc09036)), closes [#EBEBEA](https://github.com/viax-io/uxm/issues/EBEBEA)
+
+# [4.45.0](https://github.com/viax-io/uxm/compare/v4.44.0...v4.45.0) (2026-09-22)
+
+
+### Features
+
+* **button,icon-button:** declare ref on the button family ([ee76076](https://github.com/viax-io/uxm/commit/ee760764465faf8054f550d816d2c188adf0bc82))
+
 # [4.44.0](https://github.com/viax-io/uxm/compare/v4.43.2...v4.44.0) (2026-09-22)
 
 

package/dist/studio/lib/registry/inputs/radio-group.cjs

@@ -50,7 +50,15 @@ const radioGroupDef = {
     // Error — the circles + option labels stay neutral; the group message
     // below is the sole signal (errorColor colors it, errorMessageSize sizes it).
     { 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" } }
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+    // Card presentation — geometry only. The frame, hover and focus colours
+    // come from the shared `--uxm-radio-group-*` vars the row already uses, so
+    // a theme cannot drift between the two presentations.
+    { key: "cardPadding", label: "Padding", control: "number", defaultValue: 12, min: 4, max: 32, step: 2, unit: "px", section: "card", showWhen: { variant: "card" } },
+    { key: "cardRadius", label: "Radius", control: "slider", defaultValue: 8, min: 0, max: 20, step: 1, unit: "px", section: "card", showWhen: { variant: "card" } },
+    { key: "cardGap", label: "Content Gap", control: "number", defaultValue: 4, min: 0, max: 16, step: 1, unit: "px", section: "card", showWhen: { variant: "card" } },
+    { key: "cardBorderWidth", label: "Border Width", control: "number", defaultValue: 1, min: 1, max: 4, step: 1, unit: "px", section: "card", showWhen: { variant: "card" } },
+    { key: "cardBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "card", showWhen: { variant: "card" } }
   ],
   layoutVariants: [
     {
@@ -65,6 +73,30 @@ const radioGroupDef = {
       ],
       defaultValue: "default"
     },
+    {
+      // Presentation, not state: `card` swaps the option from a
+      // `[circle] label` row to a selectable tile. Every colour it paints
+      // resolves through the same `--uxm-radio-group-*` vars the row uses, so
+      // the States picker above keeps meaning what it means in both.
+      key: "variant",
+      label: "Presentation",
+      options: [
+        { value: "default", label: "Row" },
+        { value: "card", label: "Card" }
+      ],
+      defaultValue: "default"
+    },
+    {
+      key: "indicator",
+      label: "Indicator",
+      options: [
+        { value: "hidden", label: "Frame only" },
+        { value: "corner", label: "Corner dot" }
+      ],
+      defaultValue: "hidden",
+      // Meaningless on a row, where the circle IS the control.
+      showWhen: { variant: "card" }
+    },
     {
       key: "direction",
       label: "Direction",

package/dist/studio/lib/registry/inputs/radio-group.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/radio-group.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const radioGroupDef: ComponentDef = {\n  id: 'radio-group',\n  name: 'Radio Group',\n  category: 'Inputs',\n  description: 'Radio button group with multiple options. State knobs cover unselected × selected across default / hover, plus shared focus ring and disabled opacity.',\n  styleProperties: [\n    // Default — unselected\n    { key: 'unselectedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'unselectedColors', showWhen: { state: 'default' } },\n    { key: 'unselectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'unselectedColors', showWhen: { state: 'default' } },\n    // Default — selected\n    { key: 'selectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'selectedColors', showWhen: { state: 'default' } },\n    { key: 'dotColor', label: 'Dot', control: 'color', defaultValue: 'var(--color-accent)', section: 'selectedColors', showWhen: { state: 'default' } },\n    // Hover — unselected\n    { key: 'hoverUnselectedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'unselectedColors', showWhen: { state: 'hover' } },\n    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)\n    { key: 'hoverUnselectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'unselectedColors', showWhen: { state: 'hover' } },\n    // Hover — selected\n    { key: 'hoverSelectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'selectedColors', showWhen: { state: 'hover' } },\n    { key: 'hoverDotColor', label: 'Dot', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'selectedColors', showWhen: { state: 'hover' } },\n    // Focus — single shared ring color\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 — always visible\n    { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 14, max: 32, step: 2, unit: 'px' },\n    { key: 'gap', label: 'Item Gap', control: 'number', defaultValue: 16, min: 4, max: 32, step: 4, unit: 'px' },\n    // Error — the circles + option labels stay neutral; the group message\n    // below is the sole signal (errorColor colors it, errorMessageSize sizes it).\n    { key: 'errorColor', label: 'Message', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'errorState', showWhen: { state: 'error' } },\n    { key: 'errorMessageSize', label: 'Message Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px', section: 'errorState', showWhen: { state: 'error' } },\n  ],\n  layoutVariants: [\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n    {\n      key: 'direction',\n      label: 'Direction',\n      options: [\n        { value: 'vertical', label: 'Vertical' },\n        { value: 'horizontal', label: 'Horizontal' },\n      ],\n      defaultValue: 'vertical',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user picks a different radio option.', payload: '{ value: string }' },\n  ],\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/radio-group.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const radioGroupDef: ComponentDef = {\n  id: 'radio-group',\n  name: 'Radio Group',\n  category: 'Inputs',\n  description: 'Radio button group with multiple options. State knobs cover unselected × selected across default / hover, plus shared focus ring and disabled opacity.',\n  styleProperties: [\n    // Default — unselected\n    { key: 'unselectedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'unselectedColors', showWhen: { state: 'default' } },\n    { key: 'unselectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'unselectedColors', showWhen: { state: 'default' } },\n    // Default — selected\n    { key: 'selectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'selectedColors', showWhen: { state: 'default' } },\n    { key: 'dotColor', label: 'Dot', control: 'color', defaultValue: 'var(--color-accent)', section: 'selectedColors', showWhen: { state: 'default' } },\n    // Hover — unselected\n    { key: 'hoverUnselectedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'unselectedColors', showWhen: { state: 'hover' } },\n    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)\n    { key: 'hoverUnselectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'unselectedColors', showWhen: { state: 'hover' } },\n    // Hover — selected\n    { key: 'hoverSelectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'selectedColors', showWhen: { state: 'hover' } },\n    { key: 'hoverDotColor', label: 'Dot', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'selectedColors', showWhen: { state: 'hover' } },\n    // Focus — single shared ring color\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 — always visible\n    { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 14, max: 32, step: 2, unit: 'px' },\n    { key: 'gap', label: 'Item Gap', control: 'number', defaultValue: 16, min: 4, max: 32, step: 4, unit: 'px' },\n    // Error — the circles + option labels stay neutral; the group message\n    // below is the sole signal (errorColor colors it, errorMessageSize sizes it).\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    // Card presentation — geometry only. The frame, hover and focus colours\n    // come from the shared `--uxm-radio-group-*` vars the row already uses, so\n    // a theme cannot drift between the two presentations.\n    { key: 'cardPadding', label: 'Padding', control: 'number', defaultValue: 12, min: 4, max: 32, step: 2, unit: 'px', section: 'card', showWhen: { variant: 'card' } },\n    { key: 'cardRadius', label: 'Radius', control: 'slider', defaultValue: 8, min: 0, max: 20, step: 1, unit: 'px', section: 'card', showWhen: { variant: 'card' } },\n    { key: 'cardGap', label: 'Content Gap', control: 'number', defaultValue: 4, min: 0, max: 16, step: 1, unit: 'px', section: 'card', showWhen: { variant: 'card' } },\n    { key: 'cardBorderWidth', label: 'Border Width', control: 'number', defaultValue: 1, min: 1, max: 4, step: 1, unit: 'px', section: 'card', showWhen: { variant: 'card' } },\n    { key: 'cardBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'card', showWhen: { variant: 'card' } },\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      // Presentation, not state: `card` swaps the option from a\n      // `[circle] label` row to a selectable tile. Every colour it paints\n      // resolves through the same `--uxm-radio-group-*` vars the row uses, so\n      // the States picker above keeps meaning what it means in both.\n      key: 'variant',\n      label: 'Presentation',\n      options: [\n        { value: 'default', label: 'Row' },\n        { value: 'card', label: 'Card' },\n      ],\n      defaultValue: 'default',\n    },\n    {\n      key: 'indicator',\n      label: 'Indicator',\n      options: [\n        { value: 'hidden', label: 'Frame only' },\n        { value: 'corner', label: 'Corner dot' },\n      ],\n      defaultValue: 'hidden',\n      // Meaningless on a row, where the circle IS the control.\n      showWhen: { variant: 'card' },\n    },\n    {\n      key: 'direction',\n      label: 'Direction',\n      options: [\n        { value: 'vertical', label: 'Vertical' },\n        { value: 'horizontal', label: 'Horizontal' },\n      ],\n      defaultValue: 'vertical',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user picks a different radio option.', payload: '{ value: string }' },\n  ],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,gBAA8B;AAAA,EACzC,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA,IAEf,EAAE,KAAK,gBAAgB,OAAO,cAAc,SAAS,SAAS,cAAc,eAAe,SAAS,oBAAoB,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IACvJ,EAAE,KAAK,oBAAoB,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,oBAAoB,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA;AAAA,IAE/J,EAAE,KAAK,kBAAkB,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,kBAAkB,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IAC3J,EAAE,KAAK,YAAY,OAAO,OAAO,SAAS,SAAS,cAAc,uBAAuB,SAAS,kBAAkB,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA;AAAA,IAElJ,EAAE,KAAK,qBAAqB,OAAO,cAAc,SAAS,SAAS,cAAc,eAAe,SAAS,oBAAoB,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAE1J,EAAE,KAAK,yBAAyB,OAAO,UAAU,SAAS,SAAS,cAAc,4BAA4B,SAAS,oBAAoB,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAEvK,EAAE,KAAK,uBAAuB,OAAO,UAAU,SAAS,SAAS,cAAc,4BAA4B,SAAS,kBAAkB,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACnK,EAAE,KAAK,iBAAiB,OAAO,OAAO,SAAS,SAAS,cAAc,4BAA4B,SAAS,kBAAkB,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAE1J,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,SAAS,cAAc,uBAAuB,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAEpJ,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,QAAQ,OAAO,QAAQ,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACzG,EAAE,KAAK,OAAO,OAAO,YAAY,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA;AAAA;AAAA,IAG3G,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;AAAA;AAAA,IAIlL,EAAE,KAAK,eAAe,OAAO,WAAW,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,SAAS,QAAQ,UAAU,EAAE,SAAS,OAAO,EAAE;AAAA,IAClK,EAAE,KAAK,cAAc,OAAO,UAAU,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,SAAS,QAAQ,UAAU,EAAE,SAAS,OAAO,EAAE;AAAA,IAC/J,EAAE,KAAK,WAAW,OAAO,eAAe,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,SAAS,QAAQ,UAAU,EAAE,SAAS,OAAO,EAAE;AAAA,IACjK,EAAE,KAAK,mBAAmB,OAAO,gBAAgB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,MAAM,SAAS,QAAQ,UAAU,EAAE,SAAS,OAAO,EAAE;AAAA,IACzK,EAAE,KAAK,UAAU,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,QAAQ,UAAU,EAAE,SAAS,OAAO,EAAE;AAAA,EAC5I;AAAA,EACA,gBAAgB;AAAA,IACd;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,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,WAAW,OAAO,MAAM;AAAA,QACjC,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,MACjC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,UAAU,OAAO,aAAa;AAAA,QACvC,EAAE,OAAO,UAAU,OAAO,aAAa;AAAA,MACzC;AAAA,MACA,cAAc;AAAA;AAAA,MAEd,UAAU,EAAE,SAAS,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,QACvC,EAAE,OAAO,cAAc,OAAO,aAAa;AAAA,MAC7C;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,YAAY,aAAa,uDAAuD,SAAS,oBAAoB;AAAA,EACvH;AACF;","names":[]}

package/dist/studio/lib/registry/inputs/radio-group.d.ts.map

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

package/dist/studio/lib/registry/inputs/radio-group.js

@@ -27,7 +27,15 @@ const radioGroupDef = {
     // Error — the circles + option labels stay neutral; the group message
     // below is the sole signal (errorColor colors it, errorMessageSize sizes it).
     { 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" } }
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+    // Card presentation — geometry only. The frame, hover and focus colours
+    // come from the shared `--uxm-radio-group-*` vars the row already uses, so
+    // a theme cannot drift between the two presentations.
+    { key: "cardPadding", label: "Padding", control: "number", defaultValue: 12, min: 4, max: 32, step: 2, unit: "px", section: "card", showWhen: { variant: "card" } },
+    { key: "cardRadius", label: "Radius", control: "slider", defaultValue: 8, min: 0, max: 20, step: 1, unit: "px", section: "card", showWhen: { variant: "card" } },
+    { key: "cardGap", label: "Content Gap", control: "number", defaultValue: 4, min: 0, max: 16, step: 1, unit: "px", section: "card", showWhen: { variant: "card" } },
+    { key: "cardBorderWidth", label: "Border Width", control: "number", defaultValue: 1, min: 1, max: 4, step: 1, unit: "px", section: "card", showWhen: { variant: "card" } },
+    { key: "cardBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "card", showWhen: { variant: "card" } }
   ],
   layoutVariants: [
     {
@@ -42,6 +50,30 @@ const radioGroupDef = {
       ],
       defaultValue: "default"
     },
+    {
+      // Presentation, not state: `card` swaps the option from a
+      // `[circle] label` row to a selectable tile. Every colour it paints
+      // resolves through the same `--uxm-radio-group-*` vars the row uses, so
+      // the States picker above keeps meaning what it means in both.
+      key: "variant",
+      label: "Presentation",
+      options: [
+        { value: "default", label: "Row" },
+        { value: "card", label: "Card" }
+      ],
+      defaultValue: "default"
+    },
+    {
+      key: "indicator",
+      label: "Indicator",
+      options: [
+        { value: "hidden", label: "Frame only" },
+        { value: "corner", label: "Corner dot" }
+      ],
+      defaultValue: "hidden",
+      // Meaningless on a row, where the circle IS the control.
+      showWhen: { variant: "card" }
+    },
     {
       key: "direction",
       label: "Direction",

package/dist/studio/lib/registry/inputs/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/radio-group.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const radioGroupDef: ComponentDef = {\n  id: 'radio-group',\n  name: 'Radio Group',\n  category: 'Inputs',\n  description: 'Radio button group with multiple options. State knobs cover unselected × selected across default / hover, plus shared focus ring and disabled opacity.',\n  styleProperties: [\n    // Default — unselected\n    { key: 'unselectedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'unselectedColors', showWhen: { state: 'default' } },\n    { key: 'unselectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'unselectedColors', showWhen: { state: 'default' } },\n    // Default — selected\n    { key: 'selectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'selectedColors', showWhen: { state: 'default' } },\n    { key: 'dotColor', label: 'Dot', control: 'color', defaultValue: 'var(--color-accent)', section: 'selectedColors', showWhen: { state: 'default' } },\n    // Hover — unselected\n    { key: 'hoverUnselectedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'unselectedColors', showWhen: { state: 'hover' } },\n    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)\n    { key: 'hoverUnselectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'unselectedColors', showWhen: { state: 'hover' } },\n    // Hover — selected\n    { key: 'hoverSelectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'selectedColors', showWhen: { state: 'hover' } },\n    { key: 'hoverDotColor', label: 'Dot', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'selectedColors', showWhen: { state: 'hover' } },\n    // Focus — single shared ring color\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 — always visible\n    { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 14, max: 32, step: 2, unit: 'px' },\n    { key: 'gap', label: 'Item Gap', control: 'number', defaultValue: 16, min: 4, max: 32, step: 4, unit: 'px' },\n    // Error — the circles + option labels stay neutral; the group message\n    // below is the sole signal (errorColor colors it, errorMessageSize sizes it).\n    { key: 'errorColor', label: 'Message', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'errorState', showWhen: { state: 'error' } },\n    { key: 'errorMessageSize', label: 'Message Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px', section: 'errorState', showWhen: { state: 'error' } },\n  ],\n  layoutVariants: [\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n    {\n      key: 'direction',\n      label: 'Direction',\n      options: [\n        { value: 'vertical', label: 'Vertical' },\n        { value: 'horizontal', label: 'Horizontal' },\n      ],\n      defaultValue: 'vertical',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user picks a different radio option.', payload: '{ value: string }' },\n  ],\n};\n"],"mappings":"AAEO,MAAM,gBAA8B;AAAA,EACzC,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA,IAEf,EAAE,KAAK,gBAAgB,OAAO,cAAc,SAAS,SAAS,cAAc,eAAe,SAAS,oBAAoB,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IACvJ,EAAE,KAAK,oBAAoB,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,oBAAoB,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA;AAAA,IAE/J,EAAE,KAAK,kBAAkB,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,kBAAkB,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IAC3J,EAAE,KAAK,YAAY,OAAO,OAAO,SAAS,SAAS,cAAc,uBAAuB,SAAS,kBAAkB,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA;AAAA,IAElJ,EAAE,KAAK,qBAAqB,OAAO,cAAc,SAAS,SAAS,cAAc,eAAe,SAAS,oBAAoB,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAE1J,EAAE,KAAK,yBAAyB,OAAO,UAAU,SAAS,SAAS,cAAc,4BAA4B,SAAS,oBAAoB,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAEvK,EAAE,KAAK,uBAAuB,OAAO,UAAU,SAAS,SAAS,cAAc,4BAA4B,SAAS,kBAAkB,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACnK,EAAE,KAAK,iBAAiB,OAAO,OAAO,SAAS,SAAS,cAAc,4BAA4B,SAAS,kBAAkB,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAE1J,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,SAAS,cAAc,uBAAuB,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAEpJ,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,QAAQ,OAAO,QAAQ,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACzG,EAAE,KAAK,OAAO,OAAO,YAAY,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA;AAAA;AAAA,IAG3G,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,EACpL;AAAA,EACA,gBAAgB;AAAA,IACd;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,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,QACvC,EAAE,OAAO,cAAc,OAAO,aAAa;AAAA,MAC7C;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,YAAY,aAAa,uDAAuD,SAAS,oBAAoB;AAAA,EACvH;AACF;","names":[]}
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/radio-group.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const radioGroupDef: ComponentDef = {\n  id: 'radio-group',\n  name: 'Radio Group',\n  category: 'Inputs',\n  description: 'Radio button group with multiple options. State knobs cover unselected × selected across default / hover, plus shared focus ring and disabled opacity.',\n  styleProperties: [\n    // Default — unselected\n    { key: 'unselectedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'unselectedColors', showWhen: { state: 'default' } },\n    { key: 'unselectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'unselectedColors', showWhen: { state: 'default' } },\n    // Default — selected\n    { key: 'selectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'selectedColors', showWhen: { state: 'default' } },\n    { key: 'dotColor', label: 'Dot', control: 'color', defaultValue: 'var(--color-accent)', section: 'selectedColors', showWhen: { state: 'default' } },\n    // Hover — unselected\n    { key: 'hoverUnselectedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'unselectedColors', showWhen: { state: 'hover' } },\n    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)\n    { key: 'hoverUnselectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'unselectedColors', showWhen: { state: 'hover' } },\n    // Hover — selected\n    { key: 'hoverSelectedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'selectedColors', showWhen: { state: 'hover' } },\n    { key: 'hoverDotColor', label: 'Dot', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'selectedColors', showWhen: { state: 'hover' } },\n    // Focus — single shared ring color\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 — always visible\n    { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 14, max: 32, step: 2, unit: 'px' },\n    { key: 'gap', label: 'Item Gap', control: 'number', defaultValue: 16, min: 4, max: 32, step: 4, unit: 'px' },\n    // Error — the circles + option labels stay neutral; the group message\n    // below is the sole signal (errorColor colors it, errorMessageSize sizes it).\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    // Card presentation — geometry only. The frame, hover and focus colours\n    // come from the shared `--uxm-radio-group-*` vars the row already uses, so\n    // a theme cannot drift between the two presentations.\n    { key: 'cardPadding', label: 'Padding', control: 'number', defaultValue: 12, min: 4, max: 32, step: 2, unit: 'px', section: 'card', showWhen: { variant: 'card' } },\n    { key: 'cardRadius', label: 'Radius', control: 'slider', defaultValue: 8, min: 0, max: 20, step: 1, unit: 'px', section: 'card', showWhen: { variant: 'card' } },\n    { key: 'cardGap', label: 'Content Gap', control: 'number', defaultValue: 4, min: 0, max: 16, step: 1, unit: 'px', section: 'card', showWhen: { variant: 'card' } },\n    { key: 'cardBorderWidth', label: 'Border Width', control: 'number', defaultValue: 1, min: 1, max: 4, step: 1, unit: 'px', section: 'card', showWhen: { variant: 'card' } },\n    { key: 'cardBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'card', showWhen: { variant: 'card' } },\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      // Presentation, not state: `card` swaps the option from a\n      // `[circle] label` row to a selectable tile. Every colour it paints\n      // resolves through the same `--uxm-radio-group-*` vars the row uses, so\n      // the States picker above keeps meaning what it means in both.\n      key: 'variant',\n      label: 'Presentation',\n      options: [\n        { value: 'default', label: 'Row' },\n        { value: 'card', label: 'Card' },\n      ],\n      defaultValue: 'default',\n    },\n    {\n      key: 'indicator',\n      label: 'Indicator',\n      options: [\n        { value: 'hidden', label: 'Frame only' },\n        { value: 'corner', label: 'Corner dot' },\n      ],\n      defaultValue: 'hidden',\n      // Meaningless on a row, where the circle IS the control.\n      showWhen: { variant: 'card' },\n    },\n    {\n      key: 'direction',\n      label: 'Direction',\n      options: [\n        { value: 'vertical', label: 'Vertical' },\n        { value: 'horizontal', label: 'Horizontal' },\n      ],\n      defaultValue: 'vertical',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user picks a different radio option.', payload: '{ value: string }' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/ui/button/button.cjs

@@ -27,20 +27,20 @@ __export(button_exports, {
 module.exports = __toCommonJS(button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_helpers = require("../../helpers/index.cjs");
-function ButtonPrimary({ className, type = "button", ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, className: (0, import_helpers.cn)("uxm-button-primary", className), ...rest });
+function ButtonPrimary({ className, type = "button", ref, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, type, className: (0, import_helpers.cn)("uxm-button-primary", className), ...rest });
 }
-function ButtonSecondary({ className, type = "button", ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, className: (0, import_helpers.cn)("uxm-button-secondary", className), ...rest });
+function ButtonSecondary({ className, type = "button", ref, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, type, className: (0, import_helpers.cn)("uxm-button-secondary", className), ...rest });
 }
-function ButtonTertiary({ className, type = "button", ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, className: (0, import_helpers.cn)("uxm-button-tertiary", className), ...rest });
+function ButtonTertiary({ className, type = "button", ref, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, type, className: (0, import_helpers.cn)("uxm-button-tertiary", className), ...rest });
 }
-function ButtonGhost({ className, type = "button", ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, className: (0, import_helpers.cn)("uxm-button-ghost", className), ...rest });
+function ButtonGhost({ className, type = "button", ref, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, type, className: (0, import_helpers.cn)("uxm-button-ghost", className), ...rest });
 }
-function ButtonDanger({ className, type = "button", ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, className: (0, import_helpers.cn)("uxm-button-danger", className), ...rest });
+function ButtonDanger({ className, type = "button", ref, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, type, className: (0, import_helpers.cn)("uxm-button-danger", className), ...rest });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/ui/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/button/button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- ButtonProps is a named alias for native button attrs (no extra members needed yet); shared by all button variants.\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport function ButtonPrimary({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-primary', className)} {...rest} />;\n}\n\nexport function ButtonSecondary({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-secondary', className)} {...rest} />;\n}\n\nexport function ButtonTertiary({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-tertiary', className)} {...rest} />;\n}\n\nexport function ButtonGhost({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-ghost', className)} {...rest} />;\n}\n\nexport function ButtonDanger({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-danger', className)} {...rest} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQS;AART,qBAAmB;AAOZ,SAAS,cAAc,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AAClF,SAAO,4CAAC,YAAO,MAAY,eAAW,mBAAG,sBAAsB,SAAS,GAAI,GAAG,MAAM;AACvF;AAEO,SAAS,gBAAgB,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AACpF,SAAO,4CAAC,YAAO,MAAY,eAAW,mBAAG,wBAAwB,SAAS,GAAI,GAAG,MAAM;AACzF;AAEO,SAAS,eAAe,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AACnF,SAAO,4CAAC,YAAO,MAAY,eAAW,mBAAG,uBAAuB,SAAS,GAAI,GAAG,MAAM;AACxF;AAEO,SAAS,YAAY,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AAChF,SAAO,4CAAC,YAAO,MAAY,eAAW,mBAAG,oBAAoB,SAAS,GAAI,GAAG,MAAM;AACrF;AAEO,SAAS,aAAa,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AACjF,SAAO,4CAAC,YAAO,MAAY,eAAW,mBAAG,qBAAqB,SAAS,GAAI,GAAG,MAAM;AACtF;","names":[]}
+{"version":3,"sources":["../../../src/ui/button/button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ComponentPropsWithRef } from 'react';\n\n/**\n * Native `<button>` attributes **including `ref`**, shared by every variant.\n *\n * `ComponentPropsWithRef<'button'>` rather than `ButtonHTMLAttributes`: React 19\n * passes `ref` as an ordinary prop, so it already reached the element through\n * the rest spread — but `ButtonHTMLAttributes` does not declare it, so\n * `<ButtonPrimary ref={…}>` was a type error for every TypeScript consumer even\n * though it worked at runtime. That is what blocked the buttons from being\n * `HoverTooltip` / `Popover` anchors without a wrapper element around them.\n *\n * Not `forwardRef`: 4.39 deliberately moved `Modal`'s sub-components the other\n * way, off `forwardRef` and onto React 19 ref props.\n */\nexport type ButtonProps = ComponentPropsWithRef<'button'>;\n\nexport function ButtonPrimary({ className, type = 'button', ref, ...rest }: ButtonProps) {\n  return <button ref={ref} type={type} className={cn('uxm-button-primary', className)} {...rest} />;\n}\n\nexport function ButtonSecondary({ className, type = 'button', ref, ...rest }: ButtonProps) {\n  return <button ref={ref} type={type} className={cn('uxm-button-secondary', className)} {...rest} />;\n}\n\nexport function ButtonTertiary({ className, type = 'button', ref, ...rest }: ButtonProps) {\n  return <button ref={ref} type={type} className={cn('uxm-button-tertiary', className)} {...rest} />;\n}\n\nexport function ButtonGhost({ className, type = 'button', ref, ...rest }: ButtonProps) {\n  return <button ref={ref} type={type} className={cn('uxm-button-ghost', className)} {...rest} />;\n}\n\nexport function ButtonDanger({ className, type = 'button', ref, ...rest }: ButtonProps) {\n  return <button ref={ref} type={type} className={cn('uxm-button-danger', className)} {...rest} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBS;AApBT,qBAAmB;AAmBZ,SAAS,cAAc,EAAE,WAAW,OAAO,UAAU,KAAK,GAAG,KAAK,GAAgB;AACvF,SAAO,4CAAC,YAAO,KAAU,MAAY,eAAW,mBAAG,sBAAsB,SAAS,GAAI,GAAG,MAAM;AACjG;AAEO,SAAS,gBAAgB,EAAE,WAAW,OAAO,UAAU,KAAK,GAAG,KAAK,GAAgB;AACzF,SAAO,4CAAC,YAAO,KAAU,MAAY,eAAW,mBAAG,wBAAwB,SAAS,GAAI,GAAG,MAAM;AACnG;AAEO,SAAS,eAAe,EAAE,WAAW,OAAO,UAAU,KAAK,GAAG,KAAK,GAAgB;AACxF,SAAO,4CAAC,YAAO,KAAU,MAAY,eAAW,mBAAG,uBAAuB,SAAS,GAAI,GAAG,MAAM;AAClG;AAEO,SAAS,YAAY,EAAE,WAAW,OAAO,UAAU,KAAK,GAAG,KAAK,GAAgB;AACrF,SAAO,4CAAC,YAAO,KAAU,MAAY,eAAW,mBAAG,oBAAoB,SAAS,GAAI,GAAG,MAAM;AAC/F;AAEO,SAAS,aAAa,EAAE,WAAW,OAAO,UAAU,KAAK,GAAG,KAAK,GAAgB;AACtF,SAAO,4CAAC,YAAO,KAAU,MAAY,eAAW,mBAAG,qBAAqB,SAAS,GAAI,GAAG,MAAM;AAChG;","names":[]}

package/dist/ui/button/button.d.ts

@@ -1,9 +1,21 @@
-import type { ButtonHTMLAttributes } from 'react';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-}
-export declare function ButtonPrimary({ className, type, ...rest }: ButtonProps): import("react").JSX.Element;
-export declare function ButtonSecondary({ className, type, ...rest }: ButtonProps): import("react").JSX.Element;
-export declare function ButtonTertiary({ className, type, ...rest }: ButtonProps): import("react").JSX.Element;
-export declare function ButtonGhost({ className, type, ...rest }: ButtonProps): import("react").JSX.Element;
-export declare function ButtonDanger({ className, type, ...rest }: ButtonProps): import("react").JSX.Element;
+import type { ComponentPropsWithRef } from 'react';
+/**
+ * Native `<button>` attributes **including `ref`**, shared by every variant.
+ *
+ * `ComponentPropsWithRef<'button'>` rather than `ButtonHTMLAttributes`: React 19
+ * passes `ref` as an ordinary prop, so it already reached the element through
+ * the rest spread — but `ButtonHTMLAttributes` does not declare it, so
+ * `<ButtonPrimary ref={…}>` was a type error for every TypeScript consumer even
+ * though it worked at runtime. That is what blocked the buttons from being
+ * `HoverTooltip` / `Popover` anchors without a wrapper element around them.
+ *
+ * Not `forwardRef`: 4.39 deliberately moved `Modal`'s sub-components the other
+ * way, off `forwardRef` and onto React 19 ref props.
+ */
+export type ButtonProps = ComponentPropsWithRef<'button'>;
+export declare function ButtonPrimary({ className, type, ref, ...rest }: ButtonProps): import("react").JSX.Element;
+export declare function ButtonSecondary({ className, type, ref, ...rest }: ButtonProps): import("react").JSX.Element;
+export declare function ButtonTertiary({ className, type, ref, ...rest }: ButtonProps): import("react").JSX.Element;
+export declare function ButtonGhost({ className, type, ref, ...rest }: ButtonProps): import("react").JSX.Element;
+export declare function ButtonDanger({ className, type, ref, ...rest }: ButtonProps): import("react").JSX.Element;
 //# sourceMappingURL=button.d.ts.map

package/dist/ui/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAE/E,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAEjF;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAEnF;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAElF;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAE/E;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAEhF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AAE1D,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAEtF;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAExF;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAEvF;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAEpF;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAErF"}

package/dist/ui/button/button.js

@@ -1,19 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../helpers/index.js";
-function ButtonPrimary({ className, type = "button", ...rest }) {
-  return /* @__PURE__ */ jsx("button", { type, className: cn("uxm-button-primary", className), ...rest });
+function ButtonPrimary({ className, type = "button", ref, ...rest }) {
+  return /* @__PURE__ */ jsx("button", { ref, type, className: cn("uxm-button-primary", className), ...rest });
 }
-function ButtonSecondary({ className, type = "button", ...rest }) {
-  return /* @__PURE__ */ jsx("button", { type, className: cn("uxm-button-secondary", className), ...rest });
+function ButtonSecondary({ className, type = "button", ref, ...rest }) {
+  return /* @__PURE__ */ jsx("button", { ref, type, className: cn("uxm-button-secondary", className), ...rest });
 }
-function ButtonTertiary({ className, type = "button", ...rest }) {
-  return /* @__PURE__ */ jsx("button", { type, className: cn("uxm-button-tertiary", className), ...rest });
+function ButtonTertiary({ className, type = "button", ref, ...rest }) {
+  return /* @__PURE__ */ jsx("button", { ref, type, className: cn("uxm-button-tertiary", className), ...rest });
 }
-function ButtonGhost({ className, type = "button", ...rest }) {
-  return /* @__PURE__ */ jsx("button", { type, className: cn("uxm-button-ghost", className), ...rest });
+function ButtonGhost({ className, type = "button", ref, ...rest }) {
+  return /* @__PURE__ */ jsx("button", { ref, type, className: cn("uxm-button-ghost", className), ...rest });
 }
-function ButtonDanger({ className, type = "button", ...rest }) {
-  return /* @__PURE__ */ jsx("button", { type, className: cn("uxm-button-danger", className), ...rest });
+function ButtonDanger({ className, type = "button", ref, ...rest }) {
+  return /* @__PURE__ */ jsx("button", { ref, type, className: cn("uxm-button-danger", className), ...rest });
 }
 export {
   ButtonDanger,

package/dist/ui/button/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/button/button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- ButtonProps is a named alias for native button attrs (no extra members needed yet); shared by all button variants.\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport function ButtonPrimary({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-primary', className)} {...rest} />;\n}\n\nexport function ButtonSecondary({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-secondary', className)} {...rest} />;\n}\n\nexport function ButtonTertiary({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-tertiary', className)} {...rest} />;\n}\n\nexport function ButtonGhost({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-ghost', className)} {...rest} />;\n}\n\nexport function ButtonDanger({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-danger', className)} {...rest} />;\n}\n"],"mappings":"AAQS;AART,SAAS,UAAU;AAOZ,SAAS,cAAc,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AAClF,SAAO,oBAAC,YAAO,MAAY,WAAW,GAAG,sBAAsB,SAAS,GAAI,GAAG,MAAM;AACvF;AAEO,SAAS,gBAAgB,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AACpF,SAAO,oBAAC,YAAO,MAAY,WAAW,GAAG,wBAAwB,SAAS,GAAI,GAAG,MAAM;AACzF;AAEO,SAAS,eAAe,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AACnF,SAAO,oBAAC,YAAO,MAAY,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,MAAM;AACxF;AAEO,SAAS,YAAY,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AAChF,SAAO,oBAAC,YAAO,MAAY,WAAW,GAAG,oBAAoB,SAAS,GAAI,GAAG,MAAM;AACrF;AAEO,SAAS,aAAa,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AACjF,SAAO,oBAAC,YAAO,MAAY,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,MAAM;AACtF;","names":[]}
+{"version":3,"sources":["../../../src/ui/button/button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ComponentPropsWithRef } from 'react';\n\n/**\n * Native `<button>` attributes **including `ref`**, shared by every variant.\n *\n * `ComponentPropsWithRef<'button'>` rather than `ButtonHTMLAttributes`: React 19\n * passes `ref` as an ordinary prop, so it already reached the element through\n * the rest spread — but `ButtonHTMLAttributes` does not declare it, so\n * `<ButtonPrimary ref={…}>` was a type error for every TypeScript consumer even\n * though it worked at runtime. That is what blocked the buttons from being\n * `HoverTooltip` / `Popover` anchors without a wrapper element around them.\n *\n * Not `forwardRef`: 4.39 deliberately moved `Modal`'s sub-components the other\n * way, off `forwardRef` and onto React 19 ref props.\n */\nexport type ButtonProps = ComponentPropsWithRef<'button'>;\n\nexport function ButtonPrimary({ className, type = 'button', ref, ...rest }: ButtonProps) {\n  return <button ref={ref} type={type} className={cn('uxm-button-primary', className)} {...rest} />;\n}\n\nexport function ButtonSecondary({ className, type = 'button', ref, ...rest }: ButtonProps) {\n  return <button ref={ref} type={type} className={cn('uxm-button-secondary', className)} {...rest} />;\n}\n\nexport function ButtonTertiary({ className, type = 'button', ref, ...rest }: ButtonProps) {\n  return <button ref={ref} type={type} className={cn('uxm-button-tertiary', className)} {...rest} />;\n}\n\nexport function ButtonGhost({ className, type = 'button', ref, ...rest }: ButtonProps) {\n  return <button ref={ref} type={type} className={cn('uxm-button-ghost', className)} {...rest} />;\n}\n\nexport function ButtonDanger({ className, type = 'button', ref, ...rest }: ButtonProps) {\n  return <button ref={ref} type={type} className={cn('uxm-button-danger', className)} {...rest} />;\n}\n"],"mappings":"AAoBS;AApBT,SAAS,UAAU;AAmBZ,SAAS,cAAc,EAAE,WAAW,OAAO,UAAU,KAAK,GAAG,KAAK,GAAgB;AACvF,SAAO,oBAAC,YAAO,KAAU,MAAY,WAAW,GAAG,sBAAsB,SAAS,GAAI,GAAG,MAAM;AACjG;AAEO,SAAS,gBAAgB,EAAE,WAAW,OAAO,UAAU,KAAK,GAAG,KAAK,GAAgB;AACzF,SAAO,oBAAC,YAAO,KAAU,MAAY,WAAW,GAAG,wBAAwB,SAAS,GAAI,GAAG,MAAM;AACnG;AAEO,SAAS,eAAe,EAAE,WAAW,OAAO,UAAU,KAAK,GAAG,KAAK,GAAgB;AACxF,SAAO,oBAAC,YAAO,KAAU,MAAY,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,MAAM;AAClG;AAEO,SAAS,YAAY,EAAE,WAAW,OAAO,UAAU,KAAK,GAAG,KAAK,GAAgB;AACrF,SAAO,oBAAC,YAAO,KAAU,MAAY,WAAW,GAAG,oBAAoB,SAAS,GAAI,GAAG,MAAM;AAC/F;AAEO,SAAS,aAAa,EAAE,WAAW,OAAO,UAAU,KAAK,GAAG,KAAK,GAAgB;AACtF,SAAO,oBAAC,YAAO,KAAU,MAAY,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,MAAM;AAChG;","names":[]}

package/dist/ui/icon-button/icon-button.cjs

@@ -28,11 +28,13 @@ function IconButton({
   className,
   type = "button",
   variant = "ghost",
+  ref,
   ...rest
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
+      ref,
       type,
       className: (0, import_helpers.cn)("uxm-icon-button", variant === "filled" && "uxm-icon-button--filled", className),
       ...rest,

package/dist/ui/icon-button/icon-button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/icon-button/icon-button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nexport type IconButtonVariant = 'ghost' | 'filled';\n\nexport interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** SVG content (use the Icon component or a raw <svg>). */\n  children: ReactNode;\n  /** Required for accessibility on icon-only buttons. */\n  'aria-label': string;\n  /**\n   * `ghost` (default) — 32px, transparent, for toolbars, row ⋮ and inline\n   * chrome. `filled` — 40px, `--color-surface-alt` fill, radius 8, for a\n   * standalone action (\"add\", \"create\"). `filled` is the successor of the\n   * deprecated `ButtonIcon` atom and paints exactly what it painted.\n   */\n  variant?: IconButtonVariant;\n}\n\nexport function IconButton({\n  children,\n  className,\n  type = 'button',\n  variant = 'ghost',\n  ...rest\n}: IconButtonProps) {\n  return (\n    <button\n      type={type}\n      className={cn('uxm-icon-button', variant === 'filled' && 'uxm-icon-button--filled', className)}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BI;AA5BJ,qBAAmB;AAoBZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,mBAAG,mBAAmB,YAAY,YAAY,2BAA2B,SAAS;AAAA,MAC5F,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/ui/icon-button/icon-button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type IconButtonVariant = 'ghost' | 'filled';\n\nexport interface IconButtonProps extends ComponentPropsWithRef<'button'> {\n  /** SVG content (use the Icon component or a raw <svg>). */\n  children: ReactNode;\n  /** Required for accessibility on icon-only buttons. */\n  'aria-label': string;\n  /**\n   * `ghost` (default) — 32px, transparent, for toolbars, row ⋮ and inline\n   * chrome. `filled` — 40px, `--color-surface-alt` fill, radius 8, for a\n   * standalone action (\"add\", \"create\"). `filled` is the successor of the\n   * deprecated `ButtonIcon` atom and paints exactly what it painted.\n   */\n  variant?: IconButtonVariant;\n}\n\nexport function IconButton({\n  children,\n  className,\n  type = 'button',\n  variant = 'ghost',\n  ref,\n  ...rest\n}: IconButtonProps) {\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cn('uxm-icon-button', variant === 'filled' && 'uxm-icon-button--filled', className)}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BI;AA7BJ,qBAAmB;AAoBZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAW,mBAAG,mBAAmB,YAAY,YAAY,2BAA2B,SAAS;AAAA,MAC5F,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/ui/icon-button/icon-button.d.ts

@@ -1,6 +1,6 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 export type IconButtonVariant = 'ghost' | 'filled';
-export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IconButtonProps extends ComponentPropsWithRef<'button'> {
     /** SVG content (use the Icon component or a raw <svg>). */
     children: ReactNode;
     /** Required for accessibility on icon-only buttons. */
@@ -13,5 +13,5 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
      */
     variant?: IconButtonVariant;
 }
-export declare function IconButton({ children, className, type, variant, ...rest }: IconButtonProps): import("react").JSX.Element;
+export declare function IconButton({ children, className, type, variant, ref, ...rest }: IconButtonProps): import("react").JSX.Element;
 //# sourceMappingURL=icon-button.d.ts.map

package/dist/ui/icon-button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/ui/icon-button/icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,GAAG,IAAI,EACR,EAAE,eAAe,+BAUjB"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/ui/icon-button/icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IACtE,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BAWjB"}

package/dist/ui/icon-button/icon-button.js

@@ -5,11 +5,13 @@ function IconButton({
   className,
   type = "button",
   variant = "ghost",
+  ref,
   ...rest
 }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
+      ref,
       type,
       className: cn("uxm-icon-button", variant === "filled" && "uxm-icon-button--filled", className),
       ...rest,

package/dist/ui/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/icon-button/icon-button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nexport type IconButtonVariant = 'ghost' | 'filled';\n\nexport interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** SVG content (use the Icon component or a raw <svg>). */\n  children: ReactNode;\n  /** Required for accessibility on icon-only buttons. */\n  'aria-label': string;\n  /**\n   * `ghost` (default) — 32px, transparent, for toolbars, row ⋮ and inline\n   * chrome. `filled` — 40px, `--color-surface-alt` fill, radius 8, for a\n   * standalone action (\"add\", \"create\"). `filled` is the successor of the\n   * deprecated `ButtonIcon` atom and paints exactly what it painted.\n   */\n  variant?: IconButtonVariant;\n}\n\nexport function IconButton({\n  children,\n  className,\n  type = 'button',\n  variant = 'ghost',\n  ...rest\n}: IconButtonProps) {\n  return (\n    <button\n      type={type}\n      className={cn('uxm-icon-button', variant === 'filled' && 'uxm-icon-button--filled', className)}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":"AA4BI;AA5BJ,SAAS,UAAU;AAoBZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,mBAAmB,YAAY,YAAY,2BAA2B,SAAS;AAAA,MAC5F,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/ui/icon-button/icon-button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type IconButtonVariant = 'ghost' | 'filled';\n\nexport interface IconButtonProps extends ComponentPropsWithRef<'button'> {\n  /** SVG content (use the Icon component or a raw <svg>). */\n  children: ReactNode;\n  /** Required for accessibility on icon-only buttons. */\n  'aria-label': string;\n  /**\n   * `ghost` (default) — 32px, transparent, for toolbars, row ⋮ and inline\n   * chrome. `filled` — 40px, `--color-surface-alt` fill, radius 8, for a\n   * standalone action (\"add\", \"create\"). `filled` is the successor of the\n   * deprecated `ButtonIcon` atom and paints exactly what it painted.\n   */\n  variant?: IconButtonVariant;\n}\n\nexport function IconButton({\n  children,\n  className,\n  type = 'button',\n  variant = 'ghost',\n  ref,\n  ...rest\n}: IconButtonProps) {\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cn('uxm-icon-button', variant === 'filled' && 'uxm-icon-button--filled', className)}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":"AA6BI;AA7BJ,SAAS,UAAU;AAoBZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,mBAAmB,YAAY,YAAY,2BAA2B,SAAS;AAAA,MAC5F,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/ui/radio-group/radio-group-preview.cjs

@@ -27,16 +27,80 @@ function ShowcaseRow({
   selected,
   state,
   styles,
-  label
+  label,
+  variant,
+  indicator
 }) {
   const isHover = state === "hover";
   const isFocus = state === "focus";
   const isDisabled = state === "disabled";
+  const isCard = variant === "card";
   const bg = isHover ? styles.hoverUnselectedBg : styles.unselectedBg;
   const border = isHover ? selected ? styles.hoverSelectedBorder : styles.hoverUnselectedBorder : selected ? styles.selectedBorder : styles.unselectedBorder;
   const dot = isHover ? styles.hoverDotColor : styles.dotColor;
   const ring = styles.focusRing;
   const size = styles.size ?? 20;
+  const circle = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: {
+        width: size,
+        height: size,
+        flexShrink: 0,
+        borderRadius: "50%",
+        border: `2px solid ${border}`,
+        backgroundColor: bg,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "border-color 0.15s, background-color 0.15s",
+        ...isFocus && !isCard ? { outline: `2px solid ${ring}`, outlineOffset: 2 } : {},
+        ...isCard ? { position: "absolute", top: styles.cardPadding, right: styles.cardPadding } : {}
+      },
+      children: selected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          style: {
+            width: size * 0.5,
+            height: size * 0.5,
+            borderRadius: "50%",
+            backgroundColor: dot
+          }
+        }
+      )
+    }
+  );
+  if (isCard) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          gap: styles.cardGap,
+          minWidth: 150,
+          boxSizing: "border-box",
+          padding: styles.cardPadding,
+          borderRadius: styles.cardRadius,
+          border: `${styles.cardBorderWidth}px solid ${border}`,
+          backgroundColor: styles.cardBg,
+          fontSize: 14,
+          color: "var(--color-text)",
+          opacity: isDisabled ? styles.disabledOpacity ?? 0.4 : 1,
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          transition: "border-color 0.15s, background-color 0.15s",
+          ...isFocus ? { outline: `2px solid ${ring}`, outlineOffset: 2 } : {}
+        },
+        children: [
+          indicator === "corner" && circle,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "var(--color-text-muted)", fontSize: 12 }, children: "What this option does" })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -50,36 +114,7 @@ function ShowcaseRow({
         cursor: isDisabled ? "not-allowed" : "pointer"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            "aria-hidden": "true",
-            style: {
-              width: size,
-              height: size,
-              flexShrink: 0,
-              borderRadius: "50%",
-              border: `2px solid ${border}`,
-              backgroundColor: bg,
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              transition: "border-color 0.15s, background-color 0.15s",
-              ...isFocus ? { outline: `2px solid ${ring}`, outlineOffset: 2 } : {}
-            },
-            children: selected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "span",
-              {
-                style: {
-                  width: size * 0.5,
-                  height: size * 0.5,
-                  borderRadius: "50%",
-                  backgroundColor: dot
-                }
-              }
-            )
-          }
-        ),
+        circle,
         label
       ]
     }
@@ -89,6 +124,8 @@ const INTERACTIVE_OPTIONS = ["Small", "Medium", "Large"];
 function RadioGroupPreview({ styles, variants }) {
   const state = variants.state ?? "default";
   const direction = variants.direction ?? "vertical";
+  const variant = variants.variant ?? "default";
+  const indicator = variants.indicator ?? "hidden";
   const cssVars = {
     "--uxm-radio-group-size": styles.size != null ? `${styles.size}px` : void 0,
     "--uxm-radio-group-gap": styles.gap != null ? `${styles.gap}px` : void 0,
@@ -103,7 +140,12 @@ function RadioGroupPreview({ styles, variants }) {
     "--uxm-radio-group-focus-ring": styles.focusRing,
     "--uxm-radio-group-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
     "--uxm-radio-group-error-color": styles.errorColor,
-    "--uxm-radio-group-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0
+    "--uxm-radio-group-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0,
+    "--uxm-radio-card-padding": `${styles.cardPadding}px`,
+    "--uxm-radio-card-radius": `${styles.cardRadius}px`,
+    "--uxm-radio-card-gap": `${styles.cardGap}px`,
+    "--uxm-radio-card-border-width": `${styles.cardBorderWidth}px`,
+    "--uxm-radio-card-bg": styles.cardBg
   };
   const sectionLabel = {
     fontSize: 11,
@@ -121,8 +163,8 @@ function RadioGroupPreview({ styles, variants }) {
         " state"
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShowcaseRow, { selected: false, state, styles, label: "Unselected" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShowcaseRow, { selected: true, state, styles, label: "Selected" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShowcaseRow, { selected: false, state, styles, label: "Unselected", variant, indicator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShowcaseRow, { selected: true, state, styles, label: "Selected", variant, indicator })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
@@ -132,6 +174,8 @@ function RadioGroupPreview({ styles, variants }) {
         {
           name: `uxm-radio-preview-${interactiveKey}`,
           direction,
+          variant,
+          indicator,
           error: state === "error" ? "Pick an option to continue" : void 0,
           children: INTERACTIVE_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_ui.RadioOption,
@@ -139,7 +183,14 @@ function RadioGroupPreview({ styles, variants }) {
               name: `uxm-radio-preview-${interactiveKey}`,
               value: opt,
               disabled: interactiveDisabled,
-              children: opt
+              children: variant === "card" ? (
+                // Card mode is for rich content — a one-word label in a tile
+                // would demo a box, not the shape the variant exists for.
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: opt }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "var(--color-text-muted)", fontSize: 12 }, children: "What this option does" })
+                ] })
+              ) : opt
             },
             opt
           ))