@aristobyte-ui/radio 1.0.112 → 2.1.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/es/main/components/Radio/Radio.scss +773 -0
- package/dist/es/main/components/Radio/index.js +14 -0
- package/dist/es/main/components/RadioGroup/RadioGroup.scss +15 -0
- package/dist/es/main/components/RadioGroup/index.js +48 -0
- package/dist/es/main/components/index.js +2 -0
- package/dist/es/main/index.js +1 -0
- package/dist/lib/main/components/Radio/Radio.scss +773 -0
- package/dist/lib/main/components/Radio/index.js +51 -0
- package/dist/lib/main/components/RadioGroup/RadioGroup.scss +15 -0
- package/dist/lib/main/components/RadioGroup/index.js +85 -0
- package/dist/lib/main/components/index.js +18 -0
- package/dist/lib/main/index.js +17 -0
- package/package.json +3 -27
- package/dist/index.d.mts +0 -37
- package/dist/index.d.ts +0 -37
- package/dist/index.js +0 -207
- package/dist/index.js.map +0 -1
- package/dist/index.mjs +0 -170
- package/dist/index.mjs.map +0 -1
package/dist/index.mjs
DELETED
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
// ../../node_modules/clsx/dist/clsx.mjs
|
|
4
|
-
function r(e) {
|
|
5
|
-
var t, f, n = "";
|
|
6
|
-
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
7
|
-
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
8
|
-
var o = e.length;
|
|
9
|
-
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
10
|
-
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
11
|
-
return n;
|
|
12
|
-
}
|
|
13
|
-
function clsx() {
|
|
14
|
-
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
15
|
-
return n;
|
|
16
|
-
}
|
|
17
|
-
var clsx_default = clsx;
|
|
18
|
-
|
|
19
|
-
// components/Radio.tsx
|
|
20
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
21
|
-
var Radio = ({
|
|
22
|
-
children,
|
|
23
|
-
value,
|
|
24
|
-
checked,
|
|
25
|
-
name,
|
|
26
|
-
disabled = false,
|
|
27
|
-
highlightLabel = false,
|
|
28
|
-
size = "md",
|
|
29
|
-
variant = "default",
|
|
30
|
-
appearance = "default",
|
|
31
|
-
alignLabel = "right",
|
|
32
|
-
onChange,
|
|
33
|
-
className,
|
|
34
|
-
style
|
|
35
|
-
}) => {
|
|
36
|
-
const handleChange = () => {
|
|
37
|
-
if (!disabled && onChange) {
|
|
38
|
-
onChange(value);
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
const alignClasses = {
|
|
42
|
-
top: "flex-col",
|
|
43
|
-
right: "flex-row",
|
|
44
|
-
bottom: "flex-col",
|
|
45
|
-
left: "flex-row"
|
|
46
|
-
};
|
|
47
|
-
const controlOrder = {
|
|
48
|
-
top: "order-2",
|
|
49
|
-
right: "",
|
|
50
|
-
bottom: "",
|
|
51
|
-
left: "order-2"
|
|
52
|
-
};
|
|
53
|
-
return /* @__PURE__ */ jsxs(
|
|
54
|
-
"label",
|
|
55
|
-
{
|
|
56
|
-
className: clsx_default(
|
|
57
|
-
"flex items-center relative cursor-pointer select-none",
|
|
58
|
-
alignClasses[alignLabel],
|
|
59
|
-
disabled && "cursor-not-allowed opacity-50 pointer-events-none",
|
|
60
|
-
`radio-size--${size}`,
|
|
61
|
-
`radio-variant--${variant}`,
|
|
62
|
-
`radio-appearance--${appearance}`,
|
|
63
|
-
className
|
|
64
|
-
),
|
|
65
|
-
style,
|
|
66
|
-
children: [
|
|
67
|
-
/* @__PURE__ */ jsx(
|
|
68
|
-
"input",
|
|
69
|
-
{
|
|
70
|
-
type: "radio",
|
|
71
|
-
name,
|
|
72
|
-
value,
|
|
73
|
-
checked,
|
|
74
|
-
disabled,
|
|
75
|
-
onChange: handleChange,
|
|
76
|
-
className: "peer sr-only"
|
|
77
|
-
}
|
|
78
|
-
),
|
|
79
|
-
/* @__PURE__ */ jsx(
|
|
80
|
-
"span",
|
|
81
|
-
{
|
|
82
|
-
className: clsx_default(
|
|
83
|
-
"radio__control flex-shrink-0 rounded-full transition-all duration-200",
|
|
84
|
-
controlOrder[alignLabel]
|
|
85
|
-
)
|
|
86
|
-
}
|
|
87
|
-
),
|
|
88
|
-
children && /* @__PURE__ */ jsx(
|
|
89
|
-
"span",
|
|
90
|
-
{
|
|
91
|
-
className: clsx_default(
|
|
92
|
-
"ml-2 select-none",
|
|
93
|
-
highlightLabel && `text-${variant}`
|
|
94
|
-
),
|
|
95
|
-
children
|
|
96
|
-
}
|
|
97
|
-
)
|
|
98
|
-
]
|
|
99
|
-
}
|
|
100
|
-
);
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
// components/RadioGroup.tsx
|
|
104
|
-
import * as React from "react";
|
|
105
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
106
|
-
import { createElement } from "react";
|
|
107
|
-
var RadioGroup = ({
|
|
108
|
-
name,
|
|
109
|
-
value,
|
|
110
|
-
onChange,
|
|
111
|
-
children,
|
|
112
|
-
disabled = false,
|
|
113
|
-
highlightLabel = false,
|
|
114
|
-
size = "md",
|
|
115
|
-
variant = "default",
|
|
116
|
-
appearance = "outline",
|
|
117
|
-
align = "horizontal",
|
|
118
|
-
alignLabel = "right",
|
|
119
|
-
className = "",
|
|
120
|
-
style = {}
|
|
121
|
-
}) => {
|
|
122
|
-
const uniqueId = React.useId();
|
|
123
|
-
const [currentValue, setCurrentValue] = React.useState(value);
|
|
124
|
-
const radios = React.Children.toArray(
|
|
125
|
-
children
|
|
126
|
-
);
|
|
127
|
-
const handleChange = (currentRadioValue) => {
|
|
128
|
-
if (onChange) onChange(currentRadioValue);
|
|
129
|
-
setCurrentValue(currentRadioValue);
|
|
130
|
-
};
|
|
131
|
-
return /* @__PURE__ */ jsx2(
|
|
132
|
-
"div",
|
|
133
|
-
{
|
|
134
|
-
className: clsx_default(
|
|
135
|
-
"radio-group",
|
|
136
|
-
`radio-group--${align}`,
|
|
137
|
-
`radio-group-size--${size}`,
|
|
138
|
-
`radio-group-variant--${variant}`,
|
|
139
|
-
`radio-group-appearance--${appearance}`,
|
|
140
|
-
className
|
|
141
|
-
),
|
|
142
|
-
style,
|
|
143
|
-
children: radios.map(({ props }) => {
|
|
144
|
-
var _a, _b, _c, _d, _e, _f;
|
|
145
|
-
return /* @__PURE__ */ createElement(
|
|
146
|
-
Radio,
|
|
147
|
-
{
|
|
148
|
-
...props,
|
|
149
|
-
key: `${name}-${props.value}-${uniqueId}`,
|
|
150
|
-
name: `${name}-${props.value}-${uniqueId}`,
|
|
151
|
-
checked: props.value === currentValue,
|
|
152
|
-
onChange: () => handleChange(props.value),
|
|
153
|
-
disabled: (_a = props.disabled) != null ? _a : disabled,
|
|
154
|
-
size: (_b = props.size) != null ? _b : size,
|
|
155
|
-
variant: (_c = props.variant) != null ? _c : variant,
|
|
156
|
-
appearance: (_d = props.appearance) != null ? _d : appearance,
|
|
157
|
-
highlightLabel: (_e = props.highlightLabel) != null ? _e : highlightLabel,
|
|
158
|
-
alignLabel: (_f = props.alignLabel) != null ? _f : alignLabel
|
|
159
|
-
}
|
|
160
|
-
);
|
|
161
|
-
})
|
|
162
|
-
},
|
|
163
|
-
uniqueId
|
|
164
|
-
);
|
|
165
|
-
};
|
|
166
|
-
export {
|
|
167
|
-
Radio,
|
|
168
|
-
RadioGroup
|
|
169
|
-
};
|
|
170
|
-
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../node_modules/clsx/dist/clsx.mjs","../components/Radio.tsx","../components/RadioGroup.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import * as React from \"react\";\nimport clsx from \"clsx\";\n\nexport interface IRadio {\n children: React.ReactNode;\n value: string;\n checked?: boolean;\n onChange?: (value: string) => void;\n name?: string;\n disabled?: boolean;\n className?: string;\n highlightLabel?: boolean;\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"default\"\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n alignLabel?: \"top\" | \"right\" | \"bottom\" | \"left\";\n style?: React.CSSProperties;\n}\n\nexport const Radio: React.FC<IRadio> = ({\n children,\n value,\n checked,\n name,\n disabled = false,\n highlightLabel = false,\n size = \"md\",\n variant = \"default\",\n appearance = \"default\",\n alignLabel = \"right\",\n onChange,\n className,\n style,\n}) => {\n const handleChange = () => {\n if (!disabled && onChange) {\n onChange(value);\n }\n };\n\n const alignClasses: Record<string, string> = {\n top: \"flex-col\",\n right: \"flex-row\",\n bottom: \"flex-col\",\n left: \"flex-row\",\n };\n\n const controlOrder: Record<string, string> = {\n top: \"order-2\",\n right: \"\",\n bottom: \"\",\n left: \"order-2\",\n };\n\n return (\n <label\n className={clsx(\n \"flex items-center relative cursor-pointer select-none\",\n alignClasses[alignLabel],\n disabled && \"cursor-not-allowed opacity-50 pointer-events-none\",\n `radio-size--${size}`,\n `radio-variant--${variant}`,\n `radio-appearance--${appearance}`,\n className\n )}\n style={style}\n >\n <input\n type=\"radio\"\n name={name}\n value={value}\n checked={checked}\n disabled={disabled}\n onChange={handleChange}\n className=\"peer sr-only\"\n />\n <span\n className={clsx(\n \"radio__control flex-shrink-0 rounded-full transition-all duration-200\",\n controlOrder[alignLabel]\n )}\n />\n {children && (\n <span\n className={clsx(\n \"ml-2 select-none\",\n highlightLabel && `text-${variant}`\n )}\n >\n {children}\n </span>\n )}\n </label>\n );\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport { Radio, type IRadio } from \"./Radio\";\nimport clsx from \"clsx\";\n\nexport interface IRadioGroup {\n name: string;\n value: string;\n children: React.ReactElement<IRadio> | React.ReactElement<IRadio>[];\n onChange?: (newValue: string) => void;\n disabled?: boolean;\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n align?: \"horizontal\" | \"vertical\";\n alignLabel?: \"top\" | \"right\" | \"bottom\" | \"left\";\n highlightLabel?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const RadioGroup: React.FC<IRadioGroup> = ({\n name,\n value,\n onChange,\n children,\n disabled = false,\n highlightLabel = false,\n size = \"md\",\n variant = \"default\",\n appearance = \"outline\",\n align = \"horizontal\",\n alignLabel = \"right\",\n className = \"\",\n style = {},\n}) => {\n const uniqueId = React.useId();\n const [currentValue, setCurrentValue] = React.useState<string>(value);\n\n const radios = React.Children.toArray(\n children\n ) as React.ReactElement<IRadio>[];\n\n const handleChange = (currentRadioValue: string) => {\n if (onChange) onChange(currentRadioValue);\n setCurrentValue(currentRadioValue);\n };\n\n return (\n <div\n key={uniqueId}\n className={clsx(\n \"radio-group\",\n `radio-group--${align}`,\n `radio-group-size--${size}`,\n `radio-group-variant--${variant}`,\n `radio-group-appearance--${appearance}`,\n className\n )}\n style={style}\n >\n {radios.map(({ props }) => (\n <Radio\n {...props}\n key={`${name}-${props.value}-${uniqueId}`}\n name={`${name}-${props.value}-${uniqueId}`}\n checked={props.value === currentValue}\n onChange={() => handleChange(props.value)}\n disabled={props.disabled ?? disabled}\n size={props.size ?? size}\n variant={props.variant ?? variant}\n appearance={props.appearance ?? appearance}\n highlightLabel={props.highlightLabel ?? highlightLabel}\n alignLabel={props.alignLabel ?? alignLabel}\n />\n ))}\n </div>\n );\n};\n"],"mappings":";;;AAAA,SAAS,EAAE,GAAE;AAAC,MAAI,GAAE,GAAE,IAAE;AAAG,MAAG,YAAU,OAAO,KAAG,YAAU,OAAO,EAAE,MAAG;AAAA,WAAU,YAAU,OAAO,EAAE,KAAG,MAAM,QAAQ,CAAC,GAAE;AAAC,QAAI,IAAE,EAAE;AAAO,SAAI,IAAE,GAAE,IAAE,GAAE,IAAI,GAAE,CAAC,MAAI,IAAE,EAAE,EAAE,CAAC,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAA,EAAE,MAAM,MAAI,KAAK,EAAE,GAAE,CAAC,MAAI,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAQ,SAAS,OAAM;AAAC,WAAQ,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE,IAAI,EAAC,IAAE,UAAU,CAAC,OAAK,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAC,IAAO,eAAQ;;;ACmE3X,SAYE,KAZF;AApCG,IAAM,QAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,MAAM;AACzB,QAAI,CAAC,YAAY,UAAU;AACzB,eAAS,KAAK;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,eAAuC;AAAA,IAC3C,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAEA,QAAM,eAAuC;AAAA,IAC3C,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,aAAa,UAAU;AAAA,QACvB,YAAY;AAAA,QACZ,eAAe,IAAI;AAAA,QACnB,kBAAkB,OAAO;AAAA,QACzB,qBAAqB,UAAU;AAAA,QAC/B;AAAA,MACF;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,WAAU;AAAA;AAAA,QACZ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,aAAa,UAAU;AAAA,YACzB;AAAA;AAAA,QACF;AAAA,QACC,YACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,kBAAkB,QAAQ,OAAO;AAAA,YACnC;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;;;ACxGA,YAAY,WAAW;AA2DnB,gBAAAA,YAAA;AAaI;AAzCD,IAAM,aAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,QAAQ,CAAC;AACX,MAAM;AACJ,QAAM,WAAiB,YAAM;AAC7B,QAAM,CAAC,cAAc,eAAe,IAAU,eAAiB,KAAK;AAEpE,QAAM,SAAe,eAAS;AAAA,IAC5B;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,sBAA8B;AAClD,QAAI,SAAU,UAAS,iBAAiB;AACxC,oBAAgB,iBAAiB;AAAA,EACnC;AAEA,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MAEC,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,KAAK;AAAA,QACrB,qBAAqB,IAAI;AAAA,QACzB,wBAAwB,OAAO;AAAA,QAC/B,2BAA2B,UAAU;AAAA,QACrC;AAAA,MACF;AAAA,MACA;AAAA,MAEC,iBAAO,IAAI,CAAC,EAAE,MAAM,MAAG;AAzE9B;AA0EQ;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,KAAK,GAAG,IAAI,IAAI,MAAM,KAAK,IAAI,QAAQ;AAAA,YACvC,MAAM,GAAG,IAAI,IAAI,MAAM,KAAK,IAAI,QAAQ;AAAA,YACxC,SAAS,MAAM,UAAU;AAAA,YACzB,UAAU,MAAM,aAAa,MAAM,KAAK;AAAA,YACxC,WAAU,WAAM,aAAN,YAAkB;AAAA,YAC5B,OAAM,WAAM,SAAN,YAAc;AAAA,YACpB,UAAS,WAAM,YAAN,YAAiB;AAAA,YAC1B,aAAY,WAAM,eAAN,YAAoB;AAAA,YAChC,iBAAgB,WAAM,mBAAN,YAAwB;AAAA,YACxC,aAAY,WAAM,eAAN,YAAoB;AAAA;AAAA,QAClC;AAAA,OACD;AAAA;AAAA,IAzBI;AAAA,EA0BP;AAEJ;","names":["jsx"]}
|