@yamada-ui/reorder 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/reorder
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/reorder
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/reorder
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/reorder
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-6WVUHM4V.mjs

@@ -0,0 +1,111 @@
+import {
+  useReorderItemContext
+} from "./chunk-CT62EC32.mjs";
+import {
+  useReorderContext
+} from "./chunk-UF5QTFGJ.mjs";
+
+// src/reorder-trigger.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { Icon } from "@yamada-ui/icon";
+import { cx, handlerAll, mergeRefs, dataAttr } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ReorderTrigger = forwardRef(
+  ({ className, children = /* @__PURE__ */ jsx(ReorderTriggerIcon, {}), ...rest }, ref) => {
+    const { styles } = useReorderContext();
+    const { register, isDrag, dragControls } = useReorderItemContext();
+    const css = {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      cursor: "grab",
+      _selected: {
+        cursor: "grabbing"
+      },
+      ...styles.trigger
+    };
+    return /* @__PURE__ */ jsx(
+      ui.div,
+      {
+        ref: mergeRefs(register, ref),
+        className: cx("ui-reorder-trigger", className),
+        __css: css,
+        ...rest,
+        "data-selected": dataAttr(isDrag),
+        onPointerDown: handlerAll(rest.onPointerDown, (ev) => dragControls.start(ev)),
+        children
+      }
+    );
+  }
+);
+var ReorderTriggerIcon = (rest) => {
+  return /* @__PURE__ */ jsxs(Icon, { viewBox: "0 0 39 39", ...rest, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+};
+
+export {
+  ReorderTrigger
+};

package/dist/chunk-CT62EC32.mjs

@@ -0,0 +1,71 @@
+import {
+  useReorderContext
+} from "./chunk-UF5QTFGJ.mjs";
+
+// src/reorder-item.tsx
+import { ui } from "@yamada-ui/core";
+import {
+  MotionReorder,
+  useMotionValue,
+  useDragControls
+} from "@yamada-ui/motion";
+import { createContext, cx, dataAttr } from "@yamada-ui/utils";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var [ReorderItemProvider, useReorderItemContext] = createContext({
+  name: "ReorderContext",
+  errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
+});
+var ReorderItem = forwardRef(
+  ({ className, label, ...rest }, ref) => {
+    var _a;
+    const { orientation, styles } = useReorderContext();
+    const dragControls = useDragControls();
+    const [hasTrigger, setHasTrigger] = useState(false);
+    const [isDrag, setIsDrag] = useState(false);
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+    const register = useCallback((node) => setHasTrigger(!!node), []);
+    useEffect(() => {
+      x.onChange((subscription) => {
+        if (orientation === "horizontal")
+          setIsDrag(subscription !== 0);
+      });
+      y.onChange((subscription) => {
+        if (orientation === "vertical")
+          setIsDrag(subscription !== 0);
+      });
+      return () => {
+        x.destroy();
+        y.destroy();
+      };
+    }, [orientation, x, y]);
+    const css = {
+      ...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
+      ...styles.item,
+      ...!hasTrigger ? { _selected: { ...(_a = styles.item) == null ? void 0 : _a._selected, cursor: "grabbing" } } : {}
+    };
+    return /* @__PURE__ */ jsx(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ jsx(
+      ui.li,
+      {
+        ref,
+        as: MotionReorder.Item,
+        className: cx("ui-reorder-item", className),
+        value: label,
+        __css: css,
+        ...rest,
+        dragListener: !hasTrigger,
+        dragControls,
+        "data-selected": dataAttr(isDrag),
+        style: { ...rest.style, x, y }
+      }
+    ) });
+  }
+);
+ReorderItem.displayName = "ReorderItem";
+
+export {
+  ReorderItemProvider,
+  useReorderItemContext,
+  ReorderItem
+};

package/dist/chunk-UF5QTFGJ.mjs

@@ -0,0 +1,90 @@
+// src/reorder.tsx
+import {
+  ui,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { MotionReorder } from "@yamada-ui/motion";
+import { createContext, cx, getValidChildren, handlerAll, useUpdateEffect } from "@yamada-ui/utils";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var [ReorderProvider, useReorderContext] = createContext({
+  name: "ReorderContext",
+  errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
+});
+var omitDuplicated = (values) => Array.from(new Set(values));
+var pickDuplicated = (values) => values.filter(
+  (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
+);
+var Reorder = forwardRef((props, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle("Reorder", props);
+  const {
+    className,
+    orientation = "vertical",
+    gap = "md",
+    onChange,
+    onCompleteChange,
+    children,
+    ...rest
+  } = omitThemeProps(mergedProps);
+  const axis = orientation === "vertical" ? "y" : "x";
+  const validChildren = getValidChildren(children);
+  const defaultValues = useMemo(() => {
+    const values2 = validChildren.map(({ props: props2 }) => props2.label);
+    const duplicatedValues = pickDuplicated(values2);
+    if (duplicatedValues.length)
+      console.warn(
+        `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
+          `', '`
+        )}' `
+      );
+    return omitDuplicated(values2);
+  }, [validChildren]);
+  const [values, setValues] = useState(defaultValues);
+  const onReorder = useCallback(
+    (newValues) => {
+      setValues(newValues);
+      onChange == null ? void 0 : onChange(newValues);
+    },
+    [onChange]
+  );
+  useUpdateEffect(() => {
+    const isDone = defaultValues.every((defaultValue) => values.includes(defaultValue));
+    if (isDone)
+      return;
+    setValues(defaultValues);
+  }, [defaultValues]);
+  const cloneChildren = useMemo(
+    () => values.map((value) => validChildren.find(({ props: props2 }) => props2.label === value)),
+    [values, validChildren]
+  );
+  const css = {
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    gap,
+    ...styles.container
+  };
+  return /* @__PURE__ */ jsx(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ jsx(
+    ui.ul,
+    {
+      ref,
+      as: MotionReorder.Group,
+      className: cx("ui-reorder", className),
+      axis,
+      values,
+      onReorder,
+      __css: css,
+      ...rest,
+      onMouseUp: handlerAll(rest.onMouseUp, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
+      onTouchEnd: handlerAll(rest.onTouchEnd, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
+      children: cloneChildren
+    }
+  ) });
+});
+Reorder.displayName = "Reorder";
+
+export {
+  ReorderProvider,
+  useReorderContext,
+  Reorder
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Reorder, ReorderProps, ReorderProvider, useReorderContext } from './reorder.js';
+export { ReorderItem, ReorderItemProps, ReorderItemProvider, useReorderItemContext } from './reorder-item.js';
+export { ReorderTrigger, ReorderTriggerProps } from './reorder-trigger.js';
+import 'react';
+import '@yamada-ui/core';
+import '@yamada-ui/motion';

package/dist/index.js

@@ -0,0 +1,281 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Reorder: () => Reorder,
+  ReorderItem: () => ReorderItem,
+  ReorderItemProvider: () => ReorderItemProvider,
+  ReorderProvider: () => ReorderProvider,
+  ReorderTrigger: () => ReorderTrigger,
+  useReorderContext: () => useReorderContext,
+  useReorderItemContext: () => useReorderItemContext
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/reorder.tsx
+var import_core = require("@yamada-ui/core");
+var import_motion = require("@yamada-ui/motion");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [ReorderProvider, useReorderContext] = (0, import_utils.createContext)({
+  name: "ReorderContext",
+  errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
+});
+var omitDuplicated = (values) => Array.from(new Set(values));
+var pickDuplicated = (values) => values.filter(
+  (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
+);
+var Reorder = (0, import_react.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
+  const {
+    className,
+    orientation = "vertical",
+    gap = "md",
+    onChange,
+    onCompleteChange,
+    children,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const axis = orientation === "vertical" ? "y" : "x";
+  const validChildren = (0, import_utils.getValidChildren)(children);
+  const defaultValues = (0, import_react.useMemo)(() => {
+    const values2 = validChildren.map(({ props: props2 }) => props2.label);
+    const duplicatedValues = pickDuplicated(values2);
+    if (duplicatedValues.length)
+      console.warn(
+        `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
+          `', '`
+        )}' `
+      );
+    return omitDuplicated(values2);
+  }, [validChildren]);
+  const [values, setValues] = (0, import_react.useState)(defaultValues);
+  const onReorder = (0, import_react.useCallback)(
+    (newValues) => {
+      setValues(newValues);
+      onChange == null ? void 0 : onChange(newValues);
+    },
+    [onChange]
+  );
+  (0, import_utils.useUpdateEffect)(() => {
+    const isDone = defaultValues.every((defaultValue) => values.includes(defaultValue));
+    if (isDone)
+      return;
+    setValues(defaultValues);
+  }, [defaultValues]);
+  const cloneChildren = (0, import_react.useMemo)(
+    () => values.map((value) => validChildren.find(({ props: props2 }) => props2.label === value)),
+    [values, validChildren]
+  );
+  const css = {
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    gap,
+    ...styles.container
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.ul,
+    {
+      ref,
+      as: import_motion.MotionReorder.Group,
+      className: (0, import_utils.cx)("ui-reorder", className),
+      axis,
+      values,
+      onReorder,
+      __css: css,
+      ...rest,
+      onMouseUp: (0, import_utils.handlerAll)(rest.onMouseUp, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
+      onTouchEnd: (0, import_utils.handlerAll)(rest.onTouchEnd, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
+      children: cloneChildren
+    }
+  ) });
+});
+Reorder.displayName = "Reorder";
+
+// src/reorder-item.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_motion2 = require("@yamada-ui/motion");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var [ReorderItemProvider, useReorderItemContext] = (0, import_utils2.createContext)({
+  name: "ReorderContext",
+  errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
+});
+var ReorderItem = (0, import_react2.forwardRef)(
+  ({ className, label, ...rest }, ref) => {
+    var _a;
+    const { orientation, styles } = useReorderContext();
+    const dragControls = (0, import_motion2.useDragControls)();
+    const [hasTrigger, setHasTrigger] = (0, import_react2.useState)(false);
+    const [isDrag, setIsDrag] = (0, import_react2.useState)(false);
+    const x = (0, import_motion2.useMotionValue)(0);
+    const y = (0, import_motion2.useMotionValue)(0);
+    const register = (0, import_react2.useCallback)((node) => setHasTrigger(!!node), []);
+    (0, import_react2.useEffect)(() => {
+      x.onChange((subscription) => {
+        if (orientation === "horizontal")
+          setIsDrag(subscription !== 0);
+      });
+      y.onChange((subscription) => {
+        if (orientation === "vertical")
+          setIsDrag(subscription !== 0);
+      });
+      return () => {
+        x.destroy();
+        y.destroy();
+      };
+    }, [orientation, x, y]);
+    const css = {
+      ...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
+      ...styles.item,
+      ...!hasTrigger ? { _selected: { ...(_a = styles.item) == null ? void 0 : _a._selected, cursor: "grabbing" } } : {}
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.li,
+      {
+        ref,
+        as: import_motion2.MotionReorder.Item,
+        className: (0, import_utils2.cx)("ui-reorder-item", className),
+        value: label,
+        __css: css,
+        ...rest,
+        dragListener: !hasTrigger,
+        dragControls,
+        "data-selected": (0, import_utils2.dataAttr)(isDrag),
+        style: { ...rest.style, x, y }
+      }
+    ) });
+  }
+);
+ReorderItem.displayName = "ReorderItem";
+
+// src/reorder-trigger.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_utils3 = require("@yamada-ui/utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ReorderTrigger = (0, import_core3.forwardRef)(
+  ({ className, children = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReorderTriggerIcon, {}), ...rest }, ref) => {
+    const { styles } = useReorderContext();
+    const { register, isDrag, dragControls } = useReorderItemContext();
+    const css = {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      cursor: "grab",
+      _selected: {
+        cursor: "grabbing"
+      },
+      ...styles.trigger
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core3.ui.div,
+      {
+        ref: (0, import_utils3.mergeRefs)(register, ref),
+        className: (0, import_utils3.cx)("ui-reorder-trigger", className),
+        __css: css,
+        ...rest,
+        "data-selected": (0, import_utils3.dataAttr)(isDrag),
+        onPointerDown: (0, import_utils3.handlerAll)(rest.onPointerDown, (ev) => dragControls.start(ev)),
+        children
+      }
+    );
+  }
+);
+var ReorderTriggerIcon = (rest) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_icon.Icon, { viewBox: "0 0 39 39", ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Reorder,
+  ReorderItem,
+  ReorderItemProvider,
+  ReorderProvider,
+  ReorderTrigger,
+  useReorderContext,
+  useReorderItemContext
+});

package/dist/index.mjs

@@ -0,0 +1,22 @@
+import {
+  ReorderTrigger
+} from "./chunk-6WVUHM4V.mjs";
+import {
+  ReorderItem,
+  ReorderItemProvider,
+  useReorderItemContext
+} from "./chunk-CT62EC32.mjs";
+import {
+  Reorder,
+  ReorderProvider,
+  useReorderContext
+} from "./chunk-UF5QTFGJ.mjs";
+export {
+  Reorder,
+  ReorderItem,
+  ReorderItemProvider,
+  ReorderProvider,
+  ReorderTrigger,
+  useReorderContext,
+  useReorderItemContext
+};

package/dist/reorder-item.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { HTMLMotionProps, DragControls } from '@yamada-ui/motion';
+
+type ReorderItemContext = {
+    register: (node: HTMLElement | null) => void;
+    isDrag: boolean;
+    dragControls: DragControls;
+};
+declare const ReorderItemProvider: react.Provider<ReorderItemContext>;
+declare const useReorderItemContext: () => ReorderItemContext;
+type ReorderItemOptions = {
+    label: string | number;
+};
+type ReorderItemProps = Omit<HTMLUIProps<'li'>, 'as'> & Omit<HTMLMotionProps<'li'>, 'as' | 'layout'> & ReorderItemOptions;
+declare const ReorderItem: react.ForwardRefExoticComponent<Omit<HTMLUIProps<"li">, "as"> & Omit<HTMLMotionProps<"li">, "as" | "layout"> & ReorderItemOptions & react.RefAttributes<HTMLLIElement>>;
+
+export { ReorderItem, ReorderItemProps, ReorderItemProvider, useReorderItemContext };

package/dist/reorder-item.js

@@ -0,0 +1,172 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/reorder-item.tsx
+var reorder_item_exports = {};
+__export(reorder_item_exports, {
+  ReorderItem: () => ReorderItem,
+  ReorderItemProvider: () => ReorderItemProvider,
+  useReorderItemContext: () => useReorderItemContext
+});
+module.exports = __toCommonJS(reorder_item_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_motion2 = require("@yamada-ui/motion");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/reorder.tsx
+var import_core = require("@yamada-ui/core");
+var import_motion = require("@yamada-ui/motion");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [ReorderProvider, useReorderContext] = (0, import_utils.createContext)({
+  name: "ReorderContext",
+  errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
+});
+var omitDuplicated = (values) => Array.from(new Set(values));
+var pickDuplicated = (values) => values.filter(
+  (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
+);
+var Reorder = (0, import_react.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
+  const {
+    className,
+    orientation = "vertical",
+    gap = "md",
+    onChange,
+    onCompleteChange,
+    children,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const axis = orientation === "vertical" ? "y" : "x";
+  const validChildren = (0, import_utils.getValidChildren)(children);
+  const defaultValues = (0, import_react.useMemo)(() => {
+    const values2 = validChildren.map(({ props: props2 }) => props2.label);
+    const duplicatedValues = pickDuplicated(values2);
+    if (duplicatedValues.length)
+      console.warn(
+        `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
+          `', '`
+        )}' `
+      );
+    return omitDuplicated(values2);
+  }, [validChildren]);
+  const [values, setValues] = (0, import_react.useState)(defaultValues);
+  const onReorder = (0, import_react.useCallback)(
+    (newValues) => {
+      setValues(newValues);
+      onChange == null ? void 0 : onChange(newValues);
+    },
+    [onChange]
+  );
+  (0, import_utils.useUpdateEffect)(() => {
+    const isDone = defaultValues.every((defaultValue) => values.includes(defaultValue));
+    if (isDone)
+      return;
+    setValues(defaultValues);
+  }, [defaultValues]);
+  const cloneChildren = (0, import_react.useMemo)(
+    () => values.map((value) => validChildren.find(({ props: props2 }) => props2.label === value)),
+    [values, validChildren]
+  );
+  const css = {
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    gap,
+    ...styles.container
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.ul,
+    {
+      ref,
+      as: import_motion.MotionReorder.Group,
+      className: (0, import_utils.cx)("ui-reorder", className),
+      axis,
+      values,
+      onReorder,
+      __css: css,
+      ...rest,
+      onMouseUp: (0, import_utils.handlerAll)(rest.onMouseUp, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
+      onTouchEnd: (0, import_utils.handlerAll)(rest.onTouchEnd, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
+      children: cloneChildren
+    }
+  ) });
+});
+Reorder.displayName = "Reorder";
+
+// src/reorder-item.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var [ReorderItemProvider, useReorderItemContext] = (0, import_utils2.createContext)({
+  name: "ReorderContext",
+  errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
+});
+var ReorderItem = (0, import_react2.forwardRef)(
+  ({ className, label, ...rest }, ref) => {
+    var _a;
+    const { orientation, styles } = useReorderContext();
+    const dragControls = (0, import_motion2.useDragControls)();
+    const [hasTrigger, setHasTrigger] = (0, import_react2.useState)(false);
+    const [isDrag, setIsDrag] = (0, import_react2.useState)(false);
+    const x = (0, import_motion2.useMotionValue)(0);
+    const y = (0, import_motion2.useMotionValue)(0);
+    const register = (0, import_react2.useCallback)((node) => setHasTrigger(!!node), []);
+    (0, import_react2.useEffect)(() => {
+      x.onChange((subscription) => {
+        if (orientation === "horizontal")
+          setIsDrag(subscription !== 0);
+      });
+      y.onChange((subscription) => {
+        if (orientation === "vertical")
+          setIsDrag(subscription !== 0);
+      });
+      return () => {
+        x.destroy();
+        y.destroy();
+      };
+    }, [orientation, x, y]);
+    const css = {
+      ...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
+      ...styles.item,
+      ...!hasTrigger ? { _selected: { ...(_a = styles.item) == null ? void 0 : _a._selected, cursor: "grabbing" } } : {}
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.li,
+      {
+        ref,
+        as: import_motion2.MotionReorder.Item,
+        className: (0, import_utils2.cx)("ui-reorder-item", className),
+        value: label,
+        __css: css,
+        ...rest,
+        dragListener: !hasTrigger,
+        dragControls,
+        "data-selected": (0, import_utils2.dataAttr)(isDrag),
+        style: { ...rest.style, x, y }
+      }
+    ) });
+  }
+);
+ReorderItem.displayName = "ReorderItem";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReorderItem,
+  ReorderItemProvider,
+  useReorderItemContext
+});

package/dist/reorder-item.mjs

@@ -0,0 +1,11 @@
+import {
+  ReorderItem,
+  ReorderItemProvider,
+  useReorderItemContext
+} from "./chunk-CT62EC32.mjs";
+import "./chunk-UF5QTFGJ.mjs";
+export {
+  ReorderItem,
+  ReorderItemProvider,
+  useReorderItemContext
+};

package/dist/reorder-trigger.d.ts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+
+type ReorderTriggerProps = HTMLUIProps<'div'>;
+declare const ReorderTrigger: _yamada_ui_core.Component<"div", ReorderTriggerProps>;
+
+export { ReorderTrigger, ReorderTriggerProps };

package/dist/reorder-trigger.js

@@ -0,0 +1,269 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/reorder-trigger.tsx
+var reorder_trigger_exports = {};
+__export(reorder_trigger_exports, {
+  ReorderTrigger: () => ReorderTrigger
+});
+module.exports = __toCommonJS(reorder_trigger_exports);
+var import_core3 = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_utils3 = require("@yamada-ui/utils");
+
+// src/reorder.tsx
+var import_core = require("@yamada-ui/core");
+var import_motion = require("@yamada-ui/motion");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [ReorderProvider, useReorderContext] = (0, import_utils.createContext)({
+  name: "ReorderContext",
+  errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
+});
+var omitDuplicated = (values) => Array.from(new Set(values));
+var pickDuplicated = (values) => values.filter(
+  (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
+);
+var Reorder = (0, import_react.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
+  const {
+    className,
+    orientation = "vertical",
+    gap = "md",
+    onChange,
+    onCompleteChange,
+    children,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const axis = orientation === "vertical" ? "y" : "x";
+  const validChildren = (0, import_utils.getValidChildren)(children);
+  const defaultValues = (0, import_react.useMemo)(() => {
+    const values2 = validChildren.map(({ props: props2 }) => props2.label);
+    const duplicatedValues = pickDuplicated(values2);
+    if (duplicatedValues.length)
+      console.warn(
+        `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
+          `', '`
+        )}' `
+      );
+    return omitDuplicated(values2);
+  }, [validChildren]);
+  const [values, setValues] = (0, import_react.useState)(defaultValues);
+  const onReorder = (0, import_react.useCallback)(
+    (newValues) => {
+      setValues(newValues);
+      onChange == null ? void 0 : onChange(newValues);
+    },
+    [onChange]
+  );
+  (0, import_utils.useUpdateEffect)(() => {
+    const isDone = defaultValues.every((defaultValue) => values.includes(defaultValue));
+    if (isDone)
+      return;
+    setValues(defaultValues);
+  }, [defaultValues]);
+  const cloneChildren = (0, import_react.useMemo)(
+    () => values.map((value) => validChildren.find(({ props: props2 }) => props2.label === value)),
+    [values, validChildren]
+  );
+  const css = {
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    gap,
+    ...styles.container
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.ul,
+    {
+      ref,
+      as: import_motion.MotionReorder.Group,
+      className: (0, import_utils.cx)("ui-reorder", className),
+      axis,
+      values,
+      onReorder,
+      __css: css,
+      ...rest,
+      onMouseUp: (0, import_utils.handlerAll)(rest.onMouseUp, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
+      onTouchEnd: (0, import_utils.handlerAll)(rest.onTouchEnd, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
+      children: cloneChildren
+    }
+  ) });
+});
+Reorder.displayName = "Reorder";
+
+// src/reorder-item.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_motion2 = require("@yamada-ui/motion");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var [ReorderItemProvider, useReorderItemContext] = (0, import_utils2.createContext)({
+  name: "ReorderContext",
+  errorMessage: `useReorderItemContext returned is 'undefined'. Seems you forgot to wrap the components in "<ReorderItem />"`
+});
+var ReorderItem = (0, import_react2.forwardRef)(
+  ({ className, label, ...rest }, ref) => {
+    var _a;
+    const { orientation, styles } = useReorderContext();
+    const dragControls = (0, import_motion2.useDragControls)();
+    const [hasTrigger, setHasTrigger] = (0, import_react2.useState)(false);
+    const [isDrag, setIsDrag] = (0, import_react2.useState)(false);
+    const x = (0, import_motion2.useMotionValue)(0);
+    const y = (0, import_motion2.useMotionValue)(0);
+    const register = (0, import_react2.useCallback)((node) => setHasTrigger(!!node), []);
+    (0, import_react2.useEffect)(() => {
+      x.onChange((subscription) => {
+        if (orientation === "horizontal")
+          setIsDrag(subscription !== 0);
+      });
+      y.onChange((subscription) => {
+        if (orientation === "vertical")
+          setIsDrag(subscription !== 0);
+      });
+      return () => {
+        x.destroy();
+        y.destroy();
+      };
+    }, [orientation, x, y]);
+    const css = {
+      ...!hasTrigger ? { cursor: "grab" } : { userSelect: "none" },
+      ...styles.item,
+      ...!hasTrigger ? { _selected: { ...(_a = styles.item) == null ? void 0 : _a._selected, cursor: "grabbing" } } : {}
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReorderItemProvider, { value: { register, isDrag, dragControls }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.li,
+      {
+        ref,
+        as: import_motion2.MotionReorder.Item,
+        className: (0, import_utils2.cx)("ui-reorder-item", className),
+        value: label,
+        __css: css,
+        ...rest,
+        dragListener: !hasTrigger,
+        dragControls,
+        "data-selected": (0, import_utils2.dataAttr)(isDrag),
+        style: { ...rest.style, x, y }
+      }
+    ) });
+  }
+);
+ReorderItem.displayName = "ReorderItem";
+
+// src/reorder-trigger.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ReorderTrigger = (0, import_core3.forwardRef)(
+  ({ className, children = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReorderTriggerIcon, {}), ...rest }, ref) => {
+    const { styles } = useReorderContext();
+    const { register, isDrag, dragControls } = useReorderItemContext();
+    const css = {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      cursor: "grab",
+      _selected: {
+        cursor: "grabbing"
+      },
+      ...styles.trigger
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core3.ui.div,
+      {
+        ref: (0, import_utils3.mergeRefs)(register, ref),
+        className: (0, import_utils3.cx)("ui-reorder-trigger", className),
+        __css: css,
+        ...rest,
+        "data-selected": (0, import_utils3.dataAttr)(isDrag),
+        onPointerDown: (0, import_utils3.handlerAll)(rest.onPointerDown, (ev) => dragControls.start(ev)),
+        children
+      }
+    );
+  }
+);
+var ReorderTriggerIcon = (rest) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_icon.Icon, { viewBox: "0 0 39 39", ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 33 0 C 35.761 0 38 2.239 38 5 C 38 7.761 35.761 10 33 10 C 30.239 10 28 7.761 28 5 C 28 2.239 30.239 0 33 0 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 33 14 C 35.761 14 38 16.239 38 19 C 38 21.761 35.761 24 33 24 C 30.239 24 28 21.761 28 19 C 28 16.239 30.239 14 33 14 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M 33 28 C 35.761 28 38 30.239 38 33 C 38 35.761 35.761 38 33 38 C 30.239 38 28 35.761 28 33 C 28 30.239 30.239 28 33 28 Z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReorderTrigger
+});

package/dist/reorder-trigger.mjs

@@ -0,0 +1,8 @@
+import {
+  ReorderTrigger
+} from "./chunk-6WVUHM4V.mjs";
+import "./chunk-CT62EC32.mjs";
+import "./chunk-UF5QTFGJ.mjs";
+export {
+  ReorderTrigger
+};

package/dist/reorder.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { HTMLUIProps, ThemeProps, CSSUIObject } from '@yamada-ui/core';
+import { HTMLMotionProps } from '@yamada-ui/motion';
+
+type Orientation = 'vertical' | 'horizontal';
+type ReorderContext = {
+    orientation: Orientation;
+    styles: Record<string, CSSUIObject>;
+};
+declare const ReorderProvider: react.Provider<ReorderContext>;
+declare const useReorderContext: () => ReorderContext;
+type ReorderOptions = {
+    orientation?: Orientation;
+    onChange?: (labels: (string | number)[]) => void;
+    onCompleteChange?: (labels: (string | number)[]) => void;
+};
+type ReorderProps = Omit<HTMLUIProps<'ul'>, 'as' | 'onChange'> & Omit<HTMLMotionProps<'ul'>, 'as' | 'onChange'> & ThemeProps<'Reorder'> & ReorderOptions;
+declare const Reorder: react.ForwardRefExoticComponent<Omit<HTMLUIProps<"ul">, "as" | "onChange"> & Omit<HTMLMotionProps<"ul">, "as" | "onChange"> & ThemeProps<"Reorder"> & ReorderOptions & react.RefAttributes<HTMLUListElement>>;
+
+export { Reorder, ReorderProps, ReorderProvider, useReorderContext };

package/dist/reorder.js

@@ -0,0 +1,112 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/reorder.tsx
+var reorder_exports = {};
+__export(reorder_exports, {
+  Reorder: () => Reorder,
+  ReorderProvider: () => ReorderProvider,
+  useReorderContext: () => useReorderContext
+});
+module.exports = __toCommonJS(reorder_exports);
+var import_core = require("@yamada-ui/core");
+var import_motion = require("@yamada-ui/motion");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [ReorderProvider, useReorderContext] = (0, import_utils.createContext)({
+  name: "ReorderContext",
+  errorMessage: `useReorderContext returned is 'undefined'. Seems you forgot to wrap the components in "<Reorder />"`
+});
+var omitDuplicated = (values) => Array.from(new Set(values));
+var pickDuplicated = (values) => values.filter(
+  (value, index, self) => self.indexOf(value) === index && index !== self.lastIndexOf(value)
+);
+var Reorder = (0, import_react.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Reorder", props);
+  const {
+    className,
+    orientation = "vertical",
+    gap = "md",
+    onChange,
+    onCompleteChange,
+    children,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const axis = orientation === "vertical" ? "y" : "x";
+  const validChildren = (0, import_utils.getValidChildren)(children);
+  const defaultValues = (0, import_react.useMemo)(() => {
+    const values2 = validChildren.map(({ props: props2 }) => props2.label);
+    const duplicatedValues = pickDuplicated(values2);
+    if (duplicatedValues.length)
+      console.warn(
+        `Reorder: 'label' of 'ReorderItem' must not be duplicated. duplicate 'label' is '${duplicatedValues.join(
+          `', '`
+        )}' `
+      );
+    return omitDuplicated(values2);
+  }, [validChildren]);
+  const [values, setValues] = (0, import_react.useState)(defaultValues);
+  const onReorder = (0, import_react.useCallback)(
+    (newValues) => {
+      setValues(newValues);
+      onChange == null ? void 0 : onChange(newValues);
+    },
+    [onChange]
+  );
+  (0, import_utils.useUpdateEffect)(() => {
+    const isDone = defaultValues.every((defaultValue) => values.includes(defaultValue));
+    if (isDone)
+      return;
+    setValues(defaultValues);
+  }, [defaultValues]);
+  const cloneChildren = (0, import_react.useMemo)(
+    () => values.map((value) => validChildren.find(({ props: props2 }) => props2.label === value)),
+    [values, validChildren]
+  );
+  const css = {
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    gap,
+    ...styles.container
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReorderProvider, { value: { orientation, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.ul,
+    {
+      ref,
+      as: import_motion.MotionReorder.Group,
+      className: (0, import_utils.cx)("ui-reorder", className),
+      axis,
+      values,
+      onReorder,
+      __css: css,
+      ...rest,
+      onMouseUp: (0, import_utils.handlerAll)(rest.onMouseUp, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
+      onTouchEnd: (0, import_utils.handlerAll)(rest.onTouchEnd, () => onCompleteChange == null ? void 0 : onCompleteChange(values)),
+      children: cloneChildren
+    }
+  ) });
+});
+Reorder.displayName = "Reorder";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Reorder,
+  ReorderProvider,
+  useReorderContext
+});

package/dist/reorder.mjs

@@ -0,0 +1,10 @@
+import {
+  Reorder,
+  ReorderProvider,
+  useReorderContext
+} from "./chunk-UF5QTFGJ.mjs";
+export {
+  Reorder,
+  ReorderProvider,
+  useReorderContext
+};

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@yamada-ui/reorder",
+  "version": "0.1.0",
+  "description": "Yamada UI reorder component",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "reorder",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/reorder"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "@yamada-ui/core": "0.1.0",
+    "@yamada-ui/icon": "0.1.0",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/motion": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}