@yamada-ui/checkbox 1.1.7 → 1.1.8-dev-20240917033401
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/checkbox-context.d.mts +13 -0
- package/dist/checkbox-context.d.ts +13 -0
- package/dist/checkbox-context.js +38 -0
- package/dist/checkbox-context.js.map +1 -0
- package/dist/checkbox-context.mjs +10 -0
- package/dist/checkbox-context.mjs.map +1 -0
- package/dist/checkbox-group.d.mts +15 -22
- package/dist/checkbox-group.d.ts +15 -22
- package/dist/checkbox-group.js +51 -48
- package/dist/checkbox-group.js.map +1 -1
- package/dist/checkbox-group.mjs +5 -5
- package/dist/checkbox.d.mts +19 -125
- package/dist/checkbox.d.ts +19 -125
- package/dist/checkbox.js +36 -149
- package/dist/checkbox.js.map +1 -1
- package/dist/checkbox.mjs +2 -1
- package/dist/chunk-IZINMNYX.mjs +14 -0
- package/dist/chunk-IZINMNYX.mjs.map +1 -0
- package/dist/chunk-J27S43KM.mjs +134 -0
- package/dist/chunk-J27S43KM.mjs.map +1 -0
- package/dist/{chunk-DMNICJ3Z.mjs → chunk-LP6DPNQY.mjs} +36 -164
- package/dist/chunk-LP6DPNQY.mjs.map +1 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +152 -149
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +7 -4
- package/package.json +8 -8
- package/dist/chunk-DMNICJ3Z.mjs.map +0 -1
package/dist/index.js
CHANGED
|
@@ -31,139 +31,26 @@ module.exports = __toCommonJS(src_exports);
|
|
|
31
31
|
|
|
32
32
|
// src/checkbox.tsx
|
|
33
33
|
var import_core = require("@yamada-ui/core");
|
|
34
|
-
var
|
|
34
|
+
var import_form_control = require("@yamada-ui/form-control");
|
|
35
35
|
var import_motion = require("@yamada-ui/motion");
|
|
36
36
|
var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
|
|
37
37
|
var import_utils2 = require("@yamada-ui/utils");
|
|
38
|
-
var
|
|
38
|
+
var import_react = require("react");
|
|
39
39
|
|
|
40
|
-
// src/checkbox-
|
|
41
|
-
var import_form_control = require("@yamada-ui/form-control");
|
|
42
|
-
var import_layouts = require("@yamada-ui/layouts");
|
|
43
|
-
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
|
|
40
|
+
// src/checkbox-context.tsx
|
|
44
41
|
var import_utils = require("@yamada-ui/utils");
|
|
45
|
-
var import_react = require("react");
|
|
46
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
47
|
-
var isEvent = (value) => value && (0, import_utils.isObject)(value) && (0, import_utils.isObject)(value.target);
|
|
48
|
-
var useCheckboxGroup = ({
|
|
49
|
-
value: valueProp,
|
|
50
|
-
defaultValue = [],
|
|
51
|
-
onChange: onChangeProp,
|
|
52
|
-
isNative,
|
|
53
|
-
...props
|
|
54
|
-
}) => {
|
|
55
|
-
const onChangeRef = (0, import_utils.useCallbackRef)(onChangeProp);
|
|
56
|
-
const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
|
57
|
-
value: valueProp,
|
|
58
|
-
defaultValue,
|
|
59
|
-
onChange: onChangeRef
|
|
60
|
-
});
|
|
61
|
-
const onChange = (0, import_react.useCallback)(
|
|
62
|
-
(evOrValue) => {
|
|
63
|
-
const isChecked = isEvent(evOrValue) ? evOrValue.target.checked : !value.includes(evOrValue);
|
|
64
|
-
const selectedValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
|
|
65
|
-
const nextValue = isChecked ? [...value, selectedValue] : value.filter((v) => String(v) !== String(selectedValue));
|
|
66
|
-
setValue(nextValue);
|
|
67
|
-
},
|
|
68
|
-
[value, setValue]
|
|
69
|
-
);
|
|
70
|
-
const getContainerProps = (0, import_react.useCallback)(
|
|
71
|
-
(props2 = {}, ref = null) => ({
|
|
72
|
-
role: "group",
|
|
73
|
-
...props2,
|
|
74
|
-
ref
|
|
75
|
-
}),
|
|
76
|
-
[]
|
|
77
|
-
);
|
|
78
|
-
const getCheckboxProps = (0, import_react.useCallback)(
|
|
79
|
-
(props2, ref = null) => ({
|
|
80
|
-
...props2,
|
|
81
|
-
ref,
|
|
82
|
-
[isNative ? "checked" : "isChecked"]: value.some(
|
|
83
|
-
(val) => String(props2 == null ? void 0 : props2.value) === String(val)
|
|
84
|
-
),
|
|
85
|
-
onChange
|
|
86
|
-
}),
|
|
87
|
-
[onChange, isNative, value]
|
|
88
|
-
);
|
|
89
|
-
return {
|
|
90
|
-
props,
|
|
91
|
-
value,
|
|
92
|
-
setValue,
|
|
93
|
-
onChange,
|
|
94
|
-
getContainerProps,
|
|
95
|
-
getCheckboxProps
|
|
96
|
-
};
|
|
97
|
-
};
|
|
98
42
|
var [CheckboxGroupProvider, useCheckboxGroupContext] = (0, import_utils.createContext)({
|
|
99
43
|
strict: false,
|
|
100
44
|
name: "CheckboxGroupContext"
|
|
101
45
|
});
|
|
102
|
-
var CheckboxGroup = (0, import_react.forwardRef)(
|
|
103
|
-
({
|
|
104
|
-
className,
|
|
105
|
-
size,
|
|
106
|
-
variant,
|
|
107
|
-
colorScheme,
|
|
108
|
-
children,
|
|
109
|
-
items = [],
|
|
110
|
-
direction = "column",
|
|
111
|
-
gap,
|
|
112
|
-
...props
|
|
113
|
-
}, ref) => {
|
|
114
|
-
const {
|
|
115
|
-
value,
|
|
116
|
-
onChange,
|
|
117
|
-
props: computedProps,
|
|
118
|
-
getContainerProps
|
|
119
|
-
} = useCheckboxGroup(props);
|
|
120
|
-
const { labelId, isRequired, isReadOnly, isDisabled, isInvalid, ...rest } = (0, import_form_control.useFormControl)(computedProps);
|
|
121
|
-
const validChildren = (0, import_utils.getValidChildren)(children);
|
|
122
|
-
let computedChildren = [];
|
|
123
|
-
if (!validChildren.length && items.length) {
|
|
124
|
-
computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Checkbox, { value: value2, ...props2, children: label }, i));
|
|
125
|
-
}
|
|
126
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
127
|
-
CheckboxGroupProvider,
|
|
128
|
-
{
|
|
129
|
-
value: {
|
|
130
|
-
size,
|
|
131
|
-
variant,
|
|
132
|
-
colorScheme,
|
|
133
|
-
isRequired,
|
|
134
|
-
isReadOnly,
|
|
135
|
-
isDisabled,
|
|
136
|
-
isInvalid,
|
|
137
|
-
value,
|
|
138
|
-
onChange
|
|
139
|
-
},
|
|
140
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
141
|
-
import_layouts.Flex,
|
|
142
|
-
{
|
|
143
|
-
ref,
|
|
144
|
-
className: (0, import_utils.cx)("ui-checkbox-group", className),
|
|
145
|
-
direction,
|
|
146
|
-
gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
|
|
147
|
-
...getContainerProps({
|
|
148
|
-
"aria-labelledby": labelId,
|
|
149
|
-
...rest
|
|
150
|
-
}),
|
|
151
|
-
children: children != null ? children : computedChildren
|
|
152
|
-
}
|
|
153
|
-
)
|
|
154
|
-
}
|
|
155
|
-
);
|
|
156
|
-
}
|
|
157
|
-
);
|
|
158
|
-
CheckboxGroup.displayName = "CheckboxGroup";
|
|
159
46
|
|
|
160
47
|
// src/checkbox.tsx
|
|
161
|
-
var
|
|
48
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
162
49
|
var useCheckbox = ({
|
|
163
50
|
id,
|
|
164
51
|
...props
|
|
165
52
|
}) => {
|
|
166
|
-
id != null ? id : id = (0,
|
|
53
|
+
id != null ? id : id = (0, import_react.useId)();
|
|
167
54
|
const {
|
|
168
55
|
id: _id,
|
|
169
56
|
name,
|
|
@@ -174,7 +61,7 @@ var useCheckbox = ({
|
|
|
174
61
|
isIndeterminate,
|
|
175
62
|
onChange: onChangeProp,
|
|
176
63
|
...computedProps
|
|
177
|
-
} = (0,
|
|
64
|
+
} = (0, import_form_control.useFormControlProps)({ id, ...props });
|
|
178
65
|
const [
|
|
179
66
|
{
|
|
180
67
|
required,
|
|
@@ -186,14 +73,14 @@ var useCheckbox = ({
|
|
|
186
73
|
...formControlProps
|
|
187
74
|
},
|
|
188
75
|
rest
|
|
189
|
-
] = (0, import_utils2.splitObject)(computedProps,
|
|
190
|
-
const [isFocusVisible, setIsFocusVisible] = (0,
|
|
191
|
-
const [isFocused, setFocused] = (0,
|
|
192
|
-
const [isHovered, setHovered] = (0,
|
|
193
|
-
const [isActive, setActive] = (0,
|
|
194
|
-
const inputRef = (0,
|
|
195
|
-
const [isLabel, setIsLabel] = (0,
|
|
196
|
-
const [isChecked, setIsChecked] = (0,
|
|
76
|
+
] = (0, import_utils2.splitObject)(computedProps, import_form_control.formControlProperties);
|
|
77
|
+
const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
|
|
78
|
+
const [isFocused, setFocused] = (0, import_react.useState)(false);
|
|
79
|
+
const [isHovered, setHovered] = (0, import_react.useState)(false);
|
|
80
|
+
const [isActive, setActive] = (0, import_react.useState)(false);
|
|
81
|
+
const inputRef = (0, import_react.useRef)(null);
|
|
82
|
+
const [isLabel, setIsLabel] = (0, import_react.useState)(true);
|
|
83
|
+
const [isChecked, setIsChecked] = (0, import_react.useState)(!!defaultIsChecked);
|
|
197
84
|
const isControlled = isCheckedProp !== void 0;
|
|
198
85
|
const checked = isControlled ? isCheckedProp : isChecked;
|
|
199
86
|
const onChange = (0, import_utils2.useCallbackRef)(
|
|
@@ -210,19 +97,19 @@ var useCheckbox = ({
|
|
|
210
97
|
);
|
|
211
98
|
const onFocus = (0, import_utils2.useCallbackRef)(onFocusProp);
|
|
212
99
|
const onBlur = (0, import_utils2.useCallbackRef)(onBlurProp);
|
|
213
|
-
const onKeyDown = (0,
|
|
100
|
+
const onKeyDown = (0, import_react.useCallback)(
|
|
214
101
|
({ key }) => {
|
|
215
102
|
if (key === " ") setActive(true);
|
|
216
103
|
},
|
|
217
104
|
[setActive]
|
|
218
105
|
);
|
|
219
|
-
const onKeyUp = (0,
|
|
106
|
+
const onKeyUp = (0, import_react.useCallback)(
|
|
220
107
|
({ key }) => {
|
|
221
108
|
if (key === " ") setActive(false);
|
|
222
109
|
},
|
|
223
110
|
[setActive]
|
|
224
111
|
);
|
|
225
|
-
(0,
|
|
112
|
+
(0, import_react.useEffect)(() => {
|
|
226
113
|
return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
|
|
227
114
|
}, []);
|
|
228
115
|
(0, import_utils2.useSafeLayoutEffect)(() => {
|
|
@@ -242,7 +129,7 @@ var useCheckbox = ({
|
|
|
242
129
|
if (inputRef.current.checked !== checked)
|
|
243
130
|
setIsChecked(inputRef.current.checked);
|
|
244
131
|
}, [inputRef.current]);
|
|
245
|
-
const getContainerProps = (0,
|
|
132
|
+
const getContainerProps = (0, import_react.useCallback)(
|
|
246
133
|
(props2 = {}, ref = null) => ({
|
|
247
134
|
...formControlProps,
|
|
248
135
|
...props2,
|
|
@@ -262,7 +149,7 @@ var useCheckbox = ({
|
|
|
262
149
|
}),
|
|
263
150
|
[checked, isLabel, formControlProps]
|
|
264
151
|
);
|
|
265
|
-
const getIconProps = (0,
|
|
152
|
+
const getIconProps = (0, import_react.useCallback)(
|
|
266
153
|
(props2 = {}, ref = null) => ({
|
|
267
154
|
...formControlProps,
|
|
268
155
|
...props2,
|
|
@@ -292,7 +179,7 @@ var useCheckbox = ({
|
|
|
292
179
|
formControlProps
|
|
293
180
|
]
|
|
294
181
|
);
|
|
295
|
-
const getInputProps = (0,
|
|
182
|
+
const getInputProps = (0, import_react.useCallback)(
|
|
296
183
|
(props2 = {}, ref = null) => ({
|
|
297
184
|
...formControlProps,
|
|
298
185
|
...props2,
|
|
@@ -342,7 +229,7 @@ var useCheckbox = ({
|
|
|
342
229
|
onKeyUp
|
|
343
230
|
]
|
|
344
231
|
);
|
|
345
|
-
const getLabelProps = (0,
|
|
232
|
+
const getLabelProps = (0, import_react.useCallback)(
|
|
346
233
|
(props2 = {}, ref = null) => ({
|
|
347
234
|
...formControlProps,
|
|
348
235
|
...props2,
|
|
@@ -373,13 +260,13 @@ var useCheckbox = ({
|
|
|
373
260
|
getLabelProps
|
|
374
261
|
};
|
|
375
262
|
};
|
|
376
|
-
var Checkbox = (0,
|
|
263
|
+
var Checkbox = (0, import_react.forwardRef)(
|
|
377
264
|
(props, ref) => {
|
|
378
265
|
var _a, _b, _c, _d;
|
|
379
266
|
const group = useCheckboxGroupContext();
|
|
380
267
|
const { value: groupValue, ...groupProps } = { ...group };
|
|
381
|
-
const control = (0,
|
|
382
|
-
const [styles, mergedProps] = (0, import_core.
|
|
268
|
+
const control = (0, import_form_control.useFormControl)(props);
|
|
269
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Checkbox", {
|
|
383
270
|
...groupProps,
|
|
384
271
|
...props
|
|
385
272
|
});
|
|
@@ -416,7 +303,7 @@ var Checkbox = (0, import_react2.forwardRef)(
|
|
|
416
303
|
onChange
|
|
417
304
|
});
|
|
418
305
|
const { children: customIcon, ...resolvedIconProps } = { ...iconProps };
|
|
419
|
-
const cloneIcon = (0,
|
|
306
|
+
const cloneIcon = (0, import_react.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
|
|
420
307
|
__css: {
|
|
421
308
|
opacity: isChecked || isIndeterminate ? 1 : 0,
|
|
422
309
|
transform: isChecked || isIndeterminate ? "scale(1)" : "scale(0.95)",
|
|
@@ -430,7 +317,7 @@ var Checkbox = (0, import_react2.forwardRef)(
|
|
|
430
317
|
isDisabled,
|
|
431
318
|
isInvalid
|
|
432
319
|
});
|
|
433
|
-
return /* @__PURE__ */ (0,
|
|
320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
434
321
|
import_core.ui.label,
|
|
435
322
|
{
|
|
436
323
|
className: (0, import_utils2.cx)("ui-checkbox", className),
|
|
@@ -446,14 +333,14 @@ var Checkbox = (0, import_react2.forwardRef)(
|
|
|
446
333
|
},
|
|
447
334
|
...rest,
|
|
448
335
|
children: [
|
|
449
|
-
/* @__PURE__ */ (0,
|
|
336
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
450
337
|
import_core.ui.input,
|
|
451
338
|
{
|
|
452
339
|
className: "ui-checkbox__input",
|
|
453
340
|
...getInputProps(inputProps, ref)
|
|
454
341
|
}
|
|
455
342
|
),
|
|
456
|
-
/* @__PURE__ */ (0,
|
|
343
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
457
344
|
import_core.ui.span,
|
|
458
345
|
{
|
|
459
346
|
className: "ui-checkbox__icon",
|
|
@@ -468,7 +355,7 @@ var Checkbox = (0, import_react2.forwardRef)(
|
|
|
468
355
|
children: cloneIcon
|
|
469
356
|
}
|
|
470
357
|
),
|
|
471
|
-
/* @__PURE__ */ (0,
|
|
358
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
472
359
|
import_core.ui.span,
|
|
473
360
|
{
|
|
474
361
|
className: "ui-checkbox__label",
|
|
@@ -492,7 +379,7 @@ var CheckboxIcon = ({
|
|
|
492
379
|
isInvalid: _isInvalid,
|
|
493
380
|
...rest
|
|
494
381
|
}) => {
|
|
495
|
-
return /* @__PURE__ */ (0,
|
|
382
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
496
383
|
import_core.ui.div,
|
|
497
384
|
{
|
|
498
385
|
__css: {
|
|
@@ -501,7 +388,7 @@ var CheckboxIcon = ({
|
|
|
501
388
|
left: "50%",
|
|
502
389
|
transform: "translate(-50%, -50%)"
|
|
503
390
|
},
|
|
504
|
-
children: /* @__PURE__ */ (0,
|
|
391
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
505
392
|
import_motion.motion.div,
|
|
506
393
|
{
|
|
507
394
|
variants: {
|
|
@@ -516,14 +403,14 @@ var CheckboxIcon = ({
|
|
|
516
403
|
alignItems: "center",
|
|
517
404
|
justifyContent: "center"
|
|
518
405
|
},
|
|
519
|
-
children: isIndeterminate ? /* @__PURE__ */ (0,
|
|
406
|
+
children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IndeterminateIcon, { ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { ...rest })
|
|
520
407
|
}
|
|
521
408
|
)
|
|
522
409
|
}
|
|
523
410
|
) : null });
|
|
524
411
|
};
|
|
525
412
|
var CheckIcon = (props) => {
|
|
526
|
-
return /* @__PURE__ */ (0,
|
|
413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
527
414
|
import_motion.motion.svg,
|
|
528
415
|
{
|
|
529
416
|
width: "1.2em",
|
|
@@ -546,12 +433,12 @@ var CheckIcon = (props) => {
|
|
|
546
433
|
strokeDasharray: 16
|
|
547
434
|
},
|
|
548
435
|
...props,
|
|
549
|
-
children: /* @__PURE__ */ (0,
|
|
436
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "1.5 6 4.5 9 10.5 1" })
|
|
550
437
|
}
|
|
551
438
|
);
|
|
552
439
|
};
|
|
553
440
|
var IndeterminateIcon = (props) => {
|
|
554
|
-
return /* @__PURE__ */ (0,
|
|
441
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
555
442
|
import_motion.motion.svg,
|
|
556
443
|
{
|
|
557
444
|
width: "1.2em",
|
|
@@ -572,10 +459,126 @@ var IndeterminateIcon = (props) => {
|
|
|
572
459
|
},
|
|
573
460
|
style: { stroke: "currentColor", strokeWidth: 4 },
|
|
574
461
|
...props,
|
|
575
|
-
children: /* @__PURE__ */ (0,
|
|
462
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", x2: "3", y1: "12", y2: "12" })
|
|
576
463
|
}
|
|
577
464
|
);
|
|
578
465
|
};
|
|
466
|
+
|
|
467
|
+
// src/checkbox-group.tsx
|
|
468
|
+
var import_form_control2 = require("@yamada-ui/form-control");
|
|
469
|
+
var import_layouts = require("@yamada-ui/layouts");
|
|
470
|
+
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
|
|
471
|
+
var import_utils3 = require("@yamada-ui/utils");
|
|
472
|
+
var import_react2 = require("react");
|
|
473
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
474
|
+
var isEvent = (value) => value && (0, import_utils3.isObject)(value) && (0, import_utils3.isObject)(value.target);
|
|
475
|
+
var useCheckboxGroup = ({
|
|
476
|
+
value: valueProp,
|
|
477
|
+
defaultValue = [],
|
|
478
|
+
onChange: onChangeProp,
|
|
479
|
+
isNative,
|
|
480
|
+
...props
|
|
481
|
+
}) => {
|
|
482
|
+
const onChangeRef = (0, import_utils3.useCallbackRef)(onChangeProp);
|
|
483
|
+
const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
|
484
|
+
value: valueProp,
|
|
485
|
+
defaultValue,
|
|
486
|
+
onChange: onChangeRef
|
|
487
|
+
});
|
|
488
|
+
const onChange = (0, import_react2.useCallback)(
|
|
489
|
+
(evOrValue) => {
|
|
490
|
+
const isChecked = isEvent(evOrValue) ? evOrValue.target.checked : !value.includes(evOrValue);
|
|
491
|
+
const selectedValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
|
|
492
|
+
const nextValue = isChecked ? [...value, selectedValue] : value.filter((v) => String(v) !== String(selectedValue));
|
|
493
|
+
setValue(nextValue);
|
|
494
|
+
},
|
|
495
|
+
[value, setValue]
|
|
496
|
+
);
|
|
497
|
+
const getContainerProps = (0, import_react2.useCallback)(
|
|
498
|
+
(props2 = {}, ref = null) => ({
|
|
499
|
+
role: "group",
|
|
500
|
+
...props2,
|
|
501
|
+
ref
|
|
502
|
+
}),
|
|
503
|
+
[]
|
|
504
|
+
);
|
|
505
|
+
const getCheckboxProps = (0, import_react2.useCallback)(
|
|
506
|
+
(props2 = {}, ref = null) => ({
|
|
507
|
+
...props2,
|
|
508
|
+
ref,
|
|
509
|
+
[isNative ? "checked" : "isChecked"]: value.some(
|
|
510
|
+
(val) => String(props2 == null ? void 0 : props2.value) === String(val)
|
|
511
|
+
),
|
|
512
|
+
onChange
|
|
513
|
+
}),
|
|
514
|
+
[onChange, isNative, value]
|
|
515
|
+
);
|
|
516
|
+
return {
|
|
517
|
+
props,
|
|
518
|
+
value,
|
|
519
|
+
setValue,
|
|
520
|
+
onChange,
|
|
521
|
+
getContainerProps,
|
|
522
|
+
getCheckboxProps
|
|
523
|
+
};
|
|
524
|
+
};
|
|
525
|
+
var CheckboxGroup = (0, import_react2.forwardRef)(
|
|
526
|
+
({
|
|
527
|
+
className,
|
|
528
|
+
size,
|
|
529
|
+
variant,
|
|
530
|
+
colorScheme,
|
|
531
|
+
children,
|
|
532
|
+
items = [],
|
|
533
|
+
direction = "column",
|
|
534
|
+
gap,
|
|
535
|
+
...props
|
|
536
|
+
}, ref) => {
|
|
537
|
+
const {
|
|
538
|
+
value,
|
|
539
|
+
onChange,
|
|
540
|
+
props: computedProps,
|
|
541
|
+
getContainerProps
|
|
542
|
+
} = useCheckboxGroup(props);
|
|
543
|
+
const { labelId, isRequired, isReadOnly, isDisabled, isInvalid, ...rest } = (0, import_form_control2.useFormControl)(computedProps);
|
|
544
|
+
const validChildren = (0, import_utils3.getValidChildren)(children);
|
|
545
|
+
let computedChildren = [];
|
|
546
|
+
if (!validChildren.length && items.length) {
|
|
547
|
+
computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Checkbox, { value: value2, ...props2, children: label }, i));
|
|
548
|
+
}
|
|
549
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
550
|
+
CheckboxGroupProvider,
|
|
551
|
+
{
|
|
552
|
+
value: {
|
|
553
|
+
size,
|
|
554
|
+
variant,
|
|
555
|
+
colorScheme,
|
|
556
|
+
isRequired,
|
|
557
|
+
isReadOnly,
|
|
558
|
+
isDisabled,
|
|
559
|
+
isInvalid,
|
|
560
|
+
value,
|
|
561
|
+
onChange
|
|
562
|
+
},
|
|
563
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
564
|
+
import_layouts.Flex,
|
|
565
|
+
{
|
|
566
|
+
ref,
|
|
567
|
+
className: (0, import_utils3.cx)("ui-checkbox-group", className),
|
|
568
|
+
direction,
|
|
569
|
+
gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
|
|
570
|
+
...getContainerProps({
|
|
571
|
+
"aria-labelledby": labelId,
|
|
572
|
+
...rest
|
|
573
|
+
}),
|
|
574
|
+
children: children != null ? children : computedChildren
|
|
575
|
+
}
|
|
576
|
+
)
|
|
577
|
+
}
|
|
578
|
+
);
|
|
579
|
+
}
|
|
580
|
+
);
|
|
581
|
+
CheckboxGroup.displayName = "CheckboxGroup";
|
|
579
582
|
// Annotate the CommonJS export names for ESM import in node:
|
|
580
583
|
0 && (module.exports = {
|
|
581
584
|
Checkbox,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/checkbox.tsx","../src/checkbox-group.tsx"],"sourcesContent":["export { Checkbox, CheckboxIcon, useCheckbox } from \"./checkbox\"\nexport type {\n CheckboxProps,\n CheckboxIconProps,\n UseCheckboxProps,\n UseCheckboxReturn,\n} from \"./checkbox\"\nexport { CheckboxGroup, useCheckboxGroup } from \"./checkbox-group\"\nexport type {\n CheckboxItem,\n CheckboxGroupProps,\n UseCheckboxGroupProps,\n UseCheckboxGroupReturn,\n} from \"./checkbox-group\"\n","import type {\n HTMLUIProps,\n ThemeProps,\n ComponentArgs,\n UIPropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n useFormControl,\n useFormControlProps,\n formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { Dict, Merge, PropGetter } from \"@yamada-ui/utils\"\nimport {\n cx,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n handlerAll,\n dataAttr,\n mergeRefs,\n funcAll,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FC,\n FocusEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n ReactElement,\n SyntheticEvent,\n ForwardedRef,\n Ref,\n DOMAttributes,\n} from \"react\"\nimport {\n cloneElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n forwardRef,\n useId,\n} from \"react\"\nimport { useCheckboxGroupContext } from \"./checkbox-group\"\n\nexport type UseCheckboxProps<Y extends string | number = string> =\n FormControlOptions & {\n /**\n * id assigned to input.\n */\n id?: string\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value to be used in the checkbox input.\n */\n value?: Y\n /**\n * If `true`, the checkbox will be initially checked.\n *\n * @default false\n */\n defaultIsChecked?: boolean\n /**\n * If `true`, the checkbox will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * If `true`, the checkbox will be indeterminate.\n *\n * @default false\n */\n isIndeterminate?: boolean\n /**\n * The callback invoked when the checked state changes.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the checkbox is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the checkbox is blurred.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>\n /**\n * The tab-index property of the underlying input element.\n */\n tabIndex?: number\n }\n\nexport const useCheckbox = <\n Y extends string | number = string,\n M extends Dict = Dict,\n>({\n id,\n ...props\n}: UseCheckboxProps<Y> & M) => {\n id ??= useId()\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n tabIndex,\n isIndeterminate,\n onChange: onChangeProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [\n {\n required,\n disabled,\n readOnly,\n \"aria-readonly\": _ariaReadonly,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...formControlProps\n },\n rest,\n ] = splitObject(computedProps, formControlProperties)\n\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const [isFocused, setFocused] = useState<boolean>(false)\n const [isHovered, setHovered] = useState<boolean>(false)\n const [isActive, setActive] = useState<boolean>(false)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [isLabel, setIsLabel] = useState<boolean>(true)\n\n const [isChecked, setIsChecked] = useState<boolean>(!!defaultIsChecked)\n\n const isControlled = isCheckedProp !== undefined\n const checked = isControlled ? (isCheckedProp as boolean) : isChecked\n\n const onChange = useCallbackRef(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (readOnly || disabled) {\n ev.preventDefault()\n\n return\n }\n\n if (!isControlled)\n setIsChecked(!checked || isIndeterminate ? true : ev.target.checked)\n\n onChangeProp?.(ev)\n },\n [readOnly, disabled, isControlled, checked, isIndeterminate],\n )\n const onFocus = useCallbackRef(onFocusProp)\n const onBlur = useCallbackRef(onBlurProp)\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent<Element>) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent<Element>) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n useSafeLayoutEffect(() => {\n if (inputRef.current)\n inputRef.current.indeterminate = Boolean(isIndeterminate)\n }, [isIndeterminate])\n\n useUpdateEffect(() => {\n if (disabled) setFocused(false)\n }, [disabled, setFocused])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current?.form) return\n\n inputRef.current.form.onreset = () => setIsChecked(!!defaultIsChecked)\n }, [])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n if (inputRef.current.checked !== checked)\n setIsChecked(inputRef.current.checked)\n }, [inputRef.current])\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, (el: HTMLElement | undefined) => {\n if (el) setIsLabel(el.tagName === \"LABEL\")\n }),\n \"data-checked\": dataAttr(checked),\n onClick: handlerAll(props.onClick, () => {\n if (isLabel) return\n\n inputRef.current?.click()\n\n requestAnimationFrame(() => inputRef.current?.focus())\n }),\n }),\n [checked, isLabel, formControlProps],\n )\n\n const getIconProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-active\": dataAttr(isActive),\n \"data-hover\": dataAttr(isHovered),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(isFocused),\n \"data-focus-visible\": dataAttr(isFocused && isFocusVisible),\n \"data-indeterminate\": dataAttr(isIndeterminate),\n \"aria-hidden\": true,\n onMouseDown: handlerAll(props.onMouseDown, (ev: React.MouseEvent) => {\n if (isFocused) ev.preventDefault()\n\n setActive(true)\n }),\n onMouseUp: handlerAll(props.onMouseUp, () => setActive(false)),\n onMouseEnter: handlerAll(props.onMouseEnter, () => setHovered(true)),\n onMouseLeave: handlerAll(props.onMouseLeave, () => setHovered(false)),\n }),\n [\n isActive,\n checked,\n isFocused,\n isHovered,\n isFocusVisible,\n isIndeterminate,\n formControlProps,\n ],\n )\n\n const getInputProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(inputRef, ref),\n id,\n type: \"checkbox\",\n name,\n value,\n tabIndex,\n required,\n disabled,\n readOnly,\n checked,\n \"aria-checked\": isIndeterminate ? \"mixed\" : checked,\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, onChange),\n onBlur: handlerAll(props.onBlur, onBlur, () => setFocused(false)),\n onFocus: handlerAll(props.onFocus, onFocus, () => setFocused(true)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onKeyUp: handlerAll(props.onKeyUp, onKeyUp),\n }),\n [\n isIndeterminate,\n formControlProps,\n id,\n name,\n value,\n tabIndex,\n required,\n disabled,\n readOnly,\n checked,\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n onKeyUp,\n ],\n )\n\n const getLabelProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-checked\": dataAttr(checked),\n onMouseDown: handlerAll(props.onMouseDown, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n onTouchStart: handlerAll(props.onTouchStart, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n }),\n [checked, formControlProps],\n )\n\n return {\n props: rest,\n isFocusVisible,\n isFocused,\n isHovered,\n isActive,\n isChecked: checked,\n isIndeterminate,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n\ntype CheckboxOptions = {\n /**\n * Props for icon component.\n */\n iconProps?: Omit<HTMLUIProps<\"span\">, \"children\"> & { children: ReactElement }\n /**\n * Props for input element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n /**\n * Props for label element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport type CheckboxProps<Y extends string | number = string> = Omit<\n Merge<HTMLUIProps<\"label\">, UseCheckboxProps<Y>>,\n \"checked\"\n> &\n ThemeProps<\"Checkbox\"> &\n CheckboxOptions\n\n/**\n * `Checkbox` is a component used for allowing users to select multiple values from multiple options.\n *\n * @see Docs https://yamada-ui.com/components/forms/checkbox\n */\nexport const Checkbox = forwardRef(\n <Y extends string | number = string>(\n props: CheckboxProps<Y>,\n ref: ForwardedRef<HTMLInputElement>,\n ) => {\n const group = useCheckboxGroupContext()\n const { value: groupValue, ...groupProps } = { ...group }\n const control = useFormControl(props)\n const [styles, mergedProps] = useMultiComponentStyle(\"Checkbox\", {\n ...groupProps,\n ...props,\n })\n const {\n className,\n gap = \"0.5rem\",\n isRequired = groupProps.isRequired ?? control.isRequired,\n isReadOnly = groupProps.isReadOnly ?? control.isReadOnly,\n isDisabled = groupProps.isDisabled ?? control.isDisabled,\n isInvalid = groupProps.isInvalid ?? control.isInvalid,\n iconProps,\n inputProps,\n labelProps,\n children,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const isCheckedProp =\n groupValue && computedProps.value\n ? groupValue.includes(computedProps.value)\n : computedProps.isChecked\n const onChange =\n groupProps.onChange && computedProps.value\n ? funcAll(groupProps.onChange, computedProps.onChange)\n : computedProps.onChange\n\n const {\n isChecked,\n isIndeterminate,\n getContainerProps,\n getInputProps,\n getIconProps,\n getLabelProps,\n props: rest,\n } = useCheckbox({\n ...computedProps,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n isChecked: isCheckedProp,\n onChange,\n })\n\n const { children: customIcon, ...resolvedIconProps } = { ...iconProps }\n const cloneIcon = cloneElement(customIcon ?? <CheckboxIcon />, {\n __css: {\n opacity: isChecked || isIndeterminate ? 1 : 0,\n transform: isChecked || isIndeterminate ? \"scale(1)\" : \"scale(0.95)\",\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n },\n isIndeterminate,\n isChecked,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n })\n\n return (\n <ui.label\n className={cx(\"ui-checkbox\", className)}\n {...getContainerProps()}\n __css={{\n cursor: \"pointer\",\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n verticalAlign: \"top\",\n gap,\n ...styles.container,\n }}\n {...rest}\n >\n <ui.input\n className=\"ui-checkbox__input\"\n {...getInputProps(inputProps, ref)}\n />\n\n <ui.span\n className=\"ui-checkbox__icon\"\n __css={{\n pointerEvents: isReadOnly ? \"none\" : undefined,\n position: \"relative\",\n display: \"inline-block\",\n userSelect: \"none\",\n ...styles.icon,\n }}\n {...getIconProps(resolvedIconProps)}\n >\n {cloneIcon}\n </ui.span>\n\n <ui.span\n className=\"ui-checkbox__label\"\n __css={{ ...styles.label }}\n {...getLabelProps(labelProps as DOMAttributes<HTMLElement>)}\n >\n {children}\n </ui.span>\n </ui.label>\n )\n },\n) as {\n <Y extends string | number = string>(\n props: CheckboxProps<Y> & { ref?: Ref<HTMLInputElement> },\n ): JSX.Element\n} & ComponentArgs\n\nCheckbox.displayName = \"Checkbox\"\n\nexport type CheckboxIconProps = MotionProps<\"svg\"> &\n FormControlOptions & {\n /**\n * If `true`, the icon will be indeterminate.\n *\n * @default false\n */\n isIndeterminate?: boolean\n /**\n * If `true`, the icon will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n }\n\nexport const CheckboxIcon: FC<CheckboxIconProps> = ({\n isIndeterminate,\n isChecked,\n isRequired: _isRequired,\n isReadOnly: _isReadOnly,\n isDisabled: _isDisabled,\n isInvalid: _isInvalid,\n ...rest\n}) => {\n return (\n <AnimatePresence initial={false}>\n {isIndeterminate || isChecked ? (\n <ui.div\n __css={{\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n }}\n >\n <motion.div\n variants={{\n unchecked: { scale: 0.5 },\n checked: { scale: 1 },\n }}\n initial=\"unchecked\"\n animate=\"checked\"\n exit=\"unchecked\"\n style={\n {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n } as CSSProperties\n }\n >\n {isIndeterminate ? (\n <IndeterminateIcon {...rest} />\n ) : (\n <CheckIcon {...rest} />\n )}\n </motion.div>\n </ui.div>\n ) : null}\n </AnimatePresence>\n )\n}\n\nconst CheckIcon: FC<MotionProps<\"svg\">> = (props) => {\n return (\n <motion.svg\n width=\"1.2em\"\n viewBox=\"0 0 12 10\"\n variants={{\n unchecked: {\n opacity: 0,\n strokeDashoffset: 16,\n },\n checked: {\n opacity: 1,\n strokeDashoffset: 0,\n transition: { duration: 0.2 },\n },\n }}\n style={{\n fill: \"none\",\n strokeWidth: 2,\n stroke: \"currentColor\",\n strokeDasharray: 16,\n }}\n {...props}\n >\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </motion.svg>\n )\n}\n\nconst IndeterminateIcon: FC<MotionProps<\"svg\">> = (props) => {\n return (\n <motion.svg\n width=\"1.2em\"\n viewBox=\"0 0 24 24\"\n variants={{\n unchecked: {\n scaleX: 0.65,\n opacity: 0,\n },\n checked: {\n scaleX: 1,\n opacity: 1,\n transition: {\n scaleX: { duration: 0 },\n opacity: { duration: 0.02 },\n },\n },\n }}\n style={{ stroke: \"currentColor\", strokeWidth: 4 }}\n {...props}\n >\n <line x1=\"21\" x2=\"3\" y1=\"12\" y2=\"12\" />\n </motion.svg>\n )\n}\n","import type { ComponentArgs, ThemeProps, UIPropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport type { FlexProps } from \"@yamada-ui/layouts\"\nimport { Flex } from \"@yamada-ui/layouts\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport type { Dict, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n cx,\n isObject,\n useCallbackRef,\n getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, ReactElement, Ref } from \"react\"\nimport { forwardRef, useCallback } from \"react\"\nimport type { CheckboxProps } from \"./checkbox\"\nimport { Checkbox } from \"./checkbox\"\n\nexport type CheckboxItem<Y extends string | number = string> =\n CheckboxProps<Y> & {\n label?: string\n }\n\nconst isEvent = (value: any): value is { target: HTMLInputElement } =>\n value && isObject(value) && isObject(value.target)\n\nexport type UseCheckboxGroupProps<Y extends string | number = string> = {\n /**\n * The value of the checkbox group.\n */\n value?: Y[]\n /**\n * The initial value of the checkbox group.\n */\n defaultValue?: Y[]\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y[]) => void\n /**\n * If `true`, input elements will receive `checked` attribute instead of `isChecked`.\n *\n * This assumes, you're using native radio inputs.\n *\n * @default false\n */\n isNative?: boolean\n}\n\nexport const useCheckboxGroup = <\n Y extends string | number = string,\n M extends Dict = Dict,\n>({\n value: valueProp,\n defaultValue = [],\n onChange: onChangeProp,\n isNative,\n ...props\n}: UseCheckboxGroupProps<Y> & M) => {\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange: onChangeRef,\n })\n\n const onChange = useCallback(\n (evOrValue: ChangeEvent<HTMLInputElement> | Y) => {\n const isChecked = isEvent(evOrValue)\n ? evOrValue.target.checked\n : !value.includes(evOrValue)\n\n const selectedValue = (\n isEvent(evOrValue) ? evOrValue.target.value : evOrValue\n ) as Y\n\n const nextValue = isChecked\n ? [...value, selectedValue]\n : value.filter((v) => String(v) !== String(selectedValue))\n\n setValue(nextValue)\n },\n [value, setValue],\n )\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n role: \"group\",\n ...props,\n ref,\n }),\n [],\n )\n\n const getCheckboxProps: UIPropGetter<\n \"input\",\n { value?: Y },\n { value?: Y; isChecked?: boolean }\n > = useCallback(\n (props, ref = null) => ({\n ...props,\n ref,\n [isNative ? \"checked\" : \"isChecked\"]: value.some(\n (val) => String(props?.value) === String(val),\n ),\n onChange,\n }),\n [onChange, isNative, value],\n )\n\n return {\n props,\n value,\n setValue,\n onChange,\n getContainerProps,\n getCheckboxProps,\n }\n}\n\nexport type UseCheckboxGroupReturn<Y extends string | number = string> =\n ReturnType<typeof useCheckboxGroup<Y>>\n\nexport type CheckboxGroupProps<Y extends string | number = string> =\n ThemeProps<\"Checkbox\"> &\n Omit<FlexProps, \"onChange\"> &\n UseCheckboxGroupProps<Y> &\n FormControlOptions & {\n /**\n * If provided, generate checkboxes based on items.\n *\n * @default '[]'\n */\n items?: CheckboxItem<Y>[]\n }\n\ntype CheckboxContext = ThemeProps<\"Checkbox\"> &\n FormControlOptions & {\n value: (string | number)[]\n onChange: (\n evOrValue: ChangeEvent<HTMLInputElement> | string | number,\n ) => void\n }\n\nconst [CheckboxGroupProvider, useCheckboxGroupContext] = createContext<\n CheckboxContext | undefined\n>({\n strict: false,\n name: \"CheckboxGroupContext\",\n})\n\nexport { useCheckboxGroupContext }\n\nexport const CheckboxGroup = forwardRef(\n <Y extends string | number = string>(\n {\n className,\n size,\n variant,\n colorScheme,\n children,\n items = [],\n direction = \"column\",\n gap,\n ...props\n }: CheckboxGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const {\n value,\n onChange,\n props: computedProps,\n getContainerProps,\n } = useCheckboxGroup<Y>(props)\n const { labelId, isRequired, isReadOnly, isDisabled, isInvalid, ...rest } =\n useFormControl(computedProps)\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <Checkbox key={i} value={value} {...props}>\n {label}\n </Checkbox>\n ))\n }\n\n return (\n <CheckboxGroupProvider\n value={\n {\n size,\n variant,\n colorScheme,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n value,\n onChange,\n } as CheckboxContext\n }\n >\n <Flex\n ref={ref}\n className={cx(\"ui-checkbox-group\", className)}\n direction={direction}\n gap={gap ?? (direction === \"row\" ? \"1rem\" : undefined)}\n {...getContainerProps({\n \"aria-labelledby\": labelId,\n ...rest,\n })}\n >\n {children ?? computedChildren}\n </Flex>\n </CheckboxGroupProvider>\n )\n },\n) as {\n <Y extends string | number = string>(\n props: CheckboxGroupProps<Y> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nCheckboxGroup.displayName = \"CheckboxGroup\"\n"],"mappings":"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","names":["import_form_control","import_utils","import_react","props","value","props","import_jsx_runtime","props","_a"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/checkbox.tsx","../src/checkbox-context.tsx","../src/checkbox-group.tsx"],"sourcesContent":["export { Checkbox, CheckboxIcon, useCheckbox } from \"./checkbox\"\nexport type {\n CheckboxProps,\n CheckboxIconProps,\n UseCheckboxProps,\n UseCheckboxReturn,\n} from \"./checkbox\"\nexport { CheckboxGroup, useCheckboxGroup } from \"./checkbox-group\"\nexport type {\n CheckboxItem,\n CheckboxGroupProps,\n UseCheckboxGroupProps,\n UseCheckboxGroupReturn,\n} from \"./checkbox-group\"\n","import type {\n HTMLUIProps,\n ThemeProps,\n ComponentArgs,\n PropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useComponentMultiStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n useFormControl,\n useFormControlProps,\n formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { Dict, Merge } from \"@yamada-ui/utils\"\nimport {\n cx,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n handlerAll,\n dataAttr,\n mergeRefs,\n funcAll,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FC,\n FocusEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n ReactElement,\n SyntheticEvent,\n ForwardedRef,\n Ref,\n} from \"react\"\nimport {\n cloneElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n forwardRef,\n useId,\n} from \"react\"\nimport { useCheckboxGroupContext } from \"./checkbox-context\"\n\nexport interface UseCheckboxProps<Y extends string | number = string>\n extends FormControlOptions {\n /**\n * id assigned to input.\n */\n id?: string\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value to be used in the checkbox input.\n */\n value?: Y\n /**\n * If `true`, the checkbox will be initially checked.\n *\n * @default false\n */\n defaultIsChecked?: boolean\n /**\n * If `true`, the checkbox will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * If `true`, the checkbox will be indeterminate.\n *\n * @default false\n */\n isIndeterminate?: boolean\n /**\n * The callback invoked when the checked state changes.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the checkbox is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the checkbox is blurred.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>\n /**\n * The tab-index property of the underlying input element.\n */\n tabIndex?: number\n}\n\nexport const useCheckbox = <\n Y extends string | number = string,\n M extends Dict = Dict,\n>({\n id,\n ...props\n}: UseCheckboxProps<Y> & M) => {\n id ??= useId()\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n tabIndex,\n isIndeterminate,\n onChange: onChangeProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [\n {\n required,\n disabled,\n readOnly,\n \"aria-readonly\": _ariaReadonly,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...formControlProps\n },\n rest,\n ] = splitObject(computedProps, formControlProperties)\n\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const [isFocused, setFocused] = useState<boolean>(false)\n const [isHovered, setHovered] = useState<boolean>(false)\n const [isActive, setActive] = useState<boolean>(false)\n\n const inputRef = useRef<HTMLInputElement>(null)\n const [isLabel, setIsLabel] = useState<boolean>(true)\n\n const [isChecked, setIsChecked] = useState<boolean>(!!defaultIsChecked)\n\n const isControlled = isCheckedProp !== undefined\n const checked = isControlled ? (isCheckedProp as boolean) : isChecked\n\n const onChange = useCallbackRef(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (readOnly || disabled) {\n ev.preventDefault()\n\n return\n }\n\n if (!isControlled)\n setIsChecked(!checked || isIndeterminate ? true : ev.target.checked)\n\n onChangeProp?.(ev)\n },\n [readOnly, disabled, isControlled, checked, isIndeterminate],\n )\n const onFocus = useCallbackRef(onFocusProp)\n const onBlur = useCallbackRef(onBlurProp)\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n useSafeLayoutEffect(() => {\n if (inputRef.current)\n inputRef.current.indeterminate = Boolean(isIndeterminate)\n }, [isIndeterminate])\n\n useUpdateEffect(() => {\n if (disabled) setFocused(false)\n }, [disabled, setFocused])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current?.form) return\n\n inputRef.current.form.onreset = () => setIsChecked(!!defaultIsChecked)\n }, [])\n\n useSafeLayoutEffect(() => {\n if (!inputRef.current) return\n\n if (inputRef.current.checked !== checked)\n setIsChecked(inputRef.current.checked)\n }, [inputRef.current])\n\n const getContainerProps: PropGetter<\"label\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, (el: HTMLElement | undefined) => {\n if (el) setIsLabel(el.tagName === \"LABEL\")\n }),\n \"data-checked\": dataAttr(checked),\n onClick: handlerAll(props.onClick, () => {\n if (isLabel) return\n\n inputRef.current?.click()\n\n requestAnimationFrame(() => inputRef.current?.focus())\n }),\n }),\n [checked, isLabel, formControlProps],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-active\": dataAttr(isActive),\n \"data-hover\": dataAttr(isHovered),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(isFocused),\n \"data-focus-visible\": dataAttr(isFocused && isFocusVisible),\n \"data-indeterminate\": dataAttr(isIndeterminate),\n \"aria-hidden\": true,\n onMouseDown: handlerAll(props.onMouseDown, (ev: React.MouseEvent) => {\n if (isFocused) ev.preventDefault()\n\n setActive(true)\n }),\n onMouseUp: handlerAll(props.onMouseUp, () => setActive(false)),\n onMouseEnter: handlerAll(props.onMouseEnter, () => setHovered(true)),\n onMouseLeave: handlerAll(props.onMouseLeave, () => setHovered(false)),\n }),\n [\n isActive,\n checked,\n isFocused,\n isHovered,\n isFocusVisible,\n isIndeterminate,\n formControlProps,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(inputRef, ref),\n id,\n type: \"checkbox\",\n name,\n value,\n tabIndex,\n required,\n disabled,\n readOnly,\n checked,\n \"aria-checked\": isIndeterminate ? \"mixed\" : checked,\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, onChange),\n onBlur: handlerAll(props.onBlur, onBlur, () => setFocused(false)),\n onFocus: handlerAll(props.onFocus, onFocus, () => setFocused(true)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onKeyUp: handlerAll(props.onKeyUp, onKeyUp),\n }),\n [\n isIndeterminate,\n formControlProps,\n id,\n name,\n value,\n tabIndex,\n required,\n disabled,\n readOnly,\n checked,\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n onKeyUp,\n ],\n )\n\n const getLabelProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-checked\": dataAttr(checked),\n onMouseDown: handlerAll(props.onMouseDown, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n onTouchStart: handlerAll(props.onTouchStart, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n }),\n [checked, formControlProps],\n )\n\n return {\n props: rest,\n isFocusVisible,\n isFocused,\n isHovered,\n isActive,\n isChecked: checked,\n isIndeterminate,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n\ninterface CheckboxOptions {\n /**\n * Props for icon component.\n */\n iconProps?: Omit<HTMLUIProps<\"span\">, \"children\"> & { children: ReactElement }\n /**\n * Props for input element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n /**\n * Props for label element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface CheckboxProps<Y extends string | number = string>\n extends Omit<Merge<HTMLUIProps<\"label\">, UseCheckboxProps<Y>>, \"checked\">,\n ThemeProps<\"Checkbox\">,\n CheckboxOptions {}\n\n/**\n * `Checkbox` is a component used for allowing users to select multiple values from multiple options.\n *\n * @see Docs https://yamada-ui.com/components/forms/checkbox\n */\nexport const Checkbox = forwardRef(\n <Y extends string | number = string>(\n props: CheckboxProps<Y>,\n ref: ForwardedRef<HTMLInputElement>,\n ) => {\n const group = useCheckboxGroupContext()\n const { value: groupValue, ...groupProps } = { ...group }\n const control = useFormControl(props)\n const [styles, mergedProps] = useComponentMultiStyle(\"Checkbox\", {\n ...groupProps,\n ...props,\n })\n const {\n className,\n gap = \"0.5rem\",\n isRequired = groupProps.isRequired ?? control.isRequired,\n isReadOnly = groupProps.isReadOnly ?? control.isReadOnly,\n isDisabled = groupProps.isDisabled ?? control.isDisabled,\n isInvalid = groupProps.isInvalid ?? control.isInvalid,\n iconProps,\n inputProps,\n labelProps,\n children,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const isCheckedProp =\n groupValue && computedProps.value\n ? groupValue.includes(computedProps.value)\n : computedProps.isChecked\n const onChange =\n groupProps.onChange && computedProps.value\n ? funcAll(groupProps.onChange, computedProps.onChange)\n : computedProps.onChange\n\n const {\n isChecked,\n isIndeterminate,\n getContainerProps,\n getInputProps,\n getIconProps,\n getLabelProps,\n props: rest,\n } = useCheckbox({\n ...computedProps,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n isChecked: isCheckedProp,\n onChange,\n })\n\n const { children: customIcon, ...resolvedIconProps } = { ...iconProps }\n const cloneIcon = cloneElement(customIcon ?? <CheckboxIcon />, {\n __css: {\n opacity: isChecked || isIndeterminate ? 1 : 0,\n transform: isChecked || isIndeterminate ? \"scale(1)\" : \"scale(0.95)\",\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n },\n isIndeterminate,\n isChecked,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n })\n\n return (\n <ui.label\n className={cx(\"ui-checkbox\", className)}\n {...getContainerProps()}\n __css={{\n cursor: \"pointer\",\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n verticalAlign: \"top\",\n gap,\n ...styles.container,\n }}\n {...rest}\n >\n <ui.input\n className=\"ui-checkbox__input\"\n {...getInputProps(inputProps, ref)}\n />\n\n <ui.span\n className=\"ui-checkbox__icon\"\n __css={{\n pointerEvents: isReadOnly ? \"none\" : undefined,\n position: \"relative\",\n display: \"inline-block\",\n userSelect: \"none\",\n ...styles.icon,\n }}\n {...getIconProps(resolvedIconProps)}\n >\n {cloneIcon}\n </ui.span>\n\n <ui.span\n className=\"ui-checkbox__label\"\n __css={{ ...styles.label }}\n {...getLabelProps(labelProps)}\n >\n {children}\n </ui.span>\n </ui.label>\n )\n },\n) as {\n <Y extends string | number = string>(\n props: CheckboxProps<Y> & { ref?: Ref<HTMLInputElement> },\n ): JSX.Element\n} & ComponentArgs\n\nCheckbox.displayName = \"Checkbox\"\n\nexport type CheckboxIconProps = MotionProps<\"svg\"> &\n FormControlOptions & {\n /**\n * If `true`, the icon will be indeterminate.\n *\n * @default false\n */\n isIndeterminate?: boolean\n /**\n * If `true`, the icon will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n }\n\nexport const CheckboxIcon: FC<CheckboxIconProps> = ({\n isIndeterminate,\n isChecked,\n isRequired: _isRequired,\n isReadOnly: _isReadOnly,\n isDisabled: _isDisabled,\n isInvalid: _isInvalid,\n ...rest\n}) => {\n return (\n <AnimatePresence initial={false}>\n {isIndeterminate || isChecked ? (\n <ui.div\n __css={{\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n }}\n >\n <motion.div\n variants={{\n unchecked: { scale: 0.5 },\n checked: { scale: 1 },\n }}\n initial=\"unchecked\"\n animate=\"checked\"\n exit=\"unchecked\"\n style={\n {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n } as CSSProperties\n }\n >\n {isIndeterminate ? (\n <IndeterminateIcon {...rest} />\n ) : (\n <CheckIcon {...rest} />\n )}\n </motion.div>\n </ui.div>\n ) : null}\n </AnimatePresence>\n )\n}\n\nconst CheckIcon: FC<MotionProps<\"svg\">> = (props) => {\n return (\n <motion.svg\n width=\"1.2em\"\n viewBox=\"0 0 12 10\"\n variants={{\n unchecked: {\n opacity: 0,\n strokeDashoffset: 16,\n },\n checked: {\n opacity: 1,\n strokeDashoffset: 0,\n transition: { duration: 0.2 },\n },\n }}\n style={{\n fill: \"none\",\n strokeWidth: 2,\n stroke: \"currentColor\",\n strokeDasharray: 16,\n }}\n {...props}\n >\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </motion.svg>\n )\n}\n\nconst IndeterminateIcon: FC<MotionProps<\"svg\">> = (props) => {\n return (\n <motion.svg\n width=\"1.2em\"\n viewBox=\"0 0 24 24\"\n variants={{\n unchecked: {\n scaleX: 0.65,\n opacity: 0,\n },\n checked: {\n scaleX: 1,\n opacity: 1,\n transition: {\n scaleX: { duration: 0 },\n opacity: { duration: 0.02 },\n },\n },\n }}\n style={{ stroke: \"currentColor\", strokeWidth: 4 }}\n {...props}\n >\n <line x1=\"21\" x2=\"3\" y1=\"12\" y2=\"12\" />\n </motion.svg>\n )\n}\n","import type { ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { ChangeEvent } from \"react\"\n\nexport interface CheckboxGroupContext\n extends ThemeProps<\"Checkbox\">,\n FormControlOptions {\n value: (string | number)[]\n onChange: (evOrValue: ChangeEvent<HTMLInputElement> | string | number) => void\n}\n\nexport const [CheckboxGroupProvider, useCheckboxGroupContext] = createContext<\n CheckboxGroupContext | undefined\n>({\n strict: false,\n name: \"CheckboxGroupContext\",\n})\n","import type { ComponentArgs, ThemeProps, PropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport type { FlexProps } from \"@yamada-ui/layouts\"\nimport { Flex } from \"@yamada-ui/layouts\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport {\n cx,\n isObject,\n useCallbackRef,\n getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ForwardedRef,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport { forwardRef, useCallback } from \"react\"\nimport type { CheckboxProps } from \"./checkbox\"\nimport { Checkbox } from \"./checkbox\"\nimport type { CheckboxGroupContext } from \"./checkbox-context\"\nimport { CheckboxGroupProvider } from \"./checkbox-context\"\n\nexport interface CheckboxItem<Y extends string | number = string>\n extends CheckboxProps<Y> {\n label?: string\n}\n\nconst isEvent = (value: any): value is { target: HTMLInputElement } =>\n value && isObject(value) && isObject(value.target)\n\nexport interface UseCheckboxGroupProps<Y extends string | number = string> {\n /**\n * The value of the checkbox group.\n */\n value?: Y[]\n /**\n * The initial value of the checkbox group.\n */\n defaultValue?: Y[]\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y[]) => void\n /**\n * If `true`, input elements will receive `checked` attribute instead of `isChecked`.\n *\n * This assumes, you're using native radio inputs.\n *\n * @default false\n */\n isNative?: boolean\n}\n\nexport const useCheckboxGroup = <\n Y extends string | number,\n M extends Dict = Dict,\n>({\n value: valueProp,\n defaultValue = [],\n onChange: onChangeProp,\n isNative,\n ...props\n}: UseCheckboxGroupProps<Y> & M) => {\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange: onChangeRef,\n })\n\n const onChange = useCallback(\n (evOrValue: ChangeEvent<HTMLInputElement> | Y) => {\n const isChecked = isEvent(evOrValue)\n ? evOrValue.target.checked\n : !value.includes(evOrValue)\n\n const selectedValue = (\n isEvent(evOrValue) ? evOrValue.target.value : evOrValue\n ) as Y\n\n const nextValue = isChecked\n ? [...value, selectedValue]\n : value.filter((v) => String(v) !== String(selectedValue))\n\n setValue(nextValue)\n },\n [value, setValue],\n )\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n role: \"group\",\n ...props,\n ref,\n }),\n [],\n )\n\n const getCheckboxProps: PropGetter<\n { value?: Y },\n { value?: Y; checked?: boolean; isChecked?: boolean }\n > = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n [isNative ? \"checked\" : \"isChecked\"]: value.some(\n (val) => String(props?.value) === String(val),\n ),\n onChange,\n }),\n [onChange, isNative, value],\n )\n\n return {\n props,\n value,\n setValue,\n onChange,\n getContainerProps,\n getCheckboxProps,\n }\n}\n\nexport type UseCheckboxGroupReturn<Y extends string | number = string> =\n ReturnType<typeof useCheckboxGroup<Y>>\n\nexport interface CheckboxGroupProps<Y extends string | number = string>\n extends ThemeProps<\"Checkbox\">,\n Omit<FlexProps, \"defaultValue\" | \"onChange\">,\n UseCheckboxGroupProps<Y>,\n FormControlOptions {\n /**\n * If provided, generate checkboxes based on items.\n *\n * @default '[]'\n */\n items?: CheckboxItem<Y>[]\n}\n\nexport const CheckboxGroup = forwardRef(\n <Y extends string | number = string>(\n {\n className,\n size,\n variant,\n colorScheme,\n children,\n items = [],\n direction = \"column\",\n gap,\n ...props\n }: CheckboxGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const {\n value,\n onChange,\n props: computedProps,\n getContainerProps,\n } = useCheckboxGroup<Y>(props)\n const { labelId, isRequired, isReadOnly, isDisabled, isInvalid, ...rest } =\n useFormControl(computedProps)\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <Checkbox key={i} value={value} {...props}>\n {label}\n </Checkbox>\n ))\n }\n\n return (\n <CheckboxGroupProvider\n value={\n {\n size,\n variant,\n colorScheme,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n value,\n onChange,\n } as CheckboxGroupContext\n }\n >\n <Flex\n ref={ref}\n className={cx(\"ui-checkbox-group\", className)}\n direction={direction}\n gap={gap ?? (direction === \"row\" ? \"1rem\" : undefined)}\n {...getContainerProps({\n \"aria-labelledby\": labelId,\n ...rest,\n })}\n >\n {children ?? computedChildren}\n </Flex>\n </CheckboxGroupProvider>\n )\n },\n) as {\n <Y extends string | number = string>(\n props: CheckboxGroupProps<Y> & RefAttributes<HTMLDivElement>,\n ): JSX.Element\n} & ComponentArgs\n\nCheckboxGroup.displayName = \"CheckboxGroup\"\n"],"mappings":"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","names":["import_utils","props","_a","import_form_control","import_utils","import_react","import_jsx_runtime","props","value"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
|
-
Checkbox,
|
|
4
3
|
CheckboxGroup,
|
|
5
|
-
CheckboxIcon,
|
|
6
|
-
useCheckbox,
|
|
7
4
|
useCheckboxGroup
|
|
8
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-J27S43KM.mjs";
|
|
6
|
+
import {
|
|
7
|
+
Checkbox,
|
|
8
|
+
CheckboxIcon,
|
|
9
|
+
useCheckbox
|
|
10
|
+
} from "./chunk-LP6DPNQY.mjs";
|
|
11
|
+
import "./chunk-IZINMNYX.mjs";
|
|
9
12
|
export {
|
|
10
13
|
Checkbox,
|
|
11
14
|
CheckboxGroup,
|