@ladder-ui/radio-group 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,43 +1 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var concatClassNames = require('@ladder-ui/core/concatClassNames');
-
-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 }) }));
-}
-RadioGroup.displayName = "RadioGroup";
-function RadioGroupItem({ ref, className, style, value, size = "md", status = "default", disabled, onChange, ...inputProps }) {
-    const ctx = react.use(RadioGroupContext);
-    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" }) })] }));
-}
-RadioGroupItem.displayName = "RadioGroupItem";
-
-exports.RadioGroup = RadioGroup;
-exports.RadioGroupItem = RadioGroupItem;
+"use strict";var a=require("react/jsx-runtime"),e=require("react"),r=require("@ladder-ui/core"),i=require("@ladder-ui/layout"),o=require("@ladder-ui/primitives");const s=e.createContext(null),l=r.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"}}),u=e.forwardRef(({children:e,className:l,value:u,defaultValue:d,onValueChange:t,name:n,disabled:m,orientation:c="vertical",...p},g)=>{const h=o.useRadioGroup({value:u,defaultValue:d,onValueChange:t,name:n,disabled:m});return a.jsx(s,{value:h,children:a.jsx(i.Flex,{ref:g,role:"radiogroup",direction:"horizontal"===c?"row":"column",gap:"2",className:r.concatClassNames("lui-radio-group","horizontal"===c&&"lui-radio-group--horizontal",l),...p,children:e})})});u.displayName="RadioGroup";const d=e.forwardRef(({className:r,value:o,size:u,status:d,disabled:t,...n},m)=>{const c=e.use(s);if(!c)return null;const p=c.value===o,g=t||c.disabled;return a.jsxs(i.Box,{as:"span","data-slot":"radio-group-item",className:l({size:u,status:d,disabled:g,className:r}),children:[a.jsx("input",{ref:m,type:"radio",name:c.name,value:o,checked:p,disabled:g,"aria-invalid":"error"===d||void 0,className:"lui-radio-group-item__input",onChange:()=>c.onValueChange(o),...n}),a.jsx(i.Box,{as:"span",className:"lui-radio-group-item__control","aria-hidden":"true",children:a.jsx(i.Box,{as:"span",className:"lui-radio-group-item__dot"})})]})});d.displayName="RadioGroupItem",exports.RadioGroup=u,exports.RadioGroupItem=d;

package/dist/index.mjs

@@ -1,40 +1 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useId, use } from 'react';
-import concatClassNames from '@ladder-ui/core/concatClassNames';
-
-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 }) }));
-}
-RadioGroup.displayName = "RadioGroup";
-function RadioGroupItem({ ref, className, style, value, size = "md", status = "default", disabled, onChange, ...inputProps }) {
-    const ctx = use(RadioGroupContext);
-    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" }) })] }));
-}
-RadioGroupItem.displayName = "RadioGroupItem";
-
-export { RadioGroup, RadioGroupItem };
+import{jsx as a,jsxs as e}from"react/jsx-runtime";import{createContext as i,forwardRef as r,use as o}from"react";import{cva as l,concatClassNames as d}from"@ladder-ui/core";import{Flex as t,Box as u}from"@ladder-ui/layout";import{useRadioGroup as s}from"@ladder-ui/primitives";const n=i(null),m=l({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"}}),p=r(({children:e,className:i,value:r,defaultValue:o,onValueChange:l,name:u,disabled:m,orientation:p="vertical",...c},g)=>{const f=s({value:r,defaultValue:o,onValueChange:l,name:u,disabled:m});return a(n,{value:f,children:a(t,{ref:g,role:"radiogroup",direction:"horizontal"===p?"row":"column",gap:"2",className:d("lui-radio-group","horizontal"===p&&"lui-radio-group--horizontal",i),...c,children:e})})});p.displayName="RadioGroup";const c=r(({className:i,value:r,size:l,status:d,disabled:t,...s},p)=>{const c=o(n);if(!c)return null;const g=c.value===r,f=t||c.disabled;return e(u,{as:"span","data-slot":"radio-group-item",className:m({size:l,status:d,disabled:f,className:i}),children:[a("input",{ref:p,type:"radio",name:c.name,value:r,checked:g,disabled:f,"aria-invalid":"error"===d||void 0,className:"lui-radio-group-item__input",onChange:()=>c.onValueChange(r),...s}),a(u,{as:"span",className:"lui-radio-group-item__control","aria-hidden":"true",children:a(u,{as:"span",className:"lui-radio-group-item__dot"})})]})});c.displayName="RadioGroupItem";export{p as RadioGroup,c as RadioGroupItem};

package/dist/radio-group.css

@@ -1,96 +1 @@
-@layer components {
-  .lui-radio-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.625rem;
-  }
-  .lui-radio-group--horizontal {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-  .lui-radio-group-item {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    vertical-align: middle;
-    width: var(--lui-radio-size-md);
-    height: var(--lui-radio-size-md);
-  }
-  .lui-radio-group-item__input {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-    cursor: pointer;
-    z-index: 1;
-    border-radius: 50%;
-  }
-  .lui-radio-group-item__input:disabled {
-    cursor: not-allowed;
-  }
-  .lui-radio-group-item__control {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background-color: var(--lui-radio-bg);
-    border: 1px solid var(--lui-radio-border);
-    border-radius: 50%;
-    transition: var(--lui-transition);
-    pointer-events: none;
-    flex-shrink: 0;
-  }
-  .lui-radio-group-item__dot {
-    display: none;
-    width: calc(var(--lui-radio-size-md) * var(--lui-radio-dot-scale));
-    height: calc(var(--lui-radio-size-md) * var(--lui-radio-dot-scale));
-    border-radius: 50%;
-    background-color: var(--lui-radio-checked-dot);
-    flex-shrink: 0;
-  }
-  .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);
-  }
-  .lui-radio-group-item:has(.lui-radio-group-item__input:checked) .lui-radio-group-item__control {
-    background-color: var(--lui-radio-checked-bg);
-    border-color: var(--lui-radio-checked-bg);
-  }
-  .lui-radio-group-item:has(.lui-radio-group-item__input:checked) .lui-radio-group-item__dot {
-    display: block;
-  }
-  .lui-radio-group-item:has(.lui-radio-group-item__input:disabled) {
-    opacity: var(--lui-disabled-opacity);
-  }
-  .lui-radio-group-item--error .lui-radio-group-item__control {
-    border-color: var(--lui-error);
-  }
-  .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);
-  }
-  .lui-radio-group-item--sm {
-    width: var(--lui-radio-size-sm);
-    height: var(--lui-radio-size-sm);
-  }
-  .lui-radio-group-item--sm .lui-radio-group-item__dot {
-    width: calc(var(--lui-radio-size-sm) * var(--lui-radio-dot-scale));
-    height: calc(var(--lui-radio-size-sm) * var(--lui-radio-dot-scale));
-  }
-  .lui-radio-group-item--lg {
-    width: var(--lui-radio-size-lg);
-    height: var(--lui-radio-size-lg);
-  }
-  .lui-radio-group-item--lg .lui-radio-group-item__dot {
-    width: calc(var(--lui-radio-size-lg) * var(--lui-radio-dot-scale));
-    height: calc(var(--lui-radio-size-lg) * var(--lui-radio-dot-scale));
-  }
-}
+@layer components{.lui-radio-group{display:flex;flex-direction:column;gap:.625rem}.lui-radio-group--horizontal{align-items:center;flex-direction:row;flex-wrap:wrap}.lui-radio-group-item{align-items:center;display:inline-flex;flex-shrink:0;height:var(--lui-radio-size-md);justify-content:center;position:relative;vertical-align:middle;width:var(--lui-radio-size-md)}.lui-radio-group-item__input{border-radius:50%;cursor:pointer;height:100%;inset:0;margin:0;opacity:0;padding:0;position:absolute;width:100%;z-index:1}.lui-radio-group-item__input:disabled{cursor:not-allowed}.lui-radio-group-item__control{align-items:center;background-color:var(--lui-radio-bg);border:1px solid var(--lui-radio-border);border-radius:50%;display:flex;flex-shrink:0;height:100%;justify-content:center;pointer-events:none;transition:var(--lui-transition);width:100%}.lui-radio-group-item__dot{background-color:var(--lui-radio-checked-dot);border-radius:50%;display:none;flex-shrink:0;height:calc(var(--lui-radio-size-md)*var(--lui-radio-dot-scale));width:calc(var(--lui-radio-size-md)*var(--lui-radio-dot-scale))}.lui-radio-group-item:has(.lui-radio-group-item__input:focus-visible) .lui-radio-group-item__control{border-color:var(--lui-radio-focus-border);box-shadow:0 0 0 2px var(--lui-bg-surface),0 0 0 4px var(--lui-radio-focus-ring-color);outline:none}.lui-radio-group-item:has(.lui-radio-group-item__input:checked) .lui-radio-group-item__control{background-color:var(--lui-radio-checked-bg);border-color:var(--lui-radio-checked-bg)}.lui-radio-group-item:has(.lui-radio-group-item__input:checked) .lui-radio-group-item__dot{display:block}.lui-radio-group-item:has(.lui-radio-group-item__input:disabled){opacity:var(--lui-disabled-opacity)}.lui-radio-group-item--error .lui-radio-group-item__control{border-color:var(--lui-error)}.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-bg-surface),0 0 0 4px color-mix(in srgb,var(--lui-error) 40%,transparent)}.lui-radio-group-item--sm{height:var(--lui-radio-size-sm);width:var(--lui-radio-size-sm)}.lui-radio-group-item--sm .lui-radio-group-item__dot{height:calc(var(--lui-radio-size-sm)*var(--lui-radio-dot-scale));width:calc(var(--lui-radio-size-sm)*var(--lui-radio-dot-scale))}.lui-radio-group-item--lg{height:var(--lui-radio-size-lg);width:var(--lui-radio-size-lg)}.lui-radio-group-item--lg .lui-radio-group-item__dot{height:calc(var(--lui-radio-size-lg)*var(--lui-radio-dot-scale));width:calc(var(--lui-radio-size-lg)*var(--lui-radio-dot-scale))}}

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

@@ -1,12 +1 @@
-:root {
-  --lui-radio-size-sm: 0.875rem;
-  --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);
-}
+:root{--lui-radio-size-sm:0.875rem;--lui-radio-size-md:1rem;--lui-radio-size-lg:1.25rem;--lui-radio-dot-scale:0.4;--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.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -31,7 +31,8 @@
   "license": "ISC",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/ivelaval/ladder-ui.git"
+    "url": "https://github.com/ivelaval/ladder-ui.git",
+    "directory": "packages/radio-group"
   },
   "bugs": {
     "url": "https://github.com/ivelaval/ladder-ui/issues"
@@ -48,7 +49,7 @@
     "sass": "^1.90.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "@ladder-ui/core": "0.3.0"
+    "@ladder-ui/core": "0.5.0"
   },
   "peerDependencies": {
     "@ladder-ui/core": ">=0.0.0",
@@ -57,6 +58,10 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "dependencies": {
+    "@ladder-ui/layout": "^0.5.0",
+    "@ladder-ui/primitives": "^0.5.0"
+  },
   "scripts": {
     "build": "pnpm clean && rollup -c",
     "dev": "rollup -c -w",