@yamada-ui/checkbox - npm Package Compare versions

Comparing version 1.2.2-next-20241126134247 to 1.3.0-dev-20241127015414

dist/checkbox-context.d.ts

 import * as react from 'react';
-import { ChangeEvent } from 'react';
-import { ThemeProps } from '@yamada-ui/core';
+import { ReactElement, ChangeEvent } from 'react';
+import { ThemeProps, CSSUIObject, PropGetter, HTMLUIProps } from '@yamada-ui/core';
 import { FormControlOptions } from '@yamada-ui/form-control';
+import { CheckboxCardProps } from './checkbox-card.js';
+import '@yamada-ui/utils';
+import './checkbox-card-addon.js';
+import './checkbox-card-description.js';
+import './checkbox-card-label.js';
+import './use-checkbox.js';
 
-interface CheckboxGroupContext extends ThemeProps<"Checkbox">, FormControlOptions {
+interface CheckboxGroupSharedContext extends FormControlOptions {
     value: (number | string)[];
     onChange: (evOrValue: ChangeEvent<HTMLInputElement> | number | string) => void;
 }
+interface CheckboxGroupContext extends CheckboxGroupSharedContext, ThemeProps<"Checkbox">, FormControlOptions {
+}
 declare const CheckboxGroupProvider: react.Provider<CheckboxGroupContext | undefined>;
 declare const useCheckboxGroupContext: () => CheckboxGroupContext | undefined;
+interface CheckboxCardGroupContext extends CheckboxGroupSharedContext, Pick<CheckboxCardProps, "addonProps" | "descriptionProps" | "labelProps" | "withIcon">, ThemeProps<"CheckboxCard"> {
+}
+declare const CheckboxCardGroupProvider: react.Provider<CheckboxCardGroupContext | undefined>;
+declare const useCheckboxCardGroupContext: () => CheckboxCardGroupContext | undefined;
+interface CheckboxCardContext {
+    icon: ReactElement;
+    styles: {
+        [key: string]: CSSUIObject | undefined;
+    };
+    withIcon: boolean;
+    getIconProps: PropGetter;
+    iconProps?: HTMLUIProps;
+}
+declare const CheckboxCardProvider: react.Provider<CheckboxCardContext>;
+declare const useCheckboxCardContext: () => CheckboxCardContext;
 
-export { type CheckboxGroupContext, CheckboxGroupProvider, useCheckboxGroupContext };
+export { type CheckboxCardContext, type CheckboxCardGroupContext, CheckboxCardGroupProvider, CheckboxCardProvider, type CheckboxGroupContext, CheckboxGroupProvider, useCheckboxCardContext, useCheckboxCardGroupContext, useCheckboxGroupContext };

dist/checkbox-context.js

@@ -24,3 +24,7 @@ "use client"
 __export(checkbox_context_exports, {
+  CheckboxCardGroupProvider: () => CheckboxCardGroupProvider,
+  CheckboxCardProvider: () => CheckboxCardProvider,
   CheckboxGroupProvider: () => CheckboxGroupProvider,
+  useCheckboxCardContext: () => useCheckboxCardContext,
+  useCheckboxCardGroupContext: () => useCheckboxCardGroupContext,
   useCheckboxGroupContext: () => useCheckboxGroupContext
@@ -34,7 +38,19 @@ });
 });
+var [CheckboxCardGroupProvider, useCheckboxCardGroupContext] = (0, import_utils.createContext)({
+  name: "CheckboxCardGroupContext",
+  strict: false
+});
+var [CheckboxCardProvider, useCheckboxCardContext] = (0, import_utils.createContext)({
+  name: "CheckboxCardContext",
+  errorMessage: `useCheckboxCardContext returned is 'undefined'. Seems you forgot to wrap the components in "<CheckboxCard />"`
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CheckboxCardGroupProvider,
+  CheckboxCardProvider,
   CheckboxGroupProvider,
+  useCheckboxCardContext,
+  useCheckboxCardGroupContext,
   useCheckboxGroupContext
 });
 //# sourceMappingURL=checkbox-context.js.map

dist/checkbox-group.d.ts

@@ -1,51 +0,17 @@
-import { CheckboxProps } from './checkbox.js';
-import * as react from 'react';
-import { ChangeEvent, RefAttributes, ReactElement } from 'react';
-import { PropGetter, ThemeProps, ComponentArgs } from '@yamada-ui/core';
+import { ThemeProps, ComponentArgs } from '@yamada-ui/core';
 import { FormControlOptions } from '@yamada-ui/form-control';
 import { FlexProps } from '@yamada-ui/layouts';
-import { Dict } from '@yamada-ui/utils';
+import { ReactNode, RefAttributes, ReactElement } from 'react';
+import { CheckboxProps } from './checkbox.js';
+import { UseCheckboxGroupProps } from './use-checkbox-group.js';
 import '@yamada-ui/motion';
+import '@yamada-ui/utils';
+import './use-checkbox.js';
 
 interface CheckboxItem<Y extends number | string = string> extends CheckboxProps<Y> {
-    label?: string;
+    label?: ReactNode;
 }
-interface UseCheckboxGroupProps<Y extends number | string = string> {
-    /**
-     * The initial value of the checkbox group.
-     */
-    defaultValue?: Y[];
-    /**
-     * If `true`, input elements will receive `checked` attribute instead of `isChecked`.
-     *
-     * This assumes, you're using native radio inputs.
-     *
-     * @default false
-     */
-    isNative?: boolean;
-    /**
-     * The value of the checkbox group.
-     */
-    value?: Y[];
-    /**
-     * The callback fired when any children checkbox is checked or unchecked.
-     */
-    onChange?: (value: Y[]) => void;
+interface CheckboxGroupSharedProps<Y extends number | string = string> extends Omit<FlexProps, "defaultValue" | "onChange">, UseCheckboxGroupProps<Y>, FormControlOptions {
 }
-declare const useCheckboxGroup: <Y extends number | string, M extends Dict = Dict<any>>({ defaultValue, isNative, value: valueProp, onChange: onChangeProp, ...props }: M & UseCheckboxGroupProps<Y>) => {
-    props: Omit<M & UseCheckboxGroupProps<Y>, "defaultValue" | "onChange" | "value" | "isNative">;
-    setValue: react.Dispatch<react.SetStateAction<Y[]>>;
-    value: Y[];
-    getCheckboxProps: PropGetter<{
-        value?: Y;
-    }, {
-        checked?: boolean;
-        isChecked?: boolean;
-        value?: Y;
-    }>;
-    getContainerProps: PropGetter<"div", undefined>;
-    onChange: (evOrValue: ChangeEvent<HTMLInputElement> | Y) => void;
-};
-type UseCheckboxGroupReturn<Y extends number | string = string> = ReturnType<typeof useCheckboxGroup<Y>>;
-interface CheckboxGroupProps<Y extends number | string = string> extends ThemeProps<"Checkbox">, Omit<FlexProps, "defaultValue" | "onChange">, UseCheckboxGroupProps<Y>, FormControlOptions {
+interface CheckboxGroupProps<Y extends number | string = string> extends CheckboxGroupSharedProps<Y>, ThemeProps<"Checkbox"> {
     /**
@@ -62,2 +28,2 @@ * If provided, generate checkboxes based on items.
 
-export { CheckboxGroup, type CheckboxGroupProps, type CheckboxItem, type UseCheckboxGroupProps, type UseCheckboxGroupReturn, useCheckboxGroup };
+export { CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupSharedProps, type CheckboxItem };

dist/checkbox-group.js

@@ -24,19 +24,16 @@ "use client"
 __export(checkbox_group_exports, {
-  CheckboxGroup: () => CheckboxGroup,
-  useCheckboxGroup: () => useCheckboxGroup
+  CheckboxGroup: () => CheckboxGroup
 });
 module.exports = __toCommonJS(checkbox_group_exports);
-var import_form_control2 = require("@yamada-ui/form-control");
+var import_form_control3 = require("@yamada-ui/form-control");
 var import_layouts = require("@yamada-ui/layouts");
-var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
-var import_utils3 = require("@yamada-ui/utils");
-var import_react2 = require("react");
+var import_utils5 = require("@yamada-ui/utils");
+var import_react4 = require("react");
 
 // src/checkbox.tsx
 var import_core = require("@yamada-ui/core");
-var import_form_control = require("@yamada-ui/form-control");
+var import_form_control2 = require("@yamada-ui/form-control");
 var import_motion = require("@yamada-ui/motion");
-var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
-var import_utils2 = require("@yamada-ui/utils");
-var import_react = require("react");
+var import_utils3 = require("@yamada-ui/utils");
+var import_react2 = require("react");
 
@@ -49,5 +46,16 @@ // src/checkbox-context.tsx
 });
+var [CheckboxCardGroupProvider, useCheckboxCardGroupContext] = (0, import_utils.createContext)({
+  name: "CheckboxCardGroupContext",
+  strict: false
+});
+var [CheckboxCardProvider, useCheckboxCardContext] = (0, import_utils.createContext)({
+  name: "CheckboxCardContext",
+  errorMessage: `useCheckboxCardContext returned is 'undefined'. Seems you forgot to wrap the components in "<CheckboxCard />"`
+});
 
-// src/checkbox.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+// src/use-checkbox.ts
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react = require("react");
 var useCheckbox = ({
@@ -148,2 +156,4 @@ id,
       "data-checked": (0, import_utils2.dataAttr)(checked),
+      "data-focus": (0, import_utils2.dataAttr)(isFocused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
       onClick: (0, import_utils2.handlerAll)(props2.onClick, () => {
@@ -159,3 +169,3 @@ var _a;
     }),
-    [checked, isLabel, formControlProps]
+    [checked, isLabel, isFocused, isFocusVisible, formControlProps]
   );
@@ -273,3 +283,6 @@ const getIconProps = (0, import_react.useCallback)(
 };
-var Checkbox = (0, import_react.forwardRef)(
+
+// src/checkbox.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Checkbox = (0, import_react2.forwardRef)(
   (props, ref) => {
@@ -279,3 +292,3 @@ var _a, _b, _c, _d;
     const { value: groupValue, ...groupProps } = { ...group };
-    const control = (0, import_form_control.useFormControl)(props);
+    const control = (0, import_form_control2.useFormControl)(props);
     const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Checkbox", {
@@ -293,2 +306,3 @@ ...groupProps,
       isRequired = (_d = groupProps.isRequired) != null ? _d : control.isRequired,
+      label,
       iconProps,
@@ -300,3 +314,3 @@ inputProps,
     const isCheckedProp = groupValue && computedProps.value ? groupValue.includes(computedProps.value) : computedProps.isChecked;
-    const onChange = groupProps.onChange && computedProps.value ? (0, import_utils2.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
+    const onChange = groupProps.onChange && computedProps.value ? (0, import_utils3.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
     const {
@@ -320,3 +334,3 @@ isChecked,
     const { children: customIcon, ...resolvedIconProps } = { ...iconProps };
-    const cloneIcon = (0, import_react.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
+    const icon = (0, import_react2.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
       isChecked,
@@ -338,3 +352,3 @@ isDisabled,
       {
-        className: (0, import_utils2.cx)("ui-checkbox", className),
+        className: (0, import_utils3.cx)("ui-checkbox", className),
         ...getContainerProps(),
@@ -365,3 +379,2 @@ __css: {
                 display: "inline-block",
-                pointerEvents: isReadOnly ? "none" : void 0,
                 position: "relative",
@@ -372,3 +385,3 @@ userSelect: "none",
               ...getIconProps(resolvedIconProps),
-              children: cloneIcon
+              children: icon
             }
@@ -382,3 +395,3 @@ ),
               ...getLabelProps(labelProps),
-              children
+              children: children != null ? children : label
             }
@@ -493,5 +506,7 @@ )
 
-// src/checkbox-group.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var isEvent = (value) => value && (0, import_utils3.isObject)(value) && (0, import_utils3.isObject)(value.target);
+// src/use-checkbox-group.ts
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_utils4 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+var isEvent = (value) => value && (0, import_utils4.isObject)(value) && (0, import_utils4.isObject)(value.target);
 var useCheckboxGroup = ({
@@ -504,3 +519,3 @@ defaultValue = [],
 }) => {
-  const onChangeRef = (0, import_utils3.useCallbackRef)(onChangeProp);
+  const onChangeRef = (0, import_utils4.useCallbackRef)(onChangeProp);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
@@ -511,3 +526,3 @@ defaultValue,
   });
-  const onChange = (0, import_react2.useCallback)(
+  const onChange = (0, import_react3.useCallback)(
     (evOrValue) => {
@@ -521,3 +536,3 @@ const isChecked = isEvent(evOrValue) ? evOrValue.target.checked : !value.includes(evOrValue);
   );
-  const getContainerProps = (0, import_react2.useCallback)(
+  const getContainerProps = (0, import_react3.useCallback)(
     (props2 = {}, ref = null) => ({
@@ -530,3 +545,3 @@ role: "group",
   );
-  const getCheckboxProps = (0, import_react2.useCallback)(
+  const getCheckboxProps = (0, import_react3.useCallback)(
     (props2 = {}, ref = null) => ({
@@ -551,3 +566,6 @@ ...props2,
 };
-var CheckboxGroup = (0, import_react2.forwardRef)(
+
+// src/checkbox-group.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CheckboxGroup = (0, import_react4.forwardRef)(
   ({
@@ -570,7 +588,7 @@ className,
     } = useCheckboxGroup(props);
-    const { isDisabled, isInvalid, isReadOnly, isRequired, labelId, ...rest } = (0, import_form_control2.useFormControl)(computedProps);
-    const validChildren = (0, import_utils3.getValidChildren)(children);
+    const { isDisabled, isInvalid, isReadOnly, isRequired, labelId, ...rest } = (0, import_form_control3.useFormControl)(computedProps);
+    const validChildren = (0, import_utils5.getValidChildren)(children);
     let computedChildren = [];
     if (!validChildren.length && items.length) {
-      computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Checkbox, { value: value2, ...props2, children: label }, i));
+      computedChildren = items.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Checkbox, { ...props2 }, index));
     }
@@ -595,3 +613,3 @@ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             ref,
-            className: (0, import_utils3.cx)("ui-checkbox-group", className),
+            className: (0, import_utils5.cx)("ui-checkbox-group", className),
             direction,
@@ -614,5 +632,4 @@ gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
 0 && (module.exports = {
-  CheckboxGroup,
-  useCheckboxGroup
+  CheckboxGroup
 });
 //# sourceMappingURL=checkbox-group.js.map

dist/checkbox.d.ts

@@ -1,100 +0,14 @@
-import * as react from 'react';
-import { FocusEventHandler, ChangeEventHandler, Ref, ReactElement, InputHTMLAttributes } from 'react';
-import * as _yamada_ui_form_control from '@yamada-ui/form-control';
+import { HTMLUIProps, ThemeProps, ComponentArgs, FC } from '@yamada-ui/core';
 import { FormControlOptions } from '@yamada-ui/form-control';
-import { PropGetter, HTMLUIProps, ThemeProps, ComponentArgs, FC } from '@yamada-ui/core';
 import { MotionProps } from '@yamada-ui/motion';
-import { Dict, Merge } from '@yamada-ui/utils';
+import { Merge } from '@yamada-ui/utils';
+import { Ref, ReactElement, ReactNode, InputHTMLAttributes } from 'react';
+import { UseCheckboxProps } from './use-checkbox.js';
 
-interface UseCheckboxProps<Y extends number | string = string> extends FormControlOptions {
+interface CheckboxOptions {
     /**
-     * id assigned to input.
+     * The label of the checkbox.
      */
-    id?: string;
+    label?: ReactNode;
     /**
-     * The HTML `name` attribute used for forms.
-     */
-    name?: string;
-    /**
-     * If `true`, the checkbox will be initially checked.
-     *
-     * @default false
-     */
-    defaultIsChecked?: boolean;
-    /**
-     * If `true`, the checkbox will be checked.
-     *
-     * @default false
-     */
-    isChecked?: boolean;
-    /**
-     * If `true`, the checkbox will be indeterminate.
-     *
-     * @default false
-     */
-    isIndeterminate?: boolean;
-    /**
-     * If `true`, the checkbox will be selected when the Enter key is pressed.
-     *
-     * @default false
-     */
-    selectOnEnter?: boolean;
-    /**
-     * The tab-index property of the underlying input element.
-     */
-    tabIndex?: number;
-    /**
-     * The value to be used in the checkbox input.
-     */
-    value?: Y;
-    /**
-     * The callback invoked when the checkbox is blurred.
-     */
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    /**
-     * The callback invoked when the checked state changes.
-     */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    /**
-     * The callback invoked when the checkbox is focused.
-     */
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-}
-declare const useCheckbox: <Y extends number | string = string, M extends Dict = Dict<any>>({ id, ...props }: M & UseCheckboxProps<Y>) => {
-    isActive: boolean;
-    isChecked: boolean;
-    isFocused: boolean;
-    isFocusVisible: boolean;
-    isHovered: boolean;
-    isIndeterminate: ({
-        id: string;
-    } & Omit<M & UseCheckboxProps<Y>, "id"> & _yamada_ui_form_control.UseFormControlProps<HTMLElement>)["isIndeterminate"] | undefined;
-    props: Omit<Omit<{
-        _active?: {} | undefined;
-        _focus?: {} | undefined;
-        _focusVisible?: {} | undefined;
-        _hover?: {} | undefined;
-        _invalid?: {} | undefined;
-        id: string | undefined;
-        "aria-disabled": boolean | undefined;
-        "aria-invalid": boolean | undefined;
-        "aria-readonly": boolean | undefined;
-        "aria-required": boolean | undefined;
-        "data-readonly": boolean | "true" | "false";
-        disabled: boolean | undefined;
-        readOnly: boolean | undefined;
-        required: boolean | undefined;
-        onBlur: (event: react.FocusEvent<HTMLElement, Element>) => void;
-        onFocus: (event: react.FocusEvent<HTMLElement, Element>) => void;
-    } & Omit<{
-        id: string;
-    } & Omit<M & UseCheckboxProps<Y>, "id"> & _yamada_ui_form_control.UseFormControlProps<HTMLElement>, "id" | "onFocus" | "onBlur" | "isDisabled" | "isInvalid" | "isReadOnly" | "isRequired" | "disabled" | "readOnly" | "required">, "id" | "tabIndex" | "onChange" | "name" | "defaultIsChecked" | "isChecked" | "isIndeterminate" | "selectOnEnter" | "value">, "_active" | "_focus" | "_focusVisible" | "_hover" | "_invalid" | "aria-disabled" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "disabled" | "readOnly" | "required" | "data-readonly">;
-    getContainerProps: PropGetter<"label", undefined>;
-    getIconProps: PropGetter<"div", undefined>;
-    getInputProps: PropGetter<"input", undefined>;
-    getLabelProps: PropGetter<"div", undefined>;
-};
-type UseCheckboxReturn = ReturnType<typeof useCheckbox>;
-interface CheckboxOptions {
-    /**
      * Props for icon component.
@@ -104,3 +18,3 @@ */
         children: ReactElement;
-    } & Omit<HTMLUIProps<"span">, "children">;
+    } & Omit<HTMLUIProps, "children">;
     /**
@@ -143,2 +57,2 @@ * Props for input element.
 
-export { Checkbox, CheckboxIcon, type CheckboxIconProps, type CheckboxProps, type UseCheckboxProps, type UseCheckboxReturn, useCheckbox };
+export { Checkbox, CheckboxIcon, type CheckboxIconProps, type CheckboxProps };

dist/checkbox.js

@@ -25,12 +25,10 @@ "use client"
   Checkbox: () => Checkbox,
-  CheckboxIcon: () => CheckboxIcon,
-  useCheckbox: () => useCheckbox
+  CheckboxIcon: () => CheckboxIcon
 });
 module.exports = __toCommonJS(checkbox_exports);
 var import_core = require("@yamada-ui/core");
-var import_form_control = require("@yamada-ui/form-control");
+var import_form_control2 = require("@yamada-ui/form-control");
 var import_motion = require("@yamada-ui/motion");
-var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
-var import_utils2 = require("@yamada-ui/utils");
-var import_react = require("react");
+var import_utils3 = require("@yamada-ui/utils");
+var import_react2 = require("react");
 
@@ -43,5 +41,16 @@ // src/checkbox-context.tsx
 });
+var [CheckboxCardGroupProvider, useCheckboxCardGroupContext] = (0, import_utils.createContext)({
+  name: "CheckboxCardGroupContext",
+  strict: false
+});
+var [CheckboxCardProvider, useCheckboxCardContext] = (0, import_utils.createContext)({
+  name: "CheckboxCardContext",
+  errorMessage: `useCheckboxCardContext returned is 'undefined'. Seems you forgot to wrap the components in "<CheckboxCard />"`
+});
 
-// src/checkbox.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+// src/use-checkbox.ts
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react = require("react");
 var useCheckbox = ({
@@ -142,2 +151,4 @@ id,
       "data-checked": (0, import_utils2.dataAttr)(checked),
+      "data-focus": (0, import_utils2.dataAttr)(isFocused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
       onClick: (0, import_utils2.handlerAll)(props2.onClick, () => {
@@ -153,3 +164,3 @@ var _a;
     }),
-    [checked, isLabel, formControlProps]
+    [checked, isLabel, isFocused, isFocusVisible, formControlProps]
   );
@@ -267,3 +278,6 @@ const getIconProps = (0, import_react.useCallback)(
 };
-var Checkbox = (0, import_react.forwardRef)(
+
+// src/checkbox.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Checkbox = (0, import_react2.forwardRef)(
   (props, ref) => {
@@ -273,3 +287,3 @@ var _a, _b, _c, _d;
     const { value: groupValue, ...groupProps } = { ...group };
-    const control = (0, import_form_control.useFormControl)(props);
+    const control = (0, import_form_control2.useFormControl)(props);
     const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Checkbox", {
@@ -287,2 +301,3 @@ ...groupProps,
       isRequired = (_d = groupProps.isRequired) != null ? _d : control.isRequired,
+      label,
       iconProps,
@@ -294,3 +309,3 @@ inputProps,
     const isCheckedProp = groupValue && computedProps.value ? groupValue.includes(computedProps.value) : computedProps.isChecked;
-    const onChange = groupProps.onChange && computedProps.value ? (0, import_utils2.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
+    const onChange = groupProps.onChange && computedProps.value ? (0, import_utils3.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
     const {
@@ -314,3 +329,3 @@ isChecked,
     const { children: customIcon, ...resolvedIconProps } = { ...iconProps };
-    const cloneIcon = (0, import_react.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
+    const icon = (0, import_react2.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
       isChecked,
@@ -332,3 +347,3 @@ isDisabled,
       {
-        className: (0, import_utils2.cx)("ui-checkbox", className),
+        className: (0, import_utils3.cx)("ui-checkbox", className),
         ...getContainerProps(),
@@ -359,3 +374,2 @@ __css: {
                 display: "inline-block",
-                pointerEvents: isReadOnly ? "none" : void 0,
                 position: "relative",
@@ -366,3 +380,3 @@ userSelect: "none",
               ...getIconProps(resolvedIconProps),
-              children: cloneIcon
+              children: icon
             }
@@ -376,3 +390,3 @@ ),
               ...getLabelProps(labelProps),
-              children
+              children: children != null ? children : label
             }
@@ -489,5 +503,4 @@ )
   Checkbox,
-  CheckboxIcon,
-  useCheckbox
+  CheckboxIcon
 });
 //# sourceMappingURL=checkbox.js.map

dist/index.d.ts

@@ -1,8 +0,15 @@
-export { Checkbox, CheckboxIcon, CheckboxIconProps, CheckboxProps, UseCheckboxProps, UseCheckboxReturn, useCheckbox } from './checkbox.js';
-export { CheckboxGroup, CheckboxGroupProps, CheckboxItem, UseCheckboxGroupProps, UseCheckboxGroupReturn, useCheckboxGroup } from './checkbox-group.js';
-import 'react';
+export { Checkbox, CheckboxIcon, CheckboxIconProps, CheckboxProps } from './checkbox.js';
+export { CheckboxCard, CheckboxCardProps } from './checkbox-card.js';
+export { CheckboxCardAddon, CheckboxCardAddonProps } from './checkbox-card-addon.js';
+export { CheckboxCardDescription, CheckboxCardDescriptionProps } from './checkbox-card-description.js';
+export { CheckboxCardGroup, CheckboxCardGroupProps, CheckboxCardItem } from './checkbox-card-group.js';
+export { CheckboxCardLabel, CheckboxCardLabelProps } from './checkbox-card-label.js';
+export { CheckboxGroup, CheckboxGroupProps, CheckboxItem } from './checkbox-group.js';
+export { UseCheckboxProps, UseCheckboxReturn, useCheckbox } from './use-checkbox.js';
+export { UseCheckboxGroupProps, UseCheckboxGroupReturn, useCheckboxGroup } from './use-checkbox-group.js';
+import '@yamada-ui/core';
 import '@yamada-ui/form-control';
-import '@yamada-ui/core';
 import '@yamada-ui/motion';
 import '@yamada-ui/utils';
+import 'react';
 import '@yamada-ui/layouts';

dist/index.js

@@ -25,2 +25,7 @@ "use client"
   Checkbox: () => Checkbox,
+  CheckboxCard: () => CheckboxCard,
+  CheckboxCardAddon: () => CheckboxCardAddon,
+  CheckboxCardDescription: () => CheckboxCardDescription,
+  CheckboxCardGroup: () => CheckboxCardGroup,
+  CheckboxCardLabel: () => CheckboxCardLabel,
   CheckboxGroup: () => CheckboxGroup,
@@ -35,7 +40,6 @@ CheckboxIcon: () => CheckboxIcon,
 var import_core = require("@yamada-ui/core");
-var import_form_control = require("@yamada-ui/form-control");
+var import_form_control2 = require("@yamada-ui/form-control");
 var import_motion = require("@yamada-ui/motion");
-var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
-var import_utils2 = require("@yamada-ui/utils");
-var import_react = require("react");
+var import_utils3 = require("@yamada-ui/utils");
+var import_react2 = require("react");
 
@@ -48,5 +52,16 @@ // src/checkbox-context.tsx
 });
+var [CheckboxCardGroupProvider, useCheckboxCardGroupContext] = (0, import_utils.createContext)({
+  name: "CheckboxCardGroupContext",
+  strict: false
+});
+var [CheckboxCardProvider, useCheckboxCardContext] = (0, import_utils.createContext)({
+  name: "CheckboxCardContext",
+  errorMessage: `useCheckboxCardContext returned is 'undefined'. Seems you forgot to wrap the components in "<CheckboxCard />"`
+});
 
-// src/checkbox.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+// src/use-checkbox.ts
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react = require("react");
 var useCheckbox = ({
@@ -147,2 +162,4 @@ id,
       "data-checked": (0, import_utils2.dataAttr)(checked),
+      "data-focus": (0, import_utils2.dataAttr)(isFocused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
       onClick: (0, import_utils2.handlerAll)(props2.onClick, () => {
@@ -158,3 +175,3 @@ var _a;
     }),
-    [checked, isLabel, formControlProps]
+    [checked, isLabel, isFocused, isFocusVisible, formControlProps]
   );
@@ -272,3 +289,6 @@ const getIconProps = (0, import_react.useCallback)(
 };
-var Checkbox = (0, import_react.forwardRef)(
+
+// src/checkbox.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Checkbox = (0, import_react2.forwardRef)(
   (props, ref) => {
@@ -278,3 +298,3 @@ var _a, _b, _c, _d;
     const { value: groupValue, ...groupProps } = { ...group };
-    const control = (0, import_form_control.useFormControl)(props);
+    const control = (0, import_form_control2.useFormControl)(props);
     const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Checkbox", {
@@ -292,2 +312,3 @@ ...groupProps,
       isRequired = (_d = groupProps.isRequired) != null ? _d : control.isRequired,
+      label,
       iconProps,
@@ -299,3 +320,3 @@ inputProps,
     const isCheckedProp = groupValue && computedProps.value ? groupValue.includes(computedProps.value) : computedProps.isChecked;
-    const onChange = groupProps.onChange && computedProps.value ? (0, import_utils2.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
+    const onChange = groupProps.onChange && computedProps.value ? (0, import_utils3.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
     const {
@@ -319,3 +340,3 @@ isChecked,
     const { children: customIcon, ...resolvedIconProps } = { ...iconProps };
-    const cloneIcon = (0, import_react.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
+    const icon = (0, import_react2.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIcon, {}), {
       isChecked,
@@ -337,3 +358,3 @@ isDisabled,
       {
-        className: (0, import_utils2.cx)("ui-checkbox", className),
+        className: (0, import_utils3.cx)("ui-checkbox", className),
         ...getContainerProps(),
@@ -364,3 +385,2 @@ __css: {
                 display: "inline-block",
-                pointerEvents: isReadOnly ? "none" : void 0,
                 position: "relative",
@@ -371,3 +391,3 @@ userSelect: "none",
               ...getIconProps(resolvedIconProps),
-              children: cloneIcon
+              children: icon
             }
@@ -381,3 +401,3 @@ ),
               ...getLabelProps(labelProps),
-              children
+              children: children != null ? children : label
             }
@@ -492,10 +512,229 @@ )
 
-// src/checkbox-group.tsx
-var import_form_control2 = require("@yamada-ui/form-control");
+// src/checkbox-card.tsx
+var import_core8 = require("@yamada-ui/core");
+var import_form_control3 = require("@yamada-ui/form-control");
+var import_utils7 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+
+// src/checkbox-card-addon.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_core3 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CheckboxCardAddon = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useCheckboxCardContext();
+    const css = { ...styles.addon };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core3.ui.div,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-checkbox-card__addon", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+CheckboxCardAddon.displayName = "CheckboxCardAddon";
+CheckboxCardAddon.__ui__ = "CheckboxCardAddon";
+
+// src/checkbox-card-description.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_core5 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CheckboxCardDescription = (0, import_core4.forwardRef)(({ className, ...rest }, ref) => {
+  const { styles } = useCheckboxCardContext();
+  const css = { ...styles.description };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_core5.ui.div,
+    {
+      ref,
+      className: (0, import_utils5.cx)("ui-checkbox-card__description", className),
+      __css: css,
+      ...rest
+    }
+  );
+});
+CheckboxCardDescription.displayName = "CheckboxCardDescription";
+CheckboxCardDescription.__ui__ = "CheckboxCardDescription";
+
+// src/checkbox-card-label.tsx
+var import_core6 = require("@yamada-ui/core");
+var import_core7 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CheckboxCardLabel = (0, import_core6.forwardRef)(
+  ({
+    className,
+    children,
+    icon: iconProp,
+    withIcon,
+    contentProps,
+    iconProps,
+    ...rest
+  }, ref) => {
+    const {
+      icon,
+      styles,
+      withIcon: defaultWithIcon,
+      getIconProps,
+      iconProps: defaultIconProps
+    } = useCheckboxCardContext();
+    withIcon != null ? withIcon : withIcon = defaultWithIcon;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_core7.ui.div,
+      {
+        ref,
+        className: (0, import_utils6.cx)("ui-checkbox-card__label", className),
+        __css: { ...styles.label },
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core7.ui.span,
+            {
+              className: "ui-checkbox-card__label-content",
+              __css: { ...styles.labelContent },
+              ...contentProps,
+              children
+            }
+          ),
+          withIcon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core7.ui.div,
+            {
+              className: "ui-checkbox-card__icon",
+              __css: { ...styles.icon },
+              ...getIconProps({ ...defaultIconProps, ...iconProps }),
+              children: iconProp != null ? iconProp : icon
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+CheckboxCardLabel.displayName = "CheckboxCardLabel";
+CheckboxCardLabel.__ui__ = "CheckboxCardLabel";
+
+// src/checkbox-card.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CheckboxCard = (0, import_react3.forwardRef)(
+  (props, ref) => {
+    var _a, _b, _c, _d;
+    const group = useCheckboxCardGroupContext();
+    const { value: groupValue, ...groupProps } = { ...group };
+    const control = (0, import_form_control3.useFormControl)(props);
+    const [styles, mergedProps] = (0, import_core8.useComponentMultiStyle)("CheckboxCard", {
+      ...groupProps,
+      ...props
+    });
+    const {
+      className,
+      addon,
+      children,
+      description,
+      isDisabled = (_a = groupProps.isDisabled) != null ? _a : control.isDisabled,
+      isInvalid = (_b = groupProps.isInvalid) != null ? _b : control.isInvalid,
+      isReadOnly = (_c = groupProps.isReadOnly) != null ? _c : control.isReadOnly,
+      isRequired = (_d = groupProps.isRequired) != null ? _d : control.isRequired,
+      label,
+      withIcon = true,
+      addonProps,
+      descriptionProps,
+      iconProps,
+      inputProps,
+      labelProps,
+      ...computedProps
+    } = (0, import_core8.omitThemeProps)(mergedProps);
+    const isCheckedProp = groupValue && computedProps.value ? groupValue.includes(computedProps.value) : computedProps.isChecked;
+    const onChange = groupProps.onChange && computedProps.value ? (0, import_utils7.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
+    const {
+      isChecked,
+      props: rest,
+      getContainerProps,
+      getIconProps,
+      getInputProps
+    } = useCheckbox({
+      ...computedProps,
+      isChecked: isCheckedProp,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      onChange
+    });
+    const { children: customIcon, ...resolvedIconProps } = { ...iconProps };
+    const icon = (0, import_react3.cloneElement)(customIcon != null ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxIcon, {}), {
+      isChecked,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      __css: {
+        opacity: isChecked ? 1 : 0,
+        transform: isChecked ? "scale(1)" : "scale(0.95)",
+        transitionDuration: "normal",
+        transitionProperty: "transform"
+      }
+    });
+    const validChildren = (0, import_utils7.getValidChildren)(children);
+    const customLabel = (0, import_utils7.findChild)(validChildren, CheckboxCardLabel);
+    const customDescription = (0, import_utils7.findChild)(validChildren, CheckboxCardDescription);
+    const customAddon = (0, import_utils7.findChild)(validChildren, CheckboxCardAddon);
+    const computedChildren = !(0, import_utils7.isEmpty)(validChildren) ? (0, import_utils7.omitChildren)(
+      validChildren,
+      CheckboxCardLabel,
+      CheckboxCardDescription,
+      CheckboxCardAddon
+    ) : children;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      CheckboxCardProvider,
+      {
+        value: {
+          icon,
+          styles,
+          withIcon,
+          getIconProps,
+          iconProps: resolvedIconProps
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_core8.ui.label,
+          {
+            className: (0, import_utils7.cx)("ui-checkbox-card", className),
+            ...getContainerProps(rest),
+            __css: { ...styles.container },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_core8.ui.input,
+                {
+                  className: "ui-checkbox-card__input",
+                  ...getInputProps(inputProps, ref)
+                }
+              ),
+              customLabel != null ? customLabel : label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxCardLabel, { ...labelProps, children: label }) : null,
+              customDescription != null ? customDescription : description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxCardDescription, { ...descriptionProps, children: description }) : null,
+              customAddon != null ? customAddon : addon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxCardAddon, { ...addonProps, children: addon }) : null,
+              computedChildren
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxCard.displayName = "CheckboxCard";
+CheckboxCard.__ui__ = "CheckboxCard";
+
+// src/checkbox-card-group.tsx
+var import_form_control4 = require("@yamada-ui/form-control");
 var import_layouts = require("@yamada-ui/layouts");
+var import_utils9 = require("@yamada-ui/utils");
+var import_react5 = require("react");
+
+// src/use-checkbox-group.ts
 var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
-var import_utils3 = require("@yamada-ui/utils");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var isEvent = (value) => value && (0, import_utils3.isObject)(value) && (0, import_utils3.isObject)(value.target);
+var import_utils8 = require("@yamada-ui/utils");
+var import_react4 = require("react");
+var isEvent = (value) => value && (0, import_utils8.isObject)(value) && (0, import_utils8.isObject)(value.target);
 var useCheckboxGroup = ({
@@ -508,3 +747,3 @@ defaultValue = [],
 }) => {
-  const onChangeRef = (0, import_utils3.useCallbackRef)(onChangeProp);
+  const onChangeRef = (0, import_utils8.useCallbackRef)(onChangeProp);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
@@ -515,3 +754,3 @@ defaultValue,
   });
-  const onChange = (0, import_react2.useCallback)(
+  const onChange = (0, import_react4.useCallback)(
     (evOrValue) => {
@@ -525,3 +764,3 @@ const isChecked = isEvent(evOrValue) ? evOrValue.target.checked : !value.includes(evOrValue);
   );
-  const getContainerProps = (0, import_react2.useCallback)(
+  const getContainerProps = (0, import_react4.useCallback)(
     (props2 = {}, ref = null) => ({
@@ -534,3 +773,3 @@ role: "group",
   );
-  const getCheckboxProps = (0, import_react2.useCallback)(
+  const getCheckboxProps = (0, import_react4.useCallback)(
     (props2 = {}, ref = null) => ({
@@ -555,3 +794,6 @@ ...props2,
 };
-var CheckboxGroup = (0, import_react2.forwardRef)(
+
+// src/checkbox-card-group.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CheckboxCardGroup = (0, import_react5.forwardRef)(
   ({
@@ -563,2 +805,75 @@ className,
     children,
+    direction = "row",
+    gap = "0.5rem",
+    items = [],
+    withIcon = true,
+    addonProps,
+    descriptionProps,
+    labelProps,
+    ...props
+  }, ref) => {
+    const {
+      props: computedProps,
+      value,
+      getContainerProps,
+      onChange
+    } = useCheckboxGroup(props);
+    const { isDisabled, isInvalid, isReadOnly, isRequired, labelId, ...rest } = (0, import_form_control4.useFormControl)(computedProps);
+    const validChildren = (0, import_utils9.getValidChildren)(children);
+    let computedChildren = [];
+    if (!validChildren.length && items.length)
+      computedChildren = items.map((props2, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckboxCard, { ...props2 }, i));
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      CheckboxCardGroupProvider,
+      {
+        value: {
+          colorScheme,
+          size,
+          variant,
+          isDisabled,
+          isInvalid,
+          isReadOnly,
+          isRequired,
+          value,
+          withIcon,
+          addonProps,
+          descriptionProps,
+          labelProps,
+          onChange
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_layouts.Flex,
+          {
+            ref,
+            className: (0, import_utils9.cx)("ui-checkbox-card-group", className),
+            gap,
+            w: "100%",
+            ...getContainerProps({
+              "aria-labelledby": labelId,
+              ...rest
+            }),
+            direction,
+            children: children != null ? children : computedChildren
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxCardGroup.displayName = "CheckboxCardGroup";
+CheckboxCardGroup.__ui__ = "CheckboxCardGroup";
+
+// src/checkbox-group.tsx
+var import_form_control5 = require("@yamada-ui/form-control");
+var import_layouts2 = require("@yamada-ui/layouts");
+var import_utils10 = require("@yamada-ui/utils");
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CheckboxGroup = (0, import_react6.forwardRef)(
+  ({
+    className,
+    colorScheme,
+    size,
+    variant,
+    children,
     direction = "column",
@@ -575,9 +890,9 @@ gap,
     } = useCheckboxGroup(props);
-    const { isDisabled, isInvalid, isReadOnly, isRequired, labelId, ...rest } = (0, import_form_control2.useFormControl)(computedProps);
-    const validChildren = (0, import_utils3.getValidChildren)(children);
+    const { isDisabled, isInvalid, isReadOnly, isRequired, labelId, ...rest } = (0, import_form_control5.useFormControl)(computedProps);
+    const validChildren = (0, import_utils10.getValidChildren)(children);
     let computedChildren = [];
     if (!validChildren.length && items.length) {
-      computedChildren = items.map(({ label, value: value2, ...props2 }, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Checkbox, { value: value2, ...props2, children: label }, i));
+      computedChildren = items.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Checkbox, { ...props2 }, index));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       CheckboxGroupProvider,
@@ -596,7 +911,7 @@ {
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_layouts.Flex,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_layouts2.Flex,
           {
             ref,
-            className: (0, import_utils3.cx)("ui-checkbox-group", className),
+            className: (0, import_utils10.cx)("ui-checkbox-group", className),
             direction,
@@ -620,2 +935,7 @@ gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
   Checkbox,
+  CheckboxCard,
+  CheckboxCardAddon,
+  CheckboxCardDescription,
+  CheckboxCardGroup,
+  CheckboxCardLabel,
   CheckboxGroup,
@@ -622,0 +942,0 @@ CheckboxIcon,

package.json

 {
   "name": "@yamada-ui/checkbox",
-  "version": "1.2.2-next-20241126134247",
+  "version": "1.3.0-dev-20241127015414",
   "description": "Yamada UI checkbox component",
@@ -39,9 +39,9 @@ "keywords": [
   "dependencies": {
-    "@yamada-ui/core": "1.16.0-next-20241126134247",
-    "@yamada-ui/form-control": "2.1.9-next-20241126134247",
-    "@yamada-ui/layouts": "1.2.3-next-20241126134247",
-    "@yamada-ui/motion": "2.2.10-next-20241126134247",
-    "@yamada-ui/use-controllable-state": "1.0.24-next-20241126134247",
-    "@yamada-ui/use-focus-visible": "1.1.11-next-20241126134247",
-    "@yamada-ui/utils": "1.6.0-next-20241126134247"
+    "@yamada-ui/core": "1.16.0-dev-20241127015414",
+    "@yamada-ui/form-control": "2.1.9-dev-20241127015414",
+    "@yamada-ui/layouts": "1.2.3-dev-20241127015414",
+    "@yamada-ui/motion": "2.2.10-dev-20241127015414",
+    "@yamada-ui/use-controllable-state": "1.0.24-dev-20241127015414",
+    "@yamada-ui/use-focus-visible": "1.1.11-dev-20241127015414",
+    "@yamada-ui/utils": "1.6.0-dev-20241127015414"
   },
@@ -48,0 +48,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

506728

increased by128.67%

Number of package files

89

increased by169.7%

Lines of code

5659

increased by119.6%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@yamada-ui/core@1.16.0-dev-20241127015414(transitive)

• + Added@yamada-ui/form-control@2.1.9-dev-20241127015414(transitive)

• + Added@yamada-ui/layouts@1.2.3-dev-20241127015414(transitive)

• + Added@yamada-ui/motion@2.2.10-dev-20241127015414(transitive)

• + Added@yamada-ui/portal@1.0.25-dev-20241127015414(transitive)

• + Added@yamada-ui/use-controllable-state@1.0.24-dev-20241127015414(transitive)

• + Added@yamada-ui/use-focus-visible@1.1.11-dev-20241127015414(transitive)

• + Added@yamada-ui/utils@1.6.0-dev-20241127015414(transitive)

• + Added@yamada-ui/visually-hidden@1.0.18-dev-20241127015414(transitive)

• - Removed@yamada-ui/core@1.16.0-next-20241126134247(transitive)

• - Removed@yamada-ui/form-control@2.1.9-next-20241126134247(transitive)

• - Removed@yamada-ui/layouts@1.2.3-next-20241126134247(transitive)

• - Removed@yamada-ui/motion@2.2.10-next-20241126134247(transitive)

• - Removed@yamada-ui/portal@1.0.25-next-20241126134247(transitive)

• - Removed@yamada-ui/use-controllable-state@1.0.24-next-20241126134247(transitive)

• - Removed@yamada-ui/use-focus-visible@1.1.11-next-20241126134247(transitive)

• - Removed@yamada-ui/utils@1.6.0-next-20241126134247(transitive)

• - Removed@yamada-ui/visually-hidden@1.0.18-next-20241126134247(transitive)

• Updated@yamada-ui/core@1.16.0-dev-20241127015414

• Updated@yamada-ui/form-control@2.1.9-dev-20241127015414

• Updated@yamada-ui/layouts@1.2.3-dev-20241127015414

• Updated@yamada-ui/motion@2.2.10-dev-20241127015414

• Updated@yamada-ui/use-controllable-state@1.0.24-dev-20241127015414

• Updated@yamada-ui/use-focus-visible@1.1.11-dev-20241127015414

• Updated@yamada-ui/utils@1.6.0-dev-20241127015414