@ladder-ui/radio-group 0.4.0 → 0.5.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.
Files changed (5) hide show
  1. package/dist/index.js +1 -49
  2. package/dist/index.mjs +1 -46
  3. package/dist/radio-group.css +1 -96
  4. package/dist/radio-group.vars.css +1 -12
  5. package/package.json +6 -5
package/dist/index.js CHANGED
@@ -1,49 +1 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
- var core = require('@ladder-ui/core');
6
- var layout = require('@ladder-ui/layout');
7
- var primitives = require('@ladder-ui/primitives');
8
-
9
- const RadioGroupContext = react.createContext(null);
10
- // ─── Variants ────────────────────────────────────────────────────────────────
11
- const radioGroupItemVariants = core.cva({
12
- base: "lui-radio-group-item",
13
- variants: {
14
- size: {
15
- sm: "lui-radio-group-item--sm",
16
- md: "lui-radio-group-item--md",
17
- lg: "lui-radio-group-item--lg",
18
- },
19
- status: {
20
- default: "",
21
- error: "lui-radio-group-item--error",
22
- },
23
- disabled: {
24
- true: "lui-radio-group-item--disabled",
25
- false: "",
26
- },
27
- },
28
- defaultVariants: {
29
- size: "md",
30
- status: "default",
31
- },
32
- });
33
- const RadioGroup = react.forwardRef(({ children, className, value, defaultValue, onValueChange, name, disabled, orientation = "vertical", ...props }, ref) => {
34
- const radioGroup = primitives.useRadioGroup({ value, defaultValue, onValueChange, name, disabled });
35
- 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 }) }));
36
- });
37
- RadioGroup.displayName = "RadioGroup";
38
- const RadioGroupItem = react.forwardRef(({ className, value, size, status, disabled, ...props }, ref) => {
39
- const ctx = react.use(RadioGroupContext);
40
- if (!ctx)
41
- return null;
42
- const isChecked = ctx.value === value;
43
- const isDisabled = disabled || ctx.disabled;
44
- 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" }) })] }));
45
- });
46
- RadioGroupItem.displayName = "RadioGroupItem";
47
-
48
- exports.RadioGroup = RadioGroup;
49
- exports.RadioGroupItem = RadioGroupItem;
1
+ "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 CHANGED
@@ -1,46 +1 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { createContext, forwardRef, use } from 'react';
3
- import { cva, concatClassNames } from '@ladder-ui/core';
4
- import { Flex, Box } from '@ladder-ui/layout';
5
- import { useRadioGroup } from '@ladder-ui/primitives';
6
-
7
- const RadioGroupContext = createContext(null);
8
- // ─── Variants ────────────────────────────────────────────────────────────────
9
- const radioGroupItemVariants = cva({
10
- base: "lui-radio-group-item",
11
- variants: {
12
- size: {
13
- sm: "lui-radio-group-item--sm",
14
- md: "lui-radio-group-item--md",
15
- lg: "lui-radio-group-item--lg",
16
- },
17
- status: {
18
- default: "",
19
- error: "lui-radio-group-item--error",
20
- },
21
- disabled: {
22
- true: "lui-radio-group-item--disabled",
23
- false: "",
24
- },
25
- },
26
- defaultVariants: {
27
- size: "md",
28
- status: "default",
29
- },
30
- });
31
- const RadioGroup = forwardRef(({ children, className, value, defaultValue, onValueChange, name, disabled, orientation = "vertical", ...props }, ref) => {
32
- const radioGroup = useRadioGroup({ value, defaultValue, onValueChange, name, disabled });
33
- 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 }) }));
34
- });
35
- RadioGroup.displayName = "RadioGroup";
36
- const RadioGroupItem = forwardRef(({ className, value, size, status, disabled, ...props }, ref) => {
37
- const ctx = use(RadioGroupContext);
38
- if (!ctx)
39
- return null;
40
- const isChecked = ctx.value === value;
41
- const isDisabled = disabled || ctx.disabled;
42
- 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" }) })] }));
43
- });
44
- RadioGroupItem.displayName = "RadioGroupItem";
45
-
46
- export { RadioGroup, RadioGroupItem };
1
+ 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 CHANGED
@@ -1,96 +1 @@
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-bg-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-bg-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
- }
1
+ @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.vars.css CHANGED
@@ -1,12 +1 @@
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-bg-surface);
7
- --lui-radio-border: color-mix(in srgb, var(--lui-border-default) 93%, var(--lui-text-primary));
8
- --lui-radio-checked-bg: var(--lui-bg-interactive);
9
- --lui-radio-checked-dot: var(--lui-text-inverse);
10
- --lui-radio-focus-border: var(--lui-bg-interactive);
11
- --lui-radio-focus-ring-color: color-mix(in srgb, var(--lui-bg-interactive) 40%, transparent);
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-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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ladder-ui/radio-group",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -31,7 +31,8 @@
31
31
  "license": "ISC",
32
32
  "repository": {
33
33
  "type": "git",
34
- "url": "git+ssh://git@github.com/ivelaval/ladder-ui.git"
34
+ "url": "https://github.com/ivelaval/ladder-ui.git",
35
+ "directory": "packages/radio-group"
35
36
  },
36
37
  "bugs": {
37
38
  "url": "https://github.com/ivelaval/ladder-ui/issues"
@@ -48,7 +49,7 @@
48
49
  "sass": "^1.90.0",
49
50
  "tslib": "^2.6.2",
50
51
  "typescript": "^5.3.3",
51
- "@ladder-ui/core": "0.4.0"
52
+ "@ladder-ui/core": "0.5.0"
52
53
  },
53
54
  "peerDependencies": {
54
55
  "@ladder-ui/core": ">=0.0.0",
@@ -58,8 +59,8 @@
58
59
  "**/*.css"
59
60
  ],
60
61
  "dependencies": {
61
- "@ladder-ui/layout": "^0.4.0",
62
- "@ladder-ui/primitives": "^0.4.0"
62
+ "@ladder-ui/layout": "^0.5.0",
63
+ "@ladder-ui/primitives": "^0.5.0"
63
64
  },
64
65
  "scripts": {
65
66
  "build": "pnpm clean && rollup -c",