@uipath/apollo-wind 2.36.1 → 2.37.0

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

@@ -4,14 +4,42 @@ import { CheckboxItem, Content, Group, Item, ItemIndicator, Label, Portal, Radio
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
-const ContextMenu = Root;
-const ContextMenuTrigger = Trigger;
-const ContextMenuGroup = Group;
-const ContextMenuPortal = Portal;
-const ContextMenuSub = Sub;
-const ContextMenuRadioGroup = RadioGroup;
+const ContextMenu = (props)=>/*#__PURE__*/ jsx(Root, {
+        "data-slot": "context-menu",
+        ...props
+    });
+ContextMenu.displayName = 'ContextMenu';
+const ContextMenuTrigger = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Trigger, {
+        ref: ref,
+        "data-slot": "context-menu-trigger",
+        ...props
+    }));
+ContextMenuTrigger.displayName = Trigger.displayName;
+const ContextMenuGroup = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Group, {
+        ref: ref,
+        "data-slot": "context-menu-group",
+        ...props
+    }));
+ContextMenuGroup.displayName = Group.displayName;
+const ContextMenuPortal = (props)=>/*#__PURE__*/ jsx(Portal, {
+        "data-slot": "context-menu-portal",
+        ...props
+    });
+ContextMenuPortal.displayName = 'ContextMenuPortal';
+const ContextMenuSub = (props)=>/*#__PURE__*/ jsx(Sub, {
+        "data-slot": "context-menu-sub",
+        ...props
+    });
+ContextMenuSub.displayName = 'ContextMenuSub';
+const ContextMenuRadioGroup = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(RadioGroup, {
+        ref: ref,
+        "data-slot": "context-menu-radio-group",
+        ...props
+    }));
+ContextMenuRadioGroup.displayName = RadioGroup.displayName;
 const ContextMenuSubTrigger = /*#__PURE__*/ forwardRef(({ className, inset, children, ...props }, ref)=>/*#__PURE__*/ jsxs(SubTrigger, {
         ref: ref,
+        "data-slot": "context-menu-sub-trigger",
         className: cn('flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', inset && 'pl-8', className),
         ...props,
         children: [
@@ -24,6 +52,7 @@ const ContextMenuSubTrigger = /*#__PURE__*/ forwardRef(({ className, inset, chil
 ContextMenuSubTrigger.displayName = SubTrigger.displayName;
 const ContextMenuSubContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SubContent, {
         ref: ref,
+        "data-slot": "context-menu-sub-content",
         className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]', className),
         ...props
     }));
@@ -31,6 +60,7 @@ ContextMenuSubContent.displayName = SubContent.displayName;
 const ContextMenuContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Portal, {
         children: /*#__PURE__*/ jsx(Content, {
             ref: ref,
+            "data-slot": "context-menu-content",
             className: cn('z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]', className),
             ...props
         })
@@ -38,12 +68,14 @@ const ContextMenuContent = /*#__PURE__*/ forwardRef(({ className, ...props }, re
 ContextMenuContent.displayName = Content.displayName;
 const ContextMenuItem = /*#__PURE__*/ forwardRef(({ className, inset, ...props }, ref)=>/*#__PURE__*/ jsx(Item, {
         ref: ref,
+        "data-slot": "context-menu-item",
         className: cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', inset && 'pl-8', className),
         ...props
     }));
 ContextMenuItem.displayName = Item.displayName;
 const ContextMenuCheckboxItem = /*#__PURE__*/ forwardRef(({ className, children, checked, ...props }, ref)=>/*#__PURE__*/ jsxs(CheckboxItem, {
         ref: ref,
+        "data-slot": "context-menu-checkbox-item",
         className: cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className),
         checked: checked,
         ...props,
@@ -62,6 +94,7 @@ const ContextMenuCheckboxItem = /*#__PURE__*/ forwardRef(({ className, children,
 ContextMenuCheckboxItem.displayName = CheckboxItem.displayName;
 const ContextMenuRadioItem = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(RadioItem, {
         ref: ref,
+        "data-slot": "context-menu-radio-item",
         className: cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className),
         ...props,
         children: [
@@ -79,17 +112,20 @@ const ContextMenuRadioItem = /*#__PURE__*/ forwardRef(({ className, children, ..
 ContextMenuRadioItem.displayName = RadioItem.displayName;
 const ContextMenuLabel = /*#__PURE__*/ forwardRef(({ className, inset, ...props }, ref)=>/*#__PURE__*/ jsx(Label, {
         ref: ref,
+        "data-slot": "context-menu-label",
         className: cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', className),
         ...props
     }));
 ContextMenuLabel.displayName = Label.displayName;
 const ContextMenuSeparator = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Separator, {
         ref: ref,
+        "data-slot": "context-menu-separator",
         className: cn('-mx-1 my-1 h-px bg-border', className),
         ...props
     }));
 ContextMenuSeparator.displayName = Separator.displayName;
 const ContextMenuShortcut = ({ className, ...props })=>/*#__PURE__*/ jsx("span", {
+        "data-slot": "context-menu-shortcut",
         className: cn('ml-auto text-xs tracking-widest text-muted-foreground', className),
         ...props
     });

package/dist/components/ui/data-table.cjs

@@ -141,6 +141,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
         }
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        "data-slot": "data-table",
         className: "w-full",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -320,6 +321,7 @@ function DataTableColumnHeader({ column, title, children }) {
         else column.toggleSorting(false);
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+        "data-slot": "data-table-column-header",
         variant: "ghost",
         size: "sm",
         className: "-ml-3 h-8 max-w-full data-[state=open]:bg-accent",

package/dist/components/ui/data-table.js

@@ -111,6 +111,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
         }
     });
     return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "data-table",
         className: "w-full",
         children: [
             /*#__PURE__*/ jsxs("div", {
@@ -290,6 +291,7 @@ function DataTableColumnHeader({ column, title, children }) {
         else column.toggleSorting(false);
     };
     return /*#__PURE__*/ jsxs(Button, {
+        "data-slot": "data-table-column-header",
         variant: "ghost",
         size: "sm",
         className: "-ml-3 h-8 max-w-full data-[state=open]:bg-accent",

package/dist/components/ui/date-picker.cjs

@@ -25,22 +25,25 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    DatePicker: ()=>DatePicker,
-    DateRangePicker: ()=>DateRangePicker
+    DatePicker: ()=>date_picker_DatePicker,
+    DateRangePicker: ()=>date_picker_DateRangePicker
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_date_fns_namespaceObject = require("date-fns");
 const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_calendar_cjs_namespaceObject = require("./calendar.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-function DatePicker({ value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps }) {
+const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps }, ref) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+        "data-slot": "date-picker",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+                    ref: ref,
                     variant: "outline",
                     "aria-label": value ? `Selected date: ${(0, external_date_fns_namespaceObject.format)(value, 'PPP')}` : placeholder,
                     className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal', !value && 'text-muted-foreground', className),
@@ -65,13 +68,15 @@ function DatePicker({ value, onValueChange, disabled, placeholder = 'Pick a date
             })
         ]
     });
-}
-function DateRangePicker({ value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps }) {
+});
+const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps }, ref) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+        "data-slot": "date-range-picker",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+                    ref: ref,
                     variant: "outline",
                     "aria-label": value?.from ? value.to ? `Selected range: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')} to ${(0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')}` : `Selected date: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')}` : placeholder,
                     className: (0, index_cjs_namespaceObject.cn)('w-[300px] justify-start text-left font-normal', !value && 'text-muted-foreground', className),
@@ -106,7 +111,7 @@ function DateRangePicker({ value, onValueChange, disabled, placeholder = 'Pick a
             })
         ]
     });
-}
+});
 exports.DatePicker = __webpack_exports__.DatePicker;
 exports.DateRangePicker = __webpack_exports__.DateRangePicker;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/components/ui/date-picker.d.ts

@@ -1,5 +1,5 @@
 import type { DateRange } from 'react-day-picker';
-import type * as React from 'react';
+import * as React from 'react';
 import { Calendar } from './calendar';
 export interface DatePickerProps {
     value?: Date;
@@ -9,7 +9,7 @@ export interface DatePickerProps {
     className?: string;
     calendarProps?: Omit<React.ComponentProps<typeof Calendar>, 'mode' | 'selected' | 'onSelect' | 'initialFocus'>;
 }
-export declare function DatePicker({ value, onValueChange, disabled, placeholder, className, calendarProps, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
 export interface DateRangePickerProps {
     value?: DateRange;
     onValueChange?: (range: DateRange | undefined) => void;
@@ -18,4 +18,4 @@ export interface DateRangePickerProps {
     className?: string;
     calendarProps?: Omit<React.ComponentProps<typeof Calendar>, 'mode' | 'selected' | 'onSelect' | 'initialFocus' | 'defaultMonth' | 'numberOfMonths' | 'required'>;
 }
-export declare function DateRangePicker({ value, onValueChange, disabled, placeholder, className, calendarProps, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/date-picker.js

@@ -2,16 +2,19 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
+import { forwardRef } from "react";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
-function DatePicker({ value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps }) {
+const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps }, ref) {
     return /*#__PURE__*/ jsxs(Popover, {
+        "data-slot": "date-picker",
         children: [
             /*#__PURE__*/ jsx(PopoverTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ jsxs(Button, {
+                    ref: ref,
                     variant: "outline",
                     "aria-label": value ? `Selected date: ${format(value, 'PPP')}` : placeholder,
                     className: cn('w-full justify-start text-left font-normal', !value && 'text-muted-foreground', className),
@@ -36,13 +39,15 @@ function DatePicker({ value, onValueChange, disabled, placeholder = 'Pick a date
             })
         ]
     });
-}
-function DateRangePicker({ value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps }) {
+});
+const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps }, ref) {
     return /*#__PURE__*/ jsxs(Popover, {
+        "data-slot": "date-range-picker",
         children: [
             /*#__PURE__*/ jsx(PopoverTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ jsxs(Button, {
+                    ref: ref,
                     variant: "outline",
                     "aria-label": value?.from ? value.to ? `Selected range: ${format(value.from, 'LLL dd, y')} to ${format(value.to, 'LLL dd, y')}` : `Selected date: ${format(value.from, 'LLL dd, y')}` : placeholder,
                     className: cn('w-[300px] justify-start text-left font-normal', !value && 'text-muted-foreground', className),
@@ -77,5 +82,5 @@ function DateRangePicker({ value, onValueChange, disabled, placeholder = 'Pick a
             })
         ]
     });
-}
-export { DatePicker, DateRangePicker };
+});
+export { date_picker_DatePicker as DatePicker, date_picker_DateRangePicker as DateRangePicker };

package/dist/components/ui/datetime-picker.cjs

@@ -24,7 +24,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    DateTimePicker: ()=>DateTimePicker
+    DateTimePicker: ()=>datetime_picker_DateTimePicker
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
@@ -36,7 +36,7 @@ const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const external_input_cjs_namespaceObject = require("./input.cjs");
 const external_label_cjs_namespaceObject = require("./label.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-function DateTimePicker({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false }) {
+const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false }, ref) {
     const [open, setOpen] = external_react_namespaceObject.useState(false);
     const [selectedDate, setSelectedDate] = external_react_namespaceObject.useState(value);
     const [timeValue, setTimeValue] = external_react_namespaceObject.useState(value ? (0, external_date_fns_namespaceObject.format)(value, use12Hour ? 'hh:mm a' : 'HH:mm') : '');
@@ -68,12 +68,14 @@ function DateTimePicker({ value, onValueChange, disabled, placeholder = 'Pick a
         return `${datePart} at ${timePart}`;
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+        "data-slot": "datetime-picker",
         open: open,
         onOpenChange: setOpen,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+                    ref: ref,
                     variant: "outline",
                     className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal', !selectedDate && 'text-muted-foreground', className),
                     disabled: disabled,
@@ -144,7 +146,7 @@ function DateTimePicker({ value, onValueChange, disabled, placeholder = 'Pick a
             })
         ]
     });
-}
+});
 exports.DateTimePicker = __webpack_exports__.DateTimePicker;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "DateTimePicker"

package/dist/components/ui/datetime-picker.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 export interface DateTimePickerProps {
     value?: Date;
     onValueChange?: (date: Date | undefined) => void;
@@ -6,4 +7,4 @@ export interface DateTimePickerProps {
     className?: string;
     use12Hour?: boolean;
 }
-export declare function DateTimePicker({ value, onValueChange, disabled, placeholder, className, use12Hour, }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/datetime-picker.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { forwardRef, useState } from "react";
 import { format } from "date-fns";
 import { CalendarIcon, Clock } from "lucide-react";
 import { Button } from "./button.js";
@@ -8,7 +8,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
 import { cn } from "../../lib/index.js";
-function DateTimePicker({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false }) {
+const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false }, ref) {
     const [open, setOpen] = useState(false);
     const [selectedDate, setSelectedDate] = useState(value);
     const [timeValue, setTimeValue] = useState(value ? format(value, use12Hour ? 'hh:mm a' : 'HH:mm') : '');
@@ -40,12 +40,14 @@ function DateTimePicker({ value, onValueChange, disabled, placeholder = 'Pick a
         return `${datePart} at ${timePart}`;
     };
     return /*#__PURE__*/ jsxs(Popover, {
+        "data-slot": "datetime-picker",
         open: open,
         onOpenChange: setOpen,
         children: [
             /*#__PURE__*/ jsx(PopoverTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ jsxs(Button, {
+                    ref: ref,
                     variant: "outline",
                     className: cn('w-full justify-start text-left font-normal', !selectedDate && 'text-muted-foreground', className),
                     disabled: disabled,
@@ -116,5 +118,5 @@ function DateTimePicker({ value, onValueChange, disabled, placeholder = 'Pick a
             })
         ]
     });
-}
-export { DateTimePicker };
+});
+export { datetime_picker_DateTimePicker as DateTimePicker };

package/dist/components/ui/dialog.cjs

@@ -71,7 +71,7 @@ const dialog_DialogClose = /*#__PURE__*/ external_react_namespaceObject.forwardR
 const dialog_DialogOverlay = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dialog_namespaceObject.Overlay, {
         "data-slot": "dialog-overlay",
-        className: (0, index_cjs_namespaceObject.cn)('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed flex items-center justify-center inset-0 z-50 bg-black/50', className),
+        className: (0, index_cjs_namespaceObject.cn)('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed flex items-center justify-center inset-0 z-50 bg-curtain', className),
         ref: ref,
         ...props
     });

package/dist/components/ui/dialog.js

@@ -34,7 +34,7 @@ const dialog_DialogClose = /*#__PURE__*/ forwardRef(function(props, ref) {
 const dialog_DialogOverlay = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Overlay, {
         "data-slot": "dialog-overlay",
-        className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed flex items-center justify-center inset-0 z-50 bg-black/50', className),
+        className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed flex items-center justify-center inset-0 z-50 bg-curtain', className),
         ref: ref,
         ...props
     });

package/dist/components/ui/drawer.cjs

@@ -40,13 +40,32 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const external_vaul_namespaceObject = require("vaul");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const Drawer = external_vaul_namespaceObject.Drawer.Root;
-const DrawerTrigger = external_vaul_namespaceObject.Drawer.Trigger;
-const DrawerPortal = external_vaul_namespaceObject.Drawer.Portal;
-const DrawerClose = external_vaul_namespaceObject.Drawer.Close;
+const Drawer = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_vaul_namespaceObject.Drawer.Root, {
+        "data-slot": "drawer",
+        ...props
+    });
+Drawer.displayName = 'Drawer';
+const DrawerTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef((props, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_vaul_namespaceObject.Drawer.Trigger, {
+        ref: ref,
+        "data-slot": "drawer-trigger",
+        ...props
+    }));
+DrawerTrigger.displayName = 'DrawerTrigger';
+const DrawerPortal = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_vaul_namespaceObject.Drawer.Portal, {
+        "data-slot": "drawer-portal",
+        ...props
+    });
+DrawerPortal.displayName = 'DrawerPortal';
+const DrawerClose = /*#__PURE__*/ external_react_namespaceObject.forwardRef((props, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_vaul_namespaceObject.Drawer.Close, {
+        ref: ref,
+        "data-slot": "drawer-close",
+        ...props
+    }));
+DrawerClose.displayName = 'DrawerClose';
 const DrawerOverlay = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_vaul_namespaceObject.Drawer.Overlay, {
         ref: ref,
-        className: (0, index_cjs_namespaceObject.cn)('fixed inset-0 z-50 bg-black/80', className),
+        "data-slot": "drawer-overlay",
+        className: (0, index_cjs_namespaceObject.cn)('fixed inset-0 z-50 bg-curtain', className),
         ...props
     }));
 DrawerOverlay.displayName = external_vaul_namespaceObject.Drawer.Overlay.displayName;
@@ -55,6 +74,7 @@ const DrawerContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DrawerOverlay, {}),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_vaul_namespaceObject.Drawer.Content, {
                 ref: ref,
+                "data-slot": "drawer-content",
                 className: (0, index_cjs_namespaceObject.cn)('fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background', className),
                 ...props,
                 children: [
@@ -68,23 +88,27 @@ const DrawerContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({
     }));
 DrawerContent.displayName = 'DrawerContent';
 const DrawerHeader = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        "data-slot": "drawer-header",
         className: (0, index_cjs_namespaceObject.cn)('grid gap-1.5 p-4 text-center sm:text-left', className),
         ...props
     });
 DrawerHeader.displayName = 'DrawerHeader';
 const DrawerFooter = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        "data-slot": "drawer-footer",
         className: (0, index_cjs_namespaceObject.cn)('mt-auto flex flex-col gap-2 p-4', className),
         ...props
     });
 DrawerFooter.displayName = 'DrawerFooter';
 const DrawerTitle = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_vaul_namespaceObject.Drawer.Title, {
         ref: ref,
+        "data-slot": "drawer-title",
         className: (0, index_cjs_namespaceObject.cn)('text-lg font-semibold leading-none tracking-tight', className),
         ...props
     }));
 DrawerTitle.displayName = external_vaul_namespaceObject.Drawer.Title.displayName;
 const DrawerDescription = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_vaul_namespaceObject.Drawer.Description, {
         ref: ref,
+        "data-slot": "drawer-description",
         className: (0, index_cjs_namespaceObject.cn)('text-sm text-muted-foreground', className),
         ...props
     }));

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

@@ -1,8 +1,15 @@
 import * as React from 'react';
-declare const Drawer: typeof import("vaul").Root;
-declare const DrawerTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const DrawerPortal: typeof import("vaul").Portal;
-declare const DrawerClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+import { Drawer as DrawerPrimitive } from 'vaul';
+declare const Drawer: {
+    (props: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: {
+    (props: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+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/drawer.js

@@ -3,13 +3,32 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Drawer } from "vaul";
 import { cn } from "../../lib/index.js";
-const drawer_Drawer = Drawer.Root;
-const DrawerTrigger = Drawer.Trigger;
-const DrawerPortal = Drawer.Portal;
-const DrawerClose = Drawer.Close;
+const drawer_Drawer = (props)=>/*#__PURE__*/ jsx(Drawer.Root, {
+        "data-slot": "drawer",
+        ...props
+    });
+drawer_Drawer.displayName = 'Drawer';
+const DrawerTrigger = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Drawer.Trigger, {
+        ref: ref,
+        "data-slot": "drawer-trigger",
+        ...props
+    }));
+DrawerTrigger.displayName = 'DrawerTrigger';
+const DrawerPortal = (props)=>/*#__PURE__*/ jsx(Drawer.Portal, {
+        "data-slot": "drawer-portal",
+        ...props
+    });
+DrawerPortal.displayName = 'DrawerPortal';
+const DrawerClose = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Drawer.Close, {
+        ref: ref,
+        "data-slot": "drawer-close",
+        ...props
+    }));
+DrawerClose.displayName = 'DrawerClose';
 const DrawerOverlay = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Overlay, {
         ref: ref,
-        className: cn('fixed inset-0 z-50 bg-black/80', className),
+        "data-slot": "drawer-overlay",
+        className: cn('fixed inset-0 z-50 bg-curtain', className),
         ...props
     }));
 DrawerOverlay.displayName = Drawer.Overlay.displayName;
@@ -18,6 +37,7 @@ const DrawerContent = /*#__PURE__*/ forwardRef(({ className, children, ...props
             /*#__PURE__*/ jsx(DrawerOverlay, {}),
             /*#__PURE__*/ jsxs(Drawer.Content, {
                 ref: ref,
+                "data-slot": "drawer-content",
                 className: cn('fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background', className),
                 ...props,
                 children: [
@@ -31,23 +51,27 @@ const DrawerContent = /*#__PURE__*/ forwardRef(({ className, children, ...props
     }));
 DrawerContent.displayName = 'DrawerContent';
 const DrawerHeader = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
+        "data-slot": "drawer-header",
         className: cn('grid gap-1.5 p-4 text-center sm:text-left', className),
         ...props
     });
 DrawerHeader.displayName = 'DrawerHeader';
 const DrawerFooter = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
+        "data-slot": "drawer-footer",
         className: cn('mt-auto flex flex-col gap-2 p-4', className),
         ...props
     });
 DrawerFooter.displayName = 'DrawerFooter';
 const DrawerTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Title, {
         ref: ref,
+        "data-slot": "drawer-title",
         className: cn('text-lg font-semibold leading-none tracking-tight', className),
         ...props
     }));
 DrawerTitle.displayName = Drawer.Title.displayName;
 const DrawerDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Description, {
         ref: ref,
+        "data-slot": "drawer-description",
         className: cn('text-sm text-muted-foreground', className),
         ...props
     }));