@ladder-ui/radio-group 0.3.0 → 0.4.0

package/dist/index.js

@@ -2,41 +2,47 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var concatClassNames = require('@ladder-ui/core/concatClassNames');
+var core = require('@ladder-ui/core');
+var layout = require('@ladder-ui/layout');
+var primitives = require('@ladder-ui/primitives');
 
-const RadioGroupContext = react.createContext({ name: "" });
-function RadioGroup({ ref, className, children, value, defaultValue, onValueChange, name, orientation = "vertical", disabled = false, ...props }) {
-    const generatedName = react.useId();
-    const resolvedName = name ?? generatedName;
-    const classes = concatClassNames("lui-radio-group", orientation === "horizontal" ? "lui-radio-group--horizontal" : undefined, className);
-    return (jsxRuntime.jsx(RadioGroupContext, { value: { name: resolvedName, value, defaultValue, onValueChange, disabled }, children: jsxRuntime.jsx("div", { ref: ref, "data-slot": "radio-group", role: "radiogroup", className: classes, ...props, children: children }) }));
-}
+const RadioGroupContext = react.createContext(null);
+// ─── Variants ────────────────────────────────────────────────────────────────
+const radioGroupItemVariants = core.cva({
+    base: "lui-radio-group-item",
+    variants: {
+        size: {
+            sm: "lui-radio-group-item--sm",
+            md: "lui-radio-group-item--md",
+            lg: "lui-radio-group-item--lg",
+        },
+        status: {
+            default: "",
+            error: "lui-radio-group-item--error",
+        },
+        disabled: {
+            true: "lui-radio-group-item--disabled",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        status: "default",
+    },
+});
+const RadioGroup = react.forwardRef(({ children, className, value, defaultValue, onValueChange, name, disabled, orientation = "vertical", ...props }, ref) => {
+    const radioGroup = primitives.useRadioGroup({ value, defaultValue, onValueChange, name, disabled });
+    return (jsxRuntime.jsx(RadioGroupContext, { value: radioGroup, children: jsxRuntime.jsx(layout.Flex, { ref: ref, role: "radiogroup", direction: orientation === "horizontal" ? "row" : "column", gap: "2", className: core.concatClassNames("lui-radio-group", orientation === "horizontal" && "lui-radio-group--horizontal", className), ...props, children: children }) }));
+});
 RadioGroup.displayName = "RadioGroup";
-function RadioGroupItem({ ref, className, style, value, size = "md", status = "default", disabled, onChange, ...inputProps }) {
+const RadioGroupItem = react.forwardRef(({ className, value, size, status, disabled, ...props }, ref) => {
     const ctx = react.use(RadioGroupContext);
+    if (!ctx)
+        return null;
+    const isChecked = ctx.value === value;
     const isDisabled = disabled || ctx.disabled;
-    // Controlled: pass checked based on context value
-    const controlledProps = ctx.value !== undefined
-        ? {
-            checked: ctx.value === value,
-            onChange: (e) => {
-                if (e.target.checked)
-                    ctx.onValueChange?.(value);
-                onChange?.(e);
-            },
-        }
-        : {
-            // Uncontrolled: use defaultChecked + native browser behaviour
-            defaultChecked: ctx.defaultValue === value,
-            onChange: (e) => {
-                if (e.target.checked)
-                    ctx.onValueChange?.(value);
-                onChange?.(e);
-            },
-        };
-    const wrapperClasses = concatClassNames("lui-radio-group-item", `lui-radio-group-item--${size}`, status === "error" ? "lui-radio-group-item--error" : undefined, className);
-    return (jsxRuntime.jsxs("span", { "data-slot": "radio-group-item", className: wrapperClasses, style: style, children: [jsxRuntime.jsx("input", { ref: ref, type: "radio", className: "lui-radio-group-item__input", name: ctx.name, value: value, disabled: isDisabled, "aria-invalid": status === "error" ? "true" : undefined, ...controlledProps, ...inputProps }), jsxRuntime.jsx("span", { className: "lui-radio-group-item__control", "aria-hidden": "true", children: jsxRuntime.jsx("span", { className: "lui-radio-group-item__dot" }) })] }));
-}
+    return (jsxRuntime.jsxs(layout.Box, { as: "span", "data-slot": "radio-group-item", className: radioGroupItemVariants({ size, status, disabled: isDisabled, className }), children: [jsxRuntime.jsx("input", { ref: ref, type: "radio", name: ctx.name, value: value, checked: isChecked, disabled: isDisabled, "aria-invalid": status === "error" ? true : undefined, className: "lui-radio-group-item__input", onChange: () => ctx.onValueChange(value), ...props }), jsxRuntime.jsx(layout.Box, { as: "span", className: "lui-radio-group-item__control", "aria-hidden": "true", children: jsxRuntime.jsx(layout.Box, { as: "span", className: "lui-radio-group-item__dot" }) })] }));
+});
 RadioGroupItem.displayName = "RadioGroupItem";
 
 exports.RadioGroup = RadioGroup;

package/dist/index.mjs

@@ -1,40 +1,46 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useId, use } from 'react';
-import concatClassNames from '@ladder-ui/core/concatClassNames';
+import { createContext, forwardRef, use } from 'react';
+import { cva, concatClassNames } from '@ladder-ui/core';
+import { Flex, Box } from '@ladder-ui/layout';
+import { useRadioGroup } from '@ladder-ui/primitives';
 
-const RadioGroupContext = createContext({ name: "" });
-function RadioGroup({ ref, className, children, value, defaultValue, onValueChange, name, orientation = "vertical", disabled = false, ...props }) {
-    const generatedName = useId();
-    const resolvedName = name ?? generatedName;
-    const classes = concatClassNames("lui-radio-group", orientation === "horizontal" ? "lui-radio-group--horizontal" : undefined, className);
-    return (jsx(RadioGroupContext, { value: { name: resolvedName, value, defaultValue, onValueChange, disabled }, children: jsx("div", { ref: ref, "data-slot": "radio-group", role: "radiogroup", className: classes, ...props, children: children }) }));
-}
+const RadioGroupContext = createContext(null);
+// ─── Variants ────────────────────────────────────────────────────────────────
+const radioGroupItemVariants = cva({
+    base: "lui-radio-group-item",
+    variants: {
+        size: {
+            sm: "lui-radio-group-item--sm",
+            md: "lui-radio-group-item--md",
+            lg: "lui-radio-group-item--lg",
+        },
+        status: {
+            default: "",
+            error: "lui-radio-group-item--error",
+        },
+        disabled: {
+            true: "lui-radio-group-item--disabled",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        status: "default",
+    },
+});
+const RadioGroup = forwardRef(({ children, className, value, defaultValue, onValueChange, name, disabled, orientation = "vertical", ...props }, ref) => {
+    const radioGroup = useRadioGroup({ value, defaultValue, onValueChange, name, disabled });
+    return (jsx(RadioGroupContext, { value: radioGroup, children: jsx(Flex, { ref: ref, role: "radiogroup", direction: orientation === "horizontal" ? "row" : "column", gap: "2", className: concatClassNames("lui-radio-group", orientation === "horizontal" && "lui-radio-group--horizontal", className), ...props, children: children }) }));
+});
 RadioGroup.displayName = "RadioGroup";
-function RadioGroupItem({ ref, className, style, value, size = "md", status = "default", disabled, onChange, ...inputProps }) {
+const RadioGroupItem = forwardRef(({ className, value, size, status, disabled, ...props }, ref) => {
     const ctx = use(RadioGroupContext);
+    if (!ctx)
+        return null;
+    const isChecked = ctx.value === value;
     const isDisabled = disabled || ctx.disabled;
-    // Controlled: pass checked based on context value
-    const controlledProps = ctx.value !== undefined
-        ? {
-            checked: ctx.value === value,
-            onChange: (e) => {
-                if (e.target.checked)
-                    ctx.onValueChange?.(value);
-                onChange?.(e);
-            },
-        }
-        : {
-            // Uncontrolled: use defaultChecked + native browser behaviour
-            defaultChecked: ctx.defaultValue === value,
-            onChange: (e) => {
-                if (e.target.checked)
-                    ctx.onValueChange?.(value);
-                onChange?.(e);
-            },
-        };
-    const wrapperClasses = concatClassNames("lui-radio-group-item", `lui-radio-group-item--${size}`, status === "error" ? "lui-radio-group-item--error" : undefined, className);
-    return (jsxs("span", { "data-slot": "radio-group-item", className: wrapperClasses, style: style, children: [jsx("input", { ref: ref, type: "radio", className: "lui-radio-group-item__input", name: ctx.name, value: value, disabled: isDisabled, "aria-invalid": status === "error" ? "true" : undefined, ...controlledProps, ...inputProps }), jsx("span", { className: "lui-radio-group-item__control", "aria-hidden": "true", children: jsx("span", { className: "lui-radio-group-item__dot" }) })] }));
-}
+    return (jsxs(Box, { as: "span", "data-slot": "radio-group-item", className: radioGroupItemVariants({ size, status, disabled: isDisabled, className }), children: [jsx("input", { ref: ref, type: "radio", name: ctx.name, value: value, checked: isChecked, disabled: isDisabled, "aria-invalid": status === "error" ? true : undefined, className: "lui-radio-group-item__input", onChange: () => ctx.onValueChange(value), ...props }), jsx(Box, { as: "span", className: "lui-radio-group-item__control", "aria-hidden": "true", children: jsx(Box, { as: "span", className: "lui-radio-group-item__dot" }) })] }));
+});
 RadioGroupItem.displayName = "RadioGroupItem";
 
 export { RadioGroup, RadioGroupItem };

package/dist/radio-group.css

@@ -58,7 +58,7 @@
   .lui-radio-group-item:has(.lui-radio-group-item__input:focus-visible) .lui-radio-group-item__control {
     outline: none;
     border-color: var(--lui-radio-focus-border);
-    box-shadow: 0 0 0 2px var(--lui-surface), 0 0 0 4px var(--lui-radio-focus-ring-color);
+    box-shadow: 0 0 0 2px var(--lui-bg-surface), 0 0 0 4px var(--lui-radio-focus-ring-color);
   }
   .lui-radio-group-item:has(.lui-radio-group-item__input:checked) .lui-radio-group-item__control {
     background-color: var(--lui-radio-checked-bg);
@@ -75,7 +75,7 @@
   }
   .lui-radio-group-item--error:has(.lui-radio-group-item__input:focus-visible) .lui-radio-group-item__control {
     border-color: var(--lui-error);
-    box-shadow: 0 0 0 2px var(--lui-surface), 0 0 0 4px color-mix(in srgb, var(--lui-error) 40%, transparent);
+    box-shadow: 0 0 0 2px var(--lui-bg-surface), 0 0 0 4px color-mix(in srgb, var(--lui-error) 40%, transparent);
   }
   .lui-radio-group-item--sm {
     width: var(--lui-radio-size-sm);

package/dist/radio-group.d.ts

@@ -1,33 +1,33 @@
-import type { Ref } from "react";
-export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    ref?: Ref<HTMLDivElement>;
-    /** Controlled selected value. Pair with `onValueChange`. */
-    value?: string;
-    /** Uncontrolled initial selected value. */
-    defaultValue?: string;
-    /** Called when the user selects a different item. */
-    onValueChange?: (value: string) => void;
-    /** HTML `name` attribute shared by all radio inputs in the group. Auto-generated if omitted. */
-    name?: string;
-    /** Layout direction of the items. */
+import type { Ref, HTMLAttributes, ReactNode } from "react";
+import { type VariantProps } from "@ladder-ui/core";
+import { type UseRadioGroupProps } from "@ladder-ui/primitives";
+declare const radioGroupItemVariants: (props?: (import("packages/core/dist/cva").ConfigVariants<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    status: {
+        default: string;
+        error: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}> & {
+    className?: string;
+}) | undefined) => string;
+export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue">, UseRadioGroupProps {
+    children?: ReactNode;
     orientation?: "vertical" | "horizontal";
-    /** Disables all radio items in the group. */
-    disabled?: boolean;
 }
-export declare function RadioGroup({ ref, className, children, value, defaultValue, onValueChange, name, orientation, disabled, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace RadioGroup {
-    var displayName: string;
-}
-export interface RadioGroupItemProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value"> {
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface RadioGroupItemProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value">, VariantProps<typeof radioGroupItemVariants> {
     ref?: Ref<HTMLInputElement>;
-    /** The value this item represents. Required. */
     value: string;
-    /** Size of the radio control. */
     size?: "sm" | "md" | "lg";
-    /** Visual validation state. `"error"` adds a red border and sets `aria-invalid="true"`. */
     status?: "default" | "error";
 }
-export declare function RadioGroupItem({ ref, className, style, value, size, status, disabled, onChange, ...inputProps }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace RadioGroupItem {
-    var displayName: string;
-}
+export declare const RadioGroupItem: import("react").ForwardRefExoticComponent<Omit<RadioGroupItemProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/radio-group.vars.css

@@ -3,10 +3,10 @@
   --lui-radio-size-md: 1rem;
   --lui-radio-size-lg: 1.25rem;
   --lui-radio-dot-scale: 0.4;
-  --lui-radio-bg: var(--lui-surface);
-  --lui-radio-border: var(--lui-surface-border);
-  --lui-radio-checked-bg: var(--lui-primary);
-  --lui-radio-checked-dot: var(--lui-primary-text);
-  --lui-radio-focus-border: var(--lui-primary);
-  --lui-radio-focus-ring-color: color-mix(in srgb, var(--lui-primary) 40%, transparent);
+  --lui-radio-bg: var(--lui-bg-surface);
+  --lui-radio-border: color-mix(in srgb, var(--lui-border-default) 93%, var(--lui-text-primary));
+  --lui-radio-checked-bg: var(--lui-bg-interactive);
+  --lui-radio-checked-dot: var(--lui-text-inverse);
+  --lui-radio-focus-border: var(--lui-bg-interactive);
+  --lui-radio-focus-ring-color: color-mix(in srgb, var(--lui-bg-interactive) 40%, transparent);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ladder-ui/radio-group",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -48,7 +48,7 @@
     "sass": "^1.90.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "@ladder-ui/core": "0.3.0"
+    "@ladder-ui/core": "0.4.0"
   },
   "peerDependencies": {
     "@ladder-ui/core": ">=0.0.0",
@@ -57,6 +57,10 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "dependencies": {
+    "@ladder-ui/layout": "^0.4.0",
+    "@ladder-ui/primitives": "^0.4.0"
+  },
   "scripts": {
     "build": "pnpm clean && rollup -c",
     "dev": "rollup -c -w",