asheeui 0.7.0 → 1.0.0

package/dist/components/radio/Radio.d.ts

@@ -1,144 +1,90 @@
-import { ReactNode } from 'react';
-import { Color } from '../../shared';
-import { FieldSizeKey, FieldStatus, LabelAlign } from '../field/field-config';
-import { RadioVariant } from './radio-config';
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+import { RadioConfig } from './radio-config';
+type BaseRadioProps = RadioConfig & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "children" | "color">;
 /**
- * Configuration options for the RadioGroup component.
+ * Configuration options for the Radio component.
  */
-export interface RadioGroupProps {
+export interface RadioProps extends BaseRadioProps {
     /**
-     * Radio components to render inside the group.
+     * The value of the radio button.
+     * Used to identify which radio is selected in a group.
      */
-    children: ReactNode;
+    value: string;
     /**
-     * Name attribute for all radio inputs in the group.
-     * Auto-generated if not provided.
+     * Label text for the radio.
+     * Displayed next to the radio button.
      */
-    name?: string;
-    /**
-     * Controlled selected value.
-     */
-    value?: string;
-    /**
-     * Uncontrolled initial selected value.
-     */
-    defaultValue?: string;
-    /**
-     * Callback fired when the selection changes.
-     * Receives the new selected value.
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Size scale for all radios in the group.
-     * @default "md"
-     */
-    size?: FieldSizeKey;
-    /**
-     * Theme accent color for all radios in the group.
-     * @default "primary"
-     */
-    color?: Color;
-    /**
-     * Visual style variant for all radios in the group.
-     * @default "default"
-     */
-    variant?: RadioVariant;
-    /**
-     * Layout orientation of the radio group.
-     * - `horizontal`: Radios are laid out in a row.
-     * - `vertical`: Radios are laid out in a column.
-     * @default "vertical"
-     */
-    orientation?: "horizontal" | "vertical";
-    /**
-     * Validation status for the group.
-     * @default "default"
-     */
-    status?: FieldStatus;
-    /**
-     * Label text for the group.
-     */
-    label?: string;
-    /**
-     * Alignment of the label relative to the group.
-     * @default "left"
-     */
-    labelAlign?: LabelAlign;
+    label?: ReactNode;
     /**
      * Description text shown below the label.
+     * Provides additional context for the option.
      */
-    description?: string;
-    /**
-     * Validation message shown below the group.
-     */
-    message?: string;
+    description?: ReactNode;
     /**
-     * Whether the field is required.
-     * @default false
+     * Whether the radio is checked.
+     * For controlled usage.
      */
-    required?: boolean;
+    checked?: boolean;
     /**
-     * Whether all radios in the group are disabled.
+     * Whether the radio is initially checked.
+     * For uncontrolled usage.
      * @default false
      */
-    disabled?: boolean;
+    defaultChecked?: boolean;
     /**
-     * Extra CSS classes for the group container.
+     * Callback fired when the radio state changes.
+     * Receives the checked state, value, and the change event.
      */
-    className?: string;
+    onChange?: (checked: boolean, value: string, event: ChangeEvent<HTMLInputElement>) => void;
 }
 /**
- * A group of radio buttons that manages shared state and layout.
+ * A single radio button with label and description.
+ *
+ * Radio renders a circular radio button with an optional label and
+ * description. It supports controlled and uncontrolled usage, validation
+ * states, and the standard AsheeUI cascade for visual tokens. When used
+ * within a RadioGroup, it inherits shared props from the group context.
  *
- * RadioGroup wraps multiple Radio components and provides a consistent
- * context for shared props like name, value, size, color, and disabled
- * state. It also handles labeling, validation, and layout through the
- * FieldShell component.
+ * The component automatically handles accessibility attributes including
+ * proper role, aria-checked, and focus management.
  *
- * @param props - RadioGroup configuration options.
- * @param props.children - Radio components to render.
- * @param props.name - Name attribute for all radios.
- * @param props.value - Controlled selected value.
- * @param props.defaultValue - Uncontrolled initial selected value.
- * @param props.onChange - Callback fired when selection changes.
- * @param props.size - Size scale for all radios. Defaults to "md".
+ * @param props - Radio configuration options.
+ * @param props.value - The value of the radio button.
+ * @param props.label - Label text for the radio.
+ * @param props.description - Description text shown below the label.
+ * @param props.checked - Whether the radio is checked (controlled).
+ * @param props.defaultChecked - Whether the radio is initially checked (uncontrolled).
+ * @param props.onChange - Callback fired when the radio state changes.
+ * @param props.size - Size scale. Defaults to "md".
  * @param props.color - Theme accent color. Defaults to "primary".
  * @param props.variant - Visual style variant. Defaults to "default".
- * @param props.orientation - Layout orientation. Defaults to "vertical".
- * @param props.status - Validation status. Defaults to "default".
- * @param props.label - Label text for the group.
- * @param props.labelAlign - Alignment of the label. Defaults to "left".
- * @param props.description - Description text.
- * @param props.message - Validation message.
- * @param props.required - Whether the field is required.
- * @param props.disabled - Whether all radios are disabled.
- * @param props.className - Extra CSS classes.
+ * @param props.radius - Corner rounding. Defaults to "full".
+ * @param props.status - Validation status.
+ * @param props.disabled - Whether the radio is disabled.
  *
  * @example
  * ```tsx
- * import { Radio, RadioGroup } from "asheeui";
+ * import { Radio } from "asheeui";
  * import { useState } from "react";
  *
  * export function Example() {
- *   const [value, setValue] = useState("option-1");
+ *   const [checked, setChecked] = useState(false);
  *
  *   return (
- *     <RadioGroup
- *       label="Choose an option"
- *       value={value}
- *       onChange={setValue}
- *       orientation="horizontal"
- *     >
- *       <Radio value="option-1" label="Option 1" />
- *       <Radio value="option-2" label="Option 2" />
- *       <Radio value="option-3" label="Option 3" disabled />
- *     </RadioGroup>
+ *     <Radio
+ *       value="option-1"
+ *       label="Option 1"
+ *       description="This is the first option"
+ *       checked={checked}
+ *       onChange={(checked) => setChecked(checked)}
+ *     />
  *   );
  * }
  * ```
  *
- * @see Radio - The individual radio component.
+ * @see RadioGroup - The parent component that manages radio groups.
  * @see RadioConfig - The configuration type for component defaults.
  */
-export declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};
 //# sourceMappingURL=Radio.d.ts.map

package/dist/components/radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAc,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,UAAU,EACX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAC;AAKxB;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,UAAU,4GAyEtB,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAWf,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,gBAAgB,CAAC;AAaxB,KAAK,cAAc,GAAG,WAAW,GAC/B,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAC3C,CAAC;AAEJ;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CACT,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KACjC,IAAI,CAAC;CACX;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,KAAK,yGAoNjB,CAAC"}

package/dist/components/radio/Radio.js

@@ -1,44 +1,58 @@
 "use client";
 "use client";
 import { cn as e } from "../../utils/cn.js";
-import { useAsheeConfig as t } from "../../libs/context.js";
-import { resolveCascade as n } from "../../utils/resolve-token.js";
-import { FieldShell as r } from "../field/FieldShell.js";
-import { FALLBACK_RADIO_CONFIG as i } from "./radio-config.js";
-import { RadioContext as a } from "./radio-context.js";
-import { forwardRef as o, useId as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
+import { resolveCascade as r, resolveClassKey as i, resolveRadiusKey as ee } from "../../utils/resolve-token.js";
+import { FALLBACK_RADIO_CONFIG as a } from "./radio-config.js";
+import { useRadioGroupContext as o } from "./radio-context.js";
+import { RADIO_COLOR_CLASS as s, RADIO_FONT_SIZE_CLASS as c, RADIO_GAP_CLASS as l, RADIO_INNER_SIZE_CLASS as te, RADIO_OUTER_SIZE_CLASS as ne, RADIO_STATUS_BORDER_CLASS as u } from "./radio-styles.js";
+import { forwardRef as d, useCallback as f, useId as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/radio/Radio.tsx
-var l = o(({ children: o, name: l, value: u, onChange: d, size: f, color: p, variant: m, orientation: h = "vertical", status: g, label: _, labelAlign: v, description: y, message: b, required: x, disabled: S, className: C }, w) => {
-	let T = t().components?.radio, E = s(), D = l ?? E, O = g ?? i.status, k = n(v, T?.labelAlign, void 0, i.labelAlign);
-	return /* @__PURE__ */ c(r, {
-		id: E,
-		label: _,
-		labelAlign: k,
-		description: y,
-		message: b,
-		status: O,
-		required: x,
-		children: /* @__PURE__ */ c(a.Provider, {
-			value: {
-				name: D,
-				value: u,
-				onChange: d,
-				size: f,
-				color: p,
-				variant: m,
-				disabled: S,
-				status: O
-			},
-			children: /* @__PURE__ */ c("div", {
-				ref: w,
-				role: "radiogroup",
-				className: e("flex", h === "vertical" ? "flex-col gap-2" : "flex-row flex-wrap gap-4", C),
-				children: o
+var _ = d(({ value: d, size: _, color: v, radius: y, variant: b, status: re, label: x, description: S, id: C, name: w, className: T, style: E, disabled: D, checked: O, defaultChecked: k = !1, onChange: A, ...j }, M) => {
+	let N = n(), P = o(), F = N.components?.radio, I = p(), L = C ?? I, R = w ?? P?.name, z = D ?? P?.disabled ?? !1, [B, V] = m(k), H = P ? P.value === d : O ?? B, U = r(_ ?? P?.size, F?.size, void 0, a.size), W = r(b ?? P?.variant, F?.variant, void 0, a.variant), G = r(v ?? P?.color, F?.color, N.defaultColor, a.color), K = re ?? P?.status ?? a.status, q = W === "card", J = ee(y, F?.radius, void 0, a.radius), Y = q && J === "full" ? "xl" : J, X = i(U, ne, a.size), ie = i(U, te, a.size), ae = i(U, c, a.size), oe = i(U, l, a.size), Z = i(J, t, a.radius), se = i(Y, t, "xl"), Q = s[G] ?? s.primary, $ = u[K] ?? u.default, ce = f((e) => {
+		z || (P ? P.onChange?.(d) : O === void 0 && V(!0), A?.(e.target.checked, d, e));
+	}, [
+		O,
+		P,
+		z,
+		A,
+		d
+	]);
+	return /* @__PURE__ */ g("label", {
+		className: e("relative inline-flex items-start select-none cursor-pointer transition-all duration-150 shrink-0", oe, q ? e("p-3 border bg-background", se) : "", q && (H ? `${Q.border} ${Q.cardBg}` : $), z && "opacity-50 pointer-events-none cursor-not-allowed", T),
+		style: E,
+		children: [
+			/* @__PURE__ */ h("input", {
+				ref: M,
+				id: L,
+				type: "radio",
+				name: R,
+				value: d,
+				checked: H,
+				disabled: z,
+				onChange: ce,
+				className: "sr-only peer",
+				...j
+			}),
+			/* @__PURE__ */ h("div", {
+				className: e("shrink-0 flex items-center justify-center border-2 transition-all duration-150 mt-0.5", "peer-focus-visible:ring-2 peer-focus-visible:ring-primary peer-focus-visible:ring-offset-2", X, Z, H ? Q.border : $),
+				children: /* @__PURE__ */ h("span", { className: e(ie, Z, Q.bg, "transition-all duration-200 ease-in-out transform-gpu", H ? "scale-100 opacity-100" : "scale-0 opacity-0") })
+			}),
+			(x || S) && /* @__PURE__ */ g("div", {
+				className: "flex flex-col min-w-0",
+				children: [x && /* @__PURE__ */ h("span", {
+					className: e("font-medium text-foreground leading-snug", ae),
+					children: x
+				}), S && /* @__PURE__ */ h("span", {
+					className: "text-xs sm:text-sm text-foreground/70 leading-snug mt-0.5",
+					children: S
+				})]
 			})
-		})
+		]
 	});
 });
-l.displayName = "RadioGroup";
+_.displayName = "Radio";
 //#endregion
-export { l as RadioGroup };
+export { _ as Radio };

package/dist/components/radio/RadioGroup.d.ts

@@ -1,90 +1,144 @@
-import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
-import { RadioConfig } from './radio-config';
-type BaseRadioProps = RadioConfig & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "children" | "color">;
+import { ReactNode } from 'react';
+import { Color } from '../../shared';
+import { FieldSizeKey, FieldStatus, LabelAlign } from '../field/field-config';
+import { RadioVariant } from './radio-config';
 /**
- * Configuration options for the Radio component.
+ * Configuration options for the RadioGroup component.
  */
-export interface RadioProps extends BaseRadioProps {
+export interface RadioGroupProps {
     /**
-     * The value of the radio button.
-     * Used to identify which radio is selected in a group.
+     * Radio components to render inside the group.
      */
-    value: string;
+    children: ReactNode;
     /**
-     * Label text for the radio.
-     * Displayed next to the radio button.
+     * Name attribute for all radio inputs in the group.
+     * Auto-generated if not provided.
      */
-    label?: ReactNode;
+    name?: string;
+    /**
+     * Controlled selected value.
+     */
+    value?: string;
+    /**
+     * Uncontrolled initial selected value.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the selection changes.
+     * Receives the new selected value.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Size scale for all radios in the group.
+     * @default "md"
+     */
+    size?: FieldSizeKey;
+    /**
+     * Theme accent color for all radios in the group.
+     * @default "primary"
+     */
+    color?: Color;
+    /**
+     * Visual style variant for all radios in the group.
+     * @default "default"
+     */
+    variant?: RadioVariant;
+    /**
+     * Layout orientation of the radio group.
+     * - `horizontal`: Radios are laid out in a row.
+     * - `vertical`: Radios are laid out in a column.
+     * @default "vertical"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Validation status for the group.
+     * @default "default"
+     */
+    status?: FieldStatus;
+    /**
+     * Label text for the group.
+     */
+    label?: string;
+    /**
+     * Alignment of the label relative to the group.
+     * @default "left"
+     */
+    labelAlign?: LabelAlign;
     /**
      * Description text shown below the label.
-     * Provides additional context for the option.
      */
-    description?: ReactNode;
+    description?: string;
+    /**
+     * Validation message shown below the group.
+     */
+    message?: string;
     /**
-     * Whether the radio is checked.
-     * For controlled usage.
+     * Whether the field is required.
+     * @default false
      */
-    checked?: boolean;
+    required?: boolean;
     /**
-     * Whether the radio is initially checked.
-     * For uncontrolled usage.
+     * Whether all radios in the group are disabled.
      * @default false
      */
-    defaultChecked?: boolean;
+    disabled?: boolean;
     /**
-     * Callback fired when the radio state changes.
-     * Receives the checked state, value, and the change event.
+     * Extra CSS classes for the group container.
      */
-    onChange?: (checked: boolean, value: string, event: ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
 }
 /**
- * A single radio button with label and description.
- *
- * Radio renders a circular radio button with an optional label and
- * description. It supports controlled and uncontrolled usage, validation
- * states, and the standard AsheeUI cascade for visual tokens. When used
- * within a RadioGroup, it inherits shared props from the group context.
+ * A group of radio buttons that manages shared state and layout.
  *
- * The component automatically handles accessibility attributes including
- * proper role, aria-checked, and focus management.
+ * RadioGroup wraps multiple Radio components and provides a consistent
+ * context for shared props like name, value, size, color, and disabled
+ * state. It also handles labeling, validation, and layout through the
+ * FieldShell component.
  *
- * @param props - Radio configuration options.
- * @param props.value - The value of the radio button.
- * @param props.label - Label text for the radio.
- * @param props.description - Description text shown below the label.
- * @param props.checked - Whether the radio is checked (controlled).
- * @param props.defaultChecked - Whether the radio is initially checked (uncontrolled).
- * @param props.onChange - Callback fired when the radio state changes.
- * @param props.size - Size scale. Defaults to "md".
+ * @param props - RadioGroup configuration options.
+ * @param props.children - Radio components to render.
+ * @param props.name - Name attribute for all radios.
+ * @param props.value - Controlled selected value.
+ * @param props.defaultValue - Uncontrolled initial selected value.
+ * @param props.onChange - Callback fired when selection changes.
+ * @param props.size - Size scale for all radios. Defaults to "md".
  * @param props.color - Theme accent color. Defaults to "primary".
  * @param props.variant - Visual style variant. Defaults to "default".
- * @param props.radius - Corner rounding. Defaults to "full".
- * @param props.status - Validation status.
- * @param props.disabled - Whether the radio is disabled.
+ * @param props.orientation - Layout orientation. Defaults to "vertical".
+ * @param props.status - Validation status. Defaults to "default".
+ * @param props.label - Label text for the group.
+ * @param props.labelAlign - Alignment of the label. Defaults to "left".
+ * @param props.description - Description text.
+ * @param props.message - Validation message.
+ * @param props.required - Whether the field is required.
+ * @param props.disabled - Whether all radios are disabled.
+ * @param props.className - Extra CSS classes.
  *
  * @example
  * ```tsx
- * import { Radio } from "asheeui";
+ * import { Radio, RadioGroup } from "asheeui";
  * import { useState } from "react";
  *
  * export function Example() {
- *   const [checked, setChecked] = useState(false);
+ *   const [value, setValue] = useState("option-1");
  *
  *   return (
- *     <Radio
- *       value="option-1"
- *       label="Option 1"
- *       description="This is the first option"
- *       checked={checked}
- *       onChange={(checked) => setChecked(checked)}
- *     />
+ *     <RadioGroup
+ *       label="Choose an option"
+ *       value={value}
+ *       onChange={setValue}
+ *       orientation="horizontal"
+ *     >
+ *       <Radio value="option-1" label="Option 1" />
+ *       <Radio value="option-2" label="Option 2" />
+ *       <Radio value="option-3" label="Option 3" disabled />
+ *     </RadioGroup>
  *   );
  * }
  * ```
  *
- * @see RadioGroup - The parent component that manages radio groups.
+ * @see Radio - The individual radio component.
  * @see RadioConfig - The configuration type for component defaults.
  */
-export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;
-export {};
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/radio/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAWf,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,gBAAgB,CAAC;AAaxB,KAAK,cAAc,GAAG,WAAW,GAC/B,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAC3C,CAAC;AAEJ;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CACT,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KACjC,IAAI,CAAC;CACX;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,KAAK,yGAoNjB,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAc,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,UAAU,EACX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAC;AAKxB;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,UAAU,4GAuGtB,CAAC"}

package/dist/components/radio/RadioGroup.js

@@ -2,57 +2,51 @@
 "use client";
 import { cn as e } from "../../utils/cn.js";
 import { useAsheeConfig as t } from "../../libs/context.js";
-import { RADIUS_CLASS as n } from "../../shared/radius.js";
-import { resolveCascade as r, resolveClassKey as i, resolveRadiusKey as a } from "../../utils/resolve-token.js";
-import { FALLBACK_RADIO_CONFIG as o } from "./radio-config.js";
-import { useRadioGroupContext as ee } from "./radio-context.js";
-import { RADIO_COLOR_CLASS as s, RADIO_FONT_SIZE_CLASS as c, RADIO_GAP_CLASS as te, RADIO_INNER_SIZE_CLASS as l, RADIO_OUTER_SIZE_CLASS as ne, RADIO_STATUS_BORDER_CLASS as u } from "./radio-styles.js";
-import { forwardRef as d, useCallback as f, useId as p, useState as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { resolveCascade as n } from "../../utils/resolve-token.js";
+import { FieldShell as r } from "../field/FieldShell.js";
+import { FALLBACK_RADIO_CONFIG as i } from "./radio-config.js";
+import { RadioContext as a } from "./radio-context.js";
+import { forwardRef as o, useCallback as s, useId as c, useState as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
 //#region src/components/radio/RadioGroup.tsx
-var _ = d(({ value: d, size: _, color: v, radius: y, variant: b, status: x, label: S, description: C, id: re, name: w, className: T, style: E, disabled: D, checked: O, defaultChecked: k = !1, onChange: A, ...j }, M) => {
-	let N = t(), P = ee(), F = N.components?.radio, I = p(), L = re ?? I, R = w ?? P?.name, z = D ?? P?.disabled ?? !1, [B, V] = m(k), H = P ? P.value === d : O ?? B, U = r(_ ?? P?.size, F?.size, void 0, o.size), W = r(b ?? P?.variant, F?.variant, void 0, o.variant), G = r(v ?? P?.color, F?.color, N.defaultColor, o.color), K = x ?? P?.status ?? o.status, q = W === "card", J = a(y, F?.radius, void 0, o.radius), Y = q && J === "full" ? "xl" : J, X = i(U, ne, o.size), ie = i(U, l, o.size), ae = i(U, c, o.size), oe = i(U, te, o.size), Z = i(J, n, o.radius), se = i(Y, n, "xl"), Q = s[G] ?? s.primary, $ = u[K] ?? u.default, ce = f((e) => {
-		z || (P ? P.onChange?.(d) : O === void 0 && V(!0), A?.(e.target.checked, d, e));
-	}, [
-		O,
-		P,
-		z,
-		A,
-		d
-	]);
-	return /* @__PURE__ */ g("label", {
-		className: e("relative inline-flex items-start select-none cursor-pointer transition-all duration-150 shrink-0", oe, q ? e("p-3 border bg-background", se) : "", q && (H ? `${Q.border} ${Q.cardBg}` : $), z && "opacity-50 pointer-events-none cursor-not-allowed", T),
-		style: E,
-		children: [
-			/* @__PURE__ */ h("input", {
-				ref: M,
-				id: L,
-				type: "radio",
-				name: R,
-				value: d,
-				checked: H,
-				disabled: z,
-				onChange: ce,
-				className: "sr-only peer",
-				...j
-			}),
-			/* @__PURE__ */ h("div", {
-				className: e("shrink-0 flex items-center justify-center border-2 transition-all duration-150 mt-0.5", "peer-focus-visible:ring-2 peer-focus-visible:ring-primary peer-focus-visible:ring-offset-2", X, Z, H ? Q.border : $),
-				children: /* @__PURE__ */ h("span", { className: e(ie, Z, Q.bg, "transition-all duration-200 ease-in-out transform-gpu", H ? "scale-100 opacity-100" : "scale-0 opacity-0") })
-			}),
-			(S || C) && /* @__PURE__ */ g("div", {
-				className: "flex flex-col min-w-0",
-				children: [S && /* @__PURE__ */ h("span", {
-					className: e("font-medium text-foreground leading-snug", ae),
-					children: S
-				}), C && /* @__PURE__ */ h("span", {
-					className: "text-xs sm:text-sm text-foreground/70 leading-snug mt-0.5",
-					children: C
-				})]
+var d = o(({ children: o, name: d, value: f, defaultValue: p, onChange: m, size: h, color: g, variant: _, orientation: v = "vertical", status: y, label: b, labelAlign: x, description: S, message: C, required: w, disabled: T, className: E }, D) => {
+	let O = t().components?.radio, k = c(), A = d ?? k, [j, M] = l(p), N = f !== void 0, P = N ? f : j, F = s((e) => {
+		N || M(e), m?.(e);
+	}, [N, m]), I = b ? `${k}-label` : void 0, L = S ? `${k}-description` : void 0, R = C ? `${k}-message` : void 0, z = [L, R].filter(Boolean).join(" ") || void 0, B = y ?? i.status, V = n(x, O?.labelAlign, void 0, i.labelAlign);
+	return /* @__PURE__ */ u(r, {
+		id: k,
+		htmlFor: null,
+		labelId: I,
+		label: b,
+		labelAlign: V,
+		description: S,
+		descriptionId: L,
+		message: C,
+		messageId: R,
+		status: B,
+		required: w,
+		children: /* @__PURE__ */ u(a.Provider, {
+			value: {
+				name: A,
+				value: P,
+				onChange: F,
+				size: h,
+				color: g,
+				variant: _,
+				disabled: T,
+				status: B
+			},
+			children: /* @__PURE__ */ u("div", {
+				ref: D,
+				role: "radiogroup",
+				"aria-labelledby": I,
+				"aria-describedby": z,
+				className: e("flex", v === "vertical" ? "flex-col gap-2" : "flex-row flex-wrap gap-4", E),
+				children: o
 			})
-		]
+		})
 	});
 });
-_.displayName = "Radio";
+d.displayName = "RadioGroup";
 //#endregion
-export { _ as Radio };
+export { d as RadioGroup };

package/dist/components/radio/index.d.ts

@@ -1,5 +1,4 @@
 export * from './Radio';
 export * from './RadioGroup';
 export * from './radio-config';
-export * from './radio-context';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/radio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}