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

package/dist/esm/components/checkbox/use-checkbox.js

@@ -18,9 +18,10 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		notSupportReadOnly: true
 	});
 	const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby;
+	const resolvedChecked = !(0, utils_exports.isUndefined)(groupValue) && !(0, utils_exports.isUndefined)(value) ? groupValue.includes(value) : checkedProp;
 	const [checked, setChecked] = useControllableEventState({
 		defaultValue: defaultChecked,
-		value: !(0, utils_exports.isUndefined)(groupValue) && !(0, utils_exports.isUndefined)(value) ? groupValue.includes(value) : checkedProp,
+		value: resolvedChecked,
 		onChange: onChangeProp
 	});
 	const trulyDisabled = !checked && (0, utils_exports.isNumber)(max) && group && group.value.length >= max;

package/dist/esm/components/checkbox/use-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-checkbox.js","names":[],"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.js","names":["isUndefined","isNumber","dataAttr","cx","ariaAttr","handlerAll"],"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/esm/components/checkbox-card/checkbox-card-group.js

@@ -27,48 +27,50 @@ const CheckboxCardGroupRoot = component((props) => {
 			...rest
 		}, value ?? index));
 	}, [items, children]);
+	const context = useMemo(() => ({
+		colorScheme,
+		size,
+		variant,
+		checkedIcon,
+		disabled,
+		errorBorderColor,
+		focusBorderColor,
+		invalid,
+		justify,
+		readOnly,
+		shape,
+		withIndicator
+	}), [
+		colorScheme,
+		size,
+		checkedIcon,
+		variant,
+		disabled,
+		justify,
+		withIndicator,
+		errorBorderColor,
+		focusBorderColor,
+		invalid,
+		readOnly,
+		shape
+	]);
+	const groupContext = useMemo(() => ({
+		max,
+		value,
+		getInputProps,
+		getLabelProps,
+		onChange
+	}), [
+		max,
+		value,
+		getInputProps,
+		getLabelProps,
+		onChange
+	]);
 	return /* @__PURE__ */ jsx(CheckboxCardPropsContext, {
-		value: useMemo(() => ({
-			colorScheme,
-			size,
-			variant,
-			checkedIcon,
-			disabled,
-			errorBorderColor,
-			focusBorderColor,
-			invalid,
-			justify,
-			readOnly,
-			shape,
-			withIndicator
-		}), [
-			colorScheme,
-			size,
-			checkedIcon,
-			variant,
-			disabled,
-			justify,
-			withIndicator,
-			errorBorderColor,
-			focusBorderColor,
-			invalid,
-			readOnly,
-			shape
-		]),
+		value: context,
 		children: /* @__PURE__ */ jsx(CheckboxGroupContext, {
-			value: useMemo(() => ({
-				max,
-				value,
-				getInputProps,
-				getLabelProps,
-				onChange
-			}), [
-				max,
-				value,
-				getInputProps,
-				getLabelProps,
-				onChange
-			]),
+			value: groupContext,
 			children: /* @__PURE__ */ jsx(Group, {
 				...getRootProps(),
 				children: computedChildren

package/dist/esm/components/checkbox-card/checkbox-card-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-card-group.js","names":[],"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,wBAAwB,WAGlC,UAAU;CACX,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,CAAC,GACT,SACA,UACA,OACA,eACA,GAAG,UAEH,sBAAsB,OAAO,SAAS,EACxC,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;CACF,EACF,CAAC;CACD,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9D,iBAAiB,IAAI;CACvB,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,oBAAC,kBAAD;GAA8C;GAAO,GAAI;EAAO,GAAzC,SAAS,KAAgC,CACjE;CACH,GAAG,CAAC,OAAO,QAAQ,CAAC;CAoCpB,OACE,oBAAC,0BAAD;EAA0B,OApCZ,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAQuC;EACrC,UAAA,oBAAC,sBAAD;GAAsB,OAPL,eACZ;IAAE;IAAK;IAAO;IAAe;IAAe;GAAS,IAC5D;IAAC;IAAK;IAAO;IAAe;IAAe;GAAQ,CAKT;GACtC,UAAA,oBAAC,OAAD;IAAO,GAAI,aAAa;IAAI,UAAA;GAAwB,CAAA;EAChC,CAAA;CACE,CAAA;AAE9B,GAAG,OAAO,CAAC,CAAC"}
+{"version":3,"file":"checkbox-card-group.js","names":[],"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,wBAAwB,WAGlC,UAAU;CACX,MAAM,GAEJ,EACE,aACA,MACA,SACA,aACA,UACA,UACA,kBACA,kBACA,SACA,QAAQ,CAAC,GACT,SACA,UACA,OACA,eACA,GAAG,UAEH,sBAAsB,OAAO,SAAS,EACxC,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;CACF,EACF,CAAC;CACD,MAAM,EAAE,KAAK,OAAO,eAAe,eAAe,cAAc,aAC9D,iBAAiB,IAAI;CACvB,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,oBAAC,kBAAD;GAA8C;GAAO,GAAI;EAAO,GAAzC,SAAS,KAAgC,CACjE;CACH,GAAG,CAAC,OAAO,QAAQ,CAAC;CACpB,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CACA,MAAM,eAAe,eACZ;EAAE;EAAK;EAAO;EAAe;EAAe;CAAS,IAC5D;EAAC;EAAK;EAAO;EAAe;EAAe;CAAQ,CACrD;CAEA,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,OAAD;IAAO,GAAI,aAAa;IAAI,UAAA;GAAwB,CAAA;EAChC,CAAA;CACE,CAAA;AAE9B,GAAG,OAAO,CAAC,CAAC"}

package/dist/esm/components/circle-progress/circle-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"circle-progress.js","names":[],"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,iBACE,oBACF,mBACA,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,kBAC5C,YAAmB;EAAE;EAAK;EAAK;CAAM,CAAC;CAExC,OACE,qBAAC,OAAO,KAAR;EAAY,KAAK,SAAS,KAAK,EAAE,aAAa,QAAQ,CAAC;EAAG,GAAI;EAA9D,UAAA,CACE,qBAAC,sBAAD;GAAsB,GAAI,aAAa,WAAW;GAAlD,UAAA,CACE,oBAAC,qBAAD;IACE,QAAQ;IACR,GAAI,cAAc,UAAU;GAC7B,CAAA,GACD,oBAAC,qBAAD;IACE,QAAQ;IACR,GAAI,cAAc,UAAU;GAC7B,CAAA,CACmB;EAErB,CAAA,GAAA,QACS;;AAEhB,GACA,MACF,CAAC,EAAE,EAAE,SAAS,UAAU,WAAW,GAAG,YAAY;CAChD,eAAA,GAAA,cAAA,SAAA,CAAuB,QAAQ,IAAI,GAAG,SAAS,KAAK;CACpD,UAAU,QAAQ,SAAS,OAAO;CAClC,eAAe,QAAQ,WAAW,OAAO;CACzC,GAAG;AACL,EAAE;AAIF,MAAM,uBAAuB,YAC3B,OACA,QACF,CAAC,CAAC;AAIF,MAAM,sBAAsB,YAC1B,UACA,OACF,CAAC,CAAC;AAIF,MAAM,sBAAsB,YAC1B,UACA,OACF,CAAC,CAAC;AAIF,MAAa,sBAAsB,YAGjC,QAAQ,OAAO,CAAC,CAAC"}
+{"version":3,"file":"circle-progress.js","names":["isNumber"],"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,iBACE,oBACF,mBACA,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,kBAC5C,YAAmB;EAAE;EAAK;EAAK;CAAM,CAAC;CAExC,OACE,qBAAC,OAAO,KAAR;EAAY,KAAK,SAAS,KAAK,EAAE,aAAa,QAAQ,CAAC;EAAG,GAAI;EAA9D,UAAA,CACE,qBAAC,sBAAD;GAAsB,GAAI,aAAa,WAAW;GAAlD,UAAA,CACE,oBAAC,qBAAD;IACE,QAAQ;IACR,GAAI,cAAc,UAAU;GAC7B,CAAA,GACD,oBAAC,qBAAD;IACE,QAAQ;IACR,GAAI,cAAc,UAAU;GAC7B,CAAA,CACmB;EAErB,CAAA,GAAA,QACS;;AAEhB,GACA,MACF,CAAC,EAAE,EAAE,SAAS,UAAU,WAAW,GAAG,YAAY;CAChD,eAAA,GAAcA,cAAAA,SAAAA,CAAS,QAAQ,IAAI,GAAG,SAAS,KAAK;CACpD,UAAU,QAAQ,SAAS,OAAO;CAClC,eAAe,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/esm/components/client-only/client-only.js

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

package/dist/esm/components/client-only/client-only.js.map

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

package/dist/esm/components/collapse/collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.js","names":["motion"],"sources":["../../../../src/components/collapse/collapse.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n  HTMLMotionProps,\n  MotionTransitionVariants,\n  WithTransitionProps,\n} from \"../motion\"\nimport type { CollapseStyle } from \"./collapse.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createdDom, isNumeric } from \"../../utils\"\nimport { createTransition, motion } from \"../motion\"\nimport { collapseStyle } from \"./collapse.style\"\n\nconst variants: Variants = {\n  enter: ({\n    animationOpacity,\n    delay,\n    duration,\n    endingHeight: height,\n    enter,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: 1 } : {}),\n    height,\n    transition: createTransition.enter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({\n    animationOpacity,\n    delay,\n    duration,\n    exit,\n    startingHeight: height,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: isNumeric(height) ? 1 : 0 } : {}),\n    height,\n    transition: createTransition.exit(transition?.exit)(delay, duration),\n    transitionEnd: transitionEnd?.exit,\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport interface CollapseProps\n  extends WithTransitionProps<HTMLMotionProps>, ThemeProps<CollapseStyle> {\n  /**\n   * If `true`, the opacity of the content will be animated.\n   *\n   * @default true\n   */\n  animationOpacity?: boolean\n  /**\n   * The height you want the content in its expanded state.\n   *\n   * @default 'auto'\n   */\n  endingHeight?: number | string\n  /**\n   * The height you want the content in its collapsed state.\n   *\n   * @default 0\n   */\n  startingHeight?: number | string\n}\n\nconst {\n  PropsContext: CollapsePropsContext,\n  usePropsContext: useCollapsePropsContext,\n  withContext,\n} = createComponent<CollapseProps, CollapseStyle>(\"collapse\", collapseStyle)\n\nexport { CollapsePropsContext, useCollapsePropsContext }\n\n/**\n * `Collapse` is a component that allows you to expand or collapse an element for display.\n *\n * @see https://yamada-ui.com/docs/components/collapse\n */\nexport const Collapse = withContext<\"div\", CollapseProps>(\n  ({\n    style,\n    animationOpacity = true,\n    delay,\n    duration,\n    endingHeight = \"auto\",\n    open: openProp,\n    startingHeight = 0,\n    transition: transitionProp,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const [mounted, setMounted] = useState(false)\n    const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n    const open = unmountOnExit ? openProp : true\n\n    const transition = useMemo(() => {\n      if (!mounted) return { enter: { duration: 0 } }\n      else if (transitionProp) return transitionProp\n      else\n        return {\n          enter: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n          exit: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n        }\n    }, [mounted, duration, transitionProp])\n\n    const custom = useMemo(\n      () => ({\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      }),\n      [\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      ],\n    )\n\n    useEffect(() => {\n      if (createdDom()) setMounted(true)\n    }, [])\n\n    return (\n      <AnimatePresence custom={custom} initial={false}>\n        {open ? (\n          <motion.div\n            style={{ overflow: \"hidden\", ...style }}\n            animate={animate}\n            custom={custom}\n            exit=\"exit\"\n            initial={unmountOnExit ? \"exit\" : false}\n            variants={variants}\n            {...rest}\n          />\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,WAAqB;CACzB,QAAQ,EACN,kBACA,OACA,UACA,cAAc,QACd,OACA,YACA,kBACE,CAAC,OAAO;EACV,GAAI,mBAAmB,EAAE,SAAS,EAAE,IAAI,CAAC;EACzC;EACA,YAAY,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,cAAA,UAAA,CAAmB,MAAM,IAAI,IAAI,EAAE,IAAI,CAAC;EACjE;EACA,YAAY,iBAAiB,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAQ;EACnE,eAAe,eAAe;EAC9B,GAAG;CACL;AACF;AAwBA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,YAAY,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,cAAc,SAAS,KAAK;CAC5C,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,WAAW;CAExC,MAAM,aAAa,cAAc;EAC/B,IAAI,CAAC,SAAS,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE;OACzC,IAAI,gBAAgB,OAAO;OAE9B,OAAO;GACL,OAAO;IACL,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;IACA,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;GACF;GACA,MAAM;IACJ,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;IACA,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;GACF;EACF;CACJ,GAAG;EAAC;EAAS;EAAU;CAAc,CAAC;CAEtC,MAAM,SAAS,eACN;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,gBAAgB;EACd,KAAA,GAAA,cAAA,WAAA,CAAe,GAAG,WAAW,IAAI;CACnC,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,iBAAD;EAAyB;EAAQ,SAAS;EACvC,UAAA,OACC,oBAACA,SAAO,KAAR;GACE,OAAO;IAAE,UAAU;IAAU,GAAG;GAAM;GAC7B;GACD;GACR,MAAK;GACL,SAAS,gBAAgB,SAAS;GACxB;GACV,GAAI;EACL,CAAA,IACC;CACW,CAAA;AAErB,CACF,CAAC,CAAC"}
+{"version":3,"file":"collapse.js","names":["isNumeric","createdDom","motion"],"sources":["../../../../src/components/collapse/collapse.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n  HTMLMotionProps,\n  MotionTransitionVariants,\n  WithTransitionProps,\n} from \"../motion\"\nimport type { CollapseStyle } from \"./collapse.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createdDom, isNumeric } from \"../../utils\"\nimport { createTransition, motion } from \"../motion\"\nimport { collapseStyle } from \"./collapse.style\"\n\nconst variants: Variants = {\n  enter: ({\n    animationOpacity,\n    delay,\n    duration,\n    endingHeight: height,\n    enter,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: 1 } : {}),\n    height,\n    transition: createTransition.enter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({\n    animationOpacity,\n    delay,\n    duration,\n    exit,\n    startingHeight: height,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    ...(animationOpacity ? { opacity: isNumeric(height) ? 1 : 0 } : {}),\n    height,\n    transition: createTransition.exit(transition?.exit)(delay, duration),\n    transitionEnd: transitionEnd?.exit,\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport interface CollapseProps\n  extends WithTransitionProps<HTMLMotionProps>, ThemeProps<CollapseStyle> {\n  /**\n   * If `true`, the opacity of the content will be animated.\n   *\n   * @default true\n   */\n  animationOpacity?: boolean\n  /**\n   * The height you want the content in its expanded state.\n   *\n   * @default 'auto'\n   */\n  endingHeight?: number | string\n  /**\n   * The height you want the content in its collapsed state.\n   *\n   * @default 0\n   */\n  startingHeight?: number | string\n}\n\nconst {\n  PropsContext: CollapsePropsContext,\n  usePropsContext: useCollapsePropsContext,\n  withContext,\n} = createComponent<CollapseProps, CollapseStyle>(\"collapse\", collapseStyle)\n\nexport { CollapsePropsContext, useCollapsePropsContext }\n\n/**\n * `Collapse` is a component that allows you to expand or collapse an element for display.\n *\n * @see https://yamada-ui.com/docs/components/collapse\n */\nexport const Collapse = withContext<\"div\", CollapseProps>(\n  ({\n    style,\n    animationOpacity = true,\n    delay,\n    duration,\n    endingHeight = \"auto\",\n    open: openProp,\n    startingHeight = 0,\n    transition: transitionProp,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const [mounted, setMounted] = useState(false)\n    const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n    const open = unmountOnExit ? openProp : true\n\n    const transition = useMemo(() => {\n      if (!mounted) return { enter: { duration: 0 } }\n      else if (transitionProp) return transitionProp\n      else\n        return {\n          enter: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n          exit: {\n            height: {\n              duration: duration ?? 0.3,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n            opacity: {\n              duration: duration ?? 0.4,\n              ease: [0.25, 0.1, 0.25, 1],\n            },\n          },\n        }\n    }, [mounted, duration, transitionProp])\n\n    const custom = useMemo(\n      () => ({\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      }),\n      [\n        animationOpacity,\n        delay,\n        duration,\n        endingHeight,\n        startingHeight,\n        transition,\n        transitionEnd,\n      ],\n    )\n\n    useEffect(() => {\n      if (createdDom()) setMounted(true)\n    }, [])\n\n    return (\n      <AnimatePresence custom={custom} initial={false}>\n        {open ? (\n          <motion.div\n            style={{ overflow: \"hidden\", ...style }}\n            animate={animate}\n            custom={custom}\n            exit=\"exit\"\n            initial={unmountOnExit ? \"exit\" : false}\n            variants={variants}\n            {...rest}\n          />\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,WAAqB;CACzB,QAAQ,EACN,kBACA,OACA,UACA,cAAc,QACd,OACA,YACA,kBACE,CAAC,OAAO;EACV,GAAI,mBAAmB,EAAE,SAAS,EAAE,IAAI,CAAC;EACzC;EACA,YAAY,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,GAASA,cAAAA,UAAAA,CAAU,MAAM,IAAI,IAAI,EAAE,IAAI,CAAC;EACjE;EACA,YAAY,iBAAiB,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAQ;EACnE,eAAe,eAAe;EAC9B,GAAG;CACL;AACF;AAwBA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,YAAY,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,cAAc,SAAS,KAAK;CAC5C,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,WAAW;CAExC,MAAM,aAAa,cAAc;EAC/B,IAAI,CAAC,SAAS,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE;OACzC,IAAI,gBAAgB,OAAO;OAE9B,OAAO;GACL,OAAO;IACL,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;IACA,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;GACF;GACA,MAAM;IACJ,QAAQ;KACN,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;IACA,SAAS;KACP,UAAU,YAAY;KACtB,MAAM;MAAC;MAAM;MAAK;MAAM;KAAC;IAC3B;GACF;EACF;CACJ,GAAG;EAAC;EAAS;EAAU;CAAc,CAAC;CAEtC,MAAM,SAAS,eACN;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,gBAAgB;EACd,KAAA,GAAIC,cAAAA,WAAAA,CAAW,GAAG,WAAW,IAAI;CACnC,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,iBAAD;EAAyB;EAAQ,SAAS;EACvC,UAAA,OACC,oBAACC,SAAO,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/esm/components/color-picker/color-picker.js

@@ -98,7 +98,8 @@ const ColorPicker = withProvider((props) => {
 		})
 	});
 }, "root", { transferProps: ["size"] })((props) => {
-	return mergeProps(useInputPropsContext(), props)();
+	const context = useInputPropsContext();
+	return mergeProps(context, props)();
 });
 const ColorPickerField = withContext("div", "field")({ "data-group-propagate": "" }, (props) => {
 	const { getInputProps, inputProps } = useComponentContext();

package/dist/esm/components/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","names":["Popover.Root","InputGroup.Root","InputGroup.Element","Popover.Trigger","ColorSelector.Root","Popover.Content"],"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.js","names":["Popover.Root","InputGroup.Root","InputGroup.Element","Popover.Trigger","cast","ColorSelector.Root","Popover.Content"],"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/esm/components/color-picker/use-color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-color-picker.js","names":[],"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    [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)) onClose()\n      else if (runIfFn(openOnChange, ev)) onOpen()\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.js","names":["calcFormat","contains","convertColor","runIfFn","focusTransfer","handlerAll","cx","ariaAttr"],"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    [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)) onClose()\n      else if (runIfFn(openOnChange, ev)) onOpen()\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/esm/components/color-selector/color-selector.js

@@ -124,7 +124,8 @@ const ColorSelectorColorSwatchGroupLabel = withContext("span", "colorSwatchGroup
 });
 const ColorSelectorColorSwatchGroup = withContext("div", "colorSwatchGroup")(void 0, ({ children, ...rest }) => {
 	const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } = useComponentContext();
-	return getColorSwatchGroupProps(mergeProps(colorSwatchGroupProps, rest, { children: children ?? colorSwatchGroupProps?.children ?? colorSwatches?.map((value, index) => /* @__PURE__ */ jsx(ColorSelectorColorSwatchItem, { value }, index)) })());
+	const computedChildren = children ?? colorSwatchGroupProps?.children ?? colorSwatches?.map((value, index) => /* @__PURE__ */ jsx(ColorSelectorColorSwatchItem, { value }, index));
+	return getColorSwatchGroupProps(mergeProps(colorSwatchGroupProps, rest, { children: computedChildren })());
 });
 const ColorSelectorColorSwatchItem = withContext(ColorSwatch, "colorSwatchItem")(void 0, (props) => {
 	const { colorSwatchItemProps, getColorSwatchItemProps } = useComponentContext();

package/dist/esm/components/color-selector/color-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-selector.js","names":["SaturationSlider.Root","HueSlider.Root","AlphaSlider.Root"],"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.js","names":["SaturationSlider.Root","HueSlider.Root","AlphaSlider.Root"],"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/esm/components/color-selector/use-color-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-color-selector.js","names":[],"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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"}
+{"version":3,"file":"use-color-selector.js","names":["calcFormat","parseToHsv","hsvTo","isString","convertColor","dataAttr","handlerAll","ariaAttr","cx","sameColor"],"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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"}

package/dist/esm/components/color-swatch/color-swatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-swatch.js","names":[],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n  bgImage: [\n    \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n  ].join(\", \"),\n  bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n  bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n  if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n  return layers\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  layers?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nconst {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    layers = defaultLayers(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {layers.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,qBAAC,OAAO,KAAR;EACE,eAAA,GAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;EAJN,UAAA,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,oBAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}
+{"version":3,"file":"color-swatch.js","names":["isString"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n  bgImage: [\n    \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n  ].join(\", \"),\n  bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n  bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n  if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n  return layers\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  layers?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nconst {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    layers = defaultLayers(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {layers.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,qBAAC,OAAO,KAAR;EACE,eAAA,GAAYA,cAAAA,SAAAA,CAAS,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;EAJN,UAAA,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,oBAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}