@yamada-ui/react 2.2.2-dev-20260608072350 → 2.2.2

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","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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"}

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,eAAiC;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,kBAAD;GAA8C;GAAO,GAAI;EAAO,GAAzC,SAAS,KAAgC,CACjE;CACH,GAAG,CAAC,OAAO,QAAQ,CAAC;CAoCpB,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,0BAAD;EAA0B,QAAA,GAAA,MAAA,gBAnCnB;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;YACrC,iBAAA,GAAA,kBAAA,KAACC,2BAAAA,sBAAD;GAAsB,QAAA,GAAA,MAAA,gBANjB;IAAE;IAAK;IAAO;IAAe;IAAe;GAAS,IAC5D;IAAC;IAAK;IAAO;IAAe;IAAe;GAAQ,CAKT;aACtC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;IAAO,GAAI,aAAa;cAAI;GAAwB,CAAA;EAChC,CAAA;CACE,CAAA;AAE9B,GAAG,OAAO,EAAE"}
+{"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;YACrC,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;aACtC,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAO,GAAI,aAAa;cAAI;GAAwB,CAAA;EAChC,CAAA;CACE,CAAA;AAE9B,GAAG,OAAO,CAAC,CAAC"}

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) {\n        return indeterminateIcon || <MinusIcon />\n      } else if (checked) {\n        return checkedIcon || <CheckIcon />\n      } else {\n        return null\n      }\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,eAAqB;EACzB,IAAI,eACF,OAAO,qBAAqB,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,WAAD,CAAY,CAAA;OACnC,IAAI,SACT,OAAO,eAAe,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,WAAD,CAAY,CAAA;OAElC,OAAO;CAEX,GAAG;EAAC;EAAe;EAAmB;EAAS;CAAW,CAAC;CAC3D,MAAM,oBAAA,GAAA,MAAA,eAAiC;EACrC,IAAI,UAAU,OAAO;EAErB,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;GACG,QACC,iBAAA,GAAA,kBAAA,KAAC,mBAAD;IAAmB,GAAI;cAAa;GAAyB,CAAA,IAC3D;GACH,cACC,iBAAA,GAAA,kBAAA,KAAC,yBAAD;IAAyB,GAAI;cAC1B;GACsB,CAAA,IACvB;GACH,QACC,iBAAA,GAAA,kBAAA,KAAC,mBAAD;IAAmB,GAAI;cAAa;GAAyB,CAAA,IAC3D;EACJ,EAAA,CAAA;CAEN,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,MAACC,gBAAAA,OAAO,OAAR;EAAc,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;EAAU,CAAC;YAA5D;GACE,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,UAAU,EAAI,CAAA;GAC7C,gBACC,iBAAA,GAAA,kBAAA,KAAC,uBAAD;IAAuB,GAAI,kBAAkB,cAAc;cACxD;GACoB,CAAA,IACrB;GAEH;EACW;;AAElB,GACA,MACF,EAAE;AAMF,MAAM,wBAAwB,YAC5B,OACA,WACF,EAAE,EAAE,kBAAkB,GAAG,CAAC;AAI1B,MAAa,oBAAoB,YAC/B,QACA,OACF,EAAE;AAIF,MAAa,0BAA0B,YAGrC,QAAQ,aAAa,EAAE;AAIzB,MAAa,oBAAoB,YAC/B,QACA,OACF,EAAE"}
+{"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) {\n        return indeterminateIcon || <MinusIcon />\n      } else if (checked) {\n        return checkedIcon || <CheckIcon />\n      } else {\n        return null\n      }\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,eACF,OAAO,qBAAqB,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,WAAD,CAAY,CAAA;OACnC,IAAI,SACT,OAAO,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,WAAD,CAAY,CAAA;OAElC,OAAO;CAEX,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;cAAa;GAAyB,CAAA,IAC3D;GACH,cACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,yBAAD;IAAyB,GAAI;cAC1B;GACsB,CAAA,IACvB;GACH,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;IAAmB,GAAI;cAAa;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;YAA5D;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;cACxD;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,MAACC,gBAAAA,OAAO,KAAR;EAAY,KAAKC,kBAAAA,SAAS,KAAK,EAAE,aAAa,QAAQ,CAAC;EAAG,GAAI;YAA9D,CACE,iBAAA,GAAA,kBAAA,MAAC,sBAAD;GAAsB,GAAI,aAAa,WAAW;aAAlD,CACE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;IACE,QAAQ;IACR,GAAI,cAAc,UAAU;GAC7B,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,qBAAD;IACE,QAAQ;IACR,GAAI,cAAc,UAAU;GAC7B,CAAA,CACmB;MAErB,QACS;;AAEhB,GACA,MACF,GAAG,EAAE,SAAS,UAAU,WAAW,GAAG,YAAY;CAChD,eAAA,GAAA,oBAAA,cAAA,UAAuB,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,EAAE;AAIF,MAAM,sBAAsB,YAC1B,UACA,OACF,EAAE;AAIF,MAAM,sBAAsB,YAC1B,UACA,OACF,EAAE;AAIF,MAAa,sBAAsB,YAGjC,QAAQ,OAAO,EAAE"}
+{"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;YAA9D,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,sBAAD;GAAsB,GAAI,aAAa,WAAW;aAAlD,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;MAErB,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"circle-progress.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/circle-progress/circle-progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const circleProgressStyle = defineComponentSlotStyle({\n  base: {\n    circle: {\n      \"--c\": \"calc(2 * 3.14159 * {r})\",\n      \"--cx\": \"calc({size} / 2)\",\n      \"--cy\": \"calc({size} / 2)\",\n      \"--r\": \"calc({size} / 2 - {thickness} / 2)\",\n      boxSize: \"{size}\",\n      _indeterminate: {\n        animationDuration: \"2s\",\n        animationIterationCount: \"infinite\",\n        animationName: \"spin\",\n        animationTimingFunction: \"linear\",\n      },\n    },\n    label: {\n      fontWeight: \"medium\",\n      left: \"50%\",\n      letterSpacing: \"tight\",\n      lineHeight: \"1\",\n      position: \"absolute\",\n      textAlign: \"center\",\n      top: \"50%\",\n      transform: \"translate(-50%, -50%)\",\n    },\n    range: {\n      cx: \"{cx}\",\n      cy: \"{cy}\",\n      fill: \"transparent\",\n      r: \"{r}\",\n      strokeDasharray: \"{c}\",\n      strokeDashoffset: \"calc({c} * ((100 - {percent}) / 100))\",\n      strokeWidth: \"{thickness}\",\n      transform: \"rotate(-90deg)\",\n      transformOrigin: \"center center\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"stroke-dashoffset, stroke-dasharray\",\n      _indeterminate: {\n        animationDuration: \"{duration, 1.5s}\",\n        animationIterationCount: \"infinite\",\n        animationTimingFunction: \"linear\",\n        _keyframes: {\n          \"0%\": {\n            strokeDasharray: \"1, 400\",\n            strokeDashoffset: \"0\",\n          },\n          \"50%\": {\n            strokeDasharray: \"400, 400\",\n            strokeDashoffset: \"-100%\",\n          },\n          \"100%\": {\n            strokeDasharray: \"400, 400\",\n            strokeDashoffset: \"-260%\",\n          },\n        },\n      },\n    },\n    root: {\n      display: \"inline-flex\",\n      position: \"relative\",\n    },\n    track: {\n      cx: \"{cx}\",\n      cy: \"{cy}\",\n      fill: \"transparent\",\n      r: \"{r}\",\n      strokeWidth: \"{thickness}\",\n    },\n  },\n\n  props: {\n    /**\n     * The shape of the progress bar.\n     *\n     * @default 'rounded'\n     */\n    shape: {\n      rounded: {\n        range: {\n          strokeLinecap: \"round\",\n          _indeterminate: { strokeLinecap: \"butt\" },\n        },\n      },\n      square: {\n        range: { strokeLinecap: \"butt\" },\n      },\n    },\n  },\n\n  variants: {\n    outline: {\n      range: {\n        stroke: \"colorScheme.solid\",\n      },\n      track: {\n        stroke: \"bg.subtle\",\n      },\n    },\n    subtle: {\n      range: {\n        stroke: \"colorScheme.solid/80\",\n      },\n      track: {\n        stroke: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      label: { fontSize: \"2xs\" },\n      root: {\n        \"--size\": \"{sizes.6}\",\n        \"--thickness\": \"{sizes.1}\",\n      },\n    },\n    sm: {\n      label: { fontSize: \"2xs\" },\n      root: {\n        \"--size\": \"{sizes.8}\",\n        \"--thickness\": \"{sizes.1.5}\",\n      },\n    },\n    md: {\n      label: { fontSize: \"2xs\" },\n      root: {\n        \"--size\": \"{sizes.10}\",\n        \"--thickness\": \"{sizes.1.5}\",\n      },\n    },\n    lg: {\n      label: { fontSize: \"xs\" },\n      root: {\n        \"--size\": \"{sizes.12}\",\n        \"--thickness\": \"{sizes.2}\",\n      },\n    },\n    xl: {\n      label: { fontSize: \"sm\" },\n      root: {\n        \"--size\": \"{sizes.14}\",\n        \"--thickness\": \"{sizes.2}\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n    shape: \"rounded\",\n  },\n})\n\nexport type CircleProgressStyle = typeof circleProgressStyle\n"],"mappings":";AAEA,MAAa,4DAAsBA,EAAAA,yBAAyB;CAC1D,MAAM;EACJ,QAAQ;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,SAAS;GACT,gBAAgB;IACd,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;GAC3B;EACF;EACA,OAAO;GACL,YAAY;GACZ,MAAM;GACN,eAAe;GACf,YAAY;GACZ,UAAU;GACV,WAAW;GACX,KAAK;GACL,WAAW;EACb;EACA,OAAO;GACL,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,GAAG;GACH,iBAAiB;GACjB,kBAAkB;GAClB,aAAa;GACb,WAAW;GACX,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,gBAAgB;IACd,mBAAmB;IACnB,yBAAyB;IACzB,yBAAyB;IACzB,YAAY;KACV,MAAM;MACJ,iBAAiB;MACjB,kBAAkB;KACpB;KACA,OAAO;MACL,iBAAiB;MACjB,kBAAkB;KACpB;KACA,QAAQ;MACN,iBAAiB;MACjB,kBAAkB;KACpB;IACF;GACF;EACF;EACA,MAAM;GACJ,SAAS;GACT,UAAU;EACZ;EACA,OAAO;GACL,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,GAAG;GACH,aAAa;EACf;CACF;CAEA,OAAO;;;;;;AAML,OAAO;EACL,SAAS,EACP,OAAO;GACL,eAAe;GACf,gBAAgB,EAAE,eAAe,OAAO;EAC1C,EACF;EACA,QAAQ,EACN,OAAO,EAAE,eAAe,OAAO,EACjC;CACF,EACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,QAAQ,oBACV;GACA,OAAO,EACL,QAAQ,YACV;EACF;EACA,QAAQ;GACN,OAAO,EACL,QAAQ,uBACV;GACA,OAAO,EACL,QAAQ,CAAC,qBAAqB,oBAAoB,EACpD;EACF;CACF;CAEA,OAAO;EACL,IAAI;GACF,OAAO,EAAE,UAAU,MAAM;GACzB,MAAM;IACJ,UAAU;IACV,eAAe;GACjB;EACF;EACA,IAAI;GACF,OAAO,EAAE,UAAU,MAAM;GACzB,MAAM;IACJ,UAAU;IACV,eAAe;GACjB;EACF;EACA,IAAI;GACF,OAAO,EAAE,UAAU,MAAM;GACzB,MAAM;IACJ,UAAU;IACV,eAAe;GACjB;EACF;EACA,IAAI;GACF,OAAO,EAAE,UAAU,KAAK;GACxB,MAAM;IACJ,UAAU;IACV,eAAe;GACjB;EACF;EACA,IAAI;GACF,OAAO,EAAE,UAAU,KAAK;GACxB,MAAM;IACJ,UAAU;IACV,eAAe;GACjB;EACF;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;CACT;AACF,CAAC"}
+{"version":3,"file":"circle-progress.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/circle-progress/circle-progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const circleProgressStyle = defineComponentSlotStyle({\n  base: {\n    circle: {\n      \"--c\": \"calc(2 * 3.14159 * {r})\",\n      \"--cx\": \"calc({size} / 2)\",\n      \"--cy\": \"calc({size} / 2)\",\n      \"--r\": \"calc({size} / 2 - {thickness} / 2)\",\n      boxSize: \"{size}\",\n      _indeterminate: {\n        animationDuration: \"2s\",\n        animationIterationCount: \"infinite\",\n        animationName: \"spin\",\n        animationTimingFunction: \"linear\",\n      },\n    },\n    label: {\n      fontWeight: \"medium\",\n      left: \"50%\",\n      letterSpacing: \"tight\",\n      lineHeight: \"1\",\n      position: \"absolute\",\n      textAlign: \"center\",\n      top: \"50%\",\n      transform: \"translate(-50%, -50%)\",\n    },\n    range: {\n      cx: \"{cx}\",\n      cy: \"{cy}\",\n      fill: \"transparent\",\n      r: \"{r}\",\n      strokeDasharray: \"{c}\",\n      strokeDashoffset: \"calc({c} * ((100 - {percent}) / 100))\",\n      strokeWidth: \"{thickness}\",\n      transform: \"rotate(-90deg)\",\n      transformOrigin: \"center center\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"stroke-dashoffset, stroke-dasharray\",\n      _indeterminate: {\n        animationDuration: \"{duration, 1.5s}\",\n        animationIterationCount: \"infinite\",\n        animationTimingFunction: \"linear\",\n        _keyframes: {\n          \"0%\": {\n            strokeDasharray: \"1, 400\",\n            strokeDashoffset: \"0\",\n          },\n          \"50%\": {\n            strokeDasharray: \"400, 400\",\n            strokeDashoffset: \"-100%\",\n          },\n          \"100%\": {\n            strokeDasharray: \"400, 400\",\n            strokeDashoffset: \"-260%\",\n          },\n        },\n      },\n    },\n    root: {\n      display: \"inline-flex\",\n      position: \"relative\",\n    },\n    track: {\n      cx: \"{cx}\",\n      cy: \"{cy}\",\n      fill: \"transparent\",\n      r: \"{r}\",\n      strokeWidth: \"{thickness}\",\n    },\n  },\n\n  props: {\n    /**\n     * The shape of the progress bar.\n     *\n     * @default 'rounded'\n     */\n    shape: {\n      rounded: {\n        range: {\n          strokeLinecap: \"round\",\n          _indeterminate: { strokeLinecap: \"butt\" },\n        },\n      },\n      square: {\n        range: { strokeLinecap: \"butt\" },\n      },\n    },\n  },\n\n  variants: {\n    outline: {\n      range: {\n        stroke: \"colorScheme.solid\",\n      },\n      track: {\n        stroke: \"bg.subtle\",\n      },\n    },\n    subtle: {\n      range: {\n        stroke: \"colorScheme.solid/80\",\n      },\n      track: {\n        stroke: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      label: { fontSize: \"2xs\" },\n      root: {\n        \"--size\": \"{sizes.6}\",\n        \"--thickness\": \"{sizes.1}\",\n      },\n    },\n    sm: {\n      label: { fontSize: \"2xs\" },\n      root: {\n        \"--size\": \"{sizes.8}\",\n        \"--thickness\": \"{sizes.1.5}\",\n      },\n    },\n    md: {\n      label: { fontSize: \"2xs\" },\n      root: {\n        \"--size\": \"{sizes.10}\",\n        \"--thickness\": \"{sizes.1.5}\",\n      },\n    },\n    lg: {\n      label: { fontSize: \"xs\" },\n      root: {\n        \"--size\": \"{sizes.12}\",\n        \"--thickness\": \"{sizes.2}\",\n      },\n    },\n    xl: {\n      label: { fontSize: \"sm\" },\n      root: {\n        \"--size\": \"{sizes.14}\",\n        \"--thickness\": \"{sizes.2}\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n    shape: \"rounded\",\n  },\n})\n\nexport type CircleProgressStyle = typeof circleProgressStyle\n"],"mappings":";AAEA,MAAa,4DAAsBA,CAAAA,CAAAA,yBAAyB;CAC1D,MAAM;EACJ,QAAQ;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,SAAS;GACT,gBAAgB;IACd,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;GAC3B;EACF;EACA,OAAO;GACL,YAAY;GACZ,MAAM;GACN,eAAe;GACf,YAAY;GACZ,UAAU;GACV,WAAW;GACX,KAAK;GACL,WAAW;EACb;EACA,OAAO;GACL,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,GAAG;GACH,iBAAiB;GACjB,kBAAkB;GAClB,aAAa;GACb,WAAW;GACX,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,gBAAgB;IACd,mBAAmB;IACnB,yBAAyB;IACzB,yBAAyB;IACzB,YAAY;KACV,MAAM;MACJ,iBAAiB;MACjB,kBAAkB;KACpB;KACA,OAAO;MACL,iBAAiB;MACjB,kBAAkB;KACpB;KACA,QAAQ;MACN,iBAAiB;MACjB,kBAAkB;KACpB;IACF;GACF;EACF;EACA,MAAM;GACJ,SAAS;GACT,UAAU;EACZ;EACA,OAAO;GACL,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,GAAG;GACH,aAAa;EACf;CACF;CAEA,OAAO;;;;;;AAML,OAAO;EACL,SAAS,EACP,OAAO;GACL,eAAe;GACf,gBAAgB,EAAE,eAAe,OAAO;EAC1C,EACF;EACA,QAAQ,EACN,OAAO,EAAE,eAAe,OAAO,EACjC;CACF,EACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,QAAQ,oBACV;GACA,OAAO,EACL,QAAQ,YACV;EACF;EACA,QAAQ;GACN,OAAO,EACL,QAAQ,uBACV;GACA,OAAO,EACL,QAAQ,CAAC,qBAAqB,oBAAoB,EACpD;EACF;CACF;CAEA,OAAO;EACL,IAAI;GACF,OAAO,EAAE,UAAU,MAAM;GACzB,MAAM;IACJ,UAAU;IACV,eAAe;GACjB;EACF;EACA,IAAI;GACF,OAAO,EAAE,UAAU,MAAM;GACzB,MAAM;IACJ,UAAU;IACV,eAAe;GACjB;EACF;EACA,IAAI;GACF,OAAO,EAAE,UAAU,MAAM;GACzB,MAAM;IACJ,UAAU;IACV,eAAe;GACjB;EACF;EACA,IAAI;GACF,OAAO,EAAE,UAAU,KAAK;GACxB,MAAM;IACJ,UAAU;IACV,eAAe;GACjB;EACF;EACA,IAAI;GACF,OAAO,EAAE,UAAU,KAAK;GACxB,MAAM;IACJ,UAAU;IACV,eAAe;GACjB;EACF;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;CACT;AACF,CAAC"}

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,KAACA,aAAAA,MAAD;EAAgB;EAAU,MAHZC,gCAAAA,WAAW,EAAE,OAAO,KAAK,CAGD;EACnC;CACG,CAAA;AAEV"}
+{"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"}

package/dist/cjs/components/close-button/close-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"close-button.cjs","names":["createComponent","closeButtonStyle","IconButton","useI18n","XIcon"],"sources":["../../../../src/components/close-button/close-button.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, WithoutThemeProps } from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { CloseButtonStyle } from \"./close-button.style\"\nimport { createComponent } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { IconButton } from \"../button\"\nimport { XIcon } from \"../icon\"\nimport { closeButtonStyle } from \"./close-button.style\"\n\nexport interface CloseButtonProps\n  extends\n    Omit<WithoutThemeProps<IconButtonProps, CloseButtonStyle>, \"aria-label\">,\n    Pick<HTMLProps<\"button\">, \"aria-label\"> {}\n\nconst {\n  PropsContext: CloseButtonPropsContext,\n  usePropsContext: useCloseButtonPropsContext,\n  withContext,\n} = createComponent<CloseButtonProps, CloseButtonStyle>(\n  \"close-button\",\n  closeButtonStyle,\n)\n\nexport { CloseButtonPropsContext, useCloseButtonPropsContext }\n\n/**\n * `CloseButton` is a component used primarily to trigger the close functionality of a component.\n *\n * @see https://yamada-ui.com/docs/components/close-button\n */\nexport const CloseButton = withContext<\"button\", CloseButtonProps>(IconButton)(\n  undefined,\n  ({ children, icon, ...rest }) => {\n    const { t } = useI18n(\"closeButton\")\n\n    return {\n      \"aria-label\": t(\"Close\"),\n      children: children || icon || <XIcon />,\n      ...rest,\n    }\n  },\n)\n"],"mappings":";;;;;;;;AAgBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,gBACEA,yBAAAA,gBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,YAAwCC,oBAAAA,UAAU,EAC3E,KAAA,IACC,EAAE,UAAU,MAAM,GAAG,WAAW;CAC/B,MAAM,EAAE,MAAMC,sBAAAA,QAAQ,aAAa;CAEnC,OAAO;EACL,cAAc,EAAE,OAAO;EACvB,UAAU,YAAY,QAAQ,iBAAA,GAAA,kBAAA,KAACC,eAAAA,OAAD,CAAQ,CAAA;EACtC,GAAG;CACL;AACF,CACF"}
+{"version":3,"file":"close-button.cjs","names":["createComponent","closeButtonStyle","IconButton","useI18n","XIcon"],"sources":["../../../../src/components/close-button/close-button.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, WithoutThemeProps } from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { CloseButtonStyle } from \"./close-button.style\"\nimport { createComponent } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { IconButton } from \"../button\"\nimport { XIcon } from \"../icon\"\nimport { closeButtonStyle } from \"./close-button.style\"\n\nexport interface CloseButtonProps\n  extends\n    Omit<WithoutThemeProps<IconButtonProps, CloseButtonStyle>, \"aria-label\">,\n    Pick<HTMLProps<\"button\">, \"aria-label\"> {}\n\nconst {\n  PropsContext: CloseButtonPropsContext,\n  usePropsContext: useCloseButtonPropsContext,\n  withContext,\n} = createComponent<CloseButtonProps, CloseButtonStyle>(\n  \"close-button\",\n  closeButtonStyle,\n)\n\nexport { CloseButtonPropsContext, useCloseButtonPropsContext }\n\n/**\n * `CloseButton` is a component used primarily to trigger the close functionality of a component.\n *\n * @see https://yamada-ui.com/docs/components/close-button\n */\nexport const CloseButton = withContext<\"button\", CloseButtonProps>(IconButton)(\n  undefined,\n  ({ children, icon, ...rest }) => {\n    const { t } = useI18n(\"closeButton\")\n\n    return {\n      \"aria-label\": t(\"Close\"),\n      children: children || icon || <XIcon />,\n      ...rest,\n    }\n  },\n)\n"],"mappings":";;;;;;;;AAgBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,gBACEA,yBAAAA,gBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,YAAwCC,oBAAAA,UAAU,CAAC,CAC5E,KAAA,IACC,EAAE,UAAU,MAAM,GAAG,WAAW;CAC/B,MAAM,EAAE,MAAMC,sBAAAA,QAAQ,aAAa;CAEnC,OAAO;EACL,cAAc,EAAE,OAAO;EACvB,UAAU,YAAY,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,OAAD,CAAQ,CAAA;EACtC,GAAG;CACL;AACF,CACF"}

package/dist/cjs/components/close-button/close-button.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"close-button.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/close-button/close-button.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const closeButtonStyle = defineComponentStyle({\n  defaultProps: {\n    size: \"xs\",\n    variant: \"ghost\",\n  },\n})\n\nexport type CloseButtonStyle = typeof closeButtonStyle\n"],"mappings":";AAEA,MAAa,yDAAmBA,EAAAA,qBAAqB,EACnD,cAAc;CACZ,MAAM;CACN,SAAS;AACX,EACF,CAAC"}
+{"version":3,"file":"close-button.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/close-button/close-button.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const closeButtonStyle = defineComponentStyle({\n  defaultProps: {\n    size: \"xs\",\n    variant: \"ghost\",\n  },\n})\n\nexport type CloseButtonStyle = typeof closeButtonStyle\n"],"mappings":";AAEA,MAAa,yDAAmBA,CAAAA,CAAAA,qBAAqB,EACnD,cAAc;CACZ,MAAM;CACN,SAAS;AACX,EACF,CAAC"}

package/dist/cjs/components/code/code.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"code.cjs","names":["createComponent","codeStyle"],"sources":["../../../../src/components/code/code.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { CodeStyle } from \"./code.style\"\nimport { createComponent } from \"../../core\"\nimport { codeStyle } from \"./code.style\"\n\nexport interface CodeProps\n  extends HTMLStyledProps<\"code\">, ThemeProps<CodeStyle> {}\n\nconst {\n  PropsContext: CodePropsContext,\n  usePropsContext: useCodePropsContext,\n  withContext,\n} = createComponent<CodeProps, CodeStyle>(\"code\", codeStyle)\n\nexport { CodePropsContext, useCodePropsContext }\n\n/**\n * `Code` is a component that represents a code block. By default, it renders a `code` element.\n *\n * @see https://yamada-ui.com/docs/components/code\n */\nexport const Code = withContext(\"code\")()\n"],"mappings":";;;;AAUA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,gBACEA,yBAAAA,gBAAsC,QAAQC,mBAAAA,SAAS;;;;;;AAS3D,MAAa,OAAO,YAAY,MAAM,EAAE"}
+{"version":3,"file":"code.cjs","names":["createComponent","codeStyle"],"sources":["../../../../src/components/code/code.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { CodeStyle } from \"./code.style\"\nimport { createComponent } from \"../../core\"\nimport { codeStyle } from \"./code.style\"\n\nexport interface CodeProps\n  extends HTMLStyledProps<\"code\">, ThemeProps<CodeStyle> {}\n\nconst {\n  PropsContext: CodePropsContext,\n  usePropsContext: useCodePropsContext,\n  withContext,\n} = createComponent<CodeProps, CodeStyle>(\"code\", codeStyle)\n\nexport { CodePropsContext, useCodePropsContext }\n\n/**\n * `Code` is a component that represents a code block. By default, it renders a `code` element.\n *\n * @see https://yamada-ui.com/docs/components/code\n */\nexport const Code = withContext(\"code\")()\n"],"mappings":";;;;AAUA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,gBACEA,yBAAAA,gBAAsC,QAAQC,mBAAAA,SAAS;;;;;;AAS3D,MAAa,OAAO,YAAY,MAAM,CAAC,CAAC"}

package/dist/cjs/components/code/code.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"code.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/code/code.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const codeStyle = defineComponentStyle({\n  base: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    fontFamily: \"mono\",\n    rounded: \"l1\",\n  },\n\n  variants: {\n    outline: {\n      layerStyle: \"outline\",\n    },\n    solid: {\n      layerStyle: \"solid\",\n    },\n    subtle: {\n      layerStyle: \"subtle\",\n    },\n    surface: {\n      layerStyle: \"surface\",\n    },\n  },\n\n  sizes: {\n    xs: {\n      fontSize: \"2xs\",\n      lineHeight: \"{sizes.4}\",\n      minH: \"4\",\n      px: \"1\",\n    },\n    sm: {\n      fontSize: \"xs\",\n      lineHeight: \"{sizes.5}\",\n      minH: \"5\",\n      px: \"1.5\",\n    },\n    md: {\n      fontSize: \"sm\",\n      lineHeight: \"{sizes.6}\",\n      minH: \"6\",\n      px: \"2\",\n    },\n    lg: {\n      fontSize: \"sm\",\n      lineHeight: \"{sizes.7}\",\n      minH: \"7\",\n      px: \"2.5\",\n    },\n  },\n\n  defaultProps: {\n    size: \"sm\",\n    variant: \"subtle\",\n  },\n})\n\nexport type CodeStyle = typeof codeStyle\n"],"mappings":";AAEA,MAAa,kDAAYA,EAAAA,qBAAqB;CAC5C,MAAM;EACJ,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,SAAS;CACX;CAEA,UAAU;EACR,SAAS,EACP,YAAY,UACd;EACA,OAAO,EACL,YAAY,QACd;EACA,QAAQ,EACN,YAAY,SACd;EACA,SAAS,EACP,YAAY,UACd;CACF;CAEA,OAAO;EACL,IAAI;GACF,UAAU;GACV,YAAY;GACZ,MAAM;GACN,IAAI;EACN;EACA,IAAI;GACF,UAAU;GACV,YAAY;GACZ,MAAM;GACN,IAAI;EACN;EACA,IAAI;GACF,UAAU;GACV,YAAY;GACZ,MAAM;GACN,IAAI;EACN;EACA,IAAI;GACF,UAAU;GACV,YAAY;GACZ,MAAM;GACN,IAAI;EACN;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;CACX;AACF,CAAC"}
+{"version":3,"file":"code.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/code/code.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const codeStyle = defineComponentStyle({\n  base: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    fontFamily: \"mono\",\n    rounded: \"l1\",\n  },\n\n  variants: {\n    outline: {\n      layerStyle: \"outline\",\n    },\n    solid: {\n      layerStyle: \"solid\",\n    },\n    subtle: {\n      layerStyle: \"subtle\",\n    },\n    surface: {\n      layerStyle: \"surface\",\n    },\n  },\n\n  sizes: {\n    xs: {\n      fontSize: \"2xs\",\n      lineHeight: \"{sizes.4}\",\n      minH: \"4\",\n      px: \"1\",\n    },\n    sm: {\n      fontSize: \"xs\",\n      lineHeight: \"{sizes.5}\",\n      minH: \"5\",\n      px: \"1.5\",\n    },\n    md: {\n      fontSize: \"sm\",\n      lineHeight: \"{sizes.6}\",\n      minH: \"6\",\n      px: \"2\",\n    },\n    lg: {\n      fontSize: \"sm\",\n      lineHeight: \"{sizes.7}\",\n      minH: \"7\",\n      px: \"2.5\",\n    },\n  },\n\n  defaultProps: {\n    size: \"sm\",\n    variant: \"subtle\",\n  },\n})\n\nexport type CodeStyle = typeof codeStyle\n"],"mappings":";AAEA,MAAa,kDAAYA,CAAAA,CAAAA,qBAAqB;CAC5C,MAAM;EACJ,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,SAAS;CACX;CAEA,UAAU;EACR,SAAS,EACP,YAAY,UACd;EACA,OAAO,EACL,YAAY,QACd;EACA,QAAQ,EACN,YAAY,SACd;EACA,SAAS,EACP,YAAY,UACd;CACF;CAEA,OAAO;EACL,IAAI;GACF,UAAU;GACV,YAAY;GACZ,MAAM;GACN,IAAI;EACN;EACA,IAAI;GACF,UAAU;GACV,YAAY;GACZ,MAAM;GACN,IAAI;EACN;EACA,IAAI;GACF,UAAU;GACV,YAAY;GACZ,MAAM;GACN,IAAI;EACN;EACA,IAAI;GACF,UAAU;GACV,YAAY;GACZ,MAAM;GACN,IAAI;EACN;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;CACX;AACF,CAAC"}

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) {\n        return { enter: { duration: 0 } }\n      } else if (transitionProp) {\n        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      }\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,EAAE,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,WAAmB,MAAM,IAAI,IAAI,EAAE,IAAI,CAAC;EACjE;EACA,YAAYA,mBAAAA,iBAAiB,KAAK,YAAY,IAAI,EAAE,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,UAAuB,KAAK;CAC5C,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,WAAW;CAExC,MAAM,cAAA,GAAA,MAAA,eAA2B;EAC/B,IAAI,CAAC,SACH,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE;OAC3B,IAAI,gBACT,OAAO;OAEP,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;CAEJ,GAAG;EAAC;EAAS;EAAU;CAAc,CAAC;CAEtC,MAAM,UAAA,GAAA,MAAA,gBACG;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,CAAA,GAAA,MAAA,iBAAgB;EACd,KAAA,GAAA,oBAAA,cAAA,YAAe,GAAG,WAAW,IAAI;CACnC,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,iBAAD;EAAyB;EAAQ,SAAS;YACvC,OACC,iBAAA,GAAA,kBAAA,KAACC,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,EAAE"}
+{"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) {\n        return { enter: { duration: 0 } }\n      } else if (transitionProp) {\n        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      }\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,SACH,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE;OAC3B,IAAI,gBACT,OAAO;OAEP,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;CAEJ,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;YACvC,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/collapse/collapse.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/collapse/collapse.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const collapseStyle = defineComponentStyle({\n  base: {\n    w: \"full\",\n  },\n})\n\nexport type CollapseStyle = typeof collapseStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,EAAAA,qBAAqB,EAChD,MAAM,EACJ,GAAG,OACL,EACF,CAAC"}
+{"version":3,"file":"collapse.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/collapse/collapse.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const collapseStyle = defineComponentStyle({\n  base: {\n    w: \"full\",\n  },\n})\n\nexport type CollapseStyle = typeof collapseStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,CAAAA,CAAAA,qBAAqB,EAChD,MAAM,EACJ,GAAG,OACL,EACF,CAAC"}

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":"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"}
+{"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":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-color-picker.cjs","names":["useI18n","useFieldProps","useCombobox","useControllableState","useEyeDropper","mergeRefs","runKeyAction"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  contains,\n  convertColor,\n  cx,\n  focusTransfer,\n  handlerAll,\n  mergeRefs,\n  runIfFn,\n  runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n  extends\n    Omit<\n      UseComboboxProps,\n      | \"closeOnSelect\"\n      | \"initialFocusValue\"\n      | \"onChange\"\n      | \"ref\"\n      | \"selectFocusRef\"\n      | \"selectOnSpace\"\n    >,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * If `true`, the color picker will be closed when the input value changes.\n   *\n   * @default false\n   */\n  closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * The initial value of the color picker.\n   */\n  defaultValue?: string\n  /**\n   * The fallback value of the color picker.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color picker.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * The `id` attribute of the input element.\n   */\n  id?: string\n  /**\n   * The `name` attribute of the input element.\n   */\n  name?: string\n  /**\n   * If `true`, the color picker will be opened when the input value changes.\n   *\n   * @default true\n   */\n  openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * If `true`, the color picker will be opened when the input is focused.\n   *\n   * @default false\n   */\n  openOnFocus?: boolean\n  /**\n   * The pattern used to check the input element.\n   */\n  pattern?: RegExp\n  /**\n   * The placeholder for color picker.\n   */\n  placeholder?: string\n  /**\n   * The value of the color picker.\n   */\n  value?: string\n  /**\n   * The function to format the input value.\n   */\n  formatInput?: (value: string) => string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when input value state changes.\n   */\n  onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n  const { t } = useI18n(\"colorPicker\")\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      allowInput = true,\n      closeOnChange = false,\n      defaultValue,\n      disabled,\n      fallbackValue = \"#FFFFFF\",\n      format: formatProp,\n      formatInput,\n      openOnChange = true,\n      openOnClick = true,\n      openOnFocus = true,\n      pattern,\n      placeholder,\n      placement = \"end-start\",\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      onInputChange: onInputChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const {\n    interactive,\n    open,\n    getContentProps: getComboboxContentProps,\n    getTriggerProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  } = useCombobox({\n    disabled,\n    matchWidth: false,\n    openOnClick: false,\n    openOnEnter: !allowInput,\n    openOnSpace: !allowInput,\n    placement,\n    readOnly,\n    transferFocus: false,\n    ...ariaProps,\n    ...dataProps,\n    ...eventProps,\n    ...rest,\n  })\n  const format =\n    formatProp ?? calcFormat(valueProp ?? defaultValue ?? fallbackValue)\n  const alpha = format.endsWith(\"a\")\n  const fieldRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const focusByClickRef = useRef<boolean>(false)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    focusByClickRef.current = true\n\n    if (allowInput) inputRef.current?.focus()\n\n    if (openOnClick) onOpen()\n  }, [allowInput, interactive, onOpen, openOnClick])\n\n  const onMouseDown = useCallback(\n    (ev: MouseEvent<HTMLDivElement | HTMLInputElement>) => {\n      if (!openOnFocus) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [openOnFocus],\n  )\n\n  const onFieldFocus = useCallback(() => {\n    if (allowInput) return\n\n    if (openOnFocus) onOpen()\n\n    focusByClickRef.current = false\n  }, [allowInput, onOpen, openOnFocus])\n\n  const onInputFocus = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      if (openOnFocus && !focusByClickRef.current) onOpen()\n\n      focusByClickRef.current = false\n    },\n    [onOpen, openOnFocus],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      if (\n        contains(fieldRef.current, ev.relatedTarget) ||\n        contains(contentRef.current, ev.relatedTarget)\n      ) {\n        ev.preventDefault()\n      } else {\n        setValue((prev) => {\n          if (!prev) return prev\n\n          let value = convertColor(prev)(format)\n\n          if (!value) return prev\n\n          if (formatInput) value = formatInput(value)\n\n          if (pattern) value = value.replace(pattern, \"\")\n\n          return value\n        })\n      }\n    },\n    [format, formatInput, pattern, setValue],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!allowInput) return\n\n      onInputChangeProp?.(ev)\n\n      if (runIfFn(closeOnChange, ev)) {\n        onClose()\n      } else if (runIfFn(openOnChange, ev)) {\n        onOpen()\n      }\n\n      let inputValue = ev.target.value\n\n      if (formatInput) inputValue = formatInput(inputValue)\n\n      if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n      setValue(inputValue)\n    },\n    [\n      allowInput,\n      closeOnChange,\n      formatInput,\n      onClose,\n      onInputChangeProp,\n      onOpen,\n      openOnChange,\n      pattern,\n      setValue,\n    ],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) setValue(result.sRGBHex)\n  }, [interactive, onOpenEyeDropper, setValue])\n\n  useEffect(() => {\n    if (!open) return\n\n    return focusTransfer(\n      contentRef.current,\n      allowInput ? inputRef.current : fieldRef.current,\n    )\n  }, [allowInput, open])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getTriggerProps({\n        ref: mergeRefs(ref, fieldRef),\n        \"aria-haspopup\": \"dialog\",\n        tabIndex: !allowInput ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClick),\n        onFocus: handlerAll(props.onFocus, onFieldFocus),\n        onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n      }),\n\n    [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id,\n      ref: mergeRefs(props.ref, ref, inputRef),\n      name,\n      style: {\n        ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n        ...props.style,\n      },\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n      autoComplete: \"off\",\n      disabled,\n      placeholder,\n      readOnly,\n      required,\n      tabIndex: allowInput ? 0 : -1,\n      value,\n      ...dataProps,\n      ...props,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onFocus: handlerAll(props.onFocus, onInputFocus),\n      onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n    }),\n    [\n      allowInput,\n      ariaLabel,\n      ariaLabelledbyProp,\n      dataProps,\n      disabled,\n      id,\n      name,\n      onBlur,\n      onInputChange,\n      onInputFocus,\n      onMouseDown,\n      placeholder,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getComboboxContentProps({\n        ref: mergeRefs(ref, contentRef),\n        role: \"dialog\",\n        ...props,\n      }),\n    [getComboboxContentProps],\n  )\n\n  const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n    (props = {}) => ({\n      disabled,\n      fallbackValue,\n      format,\n      readOnly,\n      value,\n      ...props,\n      onChange: handlerAll(props.onChange, setValue),\n    }),\n    [disabled, fallbackValue, format, readOnly, value, setValue],\n  )\n\n  return {\n    alpha,\n    format,\n    interactive,\n    open,\n    setValue,\n    value,\n    getContentProps,\n    getEyeDropperProps,\n    getFieldProps,\n    getInputProps,\n    getRootProps,\n    getSelectorProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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"}
+{"version":3,"file":"use-color-picker.cjs","names":["useI18n","useFieldProps","useCombobox","useControllableState","useEyeDropper","mergeRefs","runKeyAction"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  contains,\n  convertColor,\n  cx,\n  focusTransfer,\n  handlerAll,\n  mergeRefs,\n  runIfFn,\n  runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n  extends\n    Omit<\n      UseComboboxProps,\n      | \"closeOnSelect\"\n      | \"initialFocusValue\"\n      | \"onChange\"\n      | \"ref\"\n      | \"selectFocusRef\"\n      | \"selectOnSpace\"\n    >,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * If `true`, the color picker will be closed when the input value changes.\n   *\n   * @default false\n   */\n  closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * The initial value of the color picker.\n   */\n  defaultValue?: string\n  /**\n   * The fallback value of the color picker.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color picker.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * The `id` attribute of the input element.\n   */\n  id?: string\n  /**\n   * The `name` attribute of the input element.\n   */\n  name?: string\n  /**\n   * If `true`, the color picker will be opened when the input value changes.\n   *\n   * @default true\n   */\n  openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * If `true`, the color picker will be opened when the input is focused.\n   *\n   * @default false\n   */\n  openOnFocus?: boolean\n  /**\n   * The pattern used to check the input element.\n   */\n  pattern?: RegExp\n  /**\n   * The placeholder for color picker.\n   */\n  placeholder?: string\n  /**\n   * The value of the color picker.\n   */\n  value?: string\n  /**\n   * The function to format the input value.\n   */\n  formatInput?: (value: string) => string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when input value state changes.\n   */\n  onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n  const { t } = useI18n(\"colorPicker\")\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      allowInput = true,\n      closeOnChange = false,\n      defaultValue,\n      disabled,\n      fallbackValue = \"#FFFFFF\",\n      format: formatProp,\n      formatInput,\n      openOnChange = true,\n      openOnClick = true,\n      openOnFocus = true,\n      pattern,\n      placeholder,\n      placement = \"end-start\",\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      onInputChange: onInputChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const {\n    interactive,\n    open,\n    getContentProps: getComboboxContentProps,\n    getTriggerProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  } = useCombobox({\n    disabled,\n    matchWidth: false,\n    openOnClick: false,\n    openOnEnter: !allowInput,\n    openOnSpace: !allowInput,\n    placement,\n    readOnly,\n    transferFocus: false,\n    ...ariaProps,\n    ...dataProps,\n    ...eventProps,\n    ...rest,\n  })\n  const format =\n    formatProp ?? calcFormat(valueProp ?? defaultValue ?? fallbackValue)\n  const alpha = format.endsWith(\"a\")\n  const fieldRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const focusByClickRef = useRef<boolean>(false)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    focusByClickRef.current = true\n\n    if (allowInput) inputRef.current?.focus()\n\n    if (openOnClick) onOpen()\n  }, [allowInput, interactive, onOpen, openOnClick])\n\n  const onMouseDown = useCallback(\n    (ev: MouseEvent<HTMLDivElement | HTMLInputElement>) => {\n      if (!openOnFocus) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [openOnFocus],\n  )\n\n  const onFieldFocus = useCallback(() => {\n    if (allowInput) return\n\n    if (openOnFocus) onOpen()\n\n    focusByClickRef.current = false\n  }, [allowInput, onOpen, openOnFocus])\n\n  const onInputFocus = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      if (openOnFocus && !focusByClickRef.current) onOpen()\n\n      focusByClickRef.current = false\n    },\n    [onOpen, openOnFocus],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      if (\n        contains(fieldRef.current, ev.relatedTarget) ||\n        contains(contentRef.current, ev.relatedTarget)\n      ) {\n        ev.preventDefault()\n      } else {\n        setValue((prev) => {\n          if (!prev) return prev\n\n          let value = convertColor(prev)(format)\n\n          if (!value) return prev\n\n          if (formatInput) value = formatInput(value)\n\n          if (pattern) value = value.replace(pattern, \"\")\n\n          return value\n        })\n      }\n    },\n    [format, formatInput, pattern, setValue],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!allowInput) return\n\n      onInputChangeProp?.(ev)\n\n      if (runIfFn(closeOnChange, ev)) {\n        onClose()\n      } else if (runIfFn(openOnChange, ev)) {\n        onOpen()\n      }\n\n      let inputValue = ev.target.value\n\n      if (formatInput) inputValue = formatInput(inputValue)\n\n      if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n      setValue(inputValue)\n    },\n    [\n      allowInput,\n      closeOnChange,\n      formatInput,\n      onClose,\n      onInputChangeProp,\n      onOpen,\n      openOnChange,\n      pattern,\n      setValue,\n    ],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) setValue(result.sRGBHex)\n  }, [interactive, onOpenEyeDropper, setValue])\n\n  useEffect(() => {\n    if (!open) return\n\n    return focusTransfer(\n      contentRef.current,\n      allowInput ? inputRef.current : fieldRef.current,\n    )\n  }, [allowInput, open])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getTriggerProps({\n        ref: mergeRefs(ref, fieldRef),\n        \"aria-haspopup\": \"dialog\",\n        tabIndex: !allowInput ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClick),\n        onFocus: handlerAll(props.onFocus, onFieldFocus),\n        onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n      }),\n\n    [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id,\n      ref: mergeRefs(props.ref, ref, inputRef),\n      name,\n      style: {\n        ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n        ...props.style,\n      },\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n      autoComplete: \"off\",\n      disabled,\n      placeholder,\n      readOnly,\n      required,\n      tabIndex: allowInput ? 0 : -1,\n      value,\n      ...dataProps,\n      ...props,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onFocus: handlerAll(props.onFocus, onInputFocus),\n      onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n    }),\n    [\n      allowInput,\n      ariaLabel,\n      ariaLabelledbyProp,\n      dataProps,\n      disabled,\n      id,\n      name,\n      onBlur,\n      onInputChange,\n      onInputFocus,\n      onMouseDown,\n      placeholder,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getComboboxContentProps({\n        ref: mergeRefs(ref, contentRef),\n        role: \"dialog\",\n        ...props,\n      }),\n    [getComboboxContentProps],\n  )\n\n  const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n    (props = {}) => ({\n      disabled,\n      fallbackValue,\n      format,\n      readOnly,\n      value,\n      ...props,\n      onChange: handlerAll(props.onChange, setValue),\n    }),\n    [disabled, fallbackValue, format, readOnly, value, setValue],\n  )\n\n  return {\n    alpha,\n    format,\n    interactive,\n    open,\n    setValue,\n    value,\n    getContentProps,\n    getEyeDropperProps,\n    getFieldProps,\n    getInputProps,\n    getRootProps,\n    getSelectorProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"color-selector.cjs","names":["createSlotComponent","colorSelectorStyle","useColorSelector","styled","varAttr","mergeProps","PipetteIcon","ColorSwatch"],"sources":["../../../../src/components/color-selector/color-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, StyleValue, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { ColorSelectorStyle } from \"./color-selector.style\"\nimport type {\n  UseColorSelectorProps,\n  UseColorSelectorReturn,\n} from \"./use-color-selector\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled, varAttr } from \"../../core\"\nimport { AlphaSlider } from \"../alpha-slider\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { HueSlider } from \"../hue-slider\"\nimport { PipetteIcon } from \"../icon\"\nimport { SaturationSlider } from \"../saturation-slider\"\nimport { colorSelectorStyle } from \"./color-selector.style\"\nimport { useColorSelector } from \"./use-color-selector\"\n\ninterface ComponentContext\n  extends\n    Pick<\n      ColorSelectorRootProps,\n      | \"alphaSliderProps\"\n      | \"colorSwatches\"\n      | \"colorSwatchGroupLabelProps\"\n      | \"colorSwatchGroupProps\"\n      | \"colorSwatchItemProps\"\n      | \"hueSliderProps\"\n      | \"saturationSliderProps\"\n      | \"shape\"\n      | \"size\"\n    >,\n    Pick<\n      UseColorSelectorReturn,\n      | \"alpha\"\n      | \"getAlphaSliderProps\"\n      | \"getColorSwatchGroupLabelProps\"\n      | \"getColorSwatchGroupProps\"\n      | \"getColorSwatchItemProps\"\n      | \"getEyeDropperProps\"\n      | \"getHueSliderProps\"\n      | \"getSaturationSliderProps\"\n    > {}\n\nexport interface ColorSelectorRootProps\n  extends\n    Merge<HTMLStyledProps, UseColorSelectorProps>,\n    ThemeProps<ColorSelectorStyle> {\n  /**\n   * An array of colors in one of the supported formats.\n   * Used to render swatches list below the color selector.\n   */\n  colorSwatches?: string[]\n  /**\n   * The number of columns in the color swatch group.\n   *\n   * @default 8\n   */\n  colorSwatchGroupColumns?: StyleValue<number>\n  /**\n   * The label of the color swatch group.\n   */\n  colorSwatchGroupLabel?: ReactNode\n  /**\n   * If `true`, the alpha slider will be displayed.\n   *\n   * @default false\n   */\n  withAlpha?: boolean\n  /**\n   * Props for the alpha slider.\n   */\n  alphaSliderProps?: ColorSelectorAlphaSliderProps\n  /**\n   * Props for the color swatch group label.\n   */\n  colorSwatchGroupLabelProps?: ColorSelectorColorSwatchGroupLabelProps\n  /**\n   * Props for the color swatch group.\n   */\n  colorSwatchGroupProps?: ColorSelectorColorSwatchGroupProps\n  /**\n   * Props for the color swatch item.\n   */\n  colorSwatchItemProps?: Omit<ColorSelectorColorSwatchItemProps, \"value\">\n  /**\n   * Props for the hue slider.\n   */\n  hueSliderProps?: ColorSelectorHueSliderProps\n  /**\n   * Props for the saturation slider.\n   */\n  saturationSliderProps?: ColorSelectorSaturationSliderProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ColorSelectorPropsContext,\n  useComponentContext,\n  usePropsContext: useColorSelectorPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  ColorSelectorRootProps,\n  ColorSelectorStyle,\n  ComponentContext\n>(\"color-selector\", colorSelectorStyle)\n\nexport { ColorSelectorPropsContext, useColorSelectorPropsContext }\n\n/**\n * `ColorSelector` is a component used by the user to select a color.\n *\n * @see https://yamada-ui.com/docs/components/color-selector\n */\nexport const ColorSelectorRoot = withProvider<\n  \"div\",\n  ColorSelectorRootProps,\n  \"shape\" | \"size\"\n>(\n  ({\n    size,\n    children,\n    colorSwatches,\n    colorSwatchGroupLabel,\n    shape,\n    withAlpha,\n    alphaSliderProps,\n    colorSwatchGroupLabelProps,\n    colorSwatchGroupProps,\n    colorSwatchItemProps,\n    hueSliderProps,\n    saturationSliderProps,\n    ...rest\n  }) => {\n    const {\n      alpha,\n      getAlphaSliderProps,\n      getColorSwatchGroupLabelProps,\n      getColorSwatchGroupProps,\n      getColorSwatchItemProps,\n      getEyeDropperProps,\n      getHueSliderProps,\n      getRootProps,\n      getSaturationSliderProps,\n    } = useColorSelector(rest)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return (\n        <>\n          <ColorSelectorSaturationSlider />\n          <ColorSelectorHueSlider />\n          <ColorSelectorAlphaSlider />\n\n          {colorSwatchGroupLabel ? (\n            <ColorSelectorColorSwatchGroupLabel>\n              {colorSwatchGroupLabel}\n            </ColorSelectorColorSwatchGroupLabel>\n          ) : null}\n          {colorSwatches ? <ColorSelectorColorSwatchGroup /> : null}\n        </>\n      )\n    }, [children, colorSwatchGroupLabel, colorSwatches])\n    const context = useMemo(\n      () => ({\n        size,\n        alpha: withAlpha ?? alpha,\n        colorSwatches,\n        colorSwatchGroupLabel,\n        shape,\n        alphaSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n        getAlphaSliderProps,\n        getColorSwatchGroupLabelProps,\n        getColorSwatchGroupProps,\n        getColorSwatchItemProps,\n        getEyeDropperProps,\n        getHueSliderProps,\n        getSaturationSliderProps,\n        hueSliderProps,\n        saturationSliderProps,\n      }),\n      [\n        size,\n        withAlpha,\n        alpha,\n        shape,\n        colorSwatches,\n        colorSwatchGroupLabel,\n        alphaSliderProps,\n        getAlphaSliderProps,\n        getEyeDropperProps,\n        getHueSliderProps,\n        getSaturationSliderProps,\n        getColorSwatchGroupLabelProps,\n        getColorSwatchGroupProps,\n        getColorSwatchItemProps,\n        hueSliderProps,\n        saturationSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n      ],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\", \"shape\"] },\n)(undefined, ({ colorSwatchGroupColumns = 8, ...rest }) => ({\n  \"--color-swatch-group-columns\": varAttr(colorSwatchGroupColumns),\n  ...rest,\n}))\n\nexport interface ColorSelectorSaturationSliderProps\n  extends SaturationSlider.RootProps {}\n\nexport const ColorSelectorSaturationSlider = withContext<\n  \"input\",\n  ColorSelectorSaturationSliderProps\n>((props) => {\n  const { size, shape, getSaturationSliderProps, saturationSliderProps } =\n    useComponentContext()\n\n  return (\n    <SaturationSlider.Root\n      size={size}\n      shape={shape}\n      {...getSaturationSliderProps(mergeProps(saturationSliderProps, props)())}\n    />\n  )\n}, \"saturationSlider\")()\n\nexport interface ColorSelectorHueSliderProps extends HueSlider.RootProps {}\n\nexport const ColorSelectorHueSlider = withContext<\n  \"input\",\n  ColorSelectorHueSliderProps\n>((props) => {\n  const { size, shape, getHueSliderProps, hueSliderProps } =\n    useComponentContext()\n\n  return (\n    <HueSlider.Root\n      size={size}\n      shape={shape}\n      {...getHueSliderProps(mergeProps(hueSliderProps, props)())}\n    />\n  )\n}, \"hueSlider\")()\n\nexport interface ColorSelectorAlphaSliderProps extends Partial<AlphaSlider.RootProps> {}\n\nexport const ColorSelectorAlphaSlider = withContext<\n  \"input\",\n  ColorSelectorAlphaSliderProps\n>((props) => {\n  const { size, alpha, shape, alphaSliderProps, getAlphaSliderProps } =\n    useComponentContext()\n\n  if (!alpha) return null\n\n  return (\n    <AlphaSlider.Root\n      size={size}\n      shape={shape}\n      {...getAlphaSliderProps(mergeProps(alphaSliderProps, props)())}\n    />\n  )\n}, \"alphaSlider\")()\n\nexport interface ColorSelectorEyeDropperProps extends HTMLStyledProps {\n  /**\n   * The icon to display in the eye dropper.\n   */\n  icon?: ReactNode\n}\n\nexport const ColorSelectorEyeDropper = withContext<\n  \"div\",\n  ColorSelectorEyeDropperProps\n>(\"div\", \"eyeDropper\")(undefined, ({ children, icon, ...rest }) => {\n  const { getEyeDropperProps } = useComponentContext()\n\n  return getEyeDropperProps({\n    children: icon || children || <PipetteIcon />,\n    ...rest,\n  })\n})\n\nexport interface ColorSelectorColorSwatchGroupLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const ColorSelectorColorSwatchGroupLabel = withContext<\n  \"span\",\n  ColorSelectorColorSwatchGroupLabelProps\n>(\"span\", \"colorSwatchGroupLabel\")(undefined, (props) => {\n  const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } =\n    useComponentContext()\n\n  return getColorSwatchGroupLabelProps(\n    mergeProps(colorSwatchGroupLabelProps, props)(),\n  )\n})\n\nexport interface ColorSelectorColorSwatchGroupProps extends HTMLStyledProps {}\n\nexport const ColorSelectorColorSwatchGroup = withContext<\n  \"div\",\n  ColorSelectorColorSwatchGroupProps\n>(\"div\", \"colorSwatchGroup\")(undefined, ({ children, ...rest }) => {\n  const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } =\n    useComponentContext()\n  const computedChildren =\n    children ??\n    colorSwatchGroupProps?.children ??\n    colorSwatches?.map((value, index) => (\n      <ColorSelectorColorSwatchItem key={index} value={value} />\n    ))\n\n  return getColorSwatchGroupProps(\n    mergeProps(colorSwatchGroupProps, rest, { children: computedChildren })(),\n  )\n})\n\nexport interface ColorSelectorColorSwatchItemProps extends Omit<\n  ColorSwatchProps,\n  \"color\"\n> {\n  /**\n   * The value of the color swatch.\n   */\n  value: string\n}\n\nexport const ColorSelectorColorSwatchItem = withContext<\n  \"div\",\n  ColorSelectorColorSwatchItemProps\n>(ColorSwatch, \"colorSwatchItem\")(undefined, (props) => {\n  const { colorSwatchItemProps, getColorSwatchItemProps } =\n    useComponentContext()\n\n  return getColorSwatchItemProps(mergeProps(colorSwatchItemProps, props)())\n})\n"],"mappings":"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"}
+{"version":3,"file":"color-selector.cjs","names":["createSlotComponent","colorSelectorStyle","useColorSelector","styled","varAttr","mergeProps","PipetteIcon","ColorSwatch"],"sources":["../../../../src/components/color-selector/color-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, StyleValue, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { ColorSelectorStyle } from \"./color-selector.style\"\nimport type {\n  UseColorSelectorProps,\n  UseColorSelectorReturn,\n} from \"./use-color-selector\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled, varAttr } from \"../../core\"\nimport { AlphaSlider } from \"../alpha-slider\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { HueSlider } from \"../hue-slider\"\nimport { PipetteIcon } from \"../icon\"\nimport { SaturationSlider } from \"../saturation-slider\"\nimport { colorSelectorStyle } from \"./color-selector.style\"\nimport { useColorSelector } from \"./use-color-selector\"\n\ninterface ComponentContext\n  extends\n    Pick<\n      ColorSelectorRootProps,\n      | \"alphaSliderProps\"\n      | \"colorSwatches\"\n      | \"colorSwatchGroupLabelProps\"\n      | \"colorSwatchGroupProps\"\n      | \"colorSwatchItemProps\"\n      | \"hueSliderProps\"\n      | \"saturationSliderProps\"\n      | \"shape\"\n      | \"size\"\n    >,\n    Pick<\n      UseColorSelectorReturn,\n      | \"alpha\"\n      | \"getAlphaSliderProps\"\n      | \"getColorSwatchGroupLabelProps\"\n      | \"getColorSwatchGroupProps\"\n      | \"getColorSwatchItemProps\"\n      | \"getEyeDropperProps\"\n      | \"getHueSliderProps\"\n      | \"getSaturationSliderProps\"\n    > {}\n\nexport interface ColorSelectorRootProps\n  extends\n    Merge<HTMLStyledProps, UseColorSelectorProps>,\n    ThemeProps<ColorSelectorStyle> {\n  /**\n   * An array of colors in one of the supported formats.\n   * Used to render swatches list below the color selector.\n   */\n  colorSwatches?: string[]\n  /**\n   * The number of columns in the color swatch group.\n   *\n   * @default 8\n   */\n  colorSwatchGroupColumns?: StyleValue<number>\n  /**\n   * The label of the color swatch group.\n   */\n  colorSwatchGroupLabel?: ReactNode\n  /**\n   * If `true`, the alpha slider will be displayed.\n   *\n   * @default false\n   */\n  withAlpha?: boolean\n  /**\n   * Props for the alpha slider.\n   */\n  alphaSliderProps?: ColorSelectorAlphaSliderProps\n  /**\n   * Props for the color swatch group label.\n   */\n  colorSwatchGroupLabelProps?: ColorSelectorColorSwatchGroupLabelProps\n  /**\n   * Props for the color swatch group.\n   */\n  colorSwatchGroupProps?: ColorSelectorColorSwatchGroupProps\n  /**\n   * Props for the color swatch item.\n   */\n  colorSwatchItemProps?: Omit<ColorSelectorColorSwatchItemProps, \"value\">\n  /**\n   * Props for the hue slider.\n   */\n  hueSliderProps?: ColorSelectorHueSliderProps\n  /**\n   * Props for the saturation slider.\n   */\n  saturationSliderProps?: ColorSelectorSaturationSliderProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ColorSelectorPropsContext,\n  useComponentContext,\n  usePropsContext: useColorSelectorPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  ColorSelectorRootProps,\n  ColorSelectorStyle,\n  ComponentContext\n>(\"color-selector\", colorSelectorStyle)\n\nexport { ColorSelectorPropsContext, useColorSelectorPropsContext }\n\n/**\n * `ColorSelector` is a component used by the user to select a color.\n *\n * @see https://yamada-ui.com/docs/components/color-selector\n */\nexport const ColorSelectorRoot = withProvider<\n  \"div\",\n  ColorSelectorRootProps,\n  \"shape\" | \"size\"\n>(\n  ({\n    size,\n    children,\n    colorSwatches,\n    colorSwatchGroupLabel,\n    shape,\n    withAlpha,\n    alphaSliderProps,\n    colorSwatchGroupLabelProps,\n    colorSwatchGroupProps,\n    colorSwatchItemProps,\n    hueSliderProps,\n    saturationSliderProps,\n    ...rest\n  }) => {\n    const {\n      alpha,\n      getAlphaSliderProps,\n      getColorSwatchGroupLabelProps,\n      getColorSwatchGroupProps,\n      getColorSwatchItemProps,\n      getEyeDropperProps,\n      getHueSliderProps,\n      getRootProps,\n      getSaturationSliderProps,\n    } = useColorSelector(rest)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return (\n        <>\n          <ColorSelectorSaturationSlider />\n          <ColorSelectorHueSlider />\n          <ColorSelectorAlphaSlider />\n\n          {colorSwatchGroupLabel ? (\n            <ColorSelectorColorSwatchGroupLabel>\n              {colorSwatchGroupLabel}\n            </ColorSelectorColorSwatchGroupLabel>\n          ) : null}\n          {colorSwatches ? <ColorSelectorColorSwatchGroup /> : null}\n        </>\n      )\n    }, [children, colorSwatchGroupLabel, colorSwatches])\n    const context = useMemo(\n      () => ({\n        size,\n        alpha: withAlpha ?? alpha,\n        colorSwatches,\n        colorSwatchGroupLabel,\n        shape,\n        alphaSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n        getAlphaSliderProps,\n        getColorSwatchGroupLabelProps,\n        getColorSwatchGroupProps,\n        getColorSwatchItemProps,\n        getEyeDropperProps,\n        getHueSliderProps,\n        getSaturationSliderProps,\n        hueSliderProps,\n        saturationSliderProps,\n      }),\n      [\n        size,\n        withAlpha,\n        alpha,\n        shape,\n        colorSwatches,\n        colorSwatchGroupLabel,\n        alphaSliderProps,\n        getAlphaSliderProps,\n        getEyeDropperProps,\n        getHueSliderProps,\n        getSaturationSliderProps,\n        getColorSwatchGroupLabelProps,\n        getColorSwatchGroupProps,\n        getColorSwatchItemProps,\n        hueSliderProps,\n        saturationSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n      ],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\", \"shape\"] },\n)(undefined, ({ colorSwatchGroupColumns = 8, ...rest }) => ({\n  \"--color-swatch-group-columns\": varAttr(colorSwatchGroupColumns),\n  ...rest,\n}))\n\nexport interface ColorSelectorSaturationSliderProps\n  extends SaturationSlider.RootProps {}\n\nexport const ColorSelectorSaturationSlider = withContext<\n  \"input\",\n  ColorSelectorSaturationSliderProps\n>((props) => {\n  const { size, shape, getSaturationSliderProps, saturationSliderProps } =\n    useComponentContext()\n\n  return (\n    <SaturationSlider.Root\n      size={size}\n      shape={shape}\n      {...getSaturationSliderProps(mergeProps(saturationSliderProps, props)())}\n    />\n  )\n}, \"saturationSlider\")()\n\nexport interface ColorSelectorHueSliderProps extends HueSlider.RootProps {}\n\nexport const ColorSelectorHueSlider = withContext<\n  \"input\",\n  ColorSelectorHueSliderProps\n>((props) => {\n  const { size, shape, getHueSliderProps, hueSliderProps } =\n    useComponentContext()\n\n  return (\n    <HueSlider.Root\n      size={size}\n      shape={shape}\n      {...getHueSliderProps(mergeProps(hueSliderProps, props)())}\n    />\n  )\n}, \"hueSlider\")()\n\nexport interface ColorSelectorAlphaSliderProps extends Partial<AlphaSlider.RootProps> {}\n\nexport const ColorSelectorAlphaSlider = withContext<\n  \"input\",\n  ColorSelectorAlphaSliderProps\n>((props) => {\n  const { size, alpha, shape, alphaSliderProps, getAlphaSliderProps } =\n    useComponentContext()\n\n  if (!alpha) return null\n\n  return (\n    <AlphaSlider.Root\n      size={size}\n      shape={shape}\n      {...getAlphaSliderProps(mergeProps(alphaSliderProps, props)())}\n    />\n  )\n}, \"alphaSlider\")()\n\nexport interface ColorSelectorEyeDropperProps extends HTMLStyledProps {\n  /**\n   * The icon to display in the eye dropper.\n   */\n  icon?: ReactNode\n}\n\nexport const ColorSelectorEyeDropper = withContext<\n  \"div\",\n  ColorSelectorEyeDropperProps\n>(\"div\", \"eyeDropper\")(undefined, ({ children, icon, ...rest }) => {\n  const { getEyeDropperProps } = useComponentContext()\n\n  return getEyeDropperProps({\n    children: icon || children || <PipetteIcon />,\n    ...rest,\n  })\n})\n\nexport interface ColorSelectorColorSwatchGroupLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const ColorSelectorColorSwatchGroupLabel = withContext<\n  \"span\",\n  ColorSelectorColorSwatchGroupLabelProps\n>(\"span\", \"colorSwatchGroupLabel\")(undefined, (props) => {\n  const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } =\n    useComponentContext()\n\n  return getColorSwatchGroupLabelProps(\n    mergeProps(colorSwatchGroupLabelProps, props)(),\n  )\n})\n\nexport interface ColorSelectorColorSwatchGroupProps extends HTMLStyledProps {}\n\nexport const ColorSelectorColorSwatchGroup = withContext<\n  \"div\",\n  ColorSelectorColorSwatchGroupProps\n>(\"div\", \"colorSwatchGroup\")(undefined, ({ children, ...rest }) => {\n  const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } =\n    useComponentContext()\n  const computedChildren =\n    children ??\n    colorSwatchGroupProps?.children ??\n    colorSwatches?.map((value, index) => (\n      <ColorSelectorColorSwatchItem key={index} value={value} />\n    ))\n\n  return getColorSwatchGroupProps(\n    mergeProps(colorSwatchGroupProps, rest, { children: computedChildren })(),\n  )\n})\n\nexport interface ColorSelectorColorSwatchItemProps extends Omit<\n  ColorSwatchProps,\n  \"color\"\n> {\n  /**\n   * The value of the color swatch.\n   */\n  value: string\n}\n\nexport const ColorSelectorColorSwatchItem = withContext<\n  \"div\",\n  ColorSelectorColorSwatchItemProps\n>(ColorSwatch, \"colorSwatchItem\")(undefined, (props) => {\n  const { colorSwatchItemProps, getColorSwatchItemProps } =\n    useComponentContext()\n\n  return getColorSwatchItemProps(mergeProps(colorSwatchItemProps, props)())\n})\n"],"mappings":"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"}

package/dist/cjs/components/color-selector/use-color-selector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-color-selector.cjs","names":["useI18n","useControllableState","useEyeDropper","mergeProps","runKeyAction"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  convertColor,\n  cx,\n  dataAttr,\n  handlerAll,\n  hsvTo,\n  isString,\n  parseToHsv,\n  runKeyAction,\n  sameColor,\n  useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the color selector.\n   *\n   * @default fallbackValue\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the color selector will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The fallback value of the color selector.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color selector.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * If `true`, the color selector will be read only.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the color selector.\n   */\n  value?: string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when the value changes ends.\n   */\n  onChangeEnd?: (value: string) => void\n  /**\n   * The callback invoked when the value changes starts.\n   */\n  onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n  fallbackValue = \"#FFFFFF\",\n  defaultValue = fallbackValue,\n  disabled = false,\n  format: formatProp,\n  readOnly = false,\n  value: valueProp,\n  onChange: onChangeProp,\n  onChangeEnd: onChangeEndProp,\n  onChangeStart: onChangeStartProp,\n  ...rest\n}: UseColorSelectorProps) => {\n  const { t } = useI18n(\"colorSelector\")\n  const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n  const alpha = format.endsWith(\"a\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n  const [h, s, v, a] = hsva\n  const interactive = !(disabled || readOnly)\n  const swatchGroupLabelId = useId()\n  const activeRef = useRef(false)\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n  const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n  const onChange = useCallback(\n    (value: Hsva | string) => {\n      if (!interactive) return\n\n      if (isString(value)) {\n        setValue(convertColor(value, fallbackValue)(format))\n        setHsva(parseToHsv(value, fallbackValue))\n      } else {\n        setHsva(value)\n        setValue(hsvTo(value, fallbackValue)(format))\n      }\n    },\n    [fallbackValue, format, interactive, setValue],\n  )\n\n  const onChangeStart = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = true\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeStartProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeStartProp],\n  )\n\n  const onChangeEnd = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = false\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeEndProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeEndProp],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) onChange(result.sRGBHex)\n  }, [interactive, onChange, onOpenEyeDropper])\n\n  useUpdateEffect(() => {\n    if (activeRef.current) return\n\n    if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n  }, [valueProp])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n        },\n        rest,\n        props,\n      )(),\n    [disabled, readOnly, rest],\n  )\n\n  const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n    useCallback(\n      (props = {}) => ({\n        disabled,\n        readOnly,\n        value: [h, s, v],\n        ...props,\n        onChange: handlerAll(props.onChange, ([h, s, v]) =>\n          onChange([h, s, v, a]),\n        ),\n        onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n          onChangeEnd([h, s, v, a]),\n        ),\n        onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n          onChangeStart([h, s, v, a]),\n        ),\n      }),\n      [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n    )\n\n  const getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  > = useCallback(\n    (props = {}) => ({\n      disabled,\n      readOnly,\n      value: h,\n      ...props,\n      onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (h) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n  )\n\n  const getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  > = useCallback(\n    (props = {}) => ({\n      color,\n      disabled,\n      readOnly,\n      value: a,\n      ...props,\n      onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (a) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [\n      color,\n      disabled,\n      readOnly,\n      a,\n      onChange,\n      h,\n      s,\n      v,\n      onChangeEnd,\n      onChangeStart,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [\n      disabled,\n      interactive,\n      onEyeDropperClick,\n      readOnly,\n      supportedEyeDropper,\n      t,\n    ],\n  )\n\n  const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({\n      id: swatchGroupLabelId,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"listbox\",\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchItemProps: RequiredPropGetter<\n    \"div\",\n    { value: string },\n    HTMLProps & { color: string }\n  > = useCallback(\n    ({ value, ...props }) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-selected\": sameColor(value, color),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"option\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      color: value,\n      onClick: handlerAll(props.onClick, () => onChange(value)),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: () => onChange(value),\n          Space: () => onChange(value),\n        }),\n      ),\n    }),\n    [disabled, color, interactive, onChange, readOnly],\n  )\n\n  return {\n    alpha,\n    format,\n    setValue,\n    value,\n    getAlphaSliderProps,\n    getColorSwatchGroupLabelProps,\n    getColorSwatchGroupProps,\n    getColorSwatchItemProps,\n    getEyeDropperProps,\n    getHueSliderProps,\n    getRootProps,\n    getSaturationSliderProps,\n    onChange,\n  }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":";;;;;;;;;;AA8EA,MAAa,oBAAoB,EAC/B,gBAAgB,WAChB,eAAe,eACf,WAAW,OACX,QAAQ,YACR,WAAW,OACX,OAAO,WACP,UAAU,cACV,aAAa,iBACb,eAAe,mBACf,GAAG,WACwB;CAC3B,MAAM,EAAE,MAAMA,sBAAAA,QAAQ,eAAe;CACrC,MAAM,SAAS,eAAA,GAAA,oBAAA,cAAA,YAAyB,aAAa,YAAY;CACjE,MAAM,QAAQ,OAAO,SAAS,GAAG;CACjC,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACZ,CAAC;CACD,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,WAAA,GAAA,oBAAA,cAAA,YAA+B,OAAO,aAAa,CAAC;CACjE,MAAM,CAAC,GAAG,GAAG,GAAG,KAAK;CACrB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,sBAAA,GAAA,MAAA,OAA2B;CACjC,MAAM,aAAA,GAAA,MAAA,QAAmB,KAAK;CAC9B,MAAM,EAAE,WAAW,qBAAqB,QAAQ,qBAC9CC,oCAAAA,cAAc;CAChB,MAAM,SAAA,GAAA,oBAAA,cAAA,OAAc;EAAC;EAAG;EAAG;EAAG;CAAC,GAAG,aAAa,EAAE,KAAK;CAEtD,MAAM,YAAA,GAAA,MAAA,cACH,UAAyB;EACxB,IAAI,CAAC,aAAa;EAElB,KAAA,GAAA,oBAAA,cAAA,UAAa,KAAK,GAAG;GACnB,UAAA,GAAA,oBAAA,cAAA,cAAsB,OAAO,aAAa,EAAE,MAAM,CAAC;GACnD,SAAA,GAAA,oBAAA,cAAA,YAAmB,OAAO,aAAa,CAAC;EAC1C,OAAO;GACL,QAAQ,KAAK;GACb,UAAA,GAAA,oBAAA,cAAA,OAAe,OAAO,aAAa,EAAE,MAAM,CAAC;EAC9C;CACF,GACA;EAAC;EAAe;EAAQ;EAAa;CAAQ,CAC/C;CAEA,MAAM,iBAAA,GAAA,MAAA,cACH,CAAC,GAAG,GAAG,GAAG,OAAa;EACtB,IAAI,CAAC,aAAa;EAElB,UAAU,UAAU;EAEpB,MAAM,SAAA,GAAA,oBAAA,cAAA,OAAc;GAAC;GAAG;GAAG;GAAG;EAAC,GAAG,aAAa,EAAE,MAAM;EAEvD,oBAAoB,KAAK;CAC3B,GACA;EAAC;EAAa;EAAe;EAAQ;CAAiB,CACxD;CAEA,MAAM,eAAA,GAAA,MAAA,cACH,CAAC,GAAG,GAAG,GAAG,OAAa;EACtB,IAAI,CAAC,aAAa;EAElB,UAAU,UAAU;EAEpB,MAAM,SAAA,GAAA,oBAAA,cAAA,OAAc;GAAC;GAAG;GAAG;GAAG;EAAC,GAAG,aAAa,EAAE,MAAM;EAEvD,kBAAkB,KAAK;CACzB,GACA;EAAC;EAAa;EAAe;EAAQ;CAAe,CACtD;CAEA,MAAM,qBAAA,GAAA,MAAA,aAAgC,YAAY;EAChD,IAAI,CAAC,aAAa;EAElB,MAAM,SAAS,MAAM,iBAAiB;EAEtC,IAAI,QAAQ,SAAS,SAAS,OAAO,OAAO;CAC9C,GAAG;EAAC;EAAa;EAAU;CAAgB,CAAC;CAE5C,eAAA,sBAAsB;EACpB,IAAI,UAAU,SAAS;EAEvB,IAAI,WAAW,SAAA,GAAA,oBAAA,cAAA,YAAmB,WAAW,aAAa,CAAC;CAC7D,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,gBAAA,GAAA,MAAA,cACH,QAAQ,CAAC,MACRC,cAAAA,WACE;EACE,kBAAA,GAAA,oBAAA,cAAA,UAA0B,QAAQ;EAClC,kBAAA,GAAA,oBAAA,cAAA,UAA0B,QAAQ;CACpC,GACA,MACA,KACF,EAAE,GACJ;EAAC;EAAU;EAAU;CAAI,CAC3B;CAEA,MAAM,4BAAA,GAAA,MAAA,cAED,QAAQ,CAAC,OAAO;EACf;EACA;EACA,OAAO;GAAC;GAAG;GAAG;EAAC;EACf,GAAG;EACH,WAAA,GAAA,oBAAA,cAAA,YAAqB,MAAM,WAAW,CAAC,GAAG,GAAG,OAC3C,SAAS;GAAC;GAAG;GAAG;GAAG;EAAC,CAAC,CACvB;EACA,cAAA,GAAA,oBAAA,cAAA,YAAwB,MAAM,cAAc,CAAC,GAAG,GAAG,OACjD,YAAY;GAAC;GAAG;GAAG;GAAG;EAAC,CAAC,CAC1B;EACA,gBAAA,GAAA,oBAAA,cAAA,YAA0B,MAAM,gBAAgB,CAAC,GAAG,GAAG,OACrD,cAAc;GAAC;GAAG;GAAG;GAAG;EAAC,CAAC,CAC5B;CACF,IACA;EAAC;EAAU;EAAU;EAAG;EAAG;EAAG;EAAU;EAAG;EAAa;CAAa,CACvE;CAEF,MAAM,qBAAA,GAAA,MAAA,cAGH,QAAQ,CAAC,OAAO;EACf;EACA;EACA,OAAO;EACP,GAAG;EACH,WAAA,GAAA,oBAAA,cAAA,YAAqB,MAAM,WAAW,MAAM,SAAS;GAAC;GAAG;GAAG;GAAG;EAAC,CAAC,CAAC;EAClE,cAAA,GAAA,oBAAA,cAAA,YAAwB,MAAM,cAAc,MAC1C,YAAY;GAAC;GAAG;GAAG;GAAG;EAAC,CAAC,CAC1B;EACA,gBAAA,GAAA,oBAAA,cAAA,YAA0B,MAAM,gBAAgB,MAC9C,cAAc;GAAC;GAAG;GAAG;GAAG;EAAC,CAAC,CAC5B;CACF,IACA;EAAC;EAAU;EAAU;EAAG;EAAU;EAAG;EAAG;EAAG;EAAa;CAAa,CACvE;CAEA,MAAM,uBAAA,GAAA,MAAA,cAKH,QAAQ,CAAC,OAAO;EACf;EACA;EACA;EACA,OAAO;EACP,GAAG;EACH,WAAA,GAAA,oBAAA,cAAA,YAAqB,MAAM,WAAW,MAAM,SAAS;GAAC;GAAG;GAAG;GAAG;EAAC,CAAC,CAAC;EAClE,cAAA,GAAA,oBAAA,cAAA,YAAwB,MAAM,cAAc,MAC1C,YAAY;GAAC;GAAG;GAAG;GAAG;EAAC,CAAC,CAC1B;EACA,gBAAA,GAAA,oBAAA,cAAA,YAA0B,MAAM,gBAAgB,MAC9C,cAAc;GAAC;GAAG;GAAG;GAAG;EAAC,CAAC,CAC5B;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,sBAAA,GAAA,MAAA,cACH,QAAQ,CAAC,OAAO;EACf,kBAAA,GAAA,oBAAA,cAAA,UAA0B,CAAC,WAAW;EACtC,cAAc,EAAE,cAAc;EAC9B,kBAAA,GAAA,oBAAA,cAAA,UAA0B,QAAQ;EAClC,kBAAA,GAAA,oBAAA,cAAA,UAA0B,QAAQ;EAClC,QAAQ,CAAC;EACT,MAAM;EACN,UAAU,cAAc,IAAI;EAC5B,GAAG;EACH,UAAA,GAAA,oBAAA,cAAA,YAAoB,MAAM,SAAS,iBAAiB;EACpD,YAAA,GAAA,oBAAA,cAAA,YAAsB,MAAM,YAAY,OACtCC,YAAAA,aAAa,IAAI;GACf,OAAO;GACP,OAAO;EACT,CAAC,CACH;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAgDA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA,gCAAA,GAAA,MAAA,cAnDC,WAAW;GACV,IAAI;GACJ,kBAAA,GAAA,oBAAA,cAAA,UAA0B,QAAQ;GAClC,kBAAA,GAAA,oBAAA,cAAA,UAA0B,QAAQ;GAClC,GAAG;EACL,IACA;GAAC;GAAoB;GAAU;EAAQ,CA6CX;EAC5B,2BAAA,GAAA,MAAA,cA1CC,EAAE,mBAAmB,gBAAgB,GAAG,UAAU,CAAC,OAAO;GACzD,oBAAA,GAAA,oBAAA,cAAA,IAAsB,gBAAgB,kBAAkB;GACxD,kBAAA,GAAA,oBAAA,cAAA,UAA0B,QAAQ;GAClC,kBAAA,GAAA,oBAAA,cAAA,UAA0B,QAAQ;GAClC,MAAM;GACN,GAAG;EACL,IACA;GAAC;GAAoB;GAAU;EAAQ,CAmChB;EACvB,0BAAA,GAAA,MAAA,cA5BC,EAAE,OAAO,GAAG,aAAa;GACxB,kBAAA,GAAA,oBAAA,cAAA,UAA0B,CAAC,WAAW;GACtC,kBAAA,GAAA,oBAAA,cAAA,WAA2B,OAAO,KAAK;GACvC,kBAAA,GAAA,oBAAA,cAAA,UAA0B,QAAQ;GAClC,kBAAA,GAAA,oBAAA,cAAA,UAA0B,QAAQ;GAClC,MAAM;GACN,UAAU,cAAc,IAAI;GAC5B,GAAG;GACH,OAAO;GACP,UAAA,GAAA,oBAAA,cAAA,YAAoB,MAAM,eAAe,SAAS,KAAK,CAAC;GACxD,YAAA,GAAA,oBAAA,cAAA,YAAsB,MAAM,YAAY,OACtCA,YAAAA,aAAa,IAAI;IACf,aAAa,SAAS,KAAK;IAC3B,aAAa,SAAS,KAAK;GAC7B,CAAC,CACH;EACF,IACA;GAAC;GAAU;GAAO;GAAa;GAAU;EAAQ,CAW3B;EACtB;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-color-selector.cjs","names":["useI18n","useControllableState","useEyeDropper","mergeProps","runKeyAction"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  convertColor,\n  cx,\n  dataAttr,\n  handlerAll,\n  hsvTo,\n  isString,\n  parseToHsv,\n  runKeyAction,\n  sameColor,\n  useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the color selector.\n   *\n   * @default fallbackValue\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the color selector will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The fallback value of the color selector.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color selector.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * If `true`, the color selector will be read only.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the color selector.\n   */\n  value?: string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when the value changes ends.\n   */\n  onChangeEnd?: (value: string) => void\n  /**\n   * The callback invoked when the value changes starts.\n   */\n  onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n  fallbackValue = \"#FFFFFF\",\n  defaultValue = fallbackValue,\n  disabled = false,\n  format: formatProp,\n  readOnly = false,\n  value: valueProp,\n  onChange: onChangeProp,\n  onChangeEnd: onChangeEndProp,\n  onChangeStart: onChangeStartProp,\n  ...rest\n}: UseColorSelectorProps) => {\n  const { t } = useI18n(\"colorSelector\")\n  const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n  const alpha = format.endsWith(\"a\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n  const [h, s, v, a] = hsva\n  const interactive = !(disabled || readOnly)\n  const swatchGroupLabelId = useId()\n  const activeRef = useRef(false)\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n  const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n  const onChange = useCallback(\n    (value: Hsva | string) => {\n      if (!interactive) return\n\n      if (isString(value)) {\n        setValue(convertColor(value, fallbackValue)(format))\n        setHsva(parseToHsv(value, fallbackValue))\n      } else {\n        setHsva(value)\n        setValue(hsvTo(value, fallbackValue)(format))\n      }\n    },\n    [fallbackValue, format, interactive, setValue],\n  )\n\n  const onChangeStart = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = true\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeStartProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeStartProp],\n  )\n\n  const onChangeEnd = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = false\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeEndProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeEndProp],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) onChange(result.sRGBHex)\n  }, [interactive, onChange, onOpenEyeDropper])\n\n  useUpdateEffect(() => {\n    if (activeRef.current) return\n\n    if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n  }, [valueProp])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n        },\n        rest,\n        props,\n      )(),\n    [disabled, readOnly, rest],\n  )\n\n  const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n    useCallback(\n      (props = {}) => ({\n        disabled,\n        readOnly,\n        value: [h, s, v],\n        ...props,\n        onChange: handlerAll(props.onChange, ([h, s, v]) =>\n          onChange([h, s, v, a]),\n        ),\n        onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n          onChangeEnd([h, s, v, a]),\n        ),\n        onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n          onChangeStart([h, s, v, a]),\n        ),\n      }),\n      [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n    )\n\n  const getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  > = useCallback(\n    (props = {}) => ({\n      disabled,\n      readOnly,\n      value: h,\n      ...props,\n      onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (h) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n  )\n\n  const getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  > = useCallback(\n    (props = {}) => ({\n      color,\n      disabled,\n      readOnly,\n      value: a,\n      ...props,\n      onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (a) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [\n      color,\n      disabled,\n      readOnly,\n      a,\n      onChange,\n      h,\n      s,\n      v,\n      onChangeEnd,\n      onChangeStart,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [\n      disabled,\n      interactive,\n      onEyeDropperClick,\n      readOnly,\n      supportedEyeDropper,\n      t,\n    ],\n  )\n\n  const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({\n      id: swatchGroupLabelId,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"listbox\",\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchItemProps: RequiredPropGetter<\n    \"div\",\n    { value: string },\n    HTMLProps & { color: string }\n  > = useCallback(\n    ({ value, ...props }) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-selected\": sameColor(value, color),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"option\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      color: value,\n      onClick: handlerAll(props.onClick, () => onChange(value)),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: () => onChange(value),\n          Space: () => onChange(value),\n        }),\n      ),\n    }),\n    [disabled, color, interactive, onChange, readOnly],\n  )\n\n  return {\n    alpha,\n    format,\n    setValue,\n    value,\n    getAlphaSliderProps,\n    getColorSwatchGroupLabelProps,\n    getColorSwatchGroupProps,\n    getColorSwatchItemProps,\n    getEyeDropperProps,\n    getHueSliderProps,\n    getRootProps,\n    getSaturationSliderProps,\n    onChange,\n  }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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"}