@ladder-ui/radio-group 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -0
- package/dist/index.js +43 -0
- package/dist/index.mjs +40 -0
- package/dist/radio-group.css +96 -0
- package/dist/radio-group.d.ts +33 -0
- package/dist/radio-group.vars.css +12 -0
- package/package.json +68 -0
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var concatClassNames = require('@ladder-ui/core/concatClassNames');
|
|
6
|
+
|
|
7
|
+
const RadioGroupContext = react.createContext({ name: "" });
|
|
8
|
+
function RadioGroup({ ref, className, children, value, defaultValue, onValueChange, name, orientation = "vertical", disabled = false, ...props }) {
|
|
9
|
+
const generatedName = react.useId();
|
|
10
|
+
const resolvedName = name ?? generatedName;
|
|
11
|
+
const classes = concatClassNames("lui-radio-group", orientation === "horizontal" ? "lui-radio-group--horizontal" : undefined, className);
|
|
12
|
+
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 }) }));
|
|
13
|
+
}
|
|
14
|
+
RadioGroup.displayName = "RadioGroup";
|
|
15
|
+
function RadioGroupItem({ ref, className, style, value, size = "md", status = "default", disabled, onChange, ...inputProps }) {
|
|
16
|
+
const ctx = react.use(RadioGroupContext);
|
|
17
|
+
const isDisabled = disabled || ctx.disabled;
|
|
18
|
+
// Controlled: pass checked based on context value
|
|
19
|
+
const controlledProps = ctx.value !== undefined
|
|
20
|
+
? {
|
|
21
|
+
checked: ctx.value === value,
|
|
22
|
+
onChange: (e) => {
|
|
23
|
+
if (e.target.checked)
|
|
24
|
+
ctx.onValueChange?.(value);
|
|
25
|
+
onChange?.(e);
|
|
26
|
+
},
|
|
27
|
+
}
|
|
28
|
+
: {
|
|
29
|
+
// Uncontrolled: use defaultChecked + native browser behaviour
|
|
30
|
+
defaultChecked: ctx.defaultValue === value,
|
|
31
|
+
onChange: (e) => {
|
|
32
|
+
if (e.target.checked)
|
|
33
|
+
ctx.onValueChange?.(value);
|
|
34
|
+
onChange?.(e);
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
const wrapperClasses = concatClassNames("lui-radio-group-item", `lui-radio-group-item--${size}`, status === "error" ? "lui-radio-group-item--error" : undefined, className);
|
|
38
|
+
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" }) })] }));
|
|
39
|
+
}
|
|
40
|
+
RadioGroupItem.displayName = "RadioGroupItem";
|
|
41
|
+
|
|
42
|
+
exports.RadioGroup = RadioGroup;
|
|
43
|
+
exports.RadioGroupItem = RadioGroupItem;
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { createContext, useId, use } from 'react';
|
|
3
|
+
import concatClassNames from '@ladder-ui/core/concatClassNames';
|
|
4
|
+
|
|
5
|
+
const RadioGroupContext = createContext({ name: "" });
|
|
6
|
+
function RadioGroup({ ref, className, children, value, defaultValue, onValueChange, name, orientation = "vertical", disabled = false, ...props }) {
|
|
7
|
+
const generatedName = useId();
|
|
8
|
+
const resolvedName = name ?? generatedName;
|
|
9
|
+
const classes = concatClassNames("lui-radio-group", orientation === "horizontal" ? "lui-radio-group--horizontal" : undefined, className);
|
|
10
|
+
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 }) }));
|
|
11
|
+
}
|
|
12
|
+
RadioGroup.displayName = "RadioGroup";
|
|
13
|
+
function RadioGroupItem({ ref, className, style, value, size = "md", status = "default", disabled, onChange, ...inputProps }) {
|
|
14
|
+
const ctx = use(RadioGroupContext);
|
|
15
|
+
const isDisabled = disabled || ctx.disabled;
|
|
16
|
+
// Controlled: pass checked based on context value
|
|
17
|
+
const controlledProps = ctx.value !== undefined
|
|
18
|
+
? {
|
|
19
|
+
checked: ctx.value === value,
|
|
20
|
+
onChange: (e) => {
|
|
21
|
+
if (e.target.checked)
|
|
22
|
+
ctx.onValueChange?.(value);
|
|
23
|
+
onChange?.(e);
|
|
24
|
+
},
|
|
25
|
+
}
|
|
26
|
+
: {
|
|
27
|
+
// Uncontrolled: use defaultChecked + native browser behaviour
|
|
28
|
+
defaultChecked: ctx.defaultValue === value,
|
|
29
|
+
onChange: (e) => {
|
|
30
|
+
if (e.target.checked)
|
|
31
|
+
ctx.onValueChange?.(value);
|
|
32
|
+
onChange?.(e);
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
const wrapperClasses = concatClassNames("lui-radio-group-item", `lui-radio-group-item--${size}`, status === "error" ? "lui-radio-group-item--error" : undefined, className);
|
|
36
|
+
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" }) })] }));
|
|
37
|
+
}
|
|
38
|
+
RadioGroupItem.displayName = "RadioGroupItem";
|
|
39
|
+
|
|
40
|
+
export { RadioGroup, RadioGroupItem };
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.lui-radio-group {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
gap: 0.625rem;
|
|
6
|
+
}
|
|
7
|
+
.lui-radio-group--horizontal {
|
|
8
|
+
flex-direction: row;
|
|
9
|
+
flex-wrap: wrap;
|
|
10
|
+
align-items: center;
|
|
11
|
+
}
|
|
12
|
+
.lui-radio-group-item {
|
|
13
|
+
position: relative;
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
flex-shrink: 0;
|
|
18
|
+
vertical-align: middle;
|
|
19
|
+
width: var(--lui-radio-size-md);
|
|
20
|
+
height: var(--lui-radio-size-md);
|
|
21
|
+
}
|
|
22
|
+
.lui-radio-group-item__input {
|
|
23
|
+
position: absolute;
|
|
24
|
+
inset: 0;
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 100%;
|
|
27
|
+
margin: 0;
|
|
28
|
+
padding: 0;
|
|
29
|
+
opacity: 0;
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
z-index: 1;
|
|
32
|
+
border-radius: 50%;
|
|
33
|
+
}
|
|
34
|
+
.lui-radio-group-item__input:disabled {
|
|
35
|
+
cursor: not-allowed;
|
|
36
|
+
}
|
|
37
|
+
.lui-radio-group-item__control {
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
width: 100%;
|
|
42
|
+
height: 100%;
|
|
43
|
+
background-color: var(--lui-radio-bg);
|
|
44
|
+
border: 1px solid var(--lui-radio-border);
|
|
45
|
+
border-radius: 50%;
|
|
46
|
+
transition: var(--lui-transition);
|
|
47
|
+
pointer-events: none;
|
|
48
|
+
flex-shrink: 0;
|
|
49
|
+
}
|
|
50
|
+
.lui-radio-group-item__dot {
|
|
51
|
+
display: none;
|
|
52
|
+
width: calc(var(--lui-radio-size-md) * var(--lui-radio-dot-scale));
|
|
53
|
+
height: calc(var(--lui-radio-size-md) * var(--lui-radio-dot-scale));
|
|
54
|
+
border-radius: 50%;
|
|
55
|
+
background-color: var(--lui-radio-checked-dot);
|
|
56
|
+
flex-shrink: 0;
|
|
57
|
+
}
|
|
58
|
+
.lui-radio-group-item:has(.lui-radio-group-item__input:focus-visible) .lui-radio-group-item__control {
|
|
59
|
+
outline: none;
|
|
60
|
+
border-color: var(--lui-radio-focus-border);
|
|
61
|
+
box-shadow: 0 0 0 2px var(--lui-surface), 0 0 0 4px var(--lui-radio-focus-ring-color);
|
|
62
|
+
}
|
|
63
|
+
.lui-radio-group-item:has(.lui-radio-group-item__input:checked) .lui-radio-group-item__control {
|
|
64
|
+
background-color: var(--lui-radio-checked-bg);
|
|
65
|
+
border-color: var(--lui-radio-checked-bg);
|
|
66
|
+
}
|
|
67
|
+
.lui-radio-group-item:has(.lui-radio-group-item__input:checked) .lui-radio-group-item__dot {
|
|
68
|
+
display: block;
|
|
69
|
+
}
|
|
70
|
+
.lui-radio-group-item:has(.lui-radio-group-item__input:disabled) {
|
|
71
|
+
opacity: var(--lui-disabled-opacity);
|
|
72
|
+
}
|
|
73
|
+
.lui-radio-group-item--error .lui-radio-group-item__control {
|
|
74
|
+
border-color: var(--lui-error);
|
|
75
|
+
}
|
|
76
|
+
.lui-radio-group-item--error:has(.lui-radio-group-item__input:focus-visible) .lui-radio-group-item__control {
|
|
77
|
+
border-color: var(--lui-error);
|
|
78
|
+
box-shadow: 0 0 0 2px var(--lui-surface), 0 0 0 4px color-mix(in srgb, var(--lui-error) 40%, transparent);
|
|
79
|
+
}
|
|
80
|
+
.lui-radio-group-item--sm {
|
|
81
|
+
width: var(--lui-radio-size-sm);
|
|
82
|
+
height: var(--lui-radio-size-sm);
|
|
83
|
+
}
|
|
84
|
+
.lui-radio-group-item--sm .lui-radio-group-item__dot {
|
|
85
|
+
width: calc(var(--lui-radio-size-sm) * var(--lui-radio-dot-scale));
|
|
86
|
+
height: calc(var(--lui-radio-size-sm) * var(--lui-radio-dot-scale));
|
|
87
|
+
}
|
|
88
|
+
.lui-radio-group-item--lg {
|
|
89
|
+
width: var(--lui-radio-size-lg);
|
|
90
|
+
height: var(--lui-radio-size-lg);
|
|
91
|
+
}
|
|
92
|
+
.lui-radio-group-item--lg .lui-radio-group-item__dot {
|
|
93
|
+
width: calc(var(--lui-radio-size-lg) * var(--lui-radio-dot-scale));
|
|
94
|
+
height: calc(var(--lui-radio-size-lg) * var(--lui-radio-dot-scale));
|
|
95
|
+
}
|
|
96
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { Ref } from "react";
|
|
2
|
+
export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
ref?: Ref<HTMLDivElement>;
|
|
4
|
+
/** Controlled selected value. Pair with `onValueChange`. */
|
|
5
|
+
value?: string;
|
|
6
|
+
/** Uncontrolled initial selected value. */
|
|
7
|
+
defaultValue?: string;
|
|
8
|
+
/** Called when the user selects a different item. */
|
|
9
|
+
onValueChange?: (value: string) => void;
|
|
10
|
+
/** HTML `name` attribute shared by all radio inputs in the group. Auto-generated if omitted. */
|
|
11
|
+
name?: string;
|
|
12
|
+
/** Layout direction of the items. */
|
|
13
|
+
orientation?: "vertical" | "horizontal";
|
|
14
|
+
/** Disables all radio items in the group. */
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export declare function RadioGroup({ ref, className, children, value, defaultValue, onValueChange, name, orientation, disabled, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare namespace RadioGroup {
|
|
19
|
+
var displayName: string;
|
|
20
|
+
}
|
|
21
|
+
export interface RadioGroupItemProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value"> {
|
|
22
|
+
ref?: Ref<HTMLInputElement>;
|
|
23
|
+
/** The value this item represents. Required. */
|
|
24
|
+
value: string;
|
|
25
|
+
/** Size of the radio control. */
|
|
26
|
+
size?: "sm" | "md" | "lg";
|
|
27
|
+
/** Visual validation state. `"error"` adds a red border and sets `aria-invalid="true"`. */
|
|
28
|
+
status?: "default" | "error";
|
|
29
|
+
}
|
|
30
|
+
export declare function RadioGroupItem({ ref, className, style, value, size, status, disabled, onChange, ...inputProps }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export declare namespace RadioGroupItem {
|
|
32
|
+
var displayName: string;
|
|
33
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--lui-radio-size-sm: 0.875rem;
|
|
3
|
+
--lui-radio-size-md: 1rem;
|
|
4
|
+
--lui-radio-size-lg: 1.25rem;
|
|
5
|
+
--lui-radio-dot-scale: 0.4;
|
|
6
|
+
--lui-radio-bg: var(--lui-surface);
|
|
7
|
+
--lui-radio-border: var(--lui-surface-border);
|
|
8
|
+
--lui-radio-checked-bg: var(--lui-primary);
|
|
9
|
+
--lui-radio-checked-dot: var(--lui-primary-text);
|
|
10
|
+
--lui-radio-focus-border: var(--lui-primary);
|
|
11
|
+
--lui-radio-focus-ring-color: color-mix(in srgb, var(--lui-primary) 40%, transparent);
|
|
12
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@ladder-ui/radio-group",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"require": "./dist/index.js",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"types": "./dist/index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"./*.css": "./dist/*.css",
|
|
15
|
+
"./styles/*.css": "./dist/*.css"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"keywords": [
|
|
21
|
+
"nodejs",
|
|
22
|
+
"react",
|
|
23
|
+
"ui",
|
|
24
|
+
"components",
|
|
25
|
+
"library",
|
|
26
|
+
"radio",
|
|
27
|
+
"radio-group",
|
|
28
|
+
"form"
|
|
29
|
+
],
|
|
30
|
+
"author": "Ivan Avila <ivelaval@gmail.com> - https://www.vennet.dev",
|
|
31
|
+
"license": "ISC",
|
|
32
|
+
"repository": {
|
|
33
|
+
"type": "git",
|
|
34
|
+
"url": "git+ssh://git@github.com/ivelaval/ladder-ui.git"
|
|
35
|
+
},
|
|
36
|
+
"bugs": {
|
|
37
|
+
"url": "https://github.com/ivelaval/ladder-ui/issues"
|
|
38
|
+
},
|
|
39
|
+
"homepage": "https://github.com/ivelaval/ladder-ui#readme",
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
42
|
+
},
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@rollup/plugin-typescript": "^11.1.6",
|
|
45
|
+
"@types/react": "^19.0.0",
|
|
46
|
+
"rollup": "^4.59.0",
|
|
47
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
48
|
+
"sass": "^1.90.0",
|
|
49
|
+
"tslib": "^2.6.2",
|
|
50
|
+
"typescript": "^5.3.3",
|
|
51
|
+
"@ladder-ui/core": "0.2.0"
|
|
52
|
+
},
|
|
53
|
+
"peerDependencies": {
|
|
54
|
+
"@ladder-ui/core": ">=0.0.0",
|
|
55
|
+
"react": ">=18.0.0"
|
|
56
|
+
},
|
|
57
|
+
"sideEffects": [
|
|
58
|
+
"**/*.css"
|
|
59
|
+
],
|
|
60
|
+
"scripts": {
|
|
61
|
+
"build": "pnpm clean && rollup -c",
|
|
62
|
+
"dev": "rollup -c -w",
|
|
63
|
+
"test": "vitest run",
|
|
64
|
+
"test:watch": "vitest",
|
|
65
|
+
"type-check": "tsc --noEmit",
|
|
66
|
+
"clean": "rm -rf dist"
|
|
67
|
+
}
|
|
68
|
+
}
|