@yamada-ui/checkbox 0.2.5 → 0.2.6
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-group.d.mts +59 -0
- package/dist/checkbox.d.mts +151 -0
- package/dist/checkbox.js +3 -10
- package/dist/checkbox.mjs +1 -1
- package/dist/{chunk-EHSLGZE4.mjs → chunk-WVRSPWMY.mjs} +3 -10
- package/dist/index.d.mts +8 -0
- package/dist/index.js +3 -10
- package/dist/index.mjs +1 -1
- package/package.json +8 -8
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ChangeEvent, Ref } from 'react';
|
|
3
|
+
import { ThemeProps, ComponentArgs } from '@yamada-ui/core';
|
|
4
|
+
import { FormControlOptions } from '@yamada-ui/form-control';
|
|
5
|
+
import { FlexProps } from '@yamada-ui/layouts';
|
|
6
|
+
import { PropGetter, DOMAttributes } from '@yamada-ui/utils';
|
|
7
|
+
|
|
8
|
+
type UseCheckboxGroupProps<Y extends string | number = string> = {
|
|
9
|
+
/**
|
|
10
|
+
* The value of the checkbox group.
|
|
11
|
+
*/
|
|
12
|
+
value?: Y[];
|
|
13
|
+
/**
|
|
14
|
+
* The initial value of the checkbox group.
|
|
15
|
+
*/
|
|
16
|
+
defaultValue?: Y[];
|
|
17
|
+
/**
|
|
18
|
+
* The callback fired when any children checkbox is checked or unchecked.
|
|
19
|
+
*/
|
|
20
|
+
onChange?: (value: Y[]) => void;
|
|
21
|
+
/**
|
|
22
|
+
* If `true`, input elements will receive `checked` attribute instead of `isChecked`.
|
|
23
|
+
*
|
|
24
|
+
* This assumes, you're using native radio inputs.
|
|
25
|
+
*
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
isNative?: boolean;
|
|
29
|
+
};
|
|
30
|
+
declare const useCheckboxGroup: <Y extends string | number = string>({ isNative, ...props }: UseCheckboxGroupProps<Y>) => {
|
|
31
|
+
value: Y[];
|
|
32
|
+
setValue: react.Dispatch<react.SetStateAction<Y[]>>;
|
|
33
|
+
onChange: (evOrValue: Y | ChangeEvent<HTMLInputElement>) => void;
|
|
34
|
+
getCheckboxProps: PropGetter<react.AriaAttributes & react.DOMAttributes<HTMLInputElement> & {
|
|
35
|
+
[dataAttr: string]: any;
|
|
36
|
+
} & {
|
|
37
|
+
id?: string | undefined;
|
|
38
|
+
role?: react.AriaRole | undefined;
|
|
39
|
+
tabIndex?: number | undefined;
|
|
40
|
+
style?: react.CSSProperties | undefined;
|
|
41
|
+
} & {
|
|
42
|
+
isChecked?: boolean | undefined;
|
|
43
|
+
}, Omit<DOMAttributes<HTMLInputElement>, "onChange"> & {
|
|
44
|
+
onChange: (ev: Y | ChangeEvent<HTMLInputElement>) => void;
|
|
45
|
+
}>;
|
|
46
|
+
};
|
|
47
|
+
type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>;
|
|
48
|
+
type CheckboxGroupProps<Y extends string | number = string> = ThemeProps<'Checkbox'> & Omit<FlexProps, 'onChange'> & UseCheckboxGroupProps<Y> & FormControlOptions;
|
|
49
|
+
type CheckboxContext = ThemeProps<'Checkbox'> & FormControlOptions & {
|
|
50
|
+
value: (string | number)[];
|
|
51
|
+
onChange: (evOrValue: ChangeEvent<HTMLInputElement> | string | number) => void;
|
|
52
|
+
};
|
|
53
|
+
declare const useCheckboxGroupContext: () => CheckboxContext | undefined;
|
|
54
|
+
|
|
55
|
+
declare const CheckboxGroup: (<Y extends string | number = string>(props: ThemeProps<"Checkbox"> & Omit<FlexProps, "onChange"> & UseCheckboxGroupProps<Y> & FormControlOptions & {
|
|
56
|
+
ref?: Ref<HTMLDivElement> | undefined;
|
|
57
|
+
}) => JSX.Element) & ComponentArgs;
|
|
58
|
+
|
|
59
|
+
export { CheckboxGroup, CheckboxGroupProps, UseCheckboxGroupProps, UseCheckboxGroupReturn, useCheckboxGroup, useCheckboxGroupContext };
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import { HTMLUIProps, ThemeProps, ComponentArgs } from '@yamada-ui/core';
|
|
2
|
+
import { FormControlOptions } from '@yamada-ui/form-control';
|
|
3
|
+
import { SVGMotionProps } from '@yamada-ui/motion';
|
|
4
|
+
import { PropGetter } from '@yamada-ui/utils';
|
|
5
|
+
import { ChangeEventHandler, FocusEventHandler, Ref, FC, ReactElement, InputHTMLAttributes } from 'react';
|
|
6
|
+
|
|
7
|
+
type UseCheckboxProps<Y extends string | number = string> = FormControlOptions & {
|
|
8
|
+
/**
|
|
9
|
+
* id assigned to input.
|
|
10
|
+
*/
|
|
11
|
+
id?: string;
|
|
12
|
+
/**
|
|
13
|
+
* The HTML `name` attribute used for forms.
|
|
14
|
+
*/
|
|
15
|
+
name?: string;
|
|
16
|
+
/**
|
|
17
|
+
* The value to be used in the checkbox input.
|
|
18
|
+
*/
|
|
19
|
+
value?: Y;
|
|
20
|
+
/**
|
|
21
|
+
* If `true`, the checkbox will be initially checked.
|
|
22
|
+
*
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
defaultChecked?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* If `true`, the checkbox will be checked.
|
|
28
|
+
*
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
isChecked?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* If `true`, the checkbox will be indeterminate.
|
|
34
|
+
*
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
isIndeterminate?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* The callback invoked when the checked state changes.
|
|
40
|
+
*/
|
|
41
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
42
|
+
/**
|
|
43
|
+
* The callback invoked when the checkbox is focused.
|
|
44
|
+
*/
|
|
45
|
+
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
46
|
+
/**
|
|
47
|
+
* The callback invoked when the checkbox is blurred.
|
|
48
|
+
*/
|
|
49
|
+
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
50
|
+
/**
|
|
51
|
+
* The tab-index property of the underlying input element.
|
|
52
|
+
*/
|
|
53
|
+
tabIndex?: number;
|
|
54
|
+
};
|
|
55
|
+
declare const useCheckbox: <Y extends string | number = string>(props: UseCheckboxProps<Y>) => {
|
|
56
|
+
isFocusVisible: boolean;
|
|
57
|
+
isFocused: boolean;
|
|
58
|
+
isHovered: boolean;
|
|
59
|
+
isActive: boolean;
|
|
60
|
+
isChecked: boolean;
|
|
61
|
+
isIndeterminate: boolean | undefined;
|
|
62
|
+
getContainerProps: PropGetter;
|
|
63
|
+
getIconProps: PropGetter;
|
|
64
|
+
getInputProps: PropGetter;
|
|
65
|
+
getLabelProps: PropGetter;
|
|
66
|
+
};
|
|
67
|
+
type UseCheckboxReturn = ReturnType<typeof useCheckbox>;
|
|
68
|
+
type CheckboxOptions = {
|
|
69
|
+
/**
|
|
70
|
+
* Props for icon component.
|
|
71
|
+
*/
|
|
72
|
+
iconProps?: Omit<HTMLUIProps<'span'>, 'children'> & {
|
|
73
|
+
children: ReactElement;
|
|
74
|
+
};
|
|
75
|
+
/**
|
|
76
|
+
* Props for input element.
|
|
77
|
+
*/
|
|
78
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
79
|
+
/**
|
|
80
|
+
* Props for label element.
|
|
81
|
+
*/
|
|
82
|
+
labelProps?: HTMLUIProps<'span'>;
|
|
83
|
+
};
|
|
84
|
+
type CheckboxProps<Y extends string | number = string> = Omit<HTMLUIProps<'label'>, keyof UseCheckboxProps | 'checked'> & ThemeProps<'Checkbox'> & UseCheckboxProps<Y> & CheckboxOptions;
|
|
85
|
+
declare const Checkbox: (<Y extends string | number = string>(props: Omit<HTMLUIProps<"label">, "id" | "onFocus" | "onBlur" | keyof FormControlOptions | "name" | "value" | "defaultChecked" | "tabIndex" | "isIndeterminate" | "isChecked" | "onChange" | "checked"> & ThemeProps<"Checkbox"> & FormControlOptions & {
|
|
86
|
+
/**
|
|
87
|
+
* id assigned to input.
|
|
88
|
+
*/
|
|
89
|
+
id?: string | undefined;
|
|
90
|
+
/**
|
|
91
|
+
* The HTML `name` attribute used for forms.
|
|
92
|
+
*/
|
|
93
|
+
name?: string | undefined;
|
|
94
|
+
/**
|
|
95
|
+
* The value to be used in the checkbox input.
|
|
96
|
+
*/
|
|
97
|
+
value?: Y | undefined;
|
|
98
|
+
/**
|
|
99
|
+
* If `true`, the checkbox will be initially checked.
|
|
100
|
+
*
|
|
101
|
+
* @default false
|
|
102
|
+
*/
|
|
103
|
+
defaultChecked?: boolean | undefined;
|
|
104
|
+
/**
|
|
105
|
+
* If `true`, the checkbox will be checked.
|
|
106
|
+
*
|
|
107
|
+
* @default false
|
|
108
|
+
*/
|
|
109
|
+
isChecked?: boolean | undefined;
|
|
110
|
+
/**
|
|
111
|
+
* If `true`, the checkbox will be indeterminate.
|
|
112
|
+
*
|
|
113
|
+
* @default false
|
|
114
|
+
*/
|
|
115
|
+
isIndeterminate?: boolean | undefined;
|
|
116
|
+
/**
|
|
117
|
+
* The callback invoked when the checked state changes.
|
|
118
|
+
*/
|
|
119
|
+
onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
|
|
120
|
+
/**
|
|
121
|
+
* The callback invoked when the checkbox is focused.
|
|
122
|
+
*/
|
|
123
|
+
onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
|
|
124
|
+
/**
|
|
125
|
+
* The callback invoked when the checkbox is blurred.
|
|
126
|
+
*/
|
|
127
|
+
onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
|
|
128
|
+
/**
|
|
129
|
+
* The tab-index property of the underlying input element.
|
|
130
|
+
*/
|
|
131
|
+
tabIndex?: number | undefined;
|
|
132
|
+
} & CheckboxOptions & {
|
|
133
|
+
ref?: Ref<HTMLInputElement> | undefined;
|
|
134
|
+
}) => JSX.Element) & ComponentArgs;
|
|
135
|
+
type CheckboxIconProps = HTMLUIProps<'svg'> & SVGMotionProps<SVGSVGElement> & FormControlOptions & {
|
|
136
|
+
/**
|
|
137
|
+
* If `true`, the icon will be indeterminate.
|
|
138
|
+
*
|
|
139
|
+
* @default false
|
|
140
|
+
*/
|
|
141
|
+
isIndeterminate?: boolean;
|
|
142
|
+
/**
|
|
143
|
+
* If `true`, the icon will be checked.
|
|
144
|
+
*
|
|
145
|
+
* @default false
|
|
146
|
+
*/
|
|
147
|
+
isChecked?: boolean;
|
|
148
|
+
};
|
|
149
|
+
declare const CheckboxIcon: FC<CheckboxIconProps>;
|
|
150
|
+
|
|
151
|
+
export { Checkbox, CheckboxIcon, CheckboxIconProps, CheckboxProps, UseCheckboxProps, UseCheckboxReturn, useCheckbox };
|
package/dist/checkbox.js
CHANGED
|
@@ -441,15 +441,8 @@ var Checkbox = (0, import_react2.forwardRef)(
|
|
|
441
441
|
}
|
|
442
442
|
);
|
|
443
443
|
Checkbox.displayName = "Checkbox";
|
|
444
|
-
var CheckboxIcon = ({
|
|
445
|
-
|
|
446
|
-
isChecked,
|
|
447
|
-
isRequired,
|
|
448
|
-
isReadOnly,
|
|
449
|
-
isDisabled,
|
|
450
|
-
isInvalid,
|
|
451
|
-
...rest
|
|
452
|
-
}) => {
|
|
444
|
+
var CheckboxIcon = ({ isIndeterminate, isChecked, ...rest }) => {
|
|
445
|
+
const iconProps = (0, import_utils2.omitObject)(rest, ["isRequired", "isReadOnly", "isDisabled", "isInvalid"]);
|
|
453
446
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_motion.AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
454
447
|
import_core.ui.div,
|
|
455
448
|
{
|
|
@@ -475,7 +468,7 @@ var CheckboxIcon = ({
|
|
|
475
468
|
alignItems: "center",
|
|
476
469
|
justifyContent: "center"
|
|
477
470
|
},
|
|
478
|
-
children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IndeterminateIcon, { ...
|
|
471
|
+
children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IndeterminateIcon, { ...iconProps }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, { ...iconProps })
|
|
479
472
|
}
|
|
480
473
|
)
|
|
481
474
|
}
|
package/dist/checkbox.mjs
CHANGED
|
@@ -344,15 +344,8 @@ var Checkbox = forwardRef(
|
|
|
344
344
|
}
|
|
345
345
|
);
|
|
346
346
|
Checkbox.displayName = "Checkbox";
|
|
347
|
-
var CheckboxIcon = ({
|
|
348
|
-
|
|
349
|
-
isChecked,
|
|
350
|
-
isRequired,
|
|
351
|
-
isReadOnly,
|
|
352
|
-
isDisabled,
|
|
353
|
-
isInvalid,
|
|
354
|
-
...rest
|
|
355
|
-
}) => {
|
|
347
|
+
var CheckboxIcon = ({ isIndeterminate, isChecked, ...rest }) => {
|
|
348
|
+
const iconProps = omitObject(rest, ["isRequired", "isReadOnly", "isDisabled", "isInvalid"]);
|
|
356
349
|
return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ jsx(
|
|
357
350
|
ui.div,
|
|
358
351
|
{
|
|
@@ -378,7 +371,7 @@ var CheckboxIcon = ({
|
|
|
378
371
|
alignItems: "center",
|
|
379
372
|
justifyContent: "center"
|
|
380
373
|
},
|
|
381
|
-
children: isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateIcon, { ...
|
|
374
|
+
children: isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateIcon, { ...iconProps }) : /* @__PURE__ */ jsx(CheckIcon, { ...iconProps })
|
|
382
375
|
}
|
|
383
376
|
)
|
|
384
377
|
}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { Checkbox, CheckboxIcon, CheckboxIconProps, CheckboxProps, UseCheckboxProps, UseCheckboxReturn, useCheckbox } from './checkbox.mjs';
|
|
2
|
+
export { CheckboxGroup, CheckboxGroupProps, UseCheckboxGroupProps, useCheckboxGroup } from './checkbox-group.mjs';
|
|
3
|
+
import '@yamada-ui/core';
|
|
4
|
+
import '@yamada-ui/form-control';
|
|
5
|
+
import '@yamada-ui/motion';
|
|
6
|
+
import '@yamada-ui/utils';
|
|
7
|
+
import 'react';
|
|
8
|
+
import '@yamada-ui/layouts';
|
package/dist/index.js
CHANGED
|
@@ -445,15 +445,8 @@ var Checkbox = (0, import_react2.forwardRef)(
|
|
|
445
445
|
}
|
|
446
446
|
);
|
|
447
447
|
Checkbox.displayName = "Checkbox";
|
|
448
|
-
var CheckboxIcon = ({
|
|
449
|
-
|
|
450
|
-
isChecked,
|
|
451
|
-
isRequired,
|
|
452
|
-
isReadOnly,
|
|
453
|
-
isDisabled,
|
|
454
|
-
isInvalid,
|
|
455
|
-
...rest
|
|
456
|
-
}) => {
|
|
448
|
+
var CheckboxIcon = ({ isIndeterminate, isChecked, ...rest }) => {
|
|
449
|
+
const iconProps = (0, import_utils2.omitObject)(rest, ["isRequired", "isReadOnly", "isDisabled", "isInvalid"]);
|
|
457
450
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_motion.AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
458
451
|
import_core.ui.div,
|
|
459
452
|
{
|
|
@@ -479,7 +472,7 @@ var CheckboxIcon = ({
|
|
|
479
472
|
alignItems: "center",
|
|
480
473
|
justifyContent: "center"
|
|
481
474
|
},
|
|
482
|
-
children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IndeterminateIcon, { ...
|
|
475
|
+
children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IndeterminateIcon, { ...iconProps }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, { ...iconProps })
|
|
483
476
|
}
|
|
484
477
|
)
|
|
485
478
|
}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/checkbox",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.6",
|
|
4
4
|
"description": "Yamada UI checkbox component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@yamada-ui/core": "0.
|
|
39
|
-
"@yamada-ui/utils": "0.1.
|
|
40
|
-
"@yamada-ui/layouts": "0.2.
|
|
41
|
-
"@yamada-ui/form-control": "0.2.
|
|
42
|
-
"@yamada-ui/motion": "0.3.
|
|
43
|
-
"@yamada-ui/use-focus-visible": "0.1.
|
|
44
|
-
"@yamada-ui/use-controllable-state": "0.1.
|
|
38
|
+
"@yamada-ui/core": "0.5.0",
|
|
39
|
+
"@yamada-ui/utils": "0.1.3",
|
|
40
|
+
"@yamada-ui/layouts": "0.2.5",
|
|
41
|
+
"@yamada-ui/form-control": "0.2.5",
|
|
42
|
+
"@yamada-ui/motion": "0.3.3",
|
|
43
|
+
"@yamada-ui/use-focus-visible": "0.1.3",
|
|
44
|
+
"@yamada-ui/use-controllable-state": "0.1.4"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"react": "^18.0.0",
|