@vkzstudio/muza-ui 1.0.7 → 1.0.8

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+declare const chipVariants: (props?: ({
+    checked?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the Chip component.
+ * Extends standard button HTML attributes, excluding 'onChange' and 'disabled' to use custom implementations.
+ */
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled'> {
+    /**
+     * The checked state of the chip.
+     * When true, the chip displays a filled check icon and active styling.
+     */
+    checked: boolean;
+    /**
+     * Callback function triggered when the chip's checked state changes.
+     * @param checked - The new checked state
+     */
+    onCheckedChange: (checked: boolean) => void;
+    /**
+     * Whether the chip is disabled.
+     * When true, prevents interaction and applies disabled styling.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * A selectable chip component that acts as a toggleable filter or option.
+ * Displays as a pill-shaped button with an icon indicating its checked state.
+ *
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = React.useState(false)
+ *
+ * <Chip checked={checked} onCheckedChange={setChecked}>
+ *   Option Label
+ * </Chip>
+ * ```
+ */
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
+export { Chip, chipVariants };
+//# sourceMappingURL=Chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,QAAA,MAAM,YAAY;;;8EA0CjB,CAAA;AAED;;;GAGG;AACH,MAAM,WAAW,SACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,UAAU,CACxB;IACD;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,IAAI,qFA6CT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/Chip/Chip.js

@@ -0,0 +1,98 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import * as l from "react";
+import { cva as m } from "class-variance-authority";
+import { EmptyCircle as f } from "../Icons/CustomIcons.js";
+import { Typography as p } from "../Typography/Typography.js";
+import { cn as x } from "../../utils/cn.js";
+import { CheckCircleBold as b } from "@solar-icons/react-perf";
+const v = m(
+  [
+    "inline-flex items-center gap-xs rounded-full px-md py-sm",
+    "cursor-pointer transition-colors",
+    "focus-visible-default",
+    "[&>svg]:size-icon-small [&>svg]:shrink-0",
+    "border-1 border-stroke-base-primary"
+  ],
+  {
+    variants: {
+      checked: {
+        true: [
+          "bg-surface-brand-primary",
+          "border-surface-brand-primary",
+          "text-text-invert-def",
+          "[&>svg]:text-icon-invert-def"
+        ],
+        false: [
+          "text-text-dark-secondary",
+          "[&>svg]:text-icon-dark-secondary-def",
+          "hover:text-text-brand-hover",
+          "hover:bg-surface-brand-brand-tertiary",
+          "hover:[&>svg]:text-icon-brand-hover"
+        ]
+      },
+      disabled: {
+        true: [
+          "cursor-not-allowed",
+          "text-text-dark-disabled",
+          "[&>svg]:text-icon-dark-tertiary",
+          "hover:bg-transparent",
+          "hover:text-text-dark-disabled",
+          "hover:[&>svg]:text-icon-dark-tertiary"
+        ],
+        false: ""
+      }
+    },
+    defaultVariants: {
+      checked: !1,
+      disabled: !1
+    }
+  }
+), h = l.forwardRef(
+  ({
+    className: a,
+    checked: r,
+    onCheckedChange: o,
+    disabled: e = !1,
+    children: i,
+    ...s
+  }, n) => {
+    const d = () => {
+      e || o(!r);
+    };
+    return /* @__PURE__ */ c(
+      "button",
+      {
+        ref: n,
+        type: "button",
+        role: "checkbox",
+        "aria-checked": r,
+        "aria-disabled": e,
+        disabled: e,
+        "data-state": r ? "checked" : "unchecked",
+        className: x(v({ checked: r, disabled: e, className: a })),
+        onClick: d,
+        ...s,
+        children: [
+          r ? /* @__PURE__ */ t(b, {}) : /* @__PURE__ */ t(f, {}),
+          /* @__PURE__ */ t(
+            p,
+            {
+              component: "span",
+              variant: "body",
+              weight: "medium",
+              size: "base",
+              fixY: !0,
+              className: "text-inherit",
+              children: i
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+h.displayName = "Chip";
+export {
+  h as Chip,
+  v as chipVariants
+};

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Chip } from './Chip';
+declare const meta: Meta<typeof Chip>;
+export default meta;
+type Story = StoryObj<typeof Chip>;
+export declare const Default: Story;
+export declare const AllStates: Story;
+export declare const ChipGroup: Story;
+//# sourceMappingURL=Chip.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA0C3B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAmDvB,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './Chip';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/dist/components/DataTable/DataTable.d.ts

@@ -1,17 +1,23 @@
 import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const dataTableCellVariants: (props?: ({
+    variant?: "default" | "white" | null | undefined;
+    position?: "first" | "last" | "middle" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface DataTableColumn<T> {
     dataKey: keyof T;
     title: ReactNode;
     className?: string;
     lineClamp?: boolean | 1 | 2;
-    render?: (value: T[keyof T], rowData: T, rowIndex: number) => ReactNode;
+    render?: (value: T[keyof T], rowData: T, rowIndex: number, disabled?: boolean) => ReactNode;
 }
-export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElement>, 'children'> {
+export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElement>, 'children'>, VariantProps<typeof dataTableCellVariants> {
     data: T[];
     columns: DataTableColumn<T>[];
     showHeader?: boolean;
     className?: string;
+    disabled?: boolean;
 }
-declare const DataTable: <T>({ data, columns, showHeader, className, ...props }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
-export { DataTable };
+declare const DataTable: <T>({ data, columns, showHeader, className, variant, disabled, ...props }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { DataTable, dataTableCellVariants };
 //# sourceMappingURL=DataTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,KAAK,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B,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,cAAc,CAAC,CAAC,CAC/B,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,SAAS,GAAI,CAAC,EAAG,oDAMpB,cAAc,CAAC,CAAC,CAAC,4CA8EnB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,qBAAqB;;;8EAmB1B,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,KAAK,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EACjB,OAAO,EAAE,CAAC,EACV,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE,OAAO,KACf,SAAS,CAAA;CACf;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,CAC/B,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EAC9D,YAAY,CAAC,OAAO,qBAAqB,CAAC;IAC5C,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,SAAS,GAAI,CAAC,EAAG,uEAQpB,cAAc,CAAC,CAAC,CAAC,4CAyFnB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/components/DataTable/DataTable.js

@@ -1,73 +1,101 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
 import "react";
-import { typographyVariants as b, Typography as y } from "../Typography/Typography.js";
-import { cn as s } from "../../utils/cn.js";
-const u = ({
-  data: d,
-  columns: i,
-  showHeader: p = !0,
-  className: m,
-  ...o
-}) => /* @__PURE__ */ r("div", { className: "w-full overflow-x-auto overflow-y-hidden", children: /* @__PURE__ */ h(
+import { cva as f } from "class-variance-authority";
+import { typographyVariants as h, Typography as y } from "../Typography/Typography.js";
+import { cn as i } from "../../utils/cn.js";
+const u = f(
+  "h-comp-table-h border-y border-stroke-base-secondary px-2xl transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-surface-base-primary",
+        white: "bg-surface-base-secondary"
+      },
+      position: {
+        first: "rounded-l-xl border-l",
+        middle: "",
+        last: "rounded-r-xl border-r"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      position: "middle"
+    }
+  }
+), C = ({
+  data: n,
+  columns: s,
+  showHeader: o = !0,
+  className: p,
+  variant: m = "default",
+  disabled: d = !1,
+  ...c
+}) => /* @__PURE__ */ r("div", { className: "w-full overflow-x-auto overflow-y-hidden", children: /* @__PURE__ */ b(
   "table",
   {
-    className: s(
-      "-my-sm w-full border-separate border-spacing-y-sm",
-      m
+    className: i(
+      "-my-md w-full border-separate border-spacing-y-md",
+      p
     ),
-    ...o,
+    ...c,
     children: [
-      p && /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: i.map((a, t) => /* @__PURE__ */ r(
+      o && /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: s.map((a, t) => /* @__PURE__ */ r(
         "th",
         {
-          className: s(
-            b({
+          className: i(
+            h({
               size: "sm",
               uppercase: !0,
               variant: "body",
               weight: "medium"
             }),
             "px-comp-table-p text-left text-text-dark-secondary",
+            {
+              "text-text-dark-disabled": d
+            },
             a.className
           ),
           children: a.title
         },
         t
       )) }) }),
-      /* @__PURE__ */ r("tbody", { children: d.map((a, t) => /* @__PURE__ */ r("tr", { className: "group", children: i.map((e, l) => {
-        const n = l === 0, c = l === i.length - 1;
-        return /* @__PURE__ */ r(
-          "td",
-          {
-            className: s(
-              "h-comp-table-h border-y border-stroke-base-secondary bg-surface-base-primary px-2xl transition-colors",
-              {
-                "rounded-l-lg border-l": n,
-                "rounded-r-lg border-r": c
-              },
-              e.className
-            ),
-            children: e.render ? e.render(a[e.dataKey], a, t) : /* @__PURE__ */ r(
-              y,
-              {
-                variant: "body",
-                size: "base",
-                weight: "medium",
-                component: "span",
-                className: s({
-                  "line-clamp-1": e.lineClamp === !0 || e.lineClamp === 1,
-                  "line-clamp-2": e.lineClamp === 2
-                }),
-                children: a[e.dataKey]
-              }
-            )
-          },
-          l
-        );
-      }) }, t)) })
+      /* @__PURE__ */ r("tbody", { children: n.map((a, t) => /* @__PURE__ */ r("tr", { className: "group", children: s.map((e, l) => /* @__PURE__ */ r(
+        "td",
+        {
+          className: i(
+            u({
+              variant: m,
+              position: l === 0 ? "first" : l === s.length - 1 ? "last" : "middle"
+            }),
+            e.className
+          ),
+          children: e.render ? e.render(
+            a[e.dataKey],
+            a,
+            t,
+            d
+          ) : /* @__PURE__ */ r(
+            y,
+            {
+              variant: "body",
+              size: "base",
+              weight: "medium",
+              component: "span",
+              className: i({
+                "line-clamp-1": e.lineClamp === !0 || e.lineClamp === 1,
+                "line-clamp-2": e.lineClamp === 2,
+                "text-text-dark-disabled": d
+              }),
+              children: a[e.dataKey]
+            }
+          )
+        },
+        l
+      )) }, t)) })
     ]
   }
 ) });
 export {
-  u as DataTable
+  C as DataTable,
+  u as dataTableCellVariants
 };

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

@@ -7,4 +7,8 @@ export declare const SimpleTable: Story;
 export declare const WithCustomContent: Story;
 export declare const HiddenHeader: Story;
 export declare const WithEditableFields: Story;
+export declare const WhiteVariant: Story;
+export declare const Disabled: Story;
+export declare const WhiteVariantDisabled: Story;
+export declare const AllVariants: Story;
 //# sourceMappingURL=DataTable.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAO3D,QAAA,MAAM,IAAI,EAAE,IA4CX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAsFrB,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAaD,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAA;AA0CD,eAAO,MAAM,iBAAiB,EAAE,KAW/B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAA;AASD,eAAO,MAAM,kBAAkB,EAAE,KAmIhC,CAAA"}
+{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAO3D,QAAA,MAAM,IAAI,EAAE,IA2DX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAsFrB,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAaD,eAAO,MAAM,WAAW,EAAE,KAazB,CAAA;AA0CD,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAA;AASD,eAAO,MAAM,kBAAkB,EAAE,KAmIhC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAYlC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAqEzB,CAAA"}

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

@@ -1,2 +1,2 @@
-export { DataTable, type DataTableProps, type DataTableColumn, } from './DataTable';
+export { DataTable, dataTableCellVariants, type DataTableProps, type DataTableColumn, } from './DataTable';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,eAAe,GACrB,MAAM,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,eAAe,GACrB,MAAM,aAAa,CAAA"}

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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"}