@yamada-ui/react 1.7.7 → 2.0.0-dev-20250626070331

package/dist/cjs/components/portal/portal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.cjs","names":["node: RootNode","Portal: FC<PortalProps>"],"sources":["../../../../src/components/portal/portal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport type { RootNode } from \"../../core\"\nimport { Children, useEffect, useState } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { useEnvironment } from \"../../core\"\nimport { getDocument, isShadowRoot, useSsr } from \"../../utils\"\n\nconst getPortalNode = (node: RootNode) => {\n  const rootNode = node.getRootNode()\n\n  if (isShadowRoot(rootNode)) return rootNode\n\n  return getDocument(node).body\n}\n\nexport interface PortalProps extends PropsWithChildren {\n  /**\n   * The `ref` to the component where the portal will be attached to.\n   */\n  containerRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, the forwarding will be disabled.\n   */\n  disabled?: boolean\n}\n\n/**\n * `Portal` is a component that renders elements outside of the current `DOM` hierarchy.\n *\n * @see https://yamada-ui.com/components/portal\n */\nexport const Portal: FC<PortalProps> = ({\n  children,\n  containerRef: ref,\n  disabled,\n}) => {\n  const [target, setTarget] = useState(ref?.current)\n  const ssr = useSsr()\n  const { getRootNode } = useEnvironment()\n\n  useEffect(() => {\n    setTarget(() => ref?.current)\n  }, [ref])\n\n  if (ssr || disabled) return children\n\n  const container = target ?? getPortalNode(getRootNode())\n\n  return (\n    <>{Children.map(children, (child) => createPortal(child, container))}</>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AASA,MAAM,gBAAgB,CAACA,SAAmB;CACxC,MAAM,WAAW,KAAK,aAAa;AAEnC,KAAI,oDAAa,SAAS,CAAE,QAAO;AAEnC,QAAO,mDAAY,KAAK,CAAC;AAC1B;;;;;;AAkBD,MAAaC,SAA0B,CAAC,EACtC,UACA,cAAc,KACd,UACD,KAAK;CACJ,MAAM,CAAC,QAAQ,UAAU,GAAG,oBAAS,KAAK,QAAQ;CAClD,MAAM,MAAM,0BAAQ;CACpB,MAAM,EAAE,aAAa,GAAG,yDAAgB;AAExC,sBAAU,MAAM;AACd,YAAU,MAAM,KAAK,QAAQ;CAC9B,GAAE,CAAC,GAAI,EAAC;AAET,KAAI,OAAO,SAAU,QAAO;CAE5B,MAAM,YAAY,UAAU,cAAc,aAAa,CAAC;AAExD,wBACE,mEAAG,eAAS,IAAI,UAAU,CAAC,UAAU,4BAAa,OAAO,UAAU,CAAC,GAAI;AAE3E"}

package/dist/cjs/components/progress/index.cjs

@@ -0,0 +1,9 @@
+const require_components_progress_progress_style = require('./progress.style.cjs');
+const require_components_progress_use_progress = require('./use-progress.cjs');
+const require_components_progress_progress = require('./progress.cjs');
+
+exports.Progress = require_components_progress_progress.Progress;
+exports.ProgressPropsContext = require_components_progress_progress.ProgressPropsContext;
+exports.progressStyle = require_components_progress_progress_style.progressStyle;
+exports.useProgress = require_components_progress_use_progress.useProgress;
+exports.useProgressPropsContext = require_components_progress_progress.useProgressPropsContext;

package/dist/cjs/components/progress/progress.cjs

@@ -0,0 +1,47 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_core_css_merge_css = require('../../core/css/merge-css.cjs');
+const require_core_system_factory = require('../../core/system/factory.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_progress_progress_style = require('./progress.style.cjs');
+const require_components_progress_use_progress = require('./use-progress.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/progress/progress.tsx
+const { PropsContext: ProgressPropsContext, usePropsContext: useProgressPropsContext, withContext, withProvider } = require_core_components_create_component.createSlotComponent("progress", require_components_progress_progress_style.progressStyle);
+/**
+* `Progress` is a component for visually indicating progress.
+*
+* @see https://yamada-ui.com/components/progress
+*/
+const Progress = withProvider(({ css, max, min, rangeColor, trackColor, value, rangeProps,...rest }) => {
+	const { percent, getRangeProps, getRootProps } = require_components_progress_use_progress.useProgress({
+		max,
+		min,
+		value
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_core_system_factory.styled.div, {
+		css: require_core_css_merge_css.mergeCSS(css, { "--width": `${percent}%` }),
+		bg: trackColor,
+		...getRootProps(rest),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressRange, {
+			bg: rangeColor,
+			...getRangeProps(rangeProps)
+		})
+	});
+}, "root")(void 0, ({ duration,...rest }) => ({
+	"--duration": (0, require_utils_index.utils_exports.isNumber)(duration) ? `${duration}s` : duration,
+	...rest
+}));
+const ProgressRange = withContext("div", "range")();
+
+//#endregion
+exports.Progress = Progress;
+exports.ProgressPropsContext = ProgressPropsContext;
+exports.useProgressPropsContext = useProgressPropsContext;
+exports.withContext = withContext;
+exports.withProvider = withProvider;
+//# sourceMappingURL=progress.cjs.map

package/dist/cjs/components/progress/progress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.cjs","names":["progressStyle","styled"],"sources":["../../../../src/components/progress/progress.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ProgressStyle } from \"./progress.style\"\nimport type { UseProgressProps } from \"./use-progress\"\nimport { createSlotComponent, mergeCSS, styled } from \"../../core\"\nimport { isNumber } from \"../../utils\"\nimport { progressStyle } from \"./progress.style\"\nimport { useProgress } from \"./use-progress\"\n\nexport interface ProgressProps\n  extends HTMLStyledProps,\n    UseProgressProps,\n    ThemeProps<ProgressStyle> {\n  /**\n   * The animation duration in seconds.\n   */\n  duration?: number | string\n  /**\n   * The color of the progress range.\n   */\n  rangeColor?: CSSProps[\"color\"]\n  /**\n   * The color of the progress track.\n   */\n  trackColor?: CSSProps[\"color\"]\n  /**\n   * Props for the progress range element.\n   */\n  rangeProps?: ProgressRangeProps\n}\n\nexport const {\n  PropsContext: ProgressPropsContext,\n  usePropsContext: useProgressPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ProgressProps, ProgressStyle>(\"progress\", progressStyle)\n\n/**\n * `Progress` is a component for visually indicating progress.\n *\n * @see https://yamada-ui.com/components/progress\n */\nexport const Progress = withProvider(\n  ({ css, max, min, rangeColor, trackColor, value, rangeProps, ...rest }) => {\n    const { percent, getRangeProps, getRootProps } = useProgress({\n      max,\n      min,\n      value,\n    })\n\n    return (\n      <styled.div\n        css={mergeCSS(css, { \"--width\": `${percent}%` })}\n        bg={trackColor}\n        {...getRootProps(rest)}\n      >\n        <ProgressRange bg={rangeColor} {...getRangeProps(rangeProps)} />\n      </styled.div>\n    )\n  },\n  \"root\",\n)(undefined, ({ duration, ...rest }) => ({\n  \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n  ...rest,\n}))\n\ninterface ProgressRangeProps extends HTMLStyledProps {}\n\nconst ProgressRange = withContext<\"div\", ProgressRangeProps>(\"div\", \"range\")()\n"],"mappings":";;;;;;;;;;;;;AAgCA,MAAa,EACX,cAAc,sBACd,iBAAiB,yBACjB,aACA,cACD,GAAG,6DAAkD,YAAYA,yDAAc;;;;;;AAOhF,MAAa,WAAW,aACtB,CAAC,EAAE,KAAK,KAAK,KAAK,YAAY,YAAY,OAAO,WAAY,GAAG,MAAM,KAAK;CACzE,MAAM,EAAE,SAAS,eAAe,cAAc,GAAG,qDAAY;EAC3D;EACA;EACA;CACD,EAAC;AAEF,wBACE,2BAACC,mCAAO;EACN,KAAK,oCAAS,KAAK,EAAE,cAAc,QAAQ,GAAI,EAAC;EAChD,IAAI;EACJ,GAAI,aAAa,KAAK;4BAEtB,2BAAC;GAAc,IAAI;GAAY,GAAI,cAAc,WAAW;IAAI;GACrD;AAEhB,GACD,OACD,SAAY,CAAC,EAAE,SAAU,GAAG,MAAM,MAAM;CACvC,cAAc,gDAAS,SAAS,MAAM,SAAS,KAAK;CACpD,GAAG;AACJ,GAAE;AAIH,MAAM,gBAAgB,YAAuC,OAAO,QAAQ,EAAE"}

package/dist/cjs/components/progress/progress.style.cjs

@@ -0,0 +1,88 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/progress/progress.style.ts
+const progressStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		range: {
+			bgColor: "{filledTrackColor}",
+			h: "full",
+			rounded: "inherit",
+			transitionDuration: "slow",
+			transitionProperty: "size",
+			w: "{width}",
+			_indeterminate: {
+				"--animation-from-x": "-40%",
+				"--animation-to-x": "100%",
+				animationDuration: "{duration, 1s}",
+				animationIterationCount: "infinite",
+				animationName: "position",
+				animationTimingFunction: "ease",
+				minW: "50%",
+				position: "absolute",
+				willChange: "left"
+			}
+		},
+		root: {
+			overflow: "hidden",
+			position: "relative",
+			w: "full"
+		}
+	},
+	props: {
+		animated: { true: { range: {
+			"--animation-from": "{stripe-size}",
+			animationDuration: "{duration, 1s}",
+			animationIterationCount: "infinite",
+			animationName: "bg-position",
+			animationTimingFunction: "linear"
+		} } },
+		shape: {
+			circle: { root: { rounded: "full" } },
+			rounded: { root: { rounded: "l1" } },
+			square: { root: { rounded: "0" } }
+		},
+		striped: { true: { range: {
+			"--stripe-angle": "45deg",
+			"--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"],
+			"--stripe-size": "1rem",
+			bgImage: `linear-gradient(
+            {stripe-angle},
+            {stripe-color} 25%,
+            transparent 25%,
+            transparent 50%,
+            {stripe-color} 50%,
+            {stripe-color} 75%,
+            transparent 75%,
+            transparent
+          )`,
+			bgSize: "{stripe-size} {stripe-size}"
+		} } }
+	},
+	variants: {
+		outline: {
+			range: { bg: "colorScheme.solid" },
+			root: { bg: "bg.subtle" }
+		},
+		subtle: {
+			range: { bg: "colorScheme.solid/80" },
+			root: { bg: ["colorScheme.muted", "colorScheme.subtle"] }
+		}
+	},
+	sizes: {
+		xs: { root: { h: "1" } },
+		sm: { root: { h: "2" } },
+		md: { root: { h: "3" } },
+		lg: { root: { h: "4" } },
+		xl: { root: { h: "5" } }
+	},
+	defaultProps: {
+		size: "md",
+		variant: "outline",
+		shape: "rounded",
+		striped: false
+	}
+});
+
+//#endregion
+exports.progressStyle = progressStyle;
+//# sourceMappingURL=progress.style.cjs.map

package/dist/cjs/components/progress/progress.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.style.cjs","names":[],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n  base: {\n    range: {\n      bgColor: \"{filledTrackColor}\",\n      h: \"full\",\n      rounded: \"inherit\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"size\",\n      w: \"{width}\",\n      _indeterminate: {\n        \"--animation-from-x\": \"-40%\",\n        \"--animation-to-x\": \"100%\",\n        animationDuration: \"{duration, 1s}\",\n        animationIterationCount: \"infinite\",\n        animationName: \"position\",\n        animationTimingFunction: \"ease\",\n        minW: \"50%\",\n        position: \"absolute\",\n        willChange: \"left\",\n      },\n    },\n    root: {\n      overflow: \"hidden\",\n      position: \"relative\",\n      w: \"full\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, the progress bar will animate.\n     *\n     * @default false\n     */\n    animated: {\n      true: {\n        range: {\n          \"--animation-from\": \"{stripe-size}\",\n          animationDuration: \"{duration, 1s}\",\n          animationIterationCount: \"infinite\",\n          animationName: \"bg-position\",\n          animationTimingFunction: \"linear\",\n        },\n      },\n    },\n    /**\n     * The shape of the progress bar.\n     *\n     * @default rounded\n     */\n    shape: {\n      circle: {\n        root: { rounded: \"full\" },\n      },\n      rounded: {\n        root: { rounded: \"l1\" },\n      },\n      square: {\n        root: { rounded: \"0\" },\n      },\n    },\n    /**\n     * If `true`, the progress bar will show stripe.\n     *\n     * @default false\n     */\n    striped: {\n      true: {\n        range: {\n          \"--stripe-angle\": \"45deg\",\n          \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n          \"--stripe-size\": \"1rem\",\n          bgImage: `linear-gradient(\n            {stripe-angle},\n            {stripe-color} 25%,\n            transparent 25%,\n            transparent 50%,\n            {stripe-color} 50%,\n            {stripe-color} 75%,\n            transparent 75%,\n            transparent\n          )`,\n          bgSize: \"{stripe-size} {stripe-size}\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    outline: {\n      range: {\n        bg: \"colorScheme.solid\",\n      },\n      root: {\n        bg: \"bg.subtle\",\n      },\n    },\n    subtle: {\n      range: {\n        bg: \"colorScheme.solid/80\",\n      },\n      root: {\n        bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: { h: \"1\" },\n    },\n    sm: {\n      root: { h: \"2\" },\n    },\n    md: {\n      root: { h: \"3\" },\n    },\n    lg: {\n      root: { h: \"4\" },\n    },\n    xl: {\n      root: { h: \"5\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n    shape: \"rounded\",\n    striped: false,\n  },\n})\n\nexport type ProgressStyle = typeof progressStyle\n"],"mappings":";;;AAEA,MAAa,gBAAgB,oDAAyB;CACpD,MAAM;EACJ,OAAO;GACL,SAAS;GACT,GAAG;GACH,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,gBAAgB;IACd,sBAAsB;IACtB,oBAAoB;IACpB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;IACzB,MAAM;IACN,UAAU;IACV,YAAY;GACb;EACF;EACD,MAAM;GACJ,UAAU;GACV,UAAU;GACV,GAAG;EACJ;CACF;CAED,OAAO;EAML,UAAU,EACR,MAAM,EACJ,OAAO;GACL,oBAAoB;GACpB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;EAC1B,EACF,EACF;EAMD,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,SAAS,OAAQ,EAC1B;GACD,SAAS,EACP,MAAM,EAAE,SAAS,KAAM,EACxB;GACD,QAAQ,EACN,MAAM,EAAE,SAAS,IAAK,EACvB;EACF;EAMD,SAAS,EACP,MAAM,EACJ,OAAO;GACL,kBAAkB;GAClB,kBAAkB,CAAC,4BAA4B,oBAAqB;GACpE,iBAAiB;GACjB,UAAU;;;;;;;;;;GAUV,QAAQ;EACT,EACF,EACF;CACF;CAED,UAAU;EACR,SAAS;GACP,OAAO,EACL,IAAI,oBACL;GACD,MAAM,EACJ,IAAI,YACL;EACF;EACD,QAAQ;GACN,OAAO,EACL,IAAI,uBACL;GACD,MAAM,EACJ,IAAI,CAAC,qBAAqB,oBAAqB,EAChD;EACF;CACF;CAED,OAAO;EACL,IAAI,EACF,MAAM,EAAE,GAAG,IAAK,EACjB;EACD,IAAI,EACF,MAAM,EAAE,GAAG,IAAK,EACjB;EACD,IAAI,EACF,MAAM,EAAE,GAAG,IAAK,EACjB;EACD,IAAI,EACF,MAAM,EAAE,GAAG,IAAK,EACjB;EACD,IAAI,EACF,MAAM,EAAE,GAAG,IAAK,EACjB;CACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,SAAS;CACV;AACF,EAAC"}

package/dist/cjs/components/progress/use-progress.cjs

@@ -0,0 +1,48 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_providers_i18n_provider_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+
+//#region src/components/progress/use-progress.ts
+const useProgress = ({ max = 100, min = 0, value } = {}) => {
+	const indeterminate = value === null;
+	const percent = (0, require_utils_index.utils_exports.valueToPercent)(value ?? 0, min, max);
+	const { t } = require_providers_i18n_provider_i18n_provider.useI18n("progress");
+	const getRootProps = (0, react.useCallback)((props) => ({
+		"aria-label": indeterminate ? t("loading") : t("percent", { value: percent }),
+		"aria-valuemax": max,
+		"aria-valuemin": min,
+		"aria-valuenow": value ?? void 0,
+		"data-indeterminate": (0, require_utils_index.utils_exports.dataAttr)(indeterminate),
+		role: "progressbar",
+		...props
+	}), [
+		max,
+		min,
+		percent,
+		value,
+		indeterminate,
+		t
+	]);
+	const getTrackProps = (0, react.useCallback)((props) => ({
+		"data-indeterminate": (0, require_utils_index.utils_exports.dataAttr)(indeterminate),
+		...props
+	}), [indeterminate]);
+	const getRangeProps = (0, react.useCallback)((props) => ({
+		"data-indeterminate": (0, require_utils_index.utils_exports.dataAttr)(indeterminate),
+		...props
+	}), [indeterminate]);
+	return {
+		percent,
+		getRangeProps,
+		getRootProps,
+		getTrackProps
+	};
+};
+
+//#endregion
+exports.useProgress = useProgress;
+//# sourceMappingURL=use-progress.cjs.map

package/dist/cjs/components/progress/use-progress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-progress.cjs","names":["props?: HTMLProps<Y>","props?: HTMLProps<Y extends \"svg\" ? \"circle\" : \"div\">"],"sources":["../../../../src/components/progress/use-progress.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps } from \"../../core\"\nimport { useCallback } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr, valueToPercent } from \"../../utils\"\n\nexport interface UseProgressProps {\n  /**\n   * The maximum value of the progress.\n   *\n   * @default 100\n   */\n  max?: number\n  /**\n   * The minimum value of the progress.\n   *\n   * @default 0\n   */\n  min?: number\n  /**\n   * The value of the progress. If `null`, the progress will be indeterminate.\n   *\n   * @default 0\n   */\n  value?: null | number\n}\n\nexport const useProgress = <Y extends \"div\" | \"svg\" = \"div\">({\n  max = 100,\n  min = 0,\n  value,\n}: UseProgressProps = {}) => {\n  const indeterminate = value === null\n  const percent = valueToPercent(value ?? 0, min, max)\n  const { t } = useI18n(\"progress\")\n\n  const getRootProps = useCallback(\n    (props?: HTMLProps<Y>) => ({\n      \"aria-label\": indeterminate\n        ? t(\"loading\")\n        : t(\"percent\", { value: percent }),\n      \"aria-valuemax\": max,\n      \"aria-valuemin\": min,\n      \"aria-valuenow\": value ?? undefined,\n      \"data-indeterminate\": dataAttr(indeterminate),\n      role: \"progressbar\",\n      ...props,\n    }),\n    [max, min, percent, value, indeterminate, t],\n  )\n\n  const getTrackProps = useCallback(\n    (props?: HTMLProps<Y extends \"svg\" ? \"circle\" : \"div\">) => ({\n      \"data-indeterminate\": dataAttr(indeterminate),\n      ...props,\n    }),\n    [indeterminate],\n  )\n\n  const getRangeProps = useCallback(\n    (props?: HTMLProps<Y extends \"svg\" ? \"circle\" : \"div\">) => ({\n      \"data-indeterminate\": dataAttr(indeterminate),\n      ...props,\n    }),\n    [indeterminate],\n  )\n\n  return {\n    percent,\n    getRangeProps,\n    getRootProps,\n    getTrackProps,\n  }\n}\n\nexport type UseProgressReturn = ReturnType<typeof useProgress>\n"],"mappings":";;;;;;;;;AA4BA,MAAa,cAAc,CAAkC,EAC3D,MAAM,KACN,MAAM,GACN,OACiB,GAAG,CAAE,MAAK;CAC3B,MAAM,gBAAgB,UAAU;CAChC,MAAM,UAAU,sDAAe,SAAS,GAAG,KAAK,IAAI;CACpD,MAAM,EAAE,GAAG,GAAG,sDAAQ,WAAW;CAEjC,MAAM,eAAe,uBACnB,CAACA,WAA0B;EACzB,cAAc,gBACV,EAAE,UAAU,GACZ,EAAE,WAAW,EAAE,OAAO,QAAS,EAAC;EACpC,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,sBAAsB,gDAAS,cAAc;EAC7C,MAAM;EACN,GAAG;CACJ,IACD;EAAC;EAAK;EAAK;EAAS;EAAO;EAAe;CAAE,EAC7C;CAED,MAAM,gBAAgB,uBACpB,CAACC,WAA2D;EAC1D,sBAAsB,gDAAS,cAAc;EAC7C,GAAG;CACJ,IACD,CAAC,aAAc,EAChB;CAED,MAAM,gBAAgB,uBACpB,CAACA,WAA2D;EAC1D,sBAAsB,gDAAS,cAAc;EAC7C,GAAG;CACJ,IACD,CAAC,aAAc,EAChB;AAED,QAAO;EACL;EACA;EACA;EACA;CACD;AACF"}

package/dist/cjs/components/reorder/index.cjs

@@ -0,0 +1,23 @@
+const require_components_reorder_reorder_style = require('./reorder.style.cjs');
+const require_components_reorder_use_reorder = require('./use-reorder.cjs');
+const require_components_reorder_reorder = require('./reorder.cjs');
+const require_components_reorder_namespace = require('./namespace.cjs');
+
+Object.defineProperty(exports, 'Reorder', {
+  enumerable: true,
+  get: function () {
+    return require_components_reorder_namespace.namespace_exports;
+  }
+});
+exports.ReorderContext = require_components_reorder_use_reorder.ReorderContext;
+exports.ReorderItem = require_components_reorder_reorder.ReorderItem;
+exports.ReorderItemContext = require_components_reorder_use_reorder.ReorderItemContext;
+exports.ReorderPropsContext = require_components_reorder_reorder.ReorderPropsContext;
+exports.ReorderRoot = require_components_reorder_reorder.ReorderRoot;
+exports.ReorderTrigger = require_components_reorder_reorder.ReorderTrigger;
+exports.reorderStyle = require_components_reorder_reorder_style.reorderStyle;
+exports.useReorder = require_components_reorder_use_reorder.useReorder;
+exports.useReorderContext = require_components_reorder_use_reorder.useReorderContext;
+exports.useReorderItem = require_components_reorder_use_reorder.useReorderItem;
+exports.useReorderItemContext = require_components_reorder_use_reorder.useReorderItemContext;
+exports.useReorderPropsContext = require_components_reorder_reorder.useReorderPropsContext;

package/dist/cjs/components/reorder/namespace.cjs

@@ -0,0 +1,35 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_components_reorder_use_reorder = require('./use-reorder.cjs');
+const require_components_reorder_reorder = require('./reorder.cjs');
+
+//#region src/components/reorder/namespace.ts
+var namespace_exports = {};
+require_rolldown_runtime.__export(namespace_exports, {
+	Context: () => require_components_reorder_use_reorder.ReorderContext,
+	Item: () => require_components_reorder_reorder.ReorderItem,
+	ItemContext: () => require_components_reorder_use_reorder.ReorderItemContext,
+	PropsContext: () => require_components_reorder_reorder.ReorderPropsContext,
+	Root: () => require_components_reorder_reorder.ReorderRoot,
+	Trigger: () => require_components_reorder_reorder.ReorderTrigger,
+	useContext: () => require_components_reorder_use_reorder.useReorderContext,
+	useItemContext: () => require_components_reorder_use_reorder.useReorderItemContext,
+	usePropsContext: () => require_components_reorder_reorder.useReorderPropsContext
+});
+
+//#endregion
+exports.Context = require_components_reorder_use_reorder.ReorderContext;
+exports.Item = require_components_reorder_reorder.ReorderItem;
+exports.ItemContext = require_components_reorder_use_reorder.ReorderItemContext;
+exports.PropsContext = require_components_reorder_reorder.ReorderPropsContext;
+exports.Root = require_components_reorder_reorder.ReorderRoot;
+exports.Trigger = require_components_reorder_reorder.ReorderTrigger;
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+exports.useContext = require_components_reorder_use_reorder.useReorderContext;
+exports.useItemContext = require_components_reorder_use_reorder.useReorderItemContext;
+exports.usePropsContext = require_components_reorder_reorder.useReorderPropsContext;
+//# sourceMappingURL=namespace.cjs.map

package/dist/cjs/components/reorder/namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/reorder/namespace.ts"],"sourcesContent":["export {\n  ReorderItem as Item,\n  ReorderPropsContext as PropsContext,\n  ReorderRoot as Root,\n  ReorderTrigger as Trigger,\n  useReorderPropsContext as usePropsContext,\n} from \"./reorder\"\nexport type {\n  ReorderItemProps as ItemProps,\n  ReorderRootProps as RootProps,\n  ReorderTriggerProps as TriggerProps,\n} from \"./reorder\"\nexport {\n  ReorderContext as Context,\n  ReorderItemContext as ItemContext,\n  useReorderContext as useContext,\n  useReorderItemContext as useItemContext,\n} from \"./use-reorder\"\n"],"mappings":""}

package/dist/cjs/components/reorder/reorder.cjs

@@ -0,0 +1,63 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_core_system_factory = require('../../core/system/factory.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_grip_vertical_icon = require('../icon/icons/grip-vertical-icon.cjs');
+const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
+const require_components_reorder_reorder_style = require('./reorder.style.cjs');
+const require_components_reorder_use_reorder = require('./use-reorder.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const motion_react = require_rolldown_runtime.__toESM(require("motion/react"));
+
+//#region src/components/reorder/reorder.tsx
+const { PropsContext: ReorderPropsContext, usePropsContext: useReorderPropsContext, withContext, withProvider } = require_core_components_create_component.createSlotComponent("reorder", require_components_reorder_reorder_style.reorderStyle);
+/**
+* `Reorder` is a component that allows you to change the order of items using drag and drop.
+*
+* @see https://yamada-ui.com/components/reorder
+*/
+const ReorderRoot = withProvider((props) => {
+	const orientation = require_hooks_use_value_index.useValue(props.orientation);
+	const { children, getRootProps } = require_components_reorder_use_reorder.useReorder({
+		...props,
+		item: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReorderItem, {}),
+		orientation
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_reorder_use_reorder.ReorderContext, {
+		value: { orientation },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_core_system_factory.styled.ul, {
+			as: motion_react.Reorder.Group,
+			...getRootProps(),
+			children
+		})
+	});
+}, "root", { transferProps: ["orientation"] })();
+const ReorderItem = withContext((props) => {
+	const { getItemProps, getTriggerProps } = require_components_reorder_use_reorder.useReorderItem(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_reorder_use_reorder.ReorderItemContext, {
+		value: { getTriggerProps },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_core_system_factory.styled.li, {
+			as: motion_react.Reorder.Item,
+			...getItemProps()
+		})
+	});
+}, "item")();
+const ReorderTrigger = withContext("div", "trigger")(void 0, (props) => {
+	const { getTriggerProps } = require_components_reorder_use_reorder.useReorderItemContext();
+	return {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grip_vertical_icon.GripVerticalIcon, {}),
+		...getTriggerProps(props)
+	};
+});
+
+//#endregion
+exports.ReorderItem = ReorderItem;
+exports.ReorderPropsContext = ReorderPropsContext;
+exports.ReorderRoot = ReorderRoot;
+exports.ReorderTrigger = ReorderTrigger;
+exports.useReorderPropsContext = useReorderPropsContext;
+exports.withContext = withContext;
+exports.withProvider = withProvider;
+//# sourceMappingURL=reorder.cjs.map

package/dist/cjs/components/reorder/reorder.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorder.cjs","names":["reorderStyle","props: ReorderRootProps<Y>","ReorderContext","styled","OriginalReorder","props: ReorderItemProps<Y>","ReorderItemContext","GripVerticalIcon"],"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 ReorderRootProps<Y = string>\n  extends 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?: ReorderItemProps<Y>[]\n}\n\nexport const {\n  PropsContext: ReorderPropsContext,\n  usePropsContext: useReorderPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ReorderRootProps, ReorderStyle>(\"reorder\", reorderStyle)\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/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>(props: ReorderRootProps<Y>) => {\n    const orientation = useValue(props.orientation)\n    const { children, getRootProps } = useReorder({\n      ...props,\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 Omit<\n      Merge<HTMLMotionProps<\"li\">, UseReorderItemProps<Y>>,\n      \"children\"\n    >,\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":";;;;;;;;;;;;;;AAkCA,MAAa,EACX,cAAc,qBACd,iBAAiB,wBACjB,aACA,cACD,GAAG,6DAAoD,WAAWA,sDAAa;;;;;;AAOhF,MAAa,cAAc,aAEzB,CAAyBC,UAA+B;CACtD,MAAM,cAAc,uCAAS,MAAM,YAAY;CAC/C,MAAM,EAAE,UAAU,cAAc,GAAG,kDAAW;EAC5C,GAAG;EACH,sBAAM,2BAAC,gBAAc;EACrB;CACD,EAAC;AAEF,wBACE,2BAACC;EAAe,OAAO,EAAE,YAAa;4BACpC,2BAACC,mCAAO;GACN,IAAIC,qBAAgB;GACpB,GAAK,cAAc;GAElB;IACS;GACG;AAEpB,GACD,QACA,EAAE,eAAe,CAAC,aAAc,EAAE,EACnC,EAAE;AAWH,MAAa,cAAc,YAEzB,CAAyBC,UAA+B;CACtD,MAAM,EAAE,cAAc,iBAAiB,GAAG,sDAAe,MAAM;AAE/D,wBACE,2BAACC;EAAmB,OAAO,EAAE,gBAAiB;4BAC5C,2BAACH,mCAAO;GACN,IAAIC,qBAAgB;GACpB,GAAK,cAAc;IACnB;GACiB;AAExB,GACD,OACD,EAAE;AAMH,MAAa,iBAAiB,YAC5B,OACA,UACD,SAAY,CAAC,UAAU;CACtB,MAAM,EAAE,iBAAiB,GAAG,8DAAuB;AAEnD,QAAO;EAAE,0BAAU,2BAACG,gDAAmB;EAAE,GAAG,gBAAgB,MAAM;CAAE;AACrE,EAAC"}

package/dist/cjs/components/reorder/reorder.style.cjs

@@ -0,0 +1,92 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/reorder/reorder.style.ts
+const reorderStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		item: {
+			"&[data-has-trigger]": {
+				cursor: "default",
+				userSelect: "none"
+			},
+			cursor: "grab",
+			flex: "1",
+			rounded: "l2",
+			_selected: {
+				boxShadow: "md",
+				cursor: "grabbing"
+			}
+		},
+		root: {
+			display: "flex",
+			w: "full"
+		},
+		trigger: {
+			alignItems: "center",
+			color: "fg.subtle",
+			cursor: "grab",
+			display: "flex",
+			fontSize: "2xl",
+			justifyContent: "center",
+			_selected: { cursor: "grabbing" },
+			_disabled: { layerStyle: "disabled" }
+		}
+	},
+	sizes: {
+		sm: {
+			item: { p: "3" },
+			root: { gap: "3" }
+		},
+		md: {
+			item: { p: "4" },
+			root: { gap: "4" }
+		},
+		lg: {
+			item: { p: "6" },
+			root: { gap: "6" }
+		},
+		xl: {
+			item: { p: "8" },
+			root: { gap: "8" }
+		}
+	},
+	variants: {
+		elevated: { item: {
+			bg: "bg.panel",
+			boxShadow: "md",
+			_selected: { boxShadow: "lg" }
+		} },
+		outline: { item: {
+			layerStyle: "outline",
+			bg: "bg"
+		} },
+		panel: { item: { layerStyle: "panel" } },
+		plain: {
+			item: {
+				flex: "inherit",
+				p: "0px",
+				rounded: "0px",
+				_selected: { boxShadow: "unset" }
+			},
+			root: { gap: "0px" }
+		},
+		solid: { item: { layerStyle: "solid" } },
+		subtle: { item: { layerStyle: "subtle" } },
+		surface: { item: { layerStyle: "surface" } }
+	},
+	props: { orientation: {
+		horizontal: { root: { flexDirection: "row" } },
+		vertical: { root: {
+			alignItems: "stretch",
+			flexDirection: "column"
+		} }
+	} },
+	defaultProps: {
+		size: "md",
+		variant: "panel",
+		orientation: "vertical"
+	}
+});
+
+//#endregion
+exports.reorderStyle = reorderStyle;
+//# sourceMappingURL=reorder.style.cjs.map

package/dist/cjs/components/reorder/reorder.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorder.style.cjs","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,oDAAyB;CACnD,MAAM;EACJ,MAAM;GACJ,uBAAuB;IACrB,QAAQ;IACR,YAAY;GACb;GACD,QAAQ;GACR,MAAM;GACN,SAAS;GACT,WAAW;IACT,WAAW;IACX,QAAQ;GACT;EACF;EACD,MAAM;GACJ,SAAS;GACT,GAAG;EACJ;EACD,SAAS;GACP,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,UAAU;GACV,gBAAgB;GAChB,WAAW,EACT,QAAQ,WACT;GACD,WAAW,EACT,YAAY,WACb;EACF;CACF;CAED,OAAO;EACL,IAAI;GACF,MAAM,EAAE,GAAG,IAAK;GAChB,MAAM,EAAE,KAAK,IAAK;EACnB;EACD,IAAI;GACF,MAAM,EAAE,GAAG,IAAK;GAChB,MAAM,EAAE,KAAK,IAAK;EACnB;EACD,IAAI;GACF,MAAM,EAAE,GAAG,IAAK;GAChB,MAAM,EAAE,KAAK,IAAK;EACnB;EACD,IAAI;GACF,MAAM,EAAE,GAAG,IAAK;GAChB,MAAM,EAAE,KAAK,IAAK;EACnB;CACF;CAED,UAAU;EACR,UAAU,EACR,MAAM;GACJ,IAAI;GACJ,WAAW;GACX,WAAW,EACT,WAAW,KACZ;EACF,EACF;EACD,SAAS,EACP,MAAM;GACJ,YAAY;GACZ,IAAI;EACL,EACF;EACD,OAAO,EACL,MAAM,EACJ,YAAY,QACb,EACF;EACD,OAAO;GACL,MAAM;IACJ,MAAM;IACN,GAAG;IACH,SAAS;IACT,WAAW,EAAE,WAAW,QAAS;GAClC;GACD,MAAM,EAAE,KAAK,MAAO;EACrB;EACD,OAAO,EACL,MAAM,EACJ,YAAY,QACb,EACF;EACD,QAAQ,EACN,MAAM,EACJ,YAAY,SACb,EACF;EACD,SAAS,EACP,MAAM,EACJ,YAAY,UACb,EACF;CACF;CAED,OAAO,EAML,aAAa;EACX,YAAY,EACV,MAAM,EACJ,eAAe,MAChB,EACF;EACD,UAAU,EACR,MAAM;GACJ,YAAY;GACZ,eAAe;EAChB,EACF;CACF,EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,aAAa;CACd;AACF,EAAC"}

package/dist/cjs/components/reorder/use-reorder.cjs

@@ -0,0 +1,175 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_children = require('../../utils/children.cjs');
+const require_utils_context = require('../../utils/context.cjs');
+const require_utils_effect = require('../../utils/effect.cjs');
+const require_utils_ref = require('../../utils/ref.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const motion_react = require_rolldown_runtime.__toESM(require("motion/react"));
+
+//#region src/components/reorder/use-reorder.ts
+const getAlternativeValue = ({ children, label } = {}) => serializeValue(children ?? label);
+const serializeValue = (value) => (0, require_utils_index.utils_exports.isObject)(value) || (0, require_utils_index.utils_exports.isArray)(value) ? JSON.stringify(value) : value;
+const [ReorderContext, useReorderContext] = require_utils_context.createContext({ name: "ReorderContext" });
+const [ReorderItemContext, useReorderItemContext] = require_utils_context.createContext({ name: "ReorderItemContext" });
+const useReorder = ({ ref, children, item, items = [], orientation = "vertical", onChange, onCompleteChange,...rest } = {}) => {
+	const axis = orientation === "vertical" ? "y" : "x";
+	const validChildren = (0, react.useMemo)(() => require_utils_children.getValidChildren(children), [children]);
+	const hasChildren = !!validChildren.length;
+	const defaultValues = (0, react.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));
+		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));
+	}, [
+		hasChildren,
+		validChildren,
+		items
+	]);
+	const childMap = (0, react.useMemo)(() => {
+		return Object.fromEntries(validChildren.map((child) => [serializeValue(child.props.value) ?? serializeValue(getAlternativeValue(child.props)), child]));
+	}, [validChildren]);
+	const itemMap = (0, react.useMemo)(() => {
+		return Object.fromEntries(items.map((props) => [serializeValue(props.value) ?? serializeValue(getAlternativeValue(props)), props]));
+	}, [items]);
+	const prevDefaultValues = (0, react.useRef)(defaultValues);
+	const [values, setValues] = (0, react.useState)(defaultValues);
+	const prevValues = (0, react.useRef)(defaultValues);
+	const cloneChildren = (0, react.useMemo)(() => values.map((value) => {
+		if (hasChildren) return childMap[serializeValue(value)];
+		else {
+			const props = itemMap[serializeValue(value)];
+			return props && item ? (0, react.cloneElement)(item, {
+				key: serializeValue(props.value),
+				...props
+			}) : null;
+		}
+	}), [
+		values,
+		hasChildren,
+		childMap,
+		itemMap,
+		item
+	]);
+	const onReorder = (0, react.useCallback)((newValues) => {
+		setValues(newValues);
+		onChange?.(newValues);
+	}, [onChange]);
+	const onCompleteReorder = (0, react.useCallback)(() => {
+		const equal = JSON.stringify(prevValues.current) === JSON.stringify(values);
+		if (equal) return;
+		prevValues.current = values;
+		onCompleteChange?.(values);
+	}, [onCompleteChange, values]);
+	require_utils_effect.useUpdateEffect(() => {
+		const equal = JSON.stringify(defaultValues) === JSON.stringify(prevDefaultValues.current);
+		if (equal) return;
+		prevValues.current = defaultValues;
+		prevDefaultValues.current = defaultValues;
+		setValues(defaultValues);
+	}, [defaultValues]);
+	const getRootProps = (0, react.useCallback)((props = {}) => ({
+		axis,
+		values,
+		...rest,
+		...props,
+		ref: require_utils_ref.mergeRefs(props.ref, ref),
+		onMouseUp: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseUp, rest.onMouseUp, onCompleteReorder),
+		onReorder: (0, require_utils_index.utils_exports.handlerAll)(props.onReorder, rest.onReorder, onReorder),
+		onTouchEnd: (0, require_utils_index.utils_exports.handlerAll)(props.onTouchEnd, rest.onTouchEnd, onCompleteReorder)
+	}), [
+		rest,
+		ref,
+		onCompleteReorder,
+		onReorder,
+		axis,
+		values
+	]);
+	return {
+		children: cloneChildren,
+		orientation,
+		values,
+		getRootProps
+	};
+};
+const useReorderItem = ({ ref, label, value,...rest }) => {
+	const { orientation } = useReorderContext();
+	const dragControls = (0, motion_react.useDragControls)();
+	const [hasTrigger, setHasTrigger] = (0, react.useState)(false);
+	const [drag, setDrag] = (0, react.useState)(false);
+	const x = (0, motion_react.useMotionValue)(0);
+	const y = (0, motion_react.useMotionValue)(0);
+	const register = (0, react.useCallback)((node) => setHasTrigger(!!node), []);
+	(0, react.useEffect)(() => {
+		const unsubscribeX = x.on("change", (x$1) => {
+			if (orientation === "horizontal") setDrag(x$1 !== 0);
+		});
+		const unsubscribeY = y.on("change", (y$1) => {
+			if (orientation === "vertical") setDrag(y$1 !== 0);
+		});
+		return () => {
+			unsubscribeX();
+			unsubscribeY();
+		};
+	}, [
+		orientation,
+		x,
+		y
+	]);
+	const getItemProps = (0, react.useCallback)((props = {}) => {
+		const children = props.children ?? rest.children ?? label;
+		return {
+			"data-has-trigger": (0, require_utils_index.utils_exports.dataAttr)(hasTrigger),
+			"data-selected": (0, require_utils_index.utils_exports.dataAttr)(drag),
+			dragControls,
+			dragListener: !hasTrigger,
+			value: value ?? getAlternativeValue({ children }),
+			...props,
+			...rest,
+			ref: require_utils_ref.mergeRefs(props.ref, ref),
+			style: {
+				x,
+				y,
+				...props.style,
+				...rest.style
+			},
+			children
+		};
+	}, [
+		ref,
+		rest,
+		dragControls,
+		hasTrigger,
+		value,
+		x,
+		y,
+		drag,
+		label
+	]);
+	const getTriggerProps = (0, react.useCallback)((props = {}) => ({
+		...props,
+		ref: require_utils_ref.mergeRefs(register, props.ref),
+		"data-selected": (0, require_utils_index.utils_exports.dataAttr)(drag),
+		onPointerDown: (0, require_utils_index.utils_exports.handlerAll)(props.onPointerDown, (ev) => dragControls.start(ev))
+	}), [
+		drag,
+		dragControls,
+		register
+	]);
+	return {
+		getItemProps,
+		getTriggerProps
+	};
+};
+
+//#endregion
+exports.ReorderContext = ReorderContext;
+exports.ReorderItemContext = ReorderItemContext;
+exports.useReorder = useReorder;
+exports.useReorderContext = useReorderContext;
+exports.useReorderItem = useReorderItem;
+exports.useReorderItemContext = useReorderItemContext;
+//# sourceMappingURL=use-reorder.cjs.map