@quan-erp/shared-ui 1.0.11 → 1.1.1

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Drawer as Drawer$1 } from "vaul";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const DrawerContext = React.createContext({
   direction: "bottom"
@@ -16,13 +17,16 @@ const Drawer = ({
   }
 ) });
 Drawer.displayName = "Drawer";
-const DrawerTrigger = Drawer$1.Trigger;
+const DrawerTrigger = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Trigger, { ref, ...macrosSlot("drawer-trigger"), ...props }));
+DrawerTrigger.displayName = Drawer$1.Trigger.displayName;
 const DrawerPortal = Drawer$1.Portal;
-const DrawerClose = Drawer$1.Close;
+const DrawerClose = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Close, { ref, ...macrosSlot("drawer-close"), ...props }));
+DrawerClose.displayName = Drawer$1.Close.displayName;
 const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Overlay,
   {
     ref,
+    ...macrosSlot("drawer-overlay"),
     className: cn("shared:fixed shared:inset-0 shared:z-50 shared:bg-black/80", className),
     ...props
   }
@@ -36,6 +40,7 @@ const DrawerContent = React.forwardRef(({ className, children, ...props }, ref)
       Drawer$1.Content,
       {
         ref,
+        ...macrosSlot("drawer-content"),
         className: cn(
           "shared:fixed shared:inset-x-0 shared:bottom-0 shared:z-50 shared:mt-24 shared:flex shared:h-auto shared:flex-col shared:rounded-t-3xl shared:border shared:bg-(--drawer-background)",
           className
@@ -67,7 +72,7 @@ const DrawerFooter = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn("shared:mt-auto shared:flex shared:flex-col shared:gap-2 shared:p-4", className),
+    className: cn("shared:mt-auto shared:flex shared:flex-row shared:gap-2", className),
     ...props
   }
 );

package/dist/es/components/ui/dropdown-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 DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { ChevronRight, Check, Circle } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuTrigger = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ref, ...macrosSlot("dropdown-menu-trigger"), ...props }));
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
 const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
@@ -13,6 +15,7 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
+    ...macrosSlot("dropdown-menu-sub-trigger"),
     className: cn(
       "shared:flex shared:cursor-default shared:select-none shared:items-center shared:gap-2 shared:rounded-sm shared:px-2 shared:py-1.5 shared:text-sm shared:outline-none shared:focus:bg-accent shared:data-[state=open]:bg-accent shared:[&_svg]:pointer-events-none shared:[&_svg]:size-4 shared:[&_svg]:shrink-0",
       inset && "shared:pl-8",
@@ -30,6 +33,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
   DropdownMenuPrimitive.SubContent,
   {
     ref,
+    ...macrosSlot("dropdown-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-dropdown-menu-content-transform-origin]",
       className
@@ -42,6 +46,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
   DropdownMenuPrimitive.Content,
   {
     ref,
+    ...macrosSlot("dropdown-menu-content"),
     sideOffset,
     className: cn(
       "shared:z-50 shared:max-h-[var(--radix-dropdown-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",
@@ -56,6 +61,7 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref)
   DropdownMenuPrimitive.Item,
   {
     ref,
+    ...macrosSlot("dropdown-menu-item"),
     className: cn(
       "shared:relative shared:flex shared:cursor-default shared:select-none shared:items-center shared:gap-2 shared:rounded-sm 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]:pointer-events-none shared:data-[disabled]:opacity-50 shared:[&>svg]:size-4 shared:[&>svg]:shrink-0",
       inset && "shared:pl-8",
@@ -69,6 +75,7 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
+    ...macrosSlot("dropdown-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:transition-colors shared:focus:bg-accent shared:focus:text-accent-foreground shared:data-[disabled]:pointer-events-none shared:data-[disabled]:opacity-50",
       className
@@ -86,6 +93,7 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
+    ...macrosSlot("dropdown-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:transition-colors 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/hover-card.js

@@ -1,13 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const HoverCard = HoverCardPrimitive.Root;
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
+const HoverCardTrigger = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Trigger, { ref, ...macrosSlot("hover-card-trigger"), ...props }));
+HoverCardTrigger.displayName = HoverCardPrimitive.Trigger.displayName;
 const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   HoverCardPrimitive.Content,
   {
     ref,
+    ...macrosSlot("hover-card-content"),
     align,
     sideOffset,
     className: cn(

package/dist/es/components/ui/input-otp.js

@@ -2,11 +2,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Minus } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
   OTPInput,
   {
     ref,
+    ...macrosSlot("input"),
     containerClassName: cn(
       "shared:flex shared:items-center shared:gap-2 shared:has-[:disabled]:opacity-50",
       containerClassName

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

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const inputVariants = cva(
   "shared:file:text-foreground shared:placeholder:text-muted-foreground shared:selection:bg-primary shared:selection:text-primary-foreground shared:dark:bg-input/30 shared:border-input shared:w-full shared:min-w-0 shared:rounded-full shared:cupertino-corner shared:border shared:bg-transparent shared:text-base shared:shadow-xs shared:transition-[color,box-shadow] shared:outline-none shared:file:inline-flex shared:file:h-7 shared:file:border-0 shared:file:bg-transparent shared:file:text-sm shared:file:font-medium shared:disabled:pointer-events-none shared:disabled:cursor-not-allowed shared:disabled:opacity-50 shared:md:text-sm 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",
@@ -24,7 +25,7 @@ const Input = React.forwardRef(
       {
         ref,
         type,
-        "data-slot": "input",
+        ...macrosSlot("input"),
         className: cn(inputVariants({ inputSize, className })),
         ...props
       }

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

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 function Label({
   className,
@@ -9,7 +10,7 @@ function Label({
   return /* @__PURE__ */ jsx(
     LabelPrimitive.Root,
     {
-      "data-slot": "label",
+      ...macrosSlot("label"),
       className: cn(
         "shared:flex shared:items-center shared:gap-2 shared:text-sm shared:leading-none shared:font-medium shared:select-none shared:group-data-[disabled=true]:pointer-events-none shared:group-data-[disabled=true]:opacity-50 shared:peer-disabled:cursor-not-allowed shared:peer-disabled:opacity-50",
         className

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

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { ChevronRight, Check, Circle } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 function MenubarMenu({
   ...props
@@ -44,6 +45,7 @@ const MenubarTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__
   MenubarPrimitive.Trigger,
   {
     ref,
+    ...macrosSlot("menubar-trigger"),
     className: cn(
       "shared:flex shared:cursor-default shared:select-none shared:items-center shared:rounded-sm shared:px-3 shared:py-1 shared:text-sm shared:font-medium 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",
       className
@@ -56,6 +58,7 @@ const MenubarSubTrigger = React.forwardRef(({ className, inset, children, ...pro
   MenubarPrimitive.SubTrigger,
   {
     ref,
+    ...macrosSlot("menubar-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",
@@ -73,6 +76,7 @@ const MenubarSubContent = React.forwardRef(({ className, ...props }, ref) => /*
   MenubarPrimitive.SubContent,
   {
     ref,
+    ...macrosSlot("menubar-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-menubar-content-transform-origin]",
       className
@@ -86,6 +90,7 @@ const MenubarContent = React.forwardRef(
     MenubarPrimitive.Content,
     {
       ref,
+      ...macrosSlot("menubar-content"),
       align,
       alignOffset,
       sideOffset,
@@ -102,6 +107,7 @@ const MenubarItem = React.forwardRef(({ className, inset, ...props }, ref) => /*
   MenubarPrimitive.Item,
   {
     ref,
+    ...macrosSlot("menubar-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",
@@ -115,6 +121,7 @@ const MenubarCheckboxItem = React.forwardRef(({ className, children, checked, ..
   MenubarPrimitive.CheckboxItem,
   {
     ref,
+    ...macrosSlot("menubar-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
@@ -132,6 +139,7 @@ const MenubarRadioItem = React.forwardRef(({ className, children, ...props }, re
   MenubarPrimitive.RadioItem,
   {
     ref,
+    ...macrosSlot("menubar-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/navigation-menu.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   NavigationMenuPrimitive.Root,
@@ -40,6 +41,7 @@ const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props
   NavigationMenuPrimitive.Trigger,
   {
     ref,
+    ...macrosSlot("navigation-menu-trigger"),
     className: cn(navigationMenuTriggerStyle(), "shared:group", className),
     ...props,
     children: [
@@ -60,6 +62,7 @@ const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) =>
   NavigationMenuPrimitive.Content,
   {
     ref,
+    ...macrosSlot("navigation-menu-content"),
     className: cn(
       "shared:left-0 shared:top-0 shared:w-full shared:data-[motion^=from-]:animate-in shared:data-[motion^=to-]:animate-out shared:data-[motion^=from-]:fade-in shared:data-[motion^=to-]:fade-out shared:data-[motion=from-end]:slide-in-from-right-52 shared:data-[motion=from-start]:slide-in-from-left-52 shared:data-[motion=to-end]:slide-out-to-right-52 shared:data-[motion=to-start]:slide-out-to-left-52 shared:md:absolute shared:md:w-auto ",
       className
@@ -68,7 +71,8 @@ const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
-const NavigationMenuLink = NavigationMenuPrimitive.Link;
+const NavigationMenuLink = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(NavigationMenuPrimitive.Link, { ref, ...macrosSlot("navigation-menu-link"), ...props }));
+NavigationMenuLink.displayName = NavigationMenuPrimitive.Link.displayName;
 const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("shared:absolute shared:left-0 shared:top-full shared:flex shared:justify-center"), children: /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Viewport,
   {

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { MoreHorizontal, ChevronRight, ChevronLeft } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 import { buttonVariants } from "./button.js";
 const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
@@ -31,6 +32,7 @@ const PaginationLink = ({
 }) => /* @__PURE__ */ jsx(
   "a",
   {
+    ...macrosSlot("pagination-link"),
     "aria-current": isActive ? "page" : void 0,
     className: cn(
       buttonVariants({
@@ -48,6 +50,7 @@ const PaginationPrevious = ({
 }) => /* @__PURE__ */ jsxs(
   PaginationLink,
   {
+    ...macrosSlot("pagination-previous"),
     "aria-label": "Go to previous page",
     className: cn("shared:gap-1 shared:pl-2.5", className),
     ...props,
@@ -64,6 +67,7 @@ const PaginationNext = ({
 }) => /* @__PURE__ */ jsxs(
   PaginationLink,
   {
+    ...macrosSlot("pagination-next"),
     "aria-label": "Go to next page",
     className: cn("shared:gap-1 shared:pr-2.5", className),
     ...props,

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

@@ -1,14 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverTrigger = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { ref, ...macrosSlot("popover-trigger"), ...props }));
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
+    ...macrosSlot("popover-content"),
     align,
     sideOffset,
     className: cn(

package/dist/es/components/ui/radio-group.js

@@ -2,11 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
+      ...macrosSlot("radio-group"),
       className: cn("shared:grid shared:gap-2", className),
       ...props,
       ref
@@ -19,6 +21,7 @@ const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
     RadioGroupPrimitive.Item,
     {
       ref,
+      ...macrosSlot("radio-group-item"),
       className: cn(
         "shared:aspect-square shared:h-4 shared:w-4 shared:rounded-full shared:border shared:border-primary shared:text-primary shared:shadow shared:focus:outline-none shared:focus-visible:ring-1 shared:focus-visible:ring-ring shared:disabled:cursor-not-allowed shared:disabled:opacity-50",
         className

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

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { GripVertical } from "lucide-react";
 import * as ResizablePrimitive from "react-resizable-panels";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const ResizablePanelGroup = ({
   className,
@@ -23,6 +24,7 @@ const ResizableHandle = ({
 }) => /* @__PURE__ */ jsx(
   ResizablePrimitive.PanelResizeHandle,
   {
+    ...macrosSlot("resizable-handle"),
     className: cn(
       "shared:relative shared:flex shared:w-px shared:items-center shared:justify-center shared:bg-border shared:after:absolute shared:after:inset-y-0 shared:after:left-1/2 shared:after:w-1 shared:after:-translate-x-1/2 shared:focus-visible:outline-none shared:focus-visible:ring-1 shared:focus-visible:ring-ring shared:focus-visible:ring-offset-1 shared:data-[panel-group-direction=vertical]:h-px shared:data-[panel-group-direction=vertical]:w-full shared:data-[panel-group-direction=vertical]:after:left-0 shared:data-[panel-group-direction=vertical]:after:h-1 shared:data-[panel-group-direction=vertical]:after:w-full shared:data-[panel-group-direction=vertical]:after:-translate-y-1/2 shared:data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>shared:div]:rotate-90",
       className

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

@@ -1,15 +1,18 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { ChevronDown, ChevronUp, Check } from "lucide-react";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
-const SelectValue = SelectPrimitive.Value;
+const SelectValue = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Value, { ref, ...macrosSlot("select-value"), ...props }));
+SelectValue.displayName = SelectPrimitive.Value.displayName;
 const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
+    ...macrosSlot("select-trigger"),
     className: cn(
       "shared:flex shared:h-12 shared:md:h-9 shared:w-full shared:items-center shared:justify-between shared:whitespace-nowrap shared:rounded-3xl shared:cupertino-corner shared:border shared:border-input shared:bg-transparent shared:px-3 shared:py-2 shared:text-sm shared:data-[placeholder]:text-muted-foreground shared:focus:border shared:focus:border-primary shared:disabled:cursor-not-allowed shared:disabled:opacity-50 [&>shared:span]:line-clamp-1",
       className
@@ -52,6 +55,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
   SelectPrimitive.Content,
   {
     ref,
+    ...macrosSlot("select-content"),
     className: cn(
       "shared:relative shared:z-50 shared:max-h-[--radix-select-content-available-height] shared:min-w-[8rem] shared:overflow-y-auto shared:overflow-x-hidden shared:rounded-3xl shared:cupertino-corner shared:bg-popover 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-select-content-transform-origin]",
       position === "popper" && "shared:data-[side=bottom]:translate-y-1 shared:data-[side=left]:-translate-x-1 shared:data-[side=right]:translate-x-1 shared:data-[side=top]:-translate-y-1",
@@ -80,6 +84,7 @@ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   SelectPrimitive.Label,
   {
     ref,
+    ...macrosSlot("select-label"),
     className: cn("shared:px-2 shared:py-1.5 shared:text-sm shared:font-semibold", className),
     ...props
   }
@@ -89,6 +94,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
   SelectPrimitive.Item,
   {
     ref,
+    ...macrosSlot("select-item"),
     className: cn(
       "shared:relative shared:flex shared:w-full shared:cursor-default shared:select-none shared:items-center shared:rounded-3xl shared:cupertino-corner shared:py-3 shared:pl-4 shared:pr-10 shared:md:py-1.5 shared:md:pl-2 shared:md:pr-8 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/sheet.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 Sheet({ ...props }) {
   return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "sheet", ...props });
@@ -9,12 +10,12 @@ function Sheet({ ...props }) {
 function SheetTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ...macrosSlot("sheet-trigger"), ...props });
 }
 function SheetClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "sheet-close", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { ...macrosSlot("sheet-close"), ...props });
 }
 function SheetPortal({
   ...props
@@ -28,7 +29,7 @@ function SheetOverlay({
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Overlay,
     {
-      "data-slot": "sheet-overlay",
+      ...macrosSlot("sheet-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
@@ -49,7 +50,7 @@ function SheetContent({
     /* @__PURE__ */ jsxs(
       DialogPrimitive.Content,
       {
-        "data-slot": "sheet-content",
+        ...macrosSlot("sheet-content"),
         className: cn(
           "shared:bg-(--sheet-background) shared:data-[state=open]:animate-in shared:data-[state=closed]:animate-out shared:fixed shared:z-50 shared:flex shared:flex-col shared:gap-4 shared:shadow-lg shared:transition shared:ease-in-out shared:data-[state=closed]:duration-300 shared:data-[state=open]:duration-500",
           side === "right" && "shared:data-[state=closed]:slide-out-to-right shared:data-[state=open]:slide-in-from-right shared:inset-y-0 shared:right-0 shared:h-full shared:w-3/4 shared:border-l shared:sm:max-w-sm shared:rounded-l-xl",
@@ -61,7 +62,7 @@ function SheetContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "shared:p-2 shared:bg-muted shared:rounded-full shared:ring-offset-background shared:focus:ring-ring shared:data-[state=open]:bg-secondary 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:cursor-pointer", children: [
+          showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { ...macrosSlot("sheet-close"), className: "shared:p-2 shared:bg-muted shared:rounded-full shared:ring-offset-background shared:focus:ring-ring shared:data-[state=open]:bg-secondary 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:cursor-pointer", children: [
             /* @__PURE__ */ jsx(XIcon, { className: "shared:size-5" }),
             /* @__PURE__ */ jsx("span", { className: "shared:sr-only", children: "Close" })
           ] })

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

@@ -4,6 +4,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { PanelLeft } from "lucide-react";
 import { useMediaQuery } from "../../hooks/use-mobile.js";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
@@ -196,6 +197,7 @@ const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref)
     Button,
     {
       ref,
+      ...macrosSlot("sidebar-trigger"),
       "data-sidebar": "trigger",
       variant: "ghost",
       size: "icon",
@@ -219,6 +221,7 @@ const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
     "button",
     {
       ref,
+      ...macrosSlot("sidebar-rail"),
       "data-sidebar": "rail",
       "aria-label": "Toggle Sidebar",
       tabIndex: -1,
@@ -354,6 +357,7 @@ const SidebarGroupAction = React.forwardRef(({ className, asChild = false, ...pr
     Comp,
     {
       ref,
+      ...macrosSlot("sidebar-group-action"),
       "data-sidebar": "group-action",
       className: cn(
         "shared:absolute shared:right-3 shared:top-3.5 shared:flex shared:aspect-square shared:w-5 shared:items-center shared:justify-center shared:rounded-md shared:p-0 shared:text-sidebar-foreground shared:outline-none shared:ring-sidebar-ring shared:transition-transform shared:hover:bg-sidebar-accent shared:hover:text-sidebar-accent-foreground shared:focus-visible:ring-2 [&>shared:svg]:size-4 [&>shared:svg]:shrink-0",
@@ -433,6 +437,7 @@ const SidebarMenuButton = React.forwardRef(
       Comp,
       {
         ref,
+        ...macrosSlot("sidebar-menu-button"),
         "data-sidebar": "menu-button",
         "data-size": size,
         "data-active": isActive,
@@ -469,6 +474,7 @@ const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOn
     Comp,
     {
       ref,
+      ...macrosSlot("sidebar-menu-action"),
       "data-sidebar": "menu-action",
       className: cn(
         "shared:absolute shared:right-1 shared:top-1.5 shared:flex shared:aspect-square shared:w-5 shared:items-center shared:justify-center shared:rounded-md shared:p-0 shared:text-sidebar-foreground shared:outline-none shared:ring-sidebar-ring shared:transition-transform shared:hover:bg-sidebar-accent shared:hover:text-sidebar-accent-foreground shared:focus-visible:ring-2 shared:peer-hover/menu-button:text-sidebar-accent-foreground [&>shared:svg]:size-4 [&>shared:svg]:shrink-0",
@@ -560,6 +566,7 @@ const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = "md", i
     Comp,
     {
       ref,
+      ...macrosSlot("sidebar-menu-sub-button"),
       "data-sidebar": "menu-sub-button",
       "data-size": size,
       "data-active": isActive,

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

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useState } from "react";
 const Slider = forwardRef(
@@ -16,6 +17,7 @@ const Slider = forwardRef(
       "div",
       {
         ref,
+        ...macrosSlot("slider"),
         className: cn("shared:relative shared:flex shared:w-full shared:touch-none shared:select-none shared:items-center shared:h-6.5 shared:md:h-5 shared:[--thumb-size:1.625rem] shared:md:[--thumb-size:1.25rem] shared:overflow-hidden", className, disabled && "shared:opacity-50"),
         ...props,
         children: [
@@ -32,6 +34,7 @@ const Slider = forwardRef(
           /* @__PURE__ */ jsx(
             "div",
             {
+              ...macrosSlot("slider-thumb"),
               className: "shared:absolute shared:block shared:h-6.5 shared:w-6.5 shared:md:h-5 shared:md:w-5 shared:rounded-full shared:border-2 shared:border-primary shared:bg-background shared:shadow shared:pointer-events-none shared:z-10",
               style: {
                 left: `calc(${percentage}% - (${percentage / 100} * var(--thumb-size)))`

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

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cva } from "class-variance-authority";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const switchVariants = cva(
   "shared:peer shared:inline-flex shared:shrink-0 shared:cursor-pointer shared:items-center shared:rounded-full shared:border-2 shared:border-transparent shared:shadow-sm shared:transition-all shared:duration-200 shared:focus-visible:outline-none shared:focus-visible:ring-2 shared:focus-visible:ring-ring shared:focus-visible:ring-offset-2 shared:focus-visible:ring-offset-background shared:disabled:cursor-not-allowed shared:disabled:opacity-50 shared:data-[state=checked]:bg-primary shared:data-[state=unchecked]:bg-input",
@@ -37,6 +38,7 @@ const Switch = React.forwardRef(({ className, switchSize, ...props }, ref) => /*
   SwitchPrimitives.Root,
   {
     "data-plugin": "builtin",
+    ...macrosSlot("switch"),
     className: cn(switchVariants({ switchSize, className })),
     ...props,
     ref,

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

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cva } from "class-variance-authority";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const TabsContext = React.createContext({ size: "default" });
 const Tabs = React.forwardRef(
@@ -30,6 +31,7 @@ const TabsList = React.forwardRef(({ className, size, ...props }, ref) => {
     TabsPrimitive.List,
     {
       ref,
+      ...macrosSlot("tabs-list"),
       className: cn(tabsListVariants({ size: activeSize, className })),
       ...props
     }
@@ -58,6 +60,7 @@ const TabsTrigger = React.forwardRef(({ className, size, ...props }, ref) => {
     TabsPrimitive.Trigger,
     {
       ref,
+      ...macrosSlot("tabs-trigger"),
       className: cn(tabsTriggerVariants({ size: activeSize, className })),
       ...props
     }
@@ -68,6 +71,7 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   TabsPrimitive.Content,
   {
     ref,
+    ...macrosSlot("tabs-content"),
     className: cn(
       "shared:mt-2 shared:ring-offset-background shared:focus-visible:outline-none shared:focus-visible:ring-2 shared:focus-visible:ring-ring shared:focus-visible:ring-offset-2",
       className

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

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { cva } from "class-variance-authority";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 const textareaVariants = cva(
   "shared:border-input shared:placeholder:text-muted-foreground shared:focus-visible:border-ring shared:focus-visible:ring-ring/50 shared:aria-invalid:ring-destructive/20 shared:dark:aria-invalid:ring-destructive/40 shared:aria-invalid:border-destructive shared:dark:bg-input/30 shared:flex shared:field-sizing-content shared:w-full shared:rounded-3xl shared:cupertino-corner shared:border shared:bg-transparent shared:shadow-xs shared:transition-[color,box-shadow] shared:outline-none shared:focus-visible:ring-[3px] shared:disabled:cursor-not-allowed shared:disabled:opacity-50",
@@ -21,7 +22,7 @@ function Textarea({ className, inputSize, ...props }) {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
-      "data-slot": "textarea",
+      ...macrosSlot("textarea"),
       className: cn(textareaVariants({ inputSize, className })),
       ...props
     }

package/dist/es/components/ui/time-picker.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Button } from "./button.js";
 import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "./dialog.js";
 import { ButtonGroup } from "./button-group.js";
+import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 function polarToCartesian(cx, cy, r, angle) {
   const rad = (angle - 90) * Math.PI / 180;
@@ -45,6 +46,7 @@ function Dial({
     /* @__PURE__ */ jsxs(
       "svg",
       {
+        ...macrosSlot("time-picker-dial"),
         width: size,
         height: size,
         className: "shared:rounded-full shared:bg-muted shared:touch-none shared:select-none",
@@ -137,9 +139,9 @@ function TimePicker({
     /* @__PURE__ */ jsxs(DialogContent, { className: "shared:w-[360px]", children: [
       /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Select time" }) }),
       /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:justify-center shared:gap-2 shared:text-2xl shared:font-semibold", children: [
-        /* @__PURE__ */ jsx("button", { onClick: () => setMode("hour"), className: cn(mode === "hour" ? "shared:underline" : "", "shared:cursor-pointer"), children: String(format === "12hr" ? hour % 12 : hour).padStart(2, "0").padStart(2, "0") }),
+        /* @__PURE__ */ jsx("button", { ...macrosSlot("time-picker-hour"), onClick: () => setMode("hour"), className: cn(mode === "hour" ? "shared:underline" : "", "shared:cursor-pointer"), children: String(format === "12hr" ? hour % 12 : hour).padStart(2, "0").padStart(2, "0") }),
         /* @__PURE__ */ jsx("span", { children: ":" }),
-        /* @__PURE__ */ jsx("button", { onClick: () => setMode("minute"), className: cn(mode === "minute" ? "shared:underline" : "", "shared:cursor-pointer"), children: String(minute).padStart(2, "0") })
+        /* @__PURE__ */ jsx("button", { ...macrosSlot("time-picker-minute"), onClick: () => setMode("minute"), className: cn(mode === "minute" ? "shared:underline" : "", "shared:cursor-pointer"), children: String(minute).padStart(2, "0") })
       ] }),
       mode === "hour" ? /* @__PURE__ */ jsx(
         Dial,