@yamada-ui/checkbox 2.0.0-next-20240619220221 → 2.0.0-next-20240703154117

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) hide show
  1. package/dist/checkbox-group.d.mts +10 -7
  2. package/dist/checkbox-group.d.ts +10 -7
  3. package/dist/checkbox-group.js +29 -5
  4. package/dist/checkbox-group.js.map +1 -1
  5. package/dist/checkbox-group.mjs +1 -1
  6. package/dist/checkbox.d.mts +31 -29
  7. package/dist/checkbox.d.ts +31 -29
  8. package/dist/checkbox.js +29 -5
  9. package/dist/checkbox.js.map +1 -1
  10. package/dist/checkbox.mjs +1 -1
  11. package/dist/{chunk-OBMC7JBH.mjs → chunk-U2KDBDCH.mjs} +30 -6
  12. package/dist/chunk-U2KDBDCH.mjs.map +1 -0
  13. package/dist/index.js +29 -5
  14. package/dist/index.js.map +1 -1
  15. package/dist/index.mjs +1 -1
  16. package/package.json +8 -8
  17. package/dist/chunk-OBMC7JBH.mjs.map +0 -1
package/dist/checkbox-group.d.mts CHANGED
@@ -4,7 +4,7 @@ import { ChangeEvent, Ref } from 'react';
4
4
  import { UIPropGetter, ThemeProps, ComponentArgs } from '@yamada-ui/core';
5
5
  import { FormControlOptions } from '@yamada-ui/form-control';
6
6
  import { FlexProps } from '@yamada-ui/layouts';
7
- import { Dict } from '@yamada-ui/utils';
7
+ import { Dict, PropGetter } from '@yamada-ui/utils';
8
8
  import '@yamada-ui/motion';
9
9
 
10
10
  type CheckboxItem<Y extends string | number = string> = CheckboxProps<Y> & {
@@ -37,11 +37,12 @@ declare const useCheckboxGroup: <Y extends string | number = string, M extends D
37
37
  value: Y[];
38
38
  setValue: react.Dispatch<react.SetStateAction<Y[]>>;
39
39
  onChange: (evOrValue: ChangeEvent<HTMLInputElement> | Y) => void;
40
+ getContainerProps: PropGetter;
40
41
  getCheckboxProps: UIPropGetter<"input", {
41
- value?: Y | undefined;
42
+ value?: Y;
42
43
  }, {
43
- value?: Y | undefined;
44
- isChecked?: boolean | undefined;
44
+ value?: Y;
45
+ isChecked?: boolean;
45
46
  }>;
46
47
  };
47
48
  type UseCheckboxGroupReturn<Y extends string | number = string> = ReturnType<typeof useCheckboxGroup<Y>>;
@@ -59,8 +60,10 @@ type CheckboxContext = ThemeProps<"Checkbox"> & FormControlOptions & {
59
60
  };
60
61
  declare const useCheckboxGroupContext: () => CheckboxContext | undefined;
61
62
 
62
- declare const CheckboxGroup: (<Y extends string | number = string>(props: CheckboxGroupProps<Y> & {
63
- ref?: Ref<HTMLDivElement>;
64
- }) => JSX.Element) & ComponentArgs;
63
+ declare const CheckboxGroup: {
64
+ <Y extends string | number = string>(props: CheckboxGroupProps<Y> & {
65
+ ref?: Ref<HTMLDivElement>;
66
+ }): JSX.Element;
67
+ } & ComponentArgs;
65
68
 
66
69
  export { CheckboxGroup, type CheckboxGroupProps, type CheckboxItem, type UseCheckboxGroupProps, type UseCheckboxGroupReturn, useCheckboxGroup, useCheckboxGroupContext };
package/dist/checkbox-group.d.ts CHANGED
@@ -4,7 +4,7 @@ import { ChangeEvent, Ref } from 'react';
4
4
  import { UIPropGetter, ThemeProps, ComponentArgs } from '@yamada-ui/core';
5
5
  import { FormControlOptions } from '@yamada-ui/form-control';
6
6
  import { FlexProps } from '@yamada-ui/layouts';
7
- import { Dict } from '@yamada-ui/utils';
7
+ import { Dict, PropGetter } from '@yamada-ui/utils';
8
8
  import '@yamada-ui/motion';
9
9
 
10
10
  type CheckboxItem<Y extends string | number = string> = CheckboxProps<Y> & {
@@ -37,11 +37,12 @@ declare const useCheckboxGroup: <Y extends string | number = string, M extends D
37
37
  value: Y[];
38
38
  setValue: react.Dispatch<react.SetStateAction<Y[]>>;
39
39
  onChange: (evOrValue: ChangeEvent<HTMLInputElement> | Y) => void;
40
+ getContainerProps: PropGetter;
40
41
  getCheckboxProps: UIPropGetter<"input", {
41
- value?: Y | undefined;
42
+ value?: Y;
42
43
  }, {
43
- value?: Y | undefined;
44
- isChecked?: boolean | undefined;
44
+ value?: Y;
45
+ isChecked?: boolean;
45
46
  }>;
46
47
  };
47
48
  type UseCheckboxGroupReturn<Y extends string | number = string> = ReturnType<typeof useCheckboxGroup<Y>>;
@@ -59,8 +60,10 @@ type CheckboxContext = ThemeProps<"Checkbox"> & FormControlOptions & {
59
60
  };
60
61
  declare const useCheckboxGroupContext: () => CheckboxContext | undefined;
61
62
 
62
- declare const CheckboxGroup: (<Y extends string | number = string>(props: CheckboxGroupProps<Y> & {
63
- ref?: Ref<HTMLDivElement>;
64
- }) => JSX.Element) & ComponentArgs;
63
+ declare const CheckboxGroup: {
64
+ <Y extends string | number = string>(props: CheckboxGroupProps<Y> & {
65
+ ref?: Ref<HTMLDivElement>;
66
+ }): JSX.Element;
67
+ } & ComponentArgs;
65
68
 
66
69
  export { CheckboxGroup, type CheckboxGroupProps, type CheckboxItem, type UseCheckboxGroupProps, type UseCheckboxGroupReturn, useCheckboxGroup, useCheckboxGroupContext };
package/dist/checkbox-group.js CHANGED
@@ -181,6 +181,7 @@ var useCheckbox = ({
181
181
  disabled,
182
182
  readOnly,
183
183
  checked,
184
+ "aria-checked": isIndeterminate ? "mixed" : checked,
184
185
  style: {
185
186
  border: "0px",
186
187
  clip: "rect(0px, 0px, 0px, 0px)",
@@ -199,6 +200,7 @@ var useCheckbox = ({
199
200
  onKeyUp: (0, import_utils.handlerAll)(props2.onKeyUp, onKeyUp)
200
201
  }),
201
202
  [
203
+ isIndeterminate,
202
204
  formControlProps,
203
205
  id,
204
206
  name,
@@ -470,6 +472,14 @@ var useCheckboxGroup = ({
470
472
  },
471
473
  [value, setValue]
472
474
  );
475
+ const getContainerProps = (0, import_react2.useCallback)(
476
+ (props2 = {}, ref = null) => ({
477
+ role: "group",
478
+ ...props2,
479
+ ref
480
+ }),
481
+ []
482
+ );
473
483
  const getCheckboxProps = (0, import_react2.useCallback)(
474
484
  (props2, ref = null) => ({
475
485
  ...props2,
@@ -481,7 +491,14 @@ var useCheckboxGroup = ({
481
491
  }),
482
492
  [onChange, isNative, value]
483
493
  );
484
- return { props, value, setValue, onChange, getCheckboxProps };
494
+ return {
495
+ props,
496
+ value,
497
+ setValue,
498
+ onChange,
499
+ getContainerProps,
500
+ getCheckboxProps
501
+ };
485
502
  };
486
503
  var [CheckboxGroupProvider, useCheckboxGroupContext] = (0, import_utils2.createContext)({
487
504
  strict: false,
@@ -499,8 +516,13 @@ var CheckboxGroup = (0, import_react2.forwardRef)(
499
516
  gap,
500
517
  ...props
501
518
  }, ref) => {
502
- const { value, onChange, props: computedProps } = useCheckboxGroup(props);
503
- const { isRequired, isReadOnly, isDisabled, isInvalid, ...rest } = (0, import_form_control2.useFormControl)(computedProps);
519
+ const {
520
+ value,
521
+ onChange,
522
+ props: computedProps,
523
+ getContainerProps
524
+ } = useCheckboxGroup(props);
525
+ const { labelId, isRequired, isReadOnly, isDisabled, isInvalid, ...rest } = (0, import_form_control2.useFormControl)(computedProps);
504
526
  const validChildren = (0, import_utils2.getValidChildren)(children);
505
527
  let computedChildren = [];
506
528
  if (!validChildren.length && items.length) {
@@ -525,10 +547,12 @@ var CheckboxGroup = (0, import_react2.forwardRef)(
525
547
  {
526
548
  ref,
527
549
  className: (0, import_utils2.cx)("ui-checkbox-group", className),
528
- role: "group",
529
550
  direction,
530
551
  gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
531
- ...rest,
552
+ ...getContainerProps({
553
+ "aria-labelledby": labelId,
554
+ ...rest
555
+ }),
532
556
  children: children != null ? children : computedChildren
533
557
  }
534
558
  )
package/dist/checkbox-group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/checkbox-group.tsx","../src/checkbox.tsx"],"sourcesContent":["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 } 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 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 { props, value, setValue, onChange, getCheckboxProps }\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 { value, onChange, props: computedProps } = useCheckboxGroup<Y>(props)\n const { 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 role=\"group\"\n direction={direction}\n gap={gap ?? (direction === \"row\" ? \"1rem\" : undefined)}\n {...rest}\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","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 { SVGMotionProps } 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 required,\n disabled,\n readOnly,\n isIndeterminate,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [{ \"aria-readonly\": _ariaReadonly, ...formControlProps }, 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 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 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 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 ...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 = HTMLUIProps<\"svg\"> &\n SVGMotionProps<SVGSVGElement> &\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 <ui.div\n as={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 </ui.div>\n </ui.div>\n ) : null}\n </AnimatePresence>\n )\n}\n\nconst CheckIcon: FC<HTMLUIProps<\"svg\"> & SVGMotionProps<SVGSVGElement>> = (\n props,\n) => {\n return (\n <ui.svg\n as={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 </ui.svg>\n )\n}\n\nconst IndeterminateIcon: FC<\n HTMLUIProps<\"svg\"> & SVGMotionProps<SVGSVGElement>\n> = (props) => {\n return (\n <ui.svg\n as={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 </ui.svg>\n )\n}\n"],"mappings":"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","names":["import_form_control","import_utils","import_react","props","_a","import_jsx_runtime","props","value","props"]}
1
+ {"version":3,"sources":["../src/checkbox-group.tsx","../src/checkbox.tsx"],"sourcesContent":["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","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 { SVGMotionProps } 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 required,\n disabled,\n readOnly,\n isIndeterminate,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [{ \"aria-readonly\": _ariaReadonly, ...formControlProps }, 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 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 ...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 = HTMLUIProps<\"svg\"> &\n SVGMotionProps<SVGSVGElement> &\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 <ui.div\n as={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 </ui.div>\n </ui.div>\n ) : null}\n </AnimatePresence>\n )\n}\n\nconst CheckIcon: FC<HTMLUIProps<\"svg\"> & SVGMotionProps<SVGSVGElement>> = (\n props,\n) => {\n return (\n <ui.svg\n as={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 </ui.svg>\n )\n}\n\nconst IndeterminateIcon: FC<\n HTMLUIProps<\"svg\"> & SVGMotionProps<SVGSVGElement>\n> = (props) => {\n return (\n <ui.svg\n as={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 </ui.svg>\n )\n}\n"],"mappings":"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","names":["import_form_control","import_utils","import_react","props","_a","import_jsx_runtime","props","value","props"]}
package/dist/checkbox-group.mjs CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  CheckboxGroup,
4
4
  useCheckboxGroup,
5
5
  useCheckboxGroupContext
6
- } from "./chunk-OBMC7JBH.mjs";
6
+ } from "./chunk-U2KDBDCH.mjs";
7
7
  export {
8
8
  CheckboxGroup,
9
9
  useCheckboxGroup,
package/dist/checkbox.d.mts CHANGED
@@ -72,23 +72,23 @@ declare const useCheckbox: <Y extends string | number = string, M extends Dict =
72
72
  onFocus: (event: react.FocusEvent<HTMLElement, Element>) => void;
73
73
  onBlur: (event: react.FocusEvent<HTMLElement, Element>) => void;
74
74
  } & Omit<FormControlOptions & {
75
- id?: string | undefined;
75
+ id?: string;
76
76
  onFocus?: FocusEventHandler<HTMLElement> | undefined;
77
77
  onBlur?: FocusEventHandler<HTMLElement> | undefined;
78
- disabled?: boolean | undefined;
79
- readOnly?: boolean | undefined;
80
- required?: boolean | undefined;
78
+ disabled?: boolean;
79
+ readOnly?: boolean;
80
+ required?: boolean;
81
81
  } & {
82
82
  id: string;
83
83
  } & Omit<FormControlOptions & {
84
84
  /**
85
85
  * id assigned to input.
86
86
  */
87
- id?: string | undefined;
87
+ id?: string;
88
88
  /**
89
89
  * The HTML `name` attribute used for forms.
90
90
  */
91
- name?: string | undefined;
91
+ name?: string;
92
92
  /**
93
93
  * The value to be used in the checkbox input.
94
94
  */
@@ -98,35 +98,35 @@ declare const useCheckbox: <Y extends string | number = string, M extends Dict =
98
98
  *
99
99
  * @default false
100
100
  */
101
- defaultIsChecked?: boolean | undefined;
101
+ defaultIsChecked?: boolean;
102
102
  /**
103
103
  * If `true`, the checkbox will be checked.
104
104
  *
105
105
  * @default false
106
106
  */
107
- isChecked?: boolean | undefined;
107
+ isChecked?: boolean;
108
108
  /**
109
109
  * If `true`, the checkbox will be indeterminate.
110
110
  *
111
111
  * @default false
112
112
  */
113
- isIndeterminate?: boolean | undefined;
113
+ isIndeterminate?: boolean;
114
114
  /**
115
115
  * The callback invoked when the checked state changes.
116
116
  */
117
- onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
117
+ onChange?: ChangeEventHandler<HTMLInputElement>;
118
118
  /**
119
119
  * The callback invoked when the checkbox is focused.
120
120
  */
121
- onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
121
+ onFocus?: FocusEventHandler<HTMLInputElement>;
122
122
  /**
123
123
  * The callback invoked when the checkbox is blurred.
124
124
  */
125
- onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
125
+ onBlur?: FocusEventHandler<HTMLInputElement>;
126
126
  /**
127
127
  * The tab-index property of the underlying input element.
128
128
  */
129
- tabIndex?: number | undefined;
129
+ tabIndex?: number;
130
130
  } & M, "id">, "id" | "onFocus" | "onBlur" | "isRequired" | "isDisabled" | "isInvalid" | "isReadOnly" | "disabled" | "readOnly" | "required">, "id" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "name" | "value" | "defaultIsChecked" | "isChecked" | "isIndeterminate" | "disabled" | "readOnly" | "required">, any>;
131
131
  isFocusVisible: boolean;
132
132
  isFocused: boolean;
@@ -134,23 +134,23 @@ declare const useCheckbox: <Y extends string | number = string, M extends Dict =
134
134
  isActive: boolean;
135
135
  isChecked: boolean;
136
136
  isIndeterminate: (FormControlOptions & {
137
- id?: string | undefined;
137
+ id?: string;
138
138
  onFocus?: FocusEventHandler<HTMLElement> | undefined;
139
139
  onBlur?: FocusEventHandler<HTMLElement> | undefined;
140
- disabled?: boolean | undefined;
141
- readOnly?: boolean | undefined;
142
- required?: boolean | undefined;
140
+ disabled?: boolean;
141
+ readOnly?: boolean;
142
+ required?: boolean;
143
143
  } & {
144
144
  id: string;
145
145
  } & Omit<FormControlOptions & {
146
146
  /**
147
147
  * id assigned to input.
148
148
  */
149
- id?: string | undefined;
149
+ id?: string;
150
150
  /**
151
151
  * The HTML `name` attribute used for forms.
152
152
  */
153
- name?: string | undefined;
153
+ name?: string;
154
154
  /**
155
155
  * The value to be used in the checkbox input.
156
156
  */
@@ -160,35 +160,35 @@ declare const useCheckbox: <Y extends string | number = string, M extends Dict =
160
160
  *
161
161
  * @default false
162
162
  */
163
- defaultIsChecked?: boolean | undefined;
163
+ defaultIsChecked?: boolean;
164
164
  /**
165
165
  * If `true`, the checkbox will be checked.
166
166
  *
167
167
  * @default false
168
168
  */
169
- isChecked?: boolean | undefined;
169
+ isChecked?: boolean;
170
170
  /**
171
171
  * If `true`, the checkbox will be indeterminate.
172
172
  *
173
173
  * @default false
174
174
  */
175
- isIndeterminate?: boolean | undefined;
175
+ isIndeterminate?: boolean;
176
176
  /**
177
177
  * The callback invoked when the checked state changes.
178
178
  */
179
- onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
179
+ onChange?: ChangeEventHandler<HTMLInputElement>;
180
180
  /**
181
181
  * The callback invoked when the checkbox is focused.
182
182
  */
183
- onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
183
+ onFocus?: FocusEventHandler<HTMLInputElement>;
184
184
  /**
185
185
  * The callback invoked when the checkbox is blurred.
186
186
  */
187
- onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
187
+ onBlur?: FocusEventHandler<HTMLInputElement>;
188
188
  /**
189
189
  * The tab-index property of the underlying input element.
190
190
  */
191
- tabIndex?: number | undefined;
191
+ tabIndex?: number;
192
192
  } & M, "id">)["isIndeterminate"] | undefined;
193
193
  getContainerProps: UIPropGetter;
194
194
  getIconProps: UIPropGetter;
@@ -218,9 +218,11 @@ type CheckboxProps<Y extends string | number = string> = Omit<Merge<HTMLUIProps<
218
218
  *
219
219
  * @see Docs https://yamada-ui.com/components/forms/checkbox
220
220
  */
221
- declare const Checkbox: (<Y extends string | number = string>(props: CheckboxProps<Y> & {
222
- ref?: Ref<HTMLInputElement>;
223
- }) => JSX.Element) & ComponentArgs;
221
+ declare const Checkbox: {
222
+ <Y extends string | number = string>(props: CheckboxProps<Y> & {
223
+ ref?: Ref<HTMLInputElement>;
224
+ }): JSX.Element;
225
+ } & ComponentArgs;
224
226
  type CheckboxIconProps = HTMLUIProps<"svg"> & SVGMotionProps<SVGSVGElement> & FormControlOptions & {
225
227
  /**
226
228
  * If `true`, the icon will be indeterminate.
package/dist/checkbox.d.ts CHANGED
@@ -72,23 +72,23 @@ declare const useCheckbox: <Y extends string | number = string, M extends Dict =
72
72
  onFocus: (event: react.FocusEvent<HTMLElement, Element>) => void;
73
73
  onBlur: (event: react.FocusEvent<HTMLElement, Element>) => void;
74
74
  } & Omit<FormControlOptions & {
75
- id?: string | undefined;
75
+ id?: string;
76
76
  onFocus?: FocusEventHandler<HTMLElement> | undefined;
77
77
  onBlur?: FocusEventHandler<HTMLElement> | undefined;
78
- disabled?: boolean | undefined;
79
- readOnly?: boolean | undefined;
80
- required?: boolean | undefined;
78
+ disabled?: boolean;
79
+ readOnly?: boolean;
80
+ required?: boolean;
81
81
  } & {
82
82
  id: string;
83
83
  } & Omit<FormControlOptions & {
84
84
  /**
85
85
  * id assigned to input.
86
86
  */
87
- id?: string | undefined;
87
+ id?: string;
88
88
  /**
89
89
  * The HTML `name` attribute used for forms.
90
90
  */
91
- name?: string | undefined;
91
+ name?: string;
92
92
  /**
93
93
  * The value to be used in the checkbox input.
94
94
  */
@@ -98,35 +98,35 @@ declare const useCheckbox: <Y extends string | number = string, M extends Dict =
98
98
  *
99
99
  * @default false
100
100
  */
101
- defaultIsChecked?: boolean | undefined;
101
+ defaultIsChecked?: boolean;
102
102
  /**
103
103
  * If `true`, the checkbox will be checked.
104
104
  *
105
105
  * @default false
106
106
  */
107
- isChecked?: boolean | undefined;
107
+ isChecked?: boolean;
108
108
  /**
109
109
  * If `true`, the checkbox will be indeterminate.
110
110
  *
111
111
  * @default false
112
112
  */
113
- isIndeterminate?: boolean | undefined;
113
+ isIndeterminate?: boolean;
114
114
  /**
115
115
  * The callback invoked when the checked state changes.
116
116
  */
117
- onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
117
+ onChange?: ChangeEventHandler<HTMLInputElement>;
118
118
  /**
119
119
  * The callback invoked when the checkbox is focused.
120
120
  */
121
- onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
121
+ onFocus?: FocusEventHandler<HTMLInputElement>;
122
122
  /**
123
123
  * The callback invoked when the checkbox is blurred.
124
124
  */
125
- onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
125
+ onBlur?: FocusEventHandler<HTMLInputElement>;
126
126
  /**
127
127
  * The tab-index property of the underlying input element.
128
128
  */
129
- tabIndex?: number | undefined;
129
+ tabIndex?: number;
130
130
  } & M, "id">, "id" | "onFocus" | "onBlur" | "isRequired" | "isDisabled" | "isInvalid" | "isReadOnly" | "disabled" | "readOnly" | "required">, "id" | "tabIndex" | "onFocus" | "onBlur" | "onChange" | "name" | "value" | "defaultIsChecked" | "isChecked" | "isIndeterminate" | "disabled" | "readOnly" | "required">, any>;
131
131
  isFocusVisible: boolean;
132
132
  isFocused: boolean;
@@ -134,23 +134,23 @@ declare const useCheckbox: <Y extends string | number = string, M extends Dict =
134
134
  isActive: boolean;
135
135
  isChecked: boolean;
136
136
  isIndeterminate: (FormControlOptions & {
137
- id?: string | undefined;
137
+ id?: string;
138
138
  onFocus?: FocusEventHandler<HTMLElement> | undefined;
139
139
  onBlur?: FocusEventHandler<HTMLElement> | undefined;
140
- disabled?: boolean | undefined;
141
- readOnly?: boolean | undefined;
142
- required?: boolean | undefined;
140
+ disabled?: boolean;
141
+ readOnly?: boolean;
142
+ required?: boolean;
143
143
  } & {
144
144
  id: string;
145
145
  } & Omit<FormControlOptions & {
146
146
  /**
147
147
  * id assigned to input.
148
148
  */
149
- id?: string | undefined;
149
+ id?: string;
150
150
  /**
151
151
  * The HTML `name` attribute used for forms.
152
152
  */
153
- name?: string | undefined;
153
+ name?: string;
154
154
  /**
155
155
  * The value to be used in the checkbox input.
156
156
  */
@@ -160,35 +160,35 @@ declare const useCheckbox: <Y extends string | number = string, M extends Dict =
160
160
  *
161
161
  * @default false
162
162
  */
163
- defaultIsChecked?: boolean | undefined;
163
+ defaultIsChecked?: boolean;
164
164
  /**
165
165
  * If `true`, the checkbox will be checked.
166
166
  *
167
167
  * @default false
168
168
  */
169
- isChecked?: boolean | undefined;
169
+ isChecked?: boolean;
170
170
  /**
171
171
  * If `true`, the checkbox will be indeterminate.
172
172
  *
173
173
  * @default false
174
174
  */
175
- isIndeterminate?: boolean | undefined;
175
+ isIndeterminate?: boolean;
176
176
  /**
177
177
  * The callback invoked when the checked state changes.
178
178
  */
179
- onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
179
+ onChange?: ChangeEventHandler<HTMLInputElement>;
180
180
  /**
181
181
  * The callback invoked when the checkbox is focused.
182
182
  */
183
- onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
183
+ onFocus?: FocusEventHandler<HTMLInputElement>;
184
184
  /**
185
185
  * The callback invoked when the checkbox is blurred.
186
186
  */
187
- onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
187
+ onBlur?: FocusEventHandler<HTMLInputElement>;
188
188
  /**
189
189
  * The tab-index property of the underlying input element.
190
190
  */
191
- tabIndex?: number | undefined;
191
+ tabIndex?: number;
192
192
  } & M, "id">)["isIndeterminate"] | undefined;
193
193
  getContainerProps: UIPropGetter;
194
194
  getIconProps: UIPropGetter;
@@ -218,9 +218,11 @@ type CheckboxProps<Y extends string | number = string> = Omit<Merge<HTMLUIProps<
218
218
  *
219
219
  * @see Docs https://yamada-ui.com/components/forms/checkbox
220
220
  */
221
- declare const Checkbox: (<Y extends string | number = string>(props: CheckboxProps<Y> & {
222
- ref?: Ref<HTMLInputElement>;
223
- }) => JSX.Element) & ComponentArgs;
221
+ declare const Checkbox: {
222
+ <Y extends string | number = string>(props: CheckboxProps<Y> & {
223
+ ref?: Ref<HTMLInputElement>;
224
+ }): JSX.Element;
225
+ } & ComponentArgs;
224
226
  type CheckboxIconProps = HTMLUIProps<"svg"> & SVGMotionProps<SVGSVGElement> & FormControlOptions & {
225
227
  /**
226
228
  * If `true`, the icon will be indeterminate.