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

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

@@ -1 +1 @@
-{"version":3,"file":"use-rating.js","names":["createContext"],"sources":["../../../../src/components/rating/use-rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent, MouseEvent, TouchEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  clampNumber,\n  createContext,\n  dataAttr,\n  handlerAll,\n  runKeyAction,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst getRoundedValue = (value: number, to: number) => {\n  const rounded = Math.round(value / to) * to\n  const precision = `${to}`.split(\".\")[1]?.length || 0\n\n  return Number(rounded.toFixed(precision))\n}\n\nexport interface RatingContext extends Omit<UseRatingReturn, \"getRootProps\"> {}\n\nconst [RatingContext, useRatingContext] = createContext<RatingContext>({\n  name: \"RatingContext\",\n})\n\nexport { RatingContext, useRatingContext }\n\nexport interface UseRatingProps\n  extends FieldProps, Omit<HTMLProps, \"color\" | \"defaultValue\" | \"onChange\"> {\n  /**\n   * Number of controls that should be rendered.\n   *\n   * @default 5\n   */\n  count?: number\n  /**\n   * The initial value of the rating.\n   *\n   * @default 0\n   */\n  defaultValue?: number\n  /**\n   * Number of fractions each item can be divided into,\n   *\n   * @default 1\n   */\n  fractions?: number\n  /**\n   * If `true`, only the selected icons will be filled.\n   *\n   * @default false\n   */\n  highlightSelectedOnly?: boolean\n  /**\n   * The top-level id string that will be applied to the rating.\n   * The index of the rating item will be appended to this top-level id.\n   */\n  id?: string\n  /**\n   * The name of the input element.\n   */\n  name?: string\n  /**\n   * The value of the rating.\n   */\n  value?: number\n  /**\n   * The callback invoked when value state changes.\n   */\n  onChange?: (value: number) => void\n  /**\n   * The callback invoked when hovering over the rating.\n   */\n  onHover?: (value: number) => void\n}\n\nexport const useRating = (props: UseRatingProps = {}) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      name = uuid,\n      count: countProp = 5,\n      defaultValue = 0,\n      disabled,\n      fractions: fractionsProp = 1,\n      highlightSelectedOnly = false,\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      onHover,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps({ ...props, notSupportReadOnly: true })\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hoveredValue, setHoveredValue] = useState(-1)\n  const outsideRef = useRef(true)\n  const fractions = Math.floor(fractionsProp)\n  const count = Math.floor(countProp)\n  const decimal = 1 / fractions\n  const roundedValue = useMemo(\n    () => getRoundedValue(value, decimal),\n    [decimal, value],\n  )\n  const interactive = !(readOnly || disabled)\n  const displayValue = hoveredValue !== -1 ? hoveredValue : roundedValue\n\n  const getHoveredValue = useCallback(\n    (x: number) => {\n      if (!rootRef.current) return -1\n\n      const { left, width } = rootRef.current.getBoundingClientRect()\n      const itemWidth = width / count\n\n      const hoveredValue = (x - left) / itemWidth\n\n      const value = clampNumber(\n        getRoundedValue(hoveredValue + decimal / 2, decimal),\n        decimal,\n        count,\n      )\n\n      return value\n    },\n    [count, decimal],\n  )\n\n  const onMouseEnter = useCallback(() => {\n    if (interactive) outsideRef.current = false\n  }, [interactive])\n\n  const onMouseLeave = useCallback(() => {\n    if (!interactive) return\n\n    setHoveredValue(-1)\n    outsideRef.current = true\n\n    if (hoveredValue !== -1) onHover?.(-1)\n  }, [hoveredValue, onHover, interactive, setHoveredValue])\n\n  const onMouseMove = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) return\n\n      const roundedValue = getHoveredValue(ev.clientX)\n\n      setHoveredValue(roundedValue)\n\n      if (roundedValue !== hoveredValue) onHover?.(roundedValue)\n    },\n    [disabled, getHoveredValue, hoveredValue, readOnly, onHover],\n  )\n\n  const onTouchStart = useCallback(\n    (ev: TouchEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const el = ev.touches[0]\n\n      if (!el) return\n\n      const value = getHoveredValue(el.clientX)\n\n      setValue(value)\n    },\n    [getHoveredValue, setValue],\n  )\n\n  const onTouchEnd = useCallback((ev: TouchEvent<HTMLDivElement>) => {\n    ev.preventDefault()\n  }, [])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => {\n      const merged = mergeProps(\n        dataProps,\n        eventProps,\n        ariaProps,\n        {\n          id,\n          \"aria-label\": `${value} Stars`,\n          \"aria-readonly\": ariaAttr(readOnly),\n          role: \"radiogroup\",\n        },\n        rest,\n        props,\n        { ref },\n        { ref: rootRef },\n      )()\n      return {\n        ...merged,\n        onMouseEnter: handlerAll(\n          props.onMouseEnter,\n          rest.onMouseEnter,\n          onMouseEnter,\n        ),\n        onMouseLeave: handlerAll(\n          props.onMouseLeave,\n          rest.onMouseLeave,\n          onMouseLeave,\n        ),\n        onMouseMove: handlerAll(\n          props.onMouseMove,\n          rest.onMouseMove,\n          onMouseMove,\n        ),\n        onTouchEnd: handlerAll(props.onTouchEnd, rest.onTouchEnd, onTouchEnd),\n        onTouchStart: handlerAll(\n          props.onTouchStart,\n          rest.onTouchStart,\n          onTouchStart,\n        ),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      eventProps,\n      id,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseMove,\n      onTouchEnd,\n      onTouchStart,\n      readOnly,\n      rest,\n      value,\n    ],\n  )\n\n  return {\n    id,\n    name,\n    count,\n    decimal,\n    disabled,\n    displayValue,\n    fractions,\n    highlightSelectedOnly,\n    hoveredValue,\n    interactive,\n    outsideRef,\n    readOnly,\n    required,\n    roundedValue,\n    setHoveredValue,\n    setValue,\n    value,\n    ariaProps,\n    dataProps,\n    eventProps,\n    getRootProps,\n  }\n}\n\nexport type UseRatingReturn = ReturnType<typeof useRating>\n\nexport interface UseRatingItemProps extends HTMLProps<\"label\"> {\n  groupValue: number\n  index: number\n}\n\nexport const useRatingItem = ({\n  groupValue,\n  index,\n  ...rest\n}: UseRatingItemProps) => {\n  const {\n    id: rootId,\n    name,\n    decimal,\n    disabled,\n    displayValue,\n    highlightSelectedOnly,\n    interactive,\n    outsideRef,\n    readOnly,\n    required,\n    roundedValue,\n    setHoveredValue,\n    setValue,\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useRatingContext()\n  const fractionValue = decimal * (groupValue === 1 ? index : index + 1)\n  const value = useMemo(\n    () => getRoundedValue(groupValue - 1 + fractionValue, decimal),\n    [decimal, fractionValue, groupValue],\n  )\n  const active = value === displayValue\n  const checked = value === roundedValue\n  const filled = highlightSelectedOnly\n    ? value === displayValue\n    : value <= displayValue\n  const id = `${rootId}-${groupValue}-${value}`\n\n  const onBlur = useCallback(() => {\n    if (outsideRef.current) setHoveredValue(-1)\n  }, [outsideRef, setHoveredValue])\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return\n\n      const value = parseFloat(ev.target.value)\n\n      setHoveredValue(value)\n    },\n    [interactive, setHoveredValue],\n  )\n\n  const onChange = useCallback(\n    (value: number) => {\n      if (!interactive) return\n\n      setValue(value)\n    },\n    [interactive, setValue],\n  )\n\n  const onMouseDown = useCallback(() => {\n    onChange(value)\n  }, [onChange, value])\n\n  const onTouchStart = useCallback(() => {\n    onChange(value)\n  }, [onChange, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      runKeyAction(ev, {\n        Space: () => onChange(value),\n      })\n    },\n    [onChange, value],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    ({ style, ...props } = {}) =>\n      mergeProps(\n        dataProps,\n        ariaProps,\n        {\n          htmlFor: id,\n          \"data-active\": dataAttr(active),\n          \"data-filled\": dataAttr(filled),\n        },\n        rest,\n        props,\n        { style },\n        {\n          style: {\n            zIndex: fractionValue !== 1 ? (active ? 1 : -1) : undefined,\n          },\n        },\n        { onMouseDown, onTouchStart },\n      )(),\n    [\n      active,\n      ariaProps,\n      dataProps,\n      filled,\n      fractionValue,\n      id,\n      onMouseDown,\n      onTouchStart,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      ...eventProps,\n      ...ariaProps,\n      id,\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-label\": value.toString(),\n      \"data-active\": dataAttr(active),\n      \"data-checked\": dataAttr(checked),\n      checked,\n      disabled,\n      readOnly,\n      required,\n      value,\n      ...props,\n      onBlur: handlerAll(onBlur, props.onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      id,\n      name,\n      value,\n      active,\n      checked,\n      dataProps,\n      eventProps,\n      ariaProps,\n      disabled,\n      readOnly,\n      required,\n      onBlur,\n      onInputChange,\n      onKeyDown,\n    ],\n  )\n\n  return {\n    active,\n    checked,\n    filled,\n    fractionValue,\n    groupValue,\n    value,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseRatingItemReturn = ReturnType<typeof useRatingItem>\n"],"mappings":"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"}
+{"version":3,"file":"use-rating.js","names":["createContext"],"sources":["../../../../src/components/rating/use-rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent, MouseEvent, TouchEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  clampNumber,\n  createContext,\n  dataAttr,\n  handlerAll,\n  runKeyAction,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst getRoundedValue = (value: number, to: number) => {\n  const rounded = Math.round(value / to) * to\n  const precision = `${to}`.split(\".\")[1]?.length || 0\n\n  return Number(rounded.toFixed(precision))\n}\n\nexport interface RatingContext extends Omit<UseRatingReturn, \"getRootProps\"> {}\n\nconst [RatingContext, useRatingContext] = createContext<RatingContext>({\n  name: \"RatingContext\",\n})\n\nexport { RatingContext, useRatingContext }\n\nexport interface UseRatingProps\n  extends FieldProps, Omit<HTMLProps, \"color\" | \"defaultValue\" | \"onChange\"> {\n  /**\n   * Number of controls that should be rendered.\n   *\n   * @default 5\n   */\n  count?: number\n  /**\n   * The initial value of the rating.\n   *\n   * @default 0\n   */\n  defaultValue?: number\n  /**\n   * Number of fractions each item can be divided into,\n   *\n   * @default 1\n   */\n  fractions?: number\n  /**\n   * If `true`, only the selected icons will be filled.\n   *\n   * @default false\n   */\n  highlightSelectedOnly?: boolean\n  /**\n   * The top-level id string that will be applied to the rating.\n   * The index of the rating item will be appended to this top-level id.\n   */\n  id?: string\n  /**\n   * The name of the input element.\n   */\n  name?: string\n  /**\n   * The value of the rating.\n   */\n  value?: number\n  /**\n   * The callback invoked when value state changes.\n   */\n  onChange?: (value: number) => void\n  /**\n   * The callback invoked when hovering over the rating.\n   */\n  onHover?: (value: number) => void\n}\n\nexport const useRating = (props: UseRatingProps = {}) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      name = uuid,\n      count: countProp = 5,\n      defaultValue = 0,\n      disabled,\n      fractions: fractionsProp = 1,\n      highlightSelectedOnly = false,\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      onHover,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps({ ...props, notSupportReadOnly: true })\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hoveredValue, setHoveredValue] = useState(-1)\n  const outsideRef = useRef(true)\n  const fractions = Math.floor(fractionsProp)\n  const count = Math.floor(countProp)\n  const decimal = 1 / fractions\n  const roundedValue = useMemo(\n    () => getRoundedValue(value, decimal),\n    [decimal, value],\n  )\n  const interactive = !(readOnly || disabled)\n  const displayValue = hoveredValue !== -1 ? hoveredValue : roundedValue\n\n  const getHoveredValue = useCallback(\n    (x: number) => {\n      if (!rootRef.current) return -1\n\n      const { left, width } = rootRef.current.getBoundingClientRect()\n      const itemWidth = width / count\n\n      const hoveredValue = (x - left) / itemWidth\n\n      const value = clampNumber(\n        getRoundedValue(hoveredValue + decimal / 2, decimal),\n        decimal,\n        count,\n      )\n\n      return value\n    },\n    [count, decimal],\n  )\n\n  const onMouseEnter = useCallback(() => {\n    if (interactive) outsideRef.current = false\n  }, [interactive])\n\n  const onMouseLeave = useCallback(() => {\n    if (!interactive) return\n\n    setHoveredValue(-1)\n    outsideRef.current = true\n\n    if (hoveredValue !== -1) onHover?.(-1)\n  }, [hoveredValue, onHover, interactive, setHoveredValue])\n\n  const onMouseMove = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) return\n\n      const roundedValue = getHoveredValue(ev.clientX)\n\n      setHoveredValue(roundedValue)\n\n      if (roundedValue !== hoveredValue) onHover?.(roundedValue)\n    },\n    [disabled, getHoveredValue, hoveredValue, readOnly, onHover],\n  )\n\n  const onTouchStart = useCallback(\n    (ev: TouchEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const el = ev.touches[0]\n\n      if (!el) return\n\n      const value = getHoveredValue(el.clientX)\n\n      setValue(value)\n    },\n    [getHoveredValue, setValue],\n  )\n\n  const onTouchEnd = useCallback((ev: TouchEvent<HTMLDivElement>) => {\n    ev.preventDefault()\n  }, [])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => {\n      const merged = mergeProps(\n        dataProps,\n        eventProps,\n        ariaProps,\n        {\n          id,\n          \"aria-label\": `${value} Stars`,\n          \"aria-readonly\": ariaAttr(readOnly),\n          role: \"radiogroup\",\n        },\n        rest,\n        props,\n        { ref },\n        { ref: rootRef },\n      )()\n      return {\n        ...merged,\n        onMouseEnter: handlerAll(\n          props.onMouseEnter,\n          rest.onMouseEnter,\n          onMouseEnter,\n        ),\n        onMouseLeave: handlerAll(\n          props.onMouseLeave,\n          rest.onMouseLeave,\n          onMouseLeave,\n        ),\n        onMouseMove: handlerAll(\n          props.onMouseMove,\n          rest.onMouseMove,\n          onMouseMove,\n        ),\n        onTouchEnd: handlerAll(props.onTouchEnd, rest.onTouchEnd, onTouchEnd),\n        onTouchStart: handlerAll(\n          props.onTouchStart,\n          rest.onTouchStart,\n          onTouchStart,\n        ),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      eventProps,\n      id,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseMove,\n      onTouchEnd,\n      onTouchStart,\n      readOnly,\n      rest,\n      value,\n    ],\n  )\n\n  return {\n    id,\n    name,\n    count,\n    decimal,\n    disabled,\n    displayValue,\n    fractions,\n    highlightSelectedOnly,\n    hoveredValue,\n    interactive,\n    outsideRef,\n    readOnly,\n    required,\n    roundedValue,\n    setHoveredValue,\n    setValue,\n    value,\n    ariaProps,\n    dataProps,\n    eventProps,\n    getRootProps,\n  }\n}\n\nexport type UseRatingReturn = ReturnType<typeof useRating>\n\nexport interface UseRatingItemProps extends HTMLProps<\"label\"> {\n  groupValue: number\n  index: number\n}\n\nexport const useRatingItem = ({\n  groupValue,\n  index,\n  ...rest\n}: UseRatingItemProps) => {\n  const {\n    id: rootId,\n    name,\n    decimal,\n    disabled,\n    displayValue,\n    highlightSelectedOnly,\n    interactive,\n    outsideRef,\n    readOnly,\n    required,\n    roundedValue,\n    setHoveredValue,\n    setValue,\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useRatingContext()\n  const fractionValue = decimal * (groupValue === 1 ? index : index + 1)\n  const value = useMemo(\n    () => getRoundedValue(groupValue - 1 + fractionValue, decimal),\n    [decimal, fractionValue, groupValue],\n  )\n  const active = value === displayValue\n  const checked = value === roundedValue\n  const filled = highlightSelectedOnly\n    ? value === displayValue\n    : value <= displayValue\n  const id = `${rootId}-${groupValue}-${value}`\n\n  const onBlur = useCallback(() => {\n    if (outsideRef.current) setHoveredValue(-1)\n  }, [outsideRef, setHoveredValue])\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return\n\n      const value = parseFloat(ev.target.value)\n\n      setHoveredValue(value)\n    },\n    [interactive, setHoveredValue],\n  )\n\n  const onChange = useCallback(\n    (value: number) => {\n      if (!interactive) return\n\n      setValue(value)\n    },\n    [interactive, setValue],\n  )\n\n  const onMouseDown = useCallback(() => {\n    onChange(value)\n  }, [onChange, value])\n\n  const onTouchStart = useCallback(() => {\n    onChange(value)\n  }, [onChange, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      runKeyAction(ev, {\n        Space: () => onChange(value),\n      })\n    },\n    [onChange, value],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    ({ style, ...props } = {}) =>\n      mergeProps(\n        dataProps,\n        ariaProps,\n        {\n          htmlFor: id,\n          \"data-active\": dataAttr(active),\n          \"data-filled\": dataAttr(filled),\n        },\n        rest,\n        props,\n        { style },\n        {\n          style: {\n            zIndex: fractionValue !== 1 ? (active ? 1 : -1) : undefined,\n          },\n        },\n        { onMouseDown, onTouchStart },\n      )(),\n    [\n      active,\n      ariaProps,\n      dataProps,\n      filled,\n      fractionValue,\n      id,\n      onMouseDown,\n      onTouchStart,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      ...eventProps,\n      ...ariaProps,\n      id,\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-label\": value.toString(),\n      \"data-active\": dataAttr(active),\n      \"data-checked\": dataAttr(checked),\n      checked,\n      disabled,\n      readOnly,\n      required,\n      value,\n      ...props,\n      onBlur: handlerAll(onBlur, props.onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      id,\n      name,\n      value,\n      active,\n      checked,\n      dataProps,\n      eventProps,\n      ariaProps,\n      disabled,\n      readOnly,\n      required,\n      onBlur,\n      onInputChange,\n      onKeyDown,\n    ],\n  )\n\n  return {\n    active,\n    checked,\n    filled,\n    fractionValue,\n    groupValue,\n    value,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseRatingItemReturn = ReturnType<typeof useRatingItem>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"reorder.js","names":["OriginalReorder"],"sources":["../../../../src/components/reorder/reorder.tsx"],"sourcesContent":["\"use client\"\n\nimport type { PropsWithChildren, ReactElement } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { ReorderStyle } from \"./reorder.style\"\nimport type { UseReorderItemProps, UseReorderProps } from \"./use-reorder\"\nimport { Reorder as OriginalReorder } from \"motion/react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { GripVerticalIcon } from \"../icon\"\nimport { reorderStyle } from \"./reorder.style\"\nimport {\n  ReorderContext,\n  ReorderItemContext,\n  useReorder,\n  useReorderItem,\n  useReorderItemContext,\n} from \"./use-reorder\"\n\nexport interface ReorderItem<Y = string> extends ReorderItemProps<Y> {}\n\nexport interface ReorderRootProps<Y = string>\n  extends\n    Merge<\n      HTMLMotionProps<\"ul\">,\n      Omit<UseReorderProps<Y>, \"item\" | \"items\" | \"orientation\">\n    >,\n    ThemeProps<ReorderStyle> {\n  /**\n   * If provided, generate reorder items based on items.\n   *\n   */\n  items?: ReorderItem<Y>[]\n}\n\nconst {\n  PropsContext: ReorderPropsContext,\n  usePropsContext: useReorderPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ReorderRootProps, ReorderStyle>(\"reorder\", reorderStyle)\n\nexport { ReorderPropsContext, useReorderPropsContext }\n\n/**\n * `Reorder` is a component that allows you to change the order of items using drag and drop.\n *\n * @see https://yamada-ui.com/docs/components/reorder\n */\nexport const ReorderRoot = withProvider<\"ul\", ReorderRootProps>(\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n  <Y extends any = string>({\n    orientation: orientationProp,\n    ...rest\n  }: ReorderRootProps<Y>) => {\n    const orientation = useValue(orientationProp)\n    const { children, getRootProps } = useReorder({\n      ...rest,\n      item: <ReorderItem />,\n      orientation,\n    })\n\n    return (\n      <ReorderContext value={{ orientation }}>\n        <styled.ul\n          as={OriginalReorder.Group<Y[]>}\n          {...(getRootProps() as HTMLStyledProps<\"ul\">)}\n        >\n          {children}\n        </styled.ul>\n      </ReorderContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)() as GenericsComponent<{\n  <Y = string>(props: ReorderRootProps<Y>): ReactElement\n}>\n\nexport interface ReorderItemProps<Y = string>\n  extends\n    Omit<Merge<HTMLMotionProps<\"li\">, UseReorderItemProps<Y>>, \"children\">,\n    PropsWithChildren {}\n\nexport const ReorderItem = withContext<\"li\", ReorderItemProps>(\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n  <Y extends any = string>(props: ReorderItemProps<Y>) => {\n    const { getItemProps, getTriggerProps } = useReorderItem(props)\n\n    return (\n      <ReorderItemContext value={{ getTriggerProps }}>\n        <styled.li\n          as={OriginalReorder.Item<Y>}\n          {...(getItemProps() as HTMLStyledProps<\"li\">)}\n        />\n      </ReorderItemContext>\n    )\n  },\n  \"item\",\n)() as GenericsComponent<{\n  <Y = string>(props: ReorderItemProps<Y>): ReactElement\n}>\n\nexport interface ReorderTriggerProps extends HTMLStyledProps {}\n\nexport const ReorderTrigger = withContext<\"div\", ReorderTriggerProps>(\n  \"div\",\n  \"trigger\",\n)(undefined, (props) => {\n  const { getTriggerProps } = useReorderItemContext()\n\n  return { children: <GripVerticalIcon />, ...getTriggerProps(props) }\n})\n"],"mappings":";;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,qBACd,iBAAiB,wBACjB,aACA,iBACE,oBAAoD,WAAW,YAAY;;;;;;AAS/E,MAAa,cAAc,cAEA,EACvB,aAAa,iBACb,GAAG,WACsB;CACzB,MAAM,cAAc,SAAS,eAAe;CAC5C,MAAM,EAAE,UAAU,iBAAiB,WAAW;EAC5C,GAAG;EACH,MAAM,oBAAC,aAAD,CAAc,CAAA;EACpB;CACF,CAAC;CAED,OACE,oBAAC,gBAAD;EAAgB,OAAO,EAAE,YAAY;YACnC,oBAAC,OAAO,IAAR;GACE,IAAIA,QAAgB;GACpB,GAAK,aAAa;GAEjB;EACQ,CAAA;CACG,CAAA;AAEpB,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,EAAE;AASF,MAAa,cAAc,aAEA,UAA+B;CACtD,MAAM,EAAE,cAAc,oBAAoB,eAAe,KAAK;CAE9D,OACE,oBAAC,oBAAD;EAAoB,OAAO,EAAE,gBAAgB;YAC3C,oBAAC,OAAO,IAAR;GACE,IAAIA,QAAgB;GACpB,GAAK,aAAa;EACnB,CAAA;CACiB,CAAA;AAExB,GACA,MACF,EAAE;AAMF,MAAa,iBAAiB,YAC5B,OACA,SACF,EAAE,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,sBAAsB;CAElD,OAAO;EAAE,UAAU,oBAAC,kBAAD,CAAmB,CAAA;EAAG,GAAG,gBAAgB,KAAK;CAAE;AACrE,CAAC"}
+{"version":3,"file":"reorder.js","names":["OriginalReorder"],"sources":["../../../../src/components/reorder/reorder.tsx"],"sourcesContent":["\"use client\"\n\nimport type { PropsWithChildren, ReactElement } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { ReorderStyle } from \"./reorder.style\"\nimport type { UseReorderItemProps, UseReorderProps } from \"./use-reorder\"\nimport { Reorder as OriginalReorder } from \"motion/react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { GripVerticalIcon } from \"../icon\"\nimport { reorderStyle } from \"./reorder.style\"\nimport {\n  ReorderContext,\n  ReorderItemContext,\n  useReorder,\n  useReorderItem,\n  useReorderItemContext,\n} from \"./use-reorder\"\n\nexport interface ReorderItem<Y = string> extends ReorderItemProps<Y> {}\n\nexport interface ReorderRootProps<Y = string>\n  extends\n    Merge<\n      HTMLMotionProps<\"ul\">,\n      Omit<UseReorderProps<Y>, \"item\" | \"items\" | \"orientation\">\n    >,\n    ThemeProps<ReorderStyle> {\n  /**\n   * If provided, generate reorder items based on items.\n   *\n   */\n  items?: ReorderItem<Y>[]\n}\n\nconst {\n  PropsContext: ReorderPropsContext,\n  usePropsContext: useReorderPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ReorderRootProps, ReorderStyle>(\"reorder\", reorderStyle)\n\nexport { ReorderPropsContext, useReorderPropsContext }\n\n/**\n * `Reorder` is a component that allows you to change the order of items using drag and drop.\n *\n * @see https://yamada-ui.com/docs/components/reorder\n */\nexport const ReorderRoot = withProvider<\"ul\", ReorderRootProps>(\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n  <Y extends any = string>({\n    orientation: orientationProp,\n    ...rest\n  }: ReorderRootProps<Y>) => {\n    const orientation = useValue(orientationProp)\n    const { children, getRootProps } = useReorder({\n      ...rest,\n      item: <ReorderItem />,\n      orientation,\n    })\n\n    return (\n      <ReorderContext value={{ orientation }}>\n        <styled.ul\n          as={OriginalReorder.Group<Y[]>}\n          {...(getRootProps() as HTMLStyledProps<\"ul\">)}\n        >\n          {children}\n        </styled.ul>\n      </ReorderContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)() as GenericsComponent<{\n  <Y = string>(props: ReorderRootProps<Y>): ReactElement\n}>\n\nexport interface ReorderItemProps<Y = string>\n  extends\n    Omit<Merge<HTMLMotionProps<\"li\">, UseReorderItemProps<Y>>, \"children\">,\n    PropsWithChildren {}\n\nexport const ReorderItem = withContext<\"li\", ReorderItemProps>(\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n  <Y extends any = string>(props: ReorderItemProps<Y>) => {\n    const { getItemProps, getTriggerProps } = useReorderItem(props)\n\n    return (\n      <ReorderItemContext value={{ getTriggerProps }}>\n        <styled.li\n          as={OriginalReorder.Item<Y>}\n          {...(getItemProps() as HTMLStyledProps<\"li\">)}\n        />\n      </ReorderItemContext>\n    )\n  },\n  \"item\",\n)() as GenericsComponent<{\n  <Y = string>(props: ReorderItemProps<Y>): ReactElement\n}>\n\nexport interface ReorderTriggerProps extends HTMLStyledProps {}\n\nexport const ReorderTrigger = withContext<\"div\", ReorderTriggerProps>(\n  \"div\",\n  \"trigger\",\n)(undefined, (props) => {\n  const { getTriggerProps } = useReorderItemContext()\n\n  return { children: <GripVerticalIcon />, ...getTriggerProps(props) }\n})\n"],"mappings":";;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,qBACd,iBAAiB,wBACjB,aACA,iBACE,oBAAoD,WAAW,YAAY;;;;;;AAS/E,MAAa,cAAc,cAEA,EACvB,aAAa,iBACb,GAAG,WACsB;CACzB,MAAM,cAAc,SAAS,eAAe;CAC5C,MAAM,EAAE,UAAU,iBAAiB,WAAW;EAC5C,GAAG;EACH,MAAM,oBAAC,aAAD,CAAc,CAAA;EACpB;CACF,CAAC;CAED,OACE,oBAAC,gBAAD;EAAgB,OAAO,EAAE,YAAY;YACnC,oBAAC,OAAO,IAAR;GACE,IAAIA,QAAgB;GACpB,GAAK,aAAa;GAEjB;EACQ,CAAA;CACG,CAAA;AAEpB,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,CAAC,CAAC;AASF,MAAa,cAAc,aAEA,UAA+B;CACtD,MAAM,EAAE,cAAc,oBAAoB,eAAe,KAAK;CAE9D,OACE,oBAAC,oBAAD;EAAoB,OAAO,EAAE,gBAAgB;YAC3C,oBAAC,OAAO,IAAR;GACE,IAAIA,QAAgB;GACpB,GAAK,aAAa;EACnB,CAAA;CACiB,CAAA;AAExB,GACA,MACF,CAAC,CAAC;AAMF,MAAa,iBAAiB,YAC5B,OACA,SACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,sBAAsB;CAElD,OAAO;EAAE,UAAU,oBAAC,kBAAD,CAAmB,CAAA;EAAG,GAAG,gBAAgB,KAAK;CAAE;AACrE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-reorder.js","names":["createContext"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { mergeProps } from \"../../core\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isObject,\n  mergeRefs,\n  useUpdateEffect,\n  useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n  serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n  isObject(value) || isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n  HTMLMotionProps<\"ul\">,\n  Pick<\n    Parameters<typeof Reorder.Group<Y[]>>[0],\n    \"axis\" | \"onReorder\" | \"values\"\n  >\n>\ntype ReorderItemProps<Y = string> = Merge<\n  HTMLMotionProps<\"li\">,\n  Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" | \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n  name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n  getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n  createContext<ReorderItemContext>({\n    name: \"ReorderItemContext\",\n  })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n  extends\n    Partial<Omit<ReorderGroupProps<Y>, \"children\" | \"onChange\" | \"values\">>,\n    PropsWithChildren {\n  /**\n   * The component to be used for the item.\n   */\n  item?: ReactElement<any>\n  /**\n   * If provided, generate reorder items based on items.\n   *\n   */\n  items?: UseReorderItemProps<Y>[]\n  /**\n   * The orientation of the reorder.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * The callback invoked when reorder items are moved.\n   */\n  onChange?: (values: Y[]) => void\n  /**\n   * The callback invoked when the movement of reorder items is completed.\n   */\n  onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n  ref,\n  children,\n  item,\n  items = [],\n  orientation = \"vertical\",\n  onChange,\n  onCompleteChange,\n  ...rest\n}: UseReorderProps<Y> = {}) => {\n  const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n  const validChildren = useValidChildren(children)\n  const hasChildren = !!validChildren.length\n  const defaultValues = useMemo(() => {\n    const values = hasChildren\n      ? validChildren.map(\n          ({ props }) => props.value ?? getAlternativeValue(props),\n        )\n      : items.map((props) => props.value ?? getAlternativeValue(props))\n\n    const duplicatedValues = values.filter(\n      (value, index, self) =>\n        self.indexOf(value) === index && index !== self.lastIndexOf(value),\n    )\n\n    if (duplicatedValues.length)\n      console.warn(\n        `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n          `', '`,\n        )}' `,\n      )\n\n    return Array.from(new Set(values))\n  }, [hasChildren, validChildren, items])\n  const childMap = useMemo(() => {\n    return Object.fromEntries(\n      validChildren.map((child) => [\n        serializeValue(child.props.value) ??\n          serializeValue(getAlternativeValue(child.props)),\n        child,\n      ]),\n    )\n  }, [validChildren])\n  const itemMap = useMemo(() => {\n    return Object.fromEntries(\n      items.map((props) => [\n        serializeValue(props.value) ??\n          serializeValue(getAlternativeValue(props)),\n        props,\n      ]),\n    )\n  }, [items])\n  const prevDefaultValues = useRef<Y[]>(defaultValues)\n  const [values, setValues] = useState<Y[]>(defaultValues)\n  const prevValues = useRef<Y[]>(defaultValues)\n  const cloneChildren = useMemo(\n    () =>\n      values.map((value) => {\n        if (hasChildren) {\n          return childMap[serializeValue(value)]\n        } else {\n          const props = itemMap[serializeValue(value)]\n\n          return props && item\n            ? cloneElement(item, { key: serializeValue(props.value), ...props })\n            : null\n        }\n      }),\n    [values, hasChildren, childMap, itemMap, item],\n  )\n\n  const onReorder = useCallback(\n    (newValues: Y[]) => {\n      setValues(newValues)\n\n      onChange?.(newValues)\n    },\n    [onChange],\n  )\n\n  const onCompleteReorder = useCallback(() => {\n    const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n    if (equal) return\n\n    prevValues.current = values\n\n    onCompleteChange?.(values)\n  }, [onCompleteChange, values])\n\n  useUpdateEffect(() => {\n    const equal =\n      JSON.stringify(defaultValues) ===\n      JSON.stringify(prevDefaultValues.current)\n\n    if (equal) return\n\n    prevValues.current = defaultValues\n    prevDefaultValues.current = defaultValues\n\n    setValues(defaultValues)\n  }, [defaultValues])\n\n  const getRootProps: PropGetter<\n    Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n    undefined,\n    ReorderGroupProps<Y>\n  > = useCallback(\n    (props = {}) =>\n      mergeProps(\n        { axis, values },\n        rest,\n        props,\n        { ref },\n        {\n          onMouseUp: onCompleteReorder,\n          onReorder,\n          onTouchEnd: onCompleteReorder,\n        },\n      )(),\n    [rest, ref, onCompleteReorder, onReorder, axis, values],\n  )\n\n  return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n  /**\n   * The label of the reorder item.\n   */\n  label?: ReactNode\n  /**\n   * The value of the reorder item.\n   */\n  value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n  ref,\n  label,\n  value,\n  ...rest\n}: UseReorderItemProps<Y>) => {\n  const { orientation } = useReorderContext()\n  const dragControls = useDragControls()\n  const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n  const [drag, setDrag] = useState<boolean>(false)\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n\n  const register = useCallback(\n    (node: HTMLElement | null) => setHasTrigger(!!node),\n    [],\n  )\n\n  useEffect(() => {\n    const unsubscribeX = x.on(\"change\", (x) => {\n      if (orientation === \"horizontal\") setDrag(x !== 0)\n    })\n    const unsubscribeY = y.on(\"change\", (y) => {\n      if (orientation === \"vertical\") setDrag(y !== 0)\n    })\n\n    return () => {\n      unsubscribeX()\n      unsubscribeY()\n    }\n  }, [orientation, x, y])\n\n  const getItemProps: PropGetter<\n    Omit<HTMLMotionProps<\"li\">, \"layout\" | \"value\"> &\n      Pick<ReorderItemProps<Y>, \"layout\">,\n    undefined,\n    ReorderItemProps<Y>\n  > = useCallback(\n    (props = {}) => {\n      const children = props.children ?? rest.children ?? label\n\n      const merged = mergeProps(\n        {\n          \"data-has-trigger\": dataAttr(hasTrigger),\n          \"data-selected\": dataAttr(drag),\n          dragControls,\n          dragListener: !hasTrigger,\n          value: value ?? getAlternativeValue({ children }),\n        },\n        props,\n        rest,\n        { ref },\n      )()\n\n      return {\n        ...merged,\n        style: { x, y, ...props.style, ...rest.style },\n        children,\n      }\n    },\n    [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n  )\n\n  const getTriggerProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(register, props.ref),\n      \"data-selected\": dataAttr(drag),\n      onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n        dragControls.start(ev),\n      ),\n    }),\n    [drag, dragControls, register],\n  )\n\n  return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n  typeof useReorderItem<Y>\n>\n"],"mappings":"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"}
+{"version":3,"file":"use-reorder.js","names":["createContext"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { mergeProps } from \"../../core\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isObject,\n  mergeRefs,\n  useUpdateEffect,\n  useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n  serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n  isObject(value) || isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n  HTMLMotionProps<\"ul\">,\n  Pick<\n    Parameters<typeof Reorder.Group<Y[]>>[0],\n    \"axis\" | \"onReorder\" | \"values\"\n  >\n>\ntype ReorderItemProps<Y = string> = Merge<\n  HTMLMotionProps<\"li\">,\n  Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" | \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n  name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n  getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n  createContext<ReorderItemContext>({\n    name: \"ReorderItemContext\",\n  })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n  extends\n    Partial<Omit<ReorderGroupProps<Y>, \"children\" | \"onChange\" | \"values\">>,\n    PropsWithChildren {\n  /**\n   * The component to be used for the item.\n   */\n  item?: ReactElement<any>\n  /**\n   * If provided, generate reorder items based on items.\n   *\n   */\n  items?: UseReorderItemProps<Y>[]\n  /**\n   * The orientation of the reorder.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * The callback invoked when reorder items are moved.\n   */\n  onChange?: (values: Y[]) => void\n  /**\n   * The callback invoked when the movement of reorder items is completed.\n   */\n  onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n  ref,\n  children,\n  item,\n  items = [],\n  orientation = \"vertical\",\n  onChange,\n  onCompleteChange,\n  ...rest\n}: UseReorderProps<Y> = {}) => {\n  const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n  const validChildren = useValidChildren(children)\n  const hasChildren = !!validChildren.length\n  const defaultValues = useMemo(() => {\n    const values = hasChildren\n      ? validChildren.map(\n          ({ props }) => props.value ?? getAlternativeValue(props),\n        )\n      : items.map((props) => props.value ?? getAlternativeValue(props))\n\n    const duplicatedValues = values.filter(\n      (value, index, self) =>\n        self.indexOf(value) === index && index !== self.lastIndexOf(value),\n    )\n\n    if (duplicatedValues.length)\n      console.warn(\n        `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n          `', '`,\n        )}' `,\n      )\n\n    return Array.from(new Set(values))\n  }, [hasChildren, validChildren, items])\n  const childMap = useMemo(() => {\n    return Object.fromEntries(\n      validChildren.map((child) => [\n        serializeValue(child.props.value) ??\n          serializeValue(getAlternativeValue(child.props)),\n        child,\n      ]),\n    )\n  }, [validChildren])\n  const itemMap = useMemo(() => {\n    return Object.fromEntries(\n      items.map((props) => [\n        serializeValue(props.value) ??\n          serializeValue(getAlternativeValue(props)),\n        props,\n      ]),\n    )\n  }, [items])\n  const prevDefaultValues = useRef<Y[]>(defaultValues)\n  const [values, setValues] = useState<Y[]>(defaultValues)\n  const prevValues = useRef<Y[]>(defaultValues)\n  const cloneChildren = useMemo(\n    () =>\n      values.map((value) => {\n        if (hasChildren) {\n          return childMap[serializeValue(value)]\n        } else {\n          const props = itemMap[serializeValue(value)]\n\n          return props && item\n            ? cloneElement(item, { key: serializeValue(props.value), ...props })\n            : null\n        }\n      }),\n    [values, hasChildren, childMap, itemMap, item],\n  )\n\n  const onReorder = useCallback(\n    (newValues: Y[]) => {\n      setValues(newValues)\n\n      onChange?.(newValues)\n    },\n    [onChange],\n  )\n\n  const onCompleteReorder = useCallback(() => {\n    const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n    if (equal) return\n\n    prevValues.current = values\n\n    onCompleteChange?.(values)\n  }, [onCompleteChange, values])\n\n  useUpdateEffect(() => {\n    const equal =\n      JSON.stringify(defaultValues) ===\n      JSON.stringify(prevDefaultValues.current)\n\n    if (equal) return\n\n    prevValues.current = defaultValues\n    prevDefaultValues.current = defaultValues\n\n    setValues(defaultValues)\n  }, [defaultValues])\n\n  const getRootProps: PropGetter<\n    Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n    undefined,\n    ReorderGroupProps<Y>\n  > = useCallback(\n    (props = {}) =>\n      mergeProps(\n        { axis, values },\n        rest,\n        props,\n        { ref },\n        {\n          onMouseUp: onCompleteReorder,\n          onReorder,\n          onTouchEnd: onCompleteReorder,\n        },\n      )(),\n    [rest, ref, onCompleteReorder, onReorder, axis, values],\n  )\n\n  return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n  /**\n   * The label of the reorder item.\n   */\n  label?: ReactNode\n  /**\n   * The value of the reorder item.\n   */\n  value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n  ref,\n  label,\n  value,\n  ...rest\n}: UseReorderItemProps<Y>) => {\n  const { orientation } = useReorderContext()\n  const dragControls = useDragControls()\n  const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n  const [drag, setDrag] = useState<boolean>(false)\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n\n  const register = useCallback(\n    (node: HTMLElement | null) => setHasTrigger(!!node),\n    [],\n  )\n\n  useEffect(() => {\n    const unsubscribeX = x.on(\"change\", (x) => {\n      if (orientation === \"horizontal\") setDrag(x !== 0)\n    })\n    const unsubscribeY = y.on(\"change\", (y) => {\n      if (orientation === \"vertical\") setDrag(y !== 0)\n    })\n\n    return () => {\n      unsubscribeX()\n      unsubscribeY()\n    }\n  }, [orientation, x, y])\n\n  const getItemProps: PropGetter<\n    Omit<HTMLMotionProps<\"li\">, \"layout\" | \"value\"> &\n      Pick<ReorderItemProps<Y>, \"layout\">,\n    undefined,\n    ReorderItemProps<Y>\n  > = useCallback(\n    (props = {}) => {\n      const children = props.children ?? rest.children ?? label\n\n      const merged = mergeProps(\n        {\n          \"data-has-trigger\": dataAttr(hasTrigger),\n          \"data-selected\": dataAttr(drag),\n          dragControls,\n          dragListener: !hasTrigger,\n          value: value ?? getAlternativeValue({ children }),\n        },\n        props,\n        rest,\n        { ref },\n      )()\n\n      return {\n        ...merged,\n        style: { x, y, ...props.style, ...rest.style },\n        children,\n      }\n    },\n    [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n  )\n\n  const getTriggerProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(register, props.ref),\n      \"data-selected\": dataAttr(drag),\n      onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n        dragControls.start(ev),\n      ),\n    }),\n    [drag, dragControls, register],\n  )\n\n  return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n  typeof useReorderItem<Y>\n>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.js","names":[],"sources":["../../../../src/components/resizable/resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  HTMLStyledProps,\n  HTMLStyledPropsWithoutAs,\n  ThemeProps,\n} from \"../../core\"\nimport type { ResizableStyle } from \"./resizable.style\"\nimport type {\n  UseResizableItemProps,\n  UseResizableProps,\n  UseResizableTriggerProps,\n} from \"./use-resizable\"\nimport { useMemo } from \"react\"\nimport { Group, Panel, Separator } from \"react-resizable-panels\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { resizableStyle } from \"./resizable.style\"\nimport {\n  ResizableContext,\n  useResizable,\n  useResizableItem,\n  useResizableTrigger,\n} from \"./use-resizable\"\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see https://yamada-ui.com/docs/components/resizable\n */\nexport interface ResizableRootProps\n  extends\n    HTMLStyledProps,\n    ThemeProps<ResizableStyle>,\n    Omit<UseResizableProps, \"orientation\"> {}\n\nconst {\n  PropsContext: ResizablePropsContext,\n  usePropsContext: useResizablePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ResizableRootProps, ResizableStyle>(\n  \"resizable\",\n  resizableStyle,\n)\n\nexport { ResizablePropsContext, useResizablePropsContext }\n\nexport const ResizableRoot = withProvider<\n  \"div\",\n  ResizableRootProps,\n  \"orientation\"\n>(\n  ({ children, orientation: orientationProp, ...rest }) => {\n    const computedOrientation = useValue(orientationProp)\n    const { disabled, groupRef, orientation, getRootProps } = useResizable({\n      orientation: computedOrientation,\n      ...rest,\n    })\n\n    const context = useMemo(\n      () => ({ disabled, groupRef, orientation }),\n      [disabled, orientation, groupRef],\n    )\n\n    return (\n      <ResizableContext value={context}>\n        <styled.div as={Group} {...getRootProps()}>\n          {children}\n        </styled.div>\n      </ResizableContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nexport interface ResizableItemProps\n  extends HTMLStyledPropsWithoutAs, UseResizableItemProps {}\n\nexport const ResizableItem = withContext<\"div\", ResizableItemProps>((props) => {\n  const { getItemProps } = useResizableItem(props)\n\n  return <styled.div as={Panel} {...getItemProps()} />\n}, \"item\")()\n\nexport interface ResizableTriggerProps\n  extends HTMLStyledPropsWithoutAs, UseResizableTriggerProps {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLStyledProps\n}\n\nexport const ResizableTrigger = withContext<\"div\", ResizableTriggerProps>(\n  ({ children, icon, iconProps, ...rest }) => {\n    const { getIconProps, getTriggerProps } = useResizableTrigger(rest)\n\n    return (\n      <styled.div as={Separator} {...getTriggerProps()}>\n        {icon ? (\n          <ResizableIcon {...getIconProps(iconProps)}>{icon}</ResizableIcon>\n        ) : null}\n\n        {children}\n      </styled.div>\n    )\n  },\n  \"trigger\",\n)()\n\ninterface ResizableIconProps extends HTMLStyledProps {}\n\nconst ResizableIcon = withContext<\"div\", ResizableIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,aACA,cACF;AAIA,MAAa,gBAAgB,cAK1B,EAAE,UAAU,aAAa,iBAAiB,GAAG,WAAW;CAEvD,MAAM,EAAE,UAAU,UAAU,aAAa,iBAAiB,aAAa;EACrE,aAF0B,SAAS,eAEJ;EAC/B,GAAG;CACL,CAAC;CAOD,OACE,oBAAC,kBAAD;EAAkB,OANJ,eACP;GAAE;GAAU;GAAU;EAAY,IACzC;GAAC;GAAU;GAAa;EAAQ,CAID;YAC7B,oBAAC,OAAO,KAAR;GAAY,IAAI;GAAO,GAAI,aAAa;GACrC;EACS,CAAA;CACI,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,EAAE;AAKF,MAAa,gBAAgB,aAAwC,UAAU;CAC7E,MAAM,EAAE,iBAAiB,iBAAiB,KAAK;CAE/C,OAAO,oBAAC,OAAO,KAAR;EAAY,IAAI;EAAO,GAAI,aAAa;CAAI,CAAA;AACrD,GAAG,MAAM,EAAE;AAcX,MAAa,mBAAmB,aAC7B,EAAE,UAAU,MAAM,WAAW,GAAG,WAAW;CAC1C,MAAM,EAAE,cAAc,oBAAoB,oBAAoB,IAAI;CAElE,OACE,qBAAC,OAAO,KAAR;EAAY,IAAI;EAAW,GAAI,gBAAgB;YAA/C,CACG,OACC,oBAAC,eAAD;GAAe,GAAI,aAAa,SAAS;aAAI;EAAoB,CAAA,IAC/D,MAEH,QACS;;AAEhB,GACA,SACF,EAAE;AAIF,MAAM,gBAAgB,YAAuC,OAAO,MAAM,EAAE"}
+{"version":3,"file":"resizable.js","names":[],"sources":["../../../../src/components/resizable/resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  HTMLStyledProps,\n  HTMLStyledPropsWithoutAs,\n  ThemeProps,\n} from \"../../core\"\nimport type { ResizableStyle } from \"./resizable.style\"\nimport type {\n  UseResizableItemProps,\n  UseResizableProps,\n  UseResizableTriggerProps,\n} from \"./use-resizable\"\nimport { useMemo } from \"react\"\nimport { Group, Panel, Separator } from \"react-resizable-panels\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { resizableStyle } from \"./resizable.style\"\nimport {\n  ResizableContext,\n  useResizable,\n  useResizableItem,\n  useResizableTrigger,\n} from \"./use-resizable\"\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see https://yamada-ui.com/docs/components/resizable\n */\nexport interface ResizableRootProps\n  extends\n    HTMLStyledProps,\n    ThemeProps<ResizableStyle>,\n    Omit<UseResizableProps, \"orientation\"> {}\n\nconst {\n  PropsContext: ResizablePropsContext,\n  usePropsContext: useResizablePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ResizableRootProps, ResizableStyle>(\n  \"resizable\",\n  resizableStyle,\n)\n\nexport { ResizablePropsContext, useResizablePropsContext }\n\nexport const ResizableRoot = withProvider<\n  \"div\",\n  ResizableRootProps,\n  \"orientation\"\n>(\n  ({ children, orientation: orientationProp, ...rest }) => {\n    const computedOrientation = useValue(orientationProp)\n    const { disabled, groupRef, orientation, getRootProps } = useResizable({\n      orientation: computedOrientation,\n      ...rest,\n    })\n\n    const context = useMemo(\n      () => ({ disabled, groupRef, orientation }),\n      [disabled, orientation, groupRef],\n    )\n\n    return (\n      <ResizableContext value={context}>\n        <styled.div as={Group} {...getRootProps()}>\n          {children}\n        </styled.div>\n      </ResizableContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nexport interface ResizableItemProps\n  extends HTMLStyledPropsWithoutAs, UseResizableItemProps {}\n\nexport const ResizableItem = withContext<\"div\", ResizableItemProps>((props) => {\n  const { getItemProps } = useResizableItem(props)\n\n  return <styled.div as={Panel} {...getItemProps()} />\n}, \"item\")()\n\nexport interface ResizableTriggerProps\n  extends HTMLStyledPropsWithoutAs, UseResizableTriggerProps {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLStyledProps\n}\n\nexport const ResizableTrigger = withContext<\"div\", ResizableTriggerProps>(\n  ({ children, icon, iconProps, ...rest }) => {\n    const { getIconProps, getTriggerProps } = useResizableTrigger(rest)\n\n    return (\n      <styled.div as={Separator} {...getTriggerProps()}>\n        {icon ? (\n          <ResizableIcon {...getIconProps(iconProps)}>{icon}</ResizableIcon>\n        ) : null}\n\n        {children}\n      </styled.div>\n    )\n  },\n  \"trigger\",\n)()\n\ninterface ResizableIconProps extends HTMLStyledProps {}\n\nconst ResizableIcon = withContext<\"div\", ResizableIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,aACA,cACF;AAIA,MAAa,gBAAgB,cAK1B,EAAE,UAAU,aAAa,iBAAiB,GAAG,WAAW;CAEvD,MAAM,EAAE,UAAU,UAAU,aAAa,iBAAiB,aAAa;EACrE,aAF0B,SAAS,eAEJ;EAC/B,GAAG;CACL,CAAC;CAOD,OACE,oBAAC,kBAAD;EAAkB,OANJ,eACP;GAAE;GAAU;GAAU;EAAY,IACzC;GAAC;GAAU;GAAa;EAAQ,CAID;YAC7B,oBAAC,OAAO,KAAR;GAAY,IAAI;GAAO,GAAI,aAAa;GACrC;EACS,CAAA;CACI,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,CAAC,CAAC;AAKF,MAAa,gBAAgB,aAAwC,UAAU;CAC7E,MAAM,EAAE,iBAAiB,iBAAiB,KAAK;CAE/C,OAAO,oBAAC,OAAO,KAAR;EAAY,IAAI;EAAO,GAAI,aAAa;CAAI,CAAA;AACrD,GAAG,MAAM,CAAC,CAAC;AAcX,MAAa,mBAAmB,aAC7B,EAAE,UAAU,MAAM,WAAW,GAAG,WAAW;CAC1C,MAAM,EAAE,cAAc,oBAAoB,oBAAoB,IAAI;CAElE,OACE,qBAAC,OAAO,KAAR;EAAY,IAAI;EAAW,GAAI,gBAAgB;YAA/C,CACG,OACC,oBAAC,eAAD;GAAe,GAAI,aAAa,SAAS;aAAI;EAAoB,CAAA,IAC/D,MAEH,QACS;;AAEhB,GACA,SACF,CAAC,CAAC;AAIF,MAAM,gBAAgB,YAAuC,OAAO,MAAM,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-resizable.js","names":["createContext"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type {\n  GroupImperativeHandle,\n  GroupProps,\n  LayoutStorage,\n  PanelImperativeHandle,\n  PanelProps,\n  SeparatorProps,\n} from \"react-resizable-panels\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport {\n  useGroupRef,\n  usePanelRef,\n  useDefaultLayout as useResizableLayout,\n} from \"react-resizable-panels\"\nimport { mergeProps } from \"../../core\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  fnAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<UseResizableReturn, \"getRootProps\"> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n  {\n    name: \"ResizableContext\",\n  },\n)\n\nexport { ResizableContext, useResizableContext, useResizableLayout }\n\nexport interface ResizableStorage extends LayoutStorage {}\nexport interface ResizableRootControl extends GroupImperativeHandle {}\nexport interface ResizableItemControl extends PanelImperativeHandle {}\n\nexport interface UseResizableProps\n  extends\n    HTMLProps,\n    Omit<GroupProps, \"color\" | \"content\" | \"elementRef\" | \"groupRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableRootControl>\n}\n\nexport const useResizable = ({\n  controlRef,\n  disabled,\n  orientation = \"horizontal\",\n  ...rest\n}: UseResizableProps = {}) => {\n  const groupRef = useGroupRef()\n\n  const getRootProps: PropGetter<GroupProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps({ disabled, orientation }, rest, props)()\n\n      return {\n        ...merged,\n        style: {\n          height: undefined,\n          width: undefined,\n          ...rest.style,\n          ...props.style,\n        },\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        groupRef: mergeRefs(props.groupRef, groupRef, controlRef),\n        onLayoutChange: fnAll(props.onLayoutChange, rest.onLayoutChange),\n        onLayoutChanged: fnAll(props.onLayoutChanged, rest.onLayoutChanged),\n      }\n    },\n    [disabled, orientation, groupRef, controlRef, rest],\n  )\n\n  return {\n    disabled,\n    groupRef,\n    orientation,\n    getRootProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n  extends\n    HTMLProps,\n    Omit<PanelProps, \"color\" | \"content\" | \"elementRef\" | \"panelRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableItemControl>\n}\n\nexport const useResizableItem = ({\n  controlRef,\n  ...rest\n}: UseResizableItemProps) => {\n  const panelRef = usePanelRef()\n\n  const getItemProps: PropGetter<PanelProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(rest, props)()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        panelRef: mergeRefs(props.panelRef, panelRef, controlRef),\n        onResize: fnAll(props.onResize, rest.onResize),\n      }\n    },\n    [panelRef, controlRef, rest],\n  )\n\n  return {\n    panelRef,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n  extends HTMLProps, Omit<SeparatorProps, \"color\" | \"content\" | \"elementRef\"> {}\n\nexport const useResizableTrigger = ({\n  disabled,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const {\n    disabled: groupDisabled,\n    groupRef,\n    orientation,\n  } = useResizableContext()\n  const trulyDisabled = disabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = groupRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = Object.keys(layout).length\n      const size = 100 / count\n      const nextLayout = Object.fromEntries(\n        Object.keys(layout).map((key) => [key, size]),\n      )\n\n      groupRef.current?.setLayout(nextLayout)\n    },\n    [groupRef],\n  )\n\n  const getTriggerProps: PropGetter<SeparatorProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        {\n          \"aria-disabled\": ariaAttr(trulyDisabled),\n          \"aria-orientation\": orientation,\n          \"data-disabled\": dataAttr(trulyDisabled),\n          disabled: trulyDisabled,\n          tabIndex: trulyDisabled ? -1 : 0,\n        },\n        props,\n        rest,\n        { onDoubleClick },\n      )()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n      }\n    },\n    [orientation, trulyDisabled, rest, onDoubleClick],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-icon\": \"\",\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;AA6BA,MAAM,CAAC,kBAAkB,uBAAuBA,gBAC9C,EACE,MAAM,mBACR,CACF;AAkBA,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,CAAC,MAAM;CAC5B,MAAM,WAAW,YAAY;CAuB7B,OAAO;EACL;EACA;EACA;EACA,cAzB2C,aAC1C,QAAQ,CAAC,MAAM;GAGd,OAAO;IACL,GAHa,WAAW;KAAE;KAAU;IAAY,GAAG,MAAM,KAAK,EAGtD;IACR,OAAO;KACL,QAAQ,KAAA;KACR,OAAO,KAAA;KACP,GAAG,KAAK;KACR,GAAG,MAAM;IACX;IACA,YAAY,UAAU,MAAM,YAAY,KAAK,GAAG;IAChD,UAAU,UAAU,MAAM,UAAU,UAAU,UAAU;IACxD,iBAAA,GAAA,cAAA,OAAsB,MAAM,gBAAgB,KAAK,cAAc;IAC/D,kBAAA,GAAA,cAAA,OAAuB,MAAM,iBAAiB,KAAK,eAAe;GACpE;EACF,GACA;GAAC;GAAU;GAAa;GAAU;GAAY;EAAI,CAOvC;CACb;AACF;AAcA,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,WAAW,YAAY;CAgB7B,OAAO;EACL;EACA,cAhB2C,aAC1C,QAAQ,CAAC,MAAM;GAGd,OAAO;IACL,GAHa,WAAW,MAAM,KAAK,EAG3B;IACR,YAAY,UAAU,MAAM,YAAY,KAAK,GAAG;IAChD,UAAU,UAAU,MAAM,UAAU,UAAU,UAAU;IACxD,WAAA,GAAA,cAAA,OAAgB,MAAM,UAAU,KAAK,QAAQ;GAC/C;EACF,GACA;GAAC;GAAU;GAAY;EAAI,CAKhB;CACb;AACF;AAOA,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,oBAAoB;CACxB,MAAM,gBAAgB,YAAY;CAElC,MAAM,gBAAgB,aACnB,OAAmC;EAClC,GAAG,eAAe;EAElB,MAAM,SAAS,SAAS,SAAS,UAAU;EAE3C,IAAI,CAAC,QAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,MAAM,EAAE;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,MAAM,EAAE,KAAK,QAAQ,CAAC,KAAK,IAAI,CAAC,CAC9C;EAEA,SAAS,SAAS,UAAU,UAAU;CACxC,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,kBAA8C,aACjD,QAAQ,CAAC,MAAM;EAcd,OAAO;GACL,GAda,WACb;IACE,kBAAA,GAAA,cAAA,UAA0B,aAAa;IACvC,oBAAoB;IACpB,kBAAA,GAAA,cAAA,UAA0B,aAAa;IACvC,UAAU;IACV,UAAU,gBAAgB,KAAK;GACjC,GACA,OACA,MACA,EAAE,cAAc,CAClB,EAGU;GACR,YAAY,UAAU,MAAM,YAAY,KAAK,GAAG;EAClD;CACF,GACA;EAAC;EAAa;EAAe;EAAM;CAAa,CAClD;CAUA,OAAO;EACL,cAT+B,aAC9B,QAAQ,CAAC,OAAO;GACf,aAAa;GACb,GAAG;EACL,IACA,CAAC,CAIU;EACX;CACF;AACF"}
+{"version":3,"file":"use-resizable.js","names":["createContext"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type {\n  GroupImperativeHandle,\n  GroupProps,\n  LayoutStorage,\n  PanelImperativeHandle,\n  PanelProps,\n  SeparatorProps,\n} from \"react-resizable-panels\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport {\n  useGroupRef,\n  usePanelRef,\n  useDefaultLayout as useResizableLayout,\n} from \"react-resizable-panels\"\nimport { mergeProps } from \"../../core\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  fnAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<UseResizableReturn, \"getRootProps\"> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n  {\n    name: \"ResizableContext\",\n  },\n)\n\nexport { ResizableContext, useResizableContext, useResizableLayout }\n\nexport interface ResizableStorage extends LayoutStorage {}\nexport interface ResizableRootControl extends GroupImperativeHandle {}\nexport interface ResizableItemControl extends PanelImperativeHandle {}\n\nexport interface UseResizableProps\n  extends\n    HTMLProps,\n    Omit<GroupProps, \"color\" | \"content\" | \"elementRef\" | \"groupRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableRootControl>\n}\n\nexport const useResizable = ({\n  controlRef,\n  disabled,\n  orientation = \"horizontal\",\n  ...rest\n}: UseResizableProps = {}) => {\n  const groupRef = useGroupRef()\n\n  const getRootProps: PropGetter<GroupProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps({ disabled, orientation }, rest, props)()\n\n      return {\n        ...merged,\n        style: {\n          height: undefined,\n          width: undefined,\n          ...rest.style,\n          ...props.style,\n        },\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        groupRef: mergeRefs(props.groupRef, groupRef, controlRef),\n        onLayoutChange: fnAll(props.onLayoutChange, rest.onLayoutChange),\n        onLayoutChanged: fnAll(props.onLayoutChanged, rest.onLayoutChanged),\n      }\n    },\n    [disabled, orientation, groupRef, controlRef, rest],\n  )\n\n  return {\n    disabled,\n    groupRef,\n    orientation,\n    getRootProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n  extends\n    HTMLProps,\n    Omit<PanelProps, \"color\" | \"content\" | \"elementRef\" | \"panelRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableItemControl>\n}\n\nexport const useResizableItem = ({\n  controlRef,\n  ...rest\n}: UseResizableItemProps) => {\n  const panelRef = usePanelRef()\n\n  const getItemProps: PropGetter<PanelProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(rest, props)()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        panelRef: mergeRefs(props.panelRef, panelRef, controlRef),\n        onResize: fnAll(props.onResize, rest.onResize),\n      }\n    },\n    [panelRef, controlRef, rest],\n  )\n\n  return {\n    panelRef,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n  extends HTMLProps, Omit<SeparatorProps, \"color\" | \"content\" | \"elementRef\"> {}\n\nexport const useResizableTrigger = ({\n  disabled,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const {\n    disabled: groupDisabled,\n    groupRef,\n    orientation,\n  } = useResizableContext()\n  const trulyDisabled = disabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = groupRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = Object.keys(layout).length\n      const size = 100 / count\n      const nextLayout = Object.fromEntries(\n        Object.keys(layout).map((key) => [key, size]),\n      )\n\n      groupRef.current?.setLayout(nextLayout)\n    },\n    [groupRef],\n  )\n\n  const getTriggerProps: PropGetter<SeparatorProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        {\n          \"aria-disabled\": ariaAttr(trulyDisabled),\n          \"aria-orientation\": orientation,\n          \"data-disabled\": dataAttr(trulyDisabled),\n          disabled: trulyDisabled,\n          tabIndex: trulyDisabled ? -1 : 0,\n        },\n        props,\n        rest,\n        { onDoubleClick },\n      )()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n      }\n    },\n    [orientation, trulyDisabled, rest, onDoubleClick],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-icon\": \"\",\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;AA6BA,MAAM,CAAC,kBAAkB,uBAAuBA,gBAC9C,EACE,MAAM,mBACR,CACF;AAkBA,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,CAAC,MAAM;CAC5B,MAAM,WAAW,YAAY;CAuB7B,OAAO;EACL;EACA;EACA;EACA,cAzB2C,aAC1C,QAAQ,CAAC,MAAM;GAGd,OAAO;IACL,GAHa,WAAW;KAAE;KAAU;IAAY,GAAG,MAAM,KAAK,CAAC,CAGvD;IACR,OAAO;KACL,QAAQ,KAAA;KACR,OAAO,KAAA;KACP,GAAG,KAAK;KACR,GAAG,MAAM;IACX;IACA,YAAY,UAAU,MAAM,YAAY,KAAK,GAAG;IAChD,UAAU,UAAU,MAAM,UAAU,UAAU,UAAU;IACxD,iBAAA,GAAA,cAAA,MAAA,CAAsB,MAAM,gBAAgB,KAAK,cAAc;IAC/D,kBAAA,GAAA,cAAA,MAAA,CAAuB,MAAM,iBAAiB,KAAK,eAAe;GACpE;EACF,GACA;GAAC;GAAU;GAAa;GAAU;GAAY;EAAI,CAOvC;CACb;AACF;AAcA,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,WAAW,YAAY;CAgB7B,OAAO;EACL;EACA,cAhB2C,aAC1C,QAAQ,CAAC,MAAM;GAGd,OAAO;IACL,GAHa,WAAW,MAAM,KAAK,CAAC,CAG5B;IACR,YAAY,UAAU,MAAM,YAAY,KAAK,GAAG;IAChD,UAAU,UAAU,MAAM,UAAU,UAAU,UAAU;IACxD,WAAA,GAAA,cAAA,MAAA,CAAgB,MAAM,UAAU,KAAK,QAAQ;GAC/C;EACF,GACA;GAAC;GAAU;GAAY;EAAI,CAKhB;CACb;AACF;AAOA,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,oBAAoB;CACxB,MAAM,gBAAgB,YAAY;CAElC,MAAM,gBAAgB,aACnB,OAAmC;EAClC,GAAG,eAAe;EAElB,MAAM,SAAS,SAAS,SAAS,UAAU;EAE3C,IAAI,CAAC,QAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,MAAM,CAAC,CAAC;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,MAAM,CAAC,CAAC,KAAK,QAAQ,CAAC,KAAK,IAAI,CAAC,CAC9C;EAEA,SAAS,SAAS,UAAU,UAAU;CACxC,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,kBAA8C,aACjD,QAAQ,CAAC,MAAM;EAcd,OAAO;GACL,GAda,WACb;IACE,kBAAA,GAAA,cAAA,SAAA,CAA0B,aAAa;IACvC,oBAAoB;IACpB,kBAAA,GAAA,cAAA,SAAA,CAA0B,aAAa;IACvC,UAAU;IACV,UAAU,gBAAgB,KAAK;GACjC,GACA,OACA,MACA,EAAE,cAAc,CAClB,CAAC,CAGS;GACR,YAAY,UAAU,MAAM,YAAY,KAAK,GAAG;EAClD;CACF,GACA;EAAC;EAAa;EAAe;EAAM;CAAa,CAClD;CAUA,OAAO;EACL,cAT+B,aAC9B,QAAQ,CAAC,OAAO;GACf,aAAa;GACb,GAAG;EACL,IACA,CAAC,CAIU;EACX;CACF;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","names":["motion"],"sources":["../../../../src/components/ripple/ripple.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Key } from \"react\"\nimport type { ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RippleStyle } from \"./ripple.style\"\nimport type { RippleOptions } from \"./use-ripple\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createComponent } from \"../../core\"\nimport { handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rippleStyle } from \"./ripple.style\"\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), max)\n\nexport interface RippleProps\n  extends HTMLMotionProps<\"span\">, ThemeProps<RippleStyle> {\n  /**\n   * The ripples to use.\n   */\n  ripples: RippleOptions[]\n  /**\n   * The callback invoked when a ripple is cleared.\n   */\n  onClear: (key: Key) => void\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nconst {\n  PropsContext: RipplePropsContext,\n  usePropsContext: useRipplePropsContext,\n  withContext,\n} = createComponent<RippleProps, RippleStyle>(\"ripple\", rippleStyle)\n\nexport { RipplePropsContext, useRipplePropsContext }\n\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see https://yamada-ui.com/docs/components/ripple\n */\nexport const Ripple = withContext<\"span\", RippleProps>(\n  ({\n    style,\n    color = \"currentColor\",\n    disabled,\n    ripples,\n    onAnimationComplete,\n    onClear,\n    ...rest\n  }) => {\n    if (disabled) return null\n\n    return (\n      <>\n        {ripples.map(({ key, size, x, y }) => {\n          const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5)\n\n          return (\n            <AnimatePresence key={key} mode=\"popLayout\">\n              <motion.span\n                style={{\n                  height: `${size}px`,\n                  left: x,\n                  pointerEvents: \"none\",\n                  position: \"absolute\",\n                  top: y,\n                  transformOrigin: \"center\",\n                  width: `${size}px`,\n                  ...style,\n                }}\n                animate={{ opacity: 0, transform: \"scale(2)\" }}\n                bgColor={color}\n                exit={{ opacity: 0 }}\n                initial={{ opacity: 0.35, transform: \"scale(0)\" }}\n                transition={{ duration }}\n                {...rest}\n                onAnimationComplete={handlerAll(onAnimationComplete, () =>\n                  onClear(key),\n                )}\n              />\n            </AnimatePresence>\n          )\n        })}\n      </>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;AAaA,MAAM,SAAS,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAoBpC,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,UAAU,WAAW;;;;;;AASnE,MAAa,SAAS,aACnB,EACC,OACA,QAAQ,gBACR,UACA,SACA,qBACA,SACA,GAAG,WACC;CACJ,IAAI,UAAU,OAAO;CAErB,OACE,oBAAA,UAAA,EAAA,UACG,QAAQ,KAAK,EAAE,KAAK,MAAM,GAAG,QAAQ;EACpC,MAAM,WAAW,MAAM,MAAO,MAAM,IAAK,OAAO,MAAM,MAAO,EAAG;EAEhE,OACE,oBAAC,iBAAD;GAA2B,MAAK;aAC9B,oBAACA,SAAO,MAAR;IACE,OAAO;KACL,QAAQ,GAAG,KAAK;KAChB,MAAM;KACN,eAAe;KACf,UAAU;KACV,KAAK;KACL,iBAAiB;KACjB,OAAO,GAAG,KAAK;KACf,GAAG;IACL;IACA,SAAS;KAAE,SAAS;KAAG,WAAW;IAAW;IAC7C,SAAS;IACT,MAAM,EAAE,SAAS,EAAE;IACnB,SAAS;KAAE,SAAS;KAAM,WAAW;IAAW;IAChD,YAAY,EAAE,SAAS;IACvB,GAAI;IACJ,sBAAA,GAAA,cAAA,YAAgC,2BAC9B,QAAQ,GAAG,CACb;GACD,CAAA;EACc,GAtBK,GAsBL;CAErB,CAAC,EACD,CAAA;AAEN,CACF,EAAE"}
+{"version":3,"file":"ripple.js","names":["motion"],"sources":["../../../../src/components/ripple/ripple.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Key } from \"react\"\nimport type { ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RippleStyle } from \"./ripple.style\"\nimport type { RippleOptions } from \"./use-ripple\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createComponent } from \"../../core\"\nimport { handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rippleStyle } from \"./ripple.style\"\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), max)\n\nexport interface RippleProps\n  extends HTMLMotionProps<\"span\">, ThemeProps<RippleStyle> {\n  /**\n   * The ripples to use.\n   */\n  ripples: RippleOptions[]\n  /**\n   * The callback invoked when a ripple is cleared.\n   */\n  onClear: (key: Key) => void\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nconst {\n  PropsContext: RipplePropsContext,\n  usePropsContext: useRipplePropsContext,\n  withContext,\n} = createComponent<RippleProps, RippleStyle>(\"ripple\", rippleStyle)\n\nexport { RipplePropsContext, useRipplePropsContext }\n\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see https://yamada-ui.com/docs/components/ripple\n */\nexport const Ripple = withContext<\"span\", RippleProps>(\n  ({\n    style,\n    color = \"currentColor\",\n    disabled,\n    ripples,\n    onAnimationComplete,\n    onClear,\n    ...rest\n  }) => {\n    if (disabled) return null\n\n    return (\n      <>\n        {ripples.map(({ key, size, x, y }) => {\n          const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5)\n\n          return (\n            <AnimatePresence key={key} mode=\"popLayout\">\n              <motion.span\n                style={{\n                  height: `${size}px`,\n                  left: x,\n                  pointerEvents: \"none\",\n                  position: \"absolute\",\n                  top: y,\n                  transformOrigin: \"center\",\n                  width: `${size}px`,\n                  ...style,\n                }}\n                animate={{ opacity: 0, transform: \"scale(2)\" }}\n                bgColor={color}\n                exit={{ opacity: 0 }}\n                initial={{ opacity: 0.35, transform: \"scale(0)\" }}\n                transition={{ duration }}\n                {...rest}\n                onAnimationComplete={handlerAll(onAnimationComplete, () =>\n                  onClear(key),\n                )}\n              />\n            </AnimatePresence>\n          )\n        })}\n      </>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;AAaA,MAAM,SAAS,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAoBpC,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,UAAU,WAAW;;;;;;AASnE,MAAa,SAAS,aACnB,EACC,OACA,QAAQ,gBACR,UACA,SACA,qBACA,SACA,GAAG,WACC;CACJ,IAAI,UAAU,OAAO;CAErB,OACE,oBAAA,UAAA,EAAA,UACG,QAAQ,KAAK,EAAE,KAAK,MAAM,GAAG,QAAQ;EACpC,MAAM,WAAW,MAAM,MAAO,MAAM,IAAK,OAAO,MAAM,MAAO,EAAG;EAEhE,OACE,oBAAC,iBAAD;GAA2B,MAAK;aAC9B,oBAACA,SAAO,MAAR;IACE,OAAO;KACL,QAAQ,GAAG,KAAK;KAChB,MAAM;KACN,eAAe;KACf,UAAU;KACV,KAAK;KACL,iBAAiB;KACjB,OAAO,GAAG,KAAK;KACf,GAAG;IACL;IACA,SAAS;KAAE,SAAS;KAAG,WAAW;IAAW;IAC7C,SAAS;IACT,MAAM,EAAE,SAAS,EAAE;IACnB,SAAS;KAAE,SAAS;KAAM,WAAW;IAAW;IAChD,YAAY,EAAE,SAAS;IACvB,GAAI;IACJ,sBAAA,GAAA,cAAA,WAAA,CAAgC,2BAC9B,QAAQ,GAAG,CACb;GACD,CAAA;EACc,GAtBK,GAsBL;CAErB,CAAC,EACD,CAAA;AAEN,CACF,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-ripple.js","names":[],"sources":["../../../../src/components/ripple/use-ripple.ts"],"sourcesContent":["\"use client\"\n\nimport type { Key, MouseEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport { handlerAll, uuid } from \"../../utils\"\n\nexport interface RippleOptions {\n  key: Key\n  size: number\n  x: number\n  y: number\n}\n\nexport interface UseRippleProps<Y = HTMLElement> {\n  disabled?: boolean\n  onClick?: MouseEventHandler<Y>\n}\n\nexport const useRipple = <Y = HTMLElement>({\n  disabled,\n  ...rest\n}: UseRippleProps<Y> = {}) => {\n  const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n  const onClick: MouseEventHandler<Y> = useCallback(\n    (ev) => {\n      if (disabled) return\n\n      const trigger = ev.currentTarget as unknown as Element\n\n      const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n      const rect = trigger.getBoundingClientRect()\n\n      setRipples((prev) => [\n        ...prev,\n        {\n          key: uuid(),\n          size,\n          x: ev.clientX - rect.x - size / 2,\n          y: ev.clientY - rect.y - size / 2,\n        },\n      ])\n    },\n    [disabled],\n  )\n\n  const onClear = useCallback((key: Key) => {\n    setRipples((prev) => prev.filter((item) => item.key !== key))\n  }, [])\n\n  return {\n    ripples,\n    onClear,\n    onClick: handlerAll(onClick, rest.onClick),\n  }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;AAkBA,MAAa,aAA8B,EACzC,UACA,GAAG,SACkB,CAAC,MAAM;CAC5B,MAAM,CAAC,SAAS,cAAc,SAA0B,CAAC,CAAC;CAE1D,MAAM,UAAgC,aACnC,OAAO;EACN,IAAI,UAAU;EAEd,MAAM,UAAU,GAAG;EAEnB,MAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;EAC/D,MAAM,OAAO,QAAQ,sBAAsB;EAE3C,YAAY,SAAS,CACnB,GAAG,MACH;GACE,MAAA,GAAA,cAAA,MAAU;GACV;GACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;GAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;EAClC,CACF,CAAC;CACH,GACA,CAAC,QAAQ,CACX;CAMA,OAAO;EACL;EACA,SANc,aAAa,QAAa;GACxC,YAAY,SAAS,KAAK,QAAQ,SAAS,KAAK,QAAQ,GAAG,CAAC;EAC9D,GAAG,CAAC,CAII;EACN,UAAA,GAAA,cAAA,YAAoB,SAAS,KAAK,OAAO;CAC3C;AACF"}
+{"version":3,"file":"use-ripple.js","names":[],"sources":["../../../../src/components/ripple/use-ripple.ts"],"sourcesContent":["\"use client\"\n\nimport type { Key, MouseEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport { handlerAll, uuid } from \"../../utils\"\n\nexport interface RippleOptions {\n  key: Key\n  size: number\n  x: number\n  y: number\n}\n\nexport interface UseRippleProps<Y = HTMLElement> {\n  disabled?: boolean\n  onClick?: MouseEventHandler<Y>\n}\n\nexport const useRipple = <Y = HTMLElement>({\n  disabled,\n  ...rest\n}: UseRippleProps<Y> = {}) => {\n  const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n  const onClick: MouseEventHandler<Y> = useCallback(\n    (ev) => {\n      if (disabled) return\n\n      const trigger = ev.currentTarget as unknown as Element\n\n      const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n      const rect = trigger.getBoundingClientRect()\n\n      setRipples((prev) => [\n        ...prev,\n        {\n          key: uuid(),\n          size,\n          x: ev.clientX - rect.x - size / 2,\n          y: ev.clientY - rect.y - size / 2,\n        },\n      ])\n    },\n    [disabled],\n  )\n\n  const onClear = useCallback((key: Key) => {\n    setRipples((prev) => prev.filter((item) => item.key !== key))\n  }, [])\n\n  return {\n    ripples,\n    onClear,\n    onClick: handlerAll(onClick, rest.onClick),\n  }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;AAkBA,MAAa,aAA8B,EACzC,UACA,GAAG,SACkB,CAAC,MAAM;CAC5B,MAAM,CAAC,SAAS,cAAc,SAA0B,CAAC,CAAC;CAE1D,MAAM,UAAgC,aACnC,OAAO;EACN,IAAI,UAAU;EAEd,MAAM,UAAU,GAAG;EAEnB,MAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;EAC/D,MAAM,OAAO,QAAQ,sBAAsB;EAE3C,YAAY,SAAS,CACnB,GAAG,MACH;GACE,MAAA,GAAA,cAAA,KAAA,CAAU;GACV;GACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;GAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;EAClC,CACF,CAAC;CACH,GACA,CAAC,QAAQ,CACX;CAMA,OAAO;EACL;EACA,SANc,aAAa,QAAa;GACxC,YAAY,SAAS,KAAK,QAAQ,SAAS,KAAK,QAAQ,GAAG,CAAC;EAC9D,GAAG,CAAC,CAII;EACN,UAAA,GAAA,cAAA,WAAA,CAAoB,SAAS,KAAK,OAAO;CAC3C;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"rotate.js","names":["motion"],"sources":["../../../../src/components/rotate/rotate.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RotateStyle } from \"./rotate.style\"\nimport { useAnimation } from \"motion/react\"\nimport { useCallback } from \"react\"\nimport {\n  createComponent,\n  useInjectVarsIntoCss,\n  useInjectVarsIntoProps,\n} from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rotateStyle } from \"./rotate.style\"\n\nexport interface RotateProps\n  extends\n    Omit<HTMLMotionProps<\"button\">, \"onChange\" | \"rotate\">,\n    ThemeProps<RotateStyle> {\n  /**\n   * Passing React elements to \"from\" is required.\n   */\n  from: ReactNode\n  /**\n   * Passing React elements to \"to\" is required.\n   */\n  to: ReactNode\n  /**\n   * You can set the initial state.\n   *\n   * @default 'from'\n   */\n  defaultValue?: KeyframeIdent\n  /**\n   * The animation delay.\n   *\n   * @default 0\n   */\n  delay?: number\n  /**\n   * If `true`, the component is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The animation duration.\n   *\n   * @default 0.4\n   */\n  duration?: number\n  /**\n   * If `true`, the component is readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The animation rotation.\n   *\n   * @default 45\n   */\n  rotate?: number\n  /**\n   * Use this when you want to control the animation from outside the component.\n   */\n  value?: KeyframeIdent\n  /**\n   * This is a callback function that is called when the animation state changes.\n   */\n  onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n  PropsContext: RotatePropsContext,\n  usePropsContext: useRotatePropsContext,\n  withContext,\n} = createComponent<RotateProps, RotateStyle>(\"rotate\", rotateStyle)\n\nexport { RotatePropsContext, useRotatePropsContext }\n\n/**\n * `Rotate` is an animation component that alternately rotates two elements as they switch.\n *\n * @see https://yamada-ui.com/docs/components/rotate\n */\nexport const Rotate = withContext<\"button\", RotateProps>(\n  ({\n    defaultValue = \"from\",\n    delay = 0,\n    disabled,\n    duration = 0.4,\n    from,\n    readOnly,\n    rotate = 45,\n    to,\n    value: valueProp,\n    onChange,\n    onClick: onClickProp,\n    ...rest\n  }) => {\n    const opacity = \"var(--opacity)\"\n    const animate = useAnimation()\n    const [value, setValue] = useControllableState<KeyframeIdent>({\n      defaultValue,\n      value: valueProp,\n      onChange,\n    })\n\n    const onClick = useCallback(async () => {\n      if (readOnly) return\n\n      await animate.start({\n        opacity: 0,\n        rotate: `${rotate}deg`,\n        transition: { delay, duration },\n      })\n\n      setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n\n      await animate.start({\n        opacity: \"var(--opacity)\",\n        rotate: \"0deg\",\n        transition: { duration },\n      })\n    }, [readOnly, animate, rotate, duration, delay, setValue])\n\n    return (\n      <motion.button\n        type=\"button\"\n        data-disabled={dataAttr(disabled)}\n        data-readonly={dataAttr(readOnly)}\n        data-value={value}\n        animate={animate}\n        custom={{ rotate }}\n        disabled={disabled}\n        initial={{ opacity, rotate: \"0deg\" }}\n        onClick={handlerAll(onClickProp, onClick)}\n        {...rest}\n      >\n        {value === \"from\" ? from : to}\n      </motion.button>\n    )\n  },\n)(undefined, (props) => {\n  const css = useInjectVarsIntoCss(props.css, { opacity: \"opacity\" })\n  const rest = useInjectVarsIntoProps(props, { opacity: \"opacity\" })\n\n  return { ...rest, css, opacity: \"{opacity}\" }\n})\n"],"mappings":";;;;;;;;;;;AA4EA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,UAAU,WAAW;;;;;;AASnE,MAAa,SAAS,aACnB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,UACA,SAAS,IACT,IACA,OAAO,WACP,UACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,UAAU;CAChB,MAAM,UAAU,aAAa;CAC7B,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D;EACA,OAAO;EACP;CACF,CAAC;CAED,MAAM,UAAU,YAAY,YAAY;EACtC,IAAI,UAAU;EAEd,MAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ,GAAG,OAAO;GAClB,YAAY;IAAE;IAAO;GAAS;EAChC,CAAC;EAED,UAAU,SAAU,SAAS,SAAS,OAAO,MAAO;EAEpD,MAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ;GACR,YAAY,EAAE,SAAS;EACzB,CAAC;CACH,GAAG;EAAC;EAAU;EAAS;EAAQ;EAAU;EAAO;CAAQ,CAAC;CAEzD,OACE,oBAACA,SAAO,QAAR;EACE,MAAK;EACL,kBAAA,GAAA,cAAA,UAAwB,QAAQ;EAChC,kBAAA,GAAA,cAAA,UAAwB,QAAQ;EAChC,cAAY;EACH;EACT,QAAQ,EAAE,OAAO;EACP;EACV,SAAS;GAAE;GAAS,QAAQ;EAAO;EACnC,UAAA,GAAA,cAAA,YAAoB,aAAa,OAAO;EACxC,GAAI;YAEH,UAAU,SAAS,OAAO;CACd,CAAA;AAEnB,CACF,EAAE,KAAA,IAAY,UAAU;CACtB,MAAM,MAAM,qBAAqB,MAAM,KAAK,EAAE,SAAS,UAAU,CAAC;CAGlE,OAAO;EAAE,GAFI,uBAAuB,OAAO,EAAE,SAAS,UAAU,CAEjD;EAAG;EAAK,SAAS;CAAY;AAC9C,CAAC"}
+{"version":3,"file":"rotate.js","names":["motion"],"sources":["../../../../src/components/rotate/rotate.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RotateStyle } from \"./rotate.style\"\nimport { useAnimation } from \"motion/react\"\nimport { useCallback } from \"react\"\nimport {\n  createComponent,\n  useInjectVarsIntoCss,\n  useInjectVarsIntoProps,\n} from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rotateStyle } from \"./rotate.style\"\n\nexport interface RotateProps\n  extends\n    Omit<HTMLMotionProps<\"button\">, \"onChange\" | \"rotate\">,\n    ThemeProps<RotateStyle> {\n  /**\n   * Passing React elements to \"from\" is required.\n   */\n  from: ReactNode\n  /**\n   * Passing React elements to \"to\" is required.\n   */\n  to: ReactNode\n  /**\n   * You can set the initial state.\n   *\n   * @default 'from'\n   */\n  defaultValue?: KeyframeIdent\n  /**\n   * The animation delay.\n   *\n   * @default 0\n   */\n  delay?: number\n  /**\n   * If `true`, the component is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The animation duration.\n   *\n   * @default 0.4\n   */\n  duration?: number\n  /**\n   * If `true`, the component is readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The animation rotation.\n   *\n   * @default 45\n   */\n  rotate?: number\n  /**\n   * Use this when you want to control the animation from outside the component.\n   */\n  value?: KeyframeIdent\n  /**\n   * This is a callback function that is called when the animation state changes.\n   */\n  onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n  PropsContext: RotatePropsContext,\n  usePropsContext: useRotatePropsContext,\n  withContext,\n} = createComponent<RotateProps, RotateStyle>(\"rotate\", rotateStyle)\n\nexport { RotatePropsContext, useRotatePropsContext }\n\n/**\n * `Rotate` is an animation component that alternately rotates two elements as they switch.\n *\n * @see https://yamada-ui.com/docs/components/rotate\n */\nexport const Rotate = withContext<\"button\", RotateProps>(\n  ({\n    defaultValue = \"from\",\n    delay = 0,\n    disabled,\n    duration = 0.4,\n    from,\n    readOnly,\n    rotate = 45,\n    to,\n    value: valueProp,\n    onChange,\n    onClick: onClickProp,\n    ...rest\n  }) => {\n    const opacity = \"var(--opacity)\"\n    const animate = useAnimation()\n    const [value, setValue] = useControllableState<KeyframeIdent>({\n      defaultValue,\n      value: valueProp,\n      onChange,\n    })\n\n    const onClick = useCallback(async () => {\n      if (readOnly) return\n\n      await animate.start({\n        opacity: 0,\n        rotate: `${rotate}deg`,\n        transition: { delay, duration },\n      })\n\n      setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n\n      await animate.start({\n        opacity: \"var(--opacity)\",\n        rotate: \"0deg\",\n        transition: { duration },\n      })\n    }, [readOnly, animate, rotate, duration, delay, setValue])\n\n    return (\n      <motion.button\n        type=\"button\"\n        data-disabled={dataAttr(disabled)}\n        data-readonly={dataAttr(readOnly)}\n        data-value={value}\n        animate={animate}\n        custom={{ rotate }}\n        disabled={disabled}\n        initial={{ opacity, rotate: \"0deg\" }}\n        onClick={handlerAll(onClickProp, onClick)}\n        {...rest}\n      >\n        {value === \"from\" ? from : to}\n      </motion.button>\n    )\n  },\n)(undefined, (props) => {\n  const css = useInjectVarsIntoCss(props.css, { opacity: \"opacity\" })\n  const rest = useInjectVarsIntoProps(props, { opacity: \"opacity\" })\n\n  return { ...rest, css, opacity: \"{opacity}\" }\n})\n"],"mappings":";;;;;;;;;;;AA4EA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,UAAU,WAAW;;;;;;AASnE,MAAa,SAAS,aACnB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,UACA,SAAS,IACT,IACA,OAAO,WACP,UACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,UAAU;CAChB,MAAM,UAAU,aAAa;CAC7B,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D;EACA,OAAO;EACP;CACF,CAAC;CAED,MAAM,UAAU,YAAY,YAAY;EACtC,IAAI,UAAU;EAEd,MAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ,GAAG,OAAO;GAClB,YAAY;IAAE;IAAO;GAAS;EAChC,CAAC;EAED,UAAU,SAAU,SAAS,SAAS,OAAO,MAAO;EAEpD,MAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ;GACR,YAAY,EAAE,SAAS;EACzB,CAAC;CACH,GAAG;EAAC;EAAU;EAAS;EAAQ;EAAU;EAAO;CAAQ,CAAC;CAEzD,OACE,oBAACA,SAAO,QAAR;EACE,MAAK;EACL,kBAAA,GAAA,cAAA,SAAA,CAAwB,QAAQ;EAChC,kBAAA,GAAA,cAAA,SAAA,CAAwB,QAAQ;EAChC,cAAY;EACH;EACT,QAAQ,EAAE,OAAO;EACP;EACV,SAAS;GAAE;GAAS,QAAQ;EAAO;EACnC,UAAA,GAAA,cAAA,WAAA,CAAoB,aAAa,OAAO;EACxC,GAAI;YAEH,UAAU,SAAS,OAAO;CACd,CAAA;AAEnB,CACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,MAAM,qBAAqB,MAAM,KAAK,EAAE,SAAS,UAAU,CAAC;CAGlE,OAAO;EAAE,GAFI,uBAAuB,OAAO,EAAE,SAAS,UAAU,CAEjD;EAAG;EAAK,SAAS;CAAY;AAC9C,CAAC"}

package/dist/esm/components/saturation-slider/saturation-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"saturation-slider.js","names":[],"sources":["../../../../src/components/saturation-slider/saturation-slider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SaturationSliderStyle } from \"./saturation-slider.style\"\nimport type {\n  UseSaturationSliderProps,\n  UseSaturationSliderReturn,\n} from \"./use-saturation-slider\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { saturationSliderStyle } from \"./saturation-slider.style\"\nimport { useSaturationSlider } from \"./use-saturation-slider\"\n\ninterface ComponentContext extends Pick<\n  UseSaturationSliderReturn,\n  \"getThumbProps\" | \"getTrackProps\"\n> {}\n\nexport interface SaturationSliderRootProps\n  extends\n    Merge<HTMLStyledProps, UseSaturationSliderProps>,\n    ThemeProps<SaturationSliderStyle> {\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for the thumb element.\n   */\n  thumbProps?: SaturationSliderThumbProps\n  /**\n   * Props for the track element.\n   */\n  trackProps?: SaturationSliderTrackProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: SaturationSliderPropsContext,\n  useComponentContext,\n  usePropsContext: useSaturationSliderPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  SaturationSliderRootProps,\n  SaturationSliderStyle,\n  ComponentContext\n>(\"saturation-slider\", saturationSliderStyle)\n\nexport { SaturationSliderPropsContext, useSaturationSliderPropsContext }\n\n/**\n * `SaturationSlider` is a component used to allow the user to select a color saturation.\n *\n * @see https://yamada-ui.com/docs/components/saturation-slider\n */\nexport const SaturationSliderRoot = withProvider<\n  \"input\",\n  SaturationSliderRootProps\n>(({ children, inputProps, thumbProps, trackProps, ...rest }) => {\n  const { getInputProps, getRootProps, getThumbProps, getTrackProps } =\n    useSaturationSlider(rest)\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return (\n      <SaturationSliderTrack {...trackProps}>\n        <SaturationSliderThumb {...thumbProps} />\n      </SaturationSliderTrack>\n    )\n  }, [children, thumbProps, trackProps])\n  const context = useMemo(\n    () => ({ getThumbProps, getTrackProps }),\n    [getThumbProps, getTrackProps],\n  )\n\n  return (\n    <ComponentContext value={context}>\n      <styled.div {...getRootProps()}>\n        <styled.input {...getInputProps(inputProps)} />\n        {computedChildren}\n      </styled.div>\n    </ComponentContext>\n  )\n}, \"root\")()\n\nexport interface SaturationSliderTrackProps extends HTMLStyledProps {}\n\nexport const SaturationSliderTrack = withContext<\n  \"div\",\n  SaturationSliderTrackProps\n>(\"div\", \"track\")(undefined, (props) => {\n  const { getTrackProps } = useComponentContext()\n\n  return getTrackProps(props)\n})\n\nexport interface SaturationSliderThumbProps extends HTMLStyledProps {}\n\nexport const SaturationSliderThumb = withContext<\n  \"div\",\n  SaturationSliderThumbProps\n>(\"div\", \"thumb\")(undefined, (props) => {\n  const { getThumbProps } = useComponentContext()\n\n  return getThumbProps(props)\n})\n"],"mappings":";;;;;;;;AAqCA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACE,oBAIF,qBAAqB,qBAAqB;;;;;;AAS5C,MAAa,uBAAuB,cAGjC,EAAE,UAAU,YAAY,YAAY,YAAY,GAAG,WAAW;CAC/D,MAAM,EAAE,eAAe,cAAc,eAAe,kBAClD,oBAAoB,IAAI;CAC1B,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OACE,oBAAC,uBAAD;GAAuB,GAAI;aACzB,oBAAC,uBAAD,EAAuB,GAAI,WAAa,CAAA;EACnB,CAAA;CAE3B,GAAG;EAAC;EAAU;EAAY;CAAU,CAAC;CAMrC,OACE,oBAAC,kBAAD;EAAkB,OANJ,eACP;GAAE;GAAe;EAAc,IACtC,CAAC,eAAe,aAAa,CAIE;YAC7B,qBAAC,OAAO,KAAR;GAAY,GAAI,aAAa;aAA7B,CACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,UAAU,EAAI,CAAA,GAC7C,gBACS;;CACI,CAAA;AAEtB,GAAG,MAAM,EAAE;AAIX,MAAa,wBAAwB,YAGnC,OAAO,OAAO,EAAE,KAAA,IAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CAAC;AAID,MAAa,wBAAwB,YAGnC,OAAO,OAAO,EAAE,KAAA,IAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CAAC"}
+{"version":3,"file":"saturation-slider.js","names":[],"sources":["../../../../src/components/saturation-slider/saturation-slider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SaturationSliderStyle } from \"./saturation-slider.style\"\nimport type {\n  UseSaturationSliderProps,\n  UseSaturationSliderReturn,\n} from \"./use-saturation-slider\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { saturationSliderStyle } from \"./saturation-slider.style\"\nimport { useSaturationSlider } from \"./use-saturation-slider\"\n\ninterface ComponentContext extends Pick<\n  UseSaturationSliderReturn,\n  \"getThumbProps\" | \"getTrackProps\"\n> {}\n\nexport interface SaturationSliderRootProps\n  extends\n    Merge<HTMLStyledProps, UseSaturationSliderProps>,\n    ThemeProps<SaturationSliderStyle> {\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for the thumb element.\n   */\n  thumbProps?: SaturationSliderThumbProps\n  /**\n   * Props for the track element.\n   */\n  trackProps?: SaturationSliderTrackProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: SaturationSliderPropsContext,\n  useComponentContext,\n  usePropsContext: useSaturationSliderPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  SaturationSliderRootProps,\n  SaturationSliderStyle,\n  ComponentContext\n>(\"saturation-slider\", saturationSliderStyle)\n\nexport { SaturationSliderPropsContext, useSaturationSliderPropsContext }\n\n/**\n * `SaturationSlider` is a component used to allow the user to select a color saturation.\n *\n * @see https://yamada-ui.com/docs/components/saturation-slider\n */\nexport const SaturationSliderRoot = withProvider<\n  \"input\",\n  SaturationSliderRootProps\n>(({ children, inputProps, thumbProps, trackProps, ...rest }) => {\n  const { getInputProps, getRootProps, getThumbProps, getTrackProps } =\n    useSaturationSlider(rest)\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return (\n      <SaturationSliderTrack {...trackProps}>\n        <SaturationSliderThumb {...thumbProps} />\n      </SaturationSliderTrack>\n    )\n  }, [children, thumbProps, trackProps])\n  const context = useMemo(\n    () => ({ getThumbProps, getTrackProps }),\n    [getThumbProps, getTrackProps],\n  )\n\n  return (\n    <ComponentContext value={context}>\n      <styled.div {...getRootProps()}>\n        <styled.input {...getInputProps(inputProps)} />\n        {computedChildren}\n      </styled.div>\n    </ComponentContext>\n  )\n}, \"root\")()\n\nexport interface SaturationSliderTrackProps extends HTMLStyledProps {}\n\nexport const SaturationSliderTrack = withContext<\n  \"div\",\n  SaturationSliderTrackProps\n>(\"div\", \"track\")(undefined, (props) => {\n  const { getTrackProps } = useComponentContext()\n\n  return getTrackProps(props)\n})\n\nexport interface SaturationSliderThumbProps extends HTMLStyledProps {}\n\nexport const SaturationSliderThumb = withContext<\n  \"div\",\n  SaturationSliderThumbProps\n>(\"div\", \"thumb\")(undefined, (props) => {\n  const { getThumbProps } = useComponentContext()\n\n  return getThumbProps(props)\n})\n"],"mappings":";;;;;;;;AAqCA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACE,oBAIF,qBAAqB,qBAAqB;;;;;;AAS5C,MAAa,uBAAuB,cAGjC,EAAE,UAAU,YAAY,YAAY,YAAY,GAAG,WAAW;CAC/D,MAAM,EAAE,eAAe,cAAc,eAAe,kBAClD,oBAAoB,IAAI;CAC1B,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OACE,oBAAC,uBAAD;GAAuB,GAAI;aACzB,oBAAC,uBAAD,EAAuB,GAAI,WAAa,CAAA;EACnB,CAAA;CAE3B,GAAG;EAAC;EAAU;EAAY;CAAU,CAAC;CAMrC,OACE,oBAAC,kBAAD;EAAkB,OANJ,eACP;GAAE;GAAe;EAAc,IACtC,CAAC,eAAe,aAAa,CAIE;YAC7B,qBAAC,OAAO,KAAR;GAAY,GAAI,aAAa;aAA7B,CACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,UAAU,EAAI,CAAA,GAC7C,gBACS;;CACI,CAAA;AAEtB,GAAG,MAAM,CAAC,CAAC;AAIX,MAAa,wBAAwB,YAGnC,OAAO,OAAO,CAAC,CAAC,KAAA,IAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CAAC;AAID,MAAa,wBAAwB,YAGnC,OAAO,OAAO,CAAC,CAAC,KAAA,IAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CAAC"}

package/dist/esm/components/saturation-slider/use-saturation-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-saturation-slider.js","names":[],"sources":["../../../../src/components/saturation-slider/use-saturation-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  clampNumber,\n  cx,\n  handlerAll,\n  mergeRefs,\n  roundNumberToStep,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { runKeyAction } from \"../../utils/dom\"\nimport { useFieldProps } from \"../field\"\n\nfunction clampValue(value: [number, number, number]) {\n  return [\n    clampNumber(value[0], 0, 360),\n    clampNumber(value[1], 0, 1),\n    clampNumber(value[2], 0, 1),\n  ] as [number, number, number]\n}\n\nexport interface UseSaturationSliderProps\n  extends\n    Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * The initial value of the saturation slider.\n   *\n   * @default [0, 0, 1]\n   */\n  defaultValue?: [number, number, number]\n  /**\n   * The base `id` to use for the slider.\n   */\n  id?: string\n  /**\n   * The name attribute of the hidden `input` field.\n   * This is particularly useful in forms.\n   */\n  name?: string\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 0.01\n   */\n  step?: number\n  /**\n   * The value of the saturation slider.\n   */\n  value?: [number, number, number]\n  /**\n   * This is used to format the value so that screen readers\n   * can speak out a more human-friendly value.\n   *\n   * It is used to set the `aria-valuetext` property of the input.\n   */\n  getAriaValueText?: (value: [number, number, number]) => string | undefined\n  /**\n   * Function called whenever the saturation slider value changes.\n   */\n  onChange?: (value: [number, number, number]) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: [number, number, number]) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: [number, number, number]) => void\n}\n\nexport const useSaturationSlider = (props: UseSaturationSliderProps = {}) => {\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      defaultValue = [0, 0, 1],\n      disabled,\n      getAriaValueText,\n      readOnly,\n      required,\n      step = 0.01,\n      value: valueProp,\n      onChange: onChangeProp,\n      onChangeEnd,\n      onChangeStart,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const { t } = useI18n(\"saturationSlider\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [h, s, v] = clampValue(value)\n  const interactive = !(disabled || readOnly)\n  const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n    onEnd: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      onChangeEnd?.(panValue)\n    },\n    onMove: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      setValue(panValue)\n    },\n    onStart: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      onChangeStart?.(value)\n      setValue(panValue)\n    },\n  })\n\n  const onChange = useCallback(\n    ([h, s, v]: [number, number, number]) => {\n      if (!interactive) return\n\n      s = clampNumber(s, 0, 1)\n      v = clampNumber(v, 0, 1)\n\n      setValue([h, s, v])\n    },\n    [interactive, setValue],\n  )\n\n  const getPanValue = useCallback(\n    (\n      { x, y }: Point,\n      { bottom, height, left, width }: DOMRect,\n    ): [number, number, number] => {\n      const diff = { x: x - left, y: bottom - y }\n      const percent = { x: diff.x / width, y: diff.y / height }\n      const clamp = {\n        x: clampNumber(percent.x, 0, 1),\n        y: clampNumber(percent.y, 0, 1),\n      }\n      const s = roundNumberToStep(clamp.x, 0, step)\n      const v = roundNumberToStep(clamp.y, 0, step)\n\n      return [h, parseFloat(s), parseFloat(v)]\n    },\n    [h, step],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLDivElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: () => onChange([h, s, v - step]),\n        ArrowLeft: () => onChange([h, s - step, v]),\n        ArrowRight: () => onChange([h, s + step, v]),\n        ArrowUp: () => onChange([h, s, v + step]),\n      })\n    },\n    [h, onChange, s, step, v],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(dataProps, rest, props)()\n\n      return {\n        ...merged,\n        style: {\n          ...rest.style,\n          ...props.style,\n          \"--x\": `${Math.abs(s * 100)}%`,\n          \"--y\": `${Math.abs(100 - v * 100)}%`,\n          backgroundColor: `hsl(${h}, 100%, 50%)`,\n          backgroundImage:\n            \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n        },\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n    },\n    [dataProps, eventProps, h, rest, s, v],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...dataProps,\n      ...ariaProps,\n      id,\n      type: \"hidden\",\n      name,\n      disabled,\n      readOnly,\n      required,\n      value: [h, s, v].toString(),\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n    }),\n    [\n      ariaProps,\n      dataProps,\n      disabled,\n      h,\n      id,\n      name,\n      readOnly,\n      ref,\n      required,\n      s,\n      v,\n    ],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) => getPanEventProps({ ...dataProps, ...props }),\n    [dataProps, getPanEventProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      \"aria-label\": t(\"Saturation and brightness thumb\"),\n      \"aria-roledescription\": \"2D slider\",\n      \"aria-valuemax\": 100,\n      \"aria-valuemin\": 0,\n      \"aria-valuenow\": s * 100,\n      \"aria-valuetext\":\n        ariaValueText ??\n        getAriaValueText?.(value) ??\n        t(\"Saturation {saturation}%, Brightness {brightness}%\", {\n          brightness: v * 100,\n          saturation: s * 100,\n        }),\n      role: \"slider\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      \"aria-labelledby\": cx(props[\"aria-labelledby\"], ariaLabelledBy),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      ariaLabelledBy,\n      ariaProps,\n      ariaValueText,\n      dataProps,\n      getAriaValueText,\n      interactive,\n      onKeyDown,\n      s,\n      t,\n      v,\n      value,\n    ],\n  )\n\n  return {\n    setValue,\n    value,\n    getInputProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n    onChange,\n  }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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"}
+{"version":3,"file":"use-saturation-slider.js","names":[],"sources":["../../../../src/components/saturation-slider/use-saturation-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  clampNumber,\n  cx,\n  handlerAll,\n  mergeRefs,\n  roundNumberToStep,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { runKeyAction } from \"../../utils/dom\"\nimport { useFieldProps } from \"../field\"\n\nfunction clampValue(value: [number, number, number]) {\n  return [\n    clampNumber(value[0], 0, 360),\n    clampNumber(value[1], 0, 1),\n    clampNumber(value[2], 0, 1),\n  ] as [number, number, number]\n}\n\nexport interface UseSaturationSliderProps\n  extends\n    Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * The initial value of the saturation slider.\n   *\n   * @default [0, 0, 1]\n   */\n  defaultValue?: [number, number, number]\n  /**\n   * The base `id` to use for the slider.\n   */\n  id?: string\n  /**\n   * The name attribute of the hidden `input` field.\n   * This is particularly useful in forms.\n   */\n  name?: string\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 0.01\n   */\n  step?: number\n  /**\n   * The value of the saturation slider.\n   */\n  value?: [number, number, number]\n  /**\n   * This is used to format the value so that screen readers\n   * can speak out a more human-friendly value.\n   *\n   * It is used to set the `aria-valuetext` property of the input.\n   */\n  getAriaValueText?: (value: [number, number, number]) => string | undefined\n  /**\n   * Function called whenever the saturation slider value changes.\n   */\n  onChange?: (value: [number, number, number]) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: [number, number, number]) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: [number, number, number]) => void\n}\n\nexport const useSaturationSlider = (props: UseSaturationSliderProps = {}) => {\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      defaultValue = [0, 0, 1],\n      disabled,\n      getAriaValueText,\n      readOnly,\n      required,\n      step = 0.01,\n      value: valueProp,\n      onChange: onChangeProp,\n      onChangeEnd,\n      onChangeStart,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const { t } = useI18n(\"saturationSlider\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [h, s, v] = clampValue(value)\n  const interactive = !(disabled || readOnly)\n  const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n    onEnd: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      onChangeEnd?.(panValue)\n    },\n    onMove: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      setValue(panValue)\n    },\n    onStart: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      onChangeStart?.(value)\n      setValue(panValue)\n    },\n  })\n\n  const onChange = useCallback(\n    ([h, s, v]: [number, number, number]) => {\n      if (!interactive) return\n\n      s = clampNumber(s, 0, 1)\n      v = clampNumber(v, 0, 1)\n\n      setValue([h, s, v])\n    },\n    [interactive, setValue],\n  )\n\n  const getPanValue = useCallback(\n    (\n      { x, y }: Point,\n      { bottom, height, left, width }: DOMRect,\n    ): [number, number, number] => {\n      const diff = { x: x - left, y: bottom - y }\n      const percent = { x: diff.x / width, y: diff.y / height }\n      const clamp = {\n        x: clampNumber(percent.x, 0, 1),\n        y: clampNumber(percent.y, 0, 1),\n      }\n      const s = roundNumberToStep(clamp.x, 0, step)\n      const v = roundNumberToStep(clamp.y, 0, step)\n\n      return [h, parseFloat(s), parseFloat(v)]\n    },\n    [h, step],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLDivElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: () => onChange([h, s, v - step]),\n        ArrowLeft: () => onChange([h, s - step, v]),\n        ArrowRight: () => onChange([h, s + step, v]),\n        ArrowUp: () => onChange([h, s, v + step]),\n      })\n    },\n    [h, onChange, s, step, v],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(dataProps, rest, props)()\n\n      return {\n        ...merged,\n        style: {\n          ...rest.style,\n          ...props.style,\n          \"--x\": `${Math.abs(s * 100)}%`,\n          \"--y\": `${Math.abs(100 - v * 100)}%`,\n          backgroundColor: `hsl(${h}, 100%, 50%)`,\n          backgroundImage:\n            \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n        },\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n    },\n    [dataProps, eventProps, h, rest, s, v],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...dataProps,\n      ...ariaProps,\n      id,\n      type: \"hidden\",\n      name,\n      disabled,\n      readOnly,\n      required,\n      value: [h, s, v].toString(),\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n    }),\n    [\n      ariaProps,\n      dataProps,\n      disabled,\n      h,\n      id,\n      name,\n      readOnly,\n      ref,\n      required,\n      s,\n      v,\n    ],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) => getPanEventProps({ ...dataProps, ...props }),\n    [dataProps, getPanEventProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      \"aria-label\": t(\"Saturation and brightness thumb\"),\n      \"aria-roledescription\": \"2D slider\",\n      \"aria-valuemax\": 100,\n      \"aria-valuemin\": 0,\n      \"aria-valuenow\": s * 100,\n      \"aria-valuetext\":\n        ariaValueText ??\n        getAriaValueText?.(value) ??\n        t(\"Saturation {saturation}%, Brightness {brightness}%\", {\n          brightness: v * 100,\n          saturation: s * 100,\n        }),\n      role: \"slider\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      \"aria-labelledby\": cx(props[\"aria-labelledby\"], ariaLabelledBy),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      ariaLabelledBy,\n      ariaProps,\n      ariaValueText,\n      dataProps,\n      getAriaValueText,\n      interactive,\n      onKeyDown,\n      s,\n      t,\n      v,\n      value,\n    ],\n  )\n\n  return {\n    setValue,\n    value,\n    getInputProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n    onChange,\n  }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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"}

package/dist/esm/components/scroll-area/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":[],"sources":["../../../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ScrollAreaStyle } from \"./scroll-area.style\"\nimport type { UseScrollAreaProps } from \"./use-scroll-area\"\nimport { createComponent, styled } from \"../../core\"\nimport { scrollAreaStyle } from \"./scroll-area.style\"\nimport { useScrollArea } from \"./use-scroll-area\"\n\nexport interface ScrollAreaProps\n  extends HTMLStyledProps, ThemeProps<ScrollAreaStyle>, UseScrollAreaProps {}\n\nconst {\n  PropsContext: ScrollAreaPropsContext,\n  usePropsContext: useScrollAreaPropsContext,\n  withContext,\n} = createComponent<ScrollAreaProps, ScrollAreaStyle>(\n  \"scroll-area\",\n  scrollAreaStyle,\n)\n\nexport { ScrollAreaPropsContext, useScrollAreaPropsContext }\n\n/**\n * `ScrollArea` is a component that displays a customized scrollbar.\n *\n * @see https://yamada-ui.com/docs/components/scroll-area\n */\nexport const ScrollArea = withContext<\"div\", ScrollAreaProps>(\n  ({ children, ...rest }) => {\n    const { getRootProps } = useScrollArea(rest)\n\n    return <styled.div {...getRootProps()}>{children}</styled.div>\n  },\n)()\n"],"mappings":";;;;;;;AAYA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACE,gBACF,eACA,eACF;;;;;;AASA,MAAa,aAAa,aACvB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,iBAAiB,cAAc,IAAI;CAE3C,OAAO,oBAAC,OAAO,KAAR;EAAY,GAAI,aAAa;EAAI;CAAqB,CAAA;AAC/D,CACF,EAAE"}
+{"version":3,"file":"scroll-area.js","names":[],"sources":["../../../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ScrollAreaStyle } from \"./scroll-area.style\"\nimport type { UseScrollAreaProps } from \"./use-scroll-area\"\nimport { createComponent, styled } from \"../../core\"\nimport { scrollAreaStyle } from \"./scroll-area.style\"\nimport { useScrollArea } from \"./use-scroll-area\"\n\nexport interface ScrollAreaProps\n  extends HTMLStyledProps, ThemeProps<ScrollAreaStyle>, UseScrollAreaProps {}\n\nconst {\n  PropsContext: ScrollAreaPropsContext,\n  usePropsContext: useScrollAreaPropsContext,\n  withContext,\n} = createComponent<ScrollAreaProps, ScrollAreaStyle>(\n  \"scroll-area\",\n  scrollAreaStyle,\n)\n\nexport { ScrollAreaPropsContext, useScrollAreaPropsContext }\n\n/**\n * `ScrollArea` is a component that displays a customized scrollbar.\n *\n * @see https://yamada-ui.com/docs/components/scroll-area\n */\nexport const ScrollArea = withContext<\"div\", ScrollAreaProps>(\n  ({ children, ...rest }) => {\n    const { getRootProps } = useScrollArea(rest)\n\n    return <styled.div {...getRootProps()}>{children}</styled.div>\n  },\n)()\n"],"mappings":";;;;;;;AAYA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACE,gBACF,eACA,eACF;;;;;;AASA,MAAa,aAAa,aACvB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,iBAAiB,cAAc,IAAI;CAE3C,OAAO,oBAAC,OAAO,KAAR;EAAY,GAAI,aAAa;EAAI;CAAqB,CAAA;AAC/D,CACF,CAAC,CAAC"}

package/dist/esm/components/scroll-area/use-scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-area.js","names":[],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { dataAttr, isMac, useSafeLayoutEffect, vendor } from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n  /**\n   * Delay in milliseconds before scrollbars are hidden.\n   *\n   * @default 1000\n   */\n  scrollHideDelay?: number\n  /**\n   * Scrollbar visibility type.\n   *\n   * @default 'hover'\n   */\n  type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n  /**\n   * Callback function for when the scroll position changes.\n   */\n  onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n  id,\n  type = \"hover\",\n  scrollHideDelay = 1000,\n  onScrollPositionChange,\n  ...rest\n}: UseScrollAreaProps = {}) => {\n  const [isHovered, setIsHovered] = useState<boolean>(false)\n  const [isScrolling, setIsScrolling] = useState<boolean>(false)\n  const isAlways = type === \"always\"\n  const isNever = type === \"never\"\n  const isHidden = !isAlways && !isHovered && !isScrolling\n  const isSafari = isMac() && vendor(/apple/i)\n  const uuid = useId()\n  const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n  const hoverTimeout = useRef<any>(undefined)\n  const scrollTimeout = useRef<any>(undefined)\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const scrollPosition = useRef({ x: 0, y: 0 })\n\n  useSafeLayoutEffect(() => {\n    if (!scrollAreaRef.current || !isSafari) return\n\n    scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n    scrollAreaRef.current.scrollTop = scrollPosition.current.y\n  })\n\n  const onMouseEnter = useCallback(() => {\n    if (type !== \"hover\") return\n\n    clearTimeout(hoverTimeout.current)\n\n    setIsHovered(true)\n  }, [type])\n\n  const onMouseLeave = useCallback(() => {\n    if (type !== \"hover\") return\n\n    hoverTimeout.current = setTimeout(\n      () => setIsHovered(false),\n      scrollHideDelay,\n    )\n  }, [scrollHideDelay, type])\n\n  const onScroll = useCallback(\n    (ev: UIEvent<HTMLDivElement>) => {\n      const el = ev.target as HTMLDivElement\n\n      const { scrollLeft: x, scrollTop: y } = el\n      const { x: prevX, y: prevY } = scrollPosition.current\n      const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n      onScrollPositionChange?.({ x, y })\n      scrollPosition.current = { x, y }\n\n      if (type !== \"scroll\" || isEqual) return\n\n      if (!isScrolling) setIsScrolling(true)\n\n      clearTimeout(scrollTimeout.current)\n\n      scrollTimeout.current = setTimeout(\n        () => setIsScrolling(false),\n        scrollHideDelay,\n      )\n    },\n    [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n  )\n\n  useEffect(() => {\n    return () => {\n      if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n    }\n  }, [])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          style: { overflow: \"auto\" },\n          \"data-hidden\": dataAttr(isHidden),\n          \"data-hover\": dataAttr(isHovered),\n          \"data-never\": dataAttr(isNever),\n          \"data-scroll\": dataAttr(isScrolling),\n          tabIndex: 0,\n        },\n        isSafari ? { key, ref: scrollAreaRef, \"data-key\": key } : {},\n        rest,\n        props,\n        {\n          onMouseEnter,\n          onMouseLeave,\n          onPointerEnter: onMouseEnter,\n          onPointerLeave: onMouseLeave,\n          onScroll,\n        },\n      )(),\n    [\n      isNever,\n      isHidden,\n      isHovered,\n      isScrolling,\n      isSafari,\n      key,\n      rest,\n      onMouseEnter,\n      onMouseLeave,\n      onScroll,\n    ],\n  )\n\n  return {\n    isAlways,\n    isHidden,\n    isHovered,\n    isNever,\n    isScrolling,\n    getRootProps,\n  }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;AA2BA,MAAa,iBAAiB,EAC5B,IACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,CAAC,MAAM;CAC7B,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAAkB,KAAK;CAC7D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,YAAA,GAAA,cAAA,OAAiB,MAAA,GAAA,cAAA,QAAY,QAAQ;CAC3C,MAAM,OAAO,MAAM;CACnB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,eAAe,OAAY,KAAA,CAAS;CAC1C,MAAM,gBAAgB,OAAY,KAAA,CAAS;CAC3C,MAAM,gBAAgB,OAAuB,IAAI;CACjD,MAAM,iBAAiB,OAAO;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CAE5C,0BAA0B;EACxB,IAAI,CAAC,cAAc,WAAW,CAAC,UAAU;EAEzC,cAAc,QAAQ,aAAa,eAAe,QAAQ;EAC1D,cAAc,QAAQ,YAAY,eAAe,QAAQ;CAC3D,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,IAAI,SAAS,SAAS;EAEtB,aAAa,aAAa,OAAO;EAEjC,aAAa,IAAI;CACnB,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,eAAe,kBAAkB;EACrC,IAAI,SAAS,SAAS;EAEtB,aAAa,UAAU,iBACf,aAAa,KAAK,GACxB,eACF;CACF,GAAG,CAAC,iBAAiB,IAAI,CAAC;CAE1B,MAAM,WAAW,aACd,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK;EAEnE,yBAAyB;GAAE;GAAG;EAAE,CAAC;EACjC,eAAe,UAAU;GAAE;GAAG;EAAE;EAEhC,IAAI,SAAS,YAAY,SAAS;EAElC,IAAI,CAAC,aAAa,eAAe,IAAI;EAErC,aAAa,cAAc,OAAO;EAElC,cAAc,UAAU,iBAChB,eAAe,KAAK,GAC1B,eACF;CACF,GACA;EAAC;EAAa;EAAwB;EAAiB;CAAI,CAC7D;CAEA,gBAAgB;EACd,aAAa;GACX,IAAI,aAAa,SAAS,aAAa,aAAa,OAAO;GAC3D,IAAI,cAAc,SAAS,aAAa,cAAc,OAAO;EAC/D;CACF,GAAG,CAAC,CAAC;CAsCL,OAAO;EACL;EACA;EACA;EACA;EACA;EACA,cA1C+B,aAC9B,QAAQ,CAAC,MACR,WACE;GACE,OAAO,EAAE,UAAU,OAAO;GAC1B,gBAAA,GAAA,cAAA,UAAwB,QAAQ;GAChC,eAAA,GAAA,cAAA,UAAuB,SAAS;GAChC,eAAA,GAAA,cAAA,UAAuB,OAAO;GAC9B,gBAAA,GAAA,cAAA,UAAwB,WAAW;GACnC,UAAU;EACZ,GACA,WAAW;GAAE;GAAK,KAAK;GAAe,YAAY;EAAI,IAAI,CAAC,GAC3D,MACA,OACA;GACE;GACA;GACA,gBAAgB;GAChB,gBAAgB;GAChB;EACF,CACF,EAAE,GACJ;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CASW;CACb;AACF"}
+{"version":3,"file":"use-scroll-area.js","names":[],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { dataAttr, isMac, useSafeLayoutEffect, vendor } from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n  /**\n   * Delay in milliseconds before scrollbars are hidden.\n   *\n   * @default 1000\n   */\n  scrollHideDelay?: number\n  /**\n   * Scrollbar visibility type.\n   *\n   * @default 'hover'\n   */\n  type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n  /**\n   * Callback function for when the scroll position changes.\n   */\n  onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n  id,\n  type = \"hover\",\n  scrollHideDelay = 1000,\n  onScrollPositionChange,\n  ...rest\n}: UseScrollAreaProps = {}) => {\n  const [isHovered, setIsHovered] = useState<boolean>(false)\n  const [isScrolling, setIsScrolling] = useState<boolean>(false)\n  const isAlways = type === \"always\"\n  const isNever = type === \"never\"\n  const isHidden = !isAlways && !isHovered && !isScrolling\n  const isSafari = isMac() && vendor(/apple/i)\n  const uuid = useId()\n  const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n  const hoverTimeout = useRef<any>(undefined)\n  const scrollTimeout = useRef<any>(undefined)\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const scrollPosition = useRef({ x: 0, y: 0 })\n\n  useSafeLayoutEffect(() => {\n    if (!scrollAreaRef.current || !isSafari) return\n\n    scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n    scrollAreaRef.current.scrollTop = scrollPosition.current.y\n  })\n\n  const onMouseEnter = useCallback(() => {\n    if (type !== \"hover\") return\n\n    clearTimeout(hoverTimeout.current)\n\n    setIsHovered(true)\n  }, [type])\n\n  const onMouseLeave = useCallback(() => {\n    if (type !== \"hover\") return\n\n    hoverTimeout.current = setTimeout(\n      () => setIsHovered(false),\n      scrollHideDelay,\n    )\n  }, [scrollHideDelay, type])\n\n  const onScroll = useCallback(\n    (ev: UIEvent<HTMLDivElement>) => {\n      const el = ev.target as HTMLDivElement\n\n      const { scrollLeft: x, scrollTop: y } = el\n      const { x: prevX, y: prevY } = scrollPosition.current\n      const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n      onScrollPositionChange?.({ x, y })\n      scrollPosition.current = { x, y }\n\n      if (type !== \"scroll\" || isEqual) return\n\n      if (!isScrolling) setIsScrolling(true)\n\n      clearTimeout(scrollTimeout.current)\n\n      scrollTimeout.current = setTimeout(\n        () => setIsScrolling(false),\n        scrollHideDelay,\n      )\n    },\n    [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n  )\n\n  useEffect(() => {\n    return () => {\n      if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n    }\n  }, [])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          style: { overflow: \"auto\" },\n          \"data-hidden\": dataAttr(isHidden),\n          \"data-hover\": dataAttr(isHovered),\n          \"data-never\": dataAttr(isNever),\n          \"data-scroll\": dataAttr(isScrolling),\n          tabIndex: 0,\n        },\n        isSafari ? { key, ref: scrollAreaRef, \"data-key\": key } : {},\n        rest,\n        props,\n        {\n          onMouseEnter,\n          onMouseLeave,\n          onPointerEnter: onMouseEnter,\n          onPointerLeave: onMouseLeave,\n          onScroll,\n        },\n      )(),\n    [\n      isNever,\n      isHidden,\n      isHovered,\n      isScrolling,\n      isSafari,\n      key,\n      rest,\n      onMouseEnter,\n      onMouseLeave,\n      onScroll,\n    ],\n  )\n\n  return {\n    isAlways,\n    isHidden,\n    isHovered,\n    isNever,\n    isScrolling,\n    getRootProps,\n  }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;AA2BA,MAAa,iBAAiB,EAC5B,IACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,CAAC,MAAM;CAC7B,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAAkB,KAAK;CAC7D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,YAAA,GAAA,cAAA,MAAA,CAAiB,MAAA,GAAA,cAAA,OAAA,CAAY,QAAQ;CAC3C,MAAM,OAAO,MAAM;CACnB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,eAAe,OAAY,KAAA,CAAS;CAC1C,MAAM,gBAAgB,OAAY,KAAA,CAAS;CAC3C,MAAM,gBAAgB,OAAuB,IAAI;CACjD,MAAM,iBAAiB,OAAO;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CAE5C,0BAA0B;EACxB,IAAI,CAAC,cAAc,WAAW,CAAC,UAAU;EAEzC,cAAc,QAAQ,aAAa,eAAe,QAAQ;EAC1D,cAAc,QAAQ,YAAY,eAAe,QAAQ;CAC3D,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,IAAI,SAAS,SAAS;EAEtB,aAAa,aAAa,OAAO;EAEjC,aAAa,IAAI;CACnB,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,eAAe,kBAAkB;EACrC,IAAI,SAAS,SAAS;EAEtB,aAAa,UAAU,iBACf,aAAa,KAAK,GACxB,eACF;CACF,GAAG,CAAC,iBAAiB,IAAI,CAAC;CAE1B,MAAM,WAAW,aACd,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK;EAEnE,yBAAyB;GAAE;GAAG;EAAE,CAAC;EACjC,eAAe,UAAU;GAAE;GAAG;EAAE;EAEhC,IAAI,SAAS,YAAY,SAAS;EAElC,IAAI,CAAC,aAAa,eAAe,IAAI;EAErC,aAAa,cAAc,OAAO;EAElC,cAAc,UAAU,iBAChB,eAAe,KAAK,GAC1B,eACF;CACF,GACA;EAAC;EAAa;EAAwB;EAAiB;CAAI,CAC7D;CAEA,gBAAgB;EACd,aAAa;GACX,IAAI,aAAa,SAAS,aAAa,aAAa,OAAO;GAC3D,IAAI,cAAc,SAAS,aAAa,cAAc,OAAO;EAC/D;CACF,GAAG,CAAC,CAAC;CAsCL,OAAO;EACL;EACA;EACA;EACA;EACA;EACA,cA1C+B,aAC9B,QAAQ,CAAC,MACR,WACE;GACE,OAAO,EAAE,UAAU,OAAO;GAC1B,gBAAA,GAAA,cAAA,SAAA,CAAwB,QAAQ;GAChC,eAAA,GAAA,cAAA,SAAA,CAAuB,SAAS;GAChC,eAAA,GAAA,cAAA,SAAA,CAAuB,OAAO;GAC9B,gBAAA,GAAA,cAAA,SAAA,CAAwB,WAAW;GACnC,UAAU;EACZ,GACA,WAAW;GAAE;GAAK,KAAK;GAAe,YAAY;EAAI,IAAI,CAAC,GAC3D,MACA,OACA;GACE;GACA;GACA,gBAAgB;GAChB,gBAAgB;GAChB;EACF,CACF,CAAC,CAAC,GACJ;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CASW;CACb;AACF"}

package/dist/esm/components/segmented-control/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","names":["motion"],"sources":["../../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SegmentedControlStyle } from \"./segmented-control.style\"\nimport type {\n  UseSegmentedControlItemProps,\n  UseSegmentedControlProps,\n} from \"./use-segmented-control\"\nimport { LayoutGroup } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { motion } from \"../motion\"\nimport { segmentedControlStyle } from \"./segmented-control.style\"\nimport {\n  SegmentedControlContext,\n  SegmentedControlDescendantsContext,\n  useSegmentedControl,\n  useSegmentedControlItem,\n} from \"./use-segmented-control\"\n\nexport interface SegmentedControlItem extends SegmentedControlItemProps {\n  label?: ReactNode\n}\n\ninterface ComponentContext extends Pick<\n  SegmentedControlRootProps,\n  \"indicatorProps\" | \"itemProps\"\n> {}\n\nexport interface SegmentedControlRootProps<Y extends string = string>\n  extends\n    Omit<HTMLStyledProps, \"defaultValue\" | \"onChange\">,\n    ThemeProps<SegmentedControlStyle>,\n    Omit<UseSegmentedControlProps<Y>, \"orientation\"> {\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default []\n   */\n  items?: SegmentedControlItem[]\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: SegmentedControlIndicatorProps\n  /**\n   * Props for the item component.\n   */\n  itemProps?: SegmentedControlItemProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: SegmentedControlPropsContext,\n  useComponentContext,\n  usePropsContext: useSegmentedControlPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  SegmentedControlRootProps,\n  SegmentedControlStyle,\n  ComponentContext\n>(\"segmented-control\", segmentedControlStyle)\n\nexport { SegmentedControlPropsContext, useSegmentedControlPropsContext }\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see https://yamada-ui.com/docs/components/segmented-control\n */\nexport const SegmentedControlRoot = withProvider(\n  ({\n    children,\n    items = [],\n    orientation: orientationProp,\n    indicatorProps,\n    itemProps,\n    ...rest\n  }) => {\n    const computedOrientation = useValue(orientationProp)\n    const {\n      id,\n      name,\n      descendants,\n      disabled,\n      orientation,\n      readOnly,\n      setValue,\n      value,\n      getRootProps,\n    } = useSegmentedControl({ orientation: computedOrientation, ...rest })\n    const cloneChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        return items.map(({ label, ...rest }, index) => (\n          <SegmentedControlItem key={index} {...rest}>\n            {label}\n          </SegmentedControlItem>\n        ))\n      }\n    }, [children, items])\n    const context = useMemo(\n      () => ({ id, name, disabled, orientation, readOnly, setValue, value }),\n      [id, name, disabled, readOnly, orientation, setValue, value],\n    )\n    const componentContext = useMemo(\n      () => ({ indicatorProps, itemProps }),\n      [itemProps, indicatorProps],\n    )\n\n    return (\n      <SegmentedControlContext value={context}>\n        <ComponentContext value={componentContext}>\n          <SegmentedControlDescendantsContext value={descendants}>\n            <LayoutGroup id={id}>\n              <styled.div {...getRootProps()}>{cloneChildren}</styled.div>\n            </LayoutGroup>\n          </SegmentedControlDescendantsContext>\n        </ComponentContext>\n      </SegmentedControlContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)() as GenericsComponent<{\n  <Y extends string = string>(props: SegmentedControlRootProps<Y>): ReactElement\n}>\n\nexport interface SegmentedControlItemProps<Y extends string = string>\n  extends HTMLStyledProps<\"label\">, UseSegmentedControlItemProps<Y> {\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: SegmentedControlIndicatorProps\n}\n\nexport const SegmentedControlItem = withContext<\n  \"label\",\n  SegmentedControlItemProps\n>(({ children, indicatorProps, ...rest }) => {\n  const { checked, getInputProps, getLabelProps } =\n    useSegmentedControlItem(rest)\n\n  return (\n    <styled.label {...getLabelProps()}>\n      <styled.input {...getInputProps()} />\n\n      <styled.span>{children}</styled.span>\n\n      {checked ? <SegmentedControlIndicator {...indicatorProps} /> : null}\n    </styled.label>\n  )\n}, \"item\")((props) => {\n  const { indicatorProps, itemProps } = useComponentContext()\n\n  return {\n    ...itemProps,\n    ...props,\n    indicatorProps: {\n      ...indicatorProps,\n      ...itemProps?.indicatorProps,\n      ...props.indicatorProps,\n    },\n  }\n}) as GenericsComponent<{\n  <Y extends string = string>(props: SegmentedControlItemProps<Y>): ReactElement\n}>\n\ninterface SegmentedControlIndicatorProps extends HTMLMotionProps {}\n\nconst SegmentedControlIndicator = withContext<\n  \"div\",\n  SegmentedControlIndicatorProps\n>(({ transition, ...props }) => {\n  return (\n    <motion.div\n      layoutDependency={false}\n      layoutId=\"indicator\"\n      transition={{ duration: 0.2, ...transition }}\n      {...props}\n    />\n  )\n}, \"indicator\")()\n"],"mappings":";;;;;;;;;;;AAqDA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACE,oBAIF,qBAAqB,qBAAqB;;;;;;AAS5C,MAAa,uBAAuB,cACjC,EACC,UACA,QAAQ,CAAC,GACT,aAAa,iBACb,gBACA,WACA,GAAG,WACC;CAEJ,MAAM,EACJ,IACA,MACA,aACA,UACA,aACA,UACA,UACA,OACA,iBACE,oBAAoB;EAAE,aAXE,SAAS,eAWoB;EAAG,GAAG;CAAK,CAAC;CACrE,MAAM,gBAAgB,cAAc;EAClC,IAAI,UACF,OAAO;OAEP,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,oBAAC,sBAAD;GAAkC,GAAI;aACnC;EACmB,GAFK,KAEL,CACvB;CAEL,GAAG,CAAC,UAAU,KAAK,CAAC;CAUpB,OACE,oBAAC,yBAAD;EAAyB,OAVX,eACP;GAAE;GAAI;GAAM;GAAU;GAAa;GAAU;GAAU;EAAM,IACpE;GAAC;GAAI;GAAM;GAAU;GAAU;GAAa;GAAU;EAAK,CAQrB;YACpC,oBAAC,kBAAD;GAAkB,OAPG,eAChB;IAAE;IAAgB;GAAU,IACnC,CAAC,WAAW,cAAc,CAKgB;aACtC,oBAAC,oCAAD;IAAoC,OAAO;cACzC,oBAAC,aAAD;KAAiB;eACf,oBAAC,OAAO,KAAR;MAAY,GAAI,aAAa;gBAAI;KAA0B,CAAA;IAChD,CAAA;GACqB,CAAA;EACpB,CAAA;CACK,CAAA;AAE7B,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,EAAE;AAYF,MAAa,uBAAuB,aAGjC,EAAE,UAAU,gBAAgB,GAAG,WAAW;CAC3C,MAAM,EAAE,SAAS,eAAe,kBAC9B,wBAAwB,IAAI;CAE9B,OACE,qBAAC,OAAO,OAAR;EAAc,GAAI,cAAc;YAAhC;GACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA;GAEpC,oBAAC,OAAO,MAAR,EAAc,SAAsB,CAAA;GAEnC,UAAU,oBAAC,2BAAD,EAA2B,GAAI,eAAiB,CAAA,IAAI;EACnD;;AAElB,GAAG,MAAM,GAAG,UAAU;CACpB,MAAM,EAAE,gBAAgB,cAAc,oBAAoB;CAE1D,OAAO;EACL,GAAG;EACH,GAAG;EACH,gBAAgB;GACd,GAAG;GACH,GAAG,WAAW;GACd,GAAG,MAAM;EACX;CACF;AACF,CAAC;AAMD,MAAM,4BAA4B,aAG/B,EAAE,YAAY,GAAG,YAAY;CAC9B,OACE,oBAACA,SAAO,KAAR;EACE,kBAAkB;EAClB,UAAS;EACT,YAAY;GAAE,UAAU;GAAK,GAAG;EAAW;EAC3C,GAAI;CACL,CAAA;AAEL,GAAG,WAAW,EAAE"}
+{"version":3,"file":"segmented-control.js","names":["motion"],"sources":["../../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SegmentedControlStyle } from \"./segmented-control.style\"\nimport type {\n  UseSegmentedControlItemProps,\n  UseSegmentedControlProps,\n} from \"./use-segmented-control\"\nimport { LayoutGroup } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { motion } from \"../motion\"\nimport { segmentedControlStyle } from \"./segmented-control.style\"\nimport {\n  SegmentedControlContext,\n  SegmentedControlDescendantsContext,\n  useSegmentedControl,\n  useSegmentedControlItem,\n} from \"./use-segmented-control\"\n\nexport interface SegmentedControlItem extends SegmentedControlItemProps {\n  label?: ReactNode\n}\n\ninterface ComponentContext extends Pick<\n  SegmentedControlRootProps,\n  \"indicatorProps\" | \"itemProps\"\n> {}\n\nexport interface SegmentedControlRootProps<Y extends string = string>\n  extends\n    Omit<HTMLStyledProps, \"defaultValue\" | \"onChange\">,\n    ThemeProps<SegmentedControlStyle>,\n    Omit<UseSegmentedControlProps<Y>, \"orientation\"> {\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default []\n   */\n  items?: SegmentedControlItem[]\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: SegmentedControlIndicatorProps\n  /**\n   * Props for the item component.\n   */\n  itemProps?: SegmentedControlItemProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: SegmentedControlPropsContext,\n  useComponentContext,\n  usePropsContext: useSegmentedControlPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  SegmentedControlRootProps,\n  SegmentedControlStyle,\n  ComponentContext\n>(\"segmented-control\", segmentedControlStyle)\n\nexport { SegmentedControlPropsContext, useSegmentedControlPropsContext }\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see https://yamada-ui.com/docs/components/segmented-control\n */\nexport const SegmentedControlRoot = withProvider(\n  ({\n    children,\n    items = [],\n    orientation: orientationProp,\n    indicatorProps,\n    itemProps,\n    ...rest\n  }) => {\n    const computedOrientation = useValue(orientationProp)\n    const {\n      id,\n      name,\n      descendants,\n      disabled,\n      orientation,\n      readOnly,\n      setValue,\n      value,\n      getRootProps,\n    } = useSegmentedControl({ orientation: computedOrientation, ...rest })\n    const cloneChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        return items.map(({ label, ...rest }, index) => (\n          <SegmentedControlItem key={index} {...rest}>\n            {label}\n          </SegmentedControlItem>\n        ))\n      }\n    }, [children, items])\n    const context = useMemo(\n      () => ({ id, name, disabled, orientation, readOnly, setValue, value }),\n      [id, name, disabled, readOnly, orientation, setValue, value],\n    )\n    const componentContext = useMemo(\n      () => ({ indicatorProps, itemProps }),\n      [itemProps, indicatorProps],\n    )\n\n    return (\n      <SegmentedControlContext value={context}>\n        <ComponentContext value={componentContext}>\n          <SegmentedControlDescendantsContext value={descendants}>\n            <LayoutGroup id={id}>\n              <styled.div {...getRootProps()}>{cloneChildren}</styled.div>\n            </LayoutGroup>\n          </SegmentedControlDescendantsContext>\n        </ComponentContext>\n      </SegmentedControlContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)() as GenericsComponent<{\n  <Y extends string = string>(props: SegmentedControlRootProps<Y>): ReactElement\n}>\n\nexport interface SegmentedControlItemProps<Y extends string = string>\n  extends HTMLStyledProps<\"label\">, UseSegmentedControlItemProps<Y> {\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: SegmentedControlIndicatorProps\n}\n\nexport const SegmentedControlItem = withContext<\n  \"label\",\n  SegmentedControlItemProps\n>(({ children, indicatorProps, ...rest }) => {\n  const { checked, getInputProps, getLabelProps } =\n    useSegmentedControlItem(rest)\n\n  return (\n    <styled.label {...getLabelProps()}>\n      <styled.input {...getInputProps()} />\n\n      <styled.span>{children}</styled.span>\n\n      {checked ? <SegmentedControlIndicator {...indicatorProps} /> : null}\n    </styled.label>\n  )\n}, \"item\")((props) => {\n  const { indicatorProps, itemProps } = useComponentContext()\n\n  return {\n    ...itemProps,\n    ...props,\n    indicatorProps: {\n      ...indicatorProps,\n      ...itemProps?.indicatorProps,\n      ...props.indicatorProps,\n    },\n  }\n}) as GenericsComponent<{\n  <Y extends string = string>(props: SegmentedControlItemProps<Y>): ReactElement\n}>\n\ninterface SegmentedControlIndicatorProps extends HTMLMotionProps {}\n\nconst SegmentedControlIndicator = withContext<\n  \"div\",\n  SegmentedControlIndicatorProps\n>(({ transition, ...props }) => {\n  return (\n    <motion.div\n      layoutDependency={false}\n      layoutId=\"indicator\"\n      transition={{ duration: 0.2, ...transition }}\n      {...props}\n    />\n  )\n}, \"indicator\")()\n"],"mappings":";;;;;;;;;;;AAqDA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACE,oBAIF,qBAAqB,qBAAqB;;;;;;AAS5C,MAAa,uBAAuB,cACjC,EACC,UACA,QAAQ,CAAC,GACT,aAAa,iBACb,gBACA,WACA,GAAG,WACC;CAEJ,MAAM,EACJ,IACA,MACA,aACA,UACA,aACA,UACA,UACA,OACA,iBACE,oBAAoB;EAAE,aAXE,SAAS,eAWoB;EAAG,GAAG;CAAK,CAAC;CACrE,MAAM,gBAAgB,cAAc;EAClC,IAAI,UACF,OAAO;OAEP,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,oBAAC,sBAAD;GAAkC,GAAI;aACnC;EACmB,GAFK,KAEL,CACvB;CAEL,GAAG,CAAC,UAAU,KAAK,CAAC;CAUpB,OACE,oBAAC,yBAAD;EAAyB,OAVX,eACP;GAAE;GAAI;GAAM;GAAU;GAAa;GAAU;GAAU;EAAM,IACpE;GAAC;GAAI;GAAM;GAAU;GAAU;GAAa;GAAU;EAAK,CAQrB;YACpC,oBAAC,kBAAD;GAAkB,OAPG,eAChB;IAAE;IAAgB;GAAU,IACnC,CAAC,WAAW,cAAc,CAKgB;aACtC,oBAAC,oCAAD;IAAoC,OAAO;cACzC,oBAAC,aAAD;KAAiB;eACf,oBAAC,OAAO,KAAR;MAAY,GAAI,aAAa;gBAAI;KAA0B,CAAA;IAChD,CAAA;GACqB,CAAA;EACpB,CAAA;CACK,CAAA;AAE7B,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,CAAC,CAAC;AAYF,MAAa,uBAAuB,aAGjC,EAAE,UAAU,gBAAgB,GAAG,WAAW;CAC3C,MAAM,EAAE,SAAS,eAAe,kBAC9B,wBAAwB,IAAI;CAE9B,OACE,qBAAC,OAAO,OAAR;EAAc,GAAI,cAAc;YAAhC;GACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA;GAEpC,oBAAC,OAAO,MAAR,EAAc,SAAsB,CAAA;GAEnC,UAAU,oBAAC,2BAAD,EAA2B,GAAI,eAAiB,CAAA,IAAI;EACnD;;AAElB,GAAG,MAAM,CAAC,EAAE,UAAU;CACpB,MAAM,EAAE,gBAAgB,cAAc,oBAAoB;CAE1D,OAAO;EACL,GAAG;EACH,GAAG;EACH,gBAAgB;GACd,GAAG;GACH,GAAG,WAAW;GACd,GAAG,MAAM;EACX;CACF;AACF,CAAC;AAMD,MAAM,4BAA4B,aAG/B,EAAE,YAAY,GAAG,YAAY;CAC9B,OACE,oBAACA,SAAO,KAAR;EACE,kBAAkB;EAClB,UAAS;EACT,YAAY;GAAE,UAAU;GAAK,GAAG;EAAW;EAC3C,GAAI;CACL,CAAA;AAEL,GAAG,WAAW,CAAC,CAAC"}

package/dist/esm/components/segmented-control/use-segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-segmented-control.js","names":["createContext"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\n\ninterface SegmentedControlContext extends Omit<\n  UseSegmentedControlReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [SegmentedControlContext, useSegmentedControlContext] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n  })\n\nexport { SegmentedControlContext, useSegmentedControlContext }\n\nconst {\n  DescendantsContext: SegmentedControlDescendantsContext,\n  useDescendant: useSegmentedControlDescendant,\n  useDescendants: useSegmentedControlDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n  SegmentedControlDescendantsContext,\n  useSegmentedControlDescendant,\n  useSegmentedControlDescendants,\n}\n\nexport interface UseSegmentedControlProps<\n  Y extends string = string,\n> extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: Y\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The orientation of the segmented control.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the segmented control.\n   */\n  value?: Y\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n  id,\n  name,\n  defaultValue,\n  disabled,\n  orientation = \"horizontal\",\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n  const uuid = useId()\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const descendants = useSegmentedControlDescendants()\n\n  id ??= uuid\n  name ??= uuid\n\n  const getRootProps: PropGetter = useCallback(\n    (props) =>\n      mergeProps(\n        {\n          id,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-orientation\": orientation,\n          \"data-disabled\": dataAttr(disabled),\n          \"data-orientation\": orientation,\n          \"data-readonly\": dataAttr(readOnly),\n          role: \"radiogroup\",\n        },\n        rest,\n        props,\n      )(),\n    [disabled, id, orientation, readOnly, rest],\n  )\n\n  return {\n    id,\n    name,\n    descendants,\n    disabled,\n    orientation,\n    readOnly,\n    setValue,\n    value,\n    getRootProps,\n  }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n  extends HTMLProps<\"label\">, Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n  /**\n   * The value of the segmented control item.\n   */\n  value: Y\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n  disabled,\n  readOnly,\n  value,\n  inputProps,\n  ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n  const {\n    name,\n    disabled: rootDisabled,\n    orientation,\n    readOnly: rootReadOnly,\n    setValue,\n    value: selectedValue,\n  } = useSegmentedControlContext()\n  const { register } = useSegmentedControlDescendant({\n    disabled: disabled || readOnly,\n  })\n  const checked = value === selectedValue\n  const trulyDisabled = disabled ?? rootDisabled\n  const trulyReadOnly = readOnly ?? rootReadOnly\n  const interactive = !(trulyReadOnly || trulyDisabled)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setValue(ev.target.value)\n    },\n    [setValue],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) =>\n      mergeProps(\n        {\n          \"aria-disabled\": ariaAttr(trulyDisabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-disabled\": dataAttr(trulyDisabled),\n          \"data-orientation\": orientation,\n          \"data-readonly\": dataAttr(trulyReadOnly),\n          \"data-root-disabled\": dataAttr(rootDisabled),\n          \"data-root-readonly\": dataAttr(rootReadOnly),\n        },\n        rest,\n        props,\n      )(),\n    [\n      orientation,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      rootDisabled,\n      rootReadOnly,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      checked,\n      disabled: trulyDisabled || trulyReadOnly,\n      readOnly: trulyReadOnly,\n      tabIndex: interactive ? undefined : -1,\n      value,\n      ...inputProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n    }),\n    [\n      orientation,\n      name,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      interactive,\n      value,\n      inputProps,\n      register,\n      onChange,\n    ],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n  typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,CAAC,yBAAyB,8BAC9BA,gBAAuC,EACrC,MAAM,0BACR,CAAC;AAIH,MAAM,EACJ,oBAAoB,oCACpB,eAAe,+BACf,gBAAgB,mCACd,kBAAoC;AA+CxC,MAAa,uBAAkD,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,cACV,GAAG,SAC4B,CAAC,MAAM;CACtC,MAAM,OAAO,MAAM;CACnB,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACZ,CAAC;CACD,MAAM,cAAc,+BAA+B;CAEnD,OAAO;CACP,SAAS;CAET,MAAM,eAA2B,aAC9B,UACC,WACE;EACE;EACA,kBAAA,GAAA,cAAA,UAA0B,QAAQ;EAClC,oBAAoB;EACpB,kBAAA,GAAA,cAAA,UAA0B,QAAQ;EAClC,oBAAoB;EACpB,kBAAA,GAAA,cAAA,UAA0B,QAAQ;EAClC,MAAM;CACR,GACA,MACA,KACF,EAAE,GACJ;EAAC;EAAU;EAAI;EAAa;EAAU;CAAI,CAC5C;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF;AAgBA,MAAa,2BAAsD,EACjE,UACA,UACA,OACA,YACA,GAAG,WACkC;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,kBACL,2BAA2B;CAC/B,MAAM,EAAE,aAAa,8BAA8B,EACjD,UAAU,YAAY,SACxB,CAAC;CACD,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,cAAc,EAAE,iBAAiB;CAEvC,MAAM,WAAW,aACd,OAAsC;EACrC,SAAS,GAAG,OAAO,KAAK;CAC1B,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,gBAAqC,aACxC,UACC,WACE;EACE,kBAAA,GAAA,cAAA,UAA0B,aAAa;EACvC,iBAAA,GAAA,cAAA,UAAyB,OAAO;EAChC,kBAAA,GAAA,cAAA,UAA0B,aAAa;EACvC,oBAAoB;EACpB,kBAAA,GAAA,cAAA,UAA0B,aAAa;EACvC,uBAAA,GAAA,cAAA,UAA+B,YAAY;EAC3C,uBAAA,GAAA,cAAA,UAA+B,YAAY;CAC7C,GACA,MACA,KACF,EAAE,GACJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAoCA,OAAO;EACL;EACA,eApCyC,aACxC,EAAE,KAAK,GAAG,UAAU,CAAC,OAAO;GAC3B,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,kBAAA,GAAA,cAAA,UAA0B,aAAa;GACvC,iBAAA,GAAA,cAAA,UAAyB,OAAO;GAChC,kBAAA,GAAA,cAAA,UAA0B,aAAa;GACvC,oBAAoB;GACpB,kBAAA,GAAA,cAAA,UAA0B,aAAa;GACvC;GACA,UAAU,iBAAiB;GAC3B,UAAU;GACV,UAAU,cAAc,KAAA,IAAY;GACpC;GACA,GAAG;GACH,GAAG;GACH,KAAK,UAAU,UAAU,GAAG;GAC5B,WAAA,GAAA,cAAA,YAAqB,MAAM,UAAU,YAAY,UAAU,QAAQ;EACrE,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAKY;EACZ;CACF;AACF"}
+{"version":3,"file":"use-segmented-control.js","names":["createContext"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\n\ninterface SegmentedControlContext extends Omit<\n  UseSegmentedControlReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [SegmentedControlContext, useSegmentedControlContext] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n  })\n\nexport { SegmentedControlContext, useSegmentedControlContext }\n\nconst {\n  DescendantsContext: SegmentedControlDescendantsContext,\n  useDescendant: useSegmentedControlDescendant,\n  useDescendants: useSegmentedControlDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n  SegmentedControlDescendantsContext,\n  useSegmentedControlDescendant,\n  useSegmentedControlDescendants,\n}\n\nexport interface UseSegmentedControlProps<\n  Y extends string = string,\n> extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: Y\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The orientation of the segmented control.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the segmented control.\n   */\n  value?: Y\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n  id,\n  name,\n  defaultValue,\n  disabled,\n  orientation = \"horizontal\",\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n  const uuid = useId()\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const descendants = useSegmentedControlDescendants()\n\n  id ??= uuid\n  name ??= uuid\n\n  const getRootProps: PropGetter = useCallback(\n    (props) =>\n      mergeProps(\n        {\n          id,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-orientation\": orientation,\n          \"data-disabled\": dataAttr(disabled),\n          \"data-orientation\": orientation,\n          \"data-readonly\": dataAttr(readOnly),\n          role: \"radiogroup\",\n        },\n        rest,\n        props,\n      )(),\n    [disabled, id, orientation, readOnly, rest],\n  )\n\n  return {\n    id,\n    name,\n    descendants,\n    disabled,\n    orientation,\n    readOnly,\n    setValue,\n    value,\n    getRootProps,\n  }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n  extends HTMLProps<\"label\">, Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n  /**\n   * The value of the segmented control item.\n   */\n  value: Y\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n  disabled,\n  readOnly,\n  value,\n  inputProps,\n  ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n  const {\n    name,\n    disabled: rootDisabled,\n    orientation,\n    readOnly: rootReadOnly,\n    setValue,\n    value: selectedValue,\n  } = useSegmentedControlContext()\n  const { register } = useSegmentedControlDescendant({\n    disabled: disabled || readOnly,\n  })\n  const checked = value === selectedValue\n  const trulyDisabled = disabled ?? rootDisabled\n  const trulyReadOnly = readOnly ?? rootReadOnly\n  const interactive = !(trulyReadOnly || trulyDisabled)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setValue(ev.target.value)\n    },\n    [setValue],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) =>\n      mergeProps(\n        {\n          \"aria-disabled\": ariaAttr(trulyDisabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-disabled\": dataAttr(trulyDisabled),\n          \"data-orientation\": orientation,\n          \"data-readonly\": dataAttr(trulyReadOnly),\n          \"data-root-disabled\": dataAttr(rootDisabled),\n          \"data-root-readonly\": dataAttr(rootReadOnly),\n        },\n        rest,\n        props,\n      )(),\n    [\n      orientation,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      rootDisabled,\n      rootReadOnly,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      checked,\n      disabled: trulyDisabled || trulyReadOnly,\n      readOnly: trulyReadOnly,\n      tabIndex: interactive ? undefined : -1,\n      value,\n      ...inputProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n    }),\n    [\n      orientation,\n      name,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      interactive,\n      value,\n      inputProps,\n      register,\n      onChange,\n    ],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n  typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,CAAC,yBAAyB,8BAC9BA,gBAAuC,EACrC,MAAM,0BACR,CAAC;AAIH,MAAM,EACJ,oBAAoB,oCACpB,eAAe,+BACf,gBAAgB,mCACd,kBAAoC;AA+CxC,MAAa,uBAAkD,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,cACV,GAAG,SAC4B,CAAC,MAAM;CACtC,MAAM,OAAO,MAAM;CACnB,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACZ,CAAC;CACD,MAAM,cAAc,+BAA+B;CAEnD,OAAO;CACP,SAAS;CAET,MAAM,eAA2B,aAC9B,UACC,WACE;EACE;EACA,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAClC,oBAAoB;EACpB,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAClC,oBAAoB;EACpB,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAClC,MAAM;CACR,GACA,MACA,KACF,CAAC,CAAC,GACJ;EAAC;EAAU;EAAI;EAAa;EAAU;CAAI,CAC5C;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF;AAgBA,MAAa,2BAAsD,EACjE,UACA,UACA,OACA,YACA,GAAG,WACkC;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,kBACL,2BAA2B;CAC/B,MAAM,EAAE,aAAa,8BAA8B,EACjD,UAAU,YAAY,SACxB,CAAC;CACD,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,cAAc,EAAE,iBAAiB;CAEvC,MAAM,WAAW,aACd,OAAsC;EACrC,SAAS,GAAG,OAAO,KAAK;CAC1B,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,gBAAqC,aACxC,UACC,WACE;EACE,kBAAA,GAAA,cAAA,SAAA,CAA0B,aAAa;EACvC,iBAAA,GAAA,cAAA,SAAA,CAAyB,OAAO;EAChC,kBAAA,GAAA,cAAA,SAAA,CAA0B,aAAa;EACvC,oBAAoB;EACpB,kBAAA,GAAA,cAAA,SAAA,CAA0B,aAAa;EACvC,uBAAA,GAAA,cAAA,SAAA,CAA+B,YAAY;EAC3C,uBAAA,GAAA,cAAA,SAAA,CAA+B,YAAY;CAC7C,GACA,MACA,KACF,CAAC,CAAC,GACJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAoCA,OAAO;EACL;EACA,eApCyC,aACxC,EAAE,KAAK,GAAG,UAAU,CAAC,OAAO;GAC3B,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,kBAAA,GAAA,cAAA,SAAA,CAA0B,aAAa;GACvC,iBAAA,GAAA,cAAA,SAAA,CAAyB,OAAO;GAChC,kBAAA,GAAA,cAAA,SAAA,CAA0B,aAAa;GACvC,oBAAoB;GACpB,kBAAA,GAAA,cAAA,SAAA,CAA0B,aAAa;GACvC;GACA,UAAU,iBAAiB;GAC3B,UAAU;GACV,UAAU,cAAc,KAAA,IAAY;GACpC;GACA,GAAG;GACH,GAAG;GACH,KAAK,UAAU,UAAU,GAAG;GAC5B,WAAA,GAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,YAAY,UAAU,QAAQ;EACrE,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAKY;EACZ;CACF;AACF"}