@sector.siit/mlz-components 1.0.27 → 1.0.29
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 +38 -38
- package/dist/index.esm.js +107 -165
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +106 -164
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
export { Toaster, toast } from 'react-hot-toast';
|
|
1
2
|
import React$1 from 'react';
|
|
2
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
-
export { Toaster, toast } from 'react-hot-toast';
|
|
4
4
|
|
|
5
5
|
interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
6
|
/**
|
|
@@ -39,6 +39,43 @@ interface HelperTextProp$1 extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
|
39
39
|
}
|
|
40
40
|
declare const Input: React.FC<InputProps>;
|
|
41
41
|
|
|
42
|
+
interface RadioButtonOption {
|
|
43
|
+
label: string;
|
|
44
|
+
value: string;
|
|
45
|
+
disabled?: boolean;
|
|
46
|
+
}
|
|
47
|
+
interface RadioButtonProps {
|
|
48
|
+
name: string;
|
|
49
|
+
value: string;
|
|
50
|
+
label: string;
|
|
51
|
+
checked: boolean;
|
|
52
|
+
onChange: (value: string) => void;
|
|
53
|
+
className?: string;
|
|
54
|
+
labelSize?: "sm" | "base" | "lg" | "xl";
|
|
55
|
+
labelWeight?: "normal" | "medium" | "bold";
|
|
56
|
+
disabled?: boolean;
|
|
57
|
+
}
|
|
58
|
+
declare const RadioButton: React.FC<RadioButtonProps>;
|
|
59
|
+
interface RadioButtonGroupProps {
|
|
60
|
+
name: string;
|
|
61
|
+
label?: string;
|
|
62
|
+
options: RadioButtonOption[];
|
|
63
|
+
value?: string;
|
|
64
|
+
onChange?: (value: string) => void;
|
|
65
|
+
hasError?: boolean;
|
|
66
|
+
errorText?: string;
|
|
67
|
+
helperText?: string;
|
|
68
|
+
className?: string;
|
|
69
|
+
direction?: "row" | "col";
|
|
70
|
+
labelSize?: "sm" | "base" | "lg" | "xl";
|
|
71
|
+
labelWeight?: "normal" | "medium" | "bold";
|
|
72
|
+
radioLabelWeight?: "normal" | "medium" | "bold";
|
|
73
|
+
containerProps?: React.HTMLAttributes<HTMLDivElement>;
|
|
74
|
+
labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
|
|
75
|
+
helperTextProps?: React.HTMLAttributes<HTMLParagraphElement>;
|
|
76
|
+
}
|
|
77
|
+
declare const RadioButtonGroup: React.FC<RadioButtonGroupProps>;
|
|
78
|
+
|
|
42
79
|
interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
43
80
|
errorText?: string;
|
|
44
81
|
hasError?: boolean;
|
|
@@ -106,41 +143,4 @@ interface UserCardProps {
|
|
|
106
143
|
}
|
|
107
144
|
declare function UserCard({ name, email, changeUser, editUser }: UserCardProps): react_jsx_runtime.JSX.Element;
|
|
108
145
|
|
|
109
|
-
interface RadioButtonOption {
|
|
110
|
-
label: string;
|
|
111
|
-
value: string;
|
|
112
|
-
disabled?: boolean;
|
|
113
|
-
}
|
|
114
|
-
interface RadioButtonProps {
|
|
115
|
-
name: string;
|
|
116
|
-
value: string;
|
|
117
|
-
label: string;
|
|
118
|
-
checked: boolean;
|
|
119
|
-
onChange: (value: string) => void;
|
|
120
|
-
className?: string;
|
|
121
|
-
labelSize?: "sm" | "base" | "lg" | "xl";
|
|
122
|
-
labelWeight?: "normal" | "medium" | "bold";
|
|
123
|
-
disabled?: boolean;
|
|
124
|
-
}
|
|
125
|
-
declare const RadioButton: React.FC<RadioButtonProps>;
|
|
126
|
-
interface RadioButtonGroupProps {
|
|
127
|
-
name: string;
|
|
128
|
-
label?: string;
|
|
129
|
-
options: RadioButtonOption[];
|
|
130
|
-
value?: string;
|
|
131
|
-
onChange?: (value: string) => void;
|
|
132
|
-
hasError?: boolean;
|
|
133
|
-
errorText?: string;
|
|
134
|
-
helperText?: string;
|
|
135
|
-
className?: string;
|
|
136
|
-
direction?: "row" | "col";
|
|
137
|
-
labelSize?: "sm" | "base" | "lg" | "xl";
|
|
138
|
-
labelWeight?: "normal" | "medium" | "bold";
|
|
139
|
-
radioLabelWeight?: "normal" | "medium" | "bold";
|
|
140
|
-
containerProps?: React.HTMLAttributes<HTMLDivElement>;
|
|
141
|
-
labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
|
|
142
|
-
helperTextProps?: React.HTMLAttributes<HTMLParagraphElement>;
|
|
143
|
-
}
|
|
144
|
-
declare const RadioButtonGroup: React.FC<RadioButtonGroupProps>;
|
|
145
|
-
|
|
146
146
|
export { Button, type ButtonProps, Input, type InputProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonOption, type RadioButtonProps, TextArea, type TextAreaProps, Toast, type ToastOptions, type ToastProps, ToastProvider, type ToastVariant$1 as ToastVariant, UserCard, type UserCardProps, showToast, toastError, toastInfo, toastSuccess, toastWarning, useToast };
|
package/dist/index.esm.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
-
import { createContext, useContext, useState, useCallback } from 'react';
|
|
5
3
|
import toast from 'react-hot-toast';
|
|
6
4
|
export { Toaster, toast } from 'react-hot-toast';
|
|
5
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
6
|
+
import { createContext, useContext, useState, useCallback } from 'react';
|
|
7
7
|
|
|
8
8
|
const buttonVariants = {
|
|
9
9
|
primary: 'mlz-btn-primary',
|
|
@@ -61,6 +61,69 @@ const Input = ({ labelProps, helperTextProps, containerProps, errorText, helperT
|
|
|
61
61
|
return (jsxs("div", { ...containerProps, className: classes.containerStyle, children: [jsx("label", { ...labelProps, className: classes.labelStyle, children: label }), jsx("input", { ...inputProps, disabled: disabled, placeholder: placeholder, autoComplete: autoComplete, className: finalClassName }), checkedIcon && (jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2", children: jsx(CheckIcon, {}) })), jsx("p", { ...helperTextProps, className: classes.helperTextStyle, children: errorText ? errorText : helperText })] }));
|
|
62
62
|
};
|
|
63
63
|
|
|
64
|
+
const radioButtonClasses = (hasError) => {
|
|
65
|
+
return {
|
|
66
|
+
containerStyle: "flex items-center",
|
|
67
|
+
inputStyle: [
|
|
68
|
+
"w-6 h-6",
|
|
69
|
+
"text-primary-600",
|
|
70
|
+
"bg-gray-100",
|
|
71
|
+
"border-gray-300",
|
|
72
|
+
"focus:ring-0",
|
|
73
|
+
"focus:outline-none",
|
|
74
|
+
"flex-none",
|
|
75
|
+
"order-0",
|
|
76
|
+
"flex-grow-0",
|
|
77
|
+
"checked:bg-primary-600",
|
|
78
|
+
"checked:border-primary-600",
|
|
79
|
+
"rounded-full",
|
|
80
|
+
"cursor-pointer",
|
|
81
|
+
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
82
|
+
].join(" "),
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
const RadioButton = ({ name, value, label, checked, onChange, className = "", labelSize = "base", labelWeight = "medium", disabled = false, }) => {
|
|
86
|
+
const classes = radioButtonClasses();
|
|
87
|
+
const sizeClasses = {
|
|
88
|
+
sm: "text-sm",
|
|
89
|
+
base: "text-base",
|
|
90
|
+
lg: "text-lg",
|
|
91
|
+
xl: "text-xl",
|
|
92
|
+
};
|
|
93
|
+
const weightClasses = {
|
|
94
|
+
normal: "font-normal",
|
|
95
|
+
medium: "font-medium",
|
|
96
|
+
bold: "font-bold",
|
|
97
|
+
};
|
|
98
|
+
return (jsxs("div", { className: `${classes.containerStyle} ${className}`, children: [jsx("input", { type: "radio", id: `${name}-${value}`, name: name, value: value, checked: checked, onChange: () => onChange(value), disabled: disabled, className: classes.inputStyle, style: {
|
|
99
|
+
accentColor: "#236999",
|
|
100
|
+
} }), jsx("label", { htmlFor: `${name}-${value}`, className: `ml-2 h-5 ${sizeClasses[labelSize]} ${weightClasses[labelWeight]} leading-5 flex items-center cursor-pointer whitespace-nowrap text-primary-600 ${disabled ? "opacity-50 cursor-not-allowed" : ""}`, children: label })] }));
|
|
101
|
+
};
|
|
102
|
+
const radioButtonGroupClasses = (hasError) => {
|
|
103
|
+
const labelColorClass = hasError ? "mlz-error-color" : "text-primary-600";
|
|
104
|
+
const textColorClass = hasError ? "mlz-error-color" : "text-primary-600";
|
|
105
|
+
return {
|
|
106
|
+
containerStyle: "flex flex-col gap-2",
|
|
107
|
+
labelStyle: `mlz-label-textarea block ${labelColorClass}`,
|
|
108
|
+
helperTextStyle: `mt-1 text-base ${textColorClass}`,
|
|
109
|
+
};
|
|
110
|
+
};
|
|
111
|
+
const RadioButtonGroup = ({ name, label, options, value, onChange, hasError = false, errorText, helperText, className = "", direction = "row", labelSize = "base", labelWeight = "medium", radioLabelWeight = "bold", containerProps, labelProps, helperTextProps, }) => {
|
|
112
|
+
const classes = radioButtonGroupClasses(hasError);
|
|
113
|
+
const sizeClasses = {
|
|
114
|
+
sm: "text-sm",
|
|
115
|
+
base: "text-base",
|
|
116
|
+
lg: "text-lg",
|
|
117
|
+
xl: "text-xl",
|
|
118
|
+
};
|
|
119
|
+
const weightClasses = {
|
|
120
|
+
normal: "font-normal",
|
|
121
|
+
medium: "font-medium",
|
|
122
|
+
bold: "font-bold",
|
|
123
|
+
};
|
|
124
|
+
return (jsxs("div", { ...containerProps, className: `${classes.containerStyle} ${className}`, children: [label && (jsx("label", { ...labelProps, className: `${classes.labelStyle} ${sizeClasses[labelSize]} ${weightClasses[labelWeight]}`, children: label })), jsx("div", { className: `flex gap-4 ${direction === "col" ? "flex-col" : "flex-row"}`, children: options.map((option) => (jsx(RadioButton, { name: name, value: option.value, label: option.label, checked: value === option.value, onChange: (val) => onChange?.(val), labelSize: labelSize, labelWeight: radioLabelWeight, disabled: option.disabled }, option.value))) }), (errorText || helperText) && (jsx("p", { ...helperTextProps, className: classes.helperTextStyle, children: errorText ? errorText : helperText }))] }));
|
|
125
|
+
};
|
|
126
|
+
|
|
64
127
|
const textAreaClasses = (hasError, fullWidth) => {
|
|
65
128
|
const labelColorClass = hasError ? "mlz-error-color" : "text-primary-600";
|
|
66
129
|
const borderClass = hasError ? "mlz-error-border" : "border-primary-400";
|
|
@@ -107,35 +170,35 @@ const WarningTriangleIcon = (props) => (jsx("svg", { width: "22", height: "19",
|
|
|
107
170
|
const toastClasses$1 = (variant) => {
|
|
108
171
|
const variants = {
|
|
109
172
|
success: {
|
|
110
|
-
bg: "bg
|
|
111
|
-
border: "
|
|
112
|
-
icon: "
|
|
113
|
-
text: "
|
|
114
|
-
iconBg: "bg
|
|
173
|
+
bg: "mlz-toast-success-bg",
|
|
174
|
+
border: "mlz-toast-success-border",
|
|
175
|
+
icon: "mlz-toast-success-text",
|
|
176
|
+
text: "mlz-toast-success-text",
|
|
177
|
+
iconBg: "mlz-toast-success-icon-bg",
|
|
115
178
|
iconComponent: CheckCircleIcon,
|
|
116
179
|
},
|
|
117
180
|
info: {
|
|
118
|
-
bg: "
|
|
119
|
-
border: "border
|
|
120
|
-
icon: "text
|
|
121
|
-
text: "text
|
|
122
|
-
iconBg: "
|
|
181
|
+
bg: "mlz-toast-info-bg",
|
|
182
|
+
border: "mlz-toast-info-border",
|
|
183
|
+
icon: "mlz-toast-info-text",
|
|
184
|
+
text: "mlz-toast-info-text",
|
|
185
|
+
iconBg: "mlz-toast-info-icon-bg",
|
|
123
186
|
iconComponent: InfoCircleIcon,
|
|
124
187
|
},
|
|
125
188
|
warning: {
|
|
126
|
-
bg: "
|
|
127
|
-
border: "border
|
|
128
|
-
icon: "text
|
|
129
|
-
text: "text
|
|
130
|
-
iconBg: "
|
|
189
|
+
bg: "mlz-toast-warning-bg",
|
|
190
|
+
border: "mlz-toast-warning-border",
|
|
191
|
+
icon: "mlz-toast-warning-text",
|
|
192
|
+
text: "mlz-toast-warning-text",
|
|
193
|
+
iconBg: "mlz-toast-warning-icon-bg",
|
|
131
194
|
iconComponent: WarningTriangleIcon,
|
|
132
195
|
},
|
|
133
196
|
error: {
|
|
134
|
-
bg: "
|
|
135
|
-
border: "border
|
|
136
|
-
icon: "text
|
|
137
|
-
text: "text
|
|
138
|
-
iconBg: "
|
|
197
|
+
bg: "mlz-toast-error-bg",
|
|
198
|
+
border: "mlz-toast-error-border",
|
|
199
|
+
icon: "mlz-toast-error-text",
|
|
200
|
+
text: "mlz-toast-error-text",
|
|
201
|
+
iconBg: "mlz-toast-error-icon-bg",
|
|
139
202
|
iconComponent: ErrorCircleIcon,
|
|
140
203
|
},
|
|
141
204
|
};
|
|
@@ -144,36 +207,7 @@ const toastClasses$1 = (variant) => {
|
|
|
144
207
|
const Toast = ({ title, description, variant = "info", onClose, }) => {
|
|
145
208
|
const classes = toastClasses$1(variant);
|
|
146
209
|
const IconComponent = classes.iconComponent;
|
|
147
|
-
return (jsxs("div", { className: [
|
|
148
|
-
"flex items-start",
|
|
149
|
-
"w-[400px] min-h-[88px]",
|
|
150
|
-
"rounded-lg",
|
|
151
|
-
"border border-solid",
|
|
152
|
-
"p-4",
|
|
153
|
-
"gap-4",
|
|
154
|
-
"shadow-[0px_3px_6px_0px_rgba(0,0,0,0.16)]",
|
|
155
|
-
classes.bg,
|
|
156
|
-
classes.border,
|
|
157
|
-
].join(" "), children: [jsx("div", { className: [
|
|
158
|
-
"flex items-center justify-center",
|
|
159
|
-
"w-10 h-10",
|
|
160
|
-
"rounded-lg",
|
|
161
|
-
"p-2",
|
|
162
|
-
"flex-none",
|
|
163
|
-
classes.iconBg,
|
|
164
|
-
].join(" "), children: jsx("div", { className: classes.icon, children: jsx(IconComponent, {}) }) }), jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [jsx("div", { className: [
|
|
165
|
-
"font-bold",
|
|
166
|
-
"text-[20px]",
|
|
167
|
-
"leading-[100%]",
|
|
168
|
-
"tracking-normal",
|
|
169
|
-
classes.text,
|
|
170
|
-
].join(" "), children: title }), description && (jsx("div", { className: [
|
|
171
|
-
"font-normal",
|
|
172
|
-
"text-[18px]",
|
|
173
|
-
"leading-[100%]",
|
|
174
|
-
"tracking-normal",
|
|
175
|
-
classes.text,
|
|
176
|
-
].join(" "), children: description }))] }), onClose && (jsx("button", { type: "button", onClick: onClose, className: "text-gray-400 hover:text-gray-600", "aria-label": "Cerrar", children: "\u00D7" }))] }));
|
|
210
|
+
return (jsxs("div", { className: `mlz-toast-container ${classes.bg} ${classes.border}`, children: [jsx("div", { className: `mlz-toast-icon-container ${classes.iconBg}`, children: jsx("div", { className: classes.icon, children: jsx(IconComponent, {}) }) }), jsxs("div", { className: "mlz-toast-content", children: [jsx("div", { className: `mlz-toast-title ${classes.text}`, children: title }), description && (jsx("div", { className: `mlz-toast-description ${classes.text}`, children: description }))] }), onClose && (jsx("button", { type: "button", onClick: onClose, className: "mlz-toast-close", "aria-label": "Cerrar", children: "\u00D7" }))] }));
|
|
177
211
|
};
|
|
178
212
|
|
|
179
213
|
const ToastContext = createContext(undefined);
|
|
@@ -221,35 +255,35 @@ const ToastProvider = ({ children, position = "top-right", }) => {
|
|
|
221
255
|
const toastClasses = (variant) => {
|
|
222
256
|
const variants = {
|
|
223
257
|
success: {
|
|
224
|
-
bg: "bg
|
|
225
|
-
border: "
|
|
226
|
-
icon: "
|
|
227
|
-
text: "
|
|
228
|
-
iconBg: "bg
|
|
258
|
+
bg: "mlz-toast-success-bg",
|
|
259
|
+
border: "mlz-toast-success-border",
|
|
260
|
+
icon: "mlz-toast-success-text",
|
|
261
|
+
text: "mlz-toast-success-text",
|
|
262
|
+
iconBg: "mlz-toast-success-icon-bg",
|
|
229
263
|
iconComponent: CheckCircleIcon,
|
|
230
264
|
},
|
|
231
265
|
info: {
|
|
232
|
-
bg: "
|
|
233
|
-
border: "border
|
|
234
|
-
icon: "text
|
|
235
|
-
text: "text
|
|
236
|
-
iconBg: "
|
|
266
|
+
bg: "mlz-toast-info-bg",
|
|
267
|
+
border: "mlz-toast-info-border",
|
|
268
|
+
icon: "mlz-toast-info-text",
|
|
269
|
+
text: "mlz-toast-info-text",
|
|
270
|
+
iconBg: "mlz-toast-info-icon-bg",
|
|
237
271
|
iconComponent: InfoCircleIcon,
|
|
238
272
|
},
|
|
239
273
|
warning: {
|
|
240
|
-
bg: "
|
|
241
|
-
border: "border
|
|
242
|
-
icon: "text
|
|
243
|
-
text: "text
|
|
244
|
-
iconBg: "
|
|
274
|
+
bg: "mlz-toast-warning-bg",
|
|
275
|
+
border: "mlz-toast-warning-border",
|
|
276
|
+
icon: "mlz-toast-warning-text",
|
|
277
|
+
text: "mlz-toast-warning-text",
|
|
278
|
+
iconBg: "mlz-toast-warning-icon-bg",
|
|
245
279
|
iconComponent: WarningTriangleIcon,
|
|
246
280
|
},
|
|
247
281
|
error: {
|
|
248
|
-
bg: "
|
|
249
|
-
border: "border
|
|
250
|
-
icon: "text
|
|
251
|
-
text: "text
|
|
252
|
-
iconBg: "
|
|
282
|
+
bg: "mlz-toast-error-bg",
|
|
283
|
+
border: "mlz-toast-error-border",
|
|
284
|
+
icon: "mlz-toast-error-text",
|
|
285
|
+
text: "mlz-toast-error-text",
|
|
286
|
+
iconBg: "mlz-toast-error-icon-bg",
|
|
253
287
|
iconComponent: ErrorCircleIcon,
|
|
254
288
|
},
|
|
255
289
|
};
|
|
@@ -258,36 +292,7 @@ const toastClasses = (variant) => {
|
|
|
258
292
|
const CustomToast = ({ t, title, description, variant = "info" }) => {
|
|
259
293
|
const classes = toastClasses(variant);
|
|
260
294
|
const IconComponent = classes.iconComponent;
|
|
261
|
-
return (jsxs("div", { className: [
|
|
262
|
-
"flex items-start",
|
|
263
|
-
"w-[400px] min-h-[88px]",
|
|
264
|
-
"rounded-lg",
|
|
265
|
-
"border border-solid",
|
|
266
|
-
"p-4",
|
|
267
|
-
"gap-4",
|
|
268
|
-
"shadow-[0px_3px_6px_0px_rgba(0,0,0,0.16)]",
|
|
269
|
-
classes.bg,
|
|
270
|
-
classes.border,
|
|
271
|
-
].join(" "), children: [jsx("div", { className: [
|
|
272
|
-
"flex items-center justify-center",
|
|
273
|
-
"w-10 h-10",
|
|
274
|
-
"rounded-lg",
|
|
275
|
-
"p-2",
|
|
276
|
-
"flex-none",
|
|
277
|
-
classes.iconBg,
|
|
278
|
-
].join(" "), children: jsx("div", { className: classes.icon, children: jsx(IconComponent, {}) }) }), jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [jsx("div", { className: [
|
|
279
|
-
"font-bold",
|
|
280
|
-
"text-[20px]",
|
|
281
|
-
"leading-[100%]",
|
|
282
|
-
"tracking-normal",
|
|
283
|
-
classes.text,
|
|
284
|
-
].join(" "), children: title }), description && (jsx("div", { className: [
|
|
285
|
-
"font-normal",
|
|
286
|
-
"text-[18px]",
|
|
287
|
-
"leading-[100%]",
|
|
288
|
-
"tracking-normal",
|
|
289
|
-
classes.text,
|
|
290
|
-
].join(" "), children: description }))] }), jsx("button", { type: "button", onClick: () => toast.dismiss(t.id), className: "text-gray-400 hover:text-gray-600", "aria-label": "Cerrar", children: "\u00D7" })] }));
|
|
295
|
+
return (jsxs("div", { className: `mlz-toast-container ${classes.bg} ${classes.border}`, children: [jsx("div", { className: `mlz-toast-icon-container ${classes.iconBg}`, children: jsx("div", { className: classes.icon, children: jsx(IconComponent, {}) }) }), jsxs("div", { className: "mlz-toast-content", children: [jsx("div", { className: `mlz-toast-title ${classes.text}`, children: title }), description && (jsx("div", { className: `mlz-toast-description ${classes.text}`, children: description }))] }), jsx("button", { type: "button", onClick: () => toast.dismiss(t.id), className: "mlz-toast-close", "aria-label": "Cerrar", children: "\u00D7" })] }));
|
|
291
296
|
};
|
|
292
297
|
const showToast = ({ title, description, variant = "info", duration = 5000, }) => {
|
|
293
298
|
return toast.custom((t) => (jsx(CustomToast, { t: t, title: title, description: description, variant: variant })), {
|
|
@@ -304,68 +309,5 @@ function UserCard({ name, email, changeUser, editUser }) {
|
|
|
304
309
|
return (jsxs("div", { children: [jsx("h2", { children: name }), jsx("p", { children: email }), jsx("button", { type: "button", onClick: changeUser, children: "Change User" }), jsx("button", { type: "button", onClick: editUser, children: "Edit User" })] }));
|
|
305
310
|
}
|
|
306
311
|
|
|
307
|
-
const radioButtonClasses = (hasError) => {
|
|
308
|
-
return {
|
|
309
|
-
containerStyle: "flex items-center",
|
|
310
|
-
inputStyle: [
|
|
311
|
-
"w-6 h-6",
|
|
312
|
-
"text-primary-600",
|
|
313
|
-
"bg-gray-100",
|
|
314
|
-
"border-gray-300",
|
|
315
|
-
"focus:ring-0",
|
|
316
|
-
"focus:outline-none",
|
|
317
|
-
"flex-none",
|
|
318
|
-
"order-0",
|
|
319
|
-
"flex-grow-0",
|
|
320
|
-
"checked:bg-primary-600",
|
|
321
|
-
"checked:border-primary-600",
|
|
322
|
-
"rounded-full",
|
|
323
|
-
"cursor-pointer",
|
|
324
|
-
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
325
|
-
].join(" "),
|
|
326
|
-
};
|
|
327
|
-
};
|
|
328
|
-
const RadioButton = ({ name, value, label, checked, onChange, className = "", labelSize = "base", labelWeight = "medium", disabled = false, }) => {
|
|
329
|
-
const classes = radioButtonClasses();
|
|
330
|
-
const sizeClasses = {
|
|
331
|
-
sm: "text-sm",
|
|
332
|
-
base: "text-base",
|
|
333
|
-
lg: "text-lg",
|
|
334
|
-
xl: "text-xl",
|
|
335
|
-
};
|
|
336
|
-
const weightClasses = {
|
|
337
|
-
normal: "font-normal",
|
|
338
|
-
medium: "font-medium",
|
|
339
|
-
bold: "font-bold",
|
|
340
|
-
};
|
|
341
|
-
return (jsxs("div", { className: `${classes.containerStyle} ${className}`, children: [jsx("input", { type: "radio", id: `${name}-${value}`, name: name, value: value, checked: checked, onChange: () => onChange(value), disabled: disabled, className: classes.inputStyle, style: {
|
|
342
|
-
accentColor: "#236999",
|
|
343
|
-
} }), jsx("label", { htmlFor: `${name}-${value}`, className: `ml-2 h-5 ${sizeClasses[labelSize]} ${weightClasses[labelWeight]} leading-5 flex items-center cursor-pointer whitespace-nowrap text-primary-600 ${disabled ? "opacity-50 cursor-not-allowed" : ""}`, children: label })] }));
|
|
344
|
-
};
|
|
345
|
-
const radioButtonGroupClasses = (hasError) => {
|
|
346
|
-
const labelColorClass = hasError ? "mlz-error-color" : "text-primary-600";
|
|
347
|
-
const textColorClass = hasError ? "mlz-error-color" : "text-primary-600";
|
|
348
|
-
return {
|
|
349
|
-
containerStyle: "flex flex-col gap-2",
|
|
350
|
-
labelStyle: `mlz-label-textarea block ${labelColorClass}`,
|
|
351
|
-
helperTextStyle: `mt-1 text-base ${textColorClass}`,
|
|
352
|
-
};
|
|
353
|
-
};
|
|
354
|
-
const RadioButtonGroup = ({ name, label, options, value, onChange, hasError = false, errorText, helperText, className = "", direction = "row", labelSize = "base", labelWeight = "medium", radioLabelWeight = "bold", containerProps, labelProps, helperTextProps, }) => {
|
|
355
|
-
const classes = radioButtonGroupClasses(hasError);
|
|
356
|
-
const sizeClasses = {
|
|
357
|
-
sm: "text-sm",
|
|
358
|
-
base: "text-base",
|
|
359
|
-
lg: "text-lg",
|
|
360
|
-
xl: "text-xl",
|
|
361
|
-
};
|
|
362
|
-
const weightClasses = {
|
|
363
|
-
normal: "font-normal",
|
|
364
|
-
medium: "font-medium",
|
|
365
|
-
bold: "font-bold",
|
|
366
|
-
};
|
|
367
|
-
return (jsxs("div", { ...containerProps, className: `${classes.containerStyle} ${className}`, children: [label && (jsx("label", { ...labelProps, className: `${classes.labelStyle} ${sizeClasses[labelSize]} ${weightClasses[labelWeight]}`, children: label })), jsx("div", { className: `flex gap-4 ${direction === "col" ? "flex-col" : "flex-row"}`, children: options.map((option) => (jsx(RadioButton, { name: name, value: option.value, label: option.label, checked: value === option.value, onChange: (val) => onChange?.(val), labelSize: labelSize, labelWeight: radioLabelWeight, disabled: option.disabled }, option.value))) }), (errorText || helperText) && (jsx("p", { ...helperTextProps, className: classes.helperTextStyle, children: errorText ? errorText : helperText }))] }));
|
|
368
|
-
};
|
|
369
|
-
|
|
370
312
|
export { Button, Input, RadioButton, RadioButtonGroup, TextArea, Toast, ToastProvider, UserCard, showToast, toastError, toastInfo, toastSuccess, toastWarning, useToast };
|
|
371
313
|
//# sourceMappingURL=index.esm.js.map
|