@yamada-ui/react 2.2.1-dev-20260508120223 → 2.2.1-dev-20260509050741

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

@@ -1 +1 @@
-{"version":3,"file":"use-rating.js","names":["createContext","roundedValue","props","value","getLabelProps: PropGetter<\"label\">"],"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/index.js

@@ -2,5 +2,4 @@ import { reorderStyle } from "./reorder.style.js";
 import { ReorderContext, ReorderItemContext, useReorder, useReorderContext, useReorderItem, useReorderItemContext } from "./use-reorder.js";
 import { ReorderItem, ReorderPropsContext, ReorderRoot, ReorderTrigger, useReorderPropsContext } from "./reorder.js";
 import { namespace_exports } from "./namespace.js";
-
-export { namespace_exports as Reorder, ReorderContext, ReorderItem, ReorderItemContext, ReorderPropsContext, ReorderRoot, ReorderTrigger, reorderStyle, useReorder, useReorderContext, useReorderItem, useReorderItemContext, useReorderPropsContext };
+export { namespace_exports as Reorder, ReorderContext, ReorderItem, ReorderItemContext, ReorderPropsContext, ReorderRoot, ReorderTrigger, reorderStyle, useReorder, useReorderContext, useReorderItem, useReorderItemContext, useReorderPropsContext };

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

@@ -1,7 +1,6 @@
-import { __exportAll } from "../../_virtual/rolldown_runtime.js";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { ReorderContext, ReorderItemContext, useReorderContext, useReorderItemContext } from "./use-reorder.js";
 import { ReorderItem, ReorderPropsContext, ReorderRoot, ReorderTrigger, useReorderPropsContext } from "./reorder.js";
-
 //#region src/components/reorder/namespace.ts
 var namespace_exports = /* @__PURE__ */ __exportAll({
 	Context: () => ReorderContext,
@@ -14,7 +13,7 @@ var namespace_exports = /* @__PURE__ */ __exportAll({
 	useItemContext: () => useReorderItemContext,
 	usePropsContext: () => useReorderPropsContext
 });
-
 //#endregion
 export { namespace_exports };
+
 //# sourceMappingURL=namespace.js.map

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

@@ -1,16 +1,12 @@
 "use client";
-
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
-import "../../core/index.js";
 import { GripVerticalIcon } from "../icon/icons/grip-vertical-icon.js";
-import "../icon/index.js";
 import { useValue } from "../../hooks/use-value/index.js";
 import { reorderStyle } from "./reorder.style.js";
 import { ReorderContext, ReorderItemContext, useReorder, useReorderItem, useReorderItemContext } from "./use-reorder.js";
 import { jsx } from "react/jsx-runtime";
 import { Reorder } from "motion/react";
-
 //#region src/components/reorder/reorder.tsx
 const { PropsContext: ReorderPropsContext, usePropsContext: useReorderPropsContext, withContext, withProvider } = createSlotComponent("reorder", reorderStyle);
 /**
@@ -51,7 +47,7 @@ const ReorderTrigger = withContext("div", "trigger")(void 0, (props) => {
 		...getTriggerProps(props)
 	};
 });
-
 //#endregion
 export { ReorderItem, ReorderPropsContext, ReorderRoot, ReorderTrigger, useReorderPropsContext };
+
 //# sourceMappingURL=reorder.js.map

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,aAAa;;;;;;AAShF,MAAa,cAAc,cAEA,EACvB,aAAa,iBACb,GAAG,WACsB;CACzB,MAAM,cAAc,SAAS,gBAAgB;CAC7C,MAAM,EAAE,UAAU,iBAAiB,WAAW;EAC5C,GAAG;EACH,MAAM,oBAAC,gBAAc;EACrB;EACD,CAAC;AAEF,QACE,oBAAC;EAAe,OAAO,EAAE,aAAa;YACpC,oBAAC,OAAO;GACN,IAAIA,QAAgB;GACpB,GAAK,cAAc;GAElB;IACS;GACG;GAGrB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AASH,MAAa,cAAc,aAEA,UAA+B;CACtD,MAAM,EAAE,cAAc,oBAAoB,eAAe,MAAM;AAE/D,QACE,oBAAC;EAAmB,OAAO,EAAE,iBAAiB;YAC5C,oBAAC,OAAO;GACN,IAAIA,QAAgB;GACpB,GAAK,cAAc;IACnB;GACiB;GAGzB,OACD,EAAE;AAMH,MAAa,iBAAiB,YAC5B,OACA,UACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,uBAAuB;AAEnD,QAAO;EAAE,UAAU,oBAAC,qBAAmB;EAAE,GAAG,gBAAgB,MAAM;EAAE;EACpE"}
+{"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,aAAa;;;;;;AAShF,MAAa,cAAc,cAEA,EACvB,aAAa,iBACb,GAAG,WACsB;CACzB,MAAM,cAAc,SAAS,gBAAgB;CAC7C,MAAM,EAAE,UAAU,iBAAiB,WAAW;EAC5C,GAAG;EACH,MAAM,oBAAC,aAAD,EAAe,CAAA;EACrB;EACD,CAAC;CAEF,OACE,oBAAC,gBAAD;EAAgB,OAAO,EAAE,aAAa;YACpC,oBAAC,OAAO,IAAR;GACE,IAAIA,QAAgB;GACpB,GAAK,cAAc;GAElB;GACS,CAAA;EACG,CAAA;GAGrB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AASH,MAAa,cAAc,aAEA,UAA+B;CACtD,MAAM,EAAE,cAAc,oBAAoB,eAAe,MAAM;CAE/D,OACE,oBAAC,oBAAD;EAAoB,OAAO,EAAE,iBAAiB;YAC5C,oBAAC,OAAO,IAAR;GACE,IAAIA,QAAgB;GACpB,GAAK,cAAc;GACnB,CAAA;EACiB,CAAA;GAGzB,OACD,EAAE;AAMH,MAAa,iBAAiB,YAC5B,OACA,UACD,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,uBAAuB;CAEnD,OAAO;EAAE,UAAU,oBAAC,kBAAD,EAAoB,CAAA;EAAE,GAAG,gBAAgB,MAAM;EAAE;EACpE"}

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

@@ -1,6 +1,4 @@
 import { defineComponentSlotStyle } from "../../core/system/config.js";
-import "../../core/index.js";
-
 //#region src/components/reorder/reorder.style.ts
 const reorderStyle = defineComponentSlotStyle({
 	base: {
@@ -74,7 +72,13 @@ const reorderStyle = defineComponentSlotStyle({
 		subtle: { item: { layerStyle: "subtle" } },
 		surface: { item: { layerStyle: "surface" } }
 	},
-	props: { orientation: {
+	props: { 
+	/**
+	* The orientation of the reorder.
+	*
+	* @default 'vertical'
+	*/
+orientation: {
 		horizontal: { root: { flexDirection: "row" } },
 		vertical: { root: {
 			alignItems: "stretch",
@@ -87,7 +91,7 @@ const reorderStyle = defineComponentSlotStyle({
 		orientation: "vertical"
 	}
 });
-
 //#endregion
 export { reorderStyle };
+
 //# sourceMappingURL=reorder.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"reorder.style.js","names":[],"sources":["../../../../src/components/reorder/reorder.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const reorderStyle = defineComponentSlotStyle({\n  base: {\n    item: {\n      \"&[data-has-trigger]\": {\n        cursor: \"default\",\n        userSelect: \"none\",\n      },\n      cursor: \"grab\",\n      flex: \"1\",\n      rounded: \"l2\",\n      _selected: {\n        boxShadow: \"md\",\n        cursor: \"grabbing\",\n      },\n    },\n    root: {\n      display: \"flex\",\n      w: \"full\",\n    },\n    trigger: {\n      alignItems: \"center\",\n      color: \"fg.subtle\",\n      cursor: \"grab\",\n      display: \"flex\",\n      fontSize: \"2xl\",\n      justifyContent: \"center\",\n      _selected: {\n        cursor: \"grabbing\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      item: { p: \"3\" },\n      root: { gap: \"3\" },\n    },\n    md: {\n      item: { p: \"4\" },\n      root: { gap: \"4\" },\n    },\n    lg: {\n      item: { p: \"6\" },\n      root: { gap: \"6\" },\n    },\n    xl: {\n      item: { p: \"8\" },\n      root: { gap: \"8\" },\n    },\n  },\n\n  variants: {\n    elevated: {\n      item: {\n        bg: \"bg.panel\",\n        boxShadow: \"md\",\n        _selected: {\n          boxShadow: \"lg\",\n        },\n      },\n    },\n    outline: {\n      item: {\n        layerStyle: \"outline\",\n        bg: \"bg\",\n      },\n    },\n    panel: {\n      item: {\n        layerStyle: \"panel\",\n      },\n    },\n    plain: {\n      item: {\n        flex: \"inherit\",\n        p: \"0px\",\n        rounded: \"0px\",\n        _selected: { boxShadow: \"unset\" },\n      },\n      root: { gap: \"0px\" },\n    },\n    solid: {\n      item: {\n        layerStyle: \"solid\",\n      },\n    },\n    subtle: {\n      item: {\n        layerStyle: \"subtle\",\n      },\n    },\n    surface: {\n      item: {\n        layerStyle: \"surface\",\n      },\n    },\n  },\n\n  props: {\n    /**\n     * The orientation of the reorder.\n     *\n     * @default 'vertical'\n     */\n    orientation: {\n      horizontal: {\n        root: {\n          flexDirection: \"row\",\n        },\n      },\n      vertical: {\n        root: {\n          alignItems: \"stretch\",\n          flexDirection: \"column\",\n        },\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"panel\",\n    orientation: \"vertical\",\n  },\n})\n\nexport type ReorderStyle = typeof reorderStyle\n"],"mappings":";;;;AAEA,MAAa,eAAe,yBAAyB;CACnD,MAAM;EACJ,MAAM;GACJ,uBAAuB;IACrB,QAAQ;IACR,YAAY;IACb;GACD,QAAQ;GACR,MAAM;GACN,SAAS;GACT,WAAW;IACT,WAAW;IACX,QAAQ;IACT;GACF;EACD,MAAM;GACJ,SAAS;GACT,GAAG;GACJ;EACD,SAAS;GACP,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,UAAU;GACV,gBAAgB;GAChB,WAAW,EACT,QAAQ,YACT;GACD,WAAW,EACT,YAAY,YACb;GACF;EACF;CAED,OAAO;EACL,IAAI;GACF,MAAM,EAAE,GAAG,KAAK;GAChB,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,MAAM,EAAE,GAAG,KAAK;GAChB,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,MAAM,EAAE,GAAG,KAAK;GAChB,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,MAAM,EAAE,GAAG,KAAK;GAChB,MAAM,EAAE,KAAK,KAAK;GACnB;EACF;CAED,UAAU;EACR,UAAU,EACR,MAAM;GACJ,IAAI;GACJ,WAAW;GACX,WAAW,EACT,WAAW,MACZ;GACF,EACF;EACD,SAAS,EACP,MAAM;GACJ,YAAY;GACZ,IAAI;GACL,EACF;EACD,OAAO,EACL,MAAM,EACJ,YAAY,SACb,EACF;EACD,OAAO;GACL,MAAM;IACJ,MAAM;IACN,GAAG;IACH,SAAS;IACT,WAAW,EAAE,WAAW,SAAS;IAClC;GACD,MAAM,EAAE,KAAK,OAAO;GACrB;EACD,OAAO,EACL,MAAM,EACJ,YAAY,SACb,EACF;EACD,QAAQ,EACN,MAAM,EACJ,YAAY,UACb,EACF;EACD,SAAS,EACP,MAAM,EACJ,YAAY,WACb,EACF;EACF;CAED,OAAO,EAML,aAAa;EACX,YAAY,EACV,MAAM,EACJ,eAAe,OAChB,EACF;EACD,UAAU,EACR,MAAM;GACJ,YAAY;GACZ,eAAe;GAChB,EACF;EACF,EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,aAAa;EACd;CACF,CAAC"}
+{"version":3,"file":"reorder.style.js","names":[],"sources":["../../../../src/components/reorder/reorder.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const reorderStyle = defineComponentSlotStyle({\n  base: {\n    item: {\n      \"&[data-has-trigger]\": {\n        cursor: \"default\",\n        userSelect: \"none\",\n      },\n      cursor: \"grab\",\n      flex: \"1\",\n      rounded: \"l2\",\n      _selected: {\n        boxShadow: \"md\",\n        cursor: \"grabbing\",\n      },\n    },\n    root: {\n      display: \"flex\",\n      w: \"full\",\n    },\n    trigger: {\n      alignItems: \"center\",\n      color: \"fg.subtle\",\n      cursor: \"grab\",\n      display: \"flex\",\n      fontSize: \"2xl\",\n      justifyContent: \"center\",\n      _selected: {\n        cursor: \"grabbing\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      item: { p: \"3\" },\n      root: { gap: \"3\" },\n    },\n    md: {\n      item: { p: \"4\" },\n      root: { gap: \"4\" },\n    },\n    lg: {\n      item: { p: \"6\" },\n      root: { gap: \"6\" },\n    },\n    xl: {\n      item: { p: \"8\" },\n      root: { gap: \"8\" },\n    },\n  },\n\n  variants: {\n    elevated: {\n      item: {\n        bg: \"bg.panel\",\n        boxShadow: \"md\",\n        _selected: {\n          boxShadow: \"lg\",\n        },\n      },\n    },\n    outline: {\n      item: {\n        layerStyle: \"outline\",\n        bg: \"bg\",\n      },\n    },\n    panel: {\n      item: {\n        layerStyle: \"panel\",\n      },\n    },\n    plain: {\n      item: {\n        flex: \"inherit\",\n        p: \"0px\",\n        rounded: \"0px\",\n        _selected: { boxShadow: \"unset\" },\n      },\n      root: { gap: \"0px\" },\n    },\n    solid: {\n      item: {\n        layerStyle: \"solid\",\n      },\n    },\n    subtle: {\n      item: {\n        layerStyle: \"subtle\",\n      },\n    },\n    surface: {\n      item: {\n        layerStyle: \"surface\",\n      },\n    },\n  },\n\n  props: {\n    /**\n     * The orientation of the reorder.\n     *\n     * @default 'vertical'\n     */\n    orientation: {\n      horizontal: {\n        root: {\n          flexDirection: \"row\",\n        },\n      },\n      vertical: {\n        root: {\n          alignItems: \"stretch\",\n          flexDirection: \"column\",\n        },\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"panel\",\n    orientation: \"vertical\",\n  },\n})\n\nexport type ReorderStyle = typeof reorderStyle\n"],"mappings":";;AAEA,MAAa,eAAe,yBAAyB;CACnD,MAAM;EACJ,MAAM;GACJ,uBAAuB;IACrB,QAAQ;IACR,YAAY;IACb;GACD,QAAQ;GACR,MAAM;GACN,SAAS;GACT,WAAW;IACT,WAAW;IACX,QAAQ;IACT;GACF;EACD,MAAM;GACJ,SAAS;GACT,GAAG;GACJ;EACD,SAAS;GACP,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,UAAU;GACV,gBAAgB;GAChB,WAAW,EACT,QAAQ,YACT;GACD,WAAW,EACT,YAAY,YACb;GACF;EACF;CAED,OAAO;EACL,IAAI;GACF,MAAM,EAAE,GAAG,KAAK;GAChB,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,MAAM,EAAE,GAAG,KAAK;GAChB,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,MAAM,EAAE,GAAG,KAAK;GAChB,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,MAAM,EAAE,GAAG,KAAK;GAChB,MAAM,EAAE,KAAK,KAAK;GACnB;EACF;CAED,UAAU;EACR,UAAU,EACR,MAAM;GACJ,IAAI;GACJ,WAAW;GACX,WAAW,EACT,WAAW,MACZ;GACF,EACF;EACD,SAAS,EACP,MAAM;GACJ,YAAY;GACZ,IAAI;GACL,EACF;EACD,OAAO,EACL,MAAM,EACJ,YAAY,SACb,EACF;EACD,OAAO;GACL,MAAM;IACJ,MAAM;IACN,GAAG;IACH,SAAS;IACT,WAAW,EAAE,WAAW,SAAS;IAClC;GACD,MAAM,EAAE,KAAK,OAAO;GACrB;EACD,OAAO,EACL,MAAM,EACJ,YAAY,SACb,EACF;EACD,QAAQ,EACN,MAAM,EACJ,YAAY,UACb,EACF;EACD,SAAS,EACP,MAAM,EACJ,YAAY,WACb,EACF;EACF;CAED,OAAO;;;;;;AAML,aAAa;EACX,YAAY,EACV,MAAM,EACJ,eAAe,OAChB,EACF;EACD,UAAU,EACR,MAAM;GACJ,YAAY;GACZ,eAAe;GAChB,EACF;EACF,EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,aAAa;EACd;CACF,CAAC"}

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

@@ -1,15 +1,12 @@
 "use client";
-
 import { useValidChildren } from "../../utils/children.js";
 import { createContext as createContext$1 } from "../../utils/context.js";
 import { useUpdateEffect } from "../../utils/effect.js";
 import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
 import { mergeProps } from "../../core/components/props.js";
-import "../../core/index.js";
 import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDragControls, useMotionValue } from "motion/react";
-
 //#region src/components/reorder/use-reorder.ts
 const getAlternativeValue = ({ children, label } = {}) => serializeValue(children ?? label);
 const serializeValue = (value) => (0, utils_exports.isObject)(value) || (0, utils_exports.isArray)(value) ? JSON.stringify(value) : value;
@@ -20,10 +17,10 @@ const useReorder = ({ ref, children, item, items = [], orientation = "vertical",
 	const validChildren = useValidChildren(children);
 	const hasChildren = !!validChildren.length;
 	const defaultValues = useMemo(() => {
-		const values$1 = hasChildren ? validChildren.map(({ props }) => props.value ?? getAlternativeValue(props)) : items.map((props) => props.value ?? getAlternativeValue(props));
-		const duplicatedValues = values$1.filter((value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value));
+		const values = hasChildren ? validChildren.map(({ props }) => props.value ?? getAlternativeValue(props)) : items.map((props) => props.value ?? getAlternativeValue(props));
+		const duplicatedValues = values.filter((value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value));
 		if (duplicatedValues.length) console.warn(`Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(`', '`)}' `);
-		return Array.from(new Set(values$1));
+		return Array.from(new Set(values));
 	}, [
 		hasChildren,
 		validChildren,
@@ -99,11 +96,11 @@ const useReorderItem = ({ ref, label, value, ...rest }) => {
 	const y = useMotionValue(0);
 	const register = useCallback((node) => setHasTrigger(!!node), []);
 	useEffect(() => {
-		const unsubscribeX = x.on("change", (x$1) => {
-			if (orientation === "horizontal") setDrag(x$1 !== 0);
+		const unsubscribeX = x.on("change", (x) => {
+			if (orientation === "horizontal") setDrag(x !== 0);
 		});
-		const unsubscribeY = y.on("change", (y$1) => {
-			if (orientation === "vertical") setDrag(y$1 !== 0);
+		const unsubscribeY = y.on("change", (y) => {
+			if (orientation === "vertical") setDrag(y !== 0);
 		});
 		return () => {
 			unsubscribeX();
@@ -156,7 +153,7 @@ const useReorderItem = ({ ref, label, value, ...rest }) => {
 		])
 	};
 };
-
 //#endregion
 export { ReorderContext, ReorderItemContext, useReorder, useReorderContext, useReorderItem, useReorderItemContext };
+
 //# sourceMappingURL=use-reorder.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-reorder.js","names":["createContext","values","x","y"],"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<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" | \"onReorder\" | \"values\">\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":";;;;;;;;;;;;;AA2BA,MAAM,uBAAuB,EAAE,UAAU,UAAgB,EAAE,KACzD,eAAe,YAAY,MAAM;AAEnC,MAAM,kBAAkB,sCACb,MAAM,+BAAY,MAAM,GAAG,KAAK,UAAU,MAAM,GAAG;AAa9D,MAAM,CAAC,gBAAgB,qBAAqBA,gBAA8B,EACxE,MAAM,kBACP,CAAC;AAQF,MAAM,CAAC,oBAAoB,yBACzBA,gBAAkC,EAChC,MAAM,sBACP,CAAC;AAiCJ,MAAa,cAA0B,EACrC,KACA,UACA,MACA,QAAQ,EAAE,EACV,cAAc,YACd,UACA,kBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,OAAO,gBAAgB,aAAa,MAAM;CAChD,MAAM,gBAAgB,iBAAiB,SAAS;CAChD,MAAM,cAAc,CAAC,CAAC,cAAc;CACpC,MAAM,gBAAgB,cAAc;EAClC,MAAMC,WAAS,cACX,cAAc,KACX,EAAE,YAAY,MAAM,SAAS,oBAAoB,MAAM,CACzD,GACD,MAAM,KAAK,UAAU,MAAM,SAAS,oBAAoB,MAAM,CAAC;EAEnE,MAAM,mBAAmBA,SAAO,QAC7B,OAAO,OAAO,SACb,KAAK,QAAQ,MAAM,KAAK,SAAS,UAAU,KAAK,YAAY,MAAM,CACrE;AAED,MAAI,iBAAiB,OACnB,SAAQ,KACN,mFAAmF,iBAAiB,KAClG,OACD,CAAC,IACH;AAEH,SAAO,MAAM,KAAK,IAAI,IAAIA,SAAO,CAAC;IACjC;EAAC;EAAa;EAAe;EAAM,CAAC;CACvC,MAAM,WAAW,cAAc;AAC7B,SAAO,OAAO,YACZ,cAAc,KAAK,UAAU,CAC3B,eAAe,MAAM,MAAM,MAAM,IAC/B,eAAe,oBAAoB,MAAM,MAAM,CAAC,EAClD,MACD,CAAC,CACH;IACA,CAAC,cAAc,CAAC;CACnB,MAAM,UAAU,cAAc;AAC5B,SAAO,OAAO,YACZ,MAAM,KAAK,UAAU,CACnB,eAAe,MAAM,MAAM,IACzB,eAAe,oBAAoB,MAAM,CAAC,EAC5C,MACD,CAAC,CACH;IACA,CAAC,MAAM,CAAC;CACX,MAAM,oBAAoB,OAAY,cAAc;CACpD,MAAM,CAAC,QAAQ,aAAa,SAAc,cAAc;CACxD,MAAM,aAAa,OAAY,cAAc;CAC7C,MAAM,gBAAgB,cAElB,OAAO,KAAK,UAAU;AACpB,MAAI,YACF,QAAO,SAAS,eAAe,MAAM;OAChC;GACL,MAAM,QAAQ,QAAQ,eAAe,MAAM;AAE3C,UAAO,SAAS,OACZ,aAAa,MAAM;IAAE,KAAK,eAAe,MAAM,MAAM;IAAE,GAAG;IAAO,CAAC,GAClE;;GAEN,EACJ;EAAC;EAAQ;EAAa;EAAU;EAAS;EAAK,CAC/C;CAED,MAAM,YAAY,aACf,cAAmB;AAClB,YAAU,UAAU;AAEpB,aAAW,UAAU;IAEvB,CAAC,SAAS,CACX;CAED,MAAM,oBAAoB,kBAAkB;AAG1C,MAFc,KAAK,UAAU,WAAW,QAAQ,KAAK,KAAK,UAAU,OAAO,CAEhE;AAEX,aAAW,UAAU;AAErB,qBAAmB,OAAO;IACzB,CAAC,kBAAkB,OAAO,CAAC;AAE9B,uBAAsB;AAKpB,MAHE,KAAK,UAAU,cAAc,KAC7B,KAAK,UAAU,kBAAkB,QAAQ,CAEhC;AAEX,aAAW,UAAU;AACrB,oBAAkB,UAAU;AAE5B,YAAU,cAAc;IACvB,CAAC,cAAc,CAAC;AAsBnB,QAAO;EAAE,UAAU;EAAe;EAAa;EAAQ,cAhBnD,aACD,QAAQ,EAAE,KACT,WACE;GAAE;GAAM;GAAQ,EAChB,MACA,OACA,EAAE,KAAK,EACP;GACE,WAAW;GACX;GACA,YAAY;GACb,CACF,EAAE,EACL;GAAC;GAAM;GAAK;GAAmB;GAAW;GAAM;GAAO,CACxD;EAEoE;;AAgBvE,MAAa,kBAA8B,EACzC,KACA,OACA,OACA,GAAG,WACyB;CAC5B,MAAM,EAAE,gBAAgB,mBAAmB;CAC3C,MAAM,eAAe,iBAAiB;CACtC,MAAM,CAAC,YAAY,iBAAiB,SAAkB,MAAM;CAC5D,MAAM,CAAC,MAAM,WAAW,SAAkB,MAAM;CAChD,MAAM,IAAI,eAAe,EAAE;CAC3B,MAAM,IAAI,eAAe,EAAE;CAE3B,MAAM,WAAW,aACd,SAA6B,cAAc,CAAC,CAAC,KAAK,EACnD,EAAE,CACH;AAED,iBAAgB;EACd,MAAM,eAAe,EAAE,GAAG,WAAW,QAAM;AACzC,OAAI,gBAAgB,aAAc,SAAQC,QAAM,EAAE;IAClD;EACF,MAAM,eAAe,EAAE,GAAG,WAAW,QAAM;AACzC,OAAI,gBAAgB,WAAY,SAAQC,QAAM,EAAE;IAChD;AAEF,eAAa;AACX,iBAAc;AACd,iBAAc;;IAEf;EAAC;EAAa;EAAG;EAAE,CAAC;AA6CvB,QAAO;EAAE,cAtCL,aACD,QAAQ,EAAE,KAAK;GACd,MAAM,WAAW,MAAM,YAAY,KAAK,YAAY;AAepD,UAAO;IACL,GAda,WACb;KACE,gDAA6B,WAAW;KACxC,6CAA0B,KAAK;KAC/B;KACA,cAAc,CAAC;KACf,OAAO,SAAS,oBAAoB,EAAE,UAAU,CAAC;KAClD,EACD,OACA,MACA,EAAE,KAAK,CACR,EAAE;IAID,OAAO;KAAE;KAAG;KAAG,GAAG,MAAM;KAAO,GAAG,KAAK;KAAO;IAC9C;IACD;KAEH;GAAC;GAAK;GAAM;GAAc;GAAY;GAAO;GAAG;GAAG;GAAM;GAAM,CAChE;EAcsB,iBAZa,aACjC,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,KAAK,UAAU,UAAU,MAAM,IAAI;GACnC,6CAA0B,KAAK;GAC/B,6CAA0B,MAAM,gBAAgB,OAC9C,aAAa,MAAM,GAAG,CACvB;GACF,GACD;GAAC;GAAM;GAAc;GAAS,CAC/B;EAEuC"}
+{"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<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" | \"onReorder\" | \"values\">\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/index.js

@@ -2,5 +2,4 @@ import { resizableStyle } from "./resizable.style.js";
 import { ResizableContext, useResizable, useResizableContext, useResizableItem, useResizableLayout, useResizableTrigger } from "./use-resizable.js";
 import { ResizableItem, ResizablePropsContext, ResizableRoot, ResizableTrigger, useResizablePropsContext } from "./resizable.js";
 import { namespace_exports } from "./namespace.js";
-
-export { namespace_exports as Resizable, ResizableContext, ResizableItem, ResizablePropsContext, ResizableRoot, ResizableTrigger, resizableStyle, useResizable, useResizableContext, useResizableItem, useResizableLayout, useResizablePropsContext, useResizableTrigger };
+export { namespace_exports as Resizable, ResizableContext, ResizableItem, ResizablePropsContext, ResizableRoot, ResizableTrigger, resizableStyle, useResizable, useResizableContext, useResizableItem, useResizableLayout, useResizablePropsContext, useResizableTrigger };

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

@@ -1,7 +1,6 @@
-import { __exportAll } from "../../_virtual/rolldown_runtime.js";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { ResizableContext, useResizableContext, useResizableLayout } from "./use-resizable.js";
 import { ResizableItem, ResizablePropsContext, ResizableRoot, ResizableTrigger, useResizablePropsContext } from "./resizable.js";
-
 //#region src/components/resizable/namespace.ts
 var namespace_exports = /* @__PURE__ */ __exportAll({
 	Context: () => ResizableContext,
@@ -13,7 +12,7 @@ var namespace_exports = /* @__PURE__ */ __exportAll({
 	useLayout: () => useResizableLayout,
 	usePropsContext: () => useResizablePropsContext
 });
-
 //#endregion
 export { namespace_exports };
+
 //# sourceMappingURL=namespace.js.map

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

@@ -1,15 +1,12 @@
 "use client";
-
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
-import "../../core/index.js";
 import { useValue } from "../../hooks/use-value/index.js";
 import { resizableStyle } from "./resizable.style.js";
 import { ResizableContext, useResizable, useResizableItem, useResizableTrigger } from "./use-resizable.js";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Group, Panel, Separator } from "react-resizable-panels";
-
 //#region src/components/resizable/resizable.tsx
 const { PropsContext: ResizablePropsContext, usePropsContext: useResizablePropsContext, withContext, withProvider } = createSlotComponent("resizable", resizableStyle);
 const ResizableRoot = withProvider(({ children, orientation: orientationProp, ...rest }) => {
@@ -53,7 +50,7 @@ const ResizableTrigger = withContext(({ children, icon, iconProps, ...rest }) =>
 	});
 }, "trigger")();
 const ResizableIcon = withContext("div", "icon")();
-
 //#endregion
 export { ResizableItem, ResizablePropsContext, ResizableRoot, ResizableTrigger, useResizablePropsContext };
+
 //# sourceMappingURL=resizable.js.map

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,eACD;AAID,MAAa,gBAAgB,cAK1B,EAAE,UAAU,aAAa,iBAAiB,GAAG,WAAW;CAEvD,MAAM,EAAE,UAAU,UAAU,aAAa,iBAAiB,aAAa;EACrE,aAF0B,SAAS,gBAAgB;EAGnD,GAAG;EACJ,CAAC;AAOF,QACE,oBAAC;EAAiB,OANJ,eACP;GAAE;GAAU;GAAU;GAAa,GAC1C;GAAC;GAAU;GAAa;GAAS,CAClC;YAIG,oBAAC,OAAO;GAAI,IAAI;GAAO,GAAI,cAAc;GACtC;IACU;GACI;GAGvB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAKH,MAAa,gBAAgB,aAAwC,UAAU;CAC7E,MAAM,EAAE,iBAAiB,iBAAiB,MAAM;AAEhD,QAAO,oBAAC,OAAO;EAAI,IAAI;EAAO,GAAI,cAAc;GAAI;GACnD,OAAO,EAAE;AAcZ,MAAa,mBAAmB,aAC7B,EAAE,UAAU,MAAM,WAAW,GAAG,WAAW;CAC1C,MAAM,EAAE,cAAc,oBAAoB,oBAAoB,KAAK;AAEnE,QACE,qBAAC,OAAO;EAAI,IAAI;EAAW,GAAI,iBAAiB;aAC7C,OACC,oBAAC;GAAc,GAAI,aAAa,UAAU;aAAG;IAAqB,GAChE,MAEH;GACU;GAGjB,UACD,EAAE;AAIH,MAAM,gBAAgB,YAAuC,OAAO,OAAO,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,eACD;AAID,MAAa,gBAAgB,cAK1B,EAAE,UAAU,aAAa,iBAAiB,GAAG,WAAW;CAEvD,MAAM,EAAE,UAAU,UAAU,aAAa,iBAAiB,aAAa;EACrE,aAF0B,SAAS,gBAEH;EAChC,GAAG;EACJ,CAAC;CAOF,OACE,oBAAC,kBAAD;EAAkB,OANJ,eACP;GAAE;GAAU;GAAU;GAAa,GAC1C;GAAC;GAAU;GAAa;GAAS,CAID;YAC9B,oBAAC,OAAO,KAAR;GAAY,IAAI;GAAO,GAAI,cAAc;GACtC;GACU,CAAA;EACI,CAAA;GAGvB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAKH,MAAa,gBAAgB,aAAwC,UAAU;CAC7E,MAAM,EAAE,iBAAiB,iBAAiB,MAAM;CAEhD,OAAO,oBAAC,OAAO,KAAR;EAAY,IAAI;EAAO,GAAI,cAAc;EAAI,CAAA;GACnD,OAAO,EAAE;AAcZ,MAAa,mBAAmB,aAC7B,EAAE,UAAU,MAAM,WAAW,GAAG,WAAW;CAC1C,MAAM,EAAE,cAAc,oBAAoB,oBAAoB,KAAK;CAEnE,OACE,qBAAC,OAAO,KAAR;EAAY,IAAI;EAAW,GAAI,iBAAiB;YAAhD,CACG,OACC,oBAAC,eAAD;GAAe,GAAI,aAAa,UAAU;aAAG;GAAqB,CAAA,GAChE,MAEH,SACU;;GAGjB,UACD,EAAE;AAIH,MAAM,gBAAgB,YAAuC,OAAO,OAAO,EAAE"}

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

@@ -1,6 +1,4 @@
 import { defineComponentSlotStyle } from "../../core/system/config.js";
-import "../../core/index.js";
-
 //#region src/components/resizable/resizable.style.ts
 const resizableStyle = defineComponentSlotStyle({
 	base: {
@@ -71,7 +69,13 @@ const resizableStyle = defineComponentSlotStyle({
 			}
 		}
 	},
-	props: { orientation: {
+	props: { 
+	/**
+	* The orientation of the resizable.
+	*
+	* @default 'horizontal'
+	*/
+orientation: {
 		horizontal: { icon: { transform: "translate(-50%, -50%) rotate(0deg)" } },
 		vertical: { icon: { transform: "translate(-50%, -50%) rotate(90deg)" } }
 	} },
@@ -144,7 +148,7 @@ const resizableStyle = defineComponentSlotStyle({
 		orientation: "horizontal"
 	}
 });
-
 //#endregion
 export { resizableStyle };
+
 //# sourceMappingURL=resizable.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.style.js","names":[],"sources":["../../../../src/components/resizable/resizable.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const resizableStyle = defineComponentSlotStyle({\n  base: {\n    icon: {\n      alignItems: \"center\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      left: \"50%\",\n      position: \"absolute\",\n      top: \"50%\",\n      translateX: \"-50%\",\n      translateY: \"-50%\",\n    },\n    item: {\n      boxSize: \"full\",\n    },\n    root: {\n      boxSize: \"full\",\n    },\n    trigger: {\n      position: \"relative\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _after: {\n        transitionDuration: \"moderate\",\n        transitionProperty: \"common\",\n      },\n    },\n  },\n\n  variants: {\n    border: {\n      icon: {\n        bg: \"colorScheme.muted\",\n        color: \"colorScheme.fg\",\n        py: \"1\",\n        rounded: \"l1\",\n      },\n      trigger: {\n        bg: \"colorScheme.muted\",\n        focusVisibleRing: \"none\",\n        _after: {\n          position: \"absolute\",\n        },\n        _hover: {\n          bg: \"colorScheme.emphasized\",\n        },\n        _focusVisible: {\n          bg: \"colorScheme.emphasized\",\n        },\n      },\n    },\n    plain: {\n      trigger: {\n        focusVisibleRing: \"none\",\n        _after: {\n          position: \"absolute\",\n        },\n      },\n    },\n    spacer: {\n      icon: {\n        color: \"colorScheme.fg\",\n        transitionDuration: \"moderate\",\n        transitionProperty: \"common\",\n      },\n      trigger: {\n        focusVisibleRing: \"none\",\n        p: \"1\",\n        _after: {\n          bg: \"transparent\",\n          display: \"block\",\n          rounded: \"full\",\n        },\n        _hover: {\n          _after: {\n            bg: \"colorScheme.bg\",\n          },\n          _icon: {\n            color: \"transparent\",\n          },\n        },\n        _focusVisible: {\n          _after: {\n            bg: \"colorScheme.bg\",\n          },\n          _icon: {\n            color: \"transparent\",\n          },\n        },\n      },\n    },\n  },\n\n  props: {\n    /**\n     * The orientation of the resizable.\n     *\n     * @default 'horizontal'\n     */\n    orientation: {\n      horizontal: {\n        icon: {\n          transform: \"translate(-50%, -50%) rotate(0deg)\",\n        },\n      },\n      vertical: {\n        icon: {\n          transform: \"translate(-50%, -50%) rotate(90deg)\",\n        },\n      },\n    },\n  },\n\n  compounds: [\n    {\n      css: {\n        trigger: {\n          h: \"px\",\n          _after: {\n            h: \"2\",\n            left: \"0\",\n            right: \"0\",\n            transform: \"translateY(-50%)\",\n          },\n        },\n      },\n      variant: \"border\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          w: \"px\",\n          _after: {\n            bottom: \"0\",\n            top: \"0\",\n            transform: \"translateX(-50%)\",\n            w: \"2\",\n          },\n        },\n      },\n      variant: \"border\",\n      orientation: \"horizontal\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: { h: \"2\", w: \"full\" },\n        },\n      },\n      variant: \"spacer\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: { h: \"full\", w: \"2\" },\n        },\n      },\n      variant: \"spacer\",\n      orientation: \"horizontal\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: {\n            h: \"2\",\n            left: \"0\",\n            right: \"0\",\n            transform: \"translateY(-50%)\",\n          },\n        },\n      },\n      variant: \"plain\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: {\n            bottom: \"0\",\n            top: \"0\",\n            transform: \"translateX(-50%)\",\n            w: \"2\",\n          },\n        },\n      },\n      variant: \"plain\",\n      orientation: \"horizontal\",\n    },\n  ],\n\n  defaultProps: {\n    variant: \"border\",\n    orientation: \"horizontal\",\n  },\n})\n\nexport type ResizableStyle = typeof resizableStyle\n"],"mappings":";;;;AAEA,MAAa,iBAAiB,yBAAyB;CACrD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,gBAAgB;GAChB,MAAM;GACN,UAAU;GACV,KAAK;GACL,YAAY;GACZ,YAAY;GACb;EACD,MAAM,EACJ,SAAS,QACV;EACD,MAAM,EACJ,SAAS,QACV;EACD,SAAS;GACP,UAAU;GACV,oBAAoB;GACpB,oBAAoB;GACpB,QAAQ;IACN,oBAAoB;IACpB,oBAAoB;IACrB;GACF;EACF;CAED,UAAU;EACR,QAAQ;GACN,MAAM;IACJ,IAAI;IACJ,OAAO;IACP,IAAI;IACJ,SAAS;IACV;GACD,SAAS;IACP,IAAI;IACJ,kBAAkB;IAClB,QAAQ,EACN,UAAU,YACX;IACD,QAAQ,EACN,IAAI,0BACL;IACD,eAAe,EACb,IAAI,0BACL;IACF;GACF;EACD,OAAO,EACL,SAAS;GACP,kBAAkB;GAClB,QAAQ,EACN,UAAU,YACX;GACF,EACF;EACD,QAAQ;GACN,MAAM;IACJ,OAAO;IACP,oBAAoB;IACpB,oBAAoB;IACrB;GACD,SAAS;IACP,kBAAkB;IAClB,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,SAAS;KACT,SAAS;KACV;IACD,QAAQ;KACN,QAAQ,EACN,IAAI,kBACL;KACD,OAAO,EACL,OAAO,eACR;KACF;IACD,eAAe;KACb,QAAQ,EACN,IAAI,kBACL;KACD,OAAO,EACL,OAAO,eACR;KACF;IACF;GACF;EACF;CAED,OAAO,EAML,aAAa;EACX,YAAY,EACV,MAAM,EACJ,WAAW,sCACZ,EACF;EACD,UAAU,EACR,MAAM,EACJ,WAAW,uCACZ,EACF;EACF,EACF;CAED,WAAW;EACT;GACE,KAAK,EACH,SAAS;IACP,GAAG;IACH,QAAQ;KACN,GAAG;KACH,MAAM;KACN,OAAO;KACP,WAAW;KACZ;IACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS;IACP,GAAG;IACH,QAAQ;KACN,QAAQ;KACR,KAAK;KACL,WAAW;KACX,GAAG;KACJ;IACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IAAE,GAAG;IAAK,GAAG;IAAQ,EAC9B,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IAAE,GAAG;IAAQ,GAAG;IAAK,EAC9B,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IACN,GAAG;IACH,MAAM;IACN,OAAO;IACP,WAAW;IACZ,EACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IACN,QAAQ;IACR,KAAK;IACL,WAAW;IACX,GAAG;IACJ,EACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACF;CAED,cAAc;EACZ,SAAS;EACT,aAAa;EACd;CACF,CAAC"}
+{"version":3,"file":"resizable.style.js","names":[],"sources":["../../../../src/components/resizable/resizable.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const resizableStyle = defineComponentSlotStyle({\n  base: {\n    icon: {\n      alignItems: \"center\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      left: \"50%\",\n      position: \"absolute\",\n      top: \"50%\",\n      translateX: \"-50%\",\n      translateY: \"-50%\",\n    },\n    item: {\n      boxSize: \"full\",\n    },\n    root: {\n      boxSize: \"full\",\n    },\n    trigger: {\n      position: \"relative\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _after: {\n        transitionDuration: \"moderate\",\n        transitionProperty: \"common\",\n      },\n    },\n  },\n\n  variants: {\n    border: {\n      icon: {\n        bg: \"colorScheme.muted\",\n        color: \"colorScheme.fg\",\n        py: \"1\",\n        rounded: \"l1\",\n      },\n      trigger: {\n        bg: \"colorScheme.muted\",\n        focusVisibleRing: \"none\",\n        _after: {\n          position: \"absolute\",\n        },\n        _hover: {\n          bg: \"colorScheme.emphasized\",\n        },\n        _focusVisible: {\n          bg: \"colorScheme.emphasized\",\n        },\n      },\n    },\n    plain: {\n      trigger: {\n        focusVisibleRing: \"none\",\n        _after: {\n          position: \"absolute\",\n        },\n      },\n    },\n    spacer: {\n      icon: {\n        color: \"colorScheme.fg\",\n        transitionDuration: \"moderate\",\n        transitionProperty: \"common\",\n      },\n      trigger: {\n        focusVisibleRing: \"none\",\n        p: \"1\",\n        _after: {\n          bg: \"transparent\",\n          display: \"block\",\n          rounded: \"full\",\n        },\n        _hover: {\n          _after: {\n            bg: \"colorScheme.bg\",\n          },\n          _icon: {\n            color: \"transparent\",\n          },\n        },\n        _focusVisible: {\n          _after: {\n            bg: \"colorScheme.bg\",\n          },\n          _icon: {\n            color: \"transparent\",\n          },\n        },\n      },\n    },\n  },\n\n  props: {\n    /**\n     * The orientation of the resizable.\n     *\n     * @default 'horizontal'\n     */\n    orientation: {\n      horizontal: {\n        icon: {\n          transform: \"translate(-50%, -50%) rotate(0deg)\",\n        },\n      },\n      vertical: {\n        icon: {\n          transform: \"translate(-50%, -50%) rotate(90deg)\",\n        },\n      },\n    },\n  },\n\n  compounds: [\n    {\n      css: {\n        trigger: {\n          h: \"px\",\n          _after: {\n            h: \"2\",\n            left: \"0\",\n            right: \"0\",\n            transform: \"translateY(-50%)\",\n          },\n        },\n      },\n      variant: \"border\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          w: \"px\",\n          _after: {\n            bottom: \"0\",\n            top: \"0\",\n            transform: \"translateX(-50%)\",\n            w: \"2\",\n          },\n        },\n      },\n      variant: \"border\",\n      orientation: \"horizontal\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: { h: \"2\", w: \"full\" },\n        },\n      },\n      variant: \"spacer\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: { h: \"full\", w: \"2\" },\n        },\n      },\n      variant: \"spacer\",\n      orientation: \"horizontal\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: {\n            h: \"2\",\n            left: \"0\",\n            right: \"0\",\n            transform: \"translateY(-50%)\",\n          },\n        },\n      },\n      variant: \"plain\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: {\n            bottom: \"0\",\n            top: \"0\",\n            transform: \"translateX(-50%)\",\n            w: \"2\",\n          },\n        },\n      },\n      variant: \"plain\",\n      orientation: \"horizontal\",\n    },\n  ],\n\n  defaultProps: {\n    variant: \"border\",\n    orientation: \"horizontal\",\n  },\n})\n\nexport type ResizableStyle = typeof resizableStyle\n"],"mappings":";;AAEA,MAAa,iBAAiB,yBAAyB;CACrD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,gBAAgB;GAChB,MAAM;GACN,UAAU;GACV,KAAK;GACL,YAAY;GACZ,YAAY;GACb;EACD,MAAM,EACJ,SAAS,QACV;EACD,MAAM,EACJ,SAAS,QACV;EACD,SAAS;GACP,UAAU;GACV,oBAAoB;GACpB,oBAAoB;GACpB,QAAQ;IACN,oBAAoB;IACpB,oBAAoB;IACrB;GACF;EACF;CAED,UAAU;EACR,QAAQ;GACN,MAAM;IACJ,IAAI;IACJ,OAAO;IACP,IAAI;IACJ,SAAS;IACV;GACD,SAAS;IACP,IAAI;IACJ,kBAAkB;IAClB,QAAQ,EACN,UAAU,YACX;IACD,QAAQ,EACN,IAAI,0BACL;IACD,eAAe,EACb,IAAI,0BACL;IACF;GACF;EACD,OAAO,EACL,SAAS;GACP,kBAAkB;GAClB,QAAQ,EACN,UAAU,YACX;GACF,EACF;EACD,QAAQ;GACN,MAAM;IACJ,OAAO;IACP,oBAAoB;IACpB,oBAAoB;IACrB;GACD,SAAS;IACP,kBAAkB;IAClB,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,SAAS;KACT,SAAS;KACV;IACD,QAAQ;KACN,QAAQ,EACN,IAAI,kBACL;KACD,OAAO,EACL,OAAO,eACR;KACF;IACD,eAAe;KACb,QAAQ,EACN,IAAI,kBACL;KACD,OAAO,EACL,OAAO,eACR;KACF;IACF;GACF;EACF;CAED,OAAO;;;;;;AAML,aAAa;EACX,YAAY,EACV,MAAM,EACJ,WAAW,sCACZ,EACF;EACD,UAAU,EACR,MAAM,EACJ,WAAW,uCACZ,EACF;EACF,EACF;CAED,WAAW;EACT;GACE,KAAK,EACH,SAAS;IACP,GAAG;IACH,QAAQ;KACN,GAAG;KACH,MAAM;KACN,OAAO;KACP,WAAW;KACZ;IACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS;IACP,GAAG;IACH,QAAQ;KACN,QAAQ;KACR,KAAK;KACL,WAAW;KACX,GAAG;KACJ;IACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IAAE,GAAG;IAAK,GAAG;IAAQ,EAC9B,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IAAE,GAAG;IAAQ,GAAG;IAAK,EAC9B,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IACN,GAAG;IACH,MAAM;IACN,OAAO;IACP,WAAW;IACZ,EACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IACN,QAAQ;IACR,KAAK;IACL,WAAW;IACX,GAAG;IACJ,EACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACF;CAED,cAAc;EACZ,SAAS;EACT,aAAa;EACd;CACF,CAAC"}

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

@@ -1,13 +1,10 @@
 "use client";
-
 import { createContext as createContext$1 } from "../../utils/context.js";
 import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
 import { mergeProps } from "../../core/components/props.js";
-import "../../core/index.js";
 import { useCallback } from "react";
 import { useDefaultLayout as useResizableLayout, useGroupRef, usePanelRef } from "react-resizable-panels";
-
 //#region src/components/resizable/use-resizable.ts
 const [ResizableContext, useResizableContext] = createContext$1({ name: "ResizableContext" });
 const useResizable = ({ controlRef, disabled, orientation = "horizontal", ...rest } = {}) => {
@@ -96,7 +93,7 @@ const useResizableTrigger = ({ disabled, ...rest }) => {
 		getTriggerProps
 	};
 };
-
 //#endregion
 export { ResizableContext, useResizable, useResizableContext, useResizableItem, useResizableLayout, useResizableTrigger };
+
 //# sourceMappingURL=use-resizable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-resizable.js","names":["createContext","getTriggerProps: PropGetter<SeparatorProps>"],"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,oBACP,CACF;AAkBD,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,WAAW,aAAa;AAuB9B,QAAO;EACL;EACA;EACA;EACA,cAzB2C,aAC1C,QAAQ,EAAE,KAAK;AAGd,UAAO;IACL,GAHa,WAAW;KAAE;KAAU;KAAa,EAAE,MAAM,MAAM,EAAE;IAIjE,OAAO;KACL,QAAQ;KACR,OAAO;KACP,GAAG,KAAK;KACR,GAAG,MAAM;KACV;IACD,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAU,UAAU,MAAM,UAAU,UAAU,WAAW;IACzD,yCAAsB,MAAM,gBAAgB,KAAK,eAAe;IAChE,0CAAuB,MAAM,iBAAiB,KAAK,gBAAgB;IACpE;KAEH;GAAC;GAAU;GAAa;GAAU;GAAY;GAAK,CACpD;EAOA;;AAeH,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,WAAW,aAAa;AAgB9B,QAAO;EACL;EACA,cAhB2C,aAC1C,QAAQ,EAAE,KAAK;AAGd,UAAO;IACL,GAHa,WAAW,MAAM,MAAM,EAAE;IAItC,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAU,UAAU,MAAM,UAAU,UAAU,WAAW;IACzD,mCAAgB,MAAM,UAAU,KAAK,SAAS;IAC/C;KAEH;GAAC;GAAU;GAAY;GAAK,CAC7B;EAKA;;AAQH,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,qBAAqB;CACzB,MAAM,gBAAgB,YAAY;CAElC,MAAM,gBAAgB,aACnB,OAAmC;AAClC,KAAG,gBAAgB;EAEnB,MAAM,SAAS,SAAS,SAAS,WAAW;AAE5C,MAAI,CAAC,OAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,OAAO,CAAC;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,OAAO,CAAC,KAAK,QAAQ,CAAC,KAAK,KAAK,CAAC,CAC9C;AAED,WAAS,SAAS,UAAU,WAAW;IAEzC,CAAC,SAAS,CACX;CAED,MAAMC,kBAA8C,aACjD,QAAQ,EAAE,KAAK;AAcd,SAAO;GACL,GAda,WACb;IACE,6CAA0B,cAAc;IACxC,oBAAoB;IACpB,6CAA0B,cAAc;IACxC,UAAU;IACV,UAAU,gBAAgB,KAAK;IAChC,EACD,OACA,MACA,EAAE,eAAe,CAClB,EAAE;GAID,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;GAClD;IAEH;EAAC;EAAa;EAAe;EAAM;EAAc,CAClD;AAUD,QAAO;EACL,cAT+B,aAC9B,QAAQ,EAAE,MAAM;GACf,aAAa;GACb,GAAG;GACJ,GACD,EAAE,CACH;EAIC;EACD"}
+{"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,oBACP,CACF;AAkBD,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,WAAW,aAAa;CAuB9B,OAAO;EACL;EACA;EACA;EACA,cAzB2C,aAC1C,QAAQ,EAAE,KAAK;GAGd,OAAO;IACL,GAHa,WAAW;KAAE;KAAU;KAAa,EAAE,MAAM,MAAM,EAGtD;IACT,OAAO;KACL,QAAQ,KAAA;KACR,OAAO,KAAA;KACP,GAAG,KAAK;KACR,GAAG,MAAM;KACV;IACD,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAU,UAAU,MAAM,UAAU,UAAU,WAAW;IACzD,iBAAA,GAAA,cAAA,OAAsB,MAAM,gBAAgB,KAAK,eAAe;IAChE,kBAAA,GAAA,cAAA,OAAuB,MAAM,iBAAiB,KAAK,gBAAgB;IACpE;KAEH;GAAC;GAAU;GAAa;GAAU;GAAY;GAAK,CAOvC;EACb;;AAeH,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,WAAW,aAAa;CAgB9B,OAAO;EACL;EACA,cAhB2C,aAC1C,QAAQ,EAAE,KAAK;GAGd,OAAO;IACL,GAHa,WAAW,MAAM,MAAM,EAG3B;IACT,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAU,UAAU,MAAM,UAAU,UAAU,WAAW;IACzD,WAAA,GAAA,cAAA,OAAgB,MAAM,UAAU,KAAK,SAAS;IAC/C;KAEH;GAAC;GAAU;GAAY;GAAK,CAKhB;EACb;;AAQH,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,qBAAqB;CACzB,MAAM,gBAAgB,YAAY;CAElC,MAAM,gBAAgB,aACnB,OAAmC;EAClC,GAAG,gBAAgB;EAEnB,MAAM,SAAS,SAAS,SAAS,WAAW;EAE5C,IAAI,CAAC,QAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,OAAO,CAAC;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,OAAO,CAAC,KAAK,QAAQ,CAAC,KAAK,KAAK,CAAC,CAC9C;EAED,SAAS,SAAS,UAAU,WAAW;IAEzC,CAAC,SAAS,CACX;CAED,MAAM,kBAA8C,aACjD,QAAQ,EAAE,KAAK;EAcd,OAAO;GACL,GAda,WACb;IACE,kBAAA,GAAA,cAAA,UAA0B,cAAc;IACxC,oBAAoB;IACpB,kBAAA,GAAA,cAAA,UAA0B,cAAc;IACxC,UAAU;IACV,UAAU,gBAAgB,KAAK;IAChC,EACD,OACA,MACA,EAAE,eAAe,CAClB,EAGU;GACT,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;GAClD;IAEH;EAAC;EAAa;EAAe;EAAM;EAAc,CAClD;CAUD,OAAO;EACL,cAT+B,aAC9B,QAAQ,EAAE,MAAM;GACf,aAAa;GACb,GAAG;GACJ,GACD,EAAE,CAIU;EACZ;EACD"}

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

@@ -1,4 +1,3 @@
 import { Ripple, RipplePropsContext, useRipplePropsContext } from "./ripple.js";
 import { useRipple } from "./use-ripple.js";
-
-export { Ripple, RipplePropsContext, useRipple, useRipplePropsContext };
+export { Ripple, RipplePropsContext, useRipple, useRipplePropsContext };

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

@@ -1,14 +1,10 @@
 "use client";
-
 import { utils_exports } from "../../utils/index.js";
 import { createComponent } from "../../core/components/create-component.js";
-import "../../core/index.js";
 import { motion as motion$1 } from "../motion/factory.js";
-import "../motion/index.js";
 import { rippleStyle } from "./ripple.style.js";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { AnimatePresence } from "motion/react";
-
 //#region src/components/ripple/ripple.tsx
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const { PropsContext: RipplePropsContext, usePropsContext: useRipplePropsContext, withContext } = createComponent("ripple", rippleStyle);
@@ -51,7 +47,7 @@ const Ripple = withContext(({ style, color = "currentColor", disabled, ripples,
 		}, key);
 	}) });
 })();
-
 //#endregion
 export { Ripple, RipplePropsContext, useRipplePropsContext };
+
 //# sourceMappingURL=ripple.js.map

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,IAAI,EAAE,IAAI;AAoBrC,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,UAAU,YAAY;;;;;;AASpE,MAAa,SAAS,aACnB,EACC,OACA,QAAQ,gBACR,UACA,SACA,qBACA,SACA,GAAG,WACC;AACJ,KAAI,SAAU,QAAO;AAErB,QACE,0CACG,QAAQ,KAAK,EAAE,KAAK,MAAM,GAAG,QAAQ;EACpC,MAAM,WAAW,MAAM,MAAO,MAAM,IAAK,OAAO,MAAM,MAAO,GAAI;AAEjE,SACE,oBAAC;GAA0B,MAAK;aAC9B,oBAACA,SAAO;IACN,OAAO;KACL,QAAQ,GAAG,KAAK;KAChB,MAAM;KACN,eAAe;KACf,UAAU;KACV,KAAK;KACL,iBAAiB;KACjB,OAAO,GAAG,KAAK;KACf,GAAG;KACJ;IACD,SAAS;KAAE,SAAS;KAAG,WAAW;KAAY;IAC9C,SAAS;IACT,MAAM,EAAE,SAAS,GAAG;IACpB,SAAS;KAAE,SAAS;KAAM,WAAW;KAAY;IACjD,YAAY,EAAE,UAAU;IACxB,GAAI;IACJ,mDAAgC,2BAC9B,QAAQ,IAAI,CACb;KACD;KArBkB,IAsBJ;GAEpB,GACD;EAGR,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,IAAI,EAAE,IAAI;AAoBrC,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,UAAU,YAAY;;;;;;AASpE,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,GAAI;EAEjE,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;KACJ;IACD,SAAS;KAAE,SAAS;KAAG,WAAW;KAAY;IAC9C,SAAS;IACT,MAAM,EAAE,SAAS,GAAG;IACpB,SAAS;KAAE,SAAS;KAAM,WAAW;KAAY;IACjD,YAAY,EAAE,UAAU;IACxB,GAAI;IACJ,sBAAA,GAAA,cAAA,YAAgC,2BAC9B,QAAQ,IAAI,CACb;IACD,CAAA;GACc,EAtBI,IAsBJ;GAEpB,EACD,CAAA;EAGR,EAAE"}

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

@@ -1,12 +1,10 @@
 import { defineComponentStyle } from "../../core/system/config.js";
-import "../../core/index.js";
-
 //#region src/components/ripple/ripple.style.ts
 const rippleStyle = defineComponentStyle({ base: {
 	rounded: "full",
 	zIndex: "kurillin"
 } });
-
 //#endregion
 export { rippleStyle };
+
 //# sourceMappingURL=ripple.style.js.map