@viax.io/uxm 4.44.0 → 4.46.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/radio-group/radio-group-preview.tsx"],"sourcesContent":["import { type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { RadioGroup, RadioOption } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nfunction ShowcaseRow({\n  selected,\n  state,\n  styles,\n  label,\n}: {\n  selected: boolean;\n  state: string;\n  styles: Styles;\n  label: string;\n}) {\n  // Static showcase — paints the selected forced state regardless of\n  // pointer interaction. Inline JSX (not the real <RadioOption>) so each\n  // forced state can override the circle + dot directly; the interactive\n  // instance below is where production CSS rules exercise.\n  const isHover = state === 'hover';\n  const isFocus = state === 'focus';\n  const isDisabled = state === 'disabled';\n\n  const bg = isHover\n    ? styles.hoverUnselectedBg\n    : styles.unselectedBg;\n  const border = isHover\n    ? (selected ? styles.hoverSelectedBorder : styles.hoverUnselectedBorder)\n    : (selected ? styles.selectedBorder : styles.unselectedBorder);\n  const dot = isHover ? styles.hoverDotColor : styles.dotColor;\n  const ring = styles.focusRing;\n  const size = (styles.size as number) ?? 20;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 10,\n        fontSize: 14,\n        color: 'var(--color-text)',\n        opacity: isDisabled ? ((styles.disabledOpacity as number) ?? 0.4) : 1,\n        cursor: isDisabled ? 'not-allowed' : 'pointer',\n      }}\n    >\n      <span\n        aria-hidden=\"true\"\n        style={{\n          width: size,\n          height: size,\n          flexShrink: 0,\n          borderRadius: '50%',\n          border: `2px solid ${border as string}`,\n          backgroundColor: bg as string,\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          transition: 'border-color 0.15s, background-color 0.15s',\n          ...(isFocus\n            ? { outline: `2px solid ${ring as string}`, outlineOffset: 2 }\n            : {}),\n        }}\n      >\n        {selected && (\n          <span\n            style={{\n              width: size * 0.5,\n              height: size * 0.5,\n              borderRadius: '50%',\n              backgroundColor: dot as string,\n            }}\n          />\n        )}\n      </span>\n      {label}\n    </div>\n  );\n}\n\nconst INTERACTIVE_OPTIONS = ['Small', 'Medium', 'Large'];\n\nexport function RadioGroupPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const direction = (variants.direction as 'vertical' | 'horizontal' | undefined) ?? 'vertical';\n\n  // Project every registry knob as a `--uxm-radio-group-*` custom property\n  // on the wrapper. The interactive <RadioGroup> below renders the real\n  // component whose styles.css rules read these vars — live editor edits\n  // paint immediately, and production `:hover` / `:focus-visible` rules\n  // exercise exactly as they would in prod.\n  const cssVars: Record<string, string | undefined> = {\n    '--uxm-radio-group-size': styles.size != null ? `${styles.size}px` : undefined,\n    '--uxm-radio-group-gap': styles.gap != null ? `${styles.gap}px` : undefined,\n    '--uxm-radio-group-unselected-bg': styles.unselectedBg as string | undefined,\n    '--uxm-radio-group-unselected-border': styles.unselectedBorder as string | undefined,\n    '--uxm-radio-group-selected-border': styles.selectedBorder as string | undefined,\n    '--uxm-radio-group-dot-color': styles.dotColor as string | undefined,\n    '--uxm-radio-group-hover-unselected-bg': styles.hoverUnselectedBg as string | undefined,\n    '--uxm-radio-group-hover-unselected-border': styles.hoverUnselectedBorder as string | undefined,\n    '--uxm-radio-group-hover-selected-border': styles.hoverSelectedBorder as string | undefined,\n    '--uxm-radio-group-hover-dot-color': styles.hoverDotColor as string | undefined,\n    '--uxm-radio-group-focus-ring': styles.focusRing as string | undefined,\n    '--uxm-radio-group-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-radio-group-error-color': styles.errorColor as string | undefined,\n    '--uxm-radio-group-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n  };\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  // Pair the state and direction into the interactive `key` so that\n  // toggling either variant resets the radio group cleanly (matches the\n  // freshly-{re,dis}abled UX and clears any stale selection when the user\n  // flips layout).\n  const interactiveKey = `${state}-${direction}`;\n  const interactiveDisabled = state === 'disabled';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <ShowcaseRow selected={false} state={state} styles={styles} label=\"Unselected\" />\n          <ShowcaseRow selected={true} state={state} styles={styles} label=\"Selected\" />\n        </div>\n      </div>\n\n      {/* Interactive instance — uncontrolled so the browser owns the\n          checked state. React (and the canvas's event-capture re-renders)\n          can't fight the DOM here, so click/keyboard navigation toggle\n          reliably between options. Three options share a unique `name`\n          so the browser's radio-group semantics work natively. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <RadioGroup\n          key={interactiveKey}\n          name={`uxm-radio-preview-${interactiveKey}`}\n          direction={direction}\n          error={state === 'error' ? 'Pick an option to continue' : undefined}\n        >\n          {INTERACTIVE_OPTIONS.map((opt) => (\n            <RadioOption\n              key={opt}\n              name={`uxm-radio-preview-${interactiveKey}`}\n              value={opt}\n              disabled={interactiveDisabled}\n            >\n              {opt}\n            </RadioOption>\n          ))}\n        </RadioGroup>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/ui/radio-group/radio-group-preview.tsx"],"sourcesContent":["import { type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { RadioGroup, RadioOption } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nfunction ShowcaseRow({\n  selected,\n  state,\n  styles,\n  label,\n  variant,\n  indicator,\n}: {\n  selected: boolean;\n  state: string;\n  styles: Styles;\n  label: string;\n  variant: 'default' | 'card';\n  indicator: 'hidden' | 'corner';\n}) {\n  // Static showcase — paints the selected forced state regardless of\n  // pointer interaction. Inline JSX (not the real <RadioOption>) so each\n  // forced state can override the circle + dot directly; the interactive\n  // instance below is where production CSS rules exercise.\n  //\n  // It has to follow `variant`: this is the ONLY thing that paints the forced\n  // hover / focus / disabled states — the interactive group below shows the\n  // resting state and real input. Left as a row while the variant is `card`,\n  // the States picker would show a hovered CIRCLE for a control that is a\n  // tile, and the hover / focus knobs (which the card frame genuinely reads)\n  // would be tuned against feedback that is not what ships.\n  const isHover = state === 'hover';\n  const isFocus = state === 'focus';\n  const isDisabled = state === 'disabled';\n  const isCard = variant === 'card';\n\n  const bg = isHover\n    ? styles.hoverUnselectedBg\n    : styles.unselectedBg;\n  const border = isHover\n    ? (selected ? styles.hoverSelectedBorder : styles.hoverUnselectedBorder)\n    : (selected ? styles.selectedBorder : styles.unselectedBorder);\n  const dot = isHover ? styles.hoverDotColor : styles.dotColor;\n  const ring = styles.focusRing;\n  const size = (styles.size as number) ?? 20;\n\n  const circle = (\n    <span\n      aria-hidden=\"true\"\n      style={{\n        width: size,\n        height: size,\n        flexShrink: 0,\n        borderRadius: '50%',\n        border: `2px solid ${border as string}`,\n        backgroundColor: bg as string,\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        transition: 'border-color 0.15s, background-color 0.15s',\n        ...(isFocus && !isCard\n          ? { outline: `2px solid ${ring as string}`, outlineOffset: 2 }\n          : {}),\n        ...(isCard\n          ? { position: 'absolute' as const, top: styles.cardPadding as number, right: styles.cardPadding as number }\n          : {}),\n      }}\n    >\n      {selected && (\n        <span\n          style={{\n            width: size * 0.5,\n            height: size * 0.5,\n            borderRadius: '50%',\n            backgroundColor: dot as string,\n          }}\n        />\n      )}\n    </span>\n  );\n\n  if (isCard) {\n    // Mirrors `.uxm-radio--card`: the tile carries the frame and the focus\n    // ring, and the circle is either gone or pinned to the corner.\n    return (\n      <div\n        style={{\n          position: 'relative',\n          display: 'flex',\n          flexDirection: 'column',\n          gap: styles.cardGap as number,\n          minWidth: 150,\n          boxSizing: 'border-box',\n          padding: styles.cardPadding as number,\n          borderRadius: styles.cardRadius as number,\n          border: `${styles.cardBorderWidth}px solid ${border as string}`,\n          backgroundColor: styles.cardBg as string,\n          fontSize: 14,\n          color: 'var(--color-text)',\n          opacity: isDisabled ? ((styles.disabledOpacity as number) ?? 0.4) : 1,\n          cursor: isDisabled ? 'not-allowed' : 'pointer',\n          transition: 'border-color 0.15s, background-color 0.15s',\n          ...(isFocus ? { outline: `2px solid ${ring as string}`, outlineOffset: 2 } : {}),\n        }}\n      >\n        {indicator === 'corner' && circle}\n        <strong>{label}</strong>\n        <span style={{ color: 'var(--color-text-muted)', fontSize: 12 }}>\n          What this option does\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 10,\n        fontSize: 14,\n        color: 'var(--color-text)',\n        opacity: isDisabled ? ((styles.disabledOpacity as number) ?? 0.4) : 1,\n        cursor: isDisabled ? 'not-allowed' : 'pointer',\n      }}\n    >\n      {circle}\n      {label}\n    </div>\n  );\n}\n\nconst INTERACTIVE_OPTIONS = ['Small', 'Medium', 'Large'];\n\nexport function RadioGroupPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const direction = (variants.direction as 'vertical' | 'horizontal' | undefined) ?? 'vertical';\n  const variant = (variants.variant as 'default' | 'card' | undefined) ?? 'default';\n  const indicator = (variants.indicator as 'hidden' | 'corner' | undefined) ?? 'hidden';\n\n  // Project every registry knob as a `--uxm-radio-group-*` custom property\n  // on the wrapper. The interactive <RadioGroup> below renders the real\n  // component whose styles.css rules read these vars — live editor edits\n  // paint immediately, and production `:hover` / `:focus-visible` rules\n  // exercise exactly as they would in prod.\n  const cssVars: Record<string, string | undefined> = {\n    '--uxm-radio-group-size': styles.size != null ? `${styles.size}px` : undefined,\n    '--uxm-radio-group-gap': styles.gap != null ? `${styles.gap}px` : undefined,\n    '--uxm-radio-group-unselected-bg': styles.unselectedBg as string | undefined,\n    '--uxm-radio-group-unselected-border': styles.unselectedBorder as string | undefined,\n    '--uxm-radio-group-selected-border': styles.selectedBorder as string | undefined,\n    '--uxm-radio-group-dot-color': styles.dotColor as string | undefined,\n    '--uxm-radio-group-hover-unselected-bg': styles.hoverUnselectedBg as string | undefined,\n    '--uxm-radio-group-hover-unselected-border': styles.hoverUnselectedBorder as string | undefined,\n    '--uxm-radio-group-hover-selected-border': styles.hoverSelectedBorder as string | undefined,\n    '--uxm-radio-group-hover-dot-color': styles.hoverDotColor as string | undefined,\n    '--uxm-radio-group-focus-ring': styles.focusRing as string | undefined,\n    '--uxm-radio-group-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-radio-group-error-color': styles.errorColor as string | undefined,\n    '--uxm-radio-group-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n    '--uxm-radio-card-padding': `${styles.cardPadding}px`,\n    '--uxm-radio-card-radius': `${styles.cardRadius}px`,\n    '--uxm-radio-card-gap': `${styles.cardGap}px`,\n    '--uxm-radio-card-border-width': `${styles.cardBorderWidth}px`,\n    '--uxm-radio-card-bg': styles.cardBg as string,\n  };\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  // Pair the state and direction into the interactive `key` so that\n  // toggling either variant resets the radio group cleanly (matches the\n  // freshly-{re,dis}abled UX and clears any stale selection when the user\n  // flips layout).\n  const interactiveKey = `${state}-${direction}`;\n  const interactiveDisabled = state === 'disabled';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <ShowcaseRow selected={false} state={state} styles={styles} label=\"Unselected\" variant={variant} indicator={indicator} />\n          <ShowcaseRow selected={true} state={state} styles={styles} label=\"Selected\" variant={variant} indicator={indicator} />\n        </div>\n      </div>\n\n      {/* Interactive instance — uncontrolled so the browser owns the\n          checked state. React (and the canvas's event-capture re-renders)\n          can't fight the DOM here, so click/keyboard navigation toggle\n          reliably between options. Three options share a unique `name`\n          so the browser's radio-group semantics work natively. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <RadioGroup\n          key={interactiveKey}\n          name={`uxm-radio-preview-${interactiveKey}`}\n          direction={direction}\n          variant={variant}\n          indicator={indicator}\n          error={state === 'error' ? 'Pick an option to continue' : undefined}\n        >\n          {INTERACTIVE_OPTIONS.map((opt) => (\n            <RadioOption\n              key={opt}\n              name={`uxm-radio-preview-${interactiveKey}`}\n              value={opt}\n              disabled={interactiveDisabled}\n            >\n              {variant === 'card' ? (\n                // Card mode is for rich content — a one-word label in a tile\n                // would demo a box, not the shape the variant exists for.\n                <>\n                  <strong>{opt}</strong>\n                  <span style={{ color: 'var(--color-text-muted)', fontSize: 12 }}>\n                    What this option does\n                  </span>\n                </>\n              ) : (\n                opt\n              )}\n            </RadioOption>\n          ))}\n        </RadioGroup>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuEQ;AApER,gBAAwC;AAIxC,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AAYD,QAAM,UAAU,UAAU;AAC1B,QAAM,UAAU,UAAU;AAC1B,QAAM,aAAa,UAAU;AAC7B,QAAM,SAAS,YAAY;AAE3B,QAAM,KAAK,UACP,OAAO,oBACP,OAAO;AACX,QAAM,SAAS,UACV,WAAW,OAAO,sBAAsB,OAAO,wBAC/C,WAAW,OAAO,iBAAiB,OAAO;AAC/C,QAAM,MAAM,UAAU,OAAO,gBAAgB,OAAO;AACpD,QAAM,OAAO,OAAO;AACpB,QAAM,OAAQ,OAAO,QAAmB;AAExC,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,cAAc;AAAA,QACd,QAAQ,aAAa,MAAgB;AAAA,QACrC,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,GAAI,WAAW,CAAC,SACZ,EAAE,SAAS,aAAa,IAAc,IAAI,eAAe,EAAE,IAC3D,CAAC;AAAA,QACL,GAAI,SACA,EAAE,UAAU,YAAqB,KAAK,OAAO,aAAuB,OAAO,OAAO,YAAsB,IACxG,CAAC;AAAA,MACP;AAAA,MAEC,sBACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO,OAAO;AAAA,YACd,QAAQ,OAAO;AAAA,YACf,cAAc;AAAA,YACd,iBAAiB;AAAA,UACnB;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAGF,MAAI,QAAQ;AAGV,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,SAAS;AAAA,UACT,eAAe;AAAA,UACf,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,WAAW;AAAA,UACX,SAAS,OAAO;AAAA,UAChB,cAAc,OAAO;AAAA,UACrB,QAAQ,GAAG,OAAO,eAAe,YAAY,MAAgB;AAAA,UAC7D,iBAAiB,OAAO;AAAA,UACxB,UAAU;AAAA,UACV,OAAO;AAAA,UACP,SAAS,aAAe,OAAO,mBAA8B,MAAO;AAAA,UACpE,QAAQ,aAAa,gBAAgB;AAAA,UACrC,YAAY;AAAA,UACZ,GAAI,UAAU,EAAE,SAAS,aAAa,IAAc,IAAI,eAAe,EAAE,IAAI,CAAC;AAAA,QAChF;AAAA,QAEC;AAAA,wBAAc,YAAY;AAAA,UAC3B,4CAAC,YAAQ,iBAAM;AAAA,UACf,4CAAC,UAAK,OAAO,EAAE,OAAO,2BAA2B,UAAU,GAAG,GAAG,mCAEjE;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO;AAAA,QACP,SAAS,aAAe,OAAO,mBAA8B,MAAO;AAAA,QACpE,QAAQ,aAAa,gBAAgB;AAAA,MACvC;AAAA,MAEC;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,MAAM,sBAAsB,CAAC,SAAS,UAAU,OAAO;AAEhD,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,YAAa,SAAS,aAAuD;AACnF,QAAM,UAAW,SAAS,WAA8C;AACxE,QAAM,YAAa,SAAS,aAAiD;AAO7E,QAAM,UAA8C;AAAA,IAClD,0BAA0B,OAAO,QAAQ,OAAO,GAAG,OAAO,IAAI,OAAO;AAAA,IACrE,yBAAyB,OAAO,OAAO,OAAO,GAAG,OAAO,GAAG,OAAO;AAAA,IAClE,mCAAmC,OAAO;AAAA,IAC1C,uCAAuC,OAAO;AAAA,IAC9C,qCAAqC,OAAO;AAAA,IAC5C,+BAA+B,OAAO;AAAA,IACtC,yCAAyC,OAAO;AAAA,IAChD,6CAA6C,OAAO;AAAA,IACpD,2CAA2C,OAAO;AAAA,IAClD,qCAAqC,OAAO;AAAA,IAC5C,gCAAgC,OAAO;AAAA,IACvC,sCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,iCAAiC,OAAO;AAAA,IACxC,wCACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,IACrE,4BAA4B,GAAG,OAAO,WAAW;AAAA,IACjD,2BAA2B,GAAG,OAAO,UAAU;AAAA,IAC/C,wBAAwB,GAAG,OAAO,OAAO;AAAA,IACzC,iCAAiC,GAAG,OAAO,eAAe;AAAA,IAC1D,uBAAuB,OAAO;AAAA,EAChC;AAEA,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AAMA,QAAM,iBAAiB,GAAG,KAAK,IAAI,SAAS;AAC5C,QAAM,sBAAsB,UAAU;AAEtC,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,GAAG,QAAQ,GAC1E;AAAA,iDAAC,SACC;AAAA,mDAAC,SAAI,OAAO,cAAe;AAAA;AAAA,QAAM;AAAA,SAAM;AAAA,MACvC,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,GAAG,GAC9D;AAAA,oDAAC,eAAY,UAAU,OAAO,OAAc,QAAgB,OAAM,cAAa,SAAkB,WAAsB;AAAA,QACvH,4CAAC,eAAY,UAAU,MAAM,OAAc,QAAgB,OAAM,YAAW,SAAkB,WAAsB;AAAA,SACtH;AAAA,OACF;AAAA,IAOA,6CAAC,SAAI,OAAO,EAAE,WAAW,iCAAiC,YAAY,GAAG,GACvE;AAAA,kDAAC,SAAI,OAAO,cAAc,yBAAW;AAAA,MACrC;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,qBAAqB,cAAc;AAAA,UACzC;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO,UAAU,UAAU,+BAA+B;AAAA,UAEzD,8BAAoB,IAAI,CAAC,QACxB;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,qBAAqB,cAAc;AAAA,cACzC,OAAO;AAAA,cACP,UAAU;AAAA,cAET,sBAAY;AAAA;AAAA;AAAA,gBAGX,4EACE;AAAA,8DAAC,YAAQ,eAAI;AAAA,kBACb,4CAAC,UAAK,OAAO,EAAE,OAAO,2BAA2B,UAAU,GAAG,GAAG,mCAEjE;AAAA,mBACF;AAAA,kBAEA;AAAA;AAAA,YAfG;AAAA,UAiBP,CACD;AAAA;AAAA,QA3BI;AAAA,MA4BP;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/radio-group/radio-group-preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/radio-group/radio-group-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAkFrD,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAgFnE"}
+{"version":3,"file":"radio-group-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/radio-group/radio-group-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAsIrD,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAoGnE"}

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

@@ -1,19 +1,83 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { RadioGroup, RadioOption } from "../index.js";
 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__ */ 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__ */ jsx(
+        "span",
+        {
+          style: {
+            width: size * 0.5,
+            height: size * 0.5,
+            borderRadius: "50%",
+            backgroundColor: dot
+          }
+        }
+      )
+    }
+  );
+  if (isCard) {
+    return /* @__PURE__ */ 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__ */ jsx("strong", { children: label }),
+          /* @__PURE__ */ jsx("span", { style: { color: "var(--color-text-muted)", fontSize: 12 }, children: "What this option does" })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -27,36 +91,7 @@ function ShowcaseRow({
         cursor: isDisabled ? "not-allowed" : "pointer"
       },
       children: [
-        /* @__PURE__ */ 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__ */ jsx(
-              "span",
-              {
-                style: {
-                  width: size * 0.5,
-                  height: size * 0.5,
-                  borderRadius: "50%",
-                  backgroundColor: dot
-                }
-              }
-            )
-          }
-        ),
+        circle,
         label
       ]
     }
@@ -66,6 +101,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,
@@ -80,7 +117,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,
@@ -98,8 +140,8 @@ function RadioGroupPreview({ styles, variants }) {
         " state"
       ] }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-        /* @__PURE__ */ jsx(ShowcaseRow, { selected: false, state, styles, label: "Unselected" }),
-        /* @__PURE__ */ jsx(ShowcaseRow, { selected: true, state, styles, label: "Selected" })
+        /* @__PURE__ */ jsx(ShowcaseRow, { selected: false, state, styles, label: "Unselected", variant, indicator }),
+        /* @__PURE__ */ jsx(ShowcaseRow, { selected: true, state, styles, label: "Selected", variant, indicator })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
@@ -109,6 +151,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__ */ jsx(
             RadioOption,
@@ -116,7 +160,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__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("strong", { children: opt }),
+                  /* @__PURE__ */ jsx("span", { style: { color: "var(--color-text-muted)", fontSize: 12 }, children: "What this option does" })
+                ] })
+              ) : opt
             },
             opt
           ))

package/dist/ui/radio-group/radio-group-preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/radio-group/radio-group-preview.tsx"],"sourcesContent":["import { type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { RadioGroup, RadioOption } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nfunction ShowcaseRow({\n  selected,\n  state,\n  styles,\n  label,\n}: {\n  selected: boolean;\n  state: string;\n  styles: Styles;\n  label: string;\n}) {\n  // Static showcase — paints the selected forced state regardless of\n  // pointer interaction. Inline JSX (not the real <RadioOption>) so each\n  // forced state can override the circle + dot directly; the interactive\n  // instance below is where production CSS rules exercise.\n  const isHover = state === 'hover';\n  const isFocus = state === 'focus';\n  const isDisabled = state === 'disabled';\n\n  const bg = isHover\n    ? styles.hoverUnselectedBg\n    : styles.unselectedBg;\n  const border = isHover\n    ? (selected ? styles.hoverSelectedBorder : styles.hoverUnselectedBorder)\n    : (selected ? styles.selectedBorder : styles.unselectedBorder);\n  const dot = isHover ? styles.hoverDotColor : styles.dotColor;\n  const ring = styles.focusRing;\n  const size = (styles.size as number) ?? 20;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 10,\n        fontSize: 14,\n        color: 'var(--color-text)',\n        opacity: isDisabled ? ((styles.disabledOpacity as number) ?? 0.4) : 1,\n        cursor: isDisabled ? 'not-allowed' : 'pointer',\n      }}\n    >\n      <span\n        aria-hidden=\"true\"\n        style={{\n          width: size,\n          height: size,\n          flexShrink: 0,\n          borderRadius: '50%',\n          border: `2px solid ${border as string}`,\n          backgroundColor: bg as string,\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          transition: 'border-color 0.15s, background-color 0.15s',\n          ...(isFocus\n            ? { outline: `2px solid ${ring as string}`, outlineOffset: 2 }\n            : {}),\n        }}\n      >\n        {selected && (\n          <span\n            style={{\n              width: size * 0.5,\n              height: size * 0.5,\n              borderRadius: '50%',\n              backgroundColor: dot as string,\n            }}\n          />\n        )}\n      </span>\n      {label}\n    </div>\n  );\n}\n\nconst INTERACTIVE_OPTIONS = ['Small', 'Medium', 'Large'];\n\nexport function RadioGroupPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const direction = (variants.direction as 'vertical' | 'horizontal' | undefined) ?? 'vertical';\n\n  // Project every registry knob as a `--uxm-radio-group-*` custom property\n  // on the wrapper. The interactive <RadioGroup> below renders the real\n  // component whose styles.css rules read these vars — live editor edits\n  // paint immediately, and production `:hover` / `:focus-visible` rules\n  // exercise exactly as they would in prod.\n  const cssVars: Record<string, string | undefined> = {\n    '--uxm-radio-group-size': styles.size != null ? `${styles.size}px` : undefined,\n    '--uxm-radio-group-gap': styles.gap != null ? `${styles.gap}px` : undefined,\n    '--uxm-radio-group-unselected-bg': styles.unselectedBg as string | undefined,\n    '--uxm-radio-group-unselected-border': styles.unselectedBorder as string | undefined,\n    '--uxm-radio-group-selected-border': styles.selectedBorder as string | undefined,\n    '--uxm-radio-group-dot-color': styles.dotColor as string | undefined,\n    '--uxm-radio-group-hover-unselected-bg': styles.hoverUnselectedBg as string | undefined,\n    '--uxm-radio-group-hover-unselected-border': styles.hoverUnselectedBorder as string | undefined,\n    '--uxm-radio-group-hover-selected-border': styles.hoverSelectedBorder as string | undefined,\n    '--uxm-radio-group-hover-dot-color': styles.hoverDotColor as string | undefined,\n    '--uxm-radio-group-focus-ring': styles.focusRing as string | undefined,\n    '--uxm-radio-group-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-radio-group-error-color': styles.errorColor as string | undefined,\n    '--uxm-radio-group-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n  };\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  // Pair the state and direction into the interactive `key` so that\n  // toggling either variant resets the radio group cleanly (matches the\n  // freshly-{re,dis}abled UX and clears any stale selection when the user\n  // flips layout).\n  const interactiveKey = `${state}-${direction}`;\n  const interactiveDisabled = state === 'disabled';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <ShowcaseRow selected={false} state={state} styles={styles} label=\"Unselected\" />\n          <ShowcaseRow selected={true} state={state} styles={styles} label=\"Selected\" />\n        </div>\n      </div>\n\n      {/* Interactive instance — uncontrolled so the browser owns the\n          checked state. React (and the canvas's event-capture re-renders)\n          can't fight the DOM here, so click/keyboard navigation toggle\n          reliably between options. Three options share a unique `name`\n          so the browser's radio-group semantics work natively. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <RadioGroup\n          key={interactiveKey}\n          name={`uxm-radio-preview-${interactiveKey}`}\n          direction={direction}\n          error={state === 'error' ? 'Pick an option to continue' : undefined}\n        >\n          {INTERACTIVE_OPTIONS.map((opt) => (\n            <RadioOption\n              key={opt}\n              name={`uxm-radio-preview-${interactiveKey}`}\n              value={opt}\n              disabled={interactiveDisabled}\n            >\n              {opt}\n            </RadioOption>\n          ))}\n        </RadioGroup>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/ui/radio-group/radio-group-preview.tsx"],"sourcesContent":["import { type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { RadioGroup, RadioOption } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nfunction ShowcaseRow({\n  selected,\n  state,\n  styles,\n  label,\n  variant,\n  indicator,\n}: {\n  selected: boolean;\n  state: string;\n  styles: Styles;\n  label: string;\n  variant: 'default' | 'card';\n  indicator: 'hidden' | 'corner';\n}) {\n  // Static showcase — paints the selected forced state regardless of\n  // pointer interaction. Inline JSX (not the real <RadioOption>) so each\n  // forced state can override the circle + dot directly; the interactive\n  // instance below is where production CSS rules exercise.\n  //\n  // It has to follow `variant`: this is the ONLY thing that paints the forced\n  // hover / focus / disabled states — the interactive group below shows the\n  // resting state and real input. Left as a row while the variant is `card`,\n  // the States picker would show a hovered CIRCLE for a control that is a\n  // tile, and the hover / focus knobs (which the card frame genuinely reads)\n  // would be tuned against feedback that is not what ships.\n  const isHover = state === 'hover';\n  const isFocus = state === 'focus';\n  const isDisabled = state === 'disabled';\n  const isCard = variant === 'card';\n\n  const bg = isHover\n    ? styles.hoverUnselectedBg\n    : styles.unselectedBg;\n  const border = isHover\n    ? (selected ? styles.hoverSelectedBorder : styles.hoverUnselectedBorder)\n    : (selected ? styles.selectedBorder : styles.unselectedBorder);\n  const dot = isHover ? styles.hoverDotColor : styles.dotColor;\n  const ring = styles.focusRing;\n  const size = (styles.size as number) ?? 20;\n\n  const circle = (\n    <span\n      aria-hidden=\"true\"\n      style={{\n        width: size,\n        height: size,\n        flexShrink: 0,\n        borderRadius: '50%',\n        border: `2px solid ${border as string}`,\n        backgroundColor: bg as string,\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        transition: 'border-color 0.15s, background-color 0.15s',\n        ...(isFocus && !isCard\n          ? { outline: `2px solid ${ring as string}`, outlineOffset: 2 }\n          : {}),\n        ...(isCard\n          ? { position: 'absolute' as const, top: styles.cardPadding as number, right: styles.cardPadding as number }\n          : {}),\n      }}\n    >\n      {selected && (\n        <span\n          style={{\n            width: size * 0.5,\n            height: size * 0.5,\n            borderRadius: '50%',\n            backgroundColor: dot as string,\n          }}\n        />\n      )}\n    </span>\n  );\n\n  if (isCard) {\n    // Mirrors `.uxm-radio--card`: the tile carries the frame and the focus\n    // ring, and the circle is either gone or pinned to the corner.\n    return (\n      <div\n        style={{\n          position: 'relative',\n          display: 'flex',\n          flexDirection: 'column',\n          gap: styles.cardGap as number,\n          minWidth: 150,\n          boxSizing: 'border-box',\n          padding: styles.cardPadding as number,\n          borderRadius: styles.cardRadius as number,\n          border: `${styles.cardBorderWidth}px solid ${border as string}`,\n          backgroundColor: styles.cardBg as string,\n          fontSize: 14,\n          color: 'var(--color-text)',\n          opacity: isDisabled ? ((styles.disabledOpacity as number) ?? 0.4) : 1,\n          cursor: isDisabled ? 'not-allowed' : 'pointer',\n          transition: 'border-color 0.15s, background-color 0.15s',\n          ...(isFocus ? { outline: `2px solid ${ring as string}`, outlineOffset: 2 } : {}),\n        }}\n      >\n        {indicator === 'corner' && circle}\n        <strong>{label}</strong>\n        <span style={{ color: 'var(--color-text-muted)', fontSize: 12 }}>\n          What this option does\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 10,\n        fontSize: 14,\n        color: 'var(--color-text)',\n        opacity: isDisabled ? ((styles.disabledOpacity as number) ?? 0.4) : 1,\n        cursor: isDisabled ? 'not-allowed' : 'pointer',\n      }}\n    >\n      {circle}\n      {label}\n    </div>\n  );\n}\n\nconst INTERACTIVE_OPTIONS = ['Small', 'Medium', 'Large'];\n\nexport function RadioGroupPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const direction = (variants.direction as 'vertical' | 'horizontal' | undefined) ?? 'vertical';\n  const variant = (variants.variant as 'default' | 'card' | undefined) ?? 'default';\n  const indicator = (variants.indicator as 'hidden' | 'corner' | undefined) ?? 'hidden';\n\n  // Project every registry knob as a `--uxm-radio-group-*` custom property\n  // on the wrapper. The interactive <RadioGroup> below renders the real\n  // component whose styles.css rules read these vars — live editor edits\n  // paint immediately, and production `:hover` / `:focus-visible` rules\n  // exercise exactly as they would in prod.\n  const cssVars: Record<string, string | undefined> = {\n    '--uxm-radio-group-size': styles.size != null ? `${styles.size}px` : undefined,\n    '--uxm-radio-group-gap': styles.gap != null ? `${styles.gap}px` : undefined,\n    '--uxm-radio-group-unselected-bg': styles.unselectedBg as string | undefined,\n    '--uxm-radio-group-unselected-border': styles.unselectedBorder as string | undefined,\n    '--uxm-radio-group-selected-border': styles.selectedBorder as string | undefined,\n    '--uxm-radio-group-dot-color': styles.dotColor as string | undefined,\n    '--uxm-radio-group-hover-unselected-bg': styles.hoverUnselectedBg as string | undefined,\n    '--uxm-radio-group-hover-unselected-border': styles.hoverUnselectedBorder as string | undefined,\n    '--uxm-radio-group-hover-selected-border': styles.hoverSelectedBorder as string | undefined,\n    '--uxm-radio-group-hover-dot-color': styles.hoverDotColor as string | undefined,\n    '--uxm-radio-group-focus-ring': styles.focusRing as string | undefined,\n    '--uxm-radio-group-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-radio-group-error-color': styles.errorColor as string | undefined,\n    '--uxm-radio-group-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n    '--uxm-radio-card-padding': `${styles.cardPadding}px`,\n    '--uxm-radio-card-radius': `${styles.cardRadius}px`,\n    '--uxm-radio-card-gap': `${styles.cardGap}px`,\n    '--uxm-radio-card-border-width': `${styles.cardBorderWidth}px`,\n    '--uxm-radio-card-bg': styles.cardBg as string,\n  };\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  // Pair the state and direction into the interactive `key` so that\n  // toggling either variant resets the radio group cleanly (matches the\n  // freshly-{re,dis}abled UX and clears any stale selection when the user\n  // flips layout).\n  const interactiveKey = `${state}-${direction}`;\n  const interactiveDisabled = state === 'disabled';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <ShowcaseRow selected={false} state={state} styles={styles} label=\"Unselected\" variant={variant} indicator={indicator} />\n          <ShowcaseRow selected={true} state={state} styles={styles} label=\"Selected\" variant={variant} indicator={indicator} />\n        </div>\n      </div>\n\n      {/* Interactive instance — uncontrolled so the browser owns the\n          checked state. React (and the canvas's event-capture re-renders)\n          can't fight the DOM here, so click/keyboard navigation toggle\n          reliably between options. Three options share a unique `name`\n          so the browser's radio-group semantics work natively. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <RadioGroup\n          key={interactiveKey}\n          name={`uxm-radio-preview-${interactiveKey}`}\n          direction={direction}\n          variant={variant}\n          indicator={indicator}\n          error={state === 'error' ? 'Pick an option to continue' : undefined}\n        >\n          {INTERACTIVE_OPTIONS.map((opt) => (\n            <RadioOption\n              key={opt}\n              name={`uxm-radio-preview-${interactiveKey}`}\n              value={opt}\n              disabled={interactiveDisabled}\n            >\n              {variant === 'card' ? (\n                // Card mode is for rich content — a one-word label in a tile\n                // would demo a box, not the shape the variant exists for.\n                <>\n                  <strong>{opt}</strong>\n                  <span style={{ color: 'var(--color-text-muted)', fontSize: 12 }}>\n                    What this option does\n                  </span>\n                </>\n              ) : (\n                opt\n              )}\n            </RadioOption>\n          ))}\n        </RadioGroup>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -33,6 +33,8 @@ function RadioGroup({
   defaultValue,
   onChange,
   direction = "vertical",
+  variant = "default",
+  indicator = "hidden",
   className,
   children,
   error,
@@ -56,13 +58,20 @@ function RadioGroup({
         className: (0, import_helpers.cn)(
           "uxm-radio-group",
           `uxm-radio-group--${direction}`,
+          variant === "card" && "uxm-radio-group--card",
           error && "uxm-radio-group--error",
           className
         ),
         id,
         "aria-invalid": error ? true : void 0,
         "aria-describedby": (0, import_helpers.mergeDescribedBy)(describedBy, error ? errorId : void 0),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioGroupContext.Provider, { value: { name, value, hasValue, onChange: handleChange }, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          RadioGroupContext.Provider,
+          {
+            value: { name, value, hasValue, onChange: handleChange, variant, indicator },
+            children
+          }
+        )
       }
     ),
     error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { id: errorId, className: "uxm-radio-group__error-message", children: error })
@@ -86,23 +95,42 @@ function RadioOption({
     onChange?.(value, e);
     group?.onChange?.(value, e);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: (0, import_helpers.cn)("uxm-radio", disabled && "uxm-radio--disabled", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "input",
-      {
-        type: "radio",
-        className: "uxm-radio__input",
-        name: resolvedName,
-        value,
-        checked: resolvedChecked,
-        defaultChecked,
-        disabled,
-        onChange: handleChange
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-radio__circle", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-radio__dot" }) }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-radio__label", children })
-  ] });
+  const isCard = group?.variant === "card";
+  const indicator = group?.indicator ?? "hidden";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "label",
+    {
+      className: (0, import_helpers.cn)(
+        "uxm-radio",
+        isCard && "uxm-radio--card",
+        isCard && indicator === "corner" && "uxm-radio--indicator-corner",
+        disabled && "uxm-radio--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            type: "radio",
+            className: "uxm-radio__input",
+            name: resolvedName,
+            value,
+            checked: resolvedChecked,
+            defaultChecked,
+            disabled,
+            onChange: handleChange
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-radio__circle", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-radio__dot" }) }),
+        isCard ? (
+          // The tile itself. A general-sibling selector off the input paints its
+          // selected frame, so it works for a controlled option and an
+          // uncontrolled one alike — the DOM, not React, knows which is checked.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-radio__card", children })
+        ) : children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-radio__label", children })
+      ]
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { createContext, useContext, useId, useState } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\nimport { FieldError } from '@/ui/field-error';\n\nimport type { ChangeEvent, ReactNode } from 'react';\n\nexport type RadioGroupDirection = 'vertical' | 'horizontal';\n\nexport interface RadioGroupProps {\n  name: string;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n  direction?: RadioGroupDirection;\n  className?: string;\n  children: ReactNode;\n  /**\n   * When set to a non-empty string, marks the group invalid: `aria-invalid`\n   * lands on the group and the message renders below in the error color. Per\n   * the input family's small-control convention the circles AND the option\n   * labels all stay neutral — the message is the sole signal. The\n   * `.uxm-radio-group--error` class still rides on the root as a state hook.\n   * Omit (or pass an empty string) for normal.\n   */\n  error?: string;\n  /**\n   * Forwarded to the `role=\"radiogroup\"` root. `FormField` injects both — `id` for its\n   * label association, `aria-describedby` for the hint — so wiring these\n   * makes the atom hint-associable; the describedby is merged with the\n   * atom's own error-message id, consumer ids first.\n   */\n  id?: string;\n  'aria-describedby'?: string;\n}\n\n// Carries the group-level `name` / selected `value` / change handler down to\n// each `RadioOption` without forcing every consumer to repeat `name` and wire\n// `checked`/`onChange` by hand on every option. `RadioOption` still accepts\n// its own `name` / `checked` / `defaultChecked` / `onChange` so existing call\n// sites that set those directly (bypassing the group) keep working unchanged.\n//\n// `hasValue` is fixed for the lifetime of the group (derived from whether\n// `value`/`defaultValue` was passed at all, not from the current value) so a\n// `RadioOption` that defers to the group never flips between an\n// uncontrolled (`checked={undefined}`) and controlled (`checked={boolean}`)\n// input across renders — that flip is what triggers React's \"changing an\n// uncontrolled input to be controlled\" warning.\ninterface RadioGroupContextValue {\n  name?: string;\n  value?: string;\n  hasValue: boolean;\n  onChange: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport function RadioGroup({\n  name,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  direction = 'vertical',\n  className,\n  children,\n  error,\n  id,\n  'aria-describedby': describedBy,\n}: RadioGroupProps) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n  const hasValue = controlledValue !== undefined || defaultValue !== undefined;\n  const errorId = useId();\n\n  function handleChange(nextValue: string, e: ChangeEvent<HTMLInputElement>) {\n    if (!isControlled) setUncontrolledValue(nextValue);\n    onChange?.(nextValue, e);\n  }\n\n  return (\n    <>\n      <div\n        role=\"radiogroup\"\n        className={cn(\n          'uxm-radio-group',\n          `uxm-radio-group--${direction}`,\n          error && 'uxm-radio-group--error',\n          className,\n        )}\n        id={id}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={mergeDescribedBy(describedBy, error ? errorId : undefined)}\n      >\n        <RadioGroupContext.Provider value={{ name, value, hasValue, onChange: handleChange }}>\n          {children}\n        </RadioGroupContext.Provider>\n      </div>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-radio-group__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\n// Static marker so FormField only forwards its `error` prop into children that\n// accept one (avoids React unknown-prop warnings on non-input children).\nRadioGroup.hasError = true;\n\nexport interface RadioOptionProps {\n  name?: string;\n  value: string;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function RadioOption({\n  name,\n  value,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  children,\n  className,\n}: RadioOptionProps) {\n  const group = useContext(RadioGroupContext);\n  const resolvedName = name ?? group?.name;\n  // Only defer to the group's selected value when this option doesn't\n  // already manage its own checked state (explicit `checked`/`defaultChecked`\n  // always wins, matching the controlled/uncontrolled convention) AND the\n  // group was actually given a `value`/`defaultValue` to manage — otherwise\n  // `checked` stays `undefined` so the input remains a plain native\n  // uncontrolled radio (as it always has been for consumers who only use\n  // `RadioGroup` for the shared `name` + layout, not selection state).\n  const resolvedChecked =\n    checked !== undefined\n      ? checked\n      : defaultChecked !== undefined || !group?.hasValue\n        ? undefined\n        : group.value === value;\n\n  function handleChange(e: ChangeEvent<HTMLInputElement>) {\n    onChange?.(value, e);\n    group?.onChange?.(value, e);\n  }\n\n  return (\n    <label className={cn('uxm-radio', disabled && 'uxm-radio--disabled', className)}>\n      <input\n        type=\"radio\"\n        className=\"uxm-radio__input\"\n        name={resolvedName}\n        value={value}\n        checked={resolvedChecked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        onChange={handleChange}\n      />\n      <span className=\"uxm-radio__circle\" aria-hidden=\"true\">\n        <span className=\"uxm-radio__dot\" />\n      </span>\n      {children && <span className=\"uxm-radio__label\">{children}</span>}\n    </label>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiFI;AAjFJ,mBAA2D;AAE3D,qBAAqC;AACrC,yBAA2B;AAoD3B,MAAM,wBAAoB,4BAA6C,IAAI;AAEpE,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACtB,GAAoB;AAClB,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAS,YAAY;AACvE,QAAM,eAAe,oBAAoB;AACzC,QAAM,QAAQ,eAAe,kBAAkB;AAC/C,QAAM,WAAW,oBAAoB,UAAa,iBAAiB;AACnE,QAAM,cAAU,oBAAM;AAEtB,WAAS,aAAa,WAAmB,GAAkC;AACzE,QAAI,CAAC,aAAc,sBAAqB,SAAS;AACjD,eAAW,WAAW,CAAC;AAAA,EACzB;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAW;AAAA,UACT;AAAA,UACA,oBAAoB,SAAS;AAAA,UAC7B,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QACA;AAAA,QACA,gBAAc,QAAQ,OAAO;AAAA,QAC7B,wBAAkB,iCAAiB,aAAa,QAAQ,UAAU,MAAS;AAAA,QAE3E,sDAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,MAAM,OAAO,UAAU,UAAU,aAAa,GAChF,UACH;AAAA;AAAA,IACF;AAAA,IACC,SACC,4CAAC,iCAAW,IAAI,SAAS,WAAU,kCAChC,iBACH;AAAA,KAEJ;AAEJ;AAGA,WAAW,WAAW;AAaf,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,YAAQ,yBAAW,iBAAiB;AAC1C,QAAM,eAAe,QAAQ,OAAO;AAQpC,QAAM,kBACJ,YAAY,SACR,UACA,mBAAmB,UAAa,CAAC,OAAO,WACtC,SACA,MAAM,UAAU;AAExB,WAAS,aAAa,GAAkC;AACtD,eAAW,OAAO,CAAC;AACnB,WAAO,WAAW,OAAO,CAAC;AAAA,EAC5B;AAEA,SACE,6CAAC,WAAM,eAAW,mBAAG,aAAa,YAAY,uBAAuB,SAAS,GAC5E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU;AAAA;AAAA,IACZ;AAAA,IACA,4CAAC,UAAK,WAAU,qBAAoB,eAAY,QAC9C,sDAAC,UAAK,WAAU,kBAAiB,GACnC;AAAA,IACC,YAAY,4CAAC,UAAK,WAAU,oBAAoB,UAAS;AAAA,KAC5D;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { createContext, useContext, useId, useState } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\nimport { FieldError } from '@/ui/field-error';\n\nimport type { ChangeEvent, ReactNode } from 'react';\n\nexport type RadioGroupDirection = 'vertical' | 'horizontal';\n\n/** Option presentation. See `RadioGroupProps.variant`. */\nexport type RadioGroupVariant = 'default' | 'card';\n\n/** Where the radio dot goes in card mode. See `RadioGroupProps.indicator`. */\nexport type RadioGroupIndicator = 'hidden' | 'corner';\n\nexport interface RadioGroupProps {\n  name: string;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n  direction?: RadioGroupDirection;\n  /**\n   * Option presentation. `default` (unchanged) renders each option as a\n   * `[circle] label` row. `card` renders each one as a selectable tile: the\n   * option's `children` fill the card body and the selected state is an accent\n   * frame around the whole tile — for a visual single-select (a layout picker,\n   * plan tiers, theme swatches).\n   *\n   * The control stays a native radio group either way, so `role=\"radiogroup\"`,\n   * `aria-checked` and arrow-key selection are unaffected by this prop.\n   */\n  variant?: RadioGroupVariant;\n  /**\n   * Card mode only. `hidden` (default) drops the radio circle — the frame is\n   * the affordance. `corner` keeps it, pinned to the tile's top-right, for\n   * redundancy where a frame alone is too subtle.\n   *\n   * Ignored when `variant` is `default`.\n   */\n  indicator?: RadioGroupIndicator;\n  className?: string;\n  children: ReactNode;\n  /**\n   * When set to a non-empty string, marks the group invalid: `aria-invalid`\n   * lands on the group and the message renders below in the error color. Per\n   * the input family's small-control convention the circles AND the option\n   * labels all stay neutral — the message is the sole signal. The\n   * `.uxm-radio-group--error` class still rides on the root as a state hook.\n   * Omit (or pass an empty string) for normal.\n   */\n  error?: string;\n  /**\n   * Forwarded to the `role=\"radiogroup\"` root. `FormField` injects both — `id` for its\n   * label association, `aria-describedby` for the hint — so wiring these\n   * makes the atom hint-associable; the describedby is merged with the\n   * atom's own error-message id, consumer ids first.\n   */\n  id?: string;\n  'aria-describedby'?: string;\n}\n\n// Carries the group-level `name` / selected `value` / change handler down to\n// each `RadioOption` without forcing every consumer to repeat `name` and wire\n// `checked`/`onChange` by hand on every option. `RadioOption` still accepts\n// its own `name` / `checked` / `defaultChecked` / `onChange` so existing call\n// sites that set those directly (bypassing the group) keep working unchanged.\n//\n// `hasValue` is fixed for the lifetime of the group (derived from whether\n// `value`/`defaultValue` was passed at all, not from the current value) so a\n// `RadioOption` that defers to the group never flips between an\n// uncontrolled (`checked={undefined}`) and controlled (`checked={boolean}`)\n// input across renders — that flip is what triggers React's \"changing an\n// uncontrolled input to be controlled\" warning.\ninterface RadioGroupContextValue {\n  name?: string;\n  value?: string;\n  hasValue: boolean;\n  onChange: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n  // Presentation travels down the same channel as `name`/`value` so an option\n  // never has to be told twice what group it is in.\n  variant: RadioGroupVariant;\n  indicator: RadioGroupIndicator;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport function RadioGroup({\n  name,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  direction = 'vertical',\n  variant = 'default',\n  indicator = 'hidden',\n  className,\n  children,\n  error,\n  id,\n  'aria-describedby': describedBy,\n}: RadioGroupProps) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n  const hasValue = controlledValue !== undefined || defaultValue !== undefined;\n  const errorId = useId();\n\n  function handleChange(nextValue: string, e: ChangeEvent<HTMLInputElement>) {\n    if (!isControlled) setUncontrolledValue(nextValue);\n    onChange?.(nextValue, e);\n  }\n\n  return (\n    <>\n      <div\n        role=\"radiogroup\"\n        className={cn(\n          'uxm-radio-group',\n          `uxm-radio-group--${direction}`,\n          variant === 'card' && 'uxm-radio-group--card',\n          error && 'uxm-radio-group--error',\n          className,\n        )}\n        id={id}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={mergeDescribedBy(describedBy, error ? errorId : undefined)}\n      >\n        <RadioGroupContext.Provider\n          value={{ name, value, hasValue, onChange: handleChange, variant, indicator }}\n        >\n          {children}\n        </RadioGroupContext.Provider>\n      </div>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-radio-group__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\n// Static marker so FormField only forwards its `error` prop into children that\n// accept one (avoids React unknown-prop warnings on non-input children).\nRadioGroup.hasError = true;\n\nexport interface RadioOptionProps {\n  name?: string;\n  value: string;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function RadioOption({\n  name,\n  value,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  children,\n  className,\n}: RadioOptionProps) {\n  const group = useContext(RadioGroupContext);\n  const resolvedName = name ?? group?.name;\n  // Only defer to the group's selected value when this option doesn't\n  // already manage its own checked state (explicit `checked`/`defaultChecked`\n  // always wins, matching the controlled/uncontrolled convention) AND the\n  // group was actually given a `value`/`defaultValue` to manage — otherwise\n  // `checked` stays `undefined` so the input remains a plain native\n  // uncontrolled radio (as it always has been for consumers who only use\n  // `RadioGroup` for the shared `name` + layout, not selection state).\n  const resolvedChecked =\n    checked !== undefined\n      ? checked\n      : defaultChecked !== undefined || !group?.hasValue\n        ? undefined\n        : group.value === value;\n\n  function handleChange(e: ChangeEvent<HTMLInputElement>) {\n    onChange?.(value, e);\n    group?.onChange?.(value, e);\n  }\n\n  const isCard = group?.variant === 'card';\n  const indicator = group?.indicator ?? 'hidden';\n\n  return (\n    <label\n      className={cn(\n        'uxm-radio',\n        isCard && 'uxm-radio--card',\n        isCard && indicator === 'corner' && 'uxm-radio--indicator-corner',\n        disabled && 'uxm-radio--disabled',\n        className,\n      )}\n    >\n      <input\n        type=\"radio\"\n        className=\"uxm-radio__input\"\n        name={resolvedName}\n        value={value}\n        checked={resolvedChecked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        onChange={handleChange}\n      />\n      {/* The circle stays a SIBLING of the input in both presentations, even\n          in card mode where it is pinned to a corner by CSS. Nesting it inside\n          the card body would have put it out of reach of every existing\n          `__input:checked + __circle` / hover / focus rule, which would then\n          need a parallel card-mode copy — two sets of state rules to keep in\n          step. Card mode only moves it, or hides it. */}\n      <span className=\"uxm-radio__circle\" aria-hidden=\"true\">\n        <span className=\"uxm-radio__dot\" />\n      </span>\n      {isCard ? (\n        // The tile itself. A general-sibling selector off the input paints its\n        // selected frame, so it works for a controlled option and an\n        // uncontrolled one alike — the DOM, not React, knows which is checked.\n        <span className=\"uxm-radio__card\">{children}</span>\n      ) : (\n        children && <span className=\"uxm-radio__label\">{children}</span>\n      )}\n    </label>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgHI;AAhHJ,mBAA2D;AAE3D,qBAAqC;AACrC,yBAA2B;AAiF3B,MAAM,wBAAoB,4BAA6C,IAAI;AAEpE,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACtB,GAAoB;AAClB,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAS,YAAY;AACvE,QAAM,eAAe,oBAAoB;AACzC,QAAM,QAAQ,eAAe,kBAAkB;AAC/C,QAAM,WAAW,oBAAoB,UAAa,iBAAiB;AACnE,QAAM,cAAU,oBAAM;AAEtB,WAAS,aAAa,WAAmB,GAAkC;AACzE,QAAI,CAAC,aAAc,sBAAqB,SAAS;AACjD,eAAW,WAAW,CAAC;AAAA,EACzB;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAW;AAAA,UACT;AAAA,UACA,oBAAoB,SAAS;AAAA,UAC7B,YAAY,UAAU;AAAA,UACtB,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QACA;AAAA,QACA,gBAAc,QAAQ,OAAO;AAAA,QAC7B,wBAAkB,iCAAiB,aAAa,QAAQ,UAAU,MAAS;AAAA,QAE3E;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YACC,OAAO,EAAE,MAAM,OAAO,UAAU,UAAU,cAAc,SAAS,UAAU;AAAA,YAE1E;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,IACC,SACC,4CAAC,iCAAW,IAAI,SAAS,WAAU,kCAChC,iBACH;AAAA,KAEJ;AAEJ;AAGA,WAAW,WAAW;AAaf,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,YAAQ,yBAAW,iBAAiB;AAC1C,QAAM,eAAe,QAAQ,OAAO;AAQpC,QAAM,kBACJ,YAAY,SACR,UACA,mBAAmB,UAAa,CAAC,OAAO,WACtC,SACA,MAAM,UAAU;AAExB,WAAS,aAAa,GAAkC;AACtD,eAAW,OAAO,CAAC;AACnB,WAAO,WAAW,OAAO,CAAC;AAAA,EAC5B;AAEA,QAAM,SAAS,OAAO,YAAY;AAClC,QAAM,YAAY,OAAO,aAAa;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,UAAU;AAAA,QACV,UAAU,cAAc,YAAY;AAAA,QACpC,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,MAAM;AAAA,YACN;AAAA,YACA,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,UAAU;AAAA;AAAA,QACZ;AAAA,QAOA,4CAAC,UAAK,WAAU,qBAAoB,eAAY,QAC9C,sDAAC,UAAK,WAAU,kBAAiB,GACnC;AAAA,QACC;AAAA;AAAA;AAAA;AAAA,UAIC,4CAAC,UAAK,WAAU,mBAAmB,UAAS;AAAA,YAE5C,YAAY,4CAAC,UAAK,WAAU,oBAAoB,UAAS;AAAA;AAAA;AAAA,EAE7D;AAEJ;","names":[]}

package/dist/ui/radio-group/radio-group.css

@@ -100,4 +100,86 @@
   margin-top: 4px;
   font-size: calc(var(--uxm-radio-group-error-message-size, 12px) * var(--type-scale, 1));
   color: var(--uxm-radio-group-error-color, var(--color-danger-text));
+}
+
+/* ── Card variant ───────────────────────────────────────────────────────────
+   A selectable tile instead of a `[circle] label` row: the option's children
+   fill the card body and the selected state is a frame around the whole tile.
+   The control underneath is untouched — still a native radio in a label, so
+   arrow-key selection, `aria-checked` and the focus behaviour are the same
+   ones the default presentation gets.
+
+   Every colour here resolves through a var that the default presentation
+   already exposes (`--uxm-radio-group-selected-border`, `-focus-ring`), so a
+   theme that re-tints the circle re-tints the frame with it and there is no
+   second accent to keep in step. The card-specific knobs are geometry only. */
+.uxm-radio--card {
+  /* Containing block for the corner indicator. */
+  position: relative;
+  /* The label is now a frame around one block, not a row of two. */
+  align-items: stretch;
+  display: inline-flex;
+  gap: 0;
+}
+.uxm-radio--card .uxm-radio__card {
+  background-color: var(--uxm-radio-card-bg, var(--color-card));
+  border: var(--uxm-radio-card-border-width, 1px) solid var(--uxm-radio-group-unselected-border, var(--uxm-radio-group-border-color, var(--color-border)));
+  border-radius: var(--uxm-radio-card-radius, 8px);
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--uxm-radio-card-gap, 4px);
+  padding: var(--uxm-radio-card-padding, 12px);
+  transition: background-color 0.15s, border-color 0.15s;
+  width: 100%;
+}
+.uxm-radio--card {
+  /* General sibling, not adjacent: the circle sits between the input and the
+     card in the DOM, and is absent from the flow when the indicator is
+     hidden. `~` is indifferent to both. */
+}
+.uxm-radio--card .uxm-radio__input:checked ~ .uxm-radio__card {
+  background-color: var(--uxm-radio-card-selected-bg, var(--uxm-radio-card-bg, var(--color-card)));
+  border-color: var(--uxm-radio-group-selected-border, var(--uxm-radio-group-active-color, var(--color-accent)));
+}
+.uxm-radio--card {
+  /* The frame carries focus in card mode. The default presentation rings the
+     circle, which here is hidden or shrunk into a corner — ringing it would
+     put the focus indicator on the smallest thing on screen instead of the
+     control the user is actually choosing. */
+}
+.uxm-radio--card .uxm-radio__input:focus-visible ~ .uxm-radio__card {
+  outline: 2px solid var(--uxm-radio-group-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+.uxm-radio--card:not(.uxm-radio--disabled):hover .uxm-radio__input:not(:checked) ~ .uxm-radio__card {
+  border-color: var(--uxm-radio-group-hover-unselected-border, var(--color-text-strong));
+}
+.uxm-radio--card:not(.uxm-radio--disabled):hover .uxm-radio__input:checked ~ .uxm-radio__card {
+  border-color: var(--uxm-radio-group-hover-selected-border, var(--color-accent-bold));
+}
+.uxm-radio--card {
+  /* Default indicator: the frame IS the affordance, so the circle goes. */
+}
+.uxm-radio--card .uxm-radio__circle {
+  display: none;
+}
+.uxm-radio--card {
+  /* …unless asked for, in which case it is pinned to the corner. Absolute, so
+     it never takes part in the card's own column layout. */
+}
+.uxm-radio--card.uxm-radio--indicator-corner .uxm-radio__circle {
+  display: inline-flex;
+  position: absolute;
+  right: var(--uxm-radio-card-padding, 12px);
+  top: var(--uxm-radio-card-padding, 12px);
+  z-index: 1;
+}
+
+/* Tiles wrap. A row of cards that cannot wrap either overflows its container
+   or squeezes every tile below its content — neither is what a picker wants,
+   and the default row presentation is unaffected. */
+.uxm-radio-group--card.uxm-radio-group--horizontal {
+  flex-wrap: wrap;
 }

package/dist/ui/radio-group/radio-group.d.ts

@@ -1,11 +1,34 @@
 import type { ChangeEvent, ReactNode } from 'react';
 export type RadioGroupDirection = 'vertical' | 'horizontal';
+/** Option presentation. See `RadioGroupProps.variant`. */
+export type RadioGroupVariant = 'default' | 'card';
+/** Where the radio dot goes in card mode. See `RadioGroupProps.indicator`. */
+export type RadioGroupIndicator = 'hidden' | 'corner';
 export interface RadioGroupProps {
     name: string;
     value?: string;
     defaultValue?: string;
     onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
     direction?: RadioGroupDirection;
+    /**
+     * Option presentation. `default` (unchanged) renders each option as a
+     * `[circle] label` row. `card` renders each one as a selectable tile: the
+     * option's `children` fill the card body and the selected state is an accent
+     * frame around the whole tile — for a visual single-select (a layout picker,
+     * plan tiers, theme swatches).
+     *
+     * The control stays a native radio group either way, so `role="radiogroup"`,
+     * `aria-checked` and arrow-key selection are unaffected by this prop.
+     */
+    variant?: RadioGroupVariant;
+    /**
+     * Card mode only. `hidden` (default) drops the radio circle — the frame is
+     * the affordance. `corner` keeps it, pinned to the tile's top-right, for
+     * redundancy where a frame alone is too subtle.
+     *
+     * Ignored when `variant` is `default`.
+     */
+    indicator?: RadioGroupIndicator;
     className?: string;
     children: ReactNode;
     /**
@@ -26,7 +49,7 @@ export interface RadioGroupProps {
     id?: string;
     'aria-describedby'?: string;
 }
-export declare function RadioGroup({ name, value: controlledValue, defaultValue, onChange, direction, className, children, error, id, 'aria-describedby': describedBy, }: RadioGroupProps): import("react").JSX.Element;
+export declare function RadioGroup({ name, value: controlledValue, defaultValue, onChange, direction, variant, indicator, className, children, error, id, 'aria-describedby': describedBy, }: RadioGroupProps): import("react").JSX.Element;
 export declare namespace RadioGroup {
     var hasError: boolean;
 }

package/dist/ui/radio-group/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE5D,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrE,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAuBD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,QAAQ,EACR,SAAsB,EACtB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,EAAE,EACF,kBAAkB,EAAE,WAAW,GAChC,EAAE,eAAe,+BAqCjB;yBAhDe,UAAU;;;AAqD1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,+BAwClB"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE5D,0DAA0D;AAC1D,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnD,8EAA8E;AAC9E,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrE,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AA2BD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,QAAQ,EACR,SAAsB,EACtB,OAAmB,EACnB,SAAoB,EACpB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,EAAE,EACF,kBAAkB,EAAE,WAAW,GAChC,EAAE,eAAe,+BAwCjB;yBArDe,UAAU;;;AA0D1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,+BAgElB"}