@quan-erp/shared-ui 1.0.11 → 1.1.1

package/dist/components/ui/collapsible.d.ts

@@ -1,6 +1,7 @@
+import * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-declare const Collapsible: import('react').ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import('react').RefAttributes<HTMLDivElement>>;
-declare const CollapsibleTrigger: import('react').ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
-declare const CollapsibleContent: import('react').ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const Collapsible: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
 //# sourceMappingURL=collapsible.d.ts.map

package/dist/components/ui/context-menu.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
-declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
 declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;

package/dist/components/ui/drawer.d.ts

@@ -4,9 +4,9 @@ declare const Drawer: {
     ({ shouldScaleBackground, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
     displayName: string;
 };
-declare const DrawerTrigger: React.ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerTrigger: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const DrawerPortal: typeof import('vaul').Portal;
-declare const DrawerClose: React.ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerClose: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-dialog').DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-dialog').DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DrawerHeader: {

package/dist/components/ui/dropdown-menu.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
-declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
 declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;

package/dist/components/ui/hover-card.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 declare const HoverCard: React.FC<HoverCardPrimitive.HoverCardProps>;
-declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const HoverCardTrigger: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { HoverCard, HoverCardTrigger, HoverCardContent };
 //# sourceMappingURL=hover-card.d.ts.map

package/dist/components/ui/navigation-menu.d.ts

@@ -6,7 +6,7 @@ declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenu
 declare const navigationMenuTriggerStyle: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 declare const NavigationMenuViewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const NavigationMenuIndicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, };

package/dist/components/ui/popover.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
-declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
 declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/components/ui/select.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
-declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/es/components/custom/confirm-dialog.js

@@ -1,5 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "../ui/alert-dialog.js";
+import "clsx";
+import "tailwind-merge";
+import { macrosSlot } from "../../lib/macros.js";
 import "react";
 import "react-dom/client";
 function ConfirmDialog({
@@ -8,16 +11,26 @@ function ConfirmDialog({
   onClose,
   onConfirm
 }) {
-  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange: (next) => !next && onClose(false), children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
-    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-      /* @__PURE__ */ jsx(AlertDialogTitle, { children: options.title ?? "Are you sure?" }),
-      /* @__PURE__ */ jsx(AlertDialogDescription, { children: options.description ?? "This action cannot be undone." })
+  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange: (next) => !next && onClose(false), children: /* @__PURE__ */ jsxs(AlertDialogContent, { ...macrosSlot("confirm-dialog"), children: [
+    /* @__PURE__ */ jsxs(AlertDialogHeader, { ...macrosSlot("confirm-dialog-header"), children: [
+      /* @__PURE__ */ jsx(AlertDialogTitle, { ...macrosSlot("confirm-dialog-title"), children: options.title ?? "Are you sure?" }),
+      /* @__PURE__ */ jsx(AlertDialogDescription, { ...macrosSlot("confirm-dialog-description"), children: options.description ?? "This action cannot be undone." })
     ] }),
-    /* @__PURE__ */ jsxs(AlertDialogFooter, { className: "shared:flex shared:gap-2 shared:flex-row shared:justify-end", children: [
-      /* @__PURE__ */ jsx(AlertDialogCancel, { variant: "secondary", className: "shared:self-end", onClick: () => onClose(false), children: options.cancelText ?? "Cancel" }),
+    /* @__PURE__ */ jsxs(AlertDialogFooter, { ...macrosSlot("confirm-dialog-footer"), className: "shared:flex shared:gap-2 shared:flex-row shared:justify-end", children: [
+      /* @__PURE__ */ jsx(
+        AlertDialogCancel,
+        {
+          ...macrosSlot("confirm-dialog-cancel"),
+          variant: "secondary",
+          className: "shared:self-end",
+          onClick: () => onClose(false),
+          children: options.cancelText ?? "Cancel"
+        }
+      ),
       /* @__PURE__ */ jsx(
         AlertDialogAction,
         {
+          ...macrosSlot("confirm-dialog-confirm"),
           onClick: () => {
             onClose(true);
             onConfirm();

package/dist/es/components/custom/dashboard.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
+import { macrosSlot } from "../../lib/macros.js";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { ApplicationTwo } from "@icon-park/react";
@@ -54,6 +55,7 @@ function DashboardItem({
       },
       style,
       "data-plugin": pluginName || BUILTIN_PLUGIN_NAME,
+      ...macrosSlot("dashboard-item"),
       className: cn("shared:w-full shared:flex shared:flex-col shared:group shared:bg-primary/10 shared:outline-2 shared:hover:p-1 shared:hover:outline-primary/40 shared:outline-transparent shared:rounded-3xl shared:cupertino-corner shared:overflow-hidden", isDragging ? "shared:overscroll-none shared:touch-none" : "shared:transition-all shared:duration-300", wapperClassName),
       children: [
         /* @__PURE__ */ jsxs(
@@ -61,6 +63,7 @@ function DashboardItem({
           {
             ...attributes,
             ...listeners,
+            ...macrosSlot("dashboard-item-drag-handle"),
             className: cn("shared:transition-all shared:duration-300 shared:cursor-grab shared:px-2 shared:py-2 shared:group-hover:px-2 shared:group-hover:py-2 shared:justify-between shared:font-bold shared:text-primary shared:text-sm shared:flex shared:items-center shared:gap-2 shared:overscroll-none shared:touch-none", titleClassName),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:gap-2", children: [
@@ -76,7 +79,7 @@ function DashboardItem({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { "data-plugin": pluginName, className: cn("shared:w-full shared:h-full shared:bg-background shared:rounded-2xl shared:border-2 shared:border-primary/10", className), children: visible && /* @__PURE__ */ jsx(ProtectedPage, { requiredApis: requiredApis || [], children }) })
+        /* @__PURE__ */ jsx("div", { "data-plugin": pluginName, ...macrosSlot("dashboard-item-content"), className: cn("shared:w-full shared:h-full shared:bg-background shared:rounded-2xl shared:border-2 shared:border-primary/10", className), children: visible && /* @__PURE__ */ jsx(ProtectedPage, { requiredApis: requiredApis || [], children }) })
       ]
     }
   );

package/dist/es/components/custom/data-table/cursor-based-pagination.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../../lib/utils.js";
+import { macrosSlot } from "../../../lib/macros.js";
 import "../../ui/accordion.js";
 import "../../ui/alert.js";
 import "../../ui/avatar.js";
@@ -19,7 +20,7 @@ import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
 import "../../ui/checkbox.js";
-import "@radix-ui/react-collapsible";
+import "../../ui/collapsible.js";
 import "../../ui/command.js";
 import "../../ui/context-menu.js";
 import "@radix-ui/react-dialog";
@@ -68,6 +69,7 @@ function CursorBasedPagination({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...macrosSlot("data-table-cursor-pagination"),
       className: cn(
         // Keep it flex-row always to prevent stacking
         "shared:border-border shared:bg-background/50 shared:mt-3 shared:flex shared:w-full shared:flex-row shared:items-center shared:justify-between shared:border-t shared:pt-3 shared:backdrop-blur-sm",

package/dist/es/components/custom/data-table/data-table-bulk-action-menu.js

@@ -9,6 +9,7 @@ import { Button } from "../../ui/button.js";
 import "react";
 import { Layers, X, Zap } from "lucide-react";
 import "react-day-picker";
+import { macrosSlot } from "../../../lib/macros.js";
 import { cn } from "../../../lib/utils.js";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
@@ -19,7 +20,7 @@ import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
 import "../../ui/checkbox.js";
-import "@radix-ui/react-collapsible";
+import "../../ui/collapsible.js";
 import "../../ui/command.js";
 import "../../ui/context-menu.js";
 import "@radix-ui/react-dialog";
@@ -62,6 +63,7 @@ function DataTableBulkActionMenu({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...macrosSlot("data-table-bulk-action-menu"),
       className: cn(
         // Ultra-compact height (h-12 = 48px)
         "shared:border-primary/20 shared:bg-primary/3 shared:relative shared:flex shared:min-h-12 shared:w-full shared:items-center shared:justify-between shared:gap-2 shared:rounded-xl shared:border shared:px-3 shared:py-1.5",
@@ -87,6 +89,7 @@ function DataTableBulkActionMenu({
             {
               variant: "ghost",
               size: "sm",
+              ...macrosSlot("data-table-bulk-clear"),
               onClick: onClear,
               className: "shared:text-muted-foreground hover:shared:bg-destructive/10 hover:shared:text-destructive shared:h-8 shared:gap-1.5 shared:rounded-lg shared:px-2 shared:text-[11px] shared:font-bold shared:transition-all",
               children: [

package/dist/es/components/custom/data-table/data-table-bulk-export.js

@@ -9,6 +9,7 @@ import { Button } from "../../ui/button.js";
 import "react";
 import "lucide-react";
 import "react-day-picker";
+import { macrosSlot } from "../../../lib/macros.js";
 import "clsx";
 import "tailwind-merge";
 import "../../ui/popover.js";
@@ -20,7 +21,7 @@ import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
 import "../../ui/checkbox.js";
-import "@radix-ui/react-collapsible";
+import "../../ui/collapsible.js";
 import "../../ui/command.js";
 import "../../ui/context-menu.js";
 import "@radix-ui/react-dialog";
@@ -65,6 +66,7 @@ function DataTableBulkExportButton({
     Button,
     {
       variant: "ghost",
+      ...macrosSlot("data-table-bulk-export"),
       className: "shared:h-8 shared:text-xs",
       onClick: () => exportToCSV(selectedData, filename),
       children: label

package/dist/es/components/custom/data-table/data-table-column-header.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDown, EyeOff } from "lucide-react";
 import "react";
 import { cn } from "../../../lib/utils.js";
+import { macrosSlot } from "../../../lib/macros.js";
 import "../../ui/accordion.js";
 import "../../ui/alert.js";
 import "../../ui/avatar.js";
@@ -19,7 +20,7 @@ import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
 import "../../ui/checkbox.js";
-import "@radix-ui/react-collapsible";
+import "../../ui/collapsible.js";
 import "../../ui/command.js";
 import "../../ui/context-menu.js";
 import "@radix-ui/react-dialog";
@@ -64,6 +65,7 @@ function DataTableColumnHeader({
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...macrosSlot("data-table-column-header"),
       className: cn("shared:flex shared:items-center shared:space-x-2 shared:whitespace-nowrap", className),
       children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
         /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -71,6 +73,7 @@ function DataTableColumnHeader({
           {
             variant: "ghost",
             size: "sm",
+            ...macrosSlot("data-table-column-header-trigger"),
             className: "data-[state=open]:shared:bg-accent shared:-ml-3 shared:h-8",
             children: [
               /* @__PURE__ */ jsx("span", { children: title }),

package/dist/es/components/custom/data-table/data-table-grid.js

@@ -11,6 +11,7 @@ import "../../ui/button-group.js";
 import "../../ui/button.js";
 import "lucide-react";
 import "react-day-picker";
+import { macrosSlot } from "../../../lib/macros.js";
 import { cn } from "../../../lib/utils.js";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
@@ -21,7 +22,7 @@ import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
 import "../../ui/checkbox.js";
-import "@radix-ui/react-collapsible";
+import "../../ui/collapsible.js";
 import "../../ui/command.js";
 import "../../ui/context-menu.js";
 import "@radix-ui/react-dialog";
@@ -69,6 +70,7 @@ function DataTableBodyRow({
   return /* @__PURE__ */ jsx(
     TableRow,
     {
+      ...macrosSlot("data-table-row"),
       className: cn(
         "shared:group shared:transition-colors",
         onRowClickFn && "shared:cursor-pointer",

package/dist/es/components/custom/data-table/data-table-list-view.js

@@ -3,6 +3,7 @@ import { flexRender } from "../../../node_modules/@tanstack/react-table/build/li
 import * as React from "react";
 import { groupTableRowsBy } from "./group-table-rows.js";
 import { cn } from "../../../lib/utils.js";
+import { macrosSlot } from "../../../lib/macros.js";
 function dataTableRowMemoPropsAreEqual(prev, next) {
   return prev.row.id === next.row.id && prev.row.original === next.row.original && prev.isSelected === next.isSelected && prev.onRowClickFn === next.onRowClickFn && prev.layoutKey === next.layoutKey;
 }
@@ -31,6 +32,7 @@ function DataCard({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...macrosSlot("data-table-card"),
       onClick: onRowClickFn ? handleClick : void 0,
       className: cn(
         "shared:group shared:border-border/40 shared:bg-card hover:shared:border-primary/40 shared:relative shared:flex shared:flex-col shared:rounded-xl shared:border shared:p-3 shared:shadow-sm shared:transition-all shared:duration-200 active:shared:scale-[0.98]",

package/dist/es/components/custom/data-table/data-table-pagination.js

@@ -12,6 +12,7 @@ import "../../ui/button-group.js";
 import "../../ui/button.js";
 import "lucide-react";
 import "react-day-picker";
+import { macrosSlot } from "../../../lib/macros.js";
 import { cn } from "../../../lib/utils.js";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
@@ -20,7 +21,7 @@ import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
 import "../../ui/checkbox.js";
-import "@radix-ui/react-collapsible";
+import "../../ui/collapsible.js";
 import "../../ui/command.js";
 import "../../ui/context-menu.js";
 import "@radix-ui/react-dialog";
@@ -76,6 +77,7 @@ function DataTablePagination({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...macrosSlot("data-table-pagination"),
       className: cn(
         // Forces flex-row on all screen sizes and prevents vertical stacking
         "shared:border-border shared:bg-background/50 shared:mt-3 shared:flex shared:w-full shared:flex-row shared:items-center shared:justify-between shared:border-t shared:px-4 shared:py-3 shared:backdrop-blur-sm",

package/dist/es/components/custom/data-table/data-table-toolbar.js

@@ -2,6 +2,7 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import React__default from "react";
 import { DataTableViewOptions } from "./data-table-view-options.js";
 import { cn } from "../../../lib/utils.js";
+import { macrosSlot } from "../../../lib/macros.js";
 import "../../ui/accordion.js";
 import "../../ui/alert.js";
 import "../../ui/avatar.js";
@@ -20,7 +21,7 @@ import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
 import "../../ui/checkbox.js";
-import "@radix-ui/react-collapsible";
+import "../../ui/collapsible.js";
 import "../../ui/command.js";
 import "../../ui/context-menu.js";
 import "@radix-ui/react-dialog";
@@ -105,6 +106,7 @@ function DataTableToolbar({
   return /* @__PURE__ */ jsxs(
     "header",
     {
+      ...macrosSlot("data-table-toolbar"),
       className: cn(
         "shared:flex shared:flex-row shared:items-center shared:justify-between shared:gap-4 shared:transition-all shared:duration-300 shared:ease-in-out",
         // When hidden: slide up and fade out

package/dist/es/components/custom/data-table/data-table-view-options.js

@@ -7,6 +7,7 @@ import { useMediaQuery } from "../../../hooks/use-mobile.js";
 import "uuid";
 import "@quan-erp/shared-frontend-core";
 import { cn } from "../../../lib/utils.js";
+import { macrosSlot } from "../../../lib/macros.js";
 import "../../ui/accordion.js";
 import "../../ui/alert.js";
 import "../../ui/avatar.js";
@@ -22,7 +23,7 @@ import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
 import { Checkbox } from "../../ui/checkbox.js";
-import "@radix-ui/react-collapsible";
+import "../../ui/collapsible.js";
 import "../../ui/command.js";
 import "../../ui/context-menu.js";
 import "@radix-ui/react-dialog";
@@ -156,6 +157,7 @@ function DataTableViewOptions({
       "button",
       {
         type: "button",
+        ...macrosSlot(`data-table-view-mode-${m.id}`),
         onPointerDown: (e) => e.preventDefault(),
         onClick: () => setViewMode(m.id),
         className: cn(
@@ -177,6 +179,7 @@ function DataTableViewOptions({
           "input",
           {
             placeholder: "Filter...",
+            ...macrosSlot("data-table-view-filter"),
             value: searchTerm,
             onChange: (e) => setSearchTerm(e.target.value),
             onPointerDown: (e) => e.stopPropagation(),
@@ -190,6 +193,7 @@ function DataTableViewOptions({
           variant: "ghost",
           size: "icon",
           type: "button",
+          ...macrosSlot("data-table-view-toggle-all"),
           onPointerDown: (e) => e.preventDefault(),
           onClick: toggleAll,
           className: "shared:h-8 shared:w-8",
@@ -203,6 +207,7 @@ function DataTableViewOptions({
     {
       variant: "outline",
       size: "sm",
+      ...macrosSlot("data-table-view-settings"),
       className: "shared:group shared:bg-background/50 shared:relative shared:ml-auto shared:flex shared:h-8 shared:gap-2 shared:border-dashed active:shared:scale-95",
       children: [
         /* @__PURE__ */ jsx(Settings2, { className: "shared:text-muted-foreground shared:size-4 shared:transition-transform shared:duration-700 group-hover:shared:rotate-180" }),
@@ -249,6 +254,7 @@ function ColumnRowItem({
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...macrosSlot("data-table-column-visibility"),
       className: cn(
         "shared:group shared:flex shared:h-9 shared:items-center shared:rounded-md shared:px-2",
         !isPinned && "shared:animate-in shared:slide-in-from-top-1 shared:fade-in"
@@ -291,6 +297,7 @@ function ColumnRowItem({
             "button",
             {
               type: "button",
+              ...macrosSlot("data-table-column-pin"),
               onPointerDown: (e) => {
                 e.preventDefault();
                 e.stopPropagation();

package/dist/es/components/custom/data-table/data-table.js

@@ -14,6 +14,7 @@ import "@quan-erp/shared-frontend-core";
 import { useScrollDirection } from "../../../hooks/use-scroll-direction.js";
 import { EmptyState } from "../empty-screen.js";
 import { cn } from "../../../lib/utils.js";
+import { macrosSlot } from "../../../lib/macros.js";
 import { PullToRefresh } from "../pull-to-refresh.js";
 import "../../ui/accordion.js";
 import "../../ui/alert.js";
@@ -31,7 +32,7 @@ import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
 import "../../ui/checkbox.js";
-import "@radix-ui/react-collapsible";
+import "../../ui/collapsible.js";
 import "../../ui/command.js";
 import "../../ui/context-menu.js";
 import "@radix-ui/react-dialog";
@@ -318,6 +319,7 @@ function DataTable({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...macrosSlot("data-table"),
       className: cn(
         "shared:flex shared:h-full shared:w-full shared:flex-col shared:overflow-hidden",
         isModal ? "lg:shared:p-3" : "",
@@ -406,7 +408,14 @@ function DataTable({
               value: rowsPerPageValue,
               onValueChange: handleRowsPerPageChange,
               children: [
-                /* @__PURE__ */ jsx(SelectTrigger, { className: "shared:h-8 shared:w-[120px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(
+                  SelectTrigger,
+                  {
+                    ...macrosSlot("data-table-page-size"),
+                    className: "shared:h-8 shared:w-[120px]",
+                    children: /* @__PURE__ */ jsx(SelectValue, {})
+                  }
+                ),
                 /* @__PURE__ */ jsxs(SelectContent, { children: [
                   DATA_TABLE_PAGE_SIZE_OPTIONS.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)),
                   /* @__PURE__ */ jsx(SelectItem, { value: "infinite", children: "Infinite" })

package/dist/es/components/custom/error-screen.js

@@ -19,7 +19,7 @@ import "@quan-erp/shared-frontend-core";
 import "../ui/carousel.js";
 import "../ui/chart.js";
 import "../ui/checkbox.js";
-import "@radix-ui/react-collapsible";
+import "../ui/collapsible.js";
 import "../ui/command.js";
 import "../ui/context-menu.js";
 import "@radix-ui/react-dialog";

package/dist/es/components/custom/floating-action-btn.js

@@ -5,6 +5,7 @@ import { useMobileBackDialog } from "../../hooks/use-mobile-back-dialog.js";
 import { useUserHandBehavior } from "../../hooks/use-user-hand-behavior.js";
 import { Portal } from "./portal.js";
 import { cn } from "../../lib/utils.js";
+import { macrosSlot } from "../../lib/macros.js";
 import { AnimatePresence } from "../../shared-ui/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
 import { motion } from "../../shared-ui/node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
 const FAB_BUTTON = "FAB_BUTTON";
@@ -95,6 +96,7 @@ function FloatingActionButton({
       "div",
       {
         "data-plugin": props.pluginName,
+        ...macrosSlot("floating-action-button"),
         className: cn(
           "shared:absolute shared:bottom-0 shared:right-0 shared:cupertino-corner shared:transition-all shared:duration-500 shared:ease-[cubic-bezier(0.34,1.56,0.64,1)] shared:overflow-hidden shared:w-[var(--fab-width)] shared:h-[var(--fab-height)] shared:opacity-[var(--fab-opacity)] shared:pointer-events-auto",
           adaptivePosition && props.adaptivePositionClassName ? props.adaptivePositionClassName(hand) : hand === "left" ? "shared:left-5" : "shared:right-5",
@@ -120,11 +122,19 @@ function FloatingActionButton({
 function FloatingButton({ children, onClick }) {
   const context = useContext(FloatingButtonContext);
   if (!context) throw new Error("FloatingButton must be inside FloatingActionButton");
-  return /* @__PURE__ */ jsx("div", { className: "shared:absolute shared:left-0 shared:top-0 shared:w-full shared:h-full shared:flex shared:items-center shared:justify-center", onClick: (event) => {
-    if (context.disabled) return;
-    if (context.expandable) context.setExpand(true);
-    onClick?.(event);
-  }, children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...macrosSlot("floating-action-button-trigger"),
+      className: "shared:absolute shared:left-0 shared:top-0 shared:w-full shared:h-full shared:flex shared:items-center shared:justify-center",
+      onClick: (event) => {
+        if (context.disabled) return;
+        if (context.expandable) context.setExpand(true);
+        onClick?.(event);
+      },
+      children
+    }
+  );
 }
 FloatingButton.typeTag = FAB_BUTTON;
 function FloatingContainer({
@@ -177,6 +187,7 @@ function FloatingContainer({
         e.stopPropagation();
         close(e);
       },
+      ...macrosSlot("floating-action-button-menu"),
       className: cn(
         "shared:grid shared:grid-cols-2 shared:grid-rows-2 shared:gap-2 shared:absolute shared:inset-0 shared:top-0 shared:left-0 shared:p-3 shared:w-full shared:h-full",
         !context.expand && "shared:pointer-events-none",

package/dist/es/components/custom/menu-tab.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
+import { macrosSlot } from "../../lib/macros.js";
 import { useLazyLocaleTranslation, useLocaleTranslation } from "../../locale/locale.js";
 const MENU_TAB_CLASSNAME = "shared:data-[active]:text-white shared:md:text-[1rem] shared:text-[1.2rem] shared:group-data-[type=bottom-nav]:text-2xl shared:group-data-[type=bottom-nav]:[&>svg]:text-2xl";
 function MenuTab({ pluginName, icon, labelKey, locale, isBeta = false }) {
@@ -18,25 +19,33 @@ function MenuTabLazy({ pluginName, icon, labelKey, locale, isBeta = false }) {
   return /* @__PURE__ */ jsx(MenuTabContent, { pluginName, icon, label: l.get(labelKey, labelKey), isBeta });
 }
 function MenuTabContent({ pluginName, icon, label, isBeta = false }) {
-  return /* @__PURE__ */ jsxs("div", { "data-plugin": pluginName, className: cn(
-    "shared:flex shared:items-center shared:justify-between shared:w-full shared:min-h-max shared:gap-2 shared:overflow-hidden",
-    "shared:group-data-[bottom-nav-selected=true]:text-primary"
-  ), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn(
-      "shared:flex shared:items-center shared:gap-2 shared:w-full shared:overflow-hidden",
-      "shared:group-data-[type=bottom-nav]:flex-col"
-    ), children: [
-      icon,
-      /* @__PURE__ */ jsx("span", { className: cn(
-        "shared:text-ellipsis shared:overflow-hidden",
-        "shared:group-data-[type=bottom-nav]:line-clamp-1 shared:group-data-[type=bottom-nav]:text-[0.6rem] shared:group-data-[type=bottom-nav]:text-center"
-      ), children: label })
-    ] }),
-    isBeta && /* @__PURE__ */ jsx("div", { className: "shared:min-w-max shared:px-2 shared:py-1 shared:text-white shared:rounded-full shared:text-[0.5rem] shared:italic shared:bg-linear-to-r shared:from-purple-400 shared:to-red-400 shared:group-data-[type=bottom-nav]:hidden", children: "Beta" })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-plugin": pluginName,
+      ...macrosSlot("menu-tab"),
+      className: cn(
+        "shared:flex shared:items-center shared:justify-between shared:w-full shared:min-h-max shared:gap-2 shared:overflow-hidden",
+        "shared:group-data-[bottom-nav-selected=true]:text-primary"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn(
+          "shared:flex shared:items-center shared:gap-2 shared:w-full shared:overflow-hidden",
+          "shared:group-data-[type=bottom-nav]:flex-col"
+        ), children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { className: cn(
+            "shared:text-ellipsis shared:overflow-hidden",
+            "shared:group-data-[type=bottom-nav]:line-clamp-1 shared:group-data-[type=bottom-nav]:text-[0.6rem] shared:group-data-[type=bottom-nav]:text-center"
+          ), children: label })
+        ] }),
+        isBeta && /* @__PURE__ */ jsx("div", { className: "shared:min-w-max shared:px-2 shared:py-1 shared:text-white shared:rounded-full shared:text-[0.5rem] shared:italic shared:bg-linear-to-r shared:from-purple-400 shared:to-red-400 shared:group-data-[type=bottom-nav]:hidden", children: "Beta" })
+      ]
+    }
+  );
 }
 function IconParkMenuTabIcon({ icon: Icon, className, pluginName, ...props }) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, theme: "outline", "data-plugin": pluginName, className: cn(MENU_TAB_CLASSNAME, className) });
+  return /* @__PURE__ */ jsx(Icon, { ...props, ...macrosSlot("menu-tab-icon"), theme: "outline", "data-plugin": pluginName, className: cn(MENU_TAB_CLASSNAME, className) });
 }
 export {
   IconParkMenuTabIcon,

package/dist/es/components/custom/page.js

@@ -4,14 +4,15 @@ import { motion } from "motion/react";
 import { PluginAPI } from "@quan-erp/shared-frontend-core";
 import { BUILTIN_PLUGIN_NAME } from "../../common/common.js";
 import { cn } from "../../lib/utils.js";
+import { macrosSlot } from "../../lib/macros.js";
 function PageTitle({ children }) {
-  return /* @__PURE__ */ jsx("h1", { className: "shared:md:text-2xl shared:text-xl shared:font-bold", children });
+  return /* @__PURE__ */ jsx("h1", { ...macrosSlot("page-title"), className: "shared:md:text-2xl shared:text-xl shared:font-bold", children });
 }
 function PageContent({ children }) {
   return children;
 }
 function PageNavTitle({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "shared:font-bold", children });
+  return /* @__PURE__ */ jsx("div", { ...macrosSlot("page-nav-title"), className: "shared:font-bold", children });
 }
 function Page({
   pluginName,
@@ -89,6 +90,7 @@ function Page({
         ease: "easeOut"
       },
       "data-plugin": pluginName,
+      ...macrosSlot("page"),
       className: cn(`shared:flex shared:flex-col shared:md:p-6 shared:p-2 shared:gap-[1rem] shared:will-change-transform`, className),
       children: [
         title,