@vkzstudio/muza-ui 1.0.11 → 1.0.13

package/dist/components/Reorderable/Reorderable.d.ts

@@ -1,10 +1,11 @@
 import { CSSProperties, ForwardedRef, ReactElement, ReactNode } from 'react';
-import { DragControls, TargetAndTransition } from 'motion/react';
+import { AnimatePresenceProps, DragControls, HTMLMotionProps, TargetAndTransition } from 'motion/react';
 interface ReorderableGroupContextValue<T = unknown> {
     disabled?: boolean;
     values?: T[];
     onReorder?: (newOrder: T[]) => void;
     axis?: 'x' | 'y';
+    animatePresence?: boolean;
 }
 declare const useReorderableGroup: <T>() => ReorderableGroupContextValue<T>;
 interface ReorderableItemContextValue {
@@ -14,62 +15,108 @@ interface ReorderableItemContextValue {
 }
 declare const useReorderableItem: () => ReorderableItemContextValue;
 type ReorderableGroupElement = 'ul' | 'ol' | 'div';
+/**
+ * Props for the ReorderableGroup component.
+ * @typeParam T - Type of items in the reorderable list
+ */
 export interface ReorderableGroupProps<T> {
-    /** Items array to reorder */
+    /** Array of items to reorder. Each item must be a stable reference for Motion to track. */
     values: T[];
-    /** Callback when items are reordered */
+    /** Fires when items are reordered with the new array order. */
     onReorder: (newOrder: T[]) => void;
-    /** Drag axis - defaults to 'y' */
+    /** Controls the drag axis direction. @default 'y' */
     axis?: 'x' | 'y';
-    /** HTML element type - defaults to 'ul' */
+    /** Specifies the HTML element type to render. @default 'ol' */
     as?: ReorderableGroupElement;
-    /** Disable all reordering */
+    /** Prevents all reordering interactions for the entire group. @default false */
     disabled?: boolean;
-    /** Enable layout scroll measurement for scrollable containers */
+    /** Enables layout scroll measurement for scrollable containers. @default false */
     layoutScroll?: boolean;
-    /** Inline styles */
+    /** Inline styles applied to the group element. */
     style?: CSSProperties;
-    /** Additional CSS classes */
+    /**
+     * Wraps children with AnimatePresence to enable exit animations on ReorderableItems.
+     * Pass `true` for defaults (`mode="popLayout"`, `initial={false}`) or an object for custom config.
+     */
+    animatePresence?: boolean | Omit<AnimatePresenceProps, 'children'>;
+    /** Additional CSS classes. */
     className?: string;
-    /** Child elements */
+    /** Child elements (ReorderableItem and/or ReorderableStaticItem). */
     children: ReactNode;
 }
 declare const ReorderableGroup: <T>(props: ReorderableGroupProps<T> & {
     ref?: ForwardedRef<HTMLUListElement>;
 }) => ReactElement;
 type ReorderableItemElement = 'li' | 'div' | 'tr';
+/**
+ * Custom animation configuration for enter/exit transitions on a ReorderableItem.
+ */
+export interface ReorderableItemAnimationConfig {
+    /** Mount animation state (motion `initial`). Set `false` to skip enter animation. */
+    initial?: HTMLMotionProps<'div'>['initial'];
+    /** Target animation state (motion `animate`). */
+    animate?: HTMLMotionProps<'div'>['animate'];
+    /** Unmount animation state — requires AnimatePresence as a parent. */
+    exit?: HTMLMotionProps<'div'>['exit'];
+    /** Animation timing configuration for enter/exit transitions. */
+    transition?: HTMLMotionProps<'div'>['transition'];
+}
+/**
+ * Props for the ReorderableItem component.
+ * @typeParam T - Type of the item value, must match the parent group's values type
+ */
 export interface ReorderableItemProps<T> {
-    /** Item identifier - must match an item in the parent group's values array */
+    /** Item identifier. Must match an entry in the parent group's `values` array. */
     value: T;
-    /** HTML element type - defaults to 'li' */
+    /** Specifies the HTML element type to render. @default 'li' */
     as?: ReorderableItemElement;
-    /** Disable this item from being dragged */
+    /** Prevents this item from being dragged. @default false */
     disabled?: boolean;
-    /** Restrict drag to handle only - when true, item can only be dragged via ReorderableHandle */
+    /**
+     * Restricts drag to handle only. When `true`, the item can only be dragged
+     * via a nested ReorderableHandle.
+     * @default false
+     */
     dragListenerDisabled?: boolean;
-    /** Additional styles to apply while dragging (merged with default whileDrag styles) */
+    /**
+     * Additional Motion styles applied while dragging, merged with default
+     * whileDrag styles (zIndex, position).
+     * @see TargetAndTransition
+     */
     whileDrag?: TargetAndTransition;
-    /** Additional CSS classes */
+    /**
+     * Controls enter/exit animations on this item.
+     * - `true`: applies default animation (opacity + scale).
+     * - Object: merges with defaults — only override what you need.
+     * - `false` or omitted: no animation unless the parent group has `animatePresence` enabled,
+     *   in which case defaults are applied automatically.
+     */
+    animation?: boolean | ReorderableItemAnimationConfig;
+    /** Additional CSS classes. */
     className?: string;
-    /** Child elements */
+    /** Child elements. */
     children: ReactNode;
-    /** Style */
+    /** Inline styles applied to the item element. */
     style?: CSSProperties;
 }
 declare const ReorderableItem: <T>(props: ReorderableItemProps<T> & {
     ref?: ForwardedRef<HTMLLIElement>;
 }) => ReactElement;
 type ReorderableHandleElement = 'button' | 'div' | 'span';
+/**
+ * Props for the ReorderableHandle component.
+ * Only activates when the parent ReorderableItem has `dragListenerDisabled` set to `true`.
+ */
 export interface ReorderableHandleProps {
-    /** HTML element type - defaults to 'button' */
+    /** Specifies the HTML element type to render. @default 'button' */
     as?: ReorderableHandleElement;
-    /** Disable the handle */
+    /** Prevents interaction with this handle. @default false */
     disabled?: boolean;
-    /** Accessibility label - defaults to 'Drag to reorder' */
+    /** Accessibility label for the drag handle. @default translated 'Drag to reorder' */
     'aria-label'?: string;
-    /** Additional CSS classes */
+    /** Additional CSS classes. */
     className?: string;
-    /** Child elements */
+    /** Child elements (typically a drag icon). */
     children?: ReactNode;
 }
 declare const ReorderableHandle: import('react').ForwardRefExoticComponent<ReorderableHandleProps & import('react').RefAttributes<HTMLButtonElement>>;
@@ -80,19 +127,21 @@ type ReorderableStaticItemElementMap = {
     tr: HTMLTableRowElement;
 };
 /**
- * Props for ReorderableStaticItem component.
+ * Props for the ReorderableStaticItem component.
  *
  * @remarks
- * **Limitation:** ReorderableStaticItem must be placed as the first or last item
- * in a ReorderableGroup. Placing it in the middle will cause reordering issues
- * as Motion's Reorder API doesn't support non-contiguous reorderable items.
+ * **Limitation:** Must be placed as the first or last item in a ReorderableGroup.
+ * Placing it in the middle causes reordering issues as Motion's Reorder API
+ * does not support non-contiguous reorderable items.
+ *
+ * @typeParam T - HTML element type, constrained to 'li' | 'div' | 'tr'
  */
 export interface ReorderableStaticItemProps<T extends ReorderableStaticItemElement = 'li'> {
-    /** HTML element type - defaults to 'li' */
+    /** Specifies the HTML element type to render. @default 'li' */
     as?: T;
-    /** Additional CSS classes */
+    /** Additional CSS classes. */
     className?: string;
-    /** Child elements */
+    /** Child elements. */
     children: ReactNode;
 }
 declare const ReorderableStaticItem: <T extends ReorderableStaticItemElement = "li">(props: ReorderableStaticItemProps<T> & {

package/dist/components/Reorderable/Reorderable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Reorderable.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Reorderable.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.tsx"],"names":[],"mappings":"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"}

package/dist/components/Reorderable/Reorderable.js

@@ -1,199 +1,218 @@
 import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as I, useContext as P, useRef as _, useCallback as A, createContext as E } from "react";
-import { useMuzaTranslations as K } from "../../translations/TranslationContext.js";
-import { useDragControls as S } from "../../node_modules/framer-motion/dist/es/gestures/drag/use-drag-controls.js";
-import { motion as O } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
-import { cn as x } from "../../utils/cn.js";
-import { ReorderGroup as U } from "../../node_modules/framer-motion/dist/es/components/Reorder/Group.js";
-import { ReorderItem as Y } from "../../node_modules/framer-motion/dist/es/components/Reorder/Item.js";
-const k = E({}), z = 50, N = 3, M = () => P(k), H = E(null), j = () => {
-  const r = P(H);
+import { forwardRef as A, useContext as K, useRef as X, useCallback as N, createContext as k } from "react";
+import { useMuzaTranslations as M } from "../../translations/TranslationContext.js";
+import { AnimatePresence as O } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { useDragControls as U } from "../../node_modules/framer-motion/dist/es/gestures/drag/use-drag-controls.js";
+import { motion as Y } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { cn as C } from "../../utils/cn.js";
+import { ReorderGroup as j } from "../../node_modules/framer-motion/dist/es/components/Reorder/Group.js";
+import { ReorderItem as z } from "../../node_modules/framer-motion/dist/es/components/Reorder/Item.js";
+const w = {
+  initial: { opacity: 0, scale: 0.96 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.96 },
+  transition: { duration: 0.2, ease: "easeOut" }
+}, T = k({}), F = 50, G = 3, _ = () => K(T), P = k(null), V = () => {
+  const r = K(P);
   if (!r)
     throw new Error("useReorderableItem must be used within a ReorderableItem");
   return r;
-}, V = ({
+}, Z = ({
   values: r,
-  onReorder: a,
-  axis: l = "y",
-  as: c = "ol",
-  disabled: o = !1,
-  layoutScroll: b = !1,
-  style: D,
-  className: g,
-  children: y
-}, m) => {
-  const s = K(), f = {
-    disabled: o,
+  onReorder: s,
+  axis: d = "y",
+  as: b = "ol",
+  disabled: a = !1,
+  layoutScroll: n = !1,
+  animatePresence: D,
+  style: x,
+  className: I,
+  children: f
+}, v) => {
+  const l = M(), c = {
+    disabled: a,
     values: r,
-    onReorder: o ? void 0 : a,
-    axis: l
-  };
+    onReorder: a ? void 0 : s,
+    axis: d,
+    animatePresence: !!D
+  }, e = D === !0 ? { mode: "popLayout", initial: !1 } : D || null, m = e ? /* @__PURE__ */ u(O, { ...e, children: f }) : f;
   return /* @__PURE__ */ u(
-    k.Provider,
+    T.Provider,
     {
-      value: f,
+      value: c,
       children: /* @__PURE__ */ u(
-        U,
+        j,
         {
-          ref: m,
-          axis: l,
+          ref: v,
+          axis: d,
           values: r,
-          onReorder: o ? () => {
-          } : a,
-          as: c,
-          layoutScroll: b,
-          style: D,
+          onReorder: a ? () => {
+          } : s,
+          as: b,
+          layoutScroll: n,
+          style: x,
           role: "list",
-          "aria-label": s.reorderableTable.listAriaLabel,
-          className: x(g),
-          children: y
+          "aria-label": l.reorderableTable.listAriaLabel,
+          className: C(I),
+          children: m
         }
       )
     }
   );
-}, Z = I(V);
-Z.displayName = "ReorderableGroup";
-const q = ({
+}, q = A(Z);
+q.displayName = "ReorderableGroup";
+const B = ({
   value: r,
-  as: a = "li",
-  disabled: l = !1,
-  dragListenerDisabled: c = !1,
-  whileDrag: o,
-  className: b,
-  children: D,
-  style: g
-}, y) => {
+  as: s = "li",
+  disabled: d = !1,
+  dragListenerDisabled: b = !1,
+  whileDrag: a,
+  animation: n,
+  className: D,
+  children: x,
+  style: I
+}, f) => {
   const {
-    disabled: m,
-    values: s,
-    onReorder: f,
-    axis: p
-  } = M(), t = S(), v = l || m, d = !v && !c, w = A(
-    (n) => {
-      if (!s || !f) return;
-      const e = s.indexOf(r);
-      if (e === -1) return;
-      const i = e + n;
-      if (i < 0 || i >= s.length) return;
-      const R = [...s];
-      R.splice(e, 1), R.splice(i, 0, r), f(R);
+    disabled: v,
+    values: l,
+    onReorder: c,
+    axis: e,
+    animatePresence: m
+  } = _(), E = U(), L = d || v, p = !L && !b, t = n === !1 ? null : n === !0 ? w : typeof n == "object" ? {
+    initial: n.initial ?? w.initial,
+    animate: n.animate ?? w.animate,
+    exit: n.exit ?? w.exit,
+    transition: n.transition ?? w.transition
+  } : m ? w : null, o = N(
+    (i) => {
+      if (!l || !c) return;
+      const R = l.indexOf(r);
+      if (R === -1) return;
+      const y = R + i;
+      if (y < 0 || y >= l.length) return;
+      const g = [...l];
+      g.splice(R, 1), g.splice(y, 0, r), c(g);
     },
-    [s, f, r]
-  ), h = A(
-    (n) => {
-      if (!d) return;
-      const e = p === "y" ? "ArrowUp" : "ArrowLeft", i = p === "y" ? "ArrowDown" : "ArrowRight";
-      n.key === e ? (n.preventDefault(), w(-1)) : n.key === i && (n.preventDefault(), w(1));
+    [l, c, r]
+  ), h = N(
+    (i) => {
+      if (!p) return;
+      const R = e === "y" ? "ArrowUp" : "ArrowLeft", y = e === "y" ? "ArrowDown" : "ArrowRight";
+      i.key === R ? (i.preventDefault(), o(-1)) : i.key === y && (i.preventDefault(), o(1));
     },
-    [d, p, w]
+    [p, e, o]
   );
   return /* @__PURE__ */ u(
-    H.Provider,
+    P.Provider,
     {
-      value: { dragControls: t, dragListenerDisabled: c, moveItem: w },
+      value: { dragControls: E, dragListenerDisabled: b, moveItem: o },
       children: /* @__PURE__ */ u(
-        Y,
+        z,
         {
-          ref: y,
+          ref: f,
           value: r,
-          as: a,
-          dragControls: t,
-          dragListener: d,
-          tabIndex: d ? 0 : void 0,
+          as: s,
+          dragControls: E,
+          dragListener: p,
+          initial: t == null ? void 0 : t.initial,
+          animate: t == null ? void 0 : t.animate,
+          exit: t == null ? void 0 : t.exit,
+          transition: t == null ? void 0 : t.transition,
+          tabIndex: p ? 0 : void 0,
           role: "listitem",
-          "aria-disabled": v,
+          "aria-disabled": L,
           onKeyDown: h,
-          className: x(
-            d && "cursor-grab active:cursor-grabbing",
-            d && "focus-visible-default",
-            b
+          className: C(
+            p && "cursor-grab active:cursor-grabbing",
+            p && "focus-visible-default",
+            D
           ),
-          style: g,
+          style: I,
           whileDrag: {
-            zIndex: z,
+            zIndex: F,
             position: "relative",
-            ...o
+            ...a
           },
-          children: D
+          children: x
         }
       )
     }
   );
-}, B = I(q);
-B.displayName = "ReorderableItem";
-const F = I(
+}, J = A(B);
+J.displayName = "ReorderableItem";
+const Q = A(
   ({
     as: r = "button",
-    disabled: a = !1,
-    "aria-label": l,
-    className: c,
-    children: o
-  }, b) => {
-    const D = K(), g = l ?? D.reorderableTable.dragHandleAriaLabel, { disabled: y, axis: m } = M(), { dragControls: s, dragListenerDisabled: f, moveItem: p } = j(), t = f && !y && !a, v = _(!1), d = (e) => {
-      if (!t) return;
-      v.current = !1;
-      const i = e.clientX, R = e.clientY, L = (G) => {
-        const T = Math.abs(G.clientX - i), X = Math.abs(G.clientY - R);
-        (T > N || X > N) && (v.current = !0);
-      }, C = () => {
-        document.removeEventListener("pointermove", L), document.removeEventListener("pointerup", C);
+    disabled: s = !1,
+    "aria-label": d,
+    className: b,
+    children: a
+  }, n) => {
+    const D = M(), x = d ?? D.reorderableTable.dragHandleAriaLabel, { disabled: I, axis: f } = _(), { dragControls: v, dragListenerDisabled: l, moveItem: c } = V(), e = l && !I && !s, m = X(!1), E = (o) => {
+      if (!e) return;
+      m.current = !1;
+      const h = o.clientX, i = o.clientY, R = (g) => {
+        const S = Math.abs(g.clientX - h), H = Math.abs(g.clientY - i);
+        (S > G || H > G) && (m.current = !0);
+      }, y = () => {
+        document.removeEventListener("pointermove", R), document.removeEventListener("pointerup", y);
       };
-      document.addEventListener("pointermove", L), document.addEventListener("pointerup", C), s.start(e);
-    }, w = (e) => {
-      v.current && (e.stopPropagation(), v.current = !1);
-    }, h = A(
-      (e) => {
-        if (!t) return;
-        const i = m === "y" ? "ArrowUp" : "ArrowLeft", R = m === "y" ? "ArrowDown" : "ArrowRight";
-        e.key === i ? (e.preventDefault(), p(-1)) : e.key === R && (e.preventDefault(), p(1));
+      document.addEventListener("pointermove", R), document.addEventListener("pointerup", y), v.start(o);
+    }, L = (o) => {
+      m.current && (o.stopPropagation(), m.current = !1);
+    }, p = N(
+      (o) => {
+        if (!e) return;
+        const h = f === "y" ? "ArrowUp" : "ArrowLeft", i = f === "y" ? "ArrowDown" : "ArrowRight";
+        o.key === h ? (o.preventDefault(), c(-1)) : o.key === i && (o.preventDefault(), c(1));
       },
-      [t, m, p]
-    ), n = {
-      "aria-label": g,
+      [e, f, c]
+    ), t = {
+      "aria-label": x,
       "aria-roledescription": "sortable",
-      onPointerDown: d,
-      onKeyDown: h,
-      onClick: w,
-      className: x(
+      onPointerDown: E,
+      onKeyDown: p,
+      onClick: L,
+      className: C(
         "touch-none select-none",
-        t && "cursor-grab active:cursor-grabbing",
-        !t && "cursor-default",
-        t && "focus-visible-default",
-        c
+        e && "cursor-grab active:cursor-grabbing",
+        !e && "cursor-default",
+        e && "focus-visible-default",
+        b
       )
     };
-    return r === "button" ? /* @__PURE__ */ u("button", { ref: b, type: "button", disabled: a, ...n, children: o }) : r === "div" ? /* @__PURE__ */ u(
+    return r === "button" ? /* @__PURE__ */ u("button", { ref: n, type: "button", disabled: s, ...t, children: a }) : r === "div" ? /* @__PURE__ */ u(
       "div",
       {
-        ref: b,
-        tabIndex: t ? 0 : void 0,
-        role: t ? "button" : void 0,
-        ...n,
-        children: o
+        ref: n,
+        tabIndex: e ? 0 : void 0,
+        role: e ? "button" : void 0,
+        ...t,
+        children: a
       }
     ) : /* @__PURE__ */ u(
       "span",
       {
-        ref: b,
-        tabIndex: t ? 0 : void 0,
-        role: t ? "button" : void 0,
-        ...n,
-        children: o
+        ref: n,
+        tabIndex: e ? 0 : void 0,
+        role: e ? "button" : void 0,
+        ...t,
+        children: a
       }
     );
   }
 );
-F.displayName = "ReorderableHandle";
-const J = ({ as: r = "li", className: a, children: l }, c) => {
-  const o = O[r];
-  return /* @__PURE__ */ u(o, { ref: c, layout: !0, role: "listitem", className: x(a), children: l });
-}, Q = I(J);
-Q.displayName = "ReorderableStaticItem";
+Q.displayName = "ReorderableHandle";
+const W = ({ as: r = "li", className: s, children: d }, b) => {
+  const a = Y[r];
+  return /* @__PURE__ */ u(a, { ref: b, layout: !0, role: "listitem", className: C(s), children: d });
+}, $ = A(W);
+$.displayName = "ReorderableStaticItem";
 export {
-  Z as ReorderableGroup,
-  F as ReorderableHandle,
-  B as ReorderableItem,
-  Q as ReorderableStaticItem,
-  M as useReorderableGroup,
-  j as useReorderableItem
+  q as ReorderableGroup,
+  Q as ReorderableHandle,
+  J as ReorderableItem,
+  $ as ReorderableStaticItem,
+  _ as useReorderableGroup,
+  V as useReorderableItem
 };

package/dist/components/Reorderable/Reorderable.stories.d.ts

@@ -10,5 +10,6 @@ export declare const HorizontalAxis: Story;
 export declare const TableRows: Story;
 export declare const ScrollableList: Story;
 export declare const ContentBlocks: Story;
+export declare const AnimatedItems: Story;
 export declare const StaticItem: Story;
 //# sourceMappingURL=Reorderable.stories.d.ts.map

package/dist/components/Reorderable/Reorderable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Reorderable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAW3D,OAAO,EACL,gBAAgB,EAIjB,MAAM,eAAe,CAAA;AAwFtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CA0FvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAU9C,eAAO,MAAM,OAAO,EAAE,KAiCrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAA;AASD,eAAO,MAAM,SAAS,EAAE,KA2FvB,CAAA;AAgBD,eAAO,MAAM,cAAc,EAAE,KAsC5B,CAAA;AAmBD,eAAO,MAAM,aAAa,EAAE,KAgD3B,CAAA;AA4BD,eAAO,MAAM,UAAU,EAAE,KAkDxB,CAAA"}
+{"version":3,"file":"Reorderable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAW3D,OAAO,EACL,gBAAgB,EAIjB,MAAM,eAAe,CAAA;AAwFtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAuEvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAU9C,eAAO,MAAM,OAAO,EAAE,KAiCrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAA;AASD,eAAO,MAAM,SAAS,EAAE,KA2FvB,CAAA;AAgBD,eAAO,MAAM,cAAc,EAAE,KAsC5B,CAAA;AAmBD,eAAO,MAAM,aAAa,EAAE,KAgD3B,CAAA;AAGD,eAAO,MAAM,aAAa,EAAE,KA+E3B,CAAA;AA4BD,eAAO,MAAM,UAAU,EAAE,KAkDxB,CAAA"}

package/dist/components/Reorderable/index.d.ts

@@ -1,2 +1,2 @@
-export { ReorderableGroup, ReorderableItem, ReorderableHandle, ReorderableStaticItem, useReorderableGroup, useReorderableItem, type ReorderableGroupProps, type ReorderableItemProps, type ReorderableHandleProps, type ReorderableStaticItemProps, } from './Reorderable';
+export * from './Reorderable';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Reorderable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,GAChC,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}