@gridui/radio-group 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,94 @@
-# Temporary Holding Version
+# Radio group
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`@gridui/radio-group` owns `RadioGroup`, `Radio`, and `RadioCard` as one
+single-selection family. Import from the package root and load
+`@gridui/radio-group/styles.css` after `@gridui/theme/styles.css`.
+The package does not depend on Controls or application layout.
+
+## Selection and forms
+
+`RadioGroup` retains string `value` / `onValueChange` for controlled state and
+`defaultValue` for local state. `onValueChange(value, details)` receives the native
+`details.event`; `details.cancel()` prevents an uncontrolled selection update.
+Controlled callers own their state and must not commit a canceled change.
+The shared event protocol comes from `@gridui/interaction`.
+
+The group forwards `name`, `form`, `required`, `disabled`, orientation, loop, refs,
+and native accessibility props. `readOnly` permits focus without changing the
+selection. Items also respect disabled fieldsets. Native form reset restores the
+initial uncontrolled value unless the reset event is canceled; controlled callers
+reset their own state. Radix owns radio semantics, hidden form inputs, and keyboard
+navigation. Provide an accessible group name independently of item labels.
+
+```tsx
+import { Radio, RadioGroup } from "@gridui/radio-group";
+
+<RadioGroup name="delivery" defaultValue="standard" aria-label="Delivery service">
+    <label><Radio value="standard" /> Standard delivery</label>
+    <label><Radio value="express" /> Express delivery</label>
+</RadioGroup>
+```
+
+Use comfortable visible label hit areas for compact `Radio` controls. `Radio`
+and `RadioCard` can coexist in one group and share the same selection context.
+
+## Rich choices
+
+`RadioCard` adds a required `label`, optional `description`, optional decorative
+`leading` node, and `variant="outlined" | "plain"` to `RadioProps`, excluding
+`asChild`. The default is `outlined`. Cards remain native radio buttons, not links
+or independently managed toggles. Selection, form ownership, and callbacks stay
+on `RadioGroup`; cards do not own columns or a second selection model.
+
+The label and description have separate generated associations. Explicit
+`aria-label` or `aria-labelledby` overrides the generated name. Supplied
+`aria-describedby` is combined with the description association. `leading` is
+hidden from assistive technology and must be decorative. Keep every slot free of
+nested links, buttons, and inputs; essential information belongs in the label or
+description. All slots accept phrasing content. Native refs point to the radio
+button, and caller click/focus handlers can prevent a selection request.
+
+```tsx
+<RadioGroup defaultValue="standard" aria-label="Delivery service">
+    <RadioCard value="standard" label="Standard delivery"
+        description="Delivered in three to five working days." />
+    <RadioCard value="express" label="Express delivery"
+        description="Delivered on the next working day." />
+</RadioGroup>
+```
+
+## Shared grid boundaries
+
+The outlined variant owns its functional border. The plain variant adds no outer
+border declarations, so `GridItem asChild` retains its structural seams. It does
+not apply `border: 0`, inspect Grid internals, or infer an enclosing layout.
+Both variants retain the themed background so a grid seam surface does not show
+through the card body.
+`RadioGroup asChild` delegates layout to its child without imposing the group's
+default vertical flex arrangement. Grid remains responsible for responsive tracks,
+shared boundaries, and optional cell padding.
+
+```tsx
+import { Grid, GridItem } from "@gridui/grid";
+import { RadioCard, RadioGroup } from "@gridui/radio-group";
+
+<RadioGroup asChild defaultValue="standard" aria-label="Delivery service">
+    <Grid columns={{ base: 1, md: 2 }} frame="cells">
+        <GridItem asChild padding={16}>
+            <RadioCard value="standard" variant="plain" label="Standard"
+                description="Three to five working days." />
+        </GridItem>
+        <GridItem asChild padding={16}>
+            <RadioCard value="express" variant="plain" label="Express"
+                description="Next working day." />
+        </GridItem>
+    </Grid>
+</RadioGroup>
+```
+
+## Migration
+
+Import `Radio`, `RadioGroup`, and their prop types from `@gridui/radio-group`
+instead of `@gridui/controls`, and load the new stylesheet. Controls no longer
+contains or re-exports this family. Existing values, callbacks, refs, forms,
+read-only behavior, and keyboard contracts remain available.

package/dist/context.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @author WMXPY
+ * @package Radio Group
+ * @namespace Root
+ * @description Context
+ */
+export declare const RadioContext: import("react").Context<{
+    readonly readOnly: boolean;
+    readonly change: (value: string, event: Event) => void;
+    readonly navigation: {
+        current: Event | null;
+    };
+} | null>;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Radio Group
+ * @namespace Root
+ * @description Index
+ */
+export type { RadioProps } from "./radio";
+export { Radio } from "./radio";
+export type { RadioCardProps } from "./radio-card";
+export { RadioCard } from "./radio-card";
+export type { RadioGroupProps } from "./radio-group";
+export { RadioGroup } from "./radio-group";

package/dist/index.js

@@ -0,0 +1,252 @@
+// src/style.ts
+import { cva } from "class-variance-authority";
+var radioGroupStyles = cva("flex flex-col gap-gridui-8");
+var radioStyles = cva("inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full border border-control-border bg-background text-foreground align-middle data-[state=checked]:bg-accent-background data-[state=checked]:text-accent-foreground data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-default aria-invalid:border-danger-foreground");
+var radioCardStyles = cva("gridui-radio-card", {
+  variants: {
+    variant: {
+      outlined: "gridui-radio-card-outlined",
+      plain: "gridui-radio-card-plain"
+    }
+  },
+  defaultVariants: { variant: "outlined" }
+});
+
+// src/context.ts
+import { createContext } from "react";
+var RadioContext = createContext(null);
+
+// src/use-radio-item.ts
+import { useContext } from "react";
+var useRadioItem = (props) => {
+  const context = useContext(RadioContext);
+  const onFocus = (event) => {
+    props.onFocus?.(event);
+    const navigation = context?.navigation.current;
+    if (navigation) {
+      context.navigation.current = null;
+      if (!event.defaultPrevented && !event.currentTarget.matches(":disabled")) {
+        context.change(props.value, navigation);
+      }
+      event.preventDefault();
+    }
+  };
+  const onClick = (event) => {
+    props.onClick?.(event);
+    if (!event.defaultPrevented && !event.currentTarget.matches(":disabled")) {
+      context?.change(props.value, event.nativeEvent);
+    }
+    event.preventDefault();
+  };
+  return {
+    readOnly: context?.readOnly ?? false,
+    onFocus,
+    onClick
+  };
+};
+
+// src/radio.tsx
+import { cn } from "@gridui/style-utils";
+import * as Primitive from "@radix-ui/react-radio-group";
+import { jsx } from "react/jsx-runtime";
+var Radio = (props) => {
+  const { className, ...restProps } = props;
+  const events = useRadioItem(props);
+  return /* @__PURE__ */ jsx(
+    Primitive.Item,
+    {
+      ...restProps,
+      className: cn(radioStyles(), className),
+      "data-readonly": events.readOnly ? "" : void 0,
+      onFocus: events.onFocus,
+      onClick: events.onClick,
+      children: /* @__PURE__ */ jsx(
+        Primitive.Indicator,
+        {
+          className: "size-2 rounded-full bg-current"
+        }
+      )
+    }
+  );
+};
+
+// src/radio-card.tsx
+import { cn as cn2 } from "@gridui/style-utils";
+import * as Primitive2 from "@radix-ui/react-radio-group";
+import { useId } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var RadioCard = (props) => {
+  const {
+    label,
+    description,
+    leading,
+    variant = "outlined",
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ...restProps
+  } = props;
+  const labelId = useId();
+  const descriptionId = useId();
+  const described = description !== void 0 && description !== null && description !== false;
+  const descriptionIds = [
+    ariaDescribedBy,
+    described ? descriptionId : void 0
+  ].filter(Boolean).join(" ") || void 0;
+  const events = useRadioItem(props);
+  return /* @__PURE__ */ jsxs(
+    Primitive2.Item,
+    {
+      ...restProps,
+      className: cn2(radioCardStyles({ variant }), className),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy ?? (ariaLabel ? void 0 : labelId),
+      "aria-describedby": descriptionIds,
+      "data-readonly": events.readOnly ? "" : void 0,
+      onFocus: events.onFocus,
+      onClick: events.onClick,
+      children: [
+        leading !== void 0 && leading !== null && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "gridui-radio-card-leading",
+            "aria-hidden": "true",
+            children: leading
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "gridui-radio-card-content",
+            children: [
+              /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  className: "type-ui",
+                  id: labelId,
+                  children: label
+                }
+              ),
+              described && /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  className: "gridui-radio-card-description type-supporting",
+                  id: descriptionId,
+                  children: description
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "gridui-radio-card-indicator",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx2(
+              Primitive2.Indicator,
+              {
+                className: "gridui-radio-card-dot"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/radio-group.tsx
+import { changeDetails } from "@gridui/interaction";
+import { cn as cn3 } from "@gridui/style-utils";
+import * as Primitive3 from "@radix-ui/react-radio-group";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var RadioGroup = (props) => {
+  const { asChild, className, value, defaultValue, onValueChange, readOnly = false, ref, onKeyDownCapture, onPointerDownCapture, ...restProps } = props;
+  const root = useRef(null);
+  const navigation = useRef(null);
+  const [
+    internalValue,
+    setInternalValue
+  ] = useState(defaultValue ?? null);
+  const initial = useRef(defaultValue ?? null);
+  useImperativeHandle(ref, () => {
+    return root.current;
+  });
+  useEffect(() => {
+    const form = restProps.form ? document.getElementById(restProps.form) : root.current?.closest("form");
+    if (!form || value !== void 0) {
+      return;
+    }
+    let mounted = true;
+    const reset = (event) => {
+      setTimeout(() => {
+        if (mounted && !event.defaultPrevented) {
+          setInternalValue(initial.current);
+        }
+      }, 0);
+    };
+    form.addEventListener("reset", reset);
+    return () => {
+      mounted = false;
+      form.removeEventListener("reset", reset);
+    };
+  }, [
+    restProps.form,
+    value
+  ]);
+  const change = (next, event) => {
+    if (readOnly || restProps.disabled) {
+      return;
+    }
+    const details = changeDetails(event);
+    onValueChange?.(next, details);
+    if (!details.isCanceled && value === void 0) {
+      setInternalValue(next);
+    }
+  };
+  return /* @__PURE__ */ jsx3(
+    RadioContext.Provider,
+    {
+      value: {
+        readOnly,
+        change,
+        navigation
+      },
+      children: /* @__PURE__ */ jsx3(
+        Primitive3.Root,
+        {
+          ...restProps,
+          asChild,
+          ref: root,
+          value: value === void 0 ? internalValue : value,
+          onKeyDownCapture: (event) => {
+            onKeyDownCapture?.(event);
+            navigation.current = !event.defaultPrevented && [
+              "ArrowUp",
+              "ArrowDown",
+              "ArrowLeft",
+              "ArrowRight",
+              "Home",
+              "End"
+            ].includes(event.key) ? event.nativeEvent : null;
+          },
+          onPointerDownCapture: (event) => {
+            navigation.current = null;
+            onPointerDownCapture?.(event);
+          },
+          "aria-readonly": readOnly,
+          className: cn3(asChild ? void 0 : radioGroupStyles(), className)
+        }
+      )
+    }
+  );
+};
+export {
+  Radio,
+  RadioCard,
+  RadioGroup
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/style.ts", "../src/context.ts", "../src/use-radio-item.ts", "../src/radio.tsx", "../src/radio-card.tsx", "../src/radio-group.tsx"],
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Radio Group\n * @namespace Root\n * @description Style\n */\n\nimport { cva } from \"class-variance-authority\";\n\nexport const radioGroupStyles = cva(\"flex flex-col gap-gridui-8\");\nexport const radioStyles = cva(\"inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full border border-control-border bg-background text-foreground align-middle data-[state=checked]:bg-accent-background data-[state=checked]:text-accent-foreground data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-default aria-invalid:border-danger-foreground\");\nexport const radioCardStyles = cva(\"gridui-radio-card\", {\n    variants: {\n        variant: {\n            outlined: \"gridui-radio-card-outlined\",\n            plain: \"gridui-radio-card-plain\",\n        },\n    },\n    defaultVariants: { variant: \"outlined\" },\n});\n", "/**\n * @author WMXPY\n * @package Radio Group\n * @namespace Root\n * @description Context\n */\n\nimport { createContext } from \"react\";\n\nexport const RadioContext = createContext<{\n    readonly readOnly: boolean;\n    readonly change: (value: string, event: Event) => void;\n    readonly navigation: {\n        current: Event | null;\n    };\n} | null>(null);\n", "/**\n * @author WMXPY\n * @package Radio Group\n * @namespace Root\n * @description Use Radio Item\n */\n\nimport { RadioContext } from \"./context\";\nimport type * as Primitive from \"@radix-ui/react-radio-group\";\nimport type { ComponentPropsWithRef, FocusEvent, MouseEvent } from \"react\";\nimport { useContext } from \"react\";\n\ntype RadioItemEvents = Pick<ComponentPropsWithRef<typeof Primitive.Item>, \"onClick\" | \"onFocus\" | \"value\">;\n\nexport const useRadioItem = (props: RadioItemEvents) => {\n    const context = useContext(RadioContext);\n    const onFocus = (event: FocusEvent<HTMLButtonElement>): void => {\n        props.onFocus?.(event);\n        const navigation = context?.navigation.current;\n        if (navigation) {\n            context.navigation.current = null;\n            if (!event.defaultPrevented && !event.currentTarget.matches(\":disabled\")) {\n                context.change(props.value, navigation);\n            }\n            event.preventDefault();\n        }\n    };\n    const onClick = (event: MouseEvent<HTMLButtonElement>): void => {\n        props.onClick?.(event);\n        if (!event.defaultPrevented && !event.currentTarget.matches(\":disabled\")) {\n            context?.change(props.value, event.nativeEvent);\n        }\n        event.preventDefault();\n    };\n    return {\n        readOnly: context?.readOnly ?? false,\n        onFocus,\n        onClick,\n    };\n};\n", "/**\n * @author WMXPY\n * @package Radio Group\n * @namespace Root\n * @description Radio\n */\n\nimport { radioStyles } from \"./style\";\nimport { useRadioItem } from \"./use-radio-item\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-radio-group\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type RadioProps = Omit<ComponentPropsWithRef<typeof Primitive.Item>, \"children\">;\n\nexport const Radio: FC<RadioProps> = (props: RadioProps) => {\n    const { className, ...restProps } = props;\n    const events = useRadioItem(props);\n    return (<Primitive.Item\n        {...restProps}\n        className={cn(radioStyles(), className)}\n        data-readonly={events.readOnly ? \"\" : undefined}\n        onFocus={events.onFocus}\n        onClick={events.onClick}\n    >\n        <Primitive.Indicator\n            className=\"size-2 rounded-full bg-current\"\n        />\n    </Primitive.Item>);\n};\n", "/**\n * @author WMXPY\n * @package Radio Group\n * @namespace Root\n * @description Radio Card\n */\n\nimport type { RadioProps } from \"./radio\";\nimport { radioCardStyles } from \"./style\";\nimport { useRadioItem } from \"./use-radio-item\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-radio-group\";\nimport type { FC, ReactNode } from \"react\";\nimport { useId } from \"react\";\n\nexport type RadioCardProps = Omit<RadioProps, \"asChild\"> & {\n    readonly label: ReactNode;\n    readonly description?: ReactNode;\n    readonly leading?: ReactNode;\n    readonly variant?: \"outlined\" | \"plain\";\n};\n\nexport const RadioCard: FC<RadioCardProps> = (props: RadioCardProps) => {\n    const {\n        label, description, leading, variant = \"outlined\", className,\n        \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy, ...restProps\n    } = props;\n    const labelId = useId();\n    const descriptionId = useId();\n    const described = description !== undefined && description !== null && description !== false;\n    const descriptionIds = [\n        ariaDescribedBy,\n        described ? descriptionId : undefined,\n    ].filter(Boolean).join(\" \") || undefined;\n    const events = useRadioItem(props);\n    return (<Primitive.Item\n        {...restProps}\n        className={cn(radioCardStyles({ variant }), className)}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy ?? (ariaLabel ? undefined : labelId)}\n        aria-describedby={descriptionIds}\n        data-readonly={events.readOnly ? \"\" : undefined}\n        onFocus={events.onFocus}\n        onClick={events.onClick}\n    >\n        {leading !== undefined && leading !== null && (<span\n            className=\"gridui-radio-card-leading\"\n            aria-hidden=\"true\"\n        >\n            {leading}\n        </span>)}\n        <span\n            className=\"gridui-radio-card-content\"\n        >\n            <span\n                className=\"type-ui\"\n                id={labelId}\n            >\n                {label}\n            </span>\n            {described && (<span\n                className=\"gridui-radio-card-description type-supporting\"\n                id={descriptionId}\n            >\n                {description}\n            </span>)}\n        </span>\n        <span\n            className=\"gridui-radio-card-indicator\"\n            aria-hidden=\"true\"\n        >\n            <Primitive.Indicator\n                className=\"gridui-radio-card-dot\"\n            />\n        </span>\n    </Primitive.Item>);\n};\n", "/**\n * @author WMXPY\n * @package Radio Group\n * @namespace Root\n * @description Radio Group\n */\n\nimport { RadioContext } from \"./context\";\nimport { radioGroupStyles } from \"./style\";\nimport type { ChangeDetails } from \"@gridui/interaction\";\nimport { changeDetails } from \"@gridui/interaction\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-radio-group\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\nimport { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nexport type RadioGroupProps = Omit<ComponentPropsWithRef<typeof Primitive.Root>, \"onValueChange\" | \"defaultValue\"> & {\n    readonly defaultValue?: string | null | undefined;\n    readonly readOnly?: boolean | undefined;\n    readonly onValueChange?: ((value: string, details: ChangeDetails) => void) | undefined;\n};\nexport const RadioGroup: FC<RadioGroupProps> = (props: RadioGroupProps) => {\n    const { asChild, className, value, defaultValue, onValueChange, readOnly = false, ref, onKeyDownCapture, onPointerDownCapture, ...restProps } = props;\n    const root = useRef<HTMLDivElement>(null);\n    const navigation = useRef<Event | null>(null);\n    const [\n        internalValue,\n        setInternalValue,\n    ] = useState<string | null>(defaultValue ?? null);\n    const initial = useRef(defaultValue ?? null);\n    useImperativeHandle(ref, () => {\n        return root.current as HTMLDivElement;\n    });\n    useEffect(() => {\n        const form = restProps.form ? document.getElementById(restProps.form) : root.current?.closest(\"form\");\n        if (!form || value !== undefined) {\n            return;\n        }\n        let mounted = true;\n        const reset = (event: Event) => {\n            // Wait until React bubbling handlers can cancel the native reset.\n            setTimeout(() => {\n                if (mounted && !event.defaultPrevented) {\n                    setInternalValue(initial.current);\n                }\n            }, 0);\n        };\n        form.addEventListener(\"reset\", reset);\n        return () => {\n            mounted = false;\n            form.removeEventListener(\"reset\", reset);\n        };\n    }, [\n        restProps.form,\n        value,\n    ]);\n    const change = (next: string, event: Event) => {\n        if (readOnly || restProps.disabled) {\n            return;\n        }\n        const details = changeDetails(event);\n        onValueChange?.(next, details);\n        if (!details.isCanceled && value === undefined) {\n            setInternalValue(next);\n        }\n    };\n    return (<RadioContext.Provider\n        value={{\n            readOnly,\n            change,\n            navigation,\n        }}\n    >\n        <Primitive.Root\n            {...restProps}\n            asChild={asChild}\n            ref={root}\n            value={value === undefined ? internalValue : value}\n            onKeyDownCapture={(event) => {\n                onKeyDownCapture?.(event);\n                navigation.current = !event.defaultPrevented && [\n                    \"ArrowUp\",\n                    \"ArrowDown\",\n                    \"ArrowLeft\",\n                    \"ArrowRight\",\n                    \"Home\",\n                    \"End\",\n                ].includes(event.key)\n                    ? event.nativeEvent : null;\n            }}\n            onPointerDownCapture={(event) => {\n                navigation.current = null; onPointerDownCapture?.(event);\n            }}\n            aria-readonly={readOnly}\n            className={cn(asChild ? undefined : radioGroupStyles(), className)}\n        />\n    </RadioContext.Provider>);\n};\n"],
+  "mappings": "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",
+  "names": ["cn", "Primitive", "jsx", "cn", "Primitive", "jsx"]
+}

package/dist/radio-card.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @author WMXPY
+ * @package Radio Group
+ * @namespace Root
+ * @description Radio Card
+ */
+import type { RadioProps } from "./radio";
+import type { FC, ReactNode } from "react";
+export type RadioCardProps = Omit<RadioProps, "asChild"> & {
+    readonly label: ReactNode;
+    readonly description?: ReactNode;
+    readonly leading?: ReactNode;
+    readonly variant?: "outlined" | "plain";
+};
+export declare const RadioCard: FC<RadioCardProps>;

package/dist/radio-group.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @author WMXPY
+ * @package Radio Group
+ * @namespace Root
+ * @description Radio Group
+ */
+import type { ChangeDetails } from "@gridui/interaction";
+import * as Primitive from "@radix-ui/react-radio-group";
+import type { ComponentPropsWithRef, FC } from "react";
+export type RadioGroupProps = Omit<ComponentPropsWithRef<typeof Primitive.Root>, "onValueChange" | "defaultValue"> & {
+    readonly defaultValue?: string | null | undefined;
+    readonly readOnly?: boolean | undefined;
+    readonly onValueChange?: ((value: string, details: ChangeDetails) => void) | undefined;
+};
+export declare const RadioGroup: FC<RadioGroupProps>;

package/dist/radio.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author WMXPY
+ * @package Radio Group
+ * @namespace Root
+ * @description Radio
+ */
+import * as Primitive from "@radix-ui/react-radio-group";
+import type { ComponentPropsWithRef, FC } from "react";
+export type RadioProps = Omit<ComponentPropsWithRef<typeof Primitive.Item>, "children">;
+export declare const Radio: FC<RadioProps>;

package/dist/style.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author WMXPY
+ * @package Radio Group
+ * @namespace Root
+ * @description Style
+ */
+export declare const radioGroupStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const radioStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const radioCardStyles: (props?: ({
+    variant?: "outlined" | "plain" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/styles.css

@@ -0,0 +1,185 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --spacing: 0.25rem;
+  }
+}
+@layer utilities {
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-gridui-8 {
+    gap: var(--gridui-space-8);
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-control-border {
+    border-color: var(--gridui-control-border);
+  }
+  .bg-background {
+    background-color: var(--gridui-background);
+  }
+  .bg-current {
+    background-color: currentcolor;
+  }
+  .align-middle {
+    vertical-align: middle;
+  }
+  .type-supporting {
+    font: var(--gridui-type-supporting);
+    letter-spacing: normal;
+  }
+  .type-ui {
+    font: var(--gridui-type-ui);
+    letter-spacing: normal;
+  }
+  .text-foreground {
+    color: var(--gridui-foreground);
+  }
+  .aria-invalid\:border-danger-foreground[aria-invalid="true"] {
+    border-color: var(--gridui-danger-foreground);
+  }
+  .data-disabled\:cursor-not-allowed[data-disabled] {
+    cursor: not-allowed;
+  }
+  .data-disabled\:opacity-50[data-disabled] {
+    opacity: 50%;
+  }
+  .data-readonly\:cursor-default[data-readonly] {
+    cursor: default;
+  }
+  .data-\[state\=checked\]\:bg-accent-background[data-state="checked"] {
+    background-color: var(--gridui-accent-background);
+  }
+  .data-\[state\=checked\]\:text-accent-foreground[data-state="checked"] {
+    color: var(--gridui-accent-foreground);
+  }
+}
+@layer components {
+  .gridui-radio-card {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--gridui-space-16);
+    width: 100%;
+    min-width: 0;
+    min-height: 2.75rem;
+    padding: var(--gridui-space-16);
+    background: var(--gridui-background);
+    color: var(--gridui-foreground);
+    text-align: start;
+    cursor: pointer;
+    transition: background var(--gridui-motion-duration-quick) var(--gridui-motion-ease-out);
+  }
+  .gridui-radio-card-outlined {
+    border: 1px solid var(--gridui-control-border);
+    border-radius: var(--gridui-control-radius);
+  }
+  .gridui-radio-card[data-state="checked"] {
+    background: var(--gridui-surface);
+  }
+  .gridui-radio-card:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .gridui-radio-card[data-readonly] {
+    cursor: default;
+  }
+  .gridui-radio-card:not(:disabled):not([data-readonly]):hover {
+    background: var(--gridui-surface-hover);
+  }
+  .gridui-radio-card-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--gridui-space-8);
+    min-width: 0;
+  }
+  .gridui-radio-card-description, .gridui-radio-card-leading {
+    color: var(--gridui-muted);
+  }
+  .gridui-radio-card-leading {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+  .gridui-radio-card-leading svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .gridui-radio-card-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 1px solid var(--gridui-control-border);
+    border-radius: 50%;
+    background: var(--gridui-background);
+  }
+  .gridui-radio-card[data-state="checked"] .gridui-radio-card-indicator {
+    border-color: var(--gridui-accent-background);
+    background: var(--gridui-accent-background);
+    color: var(--gridui-accent-foreground);
+  }
+  .gridui-radio-card[aria-invalid="true"] .gridui-radio-card-indicator {
+    border-color: var(--gridui-danger-foreground);
+  }
+  .gridui-radio-card-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: currentcolor;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .gridui-radio-card {
+      transition: none;
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}

package/dist/use-radio-item.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @author WMXPY
+ * @package Radio Group
+ * @namespace Root
+ * @description Use Radio Item
+ */
+import type * as Primitive from "@radix-ui/react-radio-group";
+import type { ComponentPropsWithRef, FocusEvent, MouseEvent } from "react";
+type RadioItemEvents = Pick<ComponentPropsWithRef<typeof Primitive.Item>, "onClick" | "onFocus" | "value">;
+export declare const useRadioItem: (props: RadioItemEvents) => {
+    readOnly: boolean;
+    onFocus: (event: FocusEvent<HTMLButtonElement>) => void;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+export {};

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@gridui/radio-group",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "GridUI radio groups and rich single-choice cards",
+  "license": "UNLICENSED",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sudo-ui/GridUI-React-Monorepo.git",
+    "directory": "packages/radio-group"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@gridui/interaction": "^1.0.0",
+    "@gridui/style-utils": "^2.1.1",
+    "@gridui/theme": "^2.1.1",
+    "@radix-ui/react-radio-group": "1.5.1",
+    "class-variance-authority": "0.7.1"
+  },
+  "devDependencies": {
+    "@gridui-internal/configuration": "0.0.0",
+    "@gridui/grid": "2.1.2",
+    "@jest/globals": "30.5.2",
+    "@storybook/react-vite": "10.6.3",
+    "@types/jest": "30.0.0",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "jest": "30.5.2",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "6.0.3"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "build": "node ../../scripts/compilation/package.ts",
+    "compile": "tsc --project tsconfig.json",
+    "test": "jest",
+    "coverage": "jest --coverage"
+  }
 }