@vkzstudio/muza-ui 1.0.6 → 1.0.8

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

@@ -0,0 +1,100 @@
+import { CSSProperties, ForwardedRef, ReactElement, ReactNode } from 'react';
+import { DragControls, TargetAndTransition } from 'motion/react';
+interface ReorderableGroupContextValue<T = unknown> {
+    disabled?: boolean;
+    values?: T[];
+    onReorder?: (newOrder: T[]) => void;
+    axis?: 'x' | 'y';
+}
+declare const useReorderableGroup: <T>() => ReorderableGroupContextValue<T>;
+interface ReorderableItemContextValue {
+    dragControls: DragControls;
+    dragListenerDisabled: boolean;
+    moveItem: (direction: -1 | 1) => void;
+}
+declare const useReorderableItem: () => ReorderableItemContextValue;
+type ReorderableGroupElement = 'ul' | 'ol' | 'div';
+export interface ReorderableGroupProps<T> {
+    /** Items array to reorder */
+    values: T[];
+    /** Callback when items are reordered */
+    onReorder: (newOrder: T[]) => void;
+    /** Drag axis - defaults to 'y' */
+    axis?: 'x' | 'y';
+    /** HTML element type - defaults to 'ul' */
+    as?: ReorderableGroupElement;
+    /** Disable all reordering */
+    disabled?: boolean;
+    /** Enable layout scroll measurement for scrollable containers */
+    layoutScroll?: boolean;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children: ReactNode;
+}
+declare const ReorderableGroup: <T>(props: ReorderableGroupProps<T> & {
+    ref?: ForwardedRef<HTMLUListElement>;
+}) => ReactElement;
+type ReorderableItemElement = 'li' | 'div' | 'tr';
+export interface ReorderableItemProps<T> {
+    /** Item identifier - must match an item in the parent group's values array */
+    value: T;
+    /** HTML element type - defaults to 'li' */
+    as?: ReorderableItemElement;
+    /** Disable this item from being dragged */
+    disabled?: boolean;
+    /** Restrict drag to handle only - when true, item can only be dragged via ReorderableHandle */
+    dragListenerDisabled?: boolean;
+    /** Additional styles to apply while dragging (merged with default whileDrag styles) */
+    whileDrag?: TargetAndTransition;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children: ReactNode;
+}
+declare const ReorderableItem: <T>(props: ReorderableItemProps<T> & {
+    ref?: ForwardedRef<HTMLLIElement>;
+}) => ReactElement;
+type ReorderableHandleElement = 'button' | 'div' | 'span';
+export interface ReorderableHandleProps {
+    /** HTML element type - defaults to 'button' */
+    as?: ReorderableHandleElement;
+    /** Disable the handle */
+    disabled?: boolean;
+    /** Accessibility label - defaults to 'Drag to reorder' */
+    'aria-label'?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children?: ReactNode;
+}
+declare const ReorderableHandle: import('react').ForwardRefExoticComponent<ReorderableHandleProps & import('react').RefAttributes<HTMLButtonElement>>;
+type ReorderableStaticItemElement = 'li' | 'div' | 'tr';
+type ReorderableStaticItemElementMap = {
+    li: HTMLLIElement;
+    div: HTMLDivElement;
+    tr: HTMLTableRowElement;
+};
+/**
+ * Props for 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.
+ */
+export interface ReorderableStaticItemProps<T extends ReorderableStaticItemElement = 'li'> {
+    /** HTML element type - defaults to 'li' */
+    as?: T;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children: ReactNode;
+}
+declare const ReorderableStaticItem: <T extends ReorderableStaticItemElement = "li">(props: ReorderableStaticItemProps<T> & {
+    ref?: ForwardedRef<ReorderableStaticItemElementMap[T]>;
+}) => ReactElement;
+export { ReorderableGroup, ReorderableItem, ReorderableHandle, ReorderableStaticItem, useReorderableGroup, useReorderableItem, };
+//# sourceMappingURL=Reorderable.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,197 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as y, 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 I } 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);
+  if (!r)
+    throw new Error("useReorderableItem must be used within a ReorderableItem");
+  return r;
+}, V = ({
+  values: r,
+  onReorder: s,
+  axis: l = "y",
+  as: c = "ol",
+  disabled: o = !1,
+  layoutScroll: b = !1,
+  style: w,
+  className: D,
+  children: g
+}, n) => {
+  const m = K(), f = {
+    disabled: o,
+    values: r,
+    onReorder: o ? void 0 : s,
+    axis: l
+  };
+  return /* @__PURE__ */ u(
+    k.Provider,
+    {
+      value: f,
+      children: /* @__PURE__ */ u(
+        U,
+        {
+          ref: n,
+          axis: l,
+          values: r,
+          onReorder: o ? () => {
+          } : s,
+          as: c,
+          layoutScroll: b,
+          style: w,
+          role: "list",
+          "aria-label": m.reorderableTable.listAriaLabel,
+          className: I(D),
+          children: g
+        }
+      )
+    }
+  );
+}, Z = y(V);
+Z.displayName = "ReorderableGroup";
+const q = ({
+  value: r,
+  as: s = "li",
+  disabled: l = !1,
+  dragListenerDisabled: c = !1,
+  whileDrag: o,
+  className: b,
+  children: w
+}, D) => {
+  const {
+    disabled: g,
+    values: n,
+    onReorder: m,
+    axis: f
+  } = M(), v = S(), t = l || g, a = !t && !c, R = A(
+    (d) => {
+      if (!n || !m) return;
+      const i = n.indexOf(r);
+      if (i === -1) return;
+      const e = i + d;
+      if (e < 0 || e >= n.length) return;
+      const p = [...n];
+      p.splice(i, 1), p.splice(e, 0, r), m(p);
+    },
+    [n, m, r]
+  ), x = A(
+    (d) => {
+      if (!a) return;
+      const i = f === "y" ? "ArrowUp" : "ArrowLeft", e = f === "y" ? "ArrowDown" : "ArrowRight";
+      d.key === i ? (d.preventDefault(), R(-1)) : d.key === e && (d.preventDefault(), R(1));
+    },
+    [a, f, R]
+  );
+  return /* @__PURE__ */ u(
+    H.Provider,
+    {
+      value: { dragControls: v, dragListenerDisabled: c, moveItem: R },
+      children: /* @__PURE__ */ u(
+        Y,
+        {
+          ref: D,
+          value: r,
+          as: s,
+          dragControls: v,
+          dragListener: a,
+          tabIndex: a ? 0 : void 0,
+          role: "listitem",
+          "aria-disabled": t,
+          onKeyDown: x,
+          className: I(
+            a && "cursor-grab active:cursor-grabbing",
+            a && "focus-visible-default",
+            b
+          ),
+          whileDrag: {
+            zIndex: z,
+            position: "relative",
+            ...o
+          },
+          children: w
+        }
+      )
+    }
+  );
+}, B = y(q);
+B.displayName = "ReorderableItem";
+const F = y(
+  ({
+    as: r = "button",
+    disabled: s = !1,
+    "aria-label": l,
+    className: c,
+    children: o
+  }, b) => {
+    const w = K(), D = l ?? w.reorderableTable.dragHandleAriaLabel, { disabled: g, axis: n } = M(), { dragControls: m, dragListenerDisabled: f, moveItem: v } = j(), t = f && !g && !s, a = _(!1), R = (e) => {
+      if (!t) return;
+      a.current = !1;
+      const p = e.clientX, h = e.clientY, L = (G) => {
+        const T = Math.abs(G.clientX - p), X = Math.abs(G.clientY - h);
+        (T > N || X > N) && (a.current = !0);
+      }, C = () => {
+        document.removeEventListener("pointermove", L), document.removeEventListener("pointerup", C);
+      };
+      document.addEventListener("pointermove", L), document.addEventListener("pointerup", C), m.start(e);
+    }, x = (e) => {
+      a.current && (e.stopPropagation(), a.current = !1);
+    }, d = A(
+      (e) => {
+        if (!t) return;
+        const p = n === "y" ? "ArrowUp" : "ArrowLeft", h = n === "y" ? "ArrowDown" : "ArrowRight";
+        e.key === p ? (e.preventDefault(), v(-1)) : e.key === h && (e.preventDefault(), v(1));
+      },
+      [t, n, v]
+    ), i = {
+      "aria-label": D,
+      "aria-roledescription": "sortable",
+      onPointerDown: R,
+      onKeyDown: d,
+      onClick: x,
+      className: I(
+        "touch-none select-none",
+        t && "cursor-grab active:cursor-grabbing",
+        !t && "cursor-default",
+        t && "focus-visible-default",
+        c
+      )
+    };
+    return r === "button" ? /* @__PURE__ */ u("button", { ref: b, type: "button", disabled: s, ...i, children: o }) : r === "div" ? /* @__PURE__ */ u(
+      "div",
+      {
+        ref: b,
+        tabIndex: t ? 0 : void 0,
+        role: t ? "button" : void 0,
+        ...i,
+        children: o
+      }
+    ) : /* @__PURE__ */ u(
+      "span",
+      {
+        ref: b,
+        tabIndex: t ? 0 : void 0,
+        role: t ? "button" : void 0,
+        ...i,
+        children: o
+      }
+    );
+  }
+);
+F.displayName = "ReorderableHandle";
+const J = ({ as: r = "li", className: s, children: l }, c) => {
+  const o = O[r];
+  return /* @__PURE__ */ u(o, { ref: c, layout: !0, role: "listitem", className: I(s), children: l });
+}, Q = y(J);
+Q.displayName = "ReorderableStaticItem";
+export {
+  Z as ReorderableGroup,
+  F as ReorderableHandle,
+  B as ReorderableItem,
+  Q as ReorderableStaticItem,
+  M as useReorderableGroup,
+  j as useReorderableItem
+};

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

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ReorderableGroup } from './Reorderable';
+declare const meta: Meta<typeof ReorderableGroup>;
+export default meta;
+type Story = StoryObj<typeof ReorderableGroup>;
+export declare const Default: Story;
+export declare const WithHandle: Story;
+export declare const Disabled: Story;
+export declare const HorizontalAxis: Story;
+export declare const TableRows: Story;
+export declare const ScrollableList: Story;
+export declare const ContentBlocks: Story;
+export declare const StaticItem: Story;
+//# sourceMappingURL=Reorderable.stories.d.ts.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +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"}

package/dist/components/ReorderableTable/ReorderableTable.d.ts

@@ -0,0 +1,40 @@
+import { ForwardedRef, ReactNode } from 'react';
+export interface ReorderableTableColumn<T> {
+    /** Key from data object */
+    dataKey: keyof T;
+    /** Column header text */
+    title: ReactNode;
+    /** CSS classes for cells in this column */
+    className?: string;
+    /** Text truncation: true/1 = line-clamp-1, 2 = line-clamp-2 */
+    lineClamp?: boolean | 1 | 2;
+    /** Custom cell rendering */
+    render?: (value: T[keyof T], rowData: T, rowIndex: number) => ReactNode;
+}
+export interface ReorderableTableProps<T extends {
+    id: string | number;
+}> extends Omit<React.HTMLAttributes<HTMLTableElement>, 'children'> {
+    /** Array of data objects - each must have an `id` field */
+    data: T[];
+    /** Callback when rows are reordered */
+    onReorder: (newOrder: T[]) => void;
+    /** Column definitions */
+    columns: ReorderableTableColumn<T>[];
+    /** Show table header - defaults to false */
+    showHeader?: boolean;
+    /** Disable all reordering */
+    disabled?: boolean;
+    /** Function to determine if a specific row is disabled */
+    isRowDisabled?: (rowData: T, rowIndex: number) => boolean;
+    /** Custom CSS classes for table container */
+    className?: string;
+    /** Show/hide drag handle column with animation - defaults to true */
+    isMovable?: boolean;
+}
+declare const ReorderableTable: <T extends {
+    id: string | number;
+}>(props: ReorderableTableProps<T> & {
+    ref?: ForwardedRef<HTMLTableElement>;
+}) => React.ReactElement;
+export { ReorderableTable };
+//# sourceMappingURL=ReorderableTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReorderableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAWrE,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,yBAAyB;IACzB,KAAK,EAAE,SAAS,CAAA;IAChB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B,4BAA4B;IAC5B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAA;CACxE;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CACtE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,2DAA2D;IAC3D,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,uCAAuC;IACvC,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IAClC,yBAAyB;IACzB,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAA;IACpC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAkND,QAAA,MAAM,gBAAgB,EAAwC,CAC5D,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAEjC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACvE,KAAK,CAAC,YAAY,CACtB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ReorderableTable/ReorderableTable.js

@@ -0,0 +1,175 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as I } from "react";
+import { typographyVariants as T, Typography as w } from "../Typography/Typography.js";
+import { ReorderableGroup as A, ReorderableItem as C, ReorderableHandle as H } from "../Reorderable/Reorderable.js";
+import { Reorder as O } from "../Icons/CustomIcons.js";
+import { cn as s } from "../../utils/cn.js";
+import { motion as n } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+const p = 72, u = 20, k = 24, E = 4, D = ({
+  data: b,
+  onReorder: N,
+  columns: o,
+  showHeader: x = !1,
+  disabled: h = !1,
+  isRowDisabled: l,
+  className: y,
+  isMovable: i = !0,
+  ...g
+}, L) => /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ m(
+  "table",
+  {
+    ref: L,
+    className: s(
+      "-my-sm w-full border-separate border-spacing-y-sm",
+      y
+    ),
+    ...g,
+    children: [
+      x && /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ m("tr", { children: [
+        o.map((r, d) => /* @__PURE__ */ e(
+          "th",
+          {
+            className: s(
+              T({
+                size: "sm",
+                uppercase: !0,
+                variant: "body",
+                weight: "medium"
+              }),
+              "px-comp-table-p text-left text-text-dark-secondary",
+              r.className
+            ),
+            children: r.title
+          },
+          d
+        )),
+        /* @__PURE__ */ e(
+          n.th,
+          {
+            initial: !1,
+            animate: {
+              width: i ? p : u
+            },
+            transition: { duration: 0.3, ease: "easeInOut" },
+            className: "overflow-hidden"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ e(
+        A,
+        {
+          values: b,
+          onReorder: N,
+          disabled: h,
+          as: "div",
+          className: "contents",
+          children: b.map((r, d) => {
+            const _ = (l == null ? void 0 : l(r, d)) ?? !1, t = h || _;
+            return /* @__PURE__ */ m(
+              C,
+              {
+                value: r,
+                as: "tr",
+                disabled: t,
+                dragListenerDisabled: !0,
+                whileDrag: t ? void 0 : { boxShadow: "0 8px 32px 0 rgba(59, 18, 107, 0.2)" },
+                className: "group rounded-2xl",
+                children: [
+                  o.map((a, c) => {
+                    const v = c === 0, f = c === o.length - 1;
+                    return /* @__PURE__ */ e(
+                      n.td,
+                      {
+                        initial: !1,
+                        animate: f ? {
+                          paddingRight: i ? k : E
+                        } : void 0,
+                        transition: { duration: 0.3, ease: "easeInOut" },
+                        className: s(
+                          "h-comp-table-h border-y border-stroke-base-secondary bg-surface-base-primary align-middle",
+                          f ? "pl-2xl" : "px-2xl",
+                          {
+                            "rounded-l-xl border-l": v,
+                            "group-focus-within:border-icon-brand-focus group-hover:border-icon-brand-hover": !t
+                          },
+                          a.className
+                        ),
+                        children: a.render ? a.render(
+                          r[a.dataKey],
+                          r,
+                          d
+                        ) : /* @__PURE__ */ e(
+                          w,
+                          {
+                            variant: "body",
+                            size: "base",
+                            weight: "regular",
+                            component: "span",
+                            className: s(
+                              t && "text-text-dark-disabled",
+                              {
+                                "line-clamp-1": a.lineClamp === !0 || a.lineClamp === 1,
+                                "line-clamp-2": a.lineClamp === 2
+                              }
+                            ),
+                            children: r[a.dataKey]
+                          }
+                        )
+                      },
+                      c
+                    );
+                  }),
+                  /* @__PURE__ */ e(
+                    n.td,
+                    {
+                      initial: !1,
+                      animate: {
+                        width: i ? p : u
+                      },
+                      transition: { duration: 0.3, ease: "easeInOut" },
+                      className: s(
+                        // min-w-[20px] matches HANDLE_COLUMN_MIN_WIDTH constant (Figma design)
+                        "h-comp-table-h min-w-[20px] rounded-r-xl border-y border-r border-stroke-base-secondary bg-surface-base-primary align-middle",
+                        {
+                          "group-focus-within:border-icon-brand-focus group-hover:border-icon-brand-hover": !t
+                        }
+                      ),
+                      children: /* @__PURE__ */ e(
+                        n.div,
+                        {
+                          initial: !1,
+                          animate: {
+                            opacity: i ? 1 : 0,
+                            width: i ? p : 0
+                          },
+                          transition: { duration: 0.3, ease: "easeInOut" },
+                          className: "flex h-full items-center justify-center overflow-hidden border-l border-stroke-base-secondary",
+                          children: /* @__PURE__ */ e(
+                            H,
+                            {
+                              disabled: !i || t,
+                              className: s(
+                                "flex h-comp-button-h-sm w-comp-button-w-sm items-center justify-center focus-visible-default",
+                                t ? "text-text-dark-disabled" : "text-text-brand-def"
+                              ),
+                              children: /* @__PURE__ */ e(O, { className: "size-icon-default" })
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              r.id
+            );
+          })
+        }
+      )
+    ]
+  }
+) }), R = I(D);
+R.displayName = "ReorderableTable";
+export {
+  R as ReorderableTable
+};

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

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ReorderableTable } from './ReorderableTable';
+interface IBenefit {
+    id: string;
+    name: string;
+    image: string;
+    lastEdited: string;
+    text: string;
+    status: 'active' | 'inactive';
+}
+declare const meta: Meta<typeof ReorderableTable>;
+export default meta;
+type Story = StoryObj<typeof ReorderableTable<IBenefit>>;
+export declare const Default: Story;
+export declare const WithoutHeader: Story;
+export declare const WithDisabledRow: Story;
+export declare const FullyDisabled: Story;
+//# sourceMappingURL=ReorderableTable.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReorderableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAM3D,OAAO,EACL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAA;AAE3B,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;CAC9B;AAyCD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CA6DvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,OAAO,EAAE,KAkHrB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAsG3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA2G7B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkG3B,CAAA"}

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

@@ -0,0 +1,2 @@
+export { ReorderableTable, type ReorderableTableColumn, type ReorderableTableProps, } from './ReorderableTable';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAA"}

package/dist/components/Searchbar/Searchbar.d.ts

@@ -9,6 +9,6 @@ export interface SearchbarProps extends Omit<InputProps, 'type' | 'onSubmit' | '
     searchButtonAriaLabel?: string;
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
 }
-declare const Searchbar: ({ className, error, size, showButtons, clearButtonAriaLabel, searchButtonAriaLabel, disabled, value, defaultValue, name, placeholder, onChange, onSubmit, ...props }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
+declare const Searchbar: ({ className, error, size, showButtons, clearButtonAriaLabel: clearButtonAriaLabelProp, searchButtonAriaLabel: searchButtonAriaLabelProp, disabled, value, defaultValue, name, placeholder, onChange, onSubmit, ...props }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
 export { Searchbar };
 //# sourceMappingURL=Searchbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Searchbar.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAEjD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,UAAU,EACV,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,QAAQ,CAC1D;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;CACzD;AAED,QAAA,MAAM,SAAS,GAAI,sKAehB,cAAc,4CAiGhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"Searchbar.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAEjD,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,UAAU,EACV,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,QAAQ,CAC1D;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;CACzD;AAED,QAAA,MAAM,SAAS,GAAI,2NAehB,cAAc,4CAuGhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}