@asnewyla/radio 0.2.0 → 0.2.2

package/dist/index.css

@@ -39,6 +39,8 @@
 }
 .xd-radio-label {
   font-size: var(--xd-font-size-md, 0.875rem);
+  letter-spacing: var(--xd-letter-spacing-label, 0);
+  text-transform: var(--xd-text-transform-label, none);
   cursor: pointer;
 }
 .xd-radio-input[data-invalid=true] {

package/dist/index.css.map

@@ -1 +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":[]}
+{"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  letter-spacing: var(--xd-letter-spacing-label, 0);\n  text-transform: var(--xd-text-transform-label, none);\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,kBAAgB,IAAI,yBAAyB,EAAE;AAC/C,kBAAgB,IAAI,yBAAyB,EAAE;AAC/C,UAAQ;AACV;AAIA,CA9CC,cA8Cc,CAAC;AACd,gBAAc,IAAI,sBAAsB,EAAE;AAC5C;AAEA,CAlDC,cAkDc,CAAC,kBAAoB;AAClC,iBAAe,IAAI,sBAAsB,EAAE;AAC7C;AAEA,CAAC;AACC,cAAY;AACZ,aAAW,IAAI,iBAAiB,EAAE;AAClC,SAAO,IAAI,sBAAsB,EAAE;AACrC;AAIA,CA9DC,cA8Dc;AACb,WAAS,IAAI,qBAAqB,EAAE;AACpC,UAAQ;AACV;AAEA,CAnEC,cAmEc,UAAU,EAAE,CA9B1B;AA+BC,WAAS,IAAI,qBAAqB,EAAE;AACpC,UAAQ;AACV;","names":[]}

package/dist/index.js

@@ -1,15 +1,46 @@
-'use strict';
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var unstyledRadio = require('@asnewyla/unstyled-radio');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Radio: () => Radio,
+  RadioGroupProvider: () => RadioGroupProvider,
+  useRadioGroupContext: () => useRadioGroupContext
+});
+module.exports = __toCommonJS(index_exports);
 
 // src/components/Radio.tsx
-var RadioGroupContext = react.createContext(null);
+var import_unstyled_radio = require("@asnewyla/unstyled-radio");
+var import_react2 = require("react");
+
+// src/components/RadioGroupContext.tsx
+var import_react = require("react");
+var RadioGroupContext = (0, import_react.createContext)(null);
 var RadioGroupProvider = RadioGroupContext.Provider;
 function useRadioGroupContext() {
-  return react.useContext(RadioGroupContext);
+  return (0, import_react.useContext)(RadioGroupContext);
 }
+
+// src/components/Radio.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 function RadioInner({
   id,
   label,
@@ -23,7 +54,7 @@ function RadioInner({
   ...rest
 }, ref) {
   const group = useRadioGroupContext();
-  const generatedId = react.useId();
+  const generatedId = (0, import_react2.useId)();
   const radioId = id ?? generatedId;
   const errorId = `${radioId}-error`;
   const resolvedChecked = checked ?? (group ? group.value === value : void 0);
@@ -34,9 +65,9 @@ function RadioInner({
       group.onChange(String(value));
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "xd-radio", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      unstyledRadio.UnstyledRadio,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "xd-radio", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_unstyled_radio.UnstyledRadio,
       {
         id: radioId,
         ...rest,
@@ -51,14 +82,15 @@ function RadioInner({
         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 })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "xd-radio-label", htmlFor: radioId, children: label }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.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
+var Radio = (0, import_react2.forwardRef)(RadioInner);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Radio,
+  RadioGroupProvider,
+  useRadioGroupContext
+});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/index.ts","../src/components/Radio.tsx","../src/components/RadioGroupContext.tsx"],"sourcesContent":["export type { RadioGroupContextValue } from './components';\nexport {\n  Radio,\n  RadioGroupProvider,\n  type RadioProps,\n  useRadioGroupContext,\n} from './components';\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","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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,4BAGO;AACP,IAAAA,gBAAqD;;;ACJrD,mBAA0C;AAQ1C,IAAM,wBAAoB,4BAA6C,IAAI;AAEpE,IAAM,qBAAqB,kBAAkB;AAE7C,SAAS,uBAAsD;AACpE,aAAO,yBAAW,iBAAiB;AACrC;;;ADoCI;AArCJ,SAAS,WACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,QAAQ,qBAAqB;AACnC,QAAM,kBAAc,qBAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,GAAG,OAAO;AAO1B,QAAM,kBACJ,YAAY,QAAQ,MAAM,UAAU,QAAQ;AAC9C,QAAM,eAAe,QAAQ,OAAO;AAEpC,QAAM,eAAe,CAAC,MAA2C;AAC/D,eAAW,CAAC;AACZ,QAAI,SAAS,UAAU,QAAW;AAChC,YAAM,SAAS,OAAO,KAAK,CAAC;AAAA,IAC9B;AAAA,EACF;AAEA,SACE,6CAAC,SAAI,WAAU,YACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACH,GAAG;AAAA,QACJ,MAAM;AAAA,QACN;AAAA,QACA,SAAS;AAAA,QACT,UAAU;AAAA,QACV,SAAS,CAAC,CAAC;AAAA,QACX;AAAA,QACA,oBAAkB,QAAQ,UAAU;AAAA,QACpC,WAAW,YAAY,kBAAkB,SAAS,KAAK;AAAA,QACvD;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,WAAM,WAAU,kBAAiB,SAAS,SACxC,iBACH;AAAA,IACC,SACC,4CAAC,SAAI,WAAU,kBAAiB,IAAI,SACjC,iBACH;AAAA,KAEJ;AAEJ;AAEO,IAAM,YAAQ,0BAAyC,UAAU;","names":["import_react"]}

package/dist/index.mjs

@@ -1,13 +1,21 @@
-import { UnstyledRadio } from '@asnewyla/unstyled-radio';
-import { createContext, forwardRef, useId, useContext } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+'use client';
 
 // src/components/Radio.tsx
+import {
+  UnstyledRadio
+} from "@asnewyla/unstyled-radio";
+import { forwardRef, useId } from "react";
+
+// src/components/RadioGroupContext.tsx
+import { createContext, useContext } from "react";
 var RadioGroupContext = createContext(null);
 var RadioGroupProvider = RadioGroupContext.Provider;
 function useRadioGroupContext() {
   return useContext(RadioGroupContext);
 }
+
+// src/components/Radio.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 function RadioInner({
   id,
   label,
@@ -54,7 +62,9 @@ function RadioInner({
   ] });
 }
 var Radio = forwardRef(RadioInner);
-
-export { Radio, RadioGroupProvider, useRadioGroupContext };
-//# sourceMappingURL=index.mjs.map
+export {
+  Radio,
+  RadioGroupProvider,
+  useRadioGroupContext
+};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/components/Radio.tsx","../src/components/RadioGroupContext.tsx"],"sourcesContent":["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","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"],"mappings":";;;AAAA;AAAA,EACE;AAAA,OAEK;AACP,SAA4B,YAAY,aAAa;;;ACJrD,SAAS,eAAe,kBAAkB;AAQ1C,IAAM,oBAAoB,cAA6C,IAAI;AAEpE,IAAM,qBAAqB,kBAAkB;AAE7C,SAAS,uBAAsD;AACpE,SAAO,WAAW,iBAAiB;AACrC;;;ADoCI,SACE,KADF;AArCJ,SAAS,WACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,QAAQ,qBAAqB;AACnC,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,GAAG,OAAO;AAO1B,QAAM,kBACJ,YAAY,QAAQ,MAAM,UAAU,QAAQ;AAC9C,QAAM,eAAe,QAAQ,OAAO;AAEpC,QAAM,eAAe,CAAC,MAA2C;AAC/D,eAAW,CAAC;AACZ,QAAI,SAAS,UAAU,QAAW;AAChC,YAAM,SAAS,OAAO,KAAK,CAAC;AAAA,IAC9B;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAU,YACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACH,GAAG;AAAA,QACJ,MAAM;AAAA,QACN;AAAA,QACA,SAAS;AAAA,QACT,UAAU;AAAA,QACV,SAAS,CAAC,CAAC;AAAA,QACX;AAAA,QACA,oBAAkB,QAAQ,UAAU;AAAA,QACpC,WAAW,YAAY,kBAAkB,SAAS,KAAK;AAAA,QACvD;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,WAAM,WAAU,kBAAiB,SAAS,SACxC,iBACH;AAAA,IACC,SACC,oBAAC,SAAI,WAAU,kBAAiB,IAAI,SACjC,iBACH;AAAA,KAEJ;AAEJ;AAEO,IAAM,QAAQ,WAAyC,UAAU;","names":[]}

package/dist/test-utils.d.mts

@@ -0,0 +1,3 @@
+declare function getRadio(name?: string | RegExp): HTMLElement;
+
+export { getRadio };

package/dist/test-utils.d.ts

@@ -0,0 +1,3 @@
+declare function getRadio(name?: string | RegExp): HTMLElement;
+
+export { getRadio };

package/dist/test-utils.js

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/test-utils.ts
+var test_utils_exports = {};
+__export(test_utils_exports, {
+  getRadio: () => getRadio
+});
+module.exports = __toCommonJS(test_utils_exports);
+var import_react = require("@testing-library/react");
+function getRadio(name) {
+  return import_react.screen.getByRole("radio", name === void 0 ? void 0 : { name });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getRadio
+});
+//# sourceMappingURL=test-utils.js.map

package/dist/test-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/test-utils.ts"],"sourcesContent":["import { screen } from '@testing-library/react';\n\nexport function getRadio(name?: string | RegExp): HTMLElement {\n  return screen.getByRole('radio', name === undefined ? undefined : { name });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuB;AAEhB,SAAS,SAAS,MAAqC;AAC5D,SAAO,oBAAO,UAAU,SAAS,SAAS,SAAY,SAAY,EAAE,KAAK,CAAC;AAC5E;","names":[]}

package/dist/test-utils.mjs

@@ -0,0 +1,11 @@
+'use client';
+
+// src/test-utils.ts
+import { screen } from "@testing-library/react";
+function getRadio(name) {
+  return screen.getByRole("radio", name === void 0 ? void 0 : { name });
+}
+export {
+  getRadio
+};
+//# sourceMappingURL=test-utils.mjs.map

package/dist/test-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/test-utils.ts"],"sourcesContent":["import { screen } from '@testing-library/react';\n\nexport function getRadio(name?: string | RegExp): HTMLElement {\n  return screen.getByRole('radio', name === undefined ? undefined : { name });\n}\n"],"mappings":";;;AAAA,SAAS,cAAc;AAEhB,SAAS,SAAS,MAAqC;AAC5D,SAAO,OAAO,UAAU,SAAS,SAAS,SAAY,SAAY,EAAE,KAAK,CAAC;AAC5E;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asnewyla/radio",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Styled radio with label, validation error display, and accessibility",
   "license": "MIT",
   "repository": {
@@ -20,7 +20,12 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./styles.css": "./dist/index.css"
+    "./styles.css": "./dist/index.css",
+    "./test-utils": {
+      "types": "./dist/test-utils.d.ts",
+      "import": "./dist/test-utils.mjs",
+      "require": "./dist/test-utils.js"
+    }
   },
   "files": [
     "dist"
@@ -37,10 +42,20 @@
   ],
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@testing-library/react": {
+      "optional": true
+    },
+    "@testing-library/user-event": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "@asnewyla/unstyled-radio": "0.2.0"
+    "@asnewyla/unstyled-radio": "0.2.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.0",