@yamada-ui/react 2.2.6 → 2.2.7-dev-20260804111744

package/dist/cjs/components/checkbox/checkbox-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.cjs","names":["component","useRootComponentProps","useCheckboxGroup","Checkbox","CheckboxPropsContext","CheckboxGroupContext","Group"],"sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxProps } from \"./checkbox\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxGroupProps } from \"./use-checkbox-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {\n  Checkbox,\n  CheckboxPropsContext,\n  component,\n  useRootComponentProps,\n} from \"./checkbox\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"./use-checkbox-group\"\n\nexport interface CheckboxGroupItem<\n  Y extends string = string,\n> extends CheckboxProps<Y> {\n  label: ReactNode\n}\n\nexport interface CheckboxGroupRootProps<Y extends string = string>\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, CheckboxStyle>,\n      \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<CheckboxStyle>,\n    UseCheckboxGroupProps<Y>,\n    UseInputBorderProps,\n    Pick<CheckboxProps, \"checkedIcon\"> {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: CheckboxGroupItem<Y>[]\n}\n\n/**\n * `CheckboxGroup` is a component that groups `Checkbox` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const CheckboxGroupRoot = component<\"div\", CheckboxGroupRootProps>(\n  (props) => {\n    const [\n      ,\n      {\n        colorScheme,\n        size,\n        variant,\n        checkedIcon,\n        children,\n        disabled,\n        errorBorderColor,\n        focusBorderColor,\n        invalid,\n        items = [],\n        readOnly,\n        shape,\n        ...rest\n      },\n    ] = useRootComponentProps(props, \"group\", {\n      transferProps: [\"variant\", \"colorScheme\", \"size\", \"shape\"],\n    })\n    const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n      useCheckboxGroup(rest)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items.map(({ label, value, ...rest }, index) => (\n        <Checkbox key={value ?? index} value={value} {...rest}>\n          {label}\n        </Checkbox>\n      ))\n    }, [items, children])\n    const context = useMemo(\n      () => ({\n        colorScheme,\n        size,\n        variant,\n        checkedIcon,\n        disabled,\n        errorBorderColor,\n        focusBorderColor,\n        invalid,\n        readOnly,\n        shape,\n      }),\n      [\n        variant,\n        size,\n        colorScheme,\n        shape,\n        disabled,\n        invalid,\n        readOnly,\n        errorBorderColor,\n        focusBorderColor,\n        checkedIcon,\n      ],\n    )\n    const groupContext = useMemo(\n      () => ({ max, value, getInputProps, getLabelProps, onChange }),\n      [max, value, getInputProps, getLabelProps, onChange],\n    )\n\n    return (\n      <CheckboxPropsContext value={context}>\n        <CheckboxGroupContext value={groupContext}>\n          <Group orientation=\"vertical\" {...getRootProps()}>\n            {computedChildren}\n          </Group>\n        </CheckboxGroupContext>\n      </CheckboxPropsContext>\n    )\n  },\n  \"group\",\n)() as GenericsComponent<{\n  <Y extends string = string>(props: CheckboxGroupRootProps<Y>): ReactElement\n}>\n\nexport { Checkbox as CheckboxGroupItem }\n"],"mappings":";;;;;;;;;;;;AAoDA,MAAa,oBAAoBA,iBAAAA,WAC9B,UAAU;CACT,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,CAAC,GACT,UACA,OACA,GAAG,UAEHC,iBAAAA,sBAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAW;EAAe;EAAQ;CAAO,EAC3D,CAAC;CACD,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9DC,2BAAAA,iBAAiB,IAAI;CACvB,MAAM,oBAAA,GAAA,MAAA,QAAA,OAAiC;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,MAAM,KAAK,EAAE,OAAO,OAAO,GAAG,QAAQ,UAC3C,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;GAAsC;GAAO,GAAI;GAC9C,UAAA;EACO,GAFK,SAAS,KAEd,CACX;CACH,GAAG,CAAC,OAAO,QAAQ,CAAC;CAgCpB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,sBAAD;EAAsB,QAAA,GAAA,MAAA,QAAA,QA/Bf;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAQmC;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,sBAAD;GAAsB,QAAA,GAAA,MAAA,QAAA,QANjB;IAAE;IAAK;IAAO;IAAe;IAAe;GAAS,IAC5D;IAAC;IAAK;IAAO;IAAe;IAAe;GAAQ,CAKT;GACtC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAO,aAAY;IAAW,GAAI,aAAa;IAC5C,UAAA;GACI,CAAA;EACa,CAAA;CACF,CAAA;AAE1B,GACA,OACF,CAAC,CAAC"}
+{"version":3,"file":"checkbox-group.cjs","names":["component","useRootComponentProps","useCheckboxGroup","useMemo","Checkbox","CheckboxPropsContext","CheckboxGroupContext","Group"],"sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxProps } from \"./checkbox\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxGroupProps } from \"./use-checkbox-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {\n  Checkbox,\n  CheckboxPropsContext,\n  component,\n  useRootComponentProps,\n} from \"./checkbox\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"./use-checkbox-group\"\n\nexport interface CheckboxGroupItem<\n  Y extends string = string,\n> extends CheckboxProps<Y> {\n  label: ReactNode\n}\n\nexport interface CheckboxGroupRootProps<Y extends string = string>\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, CheckboxStyle>,\n      \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<CheckboxStyle>,\n    UseCheckboxGroupProps<Y>,\n    UseInputBorderProps,\n    Pick<CheckboxProps, \"checkedIcon\"> {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: CheckboxGroupItem<Y>[]\n}\n\n/**\n * `CheckboxGroup` is a component that groups `Checkbox` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const CheckboxGroupRoot = component<\"div\", CheckboxGroupRootProps>(\n  (props) => {\n    const [\n      ,\n      {\n        colorScheme,\n        size,\n        variant,\n        checkedIcon,\n        children,\n        disabled,\n        errorBorderColor,\n        focusBorderColor,\n        invalid,\n        items = [],\n        readOnly,\n        shape,\n        ...rest\n      },\n    ] = useRootComponentProps(props, \"group\", {\n      transferProps: [\"variant\", \"colorScheme\", \"size\", \"shape\"],\n    })\n    const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n      useCheckboxGroup(rest)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items.map(({ label, value, ...rest }, index) => (\n        <Checkbox key={value ?? index} value={value} {...rest}>\n          {label}\n        </Checkbox>\n      ))\n    }, [items, children])\n    const context = useMemo(\n      () => ({\n        colorScheme,\n        size,\n        variant,\n        checkedIcon,\n        disabled,\n        errorBorderColor,\n        focusBorderColor,\n        invalid,\n        readOnly,\n        shape,\n      }),\n      [\n        variant,\n        size,\n        colorScheme,\n        shape,\n        disabled,\n        invalid,\n        readOnly,\n        errorBorderColor,\n        focusBorderColor,\n        checkedIcon,\n      ],\n    )\n    const groupContext = useMemo(\n      () => ({ max, value, getInputProps, getLabelProps, onChange }),\n      [max, value, getInputProps, getLabelProps, onChange],\n    )\n\n    return (\n      <CheckboxPropsContext value={context}>\n        <CheckboxGroupContext value={groupContext}>\n          <Group orientation=\"vertical\" {...getRootProps()}>\n            {computedChildren}\n          </Group>\n        </CheckboxGroupContext>\n      </CheckboxPropsContext>\n    )\n  },\n  \"group\",\n)() as GenericsComponent<{\n  <Y extends string = string>(props: CheckboxGroupRootProps<Y>): ReactElement\n}>\n\nexport { Checkbox as CheckboxGroupItem }\n"],"mappings":";;;;;;;;;;;;;AAoDA,MAAa,oBAAoBA,iBAAAA,WAC9B,UAAU;CACT,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,CAAC,GACT,UACA,OACA,GAAG,UAEHC,iBAAAA,sBAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAW;EAAe;EAAQ;CAAO,EAC3D,CAAC;CACD,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9DC,2BAAAA,iBAAiB,IAAI;CACvB,MAAM,oBAAA,GAAmBC,MAAAA,QAAAA,OAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,MAAM,KAAK,EAAE,OAAO,OAAO,GAAG,QAAQ,UAC3C,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;GAAsC;GAAO,GAAI;GAC9C,UAAA;EACO,GAFK,SAAS,KAEd,CACX;CACH,GAAG,CAAC,OAAO,QAAQ,CAAC;CACpB,MAAM,WAAA,GAAUD,MAAAA,QAAAA,QACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CACA,MAAM,gBAAA,GAAeA,MAAAA,QAAAA,QACZ;EAAE;EAAK;EAAO;EAAe;EAAe;CAAS,IAC5D;EAAC;EAAK;EAAO;EAAe;EAAe;CAAQ,CACrD;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,iBAAAA,sBAAD;EAAsB,OAAO;EAC3B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,sBAAD;GAAsB,OAAO;GAC3B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAO,aAAY;IAAW,GAAI,aAAa;IAC5C,UAAA;GACI,CAAA;EACa,CAAA;CACF,CAAA;AAE1B,GACA,OACF,CAAC,CAAC"}

package/dist/cjs/components/checkbox/checkbox.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_factory = require("../../core/system/factory.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_check_icon = require("../icon/icons/check-icon.cjs");

package/dist/cjs/components/checkbox/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","names":["createSlotComponent","checkboxStyle","useCheckbox","useInputBorder","MinusIcon","CheckIcon","styled"],"sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxProps } from \"./use-checkbox\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { CheckIcon, MinusIcon } from \"../icon\"\nimport { useInputBorder } from \"../input\"\nimport { checkboxStyle } from \"./checkbox.style\"\nimport { useCheckbox } from \"./use-checkbox\"\n\nexport interface CheckboxProps<Y extends string = string>\n  extends\n    Merge<HTMLStyledProps<\"label\">, UseCheckboxProps<Y>>,\n    ThemeProps<CheckboxStyle>,\n    UseInputBorderProps {\n  /**\n   * The icon to display in the checkbox when it is checked.\n   */\n  checkedIcon?: ReactNode\n  /**\n   * The icon to display in the checkbox when it is indeterminate.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: CheckboxIndicatorProps\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for the label component.\n   */\n  labelProps?: CheckboxLabelProps\n  /**\n   * Props for the label element.\n   */\n  rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n  component,\n  PropsContext: CheckboxPropsContext,\n  usePropsContext: useCheckboxPropsContext,\n  withContext,\n  withProvider,\n  useRootComponentProps,\n} = createSlotComponent<CheckboxProps, CheckboxStyle>(\"checkbox\", checkboxStyle)\n\nexport {\n  CheckboxPropsContext,\n  component,\n  useCheckboxPropsContext,\n  useRootComponentProps,\n}\n\n/**\n * `Checkbox` is a component used for allowing users to select multiple values from multiple options.\n *\n * @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const Checkbox = withProvider<\"label\", CheckboxProps>(\n  ({\n    checkedIcon,\n    children,\n    errorBorderColor,\n    focusBorderColor,\n    indeterminateIcon,\n    indicatorProps,\n    inputProps,\n    labelProps,\n    rootProps,\n    ...rest\n  }) => {\n    const {\n      checked,\n      indeterminate,\n      getIndicatorProps,\n      getInputProps,\n      getRootProps,\n    } = useCheckbox(rest)\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const icon = useMemo(() => {\n      if (indeterminate) return indeterminateIcon || <MinusIcon />\n      else if (checked) return checkedIcon || <CheckIcon />\n      else return null\n    }, [indeterminate, indeterminateIcon, checked, checkedIcon])\n    const input = useMemo(() => {\n      return <styled.input {...getInputProps(inputProps)} />\n    }, [getInputProps, inputProps])\n    const indicator = useMemo(() => {\n      return (\n        <CheckboxIndicator {...getIndicatorProps(indicatorProps)}>\n          {icon}\n        </CheckboxIndicator>\n      )\n    }, [getIndicatorProps, indicatorProps, icon])\n\n    return (\n      <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n        {input}\n        {indicator}\n        {children ? (\n          <CheckboxLabel {...labelProps}>{children}</CheckboxLabel>\n        ) : null}\n      </styled.label>\n    )\n  },\n  \"root\",\n)() as GenericsComponent<{\n  <Y extends string = string>(props: CheckboxProps<Y>): ReactElement\n}>\n\ninterface CheckboxIndicatorProps extends HTMLStyledProps {}\n\nconst CheckboxIndicator = withContext<\"div\", CheckboxIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)({ \"data-indicator\": \"\" })\n\ninterface CheckboxLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst CheckboxLabel = withContext<\"span\", CheckboxLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;AA8CA,MAAM,EACJ,WACA,cAAc,sBACd,iBAAiB,yBACjB,aACA,cACA,0BACEA,yBAAAA,oBAAkD,YAAYC,uBAAAA,aAAa;;;;;;AAc/E,MAAa,WAAW,cACrB,EACC,aACA,UACA,kBACA,kBACA,mBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,SACA,eACA,mBACA,eACA,iBACEC,qBAAAA,YAAY,IAAI;CACpB,MAAM,WAAWC,yBAAAA,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,QAAA,GAAA,MAAA,QAAA,OAAqB;EACzB,IAAI,eAAe,OAAO,qBAAqB,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,WAAD,CAAY,CAAA;OACtD,IAAI,SAAS,OAAO,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,WAAD,CAAY,CAAA;OAC/C,OAAO;CACd,GAAG;EAAC;EAAe;EAAmB;EAAS;CAAW,CAAC;CAC3D,MAAM,SAAA,GAAA,MAAA,QAAA,OAAsB;EAC1B,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,UAAU,EAAI,CAAA;CACvD,GAAG,CAAC,eAAe,UAAU,CAAC;CAC9B,MAAM,aAAA,GAAA,MAAA,QAAA,OAA0B;EAC9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;GAAmB,GAAI,kBAAkB,cAAc;GACpD,UAAA;EACgB,CAAA;CAEvB,GAAG;EAAC;EAAmB;EAAgB;CAAI,CAAC;CAE5C,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,gBAAAA,OAAO,OAAR;EAAc,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;EAAU,CAAC;EAA5D,UAAA;GACG;GACA;GACA,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;IAAe,GAAI;IAAa;GAAwB,CAAA,IACtD;EACQ;;AAElB,GACA,MACF,CAAC,CAAC;AAMF,MAAM,oBAAoB,YACxB,OACA,WACF,CAAC,CAAC,EAAE,kBAAkB,GAAG,CAAC;AAI1B,MAAM,gBAAgB,YAAwC,QAAQ,OAAO,CAAC,CAAC"}
+{"version":3,"file":"checkbox.cjs","names":["createSlotComponent","checkboxStyle","useCheckbox","useInputBorder","useMemo","MinusIcon","CheckIcon","styled"],"sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxProps } from \"./use-checkbox\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { CheckIcon, MinusIcon } from \"../icon\"\nimport { useInputBorder } from \"../input\"\nimport { checkboxStyle } from \"./checkbox.style\"\nimport { useCheckbox } from \"./use-checkbox\"\n\nexport interface CheckboxProps<Y extends string = string>\n  extends\n    Merge<HTMLStyledProps<\"label\">, UseCheckboxProps<Y>>,\n    ThemeProps<CheckboxStyle>,\n    UseInputBorderProps {\n  /**\n   * The icon to display in the checkbox when it is checked.\n   */\n  checkedIcon?: ReactNode\n  /**\n   * The icon to display in the checkbox when it is indeterminate.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: CheckboxIndicatorProps\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for the label component.\n   */\n  labelProps?: CheckboxLabelProps\n  /**\n   * Props for the label element.\n   */\n  rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n  component,\n  PropsContext: CheckboxPropsContext,\n  usePropsContext: useCheckboxPropsContext,\n  withContext,\n  withProvider,\n  useRootComponentProps,\n} = createSlotComponent<CheckboxProps, CheckboxStyle>(\"checkbox\", checkboxStyle)\n\nexport {\n  CheckboxPropsContext,\n  component,\n  useCheckboxPropsContext,\n  useRootComponentProps,\n}\n\n/**\n * `Checkbox` is a component used for allowing users to select multiple values from multiple options.\n *\n * @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const Checkbox = withProvider<\"label\", CheckboxProps>(\n  ({\n    checkedIcon,\n    children,\n    errorBorderColor,\n    focusBorderColor,\n    indeterminateIcon,\n    indicatorProps,\n    inputProps,\n    labelProps,\n    rootProps,\n    ...rest\n  }) => {\n    const {\n      checked,\n      indeterminate,\n      getIndicatorProps,\n      getInputProps,\n      getRootProps,\n    } = useCheckbox(rest)\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const icon = useMemo(() => {\n      if (indeterminate) return indeterminateIcon || <MinusIcon />\n      else if (checked) return checkedIcon || <CheckIcon />\n      else return null\n    }, [indeterminate, indeterminateIcon, checked, checkedIcon])\n    const input = useMemo(() => {\n      return <styled.input {...getInputProps(inputProps)} />\n    }, [getInputProps, inputProps])\n    const indicator = useMemo(() => {\n      return (\n        <CheckboxIndicator {...getIndicatorProps(indicatorProps)}>\n          {icon}\n        </CheckboxIndicator>\n      )\n    }, [getIndicatorProps, indicatorProps, icon])\n\n    return (\n      <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n        {input}\n        {indicator}\n        {children ? (\n          <CheckboxLabel {...labelProps}>{children}</CheckboxLabel>\n        ) : null}\n      </styled.label>\n    )\n  },\n  \"root\",\n)() as GenericsComponent<{\n  <Y extends string = string>(props: CheckboxProps<Y>): ReactElement\n}>\n\ninterface CheckboxIndicatorProps extends HTMLStyledProps {}\n\nconst CheckboxIndicator = withContext<\"div\", CheckboxIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)({ \"data-indicator\": \"\" })\n\ninterface CheckboxLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst CheckboxLabel = withContext<\"span\", CheckboxLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;AA8CA,MAAM,EACJ,WACA,cAAc,sBACd,iBAAiB,yBACjB,aACA,cACA,0BACEA,yBAAAA,oBAAkD,YAAYC,uBAAAA,aAAa;;;;;;AAc/E,MAAa,WAAW,cACrB,EACC,aACA,UACA,kBACA,kBACA,mBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,SACA,eACA,mBACA,eACA,iBACEC,qBAAAA,YAAY,IAAI;CACpB,MAAM,WAAWC,yBAAAA,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,QAAA,GAAOC,MAAAA,QAAAA,OAAc;EACzB,IAAI,eAAe,OAAO,qBAAqB,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,WAAD,CAAY,CAAA;OACtD,IAAI,SAAS,OAAO,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,WAAD,CAAY,CAAA;OAC/C,OAAO;CACd,GAAG;EAAC;EAAe;EAAmB;EAAS;CAAW,CAAC;CAC3D,MAAM,SAAA,GAAQF,MAAAA,QAAAA,OAAc;EAC1B,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACG,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,UAAU,EAAI,CAAA;CACvD,GAAG,CAAC,eAAe,UAAU,CAAC;CAC9B,MAAM,aAAA,GAAYH,MAAAA,QAAAA,OAAc;EAC9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;GAAmB,GAAI,kBAAkB,cAAc;GACpD,UAAA;EACgB,CAAA;CAEvB,GAAG;EAAC;EAAmB;EAAgB;CAAI,CAAC;CAE5C,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACG,gBAAAA,OAAO,OAAR;EAAc,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;EAAU,CAAC;EAA5D,UAAA;GACG;GACA;GACA,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;IAAe,GAAI;IAAa;GAAwB,CAAA,IACtD;EACQ;;AAElB,GACA,MACF,CAAC,CAAC;AAMF,MAAM,oBAAoB,YACxB,OACA,WACF,CAAC,CAAC,EAAE,kBAAkB,GAAG,CAAC;AAI1B,MAAM,gBAAgB,YAAwC,QAAQ,OAAO,CAAC,CAAC"}

package/dist/cjs/components/checkbox/use-checkbox-group.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_context = require("../../utils/context.cjs");
 const require_dom = require("../../utils/dom.cjs");
 const require_utils_index = require("../../utils/index.cjs");

package/dist/cjs/components/checkbox/use-checkbox-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-checkbox-group.cjs","names":["createContext","useFieldProps","useControllableState","mergeProps","visuallyHiddenAttributes"],"sources":["../../../../src/components/checkbox/use-checkbox-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  isNumber,\n  isObject,\n  isString,\n  isUndefined,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface CheckboxGroupContext extends Omit<\n  UseCheckboxGroupReturn,\n  \"getRootProps\"\n> {}\n\nconst [CheckboxGroupContext, useCheckboxGroupContext] =\n  createContext<CheckboxGroupContext>({\n    name: \"CheckboxGroupContext\",\n    strict: false,\n  })\n\nexport { CheckboxGroupContext, useCheckboxGroupContext }\n\nexport interface UseCheckboxGroupProps<Y extends string = string>\n  extends Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"value\">, FieldProps {\n  /**\n   * The initial value of the checkbox group.\n   *\n   * @default []\n   */\n  defaultValue?: Y[]\n  /**\n   * The maximum number of checkboxes that can be checked.\n   */\n  max?: number\n  /**\n   * The value of the checkbox group.\n   */\n  value?: Y[]\n  /**\n   * The callback fired when any children checkbox is checked or unchecked.\n   */\n  onChange?: (value: Y[]) => void\n}\n\nexport const useCheckboxGroup = <Y extends string = string>(\n  props: UseCheckboxGroupProps<Y> = {},\n) => {\n  const {\n    context: { labelId } = {},\n    props: {\n      defaultValue = [],\n      disabled,\n      max,\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedbyProp, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n\n  const onChange = useCallback(\n    (valueOrEv: ChangeEvent<HTMLInputElement> | Y) => {\n      if (!interactive) return\n\n      if (isObject(valueOrEv)) valueOrEv = valueOrEv.target.value as Y\n\n      setValue((prev) => {\n        if (prev.includes(valueOrEv))\n          return prev.filter((prevValue) => prevValue !== valueOrEv)\n        else if (!isNumber(max) || prev.length < max)\n          return [...prev, valueOrEv]\n        else return prev\n      })\n    },\n    [interactive, max, setValue],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({\n      ref,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) =>\n      mergeProps(\n        dataProps,\n        {\n          \"aria-describedby\": cx(ariaDescribedbyProp, ariaDescribedby),\n          \"aria-labelledby\": cx(labelId, ariaLabelledby),\n          role: \"group\",\n        },\n        rest,\n        props,\n        {\n          ref,\n        },\n      )(),\n    [ariaDescribedbyProp, dataProps, labelId, rest],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const checked =\n        !isUndefined(value) &&\n        (isString(props.value) || isNumber(props.value)) &&\n        value.includes(props.value as Y)\n      const trulyDisabled = !checked && isNumber(max) && value.length >= max\n\n      return {\n        ...dataProps,\n        ...ariaProps,\n        type: \"checkbox\",\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": checked,\n        \"aria-disabled\": ariaAttr(trulyDisabled),\n        \"data-checked\": dataAttr(checked),\n        \"data-disabled\": dataAttr(trulyDisabled),\n        checked,\n        readOnly,\n        required,\n        ...props,\n        disabled: Boolean(props.disabled || trulyDisabled),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      eventProps,\n      max,\n      onChange,\n      readOnly,\n      required,\n      value,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  return {\n    max,\n    value,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>\n"],"mappings":";;;;;;;;;AA2BA,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAAA,cAAoC;CAClC,MAAM;CACN,QAAQ;AACV,CAAC;AA0BH,MAAa,oBACX,QAAkC,CAAC,MAChC;CACH,MAAM,EACJ,SAAS,EAAE,YAAY,CAAC,GACxB,OAAO,EACL,eAAe,CAAC,GAChB,UACA,KACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,qBAAqB,GAAG,aACzD,WACA,eACEC,wBAAAA,cAAc,KAAK;CACvB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACZ,CAAC;CAED,MAAM,YAAA,GAAA,MAAA,YAAA,EACH,cAAiD;EAChD,IAAI,CAAC,aAAa;EAElB,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,SAAS,GAAG,YAAY,UAAU,OAAO;EAEtD,UAAU,SAAS;GACjB,IAAI,KAAK,SAAS,SAAS,GACzB,OAAO,KAAK,QAAQ,cAAc,cAAc,SAAS;QACtD,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,GAAG,KAAK,KAAK,SAAS,KACvC,OAAO,CAAC,GAAG,MAAM,SAAS;QACvB,OAAO;EACd,CAAC;CACH,GACA;EAAC;EAAa;EAAK;CAAQ,CAC7B;CAEA,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,CAAC,MACHC,cAAAA,WACE,WACA;EACE,qBAAA,GAAA,oBAAA,cAAA,GAAA,CAAuB,qBAAqB,eAAe;EAC3D,oBAAA,GAAA,oBAAA,cAAA,GAAA,CAAsB,SAAS,cAAc;EAC7C,MAAM;CACR,GACA,MACA,OACA,EACE,IACF,CACF,CAAC,CAAC,GACJ;EAAC;EAAqB;EAAW;EAAS;CAAI,CAChD;CAiDA,OAAO;EACL;EACA;EACA,gBAAA,GAAA,MAAA,YAAA,EAjDC,QAAQ,CAAC,MAAM;GACd,MAAM,UACJ,EAAA,GAAA,oBAAA,cAAA,YAAA,CAAa,KAAK,OAAA,GAAA,oBAAA,cAAA,SAAA,CACR,MAAM,KAAK,MAAA,GAAA,oBAAA,cAAA,SAAA,CAAc,MAAM,KAAK,MAC9C,MAAM,SAAS,MAAM,KAAU;GACjC,MAAM,gBAAgB,CAAC,YAAA,GAAA,oBAAA,cAAA,SAAA,CAAoB,GAAG,KAAK,MAAM,UAAU;GAEnE,OAAO;IACL,GAAG;IACH,GAAG;IACH,MAAM;IACN,OAAOC,YAAAA,yBAAyB;IAChC,gBAAgB;IAChB,kBAAA,GAAA,oBAAA,cAAA,SAAA,CAA0B,aAAa;IACvC,iBAAA,GAAA,oBAAA,cAAA,SAAA,CAAyB,OAAO;IAChC,kBAAA,GAAA,oBAAA,cAAA,SAAA,CAA0B,aAAa;IACvC;IACA;IACA;IACA,GAAG;IACH,UAAU,QAAQ,MAAM,YAAY,aAAa;IACjD,SAAA,GAAA,oBAAA,cAAA,WAAA,CAAmB,MAAM,QAAQ,WAAW,MAAM;IAClD,WAAA,GAAA,oBAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,QAAQ;IAC7C,UAAA,GAAA,oBAAA,cAAA,WAAA,CAAoB,MAAM,SAAS,WAAW,OAAO;GACvD;EACF,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAcY;EACZ,gBAAA,GAAA,MAAA,YAAA,EAXC,WAAW;GACV,GAAG;GACH,GAAG;EACL,IACA,CAAC,SAAS,CAOE;EACZ;EACA;CACF;AACF"}
+{"version":3,"file":"use-checkbox-group.cjs","names":["createContext","useFieldProps","useControllableState","useCallback","mergeProps","visuallyHiddenAttributes"],"sources":["../../../../src/components/checkbox/use-checkbox-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  isNumber,\n  isObject,\n  isString,\n  isUndefined,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface CheckboxGroupContext extends Omit<\n  UseCheckboxGroupReturn,\n  \"getRootProps\"\n> {}\n\nconst [CheckboxGroupContext, useCheckboxGroupContext] =\n  createContext<CheckboxGroupContext>({\n    name: \"CheckboxGroupContext\",\n    strict: false,\n  })\n\nexport { CheckboxGroupContext, useCheckboxGroupContext }\n\nexport interface UseCheckboxGroupProps<Y extends string = string>\n  extends Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"value\">, FieldProps {\n  /**\n   * The initial value of the checkbox group.\n   *\n   * @default []\n   */\n  defaultValue?: Y[]\n  /**\n   * The maximum number of checkboxes that can be checked.\n   */\n  max?: number\n  /**\n   * The value of the checkbox group.\n   */\n  value?: Y[]\n  /**\n   * The callback fired when any children checkbox is checked or unchecked.\n   */\n  onChange?: (value: Y[]) => void\n}\n\nexport const useCheckboxGroup = <Y extends string = string>(\n  props: UseCheckboxGroupProps<Y> = {},\n) => {\n  const {\n    context: { labelId } = {},\n    props: {\n      defaultValue = [],\n      disabled,\n      max,\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedbyProp, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n\n  const onChange = useCallback(\n    (valueOrEv: ChangeEvent<HTMLInputElement> | Y) => {\n      if (!interactive) return\n\n      if (isObject(valueOrEv)) valueOrEv = valueOrEv.target.value as Y\n\n      setValue((prev) => {\n        if (prev.includes(valueOrEv))\n          return prev.filter((prevValue) => prevValue !== valueOrEv)\n        else if (!isNumber(max) || prev.length < max)\n          return [...prev, valueOrEv]\n        else return prev\n      })\n    },\n    [interactive, max, setValue],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({\n      ref,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) =>\n      mergeProps(\n        dataProps,\n        {\n          \"aria-describedby\": cx(ariaDescribedbyProp, ariaDescribedby),\n          \"aria-labelledby\": cx(labelId, ariaLabelledby),\n          role: \"group\",\n        },\n        rest,\n        props,\n        {\n          ref,\n        },\n      )(),\n    [ariaDescribedbyProp, dataProps, labelId, rest],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const checked =\n        !isUndefined(value) &&\n        (isString(props.value) || isNumber(props.value)) &&\n        value.includes(props.value as Y)\n      const trulyDisabled = !checked && isNumber(max) && value.length >= max\n\n      return {\n        ...dataProps,\n        ...ariaProps,\n        type: \"checkbox\",\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": checked,\n        \"aria-disabled\": ariaAttr(trulyDisabled),\n        \"data-checked\": dataAttr(checked),\n        \"data-disabled\": dataAttr(trulyDisabled),\n        checked,\n        readOnly,\n        required,\n        ...props,\n        disabled: Boolean(props.disabled || trulyDisabled),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      eventProps,\n      max,\n      onChange,\n      readOnly,\n      required,\n      value,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  return {\n    max,\n    value,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>\n"],"mappings":";;;;;;;;;;AA2BA,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAAA,cAAoC;CAClC,MAAM;CACN,QAAQ;AACV,CAAC;AA0BH,MAAa,oBACX,QAAkC,CAAC,MAChC;CACH,MAAM,EACJ,SAAS,EAAE,YAAY,CAAC,GACxB,OAAO,EACL,eAAe,CAAC,GAChB,UACA,KACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,qBAAqB,GAAG,aACzD,WACA,eACEC,wBAAAA,cAAc,KAAK;CACvB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACZ,CAAC;CAED,MAAM,YAAA,GAAWC,MAAAA,YAAAA,EACd,cAAiD;EAChD,IAAI,CAAC,aAAa;EAElB,KAAA,GAAA,oBAAA,cAAI,SAAA,CAAS,SAAS,GAAG,YAAY,UAAU,OAAO;EAEtD,UAAU,SAAS;GACjB,IAAI,KAAK,SAAS,SAAS,GACzB,OAAO,KAAK,QAAQ,cAAc,cAAc,SAAS;QACtD,IAAI,EAAA,GAAA,oBAAA,cAAC,SAAA,CAAS,GAAG,KAAK,KAAK,SAAS,KACvC,OAAO,CAAC,GAAG,MAAM,SAAS;QACvB,OAAO;EACd,CAAC;CACH,GACA;EAAC;EAAa;EAAK;CAAQ,CAC7B;CAEA,MAAM,gBAAA,GAA2BA,MAAAA,YAAAA,EAC9B,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,CAAC,MACHC,cAAAA,WACE,WACA;EACE,qBAAA,GAAA,oBAAA,cAAoB,GAAA,CAAG,qBAAqB,eAAe;EAC3D,oBAAA,GAAA,oBAAA,cAAmB,GAAA,CAAG,SAAS,cAAc;EAC7C,MAAM;CACR,GACA,MACA,OACA,EACE,IACF,CACF,CAAC,CAAC,GACJ;EAAC;EAAqB;EAAW;EAAS;CAAI,CAChD;CAiDA,OAAO;EACL;EACA;EACA,gBAAA,GAlDyCD,MAAAA,YAAAA,EACxC,QAAQ,CAAC,MAAM;GACd,MAAM,UACJ,EAAA,GAAA,oBAAA,cAAC,YAAA,CAAY,KAAK,OAAA,GAAA,oBAAA,cACjB,SAAA,CAAS,MAAM,KAAK,MAAA,GAAA,oBAAA,cAAK,SAAA,CAAS,MAAM,KAAK,MAC9C,MAAM,SAAS,MAAM,KAAU;GACjC,MAAM,gBAAgB,CAAC,YAAA,GAAA,oBAAA,cAAW,SAAA,CAAS,GAAG,KAAK,MAAM,UAAU;GAEnE,OAAO;IACL,GAAG;IACH,GAAG;IACH,MAAM;IACN,OAAOE,YAAAA,yBAAyB;IAChC,gBAAgB;IAChB,kBAAA,GAAA,oBAAA,cAAiB,SAAA,CAAS,aAAa;IACvC,iBAAA,GAAA,oBAAA,cAAgB,SAAA,CAAS,OAAO;IAChC,kBAAA,GAAA,oBAAA,cAAiB,SAAA,CAAS,aAAa;IACvC;IACA;IACA;IACA,GAAG;IACH,UAAU,QAAQ,MAAM,YAAY,aAAa;IACjD,SAAA,GAAA,oBAAA,cAAQ,WAAA,CAAW,MAAM,QAAQ,WAAW,MAAM;IAClD,WAAA,GAAA,oBAAA,cAAU,WAAA,CAAW,MAAM,UAAU,QAAQ;IAC7C,UAAA,GAAA,oBAAA,cAAS,WAAA,CAAW,MAAM,SAAS,WAAW,OAAO;GACvD;EACF,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAcY;EACZ,gBAAA,GAZyCF,MAAAA,YAAAA,EACxC,WAAW;GACV,GAAG;GACH,GAAG;EACL,IACA,CAAC,SAAS,CAOE;EACZ;EACA;CACF;AACF"}

package/dist/cjs/components/checkbox/use-checkbox.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_dom = require("../../utils/dom.cjs");
 const require_ref = require("../../utils/ref.cjs");
 const require_utils_index = require("../../utils/index.cjs");
@@ -18,9 +19,10 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		notSupportReadOnly: true
 	});
 	const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby;
+	const resolvedChecked = !(0, require_utils_index.utils_exports.isUndefined)(groupValue) && !(0, require_utils_index.utils_exports.isUndefined)(value) ? groupValue.includes(value) : checkedProp;
 	const [checked, setChecked] = require_hooks_use_controllable_state_index.useControllableEventState({
 		defaultValue: defaultChecked,
-		value: !(0, require_utils_index.utils_exports.isUndefined)(groupValue) && !(0, require_utils_index.utils_exports.isUndefined)(value) ? groupValue.includes(value) : checkedProp,
+		value: resolvedChecked,
 		onChange: onChangeProp
 	});
 	const trulyDisabled = !checked && (0, require_utils_index.utils_exports.isNumber)(max) && group && group.value.length >= max;

package/dist/cjs/components/checkbox/use-checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-checkbox.cjs","names":["useCheckboxGroupContext","useFieldProps","useControllableEventState","mergeProps","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/checkbox/use-checkbox.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  cx,\n  dataAttr,\n  handlerAll,\n  isNumber,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useCheckboxGroupContext } from \"./use-checkbox-group\"\n\nexport interface UseCheckboxProps<Y extends string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the checkbox will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * If `true`, the checkbox will be indeterminate.\n   *\n   * @default false\n   */\n  indeterminate?: boolean\n  /**\n   * The name of the input field in a checkbox.\n   */\n  name?: string\n  /**\n   * The value of the checkbox.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the checkbox is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\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\nexport const useCheckbox = <Y extends string = string>({\n  \"aria-describedby\": ariaDescribedbyProp,\n  ...props\n}: UseCheckboxProps<Y> = {}) => {\n  const group = useCheckboxGroupContext()\n  const {\n    max,\n    value: groupValue,\n    getInputProps: getGroupInputProps,\n    getLabelProps,\n  } = group ?? {}\n  const uuid = useId()\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-controls\": ariaControlsProp,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      indeterminate = false,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps({\n    id: group ? uuid : undefined,\n    ...props,\n    notSupportReadOnly: true,\n  })\n  const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n  const resolvedChecked =\n    !isUndefined(groupValue) && !isUndefined(value)\n      ? groupValue.includes(value)\n      : checkedProp\n  const [checked, setChecked] = useControllableEventState({\n    defaultValue: defaultChecked,\n    value: resolvedChecked,\n    onChange: onChangeProp,\n  })\n  const trulyDisabled =\n    !checked && isNumber(max) && group && group.value.length >= max\n  const interactive = !(readOnly || trulyDisabled)\n  const indeterminateRef = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el) el.indeterminate = indeterminate\n    },\n    [indeterminate],\n  )\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return (ev.defaultPrevented = true)\n\n      if (indeterminate) ev.target.checked = true\n\n      setChecked(ev)\n    },\n    [interactive, indeterminate, setChecked],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        dataProps,\n        {\n          \"data-checked\": dataAttr(checked),\n          \"data-indeterminate\": dataAttr(indeterminate),\n        },\n        rest,\n        props,\n      )()\n\n      return getLabelProps?.(merged) ?? merged\n    },\n    [dataProps, checked, indeterminate, rest, getLabelProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({\n      \"aria-controls\": ariaControls,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => {\n      const sharedProps = {\n        ...dataProps,\n        ...ariaProps,\n        id,\n        type: \"checkbox\",\n        name,\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": indeterminate ? (\"mixed\" as const) : checked,\n        \"aria-controls\": cx(ariaControls, ariaControlsProp),\n        \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n        \"aria-disabled\": ariaAttr(!interactive),\n        \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n        \"data-checked\": dataAttr(checked),\n        \"data-indeterminate\": dataAttr(indeterminate),\n        checked,\n        disabled,\n        readOnly,\n        required,\n        tabIndex,\n        value,\n        ...props,\n        ref: mergeRefs(props.ref, ref, indeterminateRef),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n\n      return getGroupInputProps?.(sharedProps) ?? sharedProps\n    },\n    [\n      dataProps,\n      ariaProps,\n      id,\n      name,\n      indeterminate,\n      checked,\n      ariaControlsProp,\n      resolvedAriaDescribedby,\n      interactive,\n      ariaLabelledbyProp,\n      disabled,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      ref,\n      indeterminateRef,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onChange,\n      getGroupInputProps,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-hidden\": \"true\",\n      \"data-checked\": dataAttr(checked),\n      \"data-indeterminate\": dataAttr(indeterminate),\n      ...props,\n    }),\n    [dataProps, checked, indeterminate],\n  )\n\n  return {\n    checked,\n    indeterminate,\n    getIndicatorProps,\n    getInputProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":"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"}
+{"version":3,"file":"use-checkbox.cjs","names":["useCheckboxGroupContext","useId","useFieldProps","useControllableEventState","useCallback","mergeProps","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/checkbox/use-checkbox.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  cx,\n  dataAttr,\n  handlerAll,\n  isNumber,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useCheckboxGroupContext } from \"./use-checkbox-group\"\n\nexport interface UseCheckboxProps<Y extends string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the checkbox will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * If `true`, the checkbox will be indeterminate.\n   *\n   * @default false\n   */\n  indeterminate?: boolean\n  /**\n   * The name of the input field in a checkbox.\n   */\n  name?: string\n  /**\n   * The value of the checkbox.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the checkbox is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\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\nexport const useCheckbox = <Y extends string = string>({\n  \"aria-describedby\": ariaDescribedbyProp,\n  ...props\n}: UseCheckboxProps<Y> = {}) => {\n  const group = useCheckboxGroupContext()\n  const {\n    max,\n    value: groupValue,\n    getInputProps: getGroupInputProps,\n    getLabelProps,\n  } = group ?? {}\n  const uuid = useId()\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-controls\": ariaControlsProp,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      indeterminate = false,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps({\n    id: group ? uuid : undefined,\n    ...props,\n    notSupportReadOnly: true,\n  })\n  const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n  const resolvedChecked =\n    !isUndefined(groupValue) && !isUndefined(value)\n      ? groupValue.includes(value)\n      : checkedProp\n  const [checked, setChecked] = useControllableEventState({\n    defaultValue: defaultChecked,\n    value: resolvedChecked,\n    onChange: onChangeProp,\n  })\n  const trulyDisabled =\n    !checked && isNumber(max) && group && group.value.length >= max\n  const interactive = !(readOnly || trulyDisabled)\n  const indeterminateRef = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el) el.indeterminate = indeterminate\n    },\n    [indeterminate],\n  )\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return (ev.defaultPrevented = true)\n\n      if (indeterminate) ev.target.checked = true\n\n      setChecked(ev)\n    },\n    [interactive, indeterminate, setChecked],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        dataProps,\n        {\n          \"data-checked\": dataAttr(checked),\n          \"data-indeterminate\": dataAttr(indeterminate),\n        },\n        rest,\n        props,\n      )()\n\n      return getLabelProps?.(merged) ?? merged\n    },\n    [dataProps, checked, indeterminate, rest, getLabelProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({\n      \"aria-controls\": ariaControls,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => {\n      const sharedProps = {\n        ...dataProps,\n        ...ariaProps,\n        id,\n        type: \"checkbox\",\n        name,\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": indeterminate ? (\"mixed\" as const) : checked,\n        \"aria-controls\": cx(ariaControls, ariaControlsProp),\n        \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n        \"aria-disabled\": ariaAttr(!interactive),\n        \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n        \"data-checked\": dataAttr(checked),\n        \"data-indeterminate\": dataAttr(indeterminate),\n        checked,\n        disabled,\n        readOnly,\n        required,\n        tabIndex,\n        value,\n        ...props,\n        ref: mergeRefs(props.ref, ref, indeterminateRef),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n\n      return getGroupInputProps?.(sharedProps) ?? sharedProps\n    },\n    [\n      dataProps,\n      ariaProps,\n      id,\n      name,\n      indeterminate,\n      checked,\n      ariaControlsProp,\n      resolvedAriaDescribedby,\n      interactive,\n      ariaLabelledbyProp,\n      disabled,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      ref,\n      indeterminateRef,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onChange,\n      getGroupInputProps,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-hidden\": \"true\",\n      \"data-checked\": dataAttr(checked),\n      \"data-indeterminate\": dataAttr(indeterminate),\n      ...props,\n    }),\n    [dataProps, checked, indeterminate],\n  )\n\n  return {\n    checked,\n    indeterminate,\n    getIndicatorProps,\n    getInputProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":"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"}

package/dist/cjs/components/checkbox-card/checkbox-card-group.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_group = require("../group/group.cjs");
 const require_use_checkbox_group = require("../checkbox/use-checkbox-group.cjs");
 const require_checkbox_card = require("./checkbox-card.cjs");
@@ -27,48 +28,50 @@ const CheckboxCardGroupRoot = require_checkbox_card.component((props) => {
 			...rest
 		}, value ?? index));
 	}, [items, children]);
+	const context = (0, react.useMemo)(() => ({
+		colorScheme,
+		size,
+		variant,
+		checkedIcon,
+		disabled,
+		errorBorderColor,
+		focusBorderColor,
+		invalid,
+		justify,
+		readOnly,
+		shape,
+		withIndicator
+	}), [
+		colorScheme,
+		size,
+		checkedIcon,
+		variant,
+		disabled,
+		justify,
+		withIndicator,
+		errorBorderColor,
+		focusBorderColor,
+		invalid,
+		readOnly,
+		shape
+	]);
+	const groupContext = (0, react.useMemo)(() => ({
+		max,
+		value,
+		getInputProps,
+		getLabelProps,
+		onChange
+	}), [
+		max,
+		value,
+		getInputProps,
+		getLabelProps,
+		onChange
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox_card.CheckboxCardPropsContext, {
-		value: (0, react.useMemo)(() => ({
-			colorScheme,
-			size,
-			variant,
-			checkedIcon,
-			disabled,
-			errorBorderColor,
-			focusBorderColor,
-			invalid,
-			justify,
-			readOnly,
-			shape,
-			withIndicator
-		}), [
-			colorScheme,
-			size,
-			checkedIcon,
-			variant,
-			disabled,
-			justify,
-			withIndicator,
-			errorBorderColor,
-			focusBorderColor,
-			invalid,
-			readOnly,
-			shape
-		]),
+		value: context,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_checkbox_group.CheckboxGroupContext, {
-			value: (0, react.useMemo)(() => ({
-				max,
-				value,
-				getInputProps,
-				getLabelProps,
-				onChange
-			}), [
-				max,
-				value,
-				getInputProps,
-				getLabelProps,
-				onChange
-			]),
+			value: groupContext,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
 				...getRootProps(),
 				children: computedChildren

package/dist/cjs/components/checkbox-card/checkbox-card-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-card-group.cjs","names":["component","useRootComponentProps","useCheckboxGroup","CheckboxCardRoot","CheckboxCardPropsContext","CheckboxGroupContext","Group"],"sources":["../../../../src/components/checkbox-card/checkbox-card-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  GenericsComponent,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { UseCheckboxGroupProps } from \"../checkbox\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxCardRootProps } from \"./checkbox-card\"\nimport type { CheckboxCardStyle } from \"./checkbox-card.style\"\nimport { useMemo } from \"react\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"../checkbox\"\nimport { Group } from \"../group\"\nimport {\n  CheckboxCardPropsContext,\n  CheckboxCardRoot,\n  component,\n  useRootComponentProps,\n} from \"./checkbox-card\"\n\nexport interface CheckboxCardGroupItem<\n  Y extends string = string,\n> extends CheckboxCardRootProps<Y> {}\n\nexport interface CheckboxCardGroupRootProps<Y extends string = string>\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, CheckboxCardStyle>,\n      \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<CheckboxCardStyle>,\n    UseCheckboxGroupProps<Y>,\n    UseInputBorderProps,\n    Pick<CheckboxCardRootProps, \"checkedIcon\" | \"withIndicator\"> {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: CheckboxCardGroupItem<Y>[]\n}\n\n/**\n * `CheckboxCardGroup` is a component that groups `CheckboxCard` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox-card\n */\nexport const CheckboxCardGroupRoot = component<\n  \"div\",\n  CheckboxCardGroupRootProps\n>((props) => {\n  const [\n    ,\n    {\n      colorScheme,\n      size,\n      variant,\n      checkedIcon,\n      children,\n      disabled,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      items = [],\n      justify,\n      readOnly,\n      shape,\n      withIndicator,\n      ...rest\n    },\n  ] = useRootComponentProps(props, \"group\", {\n    transferProps: [\n      \"variant\",\n      \"colorScheme\",\n      \"size\",\n      \"shape\",\n      \"justify\",\n      \"withIndicator\",\n    ],\n  })\n  const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n    useCheckboxGroup(rest)\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return items.map(({ value, ...rest }, index) => (\n      <CheckboxCardRoot key={value ?? index} value={value} {...rest} />\n    ))\n  }, [items, children])\n  const context = useMemo(\n    () => ({\n      colorScheme,\n      size,\n      variant,\n      checkedIcon,\n      disabled,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      justify,\n      readOnly,\n      shape,\n      withIndicator,\n    }),\n    [\n      colorScheme,\n      size,\n      checkedIcon,\n      variant,\n      disabled,\n      justify,\n      withIndicator,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      readOnly,\n      shape,\n    ],\n  )\n  const groupContext = useMemo(\n    () => ({ max, value, getInputProps, getLabelProps, onChange }),\n    [max, value, getInputProps, getLabelProps, onChange],\n  )\n\n  return (\n    <CheckboxCardPropsContext value={context}>\n      <CheckboxGroupContext value={groupContext}>\n        <Group {...getRootProps()}>{computedChildren}</Group>\n      </CheckboxGroupContext>\n    </CheckboxCardPropsContext>\n  )\n}, \"group\")() as GenericsComponent<{\n  <Y extends string = string>(\n    props: CheckboxCardGroupRootProps<Y>,\n  ): ReactElement\n}>\n\nexport { CheckboxCardRoot as CheckboxCardGroupItem }\n"],"mappings":";;;;;;;;;;;;AAkDA,MAAa,wBAAwBA,sBAAAA,WAGlC,UAAU;CACX,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,CAAC,GACT,SACA,UACA,OACA,eACA,GAAG,UAEHC,sBAAAA,sBAAsB,OAAO,SAAS,EACxC,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;CACF,EACF,CAAC;CACD,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9DC,2BAAAA,iBAAiB,IAAI;CACvB,MAAM,oBAAA,GAAA,MAAA,QAAA,OAAiC;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,kBAAD;GAA8C;GAAO,GAAI;EAAO,GAAzC,SAAS,KAAgC,CACjE;CACH,GAAG,CAAC,OAAO,QAAQ,CAAC;CAoCpB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,0BAAD;EAA0B,QAAA,GAAA,MAAA,QAAA,QAnCnB;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAQuC;EACrC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,sBAAD;GAAsB,QAAA,GAAA,MAAA,QAAA,QANjB;IAAE;IAAK;IAAO;IAAe;IAAe;GAAS,IAC5D;IAAC;IAAK;IAAO;IAAe;IAAe;GAAQ,CAKT;GACtC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAO,GAAI,aAAa;IAAI,UAAA;GAAwB,CAAA;EAChC,CAAA;CACE,CAAA;AAE9B,GAAG,OAAO,CAAC,CAAC"}
+{"version":3,"file":"checkbox-card-group.cjs","names":["component","useRootComponentProps","useCheckboxGroup","useMemo","CheckboxCardRoot","CheckboxCardPropsContext","CheckboxGroupContext","Group"],"sources":["../../../../src/components/checkbox-card/checkbox-card-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  GenericsComponent,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { UseCheckboxGroupProps } from \"../checkbox\"\nimport type { GroupProps } from \"../group\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxCardRootProps } from \"./checkbox-card\"\nimport type { CheckboxCardStyle } from \"./checkbox-card.style\"\nimport { useMemo } from \"react\"\nimport { CheckboxGroupContext, useCheckboxGroup } from \"../checkbox\"\nimport { Group } from \"../group\"\nimport {\n  CheckboxCardPropsContext,\n  CheckboxCardRoot,\n  component,\n  useRootComponentProps,\n} from \"./checkbox-card\"\n\nexport interface CheckboxCardGroupItem<\n  Y extends string = string,\n> extends CheckboxCardRootProps<Y> {}\n\nexport interface CheckboxCardGroupRootProps<Y extends string = string>\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, CheckboxCardStyle>,\n      \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<CheckboxCardStyle>,\n    UseCheckboxGroupProps<Y>,\n    UseInputBorderProps,\n    Pick<CheckboxCardRootProps, \"checkedIcon\" | \"withIndicator\"> {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: CheckboxCardGroupItem<Y>[]\n}\n\n/**\n * `CheckboxCardGroup` is a component that groups `CheckboxCard` components.\n *\n * @see https://yamada-ui.com/docs/components/checkbox-card\n */\nexport const CheckboxCardGroupRoot = component<\n  \"div\",\n  CheckboxCardGroupRootProps\n>((props) => {\n  const [\n    ,\n    {\n      colorScheme,\n      size,\n      variant,\n      checkedIcon,\n      children,\n      disabled,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      items = [],\n      justify,\n      readOnly,\n      shape,\n      withIndicator,\n      ...rest\n    },\n  ] = useRootComponentProps(props, \"group\", {\n    transferProps: [\n      \"variant\",\n      \"colorScheme\",\n      \"size\",\n      \"shape\",\n      \"justify\",\n      \"withIndicator\",\n    ],\n  })\n  const { max, value, getInputProps, getLabelProps, getRootProps, onChange } =\n    useCheckboxGroup(rest)\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return items.map(({ value, ...rest }, index) => (\n      <CheckboxCardRoot key={value ?? index} value={value} {...rest} />\n    ))\n  }, [items, children])\n  const context = useMemo(\n    () => ({\n      colorScheme,\n      size,\n      variant,\n      checkedIcon,\n      disabled,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      justify,\n      readOnly,\n      shape,\n      withIndicator,\n    }),\n    [\n      colorScheme,\n      size,\n      checkedIcon,\n      variant,\n      disabled,\n      justify,\n      withIndicator,\n      errorBorderColor,\n      focusBorderColor,\n      invalid,\n      readOnly,\n      shape,\n    ],\n  )\n  const groupContext = useMemo(\n    () => ({ max, value, getInputProps, getLabelProps, onChange }),\n    [max, value, getInputProps, getLabelProps, onChange],\n  )\n\n  return (\n    <CheckboxCardPropsContext value={context}>\n      <CheckboxGroupContext value={groupContext}>\n        <Group {...getRootProps()}>{computedChildren}</Group>\n      </CheckboxGroupContext>\n    </CheckboxCardPropsContext>\n  )\n}, \"group\")() as GenericsComponent<{\n  <Y extends string = string>(\n    props: CheckboxCardGroupRootProps<Y>,\n  ): ReactElement\n}>\n\nexport { CheckboxCardRoot as CheckboxCardGroupItem }\n"],"mappings":";;;;;;;;;;;;;AAkDA,MAAa,wBAAwBA,sBAAAA,WAGlC,UAAU;CACX,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,CAAC,GACT,SACA,UACA,OACA,eACA,GAAG,UAEHC,sBAAAA,sBAAsB,OAAO,SAAS,EACxC,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;CACF,EACF,CAAC;CACD,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9DC,2BAAAA,iBAAiB,IAAI;CACvB,MAAM,oBAAA,GAAmBC,MAAAA,QAAAA,OAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,kBAAD;GAA8C;GAAO,GAAI;EAAO,GAAzC,SAAS,KAAgC,CACjE;CACH,GAAG,CAAC,OAAO,QAAQ,CAAC;CACpB,MAAM,WAAA,GAAUD,MAAAA,QAAAA,QACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CACA,MAAM,gBAAA,GAAeA,MAAAA,QAAAA,QACZ;EAAE;EAAK;EAAO;EAAe;EAAe;CAAS,IAC5D;EAAC;EAAK;EAAO;EAAe;EAAe;CAAQ,CACrD;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,sBAAAA,0BAAD;EAA0B,OAAO;EAC/B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,sBAAD;GAAsB,OAAO;GAC3B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAO,GAAI,aAAa;IAAI,UAAA;GAAwB,CAAA;EAChC,CAAA;CACE,CAAA;AAE9B,GAAG,OAAO,CAAC,CAAC"}

package/dist/cjs/components/checkbox-card/checkbox-card.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_factory = require("../../core/system/factory.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_check_icon = require("../icon/icons/check-icon.cjs");

package/dist/cjs/components/checkbox-card/checkbox-card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-card.cjs","names":["createSlotComponent","checkboxCardStyle","useCheckbox","useInputBorder","MinusIcon","CheckIcon","styled"],"sources":["../../../../src/components/checkbox-card/checkbox-card.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseCheckboxProps } from \"../checkbox\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxCardStyle } from \"./checkbox-card.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useCheckbox } from \"../checkbox\"\nimport { CheckIcon, MinusIcon } from \"../icon\"\nimport { useInputBorder } from \"../input\"\nimport { checkboxCardStyle } from \"./checkbox-card.style\"\n\nexport interface CheckboxCardRootProps<Y extends string = string>\n  extends\n    Merge<HTMLStyledProps<\"label\">, UseCheckboxProps<Y>>,\n    ThemeProps<CheckboxCardStyle>,\n    UseInputBorderProps {\n  /**\n   * The addon of the checkbox card.\n   */\n  addon?: ReactNode\n  /**\n   * The icon to display in the checkbox when it is checked.\n   */\n  checkedIcon?: ReactNode\n  /**\n   * The description of the checkbox card.\n   */\n  description?: ReactNode\n  /**\n   * The icon to display in the checkbox when it is indeterminate.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * The label of the checkbox card.\n   */\n  label?: ReactNode\n  /**\n   * If `true`, the indicator will be displayed.\n   *\n   * @default true\n   */\n  withIndicator?: boolean\n  /**\n   * Props for the addon component.\n   */\n  addonProps?: CheckboxCardAddonProps\n  /**\n   * Props for the description component.\n   */\n  descriptionProps?: CheckboxCardDescriptionProps\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: CheckboxCardIndicatorProps\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for the label component.\n   */\n  labelProps?: CheckboxCardLabelProps\n  /**\n   * Props for the label element.\n   */\n  rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n  component,\n  PropsContext: CheckboxCardPropsContext,\n  usePropsContext: useCheckboxCardPropsContext,\n  withContext,\n  withProvider,\n  useRootComponentProps,\n} = createSlotComponent<CheckboxCardRootProps, CheckboxCardStyle>(\n  \"checkbox-card\",\n  checkboxCardStyle,\n)\n\nexport {\n  CheckboxCardPropsContext,\n  component,\n  useCheckboxCardPropsContext,\n  useRootComponentProps,\n}\n\n/**\n * `CheckboxCard` is a component used for allowing users to select multiple values from multiple options.\n *\n * @see https://yamada-ui.com/docs/components/checkbox-card\n */\nexport const CheckboxCardRoot = withProvider<\"label\", CheckboxCardRootProps>(\n  ({\n    addon,\n    checkedIcon,\n    children,\n    description,\n    errorBorderColor,\n    focusBorderColor,\n    indeterminateIcon,\n    label,\n    withIndicator = true,\n    addonProps,\n    descriptionProps,\n    indicatorProps,\n    inputProps,\n    labelProps,\n    rootProps,\n    ...rest\n  }) => {\n    const {\n      checked,\n      indeterminate,\n      getIndicatorProps,\n      getInputProps,\n      getRootProps,\n    } = useCheckbox(rest)\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const icon = useMemo(() => {\n      if (indeterminate) return indeterminateIcon || <MinusIcon />\n      else if (checked) return checkedIcon || <CheckIcon />\n      else return null\n    }, [indeterminate, indeterminateIcon, checked, checkedIcon])\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return (\n        <>\n          {label ? (\n            <CheckboxCardLabel {...labelProps}>{label}</CheckboxCardLabel>\n          ) : null}\n          {description ? (\n            <CheckboxCardDescription {...descriptionProps}>\n              {description}\n            </CheckboxCardDescription>\n          ) : null}\n          {addon ? (\n            <CheckboxCardAddon {...addonProps}>{addon}</CheckboxCardAddon>\n          ) : null}\n        </>\n      )\n    }, [\n      addon,\n      addonProps,\n      children,\n      description,\n      descriptionProps,\n      label,\n      labelProps,\n    ])\n\n    return (\n      <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n        <styled.input {...getInputProps(inputProps)} />\n        {withIndicator ? (\n          <CheckboxCardIndicator {...getIndicatorProps(indicatorProps)}>\n            {icon}\n          </CheckboxCardIndicator>\n        ) : null}\n\n        {computedChildren}\n      </styled.label>\n    )\n  },\n  \"root\",\n)() as GenericsComponent<{\n  <Y extends string = string>(props: CheckboxCardRootProps<Y>): ReactElement\n}>\n\ninterface CheckboxCardIndicatorProps extends HTMLStyledProps {}\n\nconst CheckboxCardIndicator = withContext<\"div\", CheckboxCardIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)({ \"data-indicator\": \"\" })\n\nexport interface CheckboxCardLabelProps extends HTMLStyledProps {}\n\nexport const CheckboxCardLabel = withContext<\"span\", CheckboxCardLabelProps>(\n  \"span\",\n  \"label\",\n)()\n\nexport interface CheckboxCardDescriptionProps extends HTMLStyledProps {}\n\nexport const CheckboxCardDescription = withContext<\n  \"span\",\n  CheckboxCardDescriptionProps\n>(\"span\", \"description\")()\n\nexport interface CheckboxCardAddonProps extends HTMLStyledProps {}\n\nexport const CheckboxCardAddon = withContext<\"span\", CheckboxCardAddonProps>(\n  \"span\",\n  \"addon\",\n)()\n"],"mappings":";;;;;;;;;;;AAwEA,MAAM,EACJ,WACA,cAAc,0BACd,iBAAiB,6BACjB,aACA,cACA,0BACEA,yBAAAA,oBACF,iBACAC,4BAAAA,iBACF;;;;;;AAcA,MAAa,mBAAmB,cAC7B,EACC,OACA,aACA,UACA,aACA,kBACA,kBACA,mBACA,OACA,gBAAgB,MAChB,YACA,kBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,SACA,eACA,mBACA,eACA,iBACEC,qBAAAA,YAAY,IAAI;CACpB,MAAM,WAAWC,yBAAAA,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,QAAA,GAAA,MAAA,QAAA,OAAqB;EACzB,IAAI,eAAe,OAAO,qBAAqB,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,WAAD,CAAY,CAAA;OACtD,IAAI,SAAS,OAAO,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,WAAD,CAAY,CAAA;OAC/C,OAAO;CACd,GAAG;EAAC;EAAe;EAAmB;EAAS;CAAW,CAAC;CAC3D,MAAM,oBAAA,GAAA,MAAA,QAAA,OAAiC;EACrC,IAAI,UAAU,OAAO;EAErB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;GACG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;IAAmB,GAAI;IAAa,UAAA;GAAyB,CAAA,IAC3D;GACH,cACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,yBAAD;IAAyB,GAAI;IAC1B,UAAA;GACsB,CAAA,IACvB;GACH,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;IAAmB,GAAI;IAAa,UAAA;GAAyB,CAAA,IAC3D;EACJ,EAAA,CAAA;CAEN,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,OAAR;EAAc,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;EAAU,CAAC;EAA5D,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,UAAU,EAAI,CAAA;GAC7C,gBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;IAAuB,GAAI,kBAAkB,cAAc;IACxD,UAAA;GACoB,CAAA,IACrB;GAEH;EACW;;AAElB,GACA,MACF,CAAC,CAAC;AAMF,MAAM,wBAAwB,YAC5B,OACA,WACF,CAAC,CAAC,EAAE,kBAAkB,GAAG,CAAC;AAI1B,MAAa,oBAAoB,YAC/B,QACA,OACF,CAAC,CAAC;AAIF,MAAa,0BAA0B,YAGrC,QAAQ,aAAa,CAAC,CAAC;AAIzB,MAAa,oBAAoB,YAC/B,QACA,OACF,CAAC,CAAC"}
+{"version":3,"file":"checkbox-card.cjs","names":["createSlotComponent","checkboxCardStyle","useCheckbox","useInputBorder","useMemo","MinusIcon","CheckIcon","styled"],"sources":["../../../../src/components/checkbox-card/checkbox-card.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseCheckboxProps } from \"../checkbox\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxCardStyle } from \"./checkbox-card.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useCheckbox } from \"../checkbox\"\nimport { CheckIcon, MinusIcon } from \"../icon\"\nimport { useInputBorder } from \"../input\"\nimport { checkboxCardStyle } from \"./checkbox-card.style\"\n\nexport interface CheckboxCardRootProps<Y extends string = string>\n  extends\n    Merge<HTMLStyledProps<\"label\">, UseCheckboxProps<Y>>,\n    ThemeProps<CheckboxCardStyle>,\n    UseInputBorderProps {\n  /**\n   * The addon of the checkbox card.\n   */\n  addon?: ReactNode\n  /**\n   * The icon to display in the checkbox when it is checked.\n   */\n  checkedIcon?: ReactNode\n  /**\n   * The description of the checkbox card.\n   */\n  description?: ReactNode\n  /**\n   * The icon to display in the checkbox when it is indeterminate.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * The label of the checkbox card.\n   */\n  label?: ReactNode\n  /**\n   * If `true`, the indicator will be displayed.\n   *\n   * @default true\n   */\n  withIndicator?: boolean\n  /**\n   * Props for the addon component.\n   */\n  addonProps?: CheckboxCardAddonProps\n  /**\n   * Props for the description component.\n   */\n  descriptionProps?: CheckboxCardDescriptionProps\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: CheckboxCardIndicatorProps\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for the label component.\n   */\n  labelProps?: CheckboxCardLabelProps\n  /**\n   * Props for the label element.\n   */\n  rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n  component,\n  PropsContext: CheckboxCardPropsContext,\n  usePropsContext: useCheckboxCardPropsContext,\n  withContext,\n  withProvider,\n  useRootComponentProps,\n} = createSlotComponent<CheckboxCardRootProps, CheckboxCardStyle>(\n  \"checkbox-card\",\n  checkboxCardStyle,\n)\n\nexport {\n  CheckboxCardPropsContext,\n  component,\n  useCheckboxCardPropsContext,\n  useRootComponentProps,\n}\n\n/**\n * `CheckboxCard` is a component used for allowing users to select multiple values from multiple options.\n *\n * @see https://yamada-ui.com/docs/components/checkbox-card\n */\nexport const CheckboxCardRoot = withProvider<\"label\", CheckboxCardRootProps>(\n  ({\n    addon,\n    checkedIcon,\n    children,\n    description,\n    errorBorderColor,\n    focusBorderColor,\n    indeterminateIcon,\n    label,\n    withIndicator = true,\n    addonProps,\n    descriptionProps,\n    indicatorProps,\n    inputProps,\n    labelProps,\n    rootProps,\n    ...rest\n  }) => {\n    const {\n      checked,\n      indeterminate,\n      getIndicatorProps,\n      getInputProps,\n      getRootProps,\n    } = useCheckbox(rest)\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const icon = useMemo(() => {\n      if (indeterminate) return indeterminateIcon || <MinusIcon />\n      else if (checked) return checkedIcon || <CheckIcon />\n      else return null\n    }, [indeterminate, indeterminateIcon, checked, checkedIcon])\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return (\n        <>\n          {label ? (\n            <CheckboxCardLabel {...labelProps}>{label}</CheckboxCardLabel>\n          ) : null}\n          {description ? (\n            <CheckboxCardDescription {...descriptionProps}>\n              {description}\n            </CheckboxCardDescription>\n          ) : null}\n          {addon ? (\n            <CheckboxCardAddon {...addonProps}>{addon}</CheckboxCardAddon>\n          ) : null}\n        </>\n      )\n    }, [\n      addon,\n      addonProps,\n      children,\n      description,\n      descriptionProps,\n      label,\n      labelProps,\n    ])\n\n    return (\n      <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n        <styled.input {...getInputProps(inputProps)} />\n        {withIndicator ? (\n          <CheckboxCardIndicator {...getIndicatorProps(indicatorProps)}>\n            {icon}\n          </CheckboxCardIndicator>\n        ) : null}\n\n        {computedChildren}\n      </styled.label>\n    )\n  },\n  \"root\",\n)() as GenericsComponent<{\n  <Y extends string = string>(props: CheckboxCardRootProps<Y>): ReactElement\n}>\n\ninterface CheckboxCardIndicatorProps extends HTMLStyledProps {}\n\nconst CheckboxCardIndicator = withContext<\"div\", CheckboxCardIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)({ \"data-indicator\": \"\" })\n\nexport interface CheckboxCardLabelProps extends HTMLStyledProps {}\n\nexport const CheckboxCardLabel = withContext<\"span\", CheckboxCardLabelProps>(\n  \"span\",\n  \"label\",\n)()\n\nexport interface CheckboxCardDescriptionProps extends HTMLStyledProps {}\n\nexport const CheckboxCardDescription = withContext<\n  \"span\",\n  CheckboxCardDescriptionProps\n>(\"span\", \"description\")()\n\nexport interface CheckboxCardAddonProps extends HTMLStyledProps {}\n\nexport const CheckboxCardAddon = withContext<\"span\", CheckboxCardAddonProps>(\n  \"span\",\n  \"addon\",\n)()\n"],"mappings":";;;;;;;;;;;;AAwEA,MAAM,EACJ,WACA,cAAc,0BACd,iBAAiB,6BACjB,aACA,cACA,0BACEA,yBAAAA,oBACF,iBACAC,4BAAAA,iBACF;;;;;;AAcA,MAAa,mBAAmB,cAC7B,EACC,OACA,aACA,UACA,aACA,kBACA,kBACA,mBACA,OACA,gBAAgB,MAChB,YACA,kBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,SACA,eACA,mBACA,eACA,iBACEC,qBAAAA,YAAY,IAAI;CACpB,MAAM,WAAWC,yBAAAA,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,QAAA,GAAOC,MAAAA,QAAAA,OAAc;EACzB,IAAI,eAAe,OAAO,qBAAqB,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,WAAD,CAAY,CAAA;OACtD,IAAI,SAAS,OAAO,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,WAAD,CAAY,CAAA;OAC/C,OAAO;CACd,GAAG;EAAC;EAAe;EAAmB;EAAS;CAAW,CAAC;CAC3D,MAAM,oBAAA,GAAmBF,MAAAA,QAAAA,OAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;GACG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;IAAmB,GAAI;IAAa,UAAA;GAAyB,CAAA,IAC3D;GACH,cACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,yBAAD;IAAyB,GAAI;IAC1B,UAAA;GACsB,CAAA,IACvB;GACH,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;IAAmB,GAAI;IAAa,UAAA;GAAyB,CAAA,IAC3D;EACJ,EAAA,CAAA;CAEN,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACG,gBAAAA,OAAO,OAAR;EAAc,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;EAAU,CAAC;EAA5D,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,UAAU,EAAI,CAAA;GAC7C,gBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;IAAuB,GAAI,kBAAkB,cAAc;IACxD,UAAA;GACoB,CAAA,IACrB;GAEH;EACW;;AAElB,GACA,MACF,CAAC,CAAC;AAMF,MAAM,wBAAwB,YAC5B,OACA,WACF,CAAC,CAAC,EAAE,kBAAkB,GAAG,CAAC;AAI1B,MAAa,oBAAoB,YAC/B,QACA,OACF,CAAC,CAAC;AAIF,MAAa,0BAA0B,YAGrC,QAAQ,aAAa,CAAC,CAAC;AAIzB,MAAa,oBAAoB,YAC/B,QACA,OACF,CAAC,CAAC"}

package/dist/cjs/components/circle-progress/circle-progress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"circle-progress.cjs","names":["createSlotComponent","circleProgressStyle","useProgress","styled","mergeCSS","varAttr"],"sources":["../../../../src/components/circle-progress/circle-progress.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseProgressProps } from \"../progress\"\nimport type { CircleProgressStyle } from \"./circle-progress.style\"\nimport { createSlotComponent, mergeCSS, styled, varAttr } from \"../../core\"\nimport { isNumber } from \"../../utils\"\nimport { useProgress } from \"../progress\"\nimport { circleProgressStyle } from \"./circle-progress.style\"\n\nexport interface CircleProgressRootProps\n  extends HTMLStyledProps, UseProgressProps, ThemeProps<CircleProgressStyle> {\n  /**\n   * The animation duration in seconds.\n   */\n  duration?: number | string\n  /**\n   * The color of the progress range.\n   */\n  rangeColor?: CSSProps[\"color\"]\n  /**\n   * The thickness of the progress bar.\n   */\n  thickness?: CSSProps[\"width\"]\n  /**\n   * The color of the progress track.\n   */\n  trackColor?: CSSProps[\"color\"]\n  /**\n   * Props for the progress circle element.\n   */\n  circleProps?: CircleProgressCircleProps\n  /**\n   * Props for the progress range element.\n   */\n  rangeProps?: CircleProgressRangeProps\n  /**\n   * Props for the progress track element.\n   */\n  trackProps?: CircleProgressTrackProps\n}\n\nconst {\n  PropsContext: CircleProgressPropsContext,\n  usePropsContext: useCircleProgressPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<CircleProgressRootProps, CircleProgressStyle>(\n  \"circle-progress\",\n  circleProgressStyle,\n)\n\nexport { CircleProgressPropsContext, useCircleProgressPropsContext }\n\n/**\n * `CircleProgress` is a component that displays progress in a circular progress bar.\n *\n * @see https://yamada-ui.com/docs/components/circle-progress\n */\nexport const CircleProgressRoot = withProvider<\"div\", CircleProgressRootProps>(\n  ({\n    css,\n    children,\n    max,\n    min,\n    rangeColor,\n    trackColor,\n    value,\n    circleProps,\n    rangeProps,\n    trackProps,\n    ...rest\n  }) => {\n    const { percent, getRangeProps, getRootProps, getTrackProps } =\n      useProgress<\"svg\">({ max, min, value })\n\n    return (\n      <styled.div css={mergeCSS(css, { \"--percent\": percent })} {...rest}>\n        <CircleProgressCircle {...getRootProps(circleProps)}>\n          <CircleProgressTrack\n            stroke={trackColor}\n            {...getTrackProps(trackProps)}\n          />\n          <CircleProgressRange\n            stroke={rangeColor}\n            {...getRangeProps(rangeProps)}\n          />\n        </CircleProgressCircle>\n\n        {children}\n      </styled.div>\n    )\n  },\n  \"root\",\n)(({ boxSize, duration, thickness, ...rest }) => ({\n  \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n  \"--size\": varAttr(boxSize, \"sizes\"),\n  \"--thickness\": varAttr(thickness, \"sizes\"),\n  ...rest,\n}))\n\ninterface CircleProgressCircleProps extends HTMLStyledProps<\"svg\"> {}\n\nconst CircleProgressCircle = withContext<\"svg\", CircleProgressCircleProps>(\n  \"svg\",\n  \"circle\",\n)()\n\ninterface CircleProgressTrackProps extends HTMLStyledProps<\"circle\"> {}\n\nconst CircleProgressTrack = withContext<\"circle\", CircleProgressTrackProps>(\n  \"circle\",\n  \"track\",\n)()\n\ninterface CircleProgressRangeProps extends HTMLStyledProps<\"circle\"> {}\n\nconst CircleProgressRange = withContext<\"circle\", CircleProgressRangeProps>(\n  \"circle\",\n  \"range\",\n)()\n\nexport interface CircleProgressLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const CircleProgressLabel = withContext<\n  \"span\",\n  CircleProgressLabelProps\n>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;AA0CA,MAAM,EACJ,cAAc,4BACd,iBAAiB,+BACjB,aACA,iBACEA,yBAAAA,oBACF,mBACAC,8BAAAA,mBACF;;;;;;AASA,MAAa,qBAAqB,cAC/B,EACC,KACA,UACA,KACA,KACA,YACA,YACA,OACA,aACA,YACA,YACA,GAAG,WACC;CACJ,MAAM,EAAE,SAAS,eAAe,cAAc,kBAC5CC,qBAAAA,YAAmB;EAAE;EAAK;EAAK;CAAM,CAAC;CAExC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;EAAY,KAAKC,kBAAAA,SAAS,KAAK,EAAE,aAAa,QAAQ,CAAC;EAAG,GAAI;EAA9D,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,sBAAD;GAAsB,GAAI,aAAa,WAAW;GAAlD,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAD;IACE,QAAQ;IACR,GAAI,cAAc,UAAU;GAC7B,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAD;IACE,QAAQ;IACR,GAAI,cAAc,UAAU;GAC7B,CAAA,CACmB;EAErB,CAAA,GAAA,QACS;;AAEhB,GACA,MACF,CAAC,EAAE,EAAE,SAAS,UAAU,WAAW,GAAG,YAAY;CAChD,eAAA,GAAA,oBAAA,cAAA,SAAA,CAAuB,QAAQ,IAAI,GAAG,SAAS,KAAK;CACpD,UAAUC,YAAAA,QAAQ,SAAS,OAAO;CAClC,eAAeA,YAAAA,QAAQ,WAAW,OAAO;CACzC,GAAG;AACL,EAAE;AAIF,MAAM,uBAAuB,YAC3B,OACA,QACF,CAAC,CAAC;AAIF,MAAM,sBAAsB,YAC1B,UACA,OACF,CAAC,CAAC;AAIF,MAAM,sBAAsB,YAC1B,UACA,OACF,CAAC,CAAC;AAIF,MAAa,sBAAsB,YAGjC,QAAQ,OAAO,CAAC,CAAC"}
+{"version":3,"file":"circle-progress.cjs","names":["createSlotComponent","circleProgressStyle","useProgress","styled","mergeCSS","varAttr"],"sources":["../../../../src/components/circle-progress/circle-progress.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseProgressProps } from \"../progress\"\nimport type { CircleProgressStyle } from \"./circle-progress.style\"\nimport { createSlotComponent, mergeCSS, styled, varAttr } from \"../../core\"\nimport { isNumber } from \"../../utils\"\nimport { useProgress } from \"../progress\"\nimport { circleProgressStyle } from \"./circle-progress.style\"\n\nexport interface CircleProgressRootProps\n  extends HTMLStyledProps, UseProgressProps, ThemeProps<CircleProgressStyle> {\n  /**\n   * The animation duration in seconds.\n   */\n  duration?: number | string\n  /**\n   * The color of the progress range.\n   */\n  rangeColor?: CSSProps[\"color\"]\n  /**\n   * The thickness of the progress bar.\n   */\n  thickness?: CSSProps[\"width\"]\n  /**\n   * The color of the progress track.\n   */\n  trackColor?: CSSProps[\"color\"]\n  /**\n   * Props for the progress circle element.\n   */\n  circleProps?: CircleProgressCircleProps\n  /**\n   * Props for the progress range element.\n   */\n  rangeProps?: CircleProgressRangeProps\n  /**\n   * Props for the progress track element.\n   */\n  trackProps?: CircleProgressTrackProps\n}\n\nconst {\n  PropsContext: CircleProgressPropsContext,\n  usePropsContext: useCircleProgressPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<CircleProgressRootProps, CircleProgressStyle>(\n  \"circle-progress\",\n  circleProgressStyle,\n)\n\nexport { CircleProgressPropsContext, useCircleProgressPropsContext }\n\n/**\n * `CircleProgress` is a component that displays progress in a circular progress bar.\n *\n * @see https://yamada-ui.com/docs/components/circle-progress\n */\nexport const CircleProgressRoot = withProvider<\"div\", CircleProgressRootProps>(\n  ({\n    css,\n    children,\n    max,\n    min,\n    rangeColor,\n    trackColor,\n    value,\n    circleProps,\n    rangeProps,\n    trackProps,\n    ...rest\n  }) => {\n    const { percent, getRangeProps, getRootProps, getTrackProps } =\n      useProgress<\"svg\">({ max, min, value })\n\n    return (\n      <styled.div css={mergeCSS(css, { \"--percent\": percent })} {...rest}>\n        <CircleProgressCircle {...getRootProps(circleProps)}>\n          <CircleProgressTrack\n            stroke={trackColor}\n            {...getTrackProps(trackProps)}\n          />\n          <CircleProgressRange\n            stroke={rangeColor}\n            {...getRangeProps(rangeProps)}\n          />\n        </CircleProgressCircle>\n\n        {children}\n      </styled.div>\n    )\n  },\n  \"root\",\n)(({ boxSize, duration, thickness, ...rest }) => ({\n  \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n  \"--size\": varAttr(boxSize, \"sizes\"),\n  \"--thickness\": varAttr(thickness, \"sizes\"),\n  ...rest,\n}))\n\ninterface CircleProgressCircleProps extends HTMLStyledProps<\"svg\"> {}\n\nconst CircleProgressCircle = withContext<\"svg\", CircleProgressCircleProps>(\n  \"svg\",\n  \"circle\",\n)()\n\ninterface CircleProgressTrackProps extends HTMLStyledProps<\"circle\"> {}\n\nconst CircleProgressTrack = withContext<\"circle\", CircleProgressTrackProps>(\n  \"circle\",\n  \"track\",\n)()\n\ninterface CircleProgressRangeProps extends HTMLStyledProps<\"circle\"> {}\n\nconst CircleProgressRange = withContext<\"circle\", CircleProgressRangeProps>(\n  \"circle\",\n  \"range\",\n)()\n\nexport interface CircleProgressLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const CircleProgressLabel = withContext<\n  \"span\",\n  CircleProgressLabelProps\n>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;AA0CA,MAAM,EACJ,cAAc,4BACd,iBAAiB,+BACjB,aACA,iBACEA,yBAAAA,oBACF,mBACAC,8BAAAA,mBACF;;;;;;AASA,MAAa,qBAAqB,cAC/B,EACC,KACA,UACA,KACA,KACA,YACA,YACA,OACA,aACA,YACA,YACA,GAAG,WACC;CACJ,MAAM,EAAE,SAAS,eAAe,cAAc,kBAC5CC,qBAAAA,YAAmB;EAAE;EAAK;EAAK;CAAM,CAAC;CAExC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;EAAY,KAAKC,kBAAAA,SAAS,KAAK,EAAE,aAAa,QAAQ,CAAC;EAAG,GAAI;EAA9D,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,sBAAD;GAAsB,GAAI,aAAa,WAAW;GAAlD,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAD;IACE,QAAQ;IACR,GAAI,cAAc,UAAU;GAC7B,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAD;IACE,QAAQ;IACR,GAAI,cAAc,UAAU;GAC7B,CAAA,CACmB;EAErB,CAAA,GAAA,QACS;;AAEhB,GACA,MACF,CAAC,EAAE,EAAE,SAAS,UAAU,WAAW,GAAG,YAAY;CAChD,eAAA,GAAA,oBAAA,cAAc,SAAA,CAAS,QAAQ,IAAI,GAAG,SAAS,KAAK;CACpD,UAAUC,YAAAA,QAAQ,SAAS,OAAO;CAClC,eAAeA,YAAAA,QAAQ,WAAW,OAAO;CACzC,GAAG;AACL,EAAE;AAIF,MAAM,uBAAuB,YAC3B,OACA,QACF,CAAC,CAAC;AAIF,MAAM,sBAAsB,YAC1B,UACA,OACF,CAAC,CAAC;AAIF,MAAM,sBAAsB,YAC1B,UACA,OACF,CAAC,CAAC;AAIF,MAAa,sBAAsB,YAGjC,QAAQ,OAAO,CAAC,CAAC"}

package/dist/cjs/components/client-only/client-only.cjs

@@ -9,9 +9,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @see https://yamada-ui.com/docs/components/client-only
 */
 const ClientOnly = ({ children, fallback }) => {
+	const mounted = require_hooks_use_mounted_index.useMounted({ state: true });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
 		fallback,
-		when: require_hooks_use_mounted_index.useMounted({ state: true }),
+		when: mounted,
 		children
 	});
 };

package/dist/cjs/components/client-only/client-only.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"client-only.cjs","names":["Show","useMounted"],"sources":["../../../../src/components/client-only/client-only.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport { useMounted } from \"../../hooks/use-mounted\"\nimport { Show } from \"../show\"\n\nexport interface ClientOnlyProps {\n  /**\n   * The content to render on the client side.\n   *\n   * **Note:** Use the function pattern when accessing browser-only APIs.\n   */\n  children: ReactNodeOrFunction\n  /**\n   * The fallback content to render while the component is mounting on the client\n   * side.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * `ClientOnly` is a component that renders its children only on the client side.\n *\n * @see https://yamada-ui.com/docs/components/client-only\n */\nexport const ClientOnly: FC<ClientOnlyProps> = ({ children, fallback }) => {\n  const mounted = useMounted({ state: true })\n\n  return (\n    <Show fallback={fallback} when={mounted}>\n      {children}\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;;;AA0BA,MAAa,cAAmC,EAAE,UAAU,eAAe;CAGzE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,aAAAA,MAAD;EAAgB;EAAU,MAHZC,gCAAAA,WAAW,EAAE,OAAO,KAAK,CAGD;EACnC;CACG,CAAA;AAEV"}
+{"version":3,"file":"client-only.cjs","names":["useMounted","Show"],"sources":["../../../../src/components/client-only/client-only.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport { useMounted } from \"../../hooks/use-mounted\"\nimport { Show } from \"../show\"\n\nexport interface ClientOnlyProps {\n  /**\n   * The content to render on the client side.\n   *\n   * **Note:** Use the function pattern when accessing browser-only APIs.\n   */\n  children: ReactNodeOrFunction\n  /**\n   * The fallback content to render while the component is mounting on the client\n   * side.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * `ClientOnly` is a component that renders its children only on the client side.\n *\n * @see https://yamada-ui.com/docs/components/client-only\n */\nexport const ClientOnly: FC<ClientOnlyProps> = ({ children, fallback }) => {\n  const mounted = useMounted({ state: true })\n\n  return (\n    <Show fallback={fallback} when={mounted}>\n      {children}\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;;;AA0BA,MAAa,cAAmC,EAAE,UAAU,eAAe;CACzE,MAAM,UAAUA,gCAAAA,WAAW,EAAE,OAAO,KAAK,CAAC;CAE1C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD;EAAgB;EAAU,MAAM;EAC7B;CACG,CAAA;AAEV"}

package/dist/cjs/components/collapse/collapse.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_collapse_style = require("./collapse.style.cjs");

package/dist/cjs/components/collapse/collapse.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.cjs","names":["createTransition","createComponent","collapseStyle","AnimatePresence","motion"],"sources":["../../../../src/components/collapse/collapse.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n  HTMLMotionProps,\n  MotionTransitionVariants,\n  WithTransitionProps,\n} from \"../motion\"\nimport type { CollapseStyle } from \"./collapse.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createdDom, isNumeric } from \"../../utils\"\nimport { createTransition, motion } from \"../motion\"\nimport { collapseStyle } from \"./collapse.style\"\n\nconst variants: Variants = {\n  enter: ({\n    animationOpacity,\n    delay,\n    duration,\n    endingHeight: height,\n    enter,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: 1 } : {}),\n    height,\n    transition: createTransition.enter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({\n    animationOpacity,\n    delay,\n    duration,\n    exit,\n    startingHeight: height,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: isNumeric(height) ? 1 : 0 } : {}),\n    height,\n    transition: createTransition.exit(transition?.exit)(delay, duration),\n    transitionEnd: transitionEnd?.exit,\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport interface CollapseProps\n  extends WithTransitionProps<HTMLMotionProps>, ThemeProps<CollapseStyle> {\n  /**\n   * If `true`, the opacity of the content will be animated.\n   *\n   * @default true\n   */\n  animationOpacity?: boolean\n  /**\n   * The height you want the content in its expanded state.\n   *\n   * @default 'auto'\n   */\n  endingHeight?: number | string\n  /**\n   * The height you want the content in its collapsed state.\n   *\n   * @default 0\n   */\n  startingHeight?: number | string\n}\n\nconst {\n  PropsContext: CollapsePropsContext,\n  usePropsContext: useCollapsePropsContext,\n  withContext,\n} = createComponent<CollapseProps, CollapseStyle>(\"collapse\", collapseStyle)\n\nexport { CollapsePropsContext, useCollapsePropsContext }\n\n/**\n * `Collapse` is a component that allows you to expand or collapse an element for display.\n *\n * @see https://yamada-ui.com/docs/components/collapse\n */\nexport const Collapse = withContext<\"div\", CollapseProps>(\n  ({\n    style,\n    animationOpacity = true,\n    delay,\n    duration,\n    endingHeight = \"auto\",\n    open: openProp,\n    startingHeight = 0,\n    transition: transitionProp,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const [mounted, setMounted] = useState(false)\n    const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n    const open = unmountOnExit ? openProp : true\n\n    const transition = useMemo(() => {\n      if (!mounted) return { enter: { duration: 0 } }\n      else if (transitionProp) return transitionProp\n      else\n        return {\n          enter: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n          exit: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n        }\n    }, [mounted, duration, transitionProp])\n\n    const custom = useMemo(\n      () => ({\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      }),\n      [\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      ],\n    )\n\n    useEffect(() => {\n      if (createdDom()) setMounted(true)\n    }, [])\n\n    return (\n      <AnimatePresence custom={custom} initial={false}>\n        {open ? (\n          <motion.div\n            style={{ overflow: \"hidden\", ...style }}\n            animate={animate}\n            custom={custom}\n            exit=\"exit\"\n            initial={unmountOnExit ? \"exit\" : false}\n            variants={variants}\n            {...rest}\n          />\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,WAAqB;CACzB,QAAQ,EACN,kBACA,OACA,UACA,cAAc,QACd,OACA,YACA,kBACE,CAAC,OAAO;EACV,GAAI,mBAAmB,EAAE,SAAS,EAAE,IAAI,CAAC;EACzC;EACA,YAAYA,mBAAAA,iBAAiB,MAAM,YAAY,KAAK,CAAC,CAAC,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;CACL;CACA,OAAO,EACL,kBACA,OACA,UACA,MACA,gBAAgB,QAChB,YACA,kBACE,CAAC,OAAO;EACV,GAAI,mBAAmB,EAAE,UAAA,GAAA,oBAAA,cAAA,UAAA,CAAmB,MAAM,IAAI,IAAI,EAAE,IAAI,CAAC;EACjE;EACA,YAAYA,mBAAAA,iBAAiB,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAQ;EACnE,eAAe,eAAe;EAC9B,GAAG;CACL;AACF;AAwBA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACEC,yBAAAA,gBAA8C,YAAYC,uBAAAA,aAAa;;;;;;AAS3E,MAAa,WAAW,aACrB,EACC,OACA,mBAAmB,MACnB,OACA,UACA,eAAe,QACf,MAAM,UACN,iBAAiB,GACjB,YAAY,gBACZ,eACA,eACA,GAAG,WACC;CACJ,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,SAAA,CAAuB,KAAK;CAC5C,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,WAAW;CAExC,MAAM,cAAA,GAAA,MAAA,QAAA,OAA2B;EAC/B,IAAI,CAAC,SAAS,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE;OACzC,IAAI,gBAAgB,OAAO;OAE9B,OAAO;GACL,OAAO;IACL,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;IACA,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;GACF;GACA,MAAM;IACJ,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;IACA,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;GACF;EACF;CACJ,GAAG;EAAC;EAAS;EAAU;CAAc,CAAC;CAEtC,MAAM,UAAA,GAAA,MAAA,QAAA,QACG;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,KAAA,GAAA,oBAAA,cAAA,WAAA,CAAe,GAAG,WAAW,IAAI;CACnC,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,iBAAD;EAAyB;EAAQ,SAAS;EACvC,UAAA,OACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;GACE,OAAO;IAAE,UAAU;IAAU,GAAG;GAAM;GAC7B;GACD;GACR,MAAK;GACL,SAAS,gBAAgB,SAAS;GACxB;GACV,GAAI;EACL,CAAA,IACC;CACW,CAAA;AAErB,CACF,CAAC,CAAC"}
+{"version":3,"file":"collapse.cjs","names":["createTransition","createComponent","collapseStyle","useState","useMemo","AnimatePresence","motion"],"sources":["../../../../src/components/collapse/collapse.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n  HTMLMotionProps,\n  MotionTransitionVariants,\n  WithTransitionProps,\n} from \"../motion\"\nimport type { CollapseStyle } from \"./collapse.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createdDom, isNumeric } from \"../../utils\"\nimport { createTransition, motion } from \"../motion\"\nimport { collapseStyle } from \"./collapse.style\"\n\nconst variants: Variants = {\n  enter: ({\n    animationOpacity,\n    delay,\n    duration,\n    endingHeight: height,\n    enter,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: 1 } : {}),\n    height,\n    transition: createTransition.enter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({\n    animationOpacity,\n    delay,\n    duration,\n    exit,\n    startingHeight: height,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: isNumeric(height) ? 1 : 0 } : {}),\n    height,\n    transition: createTransition.exit(transition?.exit)(delay, duration),\n    transitionEnd: transitionEnd?.exit,\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport interface CollapseProps\n  extends WithTransitionProps<HTMLMotionProps>, ThemeProps<CollapseStyle> {\n  /**\n   * If `true`, the opacity of the content will be animated.\n   *\n   * @default true\n   */\n  animationOpacity?: boolean\n  /**\n   * The height you want the content in its expanded state.\n   *\n   * @default 'auto'\n   */\n  endingHeight?: number | string\n  /**\n   * The height you want the content in its collapsed state.\n   *\n   * @default 0\n   */\n  startingHeight?: number | string\n}\n\nconst {\n  PropsContext: CollapsePropsContext,\n  usePropsContext: useCollapsePropsContext,\n  withContext,\n} = createComponent<CollapseProps, CollapseStyle>(\"collapse\", collapseStyle)\n\nexport { CollapsePropsContext, useCollapsePropsContext }\n\n/**\n * `Collapse` is a component that allows you to expand or collapse an element for display.\n *\n * @see https://yamada-ui.com/docs/components/collapse\n */\nexport const Collapse = withContext<\"div\", CollapseProps>(\n  ({\n    style,\n    animationOpacity = true,\n    delay,\n    duration,\n    endingHeight = \"auto\",\n    open: openProp,\n    startingHeight = 0,\n    transition: transitionProp,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const [mounted, setMounted] = useState(false)\n    const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n    const open = unmountOnExit ? openProp : true\n\n    const transition = useMemo(() => {\n      if (!mounted) return { enter: { duration: 0 } }\n      else if (transitionProp) return transitionProp\n      else\n        return {\n          enter: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n          exit: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n        }\n    }, [mounted, duration, transitionProp])\n\n    const custom = useMemo(\n      () => ({\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      }),\n      [\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      ],\n    )\n\n    useEffect(() => {\n      if (createdDom()) setMounted(true)\n    }, [])\n\n    return (\n      <AnimatePresence custom={custom} initial={false}>\n        {open ? (\n          <motion.div\n            style={{ overflow: \"hidden\", ...style }}\n            animate={animate}\n            custom={custom}\n            exit=\"exit\"\n            initial={unmountOnExit ? \"exit\" : false}\n            variants={variants}\n            {...rest}\n          />\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,WAAqB;CACzB,QAAQ,EACN,kBACA,OACA,UACA,cAAc,QACd,OACA,YACA,kBACE,CAAC,OAAO;EACV,GAAI,mBAAmB,EAAE,SAAS,EAAE,IAAI,CAAC;EACzC;EACA,YAAYA,mBAAAA,iBAAiB,MAAM,YAAY,KAAK,CAAC,CAAC,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;CACL;CACA,OAAO,EACL,kBACA,OACA,UACA,MACA,gBAAgB,QAChB,YACA,kBACE,CAAC,OAAO;EACV,GAAI,mBAAmB,EAAE,UAAA,GAAA,oBAAA,cAAS,UAAA,CAAU,MAAM,IAAI,IAAI,EAAE,IAAI,CAAC;EACjE;EACA,YAAYA,mBAAAA,iBAAiB,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAQ;EACnE,eAAe,eAAe;EAC9B,GAAG;CACL;AACF;AAwBA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACEC,yBAAAA,gBAA8C,YAAYC,uBAAAA,aAAa;;;;;;AAS3E,MAAa,WAAW,aACrB,EACC,OACA,mBAAmB,MACnB,OACA,UACA,eAAe,QACf,MAAM,UACN,iBAAiB,GACjB,YAAY,gBACZ,eACA,eACA,GAAG,WACC;CACJ,MAAM,CAAC,SAAS,eAAA,GAAcC,MAAAA,SAAAA,CAAS,KAAK;CAC5C,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,WAAW;CAExC,MAAM,cAAA,GAAaC,MAAAA,QAAAA,OAAc;EAC/B,IAAI,CAAC,SAAS,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE;OACzC,IAAI,gBAAgB,OAAO;OAE9B,OAAO;GACL,OAAO;IACL,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;IACA,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;GACF;GACA,MAAM;IACJ,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;IACA,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;GACF;EACF;CACJ,GAAG;EAAC;EAAS;EAAU;CAAc,CAAC;CAEtC,MAAM,UAAA,GAASA,MAAAA,QAAAA,QACN;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,KAAA,GAAA,oBAAA,cAAI,WAAA,CAAW,GAAG,WAAW,IAAI;CACnC,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,iBAAD;EAAyB;EAAQ,SAAS;EACvC,UAAA,OACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;GACE,OAAO;IAAE,UAAU;IAAU,GAAG;GAAM;GAC7B;GACD;GACR,MAAK;GACL,SAAS,gBAAgB,SAAS;GACxB;GACV,GAAI;EACL,CAAA,IACC;CACW,CAAA;AAErB,CACF,CAAC,CAAC"}

package/dist/cjs/components/color-picker/color-picker.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_props = require("../../core/components/props.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
@@ -98,7 +99,8 @@ const ColorPicker = withProvider((props) => {
 		})
 	});
 }, "root", { transferProps: ["size"] })((props) => {
-	return require_props.mergeProps(require_input.useInputPropsContext(), props)();
+	const context = require_input.useInputPropsContext();
+	return require_props.mergeProps(context, props)();
 });
 const ColorPickerField = withContext("div", "field")({ "data-group-propagate": "" }, (props) => {
 	const { getInputProps, inputProps } = useComponentContext();

package/dist/cjs/components/color-picker/color-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.cjs","names":["createSlotComponent","colorPickerStyle","useGroupItemProps","usePopoverStyleProps","useColorPicker","useInputBorder","mergeProps","useInputPropsContext","ColorSwatch","PipetteIcon"],"sources":["../../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { ColorPickerStyle } from \"./color-picker.style\"\nimport type {\n  UseColorPickerProps,\n  UseColorPickerReturn,\n} from \"./use-color-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { ColorSelector } from \"../color-selector\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { useGroupItemProps } from \"../group\"\nimport { PipetteIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { colorPickerStyle } from \"./color-picker.style\"\nimport { useColorPicker } from \"./use-color-picker\"\n\ninterface ComponentContext\n  extends\n    Pick<ColorPickerProps, \"inputProps\">,\n    Pick<\n      UseColorPickerReturn,\n      \"getEyeDropperProps\" | \"getInputProps\" | \"value\"\n    > {}\n\nexport interface ColorPickerProps\n  extends\n    Omit<HTMLStyledProps, \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\">,\n    Merge<UseColorPickerProps, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    Pick<\n      ColorSelector.RootProps,\n      | \"alphaSliderProps\"\n      | \"colorSwatches\"\n      | \"colorSwatchGroupColumns\"\n      | \"colorSwatchGroupLabel\"\n      | \"colorSwatchGroupLabelProps\"\n      | \"colorSwatchGroupProps\"\n      | \"colorSwatchItemProps\"\n      | \"hueSliderProps\"\n      | \"saturationSliderProps\"\n    >,\n    ThemeProps<ColorPickerStyle>,\n    UseInputBorderProps {\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Popover.RootProps[\"placement\"]\n  /**\n   * If `true`, the color swatch component will be displayed.\n   *\n   * @default true\n   */\n  withColorSwatch?: boolean\n  /**\n   * If `true`, the eye dropper component will be displayed.\n   *\n   * @default true\n   */\n  withEyeDropper?: boolean\n  /**\n   * Props for the color swatch component.\n   */\n  colorSwatchProps?: ColorPickerColorSwatchProps\n  /**\n   * Props for content element.\n   */\n  contentProps?: ColorPickerContentProps\n  /**\n   * The props for the input element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * The props for the end element.\n   */\n  endElementProps?: InputGroup.ElementProps\n  /**\n   * Props for the eye dropper component.\n   */\n  eyeDropperProps?: ColorPickerEyeDropperProps\n  /**\n   * The props for the field component.\n   */\n  fieldProps?: ColorPickerFieldProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n  /**\n   * Props for the selector component.\n   */\n  selectorProps?: ColorSelector.RootProps\n  /**\n   * The props for the start element.\n   */\n  startElementProps?: InputGroup.ElementProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ColorPickerPropsContext,\n  useComponentContext,\n  usePropsContext: useColorPickerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorPickerProps, ColorPickerStyle, ComponentContext>(\n  \"color-picker\",\n  colorPickerStyle,\n)\n\nexport { ColorPickerPropsContext, useColorPickerPropsContext }\n\n/**\n * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.\n *\n * @see https://yamada-ui.com/docs/components/color-picker\n */\nexport const ColorPicker = withProvider<\"input\", ColorPickerProps, \"size\">(\n  (props) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        size,\n        animationScheme = \"block-start\",\n        colorSwatches,\n        colorSwatchGroupColumns,\n        colorSwatchGroupLabel,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        withColorSwatch = true,\n        withEyeDropper = true,\n        alphaSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n        colorSwatchProps,\n        contentProps,\n        elementProps,\n        endElementProps,\n        eyeDropperProps,\n        fieldProps,\n        hueSliderProps,\n        inputProps,\n        rootProps,\n        saturationSliderProps,\n        selectorProps,\n        startElementProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const {\n      value,\n      getContentProps,\n      getEyeDropperProps,\n      getFieldProps,\n      getInputProps,\n      getRootProps,\n      getSelectorProps,\n      popoverProps,\n    } = useColorPicker({ ...rest, ...popoverStyleProps })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const componentContext = useMemo(\n      () => ({ value, getEyeDropperProps, getInputProps, inputProps }),\n      [getEyeDropperProps, getInputProps, inputProps, value],\n    )\n\n    return (\n      <ComponentContext value={componentContext}>\n        <Popover.Root {...mergedPopoverProps}>\n          <InputGroup.Root\n            {...mergeProps(\n              { className, css, colorScheme },\n              getRootProps(groupItemProps),\n              rootProps,\n            )()}\n          >\n            {withColorSwatch ? (\n              <InputGroup.Element\n                {...mergeProps(elementProps, startElementProps)()}\n              >\n                <ColorPickerColorSwatch {...colorSwatchProps} />\n              </InputGroup.Element>\n            ) : null}\n\n            <Popover.Trigger>\n              <ColorPickerField\n                {...getFieldProps({ ...varProps, ...fieldProps })}\n              />\n            </Popover.Trigger>\n\n            {withEyeDropper ? (\n              <InputGroup.Element\n                {...mergeProps(\n                  { clickable: true },\n                  elementProps,\n                  endElementProps,\n                )()}\n              >\n                <ColorPickerEyeDropper\n                  {...getEyeDropperProps(eyeDropperProps)}\n                />\n              </InputGroup.Element>\n            ) : null}\n          </InputGroup.Root>\n\n          <ColorPickerContent\n            {...cast<ColorPickerContentProps>(\n              getContentProps(cast<HTMLProps>(contentProps)),\n            )}\n          >\n            <ColorSelector.Root\n              size={size}\n              {...getSelectorProps({\n                colorSwatches,\n                colorSwatchGroupColumns,\n                colorSwatchGroupLabel,\n                alphaSliderProps,\n                colorSwatchGroupLabelProps,\n                colorSwatchGroupProps,\n                colorSwatchItemProps,\n                hueSliderProps,\n                saturationSliderProps,\n                ...selectorProps,\n              })}\n            />\n          </ColorPickerContent>\n        </Popover.Root>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\"] },\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n})\n\ninterface ColorPickerFieldProps extends HTMLStyledProps {}\n\nconst ColorPickerField = withContext<\"div\", ColorPickerFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, (props) => {\n  const { getInputProps, inputProps } = useComponentContext()\n\n  return {\n    children: <ColorPickerInput {...getInputProps(inputProps)} />,\n    ...props,\n  }\n})\n\ninterface ColorPickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst ColorPickerInput = withContext<\"input\", ColorPickerInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface ColorPickerColorSwatchProps extends ColorSwatchProps {}\n\nconst ColorPickerColorSwatch = withContext<\"div\", ColorPickerColorSwatchProps>(\n  ColorSwatch,\n  \"colorSwatch\",\n)(undefined, (props) => {\n  const { value } = useComponentContext()\n\n  return { variant: \"circle\", color: value, ...props }\n})\n\ninterface ColorPickerEyeDropperProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst ColorPickerEyeDropper = withContext<\"div\", ColorPickerEyeDropperProps>(\n  \"div\",\n  \"eyeDropper\",\n)(undefined, ({ children, icon, ...rest }) => {\n  const { getEyeDropperProps } = useComponentContext()\n\n  return getEyeDropperProps({\n    children: icon || children || <PipetteIcon />,\n    ...rest,\n  })\n})\n\ninterface ColorPickerContentProps extends Popover.ContentProps {}\n\nconst ColorPickerContent = withContext<\"div\", ColorPickerContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgHA,MAAM,EACJ,kBACA,cAAc,yBACd,qBACA,iBAAiB,4BACjB,aACA,iBACEA,yBAAAA,oBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,UAAU;CACT,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,MACA,kBAAkB,eAClB,eACA,yBACA,uBACA,UACA,kBACA,kBACA,kBAAkB,MAClB,iBAAiB,MACjB,kBACA,4BACA,uBACA,sBACA,kBACA,cACA,cACA,iBACA,iBACA,YACA,gBACA,YACA,WACA,uBACA,eACA,mBACA,GAAG,UAEHC,kBAAAA,kBAAkB,KAAK;CAC3B,MAAM,oBAAoBC,gBAAAA,qBAAqB,IAAI;CACnD,MAAM,EACJ,OACA,iBACA,oBACA,eACA,eACA,cACA,kBACA,iBACEC,yBAAAA,eAAe;EAAE,GAAG;EAAM,GAAG;CAAkB,CAAC;CACpD,MAAM,sBAAA,GAAA,MAAA,QAAA,QACG;EACL;EACA;EACA,GAAG;CACL,IACA;EAAC;EAAiB;EAAU;CAAY,CAC1C;CACA,MAAM,WAAWC,yBAAAA,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,oBAAA,GAAA,MAAA,QAAA,QACG;EAAE;EAAO;EAAoB;EAAe;CAAW,IAC9D;EAAC;EAAoB;EAAe;EAAY;CAAK,CACvD;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;EAAkB,OAAO;EACvB,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAA,gBAAA,aAAA;GAAc,GAAI;GAAlB,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,oBAAA,gBAAA;IACE,GAAIC,cAAAA,WACF;KAAE;KAAW;KAAK;IAAY,GAC9B,aAAa,cAAc,GAC3B,SACF,CAAC,CAAC;IALJ,UAAA;KAOG,kBACC,iBAAA,GAAA,kBAAA,IAAA,CAAA,sBAAA,cAAA;MACE,GAAIA,cAAAA,WAAW,cAAc,iBAAiB,CAAC,CAAC;MAEhD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAD,EAAwB,GAAI,iBAAmB,CAAA;KAC7B,CAAA,IAClB;KAEJ,iBAAA,GAAA,kBAAA,IAAA,CAAA,gBAAA,gBAAA,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD,EACE,GAAI,cAAc;MAAE,GAAG;MAAU,GAAG;KAAW,CAAC,EACjD,CAAA,EACc,CAAA;KAEhB,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAAA,sBAAA,cAAA;MACE,GAAIA,cAAAA,WACF,EAAE,WAAW,KAAK,GAClB,cACA,eACF,CAAC,CAAC;MAEF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD,EACE,GAAI,mBAAmB,eAAe,EACvC,CAAA;KACiB,CAAA,IAClB;IACW;GAEjB,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD;IACE,IAAA,GAAA,oBAAA,cAAA,KAAA,CACE,iBAAA,GAAA,oBAAA,cAAA,KAAA,CAAgC,YAAY,CAAC,CAC/C;IAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAA,uBAAA,mBAAA;KACQ;KACN,GAAI,iBAAiB;MACnB;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,GAAG;KACL,CAAC;IACF,CAAA;GACiB,CAAA,CACR;;CACE,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,MAAM,EAAE,CAC5B,CAAC,EAAE,UAAU;CAGX,OAAOA,cAAAA,WAFSC,cAAAA,qBAEQ,GAAG,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,mBAAmB,YACvB,OACA,OACF,CAAC,CAAC,EAAE,wBAAwB,GAAG,IAAI,UAAU;CAC3C,MAAM,EAAE,eAAe,eAAe,oBAAoB;CAE1D,OAAO;EACL,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD,EAAkB,GAAI,cAAc,UAAU,EAAI,CAAA;EAC5D,GAAG;CACL;AACF,CAAC;AAID,MAAM,mBAAmB,YACvB,SACA,OACF,CAAC,CAAC;AAIF,MAAM,yBAAyB,YAC7BC,qBAAAA,aACA,aACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,UAAU,oBAAoB;CAEtC,OAAO;EAAE,SAAS;EAAU,OAAO;EAAO,GAAG;CAAM;AACrD,CAAC;AAMD,MAAM,wBAAwB,YAC5B,OACA,YACF,CAAC,CAAC,KAAA,IAAY,EAAE,UAAU,MAAM,GAAG,WAAW;CAC5C,MAAM,EAAE,uBAAuB,oBAAoB;CAEnD,OAAO,mBAAmB;EACxB,UAAU,QAAQ,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,aAAD,CAAc,CAAA;EAC5C,GAAG;CACL,CAAC;AACH,CAAC;AAID,MAAM,qBAAqB,YAAA,gBAAA,gBAEzB,SACF,CAAC,CAAC"}
+{"version":3,"file":"color-picker.cjs","names":["createSlotComponent","colorPickerStyle","useGroupItemProps","usePopoverStyleProps","useColorPicker","useMemo","useInputBorder","mergeProps","useInputPropsContext","ColorSwatch","PipetteIcon"],"sources":["../../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { ColorPickerStyle } from \"./color-picker.style\"\nimport type {\n  UseColorPickerProps,\n  UseColorPickerReturn,\n} from \"./use-color-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { ColorSelector } from \"../color-selector\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { useGroupItemProps } from \"../group\"\nimport { PipetteIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { colorPickerStyle } from \"./color-picker.style\"\nimport { useColorPicker } from \"./use-color-picker\"\n\ninterface ComponentContext\n  extends\n    Pick<ColorPickerProps, \"inputProps\">,\n    Pick<\n      UseColorPickerReturn,\n      \"getEyeDropperProps\" | \"getInputProps\" | \"value\"\n    > {}\n\nexport interface ColorPickerProps\n  extends\n    Omit<HTMLStyledProps, \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\">,\n    Merge<UseColorPickerProps, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    Pick<\n      ColorSelector.RootProps,\n      | \"alphaSliderProps\"\n      | \"colorSwatches\"\n      | \"colorSwatchGroupColumns\"\n      | \"colorSwatchGroupLabel\"\n      | \"colorSwatchGroupLabelProps\"\n      | \"colorSwatchGroupProps\"\n      | \"colorSwatchItemProps\"\n      | \"hueSliderProps\"\n      | \"saturationSliderProps\"\n    >,\n    ThemeProps<ColorPickerStyle>,\n    UseInputBorderProps {\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Popover.RootProps[\"placement\"]\n  /**\n   * If `true`, the color swatch component will be displayed.\n   *\n   * @default true\n   */\n  withColorSwatch?: boolean\n  /**\n   * If `true`, the eye dropper component will be displayed.\n   *\n   * @default true\n   */\n  withEyeDropper?: boolean\n  /**\n   * Props for the color swatch component.\n   */\n  colorSwatchProps?: ColorPickerColorSwatchProps\n  /**\n   * Props for content element.\n   */\n  contentProps?: ColorPickerContentProps\n  /**\n   * The props for the input element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * The props for the end element.\n   */\n  endElementProps?: InputGroup.ElementProps\n  /**\n   * Props for the eye dropper component.\n   */\n  eyeDropperProps?: ColorPickerEyeDropperProps\n  /**\n   * The props for the field component.\n   */\n  fieldProps?: ColorPickerFieldProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n  /**\n   * Props for the selector component.\n   */\n  selectorProps?: ColorSelector.RootProps\n  /**\n   * The props for the start element.\n   */\n  startElementProps?: InputGroup.ElementProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ColorPickerPropsContext,\n  useComponentContext,\n  usePropsContext: useColorPickerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorPickerProps, ColorPickerStyle, ComponentContext>(\n  \"color-picker\",\n  colorPickerStyle,\n)\n\nexport { ColorPickerPropsContext, useColorPickerPropsContext }\n\n/**\n * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.\n *\n * @see https://yamada-ui.com/docs/components/color-picker\n */\nexport const ColorPicker = withProvider<\"input\", ColorPickerProps, \"size\">(\n  (props) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        size,\n        animationScheme = \"block-start\",\n        colorSwatches,\n        colorSwatchGroupColumns,\n        colorSwatchGroupLabel,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        withColorSwatch = true,\n        withEyeDropper = true,\n        alphaSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n        colorSwatchProps,\n        contentProps,\n        elementProps,\n        endElementProps,\n        eyeDropperProps,\n        fieldProps,\n        hueSliderProps,\n        inputProps,\n        rootProps,\n        saturationSliderProps,\n        selectorProps,\n        startElementProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const {\n      value,\n      getContentProps,\n      getEyeDropperProps,\n      getFieldProps,\n      getInputProps,\n      getRootProps,\n      getSelectorProps,\n      popoverProps,\n    } = useColorPicker({ ...rest, ...popoverStyleProps })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const componentContext = useMemo(\n      () => ({ value, getEyeDropperProps, getInputProps, inputProps }),\n      [getEyeDropperProps, getInputProps, inputProps, value],\n    )\n\n    return (\n      <ComponentContext value={componentContext}>\n        <Popover.Root {...mergedPopoverProps}>\n          <InputGroup.Root\n            {...mergeProps(\n              { className, css, colorScheme },\n              getRootProps(groupItemProps),\n              rootProps,\n            )()}\n          >\n            {withColorSwatch ? (\n              <InputGroup.Element\n                {...mergeProps(elementProps, startElementProps)()}\n              >\n                <ColorPickerColorSwatch {...colorSwatchProps} />\n              </InputGroup.Element>\n            ) : null}\n\n            <Popover.Trigger>\n              <ColorPickerField\n                {...getFieldProps({ ...varProps, ...fieldProps })}\n              />\n            </Popover.Trigger>\n\n            {withEyeDropper ? (\n              <InputGroup.Element\n                {...mergeProps(\n                  { clickable: true },\n                  elementProps,\n                  endElementProps,\n                )()}\n              >\n                <ColorPickerEyeDropper\n                  {...getEyeDropperProps(eyeDropperProps)}\n                />\n              </InputGroup.Element>\n            ) : null}\n          </InputGroup.Root>\n\n          <ColorPickerContent\n            {...cast<ColorPickerContentProps>(\n              getContentProps(cast<HTMLProps>(contentProps)),\n            )}\n          >\n            <ColorSelector.Root\n              size={size}\n              {...getSelectorProps({\n                colorSwatches,\n                colorSwatchGroupColumns,\n                colorSwatchGroupLabel,\n                alphaSliderProps,\n                colorSwatchGroupLabelProps,\n                colorSwatchGroupProps,\n                colorSwatchItemProps,\n                hueSliderProps,\n                saturationSliderProps,\n                ...selectorProps,\n              })}\n            />\n          </ColorPickerContent>\n        </Popover.Root>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\"] },\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n})\n\ninterface ColorPickerFieldProps extends HTMLStyledProps {}\n\nconst ColorPickerField = withContext<\"div\", ColorPickerFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, (props) => {\n  const { getInputProps, inputProps } = useComponentContext()\n\n  return {\n    children: <ColorPickerInput {...getInputProps(inputProps)} />,\n    ...props,\n  }\n})\n\ninterface ColorPickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst ColorPickerInput = withContext<\"input\", ColorPickerInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface ColorPickerColorSwatchProps extends ColorSwatchProps {}\n\nconst ColorPickerColorSwatch = withContext<\"div\", ColorPickerColorSwatchProps>(\n  ColorSwatch,\n  \"colorSwatch\",\n)(undefined, (props) => {\n  const { value } = useComponentContext()\n\n  return { variant: \"circle\", color: value, ...props }\n})\n\ninterface ColorPickerEyeDropperProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst ColorPickerEyeDropper = withContext<\"div\", ColorPickerEyeDropperProps>(\n  \"div\",\n  \"eyeDropper\",\n)(undefined, ({ children, icon, ...rest }) => {\n  const { getEyeDropperProps } = useComponentContext()\n\n  return getEyeDropperProps({\n    children: icon || children || <PipetteIcon />,\n    ...rest,\n  })\n})\n\ninterface ColorPickerContentProps extends Popover.ContentProps {}\n\nconst ColorPickerContent = withContext<\"div\", ColorPickerContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n"],"mappings":"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"}

package/dist/cjs/components/color-picker/use-color-picker.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_dom = require("../../utils/dom.cjs");
 const require_ref = require("../../utils/ref.cjs");
 const require_utils_index = require("../../utils/index.cjs");