asheeui 0.7.0 → 1.1.0

package/dist/components/pricing-card/pricing-card-config.d.ts

@@ -0,0 +1,35 @@
+import { Size } from '../../shared';
+/**
+ * Surface treatment of a pricing card.
+ * These map to the framework's card variants, so a pricing card looks like the
+ * rest of the surface system.
+ */
+export type PricingCardVariant = "bordered" | "elevated";
+/**
+ * Theme configuration options for the PricingCard component.
+ *
+ * Set under `components.pricingcard` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface PricingCardConfig {
+    /** Surface treatment. @default "bordered" */
+    variant?: PricingCardVariant;
+    /** Density of the card padding. @default "lg" */
+    size?: Size;
+    /** Whether the card is the recommended plan. @default false */
+    highlighted?: boolean;
+}
+/**
+ * Default config values registered for the PricingCard component.
+ */
+export declare const defaultPricingCardConfig: PricingCardConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        pricingcard: PricingCardConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_PRICING_CARD_CONFIG: Required<PricingCardConfig>;
+//# sourceMappingURL=pricing-card-config.d.ts.map

package/dist/components/pricing-card/pricing-card-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing-card-config.d.ts","sourceRoot":"","sources":["../../../src/components/pricing-card/pricing-card-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B,iDAAiD;IACjD,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBAItC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF;AAID;;GAEG;AACH,eAAO,MAAM,4BAA4B,EAAE,QAAQ,CAAC,iBAAiB,CAIpE,CAAC"}

package/dist/components/pricing-card/pricing-card-config.js

@@ -0,0 +1,16 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/pricing-card/pricing-card-config.ts
+var t = {
+	variant: "bordered",
+	size: "lg",
+	highlighted: !1
+};
+e("pricingcard", t);
+var n = {
+	variant: "bordered",
+	size: "lg",
+	highlighted: !1
+};
+//#endregion
+export { n as FALLBACK_PRICING_CARD_CONFIG, t as defaultPricingCardConfig };

package/dist/components/pricing-card/pricing-card-styles.d.ts

@@ -0,0 +1,21 @@
+/**
+ * PricingCard component styles for AsheeUI.
+ * This file provides the static class mappings for the PricingCard pattern.
+ */
+/** The price line, where the amount and the period sit on one baseline. */
+export declare const PRICING_PRICE_CLASS = "flex items-baseline gap-1";
+/** The list of included and excluded features. */
+export declare const PRICING_FEATURES_CLASS = "flex flex-col gap-2";
+/** One feature line. */
+export declare const PRICING_FEATURE_CLASS = "flex items-start gap-2";
+/** The marker of an included feature. */
+export declare const PRICING_FEATURE_INCLUDED_CLASS = "mt-1 size-4 shrink-0 text-success";
+/** The marker of an excluded feature. */
+export declare const PRICING_FEATURE_EXCLUDED_CLASS = "mt-1 size-4 shrink-0 text-foreground/40";
+/** The badge above the plan name. */
+export declare const PRICING_BADGE_CLASS = "inline-flex w-fit items-center rounded-sm bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary";
+/** The ring that marks the recommended plan. */
+export declare const PRICING_HIGHLIGHTED_CLASS = "border-primary ring-1 ring-primary";
+/** The body arrangement of the card. */
+export declare const PRICING_BODY_CLASS = "flex flex-col gap-6";
+//# sourceMappingURL=pricing-card-styles.d.ts.map

package/dist/components/pricing-card/pricing-card-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing-card-styles.d.ts","sourceRoot":"","sources":["../../../src/components/pricing-card/pricing-card-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,2EAA2E;AAC3E,eAAO,MAAM,mBAAmB,8BAA8B,CAAC;AAE/D,kDAAkD;AAClD,eAAO,MAAM,sBAAsB,wBAAwB,CAAC;AAE5D,wBAAwB;AACxB,eAAO,MAAM,qBAAqB,2BAA2B,CAAC;AAE9D,yCAAyC;AACzC,eAAO,MAAM,8BAA8B,sCACN,CAAC;AAEtC,yCAAyC;AACzC,eAAO,MAAM,8BAA8B,4CACA,CAAC;AAE5C,qCAAqC;AACrC,eAAO,MAAM,mBAAmB,yGACwE,CAAC;AAEzG,gDAAgD;AAChD,eAAO,MAAM,yBAAyB,uCAAuC,CAAC;AAE9E,wCAAwC;AACxC,eAAO,MAAM,kBAAkB,wBAAwB,CAAC"}

package/dist/components/pricing-card/pricing-card-styles.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/pricing-card/pricing-card-styles.ts
+var e = "flex items-baseline gap-1", t = "flex flex-col gap-2", n = "flex items-start gap-2", r = "mt-1 size-4 shrink-0 text-success", i = "mt-1 size-4 shrink-0 text-foreground/40", a = "inline-flex w-fit items-center rounded-sm bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", o = "border-primary ring-1 ring-primary", s = "flex flex-col gap-6";
+//#endregion
+export { a as PRICING_BADGE_CLASS, s as PRICING_BODY_CLASS, t as PRICING_FEATURES_CLASS, n as PRICING_FEATURE_CLASS, i as PRICING_FEATURE_EXCLUDED_CLASS, r as PRICING_FEATURE_INCLUDED_CLASS, o as PRICING_HIGHLIGHTED_CLASS, e as PRICING_PRICE_CLASS };

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,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAEf,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"}