@morze/ui 0.2.5 → 0.2.7

package/dist/index.d.cts

@@ -164,6 +164,12 @@ declare function Progress({ className, value, max, tone, ...props }: React.Compo
 declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof Avatar$1.Root> & {
     size?: 'sm' | 'md' | 'lg';
 }): React.JSX.Element;
+/**
+ * Lays avatars in an overlapping stack. Each avatar gets a ring in the
+ * surface colour so the overlap reads as depth; set `--mz-avatar-ring` on the
+ * group when it sits on something other than a card.
+ */
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof Avatar$1.Image>): React.JSX.Element;
 declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof Avatar$1.Fallback>): React.JSX.Element;
 
@@ -532,6 +538,12 @@ type DataTableProps<T> = {
     /** localStorage key for widths, order, visibility and pinning. */
     persistKey?: string | null;
     toolbar?: React.ReactNode;
+    /**
+     * `false` drops the Columns button — for a table whose layout the host
+     * fixes, or drives from its own UI. The layout itself still works: `layout`,
+     * `onLayoutChange` and `persistKey` are unaffected.
+     */
+    columnManager?: boolean;
     /**
      * Stretches the columns to fill the container on mount and on container
      * resize, so there is no dead space at the right edge. Columns the user
@@ -562,7 +574,7 @@ type DataTableProps<T> = {
     caption?: string;
     className?: string;
 };
-declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, rowClassName, rowProps, layout: controlledLayout, onLayoutChange, persistKey, toolbar, autoFit, density, stickyHeader, emptyState, pageSizeOptions, pagination, onLoadMore, hasMore, autoLoadMore, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
+declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, rowClassName, rowProps, layout: controlledLayout, onLayoutChange, persistKey, toolbar, columnManager, autoFit, density, stickyHeader, emptyState, pageSizeOptions, pagination, onLoadMore, hasMore, autoLoadMore, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
 
 declare function DataTablePagination({ query, total, rowsOnPage, pageSizeOptions, labels: labelsProp, locale, onQueryChange, }: {
     query: DataTableQuery;
@@ -584,7 +596,12 @@ type Props$1<T> = {
     layout: ColumnLayout;
     onToggleHidden: (id: string) => void;
     onSetPinned: (id: string, side: 'left' | 'right' | undefined) => void;
-    onMove: (id: string, delta: number) => void;
+    /**
+     * Unused since the arrows started moving a column past its neighbour in the
+     * same pin group, which `onMoveTo` already expresses. Kept so a host that
+     * mounts this component directly still type-checks.
+     */
+    onMove?: (id: string, delta: number) => void;
     onMoveTo: (id: string, targetId: string) => void;
     onReset: () => void;
     labels?: Partial<DataTableLabels>;
@@ -593,8 +610,16 @@ type Props$1<T> = {
  * Reordering lives here rather than on the header itself: dragging a header
  * would fight the resize handle, and a list gives keyboard users real controls
  * instead of a drag-only affordance.
+ *
+ * The list is grouped the way the table paints — pinned left, then loose, then
+ * pinned right — because it used to show the raw `layout.order` instead. A
+ * column dragged to the top of that list landed second in the table, behind
+ * whatever was pinned, and moving a column past a pinned neighbour changed the
+ * order without changing anything on screen. Both read as a broken reorder.
+ * Moves therefore stay inside a column's own group; crossing between them is
+ * what the pin button is for.
  */
-declare function ColumnManager<T>({ columns, layout, onToggleHidden, onSetPinned, onMove, onMoveTo, onReset, labels: labelsProp, }: Props$1<T>): React.JSX.Element;
+declare function ColumnManager<T>({ columns, layout, onToggleHidden, onSetPinned, onMoveTo, onReset, labels: labelsProp, }: Props$1<T>): React.JSX.Element;
 
 type Props = {
     columnLabel: string;
@@ -704,4 +729,4 @@ declare function pageCount(total: number | undefined, pageSize: number): number;
 declare function serializeSort(sort: DataTableSort[]): string;
 declare function parseSort(raw: string | null): DataTableSort[];
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, ColumnFilter, type ColumnFilterDef, type ColumnLayout, ColumnManager, type CustomFilterContext, DataTable, type DataTableColumn, type DataTableFilters, DataTableLabels, DataTablePagination, type DataTableProps, type DataTableQuery, type DataTableSort, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EditableDef, Field, FieldError, FieldHint, FilterChip, type FilterValue, Input, type InputProps, Label, type MorzeTheme, MorzeThemeProvider, type MorzeThemeProviderProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, type RowAttributes, type RowSelectionState, type SavedView, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionDef, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPanel, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDir, Spinner, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, type Tone, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSavedViewsOptions, type UseTableQueryOptions, activeFilters, badgeVariants, buttonVariants, cn, emptyQuery, isFilterActive, pageCount, parseSort, serializeSort, setFilter, sortStateOf, toggleSort, toggleVariants, useColumnLayout, useIsMobile, useMorzeTheme, useRowSelection, useSavedViews, useSidebar, useTableQuery };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, ColumnFilter, type ColumnFilterDef, type ColumnLayout, ColumnManager, type CustomFilterContext, DataTable, type DataTableColumn, type DataTableFilters, DataTableLabels, DataTablePagination, type DataTableProps, type DataTableQuery, type DataTableSort, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EditableDef, Field, FieldError, FieldHint, FilterChip, type FilterValue, Input, type InputProps, Label, type MorzeTheme, MorzeThemeProvider, type MorzeThemeProviderProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, type RowAttributes, type RowSelectionState, type SavedView, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionDef, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPanel, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDir, Spinner, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, type Tone, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSavedViewsOptions, type UseTableQueryOptions, activeFilters, badgeVariants, buttonVariants, cn, emptyQuery, isFilterActive, pageCount, parseSort, serializeSort, setFilter, sortStateOf, toggleSort, toggleVariants, useColumnLayout, useIsMobile, useMorzeTheme, useRowSelection, useSavedViews, useSidebar, useTableQuery };

package/dist/index.d.ts

@@ -164,6 +164,12 @@ declare function Progress({ className, value, max, tone, ...props }: React.Compo
 declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof Avatar$1.Root> & {
     size?: 'sm' | 'md' | 'lg';
 }): React.JSX.Element;
+/**
+ * Lays avatars in an overlapping stack. Each avatar gets a ring in the
+ * surface colour so the overlap reads as depth; set `--mz-avatar-ring` on the
+ * group when it sits on something other than a card.
+ */
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof Avatar$1.Image>): React.JSX.Element;
 declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof Avatar$1.Fallback>): React.JSX.Element;
 
@@ -532,6 +538,12 @@ type DataTableProps<T> = {
     /** localStorage key for widths, order, visibility and pinning. */
     persistKey?: string | null;
     toolbar?: React.ReactNode;
+    /**
+     * `false` drops the Columns button — for a table whose layout the host
+     * fixes, or drives from its own UI. The layout itself still works: `layout`,
+     * `onLayoutChange` and `persistKey` are unaffected.
+     */
+    columnManager?: boolean;
     /**
      * Stretches the columns to fill the container on mount and on container
      * resize, so there is no dead space at the right edge. Columns the user
@@ -562,7 +574,7 @@ type DataTableProps<T> = {
     caption?: string;
     className?: string;
 };
-declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, rowClassName, rowProps, layout: controlledLayout, onLayoutChange, persistKey, toolbar, autoFit, density, stickyHeader, emptyState, pageSizeOptions, pagination, onLoadMore, hasMore, autoLoadMore, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
+declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, rowClassName, rowProps, layout: controlledLayout, onLayoutChange, persistKey, toolbar, columnManager, autoFit, density, stickyHeader, emptyState, pageSizeOptions, pagination, onLoadMore, hasMore, autoLoadMore, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
 
 declare function DataTablePagination({ query, total, rowsOnPage, pageSizeOptions, labels: labelsProp, locale, onQueryChange, }: {
     query: DataTableQuery;
@@ -584,7 +596,12 @@ type Props$1<T> = {
     layout: ColumnLayout;
     onToggleHidden: (id: string) => void;
     onSetPinned: (id: string, side: 'left' | 'right' | undefined) => void;
-    onMove: (id: string, delta: number) => void;
+    /**
+     * Unused since the arrows started moving a column past its neighbour in the
+     * same pin group, which `onMoveTo` already expresses. Kept so a host that
+     * mounts this component directly still type-checks.
+     */
+    onMove?: (id: string, delta: number) => void;
     onMoveTo: (id: string, targetId: string) => void;
     onReset: () => void;
     labels?: Partial<DataTableLabels>;
@@ -593,8 +610,16 @@ type Props$1<T> = {
  * Reordering lives here rather than on the header itself: dragging a header
  * would fight the resize handle, and a list gives keyboard users real controls
  * instead of a drag-only affordance.
+ *
+ * The list is grouped the way the table paints — pinned left, then loose, then
+ * pinned right — because it used to show the raw `layout.order` instead. A
+ * column dragged to the top of that list landed second in the table, behind
+ * whatever was pinned, and moving a column past a pinned neighbour changed the
+ * order without changing anything on screen. Both read as a broken reorder.
+ * Moves therefore stay inside a column's own group; crossing between them is
+ * what the pin button is for.
  */
-declare function ColumnManager<T>({ columns, layout, onToggleHidden, onSetPinned, onMove, onMoveTo, onReset, labels: labelsProp, }: Props$1<T>): React.JSX.Element;
+declare function ColumnManager<T>({ columns, layout, onToggleHidden, onSetPinned, onMoveTo, onReset, labels: labelsProp, }: Props$1<T>): React.JSX.Element;
 
 type Props = {
     columnLabel: string;
@@ -704,4 +729,4 @@ declare function pageCount(total: number | undefined, pageSize: number): number;
 declare function serializeSort(sort: DataTableSort[]): string;
 declare function parseSort(raw: string | null): DataTableSort[];
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, ColumnFilter, type ColumnFilterDef, type ColumnLayout, ColumnManager, type CustomFilterContext, DataTable, type DataTableColumn, type DataTableFilters, DataTableLabels, DataTablePagination, type DataTableProps, type DataTableQuery, type DataTableSort, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EditableDef, Field, FieldError, FieldHint, FilterChip, type FilterValue, Input, type InputProps, Label, type MorzeTheme, MorzeThemeProvider, type MorzeThemeProviderProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, type RowAttributes, type RowSelectionState, type SavedView, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionDef, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPanel, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDir, Spinner, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, type Tone, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSavedViewsOptions, type UseTableQueryOptions, activeFilters, badgeVariants, buttonVariants, cn, emptyQuery, isFilterActive, pageCount, parseSort, serializeSort, setFilter, sortStateOf, toggleSort, toggleVariants, useColumnLayout, useIsMobile, useMorzeTheme, useRowSelection, useSavedViews, useSidebar, useTableQuery };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, ColumnFilter, type ColumnFilterDef, type ColumnLayout, ColumnManager, type CustomFilterContext, DataTable, type DataTableColumn, type DataTableFilters, DataTableLabels, DataTablePagination, type DataTableProps, type DataTableQuery, type DataTableSort, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EditableDef, Field, FieldError, FieldHint, FilterChip, type FilterValue, Input, type InputProps, Label, type MorzeTheme, MorzeThemeProvider, type MorzeThemeProviderProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, type RowAttributes, type RowSelectionState, type SavedView, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionDef, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPanel, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDir, Spinner, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, type Tone, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSavedViewsOptions, type UseTableQueryOptions, activeFilters, badgeVariants, buttonVariants, cn, emptyQuery, isFilterActive, pageCount, parseSort, serializeSort, setFilter, sortStateOf, toggleSort, toggleVariants, useColumnLayout, useIsMobile, useMorzeTheme, useRowSelection, useSavedViews, useSidebar, useTableQuery };

package/dist/index.js

@@ -138,8 +138,8 @@ var ArrowUpIcon = icon(/* @__PURE__ */ jsx("path", { d: "M12 19V5m-7 7 7-7 7 7"
 var ArrowDownIcon = icon(/* @__PURE__ */ jsx("path", { d: "M12 5v14m7-7-7 7-7-7" }));
 var SortIcon = icon(
   /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("path", { d: "m7 15 3 3 3-3", opacity: "0.9" }),
-    /* @__PURE__ */ jsx("path", { d: "m7 9 3-3 3 3", opacity: "0.9" })
+    /* @__PURE__ */ jsx("path", { d: "m8 10 4-4 4 4" }),
+    /* @__PURE__ */ jsx("path", { d: "m8 14 4 4 4-4" })
   ] })
 );
 var FilterIcon = icon(/* @__PURE__ */ jsx("path", { d: "M4 5h16l-6.5 7.5V19l-3 2v-8.5L4 5Z" }));
@@ -159,7 +159,13 @@ var GripIcon = icon(
     /* @__PURE__ */ jsx("circle", { cx: "15", cy: "17", r: "1.4", fill: "currentColor" })
   ] })
 );
-var PinIcon = icon(/* @__PURE__ */ jsx("path", { d: "M15 3 21 9l-4 1-4 4-1 5-6-6 5-1 4-4 1-4Z" }));
+var PinIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 4h6v5l3 4v2H6v-2l3-4V4Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 4h8" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 15v5" })
+  ] })
+);
 var EyeIcon = icon(
   /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }),
@@ -888,6 +894,9 @@ function Avatar({
     }
   );
 }
+function AvatarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "avatar-group", role: "group", className: cn("mz-avatar-group", className), ...props });
+}
 function AvatarImage({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     Avatar$1.Image,
@@ -2079,26 +2088,53 @@ function FilterChip({
     /* @__PURE__ */ jsx("button", { type: "button", onClick: onClear, "aria-label": clearLabel, className: "mz-focusable", children: "\xD7" })
   ] });
 }
+function nameOf(column, declaredIndex) {
+  if (column.label?.trim()) return column.label;
+  if (typeof column.header === "string" && column.header.trim()) return column.header;
+  return `#${declaredIndex + 1}`;
+}
 function ColumnManager({
   columns,
   layout,
   onToggleHidden,
   onSetPinned,
-  onMove,
   onMoveTo,
   onReset,
   labels: labelsProp
 }) {
   const labels = resolveLabels(labelsProp);
   const [dragging, setDragging] = React39.useState(null);
-  const byId = React39.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
-  const ordered = layout.order.map((id) => byId.get(id)).filter((c) => Boolean(c));
+  const [dropTarget, setDropTarget] = React39.useState(null);
+  const entries = React39.useMemo(() => {
+    const byId = new Map(columns.map((c, index) => [c.id, { column: c, declaredIndex: index }]));
+    const ordered = layout.order.map((id) => byId.get(id)).filter((e) => Boolean(e));
+    const side = (id) => layout.pinned[id];
+    const groups = ["left", void 0, "right"];
+    return groups.flatMap((group) => {
+      const inGroup = ordered.filter((e) => side(e.column.id) === group);
+      return inGroup.map((entry, indexInGroup) => ({
+        ...entry,
+        side: group,
+        indexInGroup,
+        groupSize: inGroup.length,
+        previous: inGroup[indexInGroup - 1]?.column.id,
+        next: inGroup[indexInGroup + 1]?.column.id,
+        name: nameOf(entry.column, entry.declaredIndex)
+      }));
+    });
+  }, [columns, layout]);
+  const sideOf = (id) => layout.pinned[id];
+  const canDrop = (targetId) => Boolean(dragging) && dragging !== targetId && sideOf(dragging) === sideOf(targetId);
+  const endDrag = () => {
+    setDragging(null);
+    setDropTarget(null);
+  };
   const hiddenCount = layout.hidden.length;
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", children: [
       /* @__PURE__ */ jsx(ColumnsIcon, {}),
       labels.columns,
-      hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: "mz-dt__count", children: ordered.length - hiddenCount }) : null
+      hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: "mz-dt__count", children: entries.length - hiddenCount }) : null
     ] }) }),
     /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "mz-dt__columns", children: [
       /* @__PURE__ */ jsxs("div", { className: "mz-dt__columns-head", children: [
@@ -2106,35 +2142,60 @@ function ColumnManager({
         /* @__PURE__ */ jsx(Button, { variant: "link", size: "xs", onClick: onReset, children: labels.reset })
       ] }),
       /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsx("ul", { className: "mz-dt__columns-list", children: ordered.map((column, index) => {
+      /* @__PURE__ */ jsx("ul", { className: "mz-dt__columns-list", children: entries.map((entry) => {
+        const column = entry.column;
         const hidden = layout.hidden.includes(column.id);
-        const pinned = layout.pinned[column.id];
-        const label = column.label ?? (typeof column.header === "string" ? column.header : column.id);
+        const pinned = entry.side;
+        const name = entry.name;
+        const pinTitle = pinned === "left" ? labels.pinnedLeft : pinned === "right" ? labels.pinnedRight : labels.notPinned;
         return /* @__PURE__ */ jsxs(
           "li",
           {
             className: "mz-dt__columns-item",
             "data-dragging": dragging === column.id || void 0,
+            "data-drop": dropTarget === column.id || void 0,
+            "data-pinned": pinned,
             draggable: true,
-            onDragStart: () => setDragging(column.id),
-            onDragEnd: () => setDragging(null),
-            onDragOver: (event) => event.preventDefault(),
-            onDrop: () => {
-              if (dragging && dragging !== column.id) onMoveTo(dragging, column.id);
-              setDragging(null);
+            onDragStart: (event) => {
+              if (event.target.closest(".mz-dt__columns-controls")) {
+                event.preventDefault();
+                return;
+              }
+              setDragging(column.id);
+              event.dataTransfer.effectAllowed = "move";
+              try {
+                event.dataTransfer.setData("text/plain", column.id);
+              } catch {
+              }
+            },
+            onDragEnd: endDrag,
+            onDragOver: (event) => {
+              if (!canDrop(column.id)) {
+                event.dataTransfer.dropEffect = "none";
+                return;
+              }
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "move";
+              setDropTarget(column.id);
+            },
+            onDragLeave: () => setDropTarget((c) => c === column.id ? null : c),
+            onDrop: (event) => {
+              event.preventDefault();
+              if (canDrop(column.id)) onMoveTo(dragging, column.id);
+              endDrag();
             },
             children: [
               /* @__PURE__ */ jsx("span", { className: "mz-dt__columns-grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx(GripIcon, {}) }),
-              /* @__PURE__ */ jsx("span", { className: "mz-dt__columns-label", children: label }),
-              /* @__PURE__ */ jsxs("div", { className: "mz-dt__columns-controls", children: [
+              /* @__PURE__ */ jsx("span", { className: "mz-dt__columns-label", children: name }),
+              /* @__PURE__ */ jsxs("div", { className: "mz-dt__columns-controls", draggable: false, children: [
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     type: "button",
                     className: "mz-dt__icon-btn mz-focusable",
-                    disabled: index === 0,
-                    onClick: () => onMove(column.id, -1),
-                    "aria-label": labels.moveUp(label),
+                    disabled: !entry.previous,
+                    onClick: () => entry.previous && onMoveTo(column.id, entry.previous),
+                    "aria-label": labels.moveUp(name),
                     children: "\u2191"
                   }
                 ),
@@ -2143,9 +2204,9 @@ function ColumnManager({
                   {
                     type: "button",
                     className: "mz-dt__icon-btn mz-focusable",
-                    disabled: index === ordered.length - 1,
-                    onClick: () => onMove(column.id, 1),
-                    "aria-label": labels.moveDown(label),
+                    disabled: !entry.next,
+                    onClick: () => entry.next && onMoveTo(column.id, entry.next),
+                    "aria-label": labels.moveDown(name),
                     children: "\u2193"
                   }
                 ),
@@ -2153,14 +2214,12 @@ function ColumnManager({
                   "button",
                   {
                     type: "button",
-                    className: "mz-dt__icon-btn mz-focusable",
+                    className: "mz-dt__icon-btn mz-dt__pin mz-focusable",
                     "data-active": pinned ? true : void 0,
+                    "data-pinned": pinned,
                     onClick: () => onSetPinned(column.id, pinned === "left" ? "right" : pinned === "right" ? void 0 : "left"),
-                    "aria-label": labels.pinning(
-                      label,
-                      pinned === "left" ? labels.pinnedLeft : pinned === "right" ? labels.pinnedRight : labels.notPinned
-                    ),
-                    title: pinned === "left" ? labels.pinnedLeft : pinned === "right" ? labels.pinnedRight : labels.notPinned,
+                    "aria-label": labels.pinning(name, pinTitle),
+                    title: pinTitle,
                     children: /* @__PURE__ */ jsx(PinIcon, {})
                   }
                 ),
@@ -2171,7 +2230,7 @@ function ColumnManager({
                     className: "mz-dt__icon-btn mz-focusable",
                     disabled: column.hideable === false,
                     onClick: () => onToggleHidden(column.id),
-                    "aria-label": hidden ? labels.show(label) : labels.hide(label),
+                    "aria-label": hidden ? labels.show(name) : labels.hide(name),
                     children: hidden ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
                   }
                 )
@@ -2624,6 +2683,7 @@ function DataTable({
   onLayoutChange,
   persistKey = null,
   toolbar,
+  columnManager = true,
   autoFit = true,
   density = "normal",
   stickyHeader = true,
@@ -2652,7 +2712,6 @@ function DataTable({
     setWidth,
     toggleHidden,
     setPinned,
-    move,
     moveTo,
     reset,
     fitTo
@@ -2884,22 +2943,25 @@ function DataTable({
       className: cn("mz-dt", className),
       style: widthVars,
       children: [
-        (toolbar || chips.length > 0 || columns.some((c) => c.hideable !== false)) && /* @__PURE__ */ jsxs("div", { className: "mz-dt__toolbar", children: [
-          /* @__PURE__ */ jsx("div", { className: "mz-dt__toolbar-main", children: toolbar }),
-          /* @__PURE__ */ jsx("div", { className: "mz-dt__toolbar-side", children: /* @__PURE__ */ jsx(
-            ColumnManager,
-            {
-              columns,
-              layout,
-              labels: labelsProp,
-              onToggleHidden: toggleHidden,
-              onSetPinned: setPinned,
-              onMove: move,
-              onMoveTo: moveTo,
-              onReset: reset
-            }
-          ) })
-        ] }),
+        (() => {
+          const showManager = columnManager && columns.some((c) => c.hideable !== false);
+          if (!toolbar && chips.length === 0 && !showManager) return null;
+          return /* @__PURE__ */ jsxs("div", { className: "mz-dt__toolbar", children: [
+            /* @__PURE__ */ jsx("div", { className: "mz-dt__toolbar-main", children: toolbar }),
+            showManager && /* @__PURE__ */ jsx("div", { className: "mz-dt__toolbar-side", children: /* @__PURE__ */ jsx(
+              ColumnManager,
+              {
+                columns,
+                layout,
+                labels: labelsProp,
+                onToggleHidden: toggleHidden,
+                onSetPinned: setPinned,
+                onMoveTo: moveTo,
+                onReset: reset
+              }
+            ) })
+          ] });
+        })(),
         chips.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mz-dt__chips", children: [
           chips.map(([id, value]) => /* @__PURE__ */ jsx(
             FilterChip,
@@ -3237,6 +3299,6 @@ function useSavedViews({
   };
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColumnFilter, ColumnManager, DataTable, DataTablePagination, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldError, FieldHint, FilterChip, Input, Label, MorzeThemeProvider, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPanel, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, activeFilters, badgeVariants, buttonVariants, cn, defaultDataTableLabels, emptyQuery, isFilterActive, pageCount, parseSort, resolveLabels, serializeSort, setFilter, sortStateOf, toggleSort, toggleVariants, useColumnLayout, useIsMobile, useMorzeTheme, useRowSelection, useSavedViews, useSidebar, useTableQuery };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColumnFilter, ColumnManager, DataTable, DataTablePagination, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldError, FieldHint, FilterChip, Input, Label, MorzeThemeProvider, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPanel, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, activeFilters, badgeVariants, buttonVariants, cn, defaultDataTableLabels, emptyQuery, isFilterActive, pageCount, parseSort, resolveLabels, serializeSort, setFilter, sortStateOf, toggleSort, toggleVariants, useColumnLayout, useIsMobile, useMorzeTheme, useRowSelection, useSavedViews, useSidebar, useTableQuery };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map