@asnewyla/radio 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 XD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# @asnewyla/radio
+
+Styled radio built on `@asnewyla/unstyled-radio`. Label association, inline
+validation error, full keyboard/focus accessibility.
+
+## Install
+
+```bash
+npm install @asnewyla/radio
+```
+
+Import the stylesheet once, anywhere in your app:
+
+```ts
+import '@asnewyla/radio/styles.css';
+```
+
+## Usage
+
+```tsx
+import { Radio } from '@asnewyla/radio';
+
+<Radio label="Option A" name="choice" defaultChecked />
+<Radio label="Option B" name="choice" />
+
+<Radio label="Option A" error="You must choose an option" />
+
+// Controlled
+<Radio
+  label="Option A"
+  checked={selected === 'a'}
+  onChange={() => setSelected('a')}
+/>
+```
+
+### Props
+
+| Prop | Type | Default |
+|---|---|---|
+| `label` | `string` (**required**) | — |
+| `error` | `string` | — |
+| `checked` / `defaultChecked` | `boolean` | — |
+| `onChange` | `(event: React.ChangeEvent<HTMLInputElement>) => void` | — |
+| `disabled` | `boolean` | `false` |
+| `id` | `string` | auto-generated via `useId()` |
+
+`error` doubles as the invalid-state flag — there's no separate `invalid`
+prop. Setting `error` sets `aria-invalid` on the input and links it via
+`aria-describedby` to the rendered error message; there's no way to end up
+with one without the other. Same convention `@asnewyla/input` and
+`@asnewyla/checkbox` use.
+
+### Grouping radios
+
+Two `Radio`s sharing a native `name` get correct browser-level exclusivity
+for free — clicking one genuinely unchecks the other at the DOM level.
+That's enough for a *display-only* group, or one you fully control
+yourself via `checked`/`onChange` on every member. For a group where you
+want React to own "which value is selected" as shared state, use
+`RadioGroup` from `@asnewyla/radio-group` instead of wiring several
+`Radio`s up by hand:
+
+```tsx
+import { RadioGroup } from '@asnewyla/radio-group';
+import { Radio } from '@asnewyla/radio';
+
+<RadioGroup name="size" defaultValue="md">
+  <Radio label="Small" value="sm" />
+  <Radio label="Medium" value="md" />
+  <Radio label="Large" value="lg" />
+</RadioGroup>
+```
+
+`Radio` exports `RadioGroupProvider`/`useRadioGroupContext` itself (that's
+how it consumes an ancestor group), but you'd only reach for those
+directly if you were building something like `RadioGroup` yourself — see
+`@asnewyla/radio-group`'s README for the underlying limitation it exists
+to fix (an uncontrolled radio's own state can go stale when a sibling is
+selected instead, since browsers don't fire a change event on the
+deselected radio).
+
+### Theming
+
+Override the CSS custom properties — defaults adapt automatically to
+`prefers-color-scheme` via `@asnewyla/tokens`:
+
+```css
+:root {
+  --xd-color-primary: #0d9488;
+  --xd-color-destructive: #dc2626;
+}
+```
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1,63 @@
+/* src/components/Radio.css */
+.xd-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--xd-space-sm, 0.375rem);
+  flex-wrap: wrap;
+}
+.xd-radio-input {
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  position: relative;
+  border-radius: 50%;
+  border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);
+  background-color: transparent;
+  cursor: pointer;
+  transition: border-color var(--xd-motion-fast, 120ms ease-out);
+}
+.xd-radio-input[data-checked=true] {
+  border-color: var(--xd-color-primary, #0d9488);
+}
+.xd-radio-input[data-checked=true]::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--xd-color-primary, #0d9488);
+  transform: translate(-50%, -50%);
+}
+.xd-radio-input:focus-visible {
+  outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, var(--xd-color-primary, #0d9488));
+  outline-offset: var(--xd-focus-ring-offset, 2px);
+}
+.xd-radio-label {
+  font-size: var(--xd-font-size-md, 0.875rem);
+  cursor: pointer;
+}
+.xd-radio-input[data-invalid=true] {
+  border-color: var(--xd-color-destructive, #dc2626);
+}
+.xd-radio-input[data-invalid=true]:focus-visible {
+  outline-color: var(--xd-color-destructive, #dc2626);
+}
+.xd-radio-error {
+  flex-basis: 100%;
+  font-size: var(--xd-font-size-sm, 0.8125rem);
+  color: var(--xd-color-destructive, #dc2626);
+}
+.xd-radio-input:disabled {
+  opacity: var(--xd-opacity-disabled, 0.5);
+  cursor: not-allowed;
+}
+.xd-radio-input:disabled + .xd-radio-label {
+  opacity: var(--xd-opacity-disabled, 0.5);
+  cursor: not-allowed;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Radio.css"],"sourcesContent":[".xd-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--xd-space-sm, 0.375rem);\n  flex-wrap: wrap;\n}\n\n.xd-radio-input {\n  appearance: none;\n  -webkit-appearance: none;\n  margin: 0;\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  position: relative;\n  border-radius: 50%;\n  border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);\n  background-color: transparent;\n  cursor: pointer;\n  transition: border-color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-radio-input[data-checked=\"true\"] {\n  border-color: var(--xd-color-primary, #0d9488);\n}\n\n.xd-radio-input[data-checked=\"true\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 50%;\n  background-color: var(--xd-color-primary, #0d9488);\n  transform: translate(-50%, -50%);\n}\n\n.xd-radio-input:focus-visible {\n  outline: var(--xd-focus-ring-width, 2px) solid\n    var(--xd-color-focus, var(--xd-color-primary, #0d9488));\n  outline-offset: var(--xd-focus-ring-offset, 2px);\n}\n\n.xd-radio-label {\n  font-size: var(--xd-font-size-md, 0.875rem);\n  cursor: pointer;\n}\n\n/* --- Invalid --- */\n\n.xd-radio-input[data-invalid=\"true\"] {\n  border-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-radio-input[data-invalid=\"true\"]:focus-visible {\n  outline-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-radio-error {\n  flex-basis: 100%;\n  font-size: var(--xd-font-size-sm, 0.8125rem);\n  color: var(--xd-color-destructive, #dc2626);\n}\n\n/* --- Disabled --- */\n\n.xd-radio-input:disabled {\n  opacity: var(--xd-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.xd-radio-input:disabled + .xd-radio-label {\n  opacity: var(--xd-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI,aAAa,EAAE;AACxB,aAAW;AACb;AAEA,CAAC;AACC,cAAY;AACZ,sBAAoB;AACpB,UAAQ;AACR,eAAa;AACb,SAAO;AACP,UAAQ;AACR,YAAU;AACV,iBAAe;AACf,UAAQ,IAAI,sBAAsB,EAAE,KAAK,MAAM,IAAI,iBAAiB,EAAE;AACtE,oBAAkB;AAClB,UAAQ;AACR,cAAY,aAAa,IAAI,gBAAgB,EAAE,MAAM;AACvD;AAEA,CAfC,cAec,CAAC;AACd,gBAAc,IAAI,kBAAkB,EAAE;AACxC;AAEA,CAnBC,cAmBc,CAAC,kBAAoB;AAClC,WAAS;AACT,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,oBAAkB,IAAI,kBAAkB,EAAE;AAC1C,aAAW,UAAU,IAAI,EAAE;AAC7B;AAEA,CA/BC,cA+Bc;AACb,WAAS,IAAI,qBAAqB,EAAE,KAAK,MACvC,IAAI,gBAAgB,EAAE,IAAI,kBAAkB,EAAE;AAChD,kBAAgB,IAAI,sBAAsB,EAAE;AAC9C;AAEA,CAAC;AACC,aAAW,IAAI,iBAAiB,EAAE;AAClC,UAAQ;AACV;AAIA,CA5CC,cA4Cc,CAAC;AACd,gBAAc,IAAI,sBAAsB,EAAE;AAC5C;AAEA,CAhDC,cAgDc,CAAC,kBAAoB;AAClC,iBAAe,IAAI,sBAAsB,EAAE;AAC7C;AAEA,CAAC;AACC,cAAY;AACZ,aAAW,IAAI,iBAAiB,EAAE;AAClC,SAAO,IAAI,sBAAsB,EAAE;AACrC;AAIA,CA5DC,cA4Dc;AACb,WAAS,IAAI,qBAAqB,EAAE;AACpC,UAAQ;AACV;AAEA,CAjEC,cAiEc,UAAU,EAAE,CA5B1B;AA6BC,WAAS,IAAI,qBAAqB,EAAE;AACpC,UAAQ;AACV;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { UnstyledRadioProps } from '@asnewyla/unstyled-radio';
+
+type RadioProps = Omit<UnstyledRadioProps, 'invalid'> & {
+    label: string;
+    error?: string;
+};
+declare const Radio: react.ForwardRefExoticComponent<Omit<UnstyledRadioProps, "invalid"> & {
+    label: string;
+    error?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioGroupContextValue {
+    name: string;
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+declare const RadioGroupProvider: react.Provider<RadioGroupContextValue | null>;
+declare function useRadioGroupContext(): RadioGroupContextValue | null;
+
+export { Radio, type RadioGroupContextValue, RadioGroupProvider, type RadioProps, useRadioGroupContext };

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { UnstyledRadioProps } from '@asnewyla/unstyled-radio';
+
+type RadioProps = Omit<UnstyledRadioProps, 'invalid'> & {
+    label: string;
+    error?: string;
+};
+declare const Radio: react.ForwardRefExoticComponent<Omit<UnstyledRadioProps, "invalid"> & {
+    label: string;
+    error?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioGroupContextValue {
+    name: string;
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+declare const RadioGroupProvider: react.Provider<RadioGroupContextValue | null>;
+declare function useRadioGroupContext(): RadioGroupContextValue | null;
+
+export { Radio, type RadioGroupContextValue, RadioGroupProvider, type RadioProps, useRadioGroupContext };

package/dist/index.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var unstyledRadio = require('@asnewyla/unstyled-radio');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Radio.tsx
+var RadioGroupContext = react.createContext(null);
+var RadioGroupProvider = RadioGroupContext.Provider;
+function useRadioGroupContext() {
+  return react.useContext(RadioGroupContext);
+}
+function RadioInner({
+  id,
+  label,
+  error,
+  disabled,
+  className,
+  checked,
+  onChange,
+  value,
+  name,
+  ...rest
+}, ref) {
+  const group = useRadioGroupContext();
+  const generatedId = react.useId();
+  const radioId = id ?? generatedId;
+  const errorId = `${radioId}-error`;
+  const resolvedChecked = checked ?? (group ? group.value === value : void 0);
+  const resolvedName = name ?? group?.name;
+  const handleChange = (e) => {
+    onChange?.(e);
+    if (group && value !== void 0) {
+      group.onChange(String(value));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "xd-radio", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      unstyledRadio.UnstyledRadio,
+      {
+        id: radioId,
+        ...rest,
+        name: resolvedName,
+        value,
+        checked: resolvedChecked,
+        onChange: handleChange,
+        invalid: !!error,
+        disabled,
+        "aria-describedby": error ? errorId : void 0,
+        className: className ? `xd-radio-input ${className}` : "xd-radio-input",
+        ref
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "xd-radio-label", htmlFor: radioId, children: label }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xd-radio-error", id: errorId, children: error })
+  ] });
+}
+var Radio = react.forwardRef(RadioInner);
+
+exports.Radio = Radio;
+exports.RadioGroupProvider = RadioGroupProvider;
+exports.useRadioGroupContext = useRadioGroupContext;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RadioGroupContext.tsx","../src/components/Radio.tsx"],"names":["createContext","useContext","useId","jsxs","jsx","UnstyledRadio","forwardRef"],"mappings":";;;;;;;AAQA,IAAM,iBAAA,GAAoBA,oBAA6C,IAAI,CAAA;AAEpE,IAAM,qBAAqB,iBAAA,CAAkB;AAE7C,SAAS,oBAAA,GAAsD;AACpE,EAAA,OAAOC,iBAAW,iBAAiB,CAAA;AACrC;ACDA,SAAS,UAAA,CACP;AAAA,EACE,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,QAAQ,oBAAA,EAAqB;AACnC,EAAA,MAAM,cAAcC,WAAA,EAAM;AAC1B,EAAA,MAAM,UAAU,EAAA,IAAM,WAAA;AACtB,EAAA,MAAM,OAAA,GAAU,GAAG,OAAO,CAAA,MAAA,CAAA;AAO1B,EAAA,MAAM,eAAA,GACJ,OAAA,KAAY,KAAA,GAAQ,KAAA,CAAM,UAAU,KAAA,GAAQ,MAAA,CAAA;AAC9C,EAAA,MAAM,YAAA,GAAe,QAAQ,KAAA,EAAO,IAAA;AAEpC,EAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAA2C;AAC/D,IAAA,QAAA,GAAW,CAAC,CAAA;AACZ,IAAA,IAAI,KAAA,IAAS,UAAU,MAAA,EAAW;AAChC,MAAA,KAAA,CAAM,QAAA,CAAS,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,IAC9B;AAAA,EACF,CAAA;AAEA,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,2BAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,OAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,IAAA,EAAM,YAAA;AAAA,QACN,KAAA;AAAA,QACA,OAAA,EAAS,eAAA;AAAA,QACT,QAAA,EAAU,YAAA;AAAA,QACV,OAAA,EAAS,CAAC,CAAC,KAAA;AAAA,QACX,QAAA;AAAA,QACA,kBAAA,EAAkB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACpC,SAAA,EAAW,SAAA,GAAY,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,GAAK,gBAAA;AAAA,QACvD;AAAA;AAAA,KACF;AAAA,mCACC,OAAA,EAAA,EAAM,SAAA,EAAU,gBAAA,EAAiB,OAAA,EAAS,SACxC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,yBACCD,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,gBAAA,EAAiB,EAAA,EAAI,SACjC,QAAA,EAAA,KAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,IAAM,KAAA,GAAQE,iBAAyC,UAAU","file":"index.js","sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface RadioGroupContextValue {\n  name: string;\n  value: string | undefined;\n  onChange: (value: string) => void;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\nexport function useRadioGroupContext(): RadioGroupContextValue | null {\n  return useContext(RadioGroupContext);\n}\n","import {\n  UnstyledRadio,\n  type UnstyledRadioProps,\n} from '@asnewyla/unstyled-radio';\nimport { type ForwardedRef, forwardRef, useId } from 'react';\nimport { useRadioGroupContext } from './RadioGroupContext';\nimport './Radio.css';\n\nexport type RadioProps = Omit<UnstyledRadioProps, 'invalid'> & {\n  label: string;\n  error?: string;\n};\n\nfunction RadioInner(\n  {\n    id,\n    label,\n    error,\n    disabled,\n    className,\n    checked,\n    onChange,\n    value,\n    name,\n    ...rest\n  }: RadioProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const group = useRadioGroupContext();\n  const generatedId = useId();\n  const radioId = id ?? generatedId;\n  const errorId = `${radioId}-error`;\n\n  // Own `checked` wins if given (same prop ?? group?.x precedence Button\n  // uses for ButtonGroupContext); otherwise, inside a RadioGroup, checked\n  // is derived from whether this radio's own value matches the group's\n  // selected value — that's the group's whole point: one shared source of\n  // truth instead of several independently-tracked radios.\n  const resolvedChecked =\n    checked ?? (group ? group.value === value : undefined);\n  const resolvedName = name ?? group?.name;\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    if (group && value !== undefined) {\n      group.onChange(String(value));\n    }\n  };\n\n  return (\n    <div className=\"xd-radio\">\n      <UnstyledRadio\n        id={radioId}\n        {...rest}\n        name={resolvedName}\n        value={value}\n        checked={resolvedChecked}\n        onChange={handleChange}\n        invalid={!!error}\n        disabled={disabled}\n        aria-describedby={error ? errorId : undefined}\n        className={className ? `xd-radio-input ${className}` : 'xd-radio-input'}\n        ref={ref}\n      />\n      <label className=\"xd-radio-label\" htmlFor={radioId}>\n        {label}\n      </label>\n      {error && (\n        <div className=\"xd-radio-error\" id={errorId}>\n          {error}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(RadioInner);\n"]}

package/dist/index.mjs

@@ -0,0 +1,60 @@
+import { UnstyledRadio } from '@asnewyla/unstyled-radio';
+import { createContext, forwardRef, useId, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Radio.tsx
+var RadioGroupContext = createContext(null);
+var RadioGroupProvider = RadioGroupContext.Provider;
+function useRadioGroupContext() {
+  return useContext(RadioGroupContext);
+}
+function RadioInner({
+  id,
+  label,
+  error,
+  disabled,
+  className,
+  checked,
+  onChange,
+  value,
+  name,
+  ...rest
+}, ref) {
+  const group = useRadioGroupContext();
+  const generatedId = useId();
+  const radioId = id ?? generatedId;
+  const errorId = `${radioId}-error`;
+  const resolvedChecked = checked ?? (group ? group.value === value : void 0);
+  const resolvedName = name ?? group?.name;
+  const handleChange = (e) => {
+    onChange?.(e);
+    if (group && value !== void 0) {
+      group.onChange(String(value));
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "xd-radio", children: [
+    /* @__PURE__ */ jsx(
+      UnstyledRadio,
+      {
+        id: radioId,
+        ...rest,
+        name: resolvedName,
+        value,
+        checked: resolvedChecked,
+        onChange: handleChange,
+        invalid: !!error,
+        disabled,
+        "aria-describedby": error ? errorId : void 0,
+        className: className ? `xd-radio-input ${className}` : "xd-radio-input",
+        ref
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { className: "xd-radio-label", htmlFor: radioId, children: label }),
+    error && /* @__PURE__ */ jsx("div", { className: "xd-radio-error", id: errorId, children: error })
+  ] });
+}
+var Radio = forwardRef(RadioInner);
+
+export { Radio, RadioGroupProvider, useRadioGroupContext };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RadioGroupContext.tsx","../src/components/Radio.tsx"],"names":[],"mappings":";;;;;AAQA,IAAM,iBAAA,GAAoB,cAA6C,IAAI,CAAA;AAEpE,IAAM,qBAAqB,iBAAA,CAAkB;AAE7C,SAAS,oBAAA,GAAsD;AACpE,EAAA,OAAO,WAAW,iBAAiB,CAAA;AACrC;ACDA,SAAS,UAAA,CACP;AAAA,EACE,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,QAAQ,oBAAA,EAAqB;AACnC,EAAA,MAAM,cAAc,KAAA,EAAM;AAC1B,EAAA,MAAM,UAAU,EAAA,IAAM,WAAA;AACtB,EAAA,MAAM,OAAA,GAAU,GAAG,OAAO,CAAA,MAAA,CAAA;AAO1B,EAAA,MAAM,eAAA,GACJ,OAAA,KAAY,KAAA,GAAQ,KAAA,CAAM,UAAU,KAAA,GAAQ,MAAA,CAAA;AAC9C,EAAA,MAAM,YAAA,GAAe,QAAQ,KAAA,EAAO,IAAA;AAEpC,EAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAA2C;AAC/D,IAAA,QAAA,GAAW,CAAC,CAAA;AACZ,IAAA,IAAI,KAAA,IAAS,UAAU,MAAA,EAAW;AAChC,MAAA,KAAA,CAAM,QAAA,CAAS,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,IAC9B;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,OAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,IAAA,EAAM,YAAA;AAAA,QACN,KAAA;AAAA,QACA,OAAA,EAAS,eAAA;AAAA,QACT,QAAA,EAAU,YAAA;AAAA,QACV,OAAA,EAAS,CAAC,CAAC,KAAA;AAAA,QACX,QAAA;AAAA,QACA,kBAAA,EAAkB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACpC,SAAA,EAAW,SAAA,GAAY,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,GAAK,gBAAA;AAAA,QACvD;AAAA;AAAA,KACF;AAAA,wBACC,OAAA,EAAA,EAAM,SAAA,EAAU,gBAAA,EAAiB,OAAA,EAAS,SACxC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,yBACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,gBAAA,EAAiB,EAAA,EAAI,SACjC,QAAA,EAAA,KAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,IAAM,KAAA,GAAQ,WAAyC,UAAU","file":"index.mjs","sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface RadioGroupContextValue {\n  name: string;\n  value: string | undefined;\n  onChange: (value: string) => void;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\nexport function useRadioGroupContext(): RadioGroupContextValue | null {\n  return useContext(RadioGroupContext);\n}\n","import {\n  UnstyledRadio,\n  type UnstyledRadioProps,\n} from '@asnewyla/unstyled-radio';\nimport { type ForwardedRef, forwardRef, useId } from 'react';\nimport { useRadioGroupContext } from './RadioGroupContext';\nimport './Radio.css';\n\nexport type RadioProps = Omit<UnstyledRadioProps, 'invalid'> & {\n  label: string;\n  error?: string;\n};\n\nfunction RadioInner(\n  {\n    id,\n    label,\n    error,\n    disabled,\n    className,\n    checked,\n    onChange,\n    value,\n    name,\n    ...rest\n  }: RadioProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const group = useRadioGroupContext();\n  const generatedId = useId();\n  const radioId = id ?? generatedId;\n  const errorId = `${radioId}-error`;\n\n  // Own `checked` wins if given (same prop ?? group?.x precedence Button\n  // uses for ButtonGroupContext); otherwise, inside a RadioGroup, checked\n  // is derived from whether this radio's own value matches the group's\n  // selected value — that's the group's whole point: one shared source of\n  // truth instead of several independently-tracked radios.\n  const resolvedChecked =\n    checked ?? (group ? group.value === value : undefined);\n  const resolvedName = name ?? group?.name;\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    if (group && value !== undefined) {\n      group.onChange(String(value));\n    }\n  };\n\n  return (\n    <div className=\"xd-radio\">\n      <UnstyledRadio\n        id={radioId}\n        {...rest}\n        name={resolvedName}\n        value={value}\n        checked={resolvedChecked}\n        onChange={handleChange}\n        invalid={!!error}\n        disabled={disabled}\n        aria-describedby={error ? errorId : undefined}\n        className={className ? `xd-radio-input ${className}` : 'xd-radio-input'}\n        ref={ref}\n      />\n      <label className=\"xd-radio-label\" htmlFor={radioId}>\n        {label}\n      </label>\n      {error && (\n        <div className=\"xd-radio-error\" id={errorId}>\n          {error}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(RadioInner);\n"]}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@asnewyla/radio",
+  "version": "0.2.0",
+  "description": "Styled radio with label, validation error display, and accessibility",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xavierDelaFuente/xd-components.git",
+    "directory": "packages/radio"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "keywords": [
+    "react",
+    "radio",
+    "form",
+    "styled",
+    "accessible"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@asnewyla/unstyled-radio": "0.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "jsdom": "^24.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.0",
+    "vitest": "^2.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "type-check": "tsc --noEmit"
+  }
+}