@quan-erp/shared-ui 1.0.10 → 1.1.0

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

@@ -1,59 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { PluginAPI } from "@quan-erp/shared-frontend-core";
-import "@icon-park/react";
-import "../ui/accordion.js";
-import "../ui/alert.js";
-import "../ui/avatar.js";
-import "../ui/badge.js";
-import "../ui/breadcrumb.js";
-import "../ui/button-group.js";
-import "../ui/button.js";
-import "react";
-import "lucide-react";
-import "react-day-picker";
-import "clsx";
-import "tailwind-merge";
-import "../ui/popover.js";
-import "../ui/drawer.js";
-import "../ui/select.js";
-import "uuid";
-import "../ui/carousel.js";
-import "../ui/chart.js";
-import "../ui/checkbox.js";
-import "@radix-ui/react-collapsible";
-import "../ui/command.js";
-import "../ui/context-menu.js";
-import "@radix-ui/react-dialog";
-import "../ui/dropdown-menu.js";
-import "../ui/field.js";
-import "../ui/form.js";
-import "../ui/hover-card.js";
-import "../ui/input-group.js";
-import "../ui/input-otp.js";
-import "../ui/input.js";
-import "../ui/item.js";
-import "@radix-ui/react-label";
-import "../ui/menubar.js";
-import "../ui/navigation-menu.js";
-import "../ui/pagination.js";
-import "../ui/progress.js";
-import "../ui/radio-group.js";
-import "react-resizable-panels";
-import "../ui/scroll-area.js";
-import "@radix-ui/react-separator";
-import "../ui/sidebar.js";
-import "../ui/slider.js";
-import "next-themes";
-import "sonner";
-import "../ui/spinner.js";
-import "../ui/switch.js";
-import "../ui/table.js";
-import "../ui/tabs.js";
-import "../ui/textarea.js";
-import "../ui/toggle-group.js";
-import "../ui/toggle.js";
-import "@radix-ui/react-tooltip";
-import "@radix-ui/react-alert-dialog";
 function Protected(props) {
   const ProtectedComponent = PluginAPI.use("builtin", "Protected");
   return /* @__PURE__ */ jsx(ProtectedComponent, { ...props });

package/dist/es/components/custom/pull-to-refresh.js

@@ -10,6 +10,7 @@ import "../ui/button-group.js";
 import "../ui/button.js";
 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 { Vibration } from "@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";
@@ -319,9 +320,9 @@ const PullToRefresh = React__default.memo(({
     startDrag(e.pageX, e.pageY, e.target);
   };
   if (disabled) {
-    return /* @__PURE__ */ jsx("div", { className, children });
+    return /* @__PURE__ */ jsx("div", { className, ...macrosSlot("pull-to-refresh"), children });
   }
-  return /* @__PURE__ */ jsxs("div", { className: `shared:relative shared:overflow-hidden shared:w-full shared:h-full shared:select-none ${className}`, "data-vaul-no-drag": true, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `shared:relative shared:overflow-hidden shared:w-full shared:h-full shared:select-none ${className}`, "data-vaul-no-drag": true, ...macrosSlot("pull-to-refresh"), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -361,6 +362,7 @@ const PullToRefresh = React__default.memo(({
       "div",
       {
         ref: containerRef,
+        ...macrosSlot("pull-to-refresh-content"),
         onTouchStart: handleTouchStart,
         onMouseDown: handleMouseDown,
         className: `shared:overflow-y-auto shared:w-full shared:h-full shared:scrollbar-thin shared:will-change-transform`,

package/dist/es/components/custom/responsive-dialog.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 { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger } from "../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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger } from "../ui/dialog.js";
@@ -92,61 +93,61 @@ function ResponsiveDialog({
   const type = isMobile ? "mobile" : "desktop";
   useMobileBackDialog({ open, onOpenChange, enable: trackBrowserBack });
   if (isMobile) {
-    return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, { value: { type, desktopDialogType }, children: /* @__PURE__ */ jsx(Drawer, { open, "data-plugin": pluginName, onOpenChange, direction: "bottom", shouldScaleBackground: false, repositionInputs: false, ...props, children }) });
+    return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, { value: { type, desktopDialogType }, children: /* @__PURE__ */ jsx(Drawer, { open, "data-plugin": pluginName, ...macrosSlot("responsive-dialog"), onOpenChange, direction: "bottom", shouldScaleBackground: false, repositionInputs: false, ...props, children }) });
   }
   if (desktopDialogType === DesktopDialogType.DIALOG) {
-    return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, { value: { type, desktopDialogType }, children: /* @__PURE__ */ jsx(Dialog, { open, "data-plugin": pluginName, onOpenChange, ...props, children }) });
+    return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, { value: { type, desktopDialogType }, children: /* @__PURE__ */ jsx(Dialog, { open, "data-plugin": pluginName, ...macrosSlot("responsive-dialog"), onOpenChange, ...props, children }) });
   }
-  return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, { value: { type, desktopDialogType }, children: /* @__PURE__ */ jsx(Sheet, { open, "data-plugin": pluginName, onOpenChange, ...props, children }) });
+  return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, { value: { type, desktopDialogType }, children: /* @__PURE__ */ jsx(Sheet, { open, "data-plugin": pluginName, ...macrosSlot("responsive-dialog"), onOpenChange, ...props, children }) });
 }
 function ResponsiveHeader({ children, pluginName, className }) {
   const dialog = useDialogType();
-  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerHeader, { "data-plugin": pluginName, className, children });
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerHeader, { "data-plugin": pluginName, ...macrosSlot("responsive-dialog-header"), className, children });
   if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
-    return /* @__PURE__ */ jsx(DialogHeader, { "data-plugin": pluginName, className, children });
-  return /* @__PURE__ */ jsx(SheetHeader, { "data-plugin": pluginName, className, children });
+    return /* @__PURE__ */ jsx(DialogHeader, { "data-plugin": pluginName, ...macrosSlot("responsive-dialog-header"), className, children });
+  return /* @__PURE__ */ jsx(SheetHeader, { "data-plugin": pluginName, ...macrosSlot("responsive-dialog-header"), className, children });
 }
 function ResponsiveTitle({ children, className, pluginName }) {
   const dialog = useDialogType();
-  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerTitle, { className, "data-plugin": pluginName, children });
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerTitle, { className, "data-plugin": pluginName, ...macrosSlot("responsive-dialog-title"), children });
   if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
-    return /* @__PURE__ */ jsx(DialogTitle, { className, "data-plugin": pluginName, children });
-  return /* @__PURE__ */ jsx(SheetTitle, { className, "data-plugin": pluginName, children });
+    return /* @__PURE__ */ jsx(DialogTitle, { className, "data-plugin": pluginName, ...macrosSlot("responsive-dialog-title"), children });
+  return /* @__PURE__ */ jsx(SheetTitle, { className, "data-plugin": pluginName, ...macrosSlot("responsive-dialog-title"), children });
 }
 function ResponsiveContent({ children, className, style, pluginName, showCloseButton }) {
   const dialog = useDialogType();
-  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerContent, { style, "data-plugin": pluginName, className: cn("shared:p-3 shared:rounded-t-3xl shared:cupertino-corner shared:fixed shared:bottom-0 shared:left-0 shared:right-0 shared:low-end-device:duration-0! shared:mid-device:duration-75! shared:low-end-device:animation-duration-[0s]! shared:mid-device:animation-duration-[100ms]!", className), children });
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerContent, { style, "data-plugin": pluginName, ...macrosSlot("responsive-dialog-content"), className: cn("shared:p-3 shared:rounded-t-3xl shared:cupertino-corner shared:fixed shared:bottom-0 shared:left-0 shared:right-0 shared:low-end-device:duration-0! shared:mid-device:duration-75! shared:low-end-device:animation-duration-[0s]! shared:mid-device:animation-duration-[100ms]!", className), children });
   if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
-    return /* @__PURE__ */ jsx(DialogContent, { style, className: cn("shared:low-end-device:duration-0! shared:mid-device:duration-75! shared:low-end-device:animation-duration-[0s]! shared:mid-device:animation-duration-[100ms]!", className), "data-plugin": pluginName, showCloseButton, children });
-  return /* @__PURE__ */ jsx(SheetContent, { style, className: cn("shared:low-end-device:duration-0! shared:mid-device:duration-75! shared:low-end-device:animation-duration-[0s]! shared:mid-device:animation-duration-[100ms]!", className), "data-plugin": pluginName, showCloseButton, children });
+    return /* @__PURE__ */ jsx(DialogContent, { style, className: cn("shared:low-end-device:duration-0! shared:mid-device:duration-75! shared:low-end-device:animation-duration-[0s]! shared:mid-device:animation-duration-[100ms]!", className), "data-plugin": pluginName, ...macrosSlot("responsive-dialog-content"), showCloseButton, children });
+  return /* @__PURE__ */ jsx(SheetContent, { style, className: cn("shared:low-end-device:duration-0! shared:mid-device:duration-75! shared:low-end-device:animation-duration-[0s]! shared:mid-device:animation-duration-[100ms]!", className), "data-plugin": pluginName, ...macrosSlot("responsive-dialog-content"), showCloseButton, children });
 }
 function ResponsiveTrigger({ children, className, pluginName }) {
   const dialog = useDialogType();
-  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, "data-plugin": pluginName, className, children });
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, "data-plugin": pluginName, ...macrosSlot("responsive-dialog-trigger"), className, children });
   if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
-    return /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, "data-plugin": pluginName, className, children });
-  return /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, "data-plugin": pluginName, className, children });
+    return /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, "data-plugin": pluginName, ...macrosSlot("responsive-dialog-trigger"), className, children });
+  return /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, "data-plugin": pluginName, ...macrosSlot("responsive-dialog-trigger"), className, children });
 }
 function ResponsiveDescription({ children, className, pluginName }) {
   const dialog = useDialogType();
-  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerDescription, { className, children });
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerDescription, { className, "data-plugin": pluginName, ...macrosSlot("responsive-dialog-description"), children });
   if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
-    return /* @__PURE__ */ jsx(DialogDescription, { asChild: true, "data-plugin": pluginName, className, children });
-  return /* @__PURE__ */ jsx(SheetDescription, { asChild: true, "data-plugin": pluginName, className, children });
+    return /* @__PURE__ */ jsx(DialogDescription, { asChild: true, "data-plugin": pluginName, ...macrosSlot("responsive-dialog-description"), className, children });
+  return /* @__PURE__ */ jsx(SheetDescription, { asChild: true, "data-plugin": pluginName, ...macrosSlot("responsive-dialog-description"), className, children });
 }
 function ResponsiveFooter({ children, className, pluginName }) {
   const dialog = useDialogType();
-  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerFooter, { "data-plugin": pluginName, className, children });
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerFooter, { "data-plugin": pluginName, ...macrosSlot("responsive-dialog-footer"), className, children });
   if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
-    return /* @__PURE__ */ jsx(DialogFooter, { "data-plugin": pluginName, className, children });
-  return /* @__PURE__ */ jsx(SheetFooter, { "data-plugin": pluginName, className, children });
+    return /* @__PURE__ */ jsx(DialogFooter, { "data-plugin": pluginName, ...macrosSlot("responsive-dialog-footer"), className, children });
+  return /* @__PURE__ */ jsx(SheetFooter, { "data-plugin": pluginName, ...macrosSlot("responsive-dialog-footer"), className, children });
 }
 function ResponsiveOverlay({ children, className, pluginName }) {
   const dialog = useDialogType();
-  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerOverlay, { "data-plugin": pluginName, className, children });
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerOverlay, { "data-plugin": pluginName, ...macrosSlot("responsive-dialog-overlay"), className, children });
   if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
-    return /* @__PURE__ */ jsx(DialogOverlay, { "data-plugin": pluginName, className, children });
-  return /* @__PURE__ */ jsx(SheetOverlay, { "data-plugin": pluginName, className, children });
+    return /* @__PURE__ */ jsx(DialogOverlay, { "data-plugin": pluginName, ...macrosSlot("responsive-dialog-overlay"), className, children });
+  return /* @__PURE__ */ jsx(SheetOverlay, { "data-plugin": pluginName, ...macrosSlot("responsive-dialog-overlay"), className, children });
 }
 export {
   DesktopDialogType,

package/dist/es/components/custom/scrollable.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 { forwardRef, useRef } from "react";
 const InfiniteScrollableDiv = forwardRef(
   ({
@@ -68,6 +69,7 @@ const InfiniteScrollableDiv = forwardRef(
       "div",
       {
         ref: setRef,
+        ...macrosSlot("infinite-scroll"),
         onScroll: onScrollEvt,
         onTouchStart: handleTouchStart,
         onTouchMove: handleTouchMove,

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

@@ -1,30 +1,33 @@
 import { jsx } from "react/jsx-runtime";
+import "clsx";
+import "tailwind-merge";
+import { macrosSlot } from "../../lib/macros.js";
 function SettingCardFooter({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "shared:text-[0.8rem] shared:opacity-65", children });
+  return /* @__PURE__ */ jsx("div", { ...macrosSlot("setting-card-footer"), className: "shared:text-[0.8rem] shared:opacity-65", children });
 }
 function SettingCardHeader({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "shared:flex shared:flex-col", children });
+  return /* @__PURE__ */ jsx("div", { ...macrosSlot("setting-card-header"), className: "shared:flex shared:flex-col", children });
 }
 function SettingSectionTitle({ children }) {
-  return /* @__PURE__ */ jsx("h4", { className: "shared:font-bold shared:text-primary shared:sticky shared:top-0 shared:p-3 shared:bg-muted shared:z-2", children });
+  return /* @__PURE__ */ jsx("h4", { ...macrosSlot("setting-section-title"), className: "shared:font-bold shared:text-primary shared:sticky shared:top-0 shared:p-3 shared:bg-muted shared:z-2", children });
 }
 function SettingCardContent({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "shared:flex shared:flex-col shared:gap-1", children });
+  return /* @__PURE__ */ jsx("div", { ...macrosSlot("setting-card-content"), className: "shared:flex shared:flex-col shared:gap-1", children });
 }
 function SettingCard({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "shared:px-3 shared:py-4 shared:gap-3 shared:flex shared:flex-col shared:border shared:rounded-2xl shared:border-black/5", children });
+  return /* @__PURE__ */ jsx("div", { ...macrosSlot("setting-card"), className: "shared:px-3 shared:py-4 shared:gap-3 shared:flex shared:flex-col shared:border shared:rounded-2xl shared:border-black/5", children });
 }
 function SettingCardTitle({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "shared:font-bold shared:text-[1.1rem]", children });
+  return /* @__PURE__ */ jsx("div", { ...macrosSlot("setting-card-title"), className: "shared:font-bold shared:text-[1.1rem]", children });
 }
 function SettingCardSubtitle({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "shared:text-[0.8rem] shared:opacity-65", children });
+  return /* @__PURE__ */ jsx("div", { ...macrosSlot("setting-card-subtitle"), className: "shared:text-[0.8rem] shared:opacity-65", children });
 }
 function SettingCardLabel({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "shared:font-bold shared:text-[0.9rem]", children });
+  return /* @__PURE__ */ jsx("div", { ...macrosSlot("setting-card-label"), className: "shared:font-bold shared:text-[0.9rem]", children });
 }
 function SettingSection({ children, hyperLink }) {
-  return /* @__PURE__ */ jsx("div", { id: hyperLink, className: "shared:flex shared:flex-col shared:gap-[1rem] shared:h-max", children });
+  return /* @__PURE__ */ jsx("div", { id: hyperLink, ...macrosSlot("setting-section"), className: "shared:flex shared:flex-col shared:gap-[1rem] shared:h-max", children });
 }
 export {
   SettingCard,

package/dist/es/components/ui/accordion.js

@@ -2,12 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const Accordion = AccordionPrimitive.Root;
 const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Item,
   {
     ref,
+    ...macrosSlot("accordion-item"),
     className: cn("shared:border-b", className),
     ...props
   }
@@ -17,6 +19,7 @@ const AccordionTrigger = React.forwardRef(({ className, children, ...props }, re
   AccordionPrimitive.Trigger,
   {
     ref,
+    ...macrosSlot("accordion-trigger"),
     className: cn(
       "shared:flex shared:flex-1 shared:items-center shared:justify-between shared:py-4 shared:text-sm shared:font-medium shared:transition-all shared:hover:underline shared:text-left shared:[&[data-state=open]>svg]:rotate-180",
       className
@@ -33,6 +36,7 @@ const AccordionContent = React.forwardRef(({ className, children, ...props }, re
   AccordionPrimitive.Content,
   {
     ref,
+    ...macrosSlot("accordion-content"),
     className: "shared:overflow-hidden shared:text-sm shared:data-[state=closed]:animate-accordion-up shared:data-[state=open]:animate-accordion-down",
     ...props,
     children: /* @__PURE__ */ jsx("div", { className: cn("shared:pb-4 shared:pt-0", className), children })

package/dist/es/components/ui/alert-dialog.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "./button.js";
 function AlertDialog({
@@ -11,7 +12,7 @@ function AlertDialog({
 function AlertDialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { ...macrosSlot("alert-dialog-trigger"), ...props });
 }
 function AlertDialogPortal({
   ...props
@@ -25,7 +26,7 @@ function AlertDialogOverlay({
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Overlay,
     {
-      "data-slot": "alert-dialog-overlay",
+      ...macrosSlot("alert-dialog-overlay"),
       className: cn(
         "shared:data-[state=open]:animate-in shared:data-[state=closed]:animate-out shared:data-[state=closed]:fade-out-0 shared:data-[state=open]:fade-in-0 shared:fixed shared:inset-0 shared:z-50 shared:bg-black/50",
         className
@@ -44,7 +45,7 @@ function AlertDialogContent({
     /* @__PURE__ */ jsx(
       AlertDialogPrimitive.Content,
       {
-        "data-slot": "alert-dialog-content",
+        ...macrosSlot("alert-dialog-content"),
         "data-size": size,
         className: cn(
           "shared:bg-background shared:data-[state=open]:animate-in shared:data-[state=closed]:animate-out shared:data-[state=closed]:fade-out-0 shared:data-[state=open]:fade-in-0 shared:data-[state=closed]:zoom-out-95 shared:data-[state=open]:zoom-in-95 shared:group/alert-dialog-content shared:fixed shared:top-[50%] shared:left-[50%] shared:z-50 shared:grid shared:w-full shared:max-w-[calc(100%-2rem)] shared:translate-x-[-50%] shared:translate-y-[-50%] shared:gap-4 shared:rounded-3xl shared:cupertino-corner shared:border shared:p-6 shared:shadow-lg shared:duration-200 shared:data-[size=sm]:max-w-xs shared:data-[size=default]:sm:max-w-lg",
@@ -141,7 +142,7 @@ function AlertDialogAction({
   return /* @__PURE__ */ jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Action,
     {
-      "data-slot": "alert-dialog-action",
+      ...macrosSlot("alert-dialog-action"),
       className: cn(className),
       ...props
     }
@@ -156,7 +157,7 @@ function AlertDialogCancel({
   return /* @__PURE__ */ jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Cancel,
     {
-      "data-slot": "alert-dialog-cancel",
+      ...macrosSlot("alert-dialog-cancel"),
       className: cn(className),
       ...props
     }

package/dist/es/components/ui/breadcrumb.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { MoreHorizontal, ChevronRight } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const Breadcrumb = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
@@ -32,6 +33,7 @@ const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref)
     Comp,
     {
       ref,
+      ...macrosSlot("breadcrumb-link"),
       className: cn("shared:transition-colors shared:hover:text-foreground", className),
       ...props
     }

package/dist/es/components/ui/button.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const buttonVariants = cva(
   "shared:inline-flex shared:items-center shared:justify-center shared:gap-2 shared:whitespace-nowrap shared:cupertino-corner shared:rounded-full shared:text-md shared:md:text-sm shared:font-medium shared:transition-all shared:cursor-pointer shared:disabled:cursor-not-allowed shared:disabled:pointer-events-none shared:disabled:opacity-50 shared:[&_svg]:pointer-events-none shared:[&_svg:not([class*='size-'])]:size-4 shared:shrink-0 shared:[&_svg]:shrink-0 shared:outline-none shared:focus-visible:border-ring shared:focus-visible:ring-ring/50 shared:focus-visible:ring-[3px] shared:aria-invalid:ring-destructive/20 shared:dark:aria-invalid:ring-destructive/40 shared:aria-invalid:border-destructive",
@@ -45,7 +46,7 @@ function Button({
   return /* @__PURE__ */ jsx(
     Comp,
     {
-      "data-slot": "button",
+      ...macrosSlot("button"),
       className: cn(buttonVariants({ variant, size, className })),
       ...props
     }

package/dist/es/components/ui/calendar.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react";
 import { getDefaultClassNames, DayPicker } from "react-day-picker";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 import { Button, buttonVariants } from "./button.js";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover.js";
@@ -300,7 +301,7 @@ function Calendar({
             return /* @__PURE__ */ jsx(
               "div",
               {
-                "data-slot": "calendar",
+                ...macrosSlot("calendar"),
                 ref: rootRef,
                 className: cn(className2),
                 ...props2
@@ -382,6 +383,7 @@ function CalendarDayButton({
       ref,
       variant: "ghost",
       size: "icon",
+      ...macrosSlot("calendar"),
       "data-day": day.date.toLocaleDateString(),
       "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
       "data-range-start": modifiers.range_start,

package/dist/es/components/ui/chart.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const THEMES = { light: "", dark: ".dark" };
 const ChartContext = React.createContext(null);
@@ -17,6 +18,7 @@ const ChartContainer = React.forwardRef(({ id, className, children, config, ...p
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
     {
+      ...macrosSlot("chart"),
       "data-chart": chartId,
       ref,
       className: cn(

package/dist/es/components/ui/checkbox.js

@@ -2,11 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
+    ...macrosSlot("checkbox"),
     className: cn(
       "shared:grid shared:place-content-center shared:cursor-pointer shared:disabled:cursor-not-allowed shared:peer shared:h-4 shared:w-4 shared:shrink-0 shared:rounded-sm shared:border shared:border-primary shared:shadow shared:focus-visible:outline-none shared:focus-visible:ring-1 shared:focus-visible:ring-ring shared:disabled:opacity-50 shared:data-[state=checked]:bg-primary shared:data-[state=checked]:text-primary-foreground",
       className

package/dist/es/components/ui/collapsible.js

@@ -1,7 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { macrosSlot } from "../../lib/macros.js";
 const Collapsible = CollapsiblePrimitive.Root;
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+const CollapsibleTrigger = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleTrigger, { ref, ...macrosSlot("collapsible-trigger"), ...props }));
+CollapsibleTrigger.displayName = CollapsiblePrimitive.CollapsibleTrigger.displayName;
+const CollapsibleContent = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, { ref, ...macrosSlot("collapsible-content"), ...props }));
+CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;
 export {
   Collapsible,
   CollapsibleContent,

package/dist/es/components/ui/command.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import "@radix-ui/react-dialog";
 import { Command as Command$1 } from "cmdk";
 import { Search } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 import { Dialog, DialogContent } from "./dialog.js";
 const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -26,6 +27,7 @@ const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PU
     Command$1.Input,
     {
       ref,
+      ...macrosSlot("command-input"),
       className: cn(
         "shared:flex shared:h-10 md:shared:h-12 shared:w-full shared:rounded-md shared:bg-transparent shared:py-3 shared:text-sm shared:outline-none shared:placeholder:text-muted-foreground shared:disabled:cursor-not-allowed shared:disabled:opacity-50",
         className
@@ -39,6 +41,7 @@ const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   Command$1.List,
   {
     ref,
+    ...macrosSlot("command-list"),
     className: cn("shared:max-h-[300px] shared:overflow-y-auto shared:overflow-x-hidden shared:scrollbar-thin shared:scrollbar-thumb-muted shared:flex-1 shared:touch-auto", className),
     ...props
   }
@@ -78,6 +81,7 @@ const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   Command$1.Item,
   {
     ref,
+    ...macrosSlot("command-item"),
     className: cn(
       "shared:relative shared:flex shared:cursor-default shared:gap-2 shared:select-none shared:items-center shared:rounded-2xl shared:cupertino-corner shared:px-2 shared:py-1.5 shared:text-sm shared:outline-none shared:transition-colors shared:focus:bg-accent shared:focus:text-accent-foreground shared:data-[disabled=true]:pointer-events-none shared:data-[selected=true]:bg-accent shared:data-[selected=true]:text-accent-foreground shared:data-[disabled=true]:opacity-50 shared:[&_svg]:pointer-events-none shared:[&_svg]:size-4 shared:[&_svg]:shrink-0",
       className

package/dist/es/components/ui/context-menu.js

@@ -1,10 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { ChevronRight, Check, Circle } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const ContextMenu = ContextMenuPrimitive.Root;
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuTrigger = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Trigger, { ref, ...macrosSlot("context-menu-trigger"), ...props }));
+ContextMenuTrigger.displayName = ContextMenuPrimitive.Trigger.displayName;
 const ContextMenuGroup = ContextMenuPrimitive.Group;
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
@@ -13,6 +15,7 @@ const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ..
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
+    ...macrosSlot("context-menu-sub-trigger"),
     className: cn(
       "shared:flex shared:cursor-default shared:select-none shared:items-center shared:rounded-sm shared:px-2 shared:py-1.5 shared:text-sm shared:outline-none shared:focus:bg-accent shared:focus:text-accent-foreground shared:data-[state=open]:bg-accent shared:data-[state=open]:text-accent-foreground",
       inset && "shared:pl-8",
@@ -30,6 +33,7 @@ const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) =>
   ContextMenuPrimitive.SubContent,
   {
     ref,
+    ...macrosSlot("context-menu-sub-content"),
     className: cn(
       "shared:z-50 shared:min-w-[8rem] shared:overflow-hidden shared:rounded-md shared:border shared:bg-popover shared:p-1 shared:text-popover-foreground shared:shadow-lg shared:data-[state=open]:animate-in shared:data-[state=closed]:animate-out shared:data-[state=closed]:fade-out-0 shared:data-[state=open]:fade-in-0 shared:data-[state=closed]:zoom-out-95 shared:data-[state=open]:zoom-in-95 shared:data-[side=bottom]:slide-in-from-top-2 shared:data-[side=left]:slide-in-from-right-2 shared:data-[side=right]:slide-in-from-left-2 shared:data-[side=top]:slide-in-from-bottom-2 shared:origin-[--radix-context-menu-content-transform-origin]",
       className
@@ -42,6 +46,7 @@ const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => /*
   ContextMenuPrimitive.Content,
   {
     ref,
+    ...macrosSlot("context-menu-content"),
     className: cn(
       "shared:z-50 shared:max-h-[--radix-context-menu-content-available-height] shared:min-w-[8rem] shared:overflow-y-auto shared:overflow-x-hidden shared:rounded-md shared:border shared:bg-popover shared:p-1 shared:text-popover-foreground shared:shadow-md shared:data-[state=open]:animate-in shared:data-[state=closed]:animate-out shared:data-[state=closed]:fade-out-0 shared:data-[state=open]:fade-in-0 shared:data-[state=closed]:zoom-out-95 shared:data-[state=open]:zoom-in-95 shared:data-[side=bottom]:slide-in-from-top-2 shared:data-[side=left]:slide-in-from-right-2 shared:data-[side=right]:slide-in-from-left-2 shared:data-[side=top]:slide-in-from-bottom-2 shared:origin-[--radix-context-menu-content-transform-origin]",
       className
@@ -54,6 +59,7 @@ const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) =
   ContextMenuPrimitive.Item,
   {
     ref,
+    ...macrosSlot("context-menu-item"),
     className: cn(
       "shared:relative shared:flex shared:cursor-default shared:select-none shared:items-center shared:rounded-sm shared:px-2 shared:py-1.5 shared:text-sm shared:outline-none shared:focus:bg-accent shared:focus:text-accent-foreground shared:data-[disabled]:pointer-events-none shared:data-[disabled]:opacity-50",
       inset && "shared:pl-8",
@@ -67,6 +73,7 @@ const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
+    ...macrosSlot("context-menu-checkbox-item"),
     className: cn(
       "shared:relative shared:flex shared:cursor-default shared:select-none shared:items-center shared:rounded-sm shared:py-1.5 shared:pl-8 shared:pr-2 shared:text-sm shared:outline-none shared:focus:bg-accent shared:focus:text-accent-foreground shared:data-[disabled]:pointer-events-none shared:data-[disabled]:opacity-50",
       className
@@ -84,6 +91,7 @@ const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }
   ContextMenuPrimitive.RadioItem,
   {
     ref,
+    ...macrosSlot("context-menu-radio-item"),
     className: cn(
       "shared:relative shared:flex shared:cursor-default shared:select-none shared:items-center shared:rounded-sm shared:py-1.5 shared:pl-8 shared:pr-2 shared:text-sm shared:outline-none shared:focus:bg-accent shared:focus:text-accent-foreground shared:data-[disabled]:pointer-events-none shared:data-[disabled]:opacity-50",
       className

package/dist/es/components/ui/dialog.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 function Dialog({
   ...props
@@ -11,7 +12,7 @@ function Dialog({
 function DialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ...macrosSlot("dialog-trigger"), ...props });
 }
 function DialogPortal({
   ...props
@@ -21,7 +22,7 @@ function DialogPortal({
 function DialogClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { ...macrosSlot("dialog-close"), ...props });
 }
 function DialogOverlay({
   className,
@@ -30,7 +31,7 @@ function DialogOverlay({
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Overlay,
     {
-      "data-slot": "dialog-overlay",
+      ...macrosSlot("dialog-overlay"),
       className: cn(
         "shared:data-[state=open]:animate-in shared:data-[state=closed]:animate-out shared:data-[state=closed]:fade-out-0 shared:data-[state=open]:fade-in-0 shared:fixed shared:inset-0 shared:z-50 shared:bg-black/50",
         className
@@ -50,7 +51,7 @@ function DialogContent({
     /* @__PURE__ */ jsxs(
       DialogPrimitive.Content,
       {
-        "data-slot": "dialog-content",
+        ...macrosSlot("dialog-content"),
         className: cn(
           "shared:bg-(--dialog-background) shared:data-[state=open]:animate-in shared:data-[state=closed]:animate-out shared:data-[state=closed]:fade-out-0 shared:data-[state=open]:fade-in-0 shared:data-[state=closed]:zoom-out-95 shared:data-[state=open]:zoom-in-95 shared:fixed shared:top-[50%] shared:left-[50%] shared:z-50 shared:grid shared:w-full shared:max-w-[calc(100%-2rem)] shared:translate-x-[-50%] shared:translate-y-[-50%] shared:gap-4 shared:rounded-3xl shared:cupertino-corner shared:p-6 shared:shadow-lg shared:duration-200 shared:sm:max-w-lg",
           className
@@ -61,7 +62,7 @@ function DialogContent({
           showCloseButton && /* @__PURE__ */ jsxs(
             DialogPrimitive.Close,
             {
-              "data-slot": "dialog-close",
+              ...macrosSlot("dialog-close"),
               className: "shared:p-2 shared:bg-muted shared:rounded-full shared:ring-offset-background shared:focus:ring-ring shared:data-[state=open]:bg-accent shared:data-[state=open]:text-muted-foreground shared:absolute shared:top-4 shared:right-4 shared:opacity-70 shared:transition-opacity shared:hover:opacity-100 shared:focus:ring-2 shared:focus:ring-offset-2 shared:focus:outline-hidden shared:disabled:pointer-events-none shared:[&_svg]:pointer-events-none shared:[&_svg]:shrink-0 shared:[&_svg:not([class*='size-'])]:size-5 shared:cursor-pointer",
               children: [
                 /* @__PURE__ */ jsx(XIcon, {}),
@@ -90,7 +91,7 @@ function DialogFooter({ className, ...props }) {
     {
       "data-slot": "dialog-footer",
       className: cn(
-        "shared:flex shared:flex-col-reverse shared:gap-2 shared:sm:flex-row shared:sm:justify-end",
+        "shared:flex shared:p-0 shared:flex-col-reverse shared:gap-2 shared:sm:flex-row shared:sm:justify-end",
         className
       ),
       ...props