@yamada-ui/react 2.2.2-dev-20260525160901 → 2.2.2-dev-20260609113509

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":";;;;;;;;;;;;;;;;;;AAgHA,MAAM,EACJ,kBACA,cAAc,yBACd,qBACA,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,UAAU;CACT,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,MACA,kBAAkB,eAClB,eACA,yBACA,uBACA,UACA,kBACA,kBACA,kBAAkB,MAClB,iBAAiB,MACjB,kBACA,4BACA,uBACA,sBACA,kBACA,cACA,cACA,iBACA,iBACA,YACA,gBACA,YACA,WACA,uBACA,eACA,mBACA,GAAG,UAEH,kBAAkB,KAAK;CAC3B,MAAM,oBAAoB,qBAAqB,IAAI;CACnD,MAAM,EACJ,OACA,iBACA,oBACA,eACA,eACA,cACA,kBACA,iBACE,eAAe;EAAE,GAAG;EAAM,GAAG;CAAkB,CAAC;CACpD,MAAM,qBAAqB,eAClB;EACL;EACA;EACA,GAAG;CACL,IACA;EAAC;EAAiB;EAAU;CAAY,CAC1C;CACA,MAAM,WAAW,eAAe;EAAE;EAAkB;CAAiB,CAAC;CAMtE,OACE,oBAAC,kBAAD;EAAkB,OANK,eAChB;GAAE;GAAO;GAAoB;GAAe;EAAW,IAC9D;GAAC;GAAoB;GAAe;GAAY;EAAK,CAIb;YACtC,qBAACA,aAAD;GAAc,GAAI;aAAlB,CACE,qBAACC,gBAAD;IACE,GAAI,WACF;KAAE;KAAW;KAAK;IAAY,GAC9B,aAAa,cAAc,GAC3B,SACF,EAAE;cALJ;KAOG,kBACC,oBAACC,cAAD;MACE,GAAI,WAAW,cAAc,iBAAiB,EAAE;gBAEhD,oBAAC,wBAAD,EAAwB,GAAI,iBAAmB,CAAA;KAC7B,CAAA,IAClB;KAEJ,oBAACC,gBAAD,EAAA,UACE,oBAAC,kBAAD,EACE,GAAI,cAAc;MAAE,GAAG;MAAU,GAAG;KAAW,CAAC,EACjD,CAAA,EACc,CAAA;KAEhB,iBACC,oBAACD,cAAD;MACE,GAAI,WACF,EAAE,WAAW,KAAK,GAClB,cACA,eACF,EAAE;gBAEF,oBAAC,uBAAD,EACE,GAAI,mBAAmB,eAAe,EACvC,CAAA;KACiB,CAAA,IAClB;IACW;OAEjB,oBAAC,oBAAD;IACE,IAAA,GAAA,cAAA,MACE,iBAAA,GAAA,cAAA,MAAgC,YAAY,CAAC,CAC/C;cAEA,oBAACE,mBAAD;KACQ;KACN,GAAI,iBAAiB;MACnB;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,GAAG;KACL,CAAC;IACF,CAAA;GACiB,CAAA,CACR;;CACE,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,MAAM,EAAE,CAC5B,GAAG,UAAU;CAGX,OAAO,WAFS,qBAEQ,GAAG,KAAK,EAAE;AACpC,CAAC;AAID,MAAM,mBAAmB,YACvB,OACA,OACF,EAAE,EAAE,wBAAwB,GAAG,IAAI,UAAU;CAC3C,MAAM,EAAE,eAAe,eAAe,oBAAoB;CAE1D,OAAO;EACL,UAAU,oBAAC,kBAAD,EAAkB,GAAI,cAAc,UAAU,EAAI,CAAA;EAC5D,GAAG;CACL;AACF,CAAC;AAID,MAAM,mBAAmB,YACvB,SACA,OACF,EAAE;AAIF,MAAM,yBAAyB,YAC7B,aACA,aACF,EAAE,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,UAAU,oBAAoB;CAEtC,OAAO;EAAE,SAAS;EAAU,OAAO;EAAO,GAAG;CAAM;AACrD,CAAC;AAMD,MAAM,wBAAwB,YAC5B,OACA,YACF,EAAE,KAAA,IAAY,EAAE,UAAU,MAAM,GAAG,WAAW;CAC5C,MAAM,EAAE,uBAAuB,oBAAoB;CAEnD,OAAO,mBAAmB;EACxB,UAAU,QAAQ,YAAY,oBAAC,aAAD,CAAc,CAAA;EAC5C,GAAG;CACL,CAAC;AACH,CAAC;AAID,MAAM,qBAAqB,YACzBC,gBACA,SACF,EAAE"}
+{"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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"}

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    },\n    [format, formatInput, pattern, setValue],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!allowInput) return\n\n      onInputChangeProp?.(ev)\n\n      if (runIfFn(closeOnChange, ev)) {\n        onClose()\n      } else if (runIfFn(openOnChange, ev)) {\n        onOpen()\n      }\n\n      let inputValue = ev.target.value\n\n      if (formatInput) inputValue = formatInput(inputValue)\n\n      if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n      setValue(inputValue)\n    },\n    [\n      allowInput,\n      closeOnChange,\n      formatInput,\n      onClose,\n      onInputChangeProp,\n      onOpen,\n      openOnChange,\n      pattern,\n      setValue,\n    ],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) setValue(result.sRGBHex)\n  }, [interactive, onOpenEyeDropper, setValue])\n\n  useEffect(() => {\n    if (!open) return\n\n    return focusTransfer(\n      contentRef.current,\n      allowInput ? inputRef.current : fieldRef.current,\n    )\n  }, [allowInput, open])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getTriggerProps({\n        ref: mergeRefs(ref, fieldRef),\n        \"aria-haspopup\": \"dialog\",\n        tabIndex: !allowInput ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClick),\n        onFocus: handlerAll(props.onFocus, onFieldFocus),\n        onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n      }),\n\n    [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id,\n      ref: mergeRefs(props.ref, ref, inputRef),\n      name,\n      style: {\n        ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n        ...props.style,\n      },\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n      autoComplete: \"off\",\n      disabled,\n      placeholder,\n      readOnly,\n      required,\n      tabIndex: allowInput ? 0 : -1,\n      value,\n      ...dataProps,\n      ...props,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onFocus: handlerAll(props.onFocus, onInputFocus),\n      onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n    }),\n    [\n      allowInput,\n      ariaLabel,\n      ariaLabelledbyProp,\n      dataProps,\n      disabled,\n      id,\n      name,\n      onBlur,\n      onInputChange,\n      onInputFocus,\n      onMouseDown,\n      placeholder,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getComboboxContentProps({\n        ref: mergeRefs(ref, contentRef),\n        role: \"dialog\",\n        ...props,\n      }),\n    [getComboboxContentProps],\n  )\n\n  const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n    (props = {}) => ({\n      disabled,\n      fallbackValue,\n      format,\n      readOnly,\n      value,\n      ...props,\n      onChange: handlerAll(props.onChange, setValue),\n    }),\n    [disabled, fallbackValue, format, readOnly, value, setValue],\n  )\n\n  return {\n    alpha,\n    format,\n    interactive,\n    open,\n    setValue,\n    value,\n    getContentProps,\n    getEyeDropperProps,\n    getFieldProps,\n    getInputProps,\n    getRootProps,\n    getSelectorProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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"}
+{"version":3,"file":"use-color-picker.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    },\n    [format, formatInput, pattern, setValue],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!allowInput) return\n\n      onInputChangeProp?.(ev)\n\n      if (runIfFn(closeOnChange, ev)) {\n        onClose()\n      } else if (runIfFn(openOnChange, ev)) {\n        onOpen()\n      }\n\n      let inputValue = ev.target.value\n\n      if (formatInput) inputValue = formatInput(inputValue)\n\n      if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n      setValue(inputValue)\n    },\n    [\n      allowInput,\n      closeOnChange,\n      formatInput,\n      onClose,\n      onInputChangeProp,\n      onOpen,\n      openOnChange,\n      pattern,\n      setValue,\n    ],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) setValue(result.sRGBHex)\n  }, [interactive, onOpenEyeDropper, setValue])\n\n  useEffect(() => {\n    if (!open) return\n\n    return focusTransfer(\n      contentRef.current,\n      allowInput ? inputRef.current : fieldRef.current,\n    )\n  }, [allowInput, open])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getTriggerProps({\n        ref: mergeRefs(ref, fieldRef),\n        \"aria-haspopup\": \"dialog\",\n        tabIndex: !allowInput ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClick),\n        onFocus: handlerAll(props.onFocus, onFieldFocus),\n        onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n      }),\n\n    [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id,\n      ref: mergeRefs(props.ref, ref, inputRef),\n      name,\n      style: {\n        ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n        ...props.style,\n      },\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n      autoComplete: \"off\",\n      disabled,\n      placeholder,\n      readOnly,\n      required,\n      tabIndex: allowInput ? 0 : -1,\n      value,\n      ...dataProps,\n      ...props,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onFocus: handlerAll(props.onFocus, onInputFocus),\n      onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n    }),\n    [\n      allowInput,\n      ariaLabel,\n      ariaLabelledbyProp,\n      dataProps,\n      disabled,\n      id,\n      name,\n      onBlur,\n      onInputChange,\n      onInputFocus,\n      onMouseDown,\n      placeholder,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getComboboxContentProps({\n        ref: mergeRefs(ref, contentRef),\n        role: \"dialog\",\n        ...props,\n      }),\n    [getComboboxContentProps],\n  )\n\n  const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n    (props = {}) => ({\n      disabled,\n      fallbackValue,\n      format,\n      readOnly,\n      value,\n      ...props,\n      onChange: handlerAll(props.onChange, setValue),\n    }),\n    [disabled, fallbackValue, format, readOnly, value, setValue],\n  )\n\n  return {\n    alpha,\n    format,\n    interactive,\n    open,\n    setValue,\n    value,\n    getContentProps,\n    getEyeDropperProps,\n    getFieldProps,\n    getInputProps,\n    getRootProps,\n    getSelectorProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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"}

package/dist/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":[],"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-gradient(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear-gradient(-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,EAAE,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,UAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;YAJN,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,oBAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,EAAE;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,EAAE"}
+{"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-gradient(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear-gradient(-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;YAJN,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":[],"sources":["../../../../src/components/container/container.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ContainerStyle } from \"./container.style\"\nimport { createSlotComponent } from \"../../core\"\nimport { containerStyle } from \"./container.style\"\n\nexport interface ContainerRootProps\n  extends HTMLStyledProps<\"section\">, ThemeProps<ContainerStyle> {}\n\nconst {\n  PropsContext: ContainerPropsContext,\n  usePropsContext: useContainerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ContainerRootProps, ContainerStyle>(\n  \"container\",\n  containerStyle,\n)\n\nexport { ContainerPropsContext, useContainerPropsContext }\n\n/**\n * `Container` is a component used as a general division element. By default, it renders the `section` element.\n *\n * @see https://yamada-ui.com/docs/components/container\n */\nexport const ContainerRoot = withProvider(\"section\", \"root\")()\n\nexport interface ContainerHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ContainerHeader = withContext(\"header\", \"header\")()\n\nexport interface ContainerBodyProps extends HTMLStyledProps {}\n\nexport const ContainerBody = withContext(\"div\", \"body\")()\n\nexport interface ContainerFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ContainerFooter = withContext(\"footer\", \"footer\")()\n"],"mappings":";;;;AAUA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,aACA,cACF;;;;;;AASA,MAAa,gBAAgB,aAAa,WAAW,MAAM,EAAE;AAI7D,MAAa,kBAAkB,YAAY,UAAU,QAAQ,EAAE;AAI/D,MAAa,gBAAgB,YAAY,OAAO,MAAM,EAAE;AAIxD,MAAa,kBAAkB,YAAY,UAAU,QAAQ,EAAE"}
+{"version":3,"file":"container.js","names":[],"sources":["../../../../src/components/container/container.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ContainerStyle } from \"./container.style\"\nimport { createSlotComponent } from \"../../core\"\nimport { containerStyle } from \"./container.style\"\n\nexport interface ContainerRootProps\n  extends HTMLStyledProps<\"section\">, ThemeProps<ContainerStyle> {}\n\nconst {\n  PropsContext: ContainerPropsContext,\n  usePropsContext: useContainerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ContainerRootProps, ContainerStyle>(\n  \"container\",\n  containerStyle,\n)\n\nexport { ContainerPropsContext, useContainerPropsContext }\n\n/**\n * `Container` is a component used as a general division element. By default, it renders the `section` element.\n *\n * @see https://yamada-ui.com/docs/components/container\n */\nexport const ContainerRoot = withProvider(\"section\", \"root\")()\n\nexport interface ContainerHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ContainerHeader = withContext(\"header\", \"header\")()\n\nexport interface ContainerBodyProps extends HTMLStyledProps {}\n\nexport const ContainerBody = withContext(\"div\", \"body\")()\n\nexport interface ContainerFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ContainerFooter = withContext(\"footer\", \"footer\")()\n"],"mappings":";;;;AAUA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,aACA,cACF;;;;;;AASA,MAAa,gBAAgB,aAAa,WAAW,MAAM,CAAC,CAAC;AAI7D,MAAa,kBAAkB,YAAY,UAAU,QAAQ,CAAC,CAAC;AAI/D,MAAa,gBAAgB,YAAY,OAAO,MAAM,CAAC,CAAC;AAIxD,MAAa,kBAAkB,YAAY,UAAU,QAAQ,CAAC,CAAC"}

package/dist/esm/components/data-list/data-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-list.js","names":[],"sources":["../../../../src/components/data-list/data-list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { DataListStyle } from \"./data-list.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n  getValidChildren,\n  isArray,\n  isEmpty,\n  omitChildren,\n  pickChildren,\n} from \"../../utils\"\nimport { dataListStyle } from \"./data-list.style\"\n\nexport interface DataListItem extends DataListItemProps {}\n\nexport interface DataListRootProps\n  extends HTMLStyledProps<\"dl\">, ThemeProps<DataListStyle> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: DataListItem[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\ninterface ComponentContext extends Pick<\n  DataListRootProps,\n  \"descriptionProps\" | \"termProps\"\n> {}\n\nconst {\n  ComponentContext,\n  PropsContext: DataListPropsContext,\n  useComponentContext,\n  usePropsContext: useDataListPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DataListRootProps, DataListStyle, ComponentContext>(\n  \"data-list\",\n  dataListStyle,\n)\n\nexport { DataListPropsContext, useDataListPropsContext }\n\n/**\n * `DataList` is used to display a list of data items.\n *\n * @see https://yamada-ui.com/docs/components/data-list\n */\nexport const DataListRoot = withProvider<\"dl\", DataListRootProps>(\n  ({ style, children, items = [], descriptionProps, termProps, ...rest }) => {\n    const col = useMemo(() => {\n      let col = 0\n\n      if (children) {\n        const validChildren = getValidChildren(children)\n        const dataListItems = pickChildren(validChildren, DataListItem)\n\n        dataListItems.forEach(({ props }) => {\n          const validChildren = getValidChildren(props.children)\n          const pickedChildren = pickChildren(\n            validChildren,\n            DataListTerm,\n            DataListDescription,\n          )\n\n          col = Math.max(col, pickedChildren.length)\n        })\n      } else {\n        items.forEach(({ description, term }) => {\n          const termCount = !term ? 0 : isArray(term) ? term.length : 1\n          const descriptionCount = !description\n            ? 0\n            : isArray(description)\n              ? description.length\n              : 1\n\n          col = Math.max(col, termCount + descriptionCount)\n        })\n      }\n\n      return col\n    }, [children, items])\n    const computedChildren = useMemo(\n      () =>\n        items.map((props, index) => <DataListItem key={index} {...props} />),\n      [items],\n    )\n    const context = useMemo(\n      () => ({\n        descriptionProps,\n        termProps,\n      }),\n      [descriptionProps, termProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.dl style={{ \"--col\": col, ...style }} {...rest}>\n          {children ?? computedChildren}\n        </styled.dl>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface DataListItemProps extends HTMLStyledProps {\n  /**\n   * The data list description to use.\n   */\n  description?: ReactNode | ReactNode[]\n  /**\n   * The data list term to use.\n   */\n  term?: ReactNode | ReactNode[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\nexport const DataListItem = withContext<\"div\", DataListItemProps>(\n  ({\n    children,\n    description,\n    term,\n    descriptionProps: customDescriptionProps,\n    termProps: customTermProps,\n    ...rest\n  }) => {\n    const { descriptionProps, termProps } = useComponentContext()\n\n    const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (isEmpty(validChildren)) return [children]\n\n      const customTerms = pickChildren(validChildren, DataListTerm)\n      const customDescriptions = pickChildren(\n        validChildren,\n        DataListDescription,\n      )\n      const omittedChildren = omitChildren(\n        validChildren,\n        DataListTerm,\n        DataListDescription,\n      )\n\n      return [omittedChildren, customTerms, customDescriptions] as const\n    }, [children])\n\n    return (\n      <styled.div {...rest}>\n        {!isEmpty(customTerms) ? (\n          customTerms\n        ) : isArray(term) ? (\n          term.map((item, index) => (\n            <DataListTerm\n              key={index}\n              {...mergeProps(termProps, customTermProps)()}\n            >\n              {item}\n            </DataListTerm>\n          ))\n        ) : (\n          <DataListTerm {...mergeProps(termProps, customTermProps)()}>\n            {term}\n          </DataListTerm>\n        )}\n\n        {!isEmpty(customDescriptions) ? (\n          customDescriptions\n        ) : isArray(description) ? (\n          description.map((item, index) => (\n            <DataListDescription\n              key={index}\n              {...mergeProps(descriptionProps, customDescriptionProps)()}\n            >\n              {item}\n            </DataListDescription>\n          ))\n        ) : (\n          <DataListDescription\n            {...mergeProps(descriptionProps, customDescriptionProps)()}\n          >\n            {description}\n          </DataListDescription>\n        )}\n\n        {omittedChildren}\n      </styled.div>\n    )\n  },\n  \"item\",\n)()\n\nexport interface DataListTermProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const DataListTerm = withContext<\"dt\", DataListTermProps>(\"dt\", \"term\")()\n\nexport interface DataListDescriptionProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const DataListDescription = withContext<\"dd\", DataListDescriptionProps>(\n  \"dd\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;AAuCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACE,oBACF,aACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,OAAO,UAAU,QAAQ,CAAC,GAAG,kBAAkB,WAAW,GAAG,WAAW;CACzE,MAAM,MAAM,cAAc;EACxB,IAAI,MAAM;EAEV,IAAI,UAIF,aAHsB,iBAAiB,QACQ,GAAG,YAEtC,EAAE,SAAS,EAAE,YAAY;GAEnC,MAAM,iBAAiB,aADD,iBAAiB,MAAM,QAE/B,GACZ,cACA,mBACF;GAEA,MAAM,KAAK,IAAI,KAAK,eAAe,MAAM;EAC3C,CAAC;OAED,MAAM,SAAS,EAAE,aAAa,WAAW;GACvC,MAAM,YAAY,CAAC,OAAO,KAAA,GAAA,cAAA,SAAY,IAAI,IAAI,KAAK,SAAS;GAC5D,MAAM,mBAAmB,CAAC,cACtB,KAAA,GAAA,cAAA,SACQ,WAAW,IACjB,YAAY,SACZ;GAEN,MAAM,KAAK,IAAI,KAAK,YAAY,gBAAgB;EAClD,CAAC;EAGH,OAAO;CACT,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,mBAAmB,cAErB,MAAM,KAAK,OAAO,UAAU,oBAAC,cAAD,EAA0B,GAAI,MAAQ,GAAnB,KAAmB,CAAC,GACrE,CAAC,KAAK,CACR;CASA,OACE,oBAAC,kBAAD;EAAkB,OATJ,eACP;GACL;GACA;EACF,IACA,CAAC,kBAAkB,SAAS,CAIG;YAC7B,oBAAC,OAAO,IAAR;GAAW,OAAO;IAAE,SAAS;IAAK,GAAG;GAAM;GAAG,GAAI;aAC/C,YAAY;EACJ,CAAA;CACK,CAAA;AAEtB,GACA,MACF,EAAE;AAqBF,MAAa,eAAe,aACzB,EACC,UACA,aACA,MACA,kBAAkB,wBAClB,WAAW,iBACX,GAAG,WACC;CACJ,MAAM,EAAE,kBAAkB,cAAc,oBAAoB;CAE5D,MAAM,CAAC,iBAAiB,aAAa,sBAAsB,cAAc;EACvE,MAAM,gBAAgB,iBAAiB,QAAQ;EAE/C,KAAA,GAAA,cAAA,SAAY,aAAa,GAAG,OAAO,CAAC,QAAQ;EAE5C,MAAM,cAAc,aAAa,eAAe,YAAY;EAC5D,MAAM,qBAAqB,aACzB,eACA,mBACF;EAOA,OAAO;GANiB,aACtB,eACA,cACA,mBAGoB;GAAG;GAAa;EAAkB;CAC1D,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI;YAAhB;GACG,EAAA,GAAA,cAAA,SAAS,WAAW,IACnB,eAAA,GAAA,cAAA,SACU,IAAI,IACd,KAAK,KAAK,MAAM,UACd,oBAAC,cAAD;IAEE,GAAI,WAAW,WAAW,eAAe,EAAE;cAE1C;GACW,GAJP,KAIO,CACf,IAED,oBAAC,cAAD;IAAc,GAAI,WAAW,WAAW,eAAe,EAAE;cACtD;GACW,CAAA;GAGf,EAAA,GAAA,cAAA,SAAS,kBAAkB,IAC1B,sBAAA,GAAA,cAAA,SACU,WAAW,IACrB,YAAY,KAAK,MAAM,UACrB,oBAAC,qBAAD;IAEE,GAAI,WAAW,kBAAkB,sBAAsB,EAAE;cAExD;GACkB,GAJd,KAIc,CACtB,IAED,oBAAC,qBAAD;IACE,GAAI,WAAW,kBAAkB,sBAAsB,EAAE;cAExD;GACkB,CAAA;GAGtB;EACS;;AAEhB,GACA,MACF,EAAE;AAIF,MAAa,eAAe,YAAqC,MAAM,MAAM,EAAE;AAI/E,MAAa,sBAAsB,YACjC,MACA,aACF,EAAE"}
+{"version":3,"file":"data-list.js","names":[],"sources":["../../../../src/components/data-list/data-list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { DataListStyle } from \"./data-list.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n  getValidChildren,\n  isArray,\n  isEmpty,\n  omitChildren,\n  pickChildren,\n} from \"../../utils\"\nimport { dataListStyle } from \"./data-list.style\"\n\nexport interface DataListItem extends DataListItemProps {}\n\nexport interface DataListRootProps\n  extends HTMLStyledProps<\"dl\">, ThemeProps<DataListStyle> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: DataListItem[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\ninterface ComponentContext extends Pick<\n  DataListRootProps,\n  \"descriptionProps\" | \"termProps\"\n> {}\n\nconst {\n  ComponentContext,\n  PropsContext: DataListPropsContext,\n  useComponentContext,\n  usePropsContext: useDataListPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DataListRootProps, DataListStyle, ComponentContext>(\n  \"data-list\",\n  dataListStyle,\n)\n\nexport { DataListPropsContext, useDataListPropsContext }\n\n/**\n * `DataList` is used to display a list of data items.\n *\n * @see https://yamada-ui.com/docs/components/data-list\n */\nexport const DataListRoot = withProvider<\"dl\", DataListRootProps>(\n  ({ style, children, items = [], descriptionProps, termProps, ...rest }) => {\n    const col = useMemo(() => {\n      let col = 0\n\n      if (children) {\n        const validChildren = getValidChildren(children)\n        const dataListItems = pickChildren(validChildren, DataListItem)\n\n        dataListItems.forEach(({ props }) => {\n          const validChildren = getValidChildren(props.children)\n          const pickedChildren = pickChildren(\n            validChildren,\n            DataListTerm,\n            DataListDescription,\n          )\n\n          col = Math.max(col, pickedChildren.length)\n        })\n      } else {\n        items.forEach(({ description, term }) => {\n          const termCount = !term ? 0 : isArray(term) ? term.length : 1\n          const descriptionCount = !description\n            ? 0\n            : isArray(description)\n              ? description.length\n              : 1\n\n          col = Math.max(col, termCount + descriptionCount)\n        })\n      }\n\n      return col\n    }, [children, items])\n    const computedChildren = useMemo(\n      () =>\n        items.map((props, index) => <DataListItem key={index} {...props} />),\n      [items],\n    )\n    const context = useMemo(\n      () => ({\n        descriptionProps,\n        termProps,\n      }),\n      [descriptionProps, termProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.dl style={{ \"--col\": col, ...style }} {...rest}>\n          {children ?? computedChildren}\n        </styled.dl>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface DataListItemProps extends HTMLStyledProps {\n  /**\n   * The data list description to use.\n   */\n  description?: ReactNode | ReactNode[]\n  /**\n   * The data list term to use.\n   */\n  term?: ReactNode | ReactNode[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\nexport const DataListItem = withContext<\"div\", DataListItemProps>(\n  ({\n    children,\n    description,\n    term,\n    descriptionProps: customDescriptionProps,\n    termProps: customTermProps,\n    ...rest\n  }) => {\n    const { descriptionProps, termProps } = useComponentContext()\n\n    const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (isEmpty(validChildren)) return [children]\n\n      const customTerms = pickChildren(validChildren, DataListTerm)\n      const customDescriptions = pickChildren(\n        validChildren,\n        DataListDescription,\n      )\n      const omittedChildren = omitChildren(\n        validChildren,\n        DataListTerm,\n        DataListDescription,\n      )\n\n      return [omittedChildren, customTerms, customDescriptions] as const\n    }, [children])\n\n    return (\n      <styled.div {...rest}>\n        {!isEmpty(customTerms) ? (\n          customTerms\n        ) : isArray(term) ? (\n          term.map((item, index) => (\n            <DataListTerm\n              key={index}\n              {...mergeProps(termProps, customTermProps)()}\n            >\n              {item}\n            </DataListTerm>\n          ))\n        ) : (\n          <DataListTerm {...mergeProps(termProps, customTermProps)()}>\n            {term}\n          </DataListTerm>\n        )}\n\n        {!isEmpty(customDescriptions) ? (\n          customDescriptions\n        ) : isArray(description) ? (\n          description.map((item, index) => (\n            <DataListDescription\n              key={index}\n              {...mergeProps(descriptionProps, customDescriptionProps)()}\n            >\n              {item}\n            </DataListDescription>\n          ))\n        ) : (\n          <DataListDescription\n            {...mergeProps(descriptionProps, customDescriptionProps)()}\n          >\n            {description}\n          </DataListDescription>\n        )}\n\n        {omittedChildren}\n      </styled.div>\n    )\n  },\n  \"item\",\n)()\n\nexport interface DataListTermProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const DataListTerm = withContext<\"dt\", DataListTermProps>(\"dt\", \"term\")()\n\nexport interface DataListDescriptionProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const DataListDescription = withContext<\"dd\", DataListDescriptionProps>(\n  \"dd\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;AAuCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACE,oBACF,aACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,OAAO,UAAU,QAAQ,CAAC,GAAG,kBAAkB,WAAW,GAAG,WAAW;CACzE,MAAM,MAAM,cAAc;EACxB,IAAI,MAAM;EAEV,IAAI,UAIF,aAHsB,iBAAiB,QACQ,GAAG,YAEtC,CAAC,CAAC,SAAS,EAAE,YAAY;GAEnC,MAAM,iBAAiB,aADD,iBAAiB,MAAM,QAE/B,GACZ,cACA,mBACF;GAEA,MAAM,KAAK,IAAI,KAAK,eAAe,MAAM;EAC3C,CAAC;OAED,MAAM,SAAS,EAAE,aAAa,WAAW;GACvC,MAAM,YAAY,CAAC,OAAO,KAAA,GAAA,cAAA,QAAA,CAAY,IAAI,IAAI,KAAK,SAAS;GAC5D,MAAM,mBAAmB,CAAC,cACtB,KAAA,GAAA,cAAA,QAAA,CACQ,WAAW,IACjB,YAAY,SACZ;GAEN,MAAM,KAAK,IAAI,KAAK,YAAY,gBAAgB;EAClD,CAAC;EAGH,OAAO;CACT,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,mBAAmB,cAErB,MAAM,KAAK,OAAO,UAAU,oBAAC,cAAD,EAA0B,GAAI,MAAQ,GAAnB,KAAmB,CAAC,GACrE,CAAC,KAAK,CACR;CASA,OACE,oBAAC,kBAAD;EAAkB,OATJ,eACP;GACL;GACA;EACF,IACA,CAAC,kBAAkB,SAAS,CAIG;YAC7B,oBAAC,OAAO,IAAR;GAAW,OAAO;IAAE,SAAS;IAAK,GAAG;GAAM;GAAG,GAAI;aAC/C,YAAY;EACJ,CAAA;CACK,CAAA;AAEtB,GACA,MACF,CAAC,CAAC;AAqBF,MAAa,eAAe,aACzB,EACC,UACA,aACA,MACA,kBAAkB,wBAClB,WAAW,iBACX,GAAG,WACC;CACJ,MAAM,EAAE,kBAAkB,cAAc,oBAAoB;CAE5D,MAAM,CAAC,iBAAiB,aAAa,sBAAsB,cAAc;EACvE,MAAM,gBAAgB,iBAAiB,QAAQ;EAE/C,KAAA,GAAA,cAAA,QAAA,CAAY,aAAa,GAAG,OAAO,CAAC,QAAQ;EAE5C,MAAM,cAAc,aAAa,eAAe,YAAY;EAC5D,MAAM,qBAAqB,aACzB,eACA,mBACF;EAOA,OAAO;GANiB,aACtB,eACA,cACA,mBAGoB;GAAG;GAAa;EAAkB;CAC1D,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI;YAAhB;GACG,EAAA,GAAA,cAAA,QAAA,CAAS,WAAW,IACnB,eAAA,GAAA,cAAA,QAAA,CACU,IAAI,IACd,KAAK,KAAK,MAAM,UACd,oBAAC,cAAD;IAEE,GAAI,WAAW,WAAW,eAAe,CAAC,CAAC;cAE1C;GACW,GAJP,KAIO,CACf,IAED,oBAAC,cAAD;IAAc,GAAI,WAAW,WAAW,eAAe,CAAC,CAAC;cACtD;GACW,CAAA;GAGf,EAAA,GAAA,cAAA,QAAA,CAAS,kBAAkB,IAC1B,sBAAA,GAAA,cAAA,QAAA,CACU,WAAW,IACrB,YAAY,KAAK,MAAM,UACrB,oBAAC,qBAAD;IAEE,GAAI,WAAW,kBAAkB,sBAAsB,CAAC,CAAC;cAExD;GACkB,GAJd,KAIc,CACtB,IAED,oBAAC,qBAAD;IACE,GAAI,WAAW,kBAAkB,sBAAsB,CAAC,CAAC;cAExD;GACkB,CAAA;GAGtB;EACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,eAAe,YAAqC,MAAM,MAAM,CAAC,CAAC;AAI/E,MAAa,sBAAsB,YACjC,MACA,aACF,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Calendar.Root","Popover.Content"],"sources":["../../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { DatePickerStyle } from \"./date-picker.style\"\nimport type { UseDatePickerProps, UseDatePickerReturn } from \"./use-date-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useFieldSizing } from \"../../hooks/use-field-sizing\"\nimport { cast, isArray, isDate, isObject, mergeRefs } from \"../../utils\"\nimport { Calendar } from \"../calendar\"\nimport { useGroupItemProps } from \"../group\"\nimport { CalendarIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { datePickerStyle } from \"./date-picker.style\"\nimport { useDatePicker } from \"./use-date-picker\"\n\ninterface ComponentContext\n  extends\n    Pick<UseDatePickerReturn, \"getInputProps\" | \"range\" | \"separator\">,\n    Pick<DatePickerProps, \"inputProps\"> {}\n\nexport interface DatePickerProps<\n  Multiple extends boolean = false,\n  Range extends boolean = false,\n>\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    Merge<UseDatePickerProps<Multiple, Range>, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<DatePickerStyle>,\n    UseInputBorderProps {\n  /**\n   * If `true`, display the clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * The icon to be used in the clear button.\n   */\n  clearIcon?: ReactNode\n  /**\n   * The icon to be used in the date picker.\n   */\n  icon?: ReactNode\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Popover.RootProps[\"placement\"]\n  /**\n   * The size of the calendar component.\n   */\n  calendarProps?: Calendar.RootProps<Multiple, Range>\n  /**\n   * Props for content element.\n   */\n  contentProps?: DatePickerContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: DatePickerIconProps\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\nconst {\n  ComponentContext,\n  PropsContext: DatePickerPropsContext,\n  useComponentContext,\n  usePropsContext: useDatePickerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DatePickerProps, DatePickerStyle, ComponentContext>(\n  \"date-picker\",\n  datePickerStyle,\n)\n\nexport { DatePickerPropsContext, useDatePickerPropsContext }\n\n/**\n * `DatePicker` is a component used for users to select a date.\n *\n * @see https://yamada-ui.com/docs/components/date-picker\n */\nexport const DatePicker = withProvider(\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        size,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        calendarProps,\n        contentProps,\n        elementProps,\n        iconProps,\n        inputProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const {\n      children: fieldChildren,\n      range,\n      separator,\n      value,\n      getCalendarProps,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      popoverProps,\n    } = useDatePicker({ ...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 selectProps = useMemo<Calendar.RootProps[\"selectProps\"]>(\n      () => ({ contentProps: { portalProps: { disabled: true } } }),\n      [],\n    )\n    const componentContext = useMemo(\n      () => ({ range, separator, getInputProps, inputProps }),\n      [getInputProps, inputProps, range, separator],\n    )\n    const hasValue = isArray(value)\n      ? !!value.length\n      : isObject(value) && !isDate(value)\n        ? !!value.end || !!value.start\n        : !!value\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            <Popover.Trigger>\n              <DatePickerField {...getFieldProps({ ...varProps })}>\n                {fieldChildren}\n              </DatePickerField>\n            </Popover.Trigger>\n\n            <InputGroup.Element\n              {...{ clickable: clearable && hasValue, ...elementProps }}\n            >\n              {clearable && hasValue ? (\n                <DatePickerIcon\n                  icon={clearIcon}\n                  {...getClearIconProps(iconProps)}\n                />\n              ) : (\n                <DatePickerIcon icon={icon} {...getIconProps(iconProps)} />\n              )}\n            </InputGroup.Element>\n          </InputGroup.Root>\n\n          <DatePickerContent\n            {...cast<DatePickerContentProps>(\n              getContentProps(cast<HTMLProps>(contentProps)),\n            )}\n          >\n            <Calendar.Root\n              colorScheme={colorScheme}\n              size={size}\n              fixed={false}\n              selectProps={selectProps}\n              {...getCalendarProps(calendarProps)}\n            >\n              {children}\n            </Calendar.Root>\n          </DatePickerContent>\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}) as GenericsComponent<{\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ): ReactElement\n}>\n\ninterface DatePickerFieldProps extends HTMLStyledProps {}\n\nconst DatePickerField = withContext<\"div\", DatePickerFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { range, separator, getInputProps, inputProps } = useComponentContext()\n  const computedChildren = useMemo(() => {\n    if (range) {\n      return (\n        <>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"start\", ...inputProps })}\n          />\n          <DatePickerSeparator>{separator}</DatePickerSeparator>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"end\", ...inputProps })}\n          />\n        </>\n      )\n    } else {\n      return (\n        <>\n          {children}\n          <DatePickerInput {...getInputProps(inputProps)} />\n        </>\n      )\n    }\n  }, [children, getInputProps, inputProps, range, separator])\n\n  return {\n    ...rest,\n    children: computedChildren,\n  }\n})\n\ninterface DatePickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerInput = withContext<\"input\", DatePickerInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface DatePickerAdjustInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerAdjustInput = withContext<\"input\", DatePickerAdjustInputProps>(\n  ({ ref, placeholder, value, ...rest }) => {\n    const { ref: inputRef, text } = useFieldSizing({\n      value: value?.toString() || placeholder,\n    })\n\n    return (\n      <>\n        {text}\n\n        <styled.input\n          ref={mergeRefs(ref, inputRef)}\n          placeholder={placeholder}\n          value={value}\n          {...rest}\n        />\n      </>\n    )\n  },\n  [\"input\", \"adjust\"],\n)()\n\ninterface DatePickerSeparatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst DatePickerSeparator = withContext<\"span\", DatePickerSeparatorProps>(\n  \"span\",\n  \"separator\",\n)()\n\ninterface DatePickerIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst DatePickerIcon = withContext<\"div\", DatePickerIconProps>(\"div\", \"icon\")(\n  undefined,\n  ({ children, icon, ...rest }) => ({\n    children: icon || children || <CalendarIcon />,\n    ...rest,\n  }),\n)\n\ninterface DatePickerContentProps extends Popover.ContentProps {}\n\nconst DatePickerContent = withContext<\"div\", DatePickerContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n"],"mappings":"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"}
+{"version":3,"file":"date-picker.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Calendar.Root","Popover.Content"],"sources":["../../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { DatePickerStyle } from \"./date-picker.style\"\nimport type { UseDatePickerProps, UseDatePickerReturn } from \"./use-date-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useFieldSizing } from \"../../hooks/use-field-sizing\"\nimport { cast, isArray, isDate, isObject, mergeRefs } from \"../../utils\"\nimport { Calendar } from \"../calendar\"\nimport { useGroupItemProps } from \"../group\"\nimport { CalendarIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { datePickerStyle } from \"./date-picker.style\"\nimport { useDatePicker } from \"./use-date-picker\"\n\ninterface ComponentContext\n  extends\n    Pick<UseDatePickerReturn, \"getInputProps\" | \"range\" | \"separator\">,\n    Pick<DatePickerProps, \"inputProps\"> {}\n\nexport interface DatePickerProps<\n  Multiple extends boolean = false,\n  Range extends boolean = false,\n>\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    Merge<UseDatePickerProps<Multiple, Range>, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<DatePickerStyle>,\n    UseInputBorderProps {\n  /**\n   * If `true`, display the clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * The icon to be used in the clear button.\n   */\n  clearIcon?: ReactNode\n  /**\n   * The icon to be used in the date picker.\n   */\n  icon?: ReactNode\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Popover.RootProps[\"placement\"]\n  /**\n   * The size of the calendar component.\n   */\n  calendarProps?: Calendar.RootProps<Multiple, Range>\n  /**\n   * Props for content element.\n   */\n  contentProps?: DatePickerContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: DatePickerIconProps\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\nconst {\n  ComponentContext,\n  PropsContext: DatePickerPropsContext,\n  useComponentContext,\n  usePropsContext: useDatePickerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DatePickerProps, DatePickerStyle, ComponentContext>(\n  \"date-picker\",\n  datePickerStyle,\n)\n\nexport { DatePickerPropsContext, useDatePickerPropsContext }\n\n/**\n * `DatePicker` is a component used for users to select a date.\n *\n * @see https://yamada-ui.com/docs/components/date-picker\n */\nexport const DatePicker = withProvider(\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        size,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        calendarProps,\n        contentProps,\n        elementProps,\n        iconProps,\n        inputProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const {\n      children: fieldChildren,\n      range,\n      separator,\n      value,\n      getCalendarProps,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      popoverProps,\n    } = useDatePicker({ ...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 selectProps = useMemo<Calendar.RootProps[\"selectProps\"]>(\n      () => ({ contentProps: { portalProps: { disabled: true } } }),\n      [],\n    )\n    const componentContext = useMemo(\n      () => ({ range, separator, getInputProps, inputProps }),\n      [getInputProps, inputProps, range, separator],\n    )\n    const hasValue = isArray(value)\n      ? !!value.length\n      : isObject(value) && !isDate(value)\n        ? !!value.end || !!value.start\n        : !!value\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            <Popover.Trigger>\n              <DatePickerField {...getFieldProps({ ...varProps })}>\n                {fieldChildren}\n              </DatePickerField>\n            </Popover.Trigger>\n\n            <InputGroup.Element\n              {...{ clickable: clearable && hasValue, ...elementProps }}\n            >\n              {clearable && hasValue ? (\n                <DatePickerIcon\n                  icon={clearIcon}\n                  {...getClearIconProps(iconProps)}\n                />\n              ) : (\n                <DatePickerIcon icon={icon} {...getIconProps(iconProps)} />\n              )}\n            </InputGroup.Element>\n          </InputGroup.Root>\n\n          <DatePickerContent\n            {...cast<DatePickerContentProps>(\n              getContentProps(cast<HTMLProps>(contentProps)),\n            )}\n          >\n            <Calendar.Root\n              colorScheme={colorScheme}\n              size={size}\n              fixed={false}\n              selectProps={selectProps}\n              {...getCalendarProps(calendarProps)}\n            >\n              {children}\n            </Calendar.Root>\n          </DatePickerContent>\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}) as GenericsComponent<{\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ): ReactElement\n}>\n\ninterface DatePickerFieldProps extends HTMLStyledProps {}\n\nconst DatePickerField = withContext<\"div\", DatePickerFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { range, separator, getInputProps, inputProps } = useComponentContext()\n  const computedChildren = useMemo(() => {\n    if (range) {\n      return (\n        <>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"start\", ...inputProps })}\n          />\n          <DatePickerSeparator>{separator}</DatePickerSeparator>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"end\", ...inputProps })}\n          />\n        </>\n      )\n    } else {\n      return (\n        <>\n          {children}\n          <DatePickerInput {...getInputProps(inputProps)} />\n        </>\n      )\n    }\n  }, [children, getInputProps, inputProps, range, separator])\n\n  return {\n    ...rest,\n    children: computedChildren,\n  }\n})\n\ninterface DatePickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerInput = withContext<\"input\", DatePickerInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface DatePickerAdjustInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerAdjustInput = withContext<\"input\", DatePickerAdjustInputProps>(\n  ({ ref, placeholder, value, ...rest }) => {\n    const { ref: inputRef, text } = useFieldSizing({\n      value: value?.toString() || placeholder,\n    })\n\n    return (\n      <>\n        {text}\n\n        <styled.input\n          ref={mergeRefs(ref, inputRef)}\n          placeholder={placeholder}\n          value={value}\n          {...rest}\n        />\n      </>\n    )\n  },\n  [\"input\", \"adjust\"],\n)()\n\ninterface DatePickerSeparatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst DatePickerSeparator = withContext<\"span\", DatePickerSeparatorProps>(\n  \"span\",\n  \"separator\",\n)()\n\ninterface DatePickerIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst DatePickerIcon = withContext<\"div\", DatePickerIconProps>(\"div\", \"icon\")(\n  undefined,\n  ({ children, icon, ...rest }) => ({\n    children: icon || children || <CalendarIcon />,\n    ...rest,\n  }),\n)\n\ninterface DatePickerContentProps extends Popover.ContentProps {}\n\nconst DatePickerContent = withContext<\"div\", DatePickerContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n"],"mappings":"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"}