@arolariu/components 0.0.38 → 0.0.39

package/src/components/ui/command.tsx

@@ -22,7 +22,7 @@ function Command({
       data-slot="command"
       className={cn(
         "bg-white text-neutral-950 flex h-full w-full flex-col overflow-hidden rounded-md dark:bg-neutral-950 dark:text-neutral-50",
-        className
+        className,
       )}
       {...props}
     />
@@ -33,10 +33,14 @@ function CommandDialog({
   title = "Command Palette",
   description = "Search for a command to run...",
   children,
+  className,
+  showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
   title?: string;
   description?: string;
+  className?: string;
+  showCloseButton?: boolean;
 }) {
   return (
     <Dialog {...props}>
@@ -44,7 +48,10 @@ function CommandDialog({
         <DialogTitle>{title}</DialogTitle>
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
-      <DialogContent className="overflow-hidden p-0">
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
         <Command className="[&_[cmdk-group-heading]]:text-neutral-500 **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 dark:[&_[cmdk-group-heading]]:text-neutral-400">
           {children}
         </Command>
@@ -67,7 +74,7 @@ function CommandInput({
         data-slot="command-input"
         className={cn(
           "placeholder:text-neutral-500 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-neutral-400",
-          className
+          className,
         )}
         {...props}
       />
@@ -84,7 +91,7 @@ function CommandList({
       data-slot="command-list"
       className={cn(
         "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
+        className,
       )}
       {...props}
     />
@@ -112,7 +119,7 @@ function CommandGroup({
       data-slot="command-group"
       className={cn(
         "text-neutral-950 [&_[cmdk-group-heading]]:text-neutral-500 overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium dark:text-neutral-50 dark:[&_[cmdk-group-heading]]:text-neutral-400",
-        className
+        className,
       )}
       {...props}
     />
@@ -141,7 +148,7 @@ function CommandItem({
       data-slot="command-item"
       className={cn(
         "data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-900 [&_svg:not([class*='text-'])]:text-neutral-500 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:data-[selected=true]:bg-neutral-800 dark:data-[selected=true]:text-neutral-50 dark:[&_svg:not([class*='text-'])]:text-neutral-400",
-        className
+        className,
       )}
       {...props}
     />
@@ -157,7 +164,7 @@ function CommandShortcut({
       data-slot="command-shortcut"
       className={cn(
         "text-neutral-500 ml-auto text-xs tracking-widest dark:text-neutral-400",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/ui/context-menu.tsx

@@ -67,7 +67,7 @@ function ContextMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -86,7 +86,7 @@ function ContextMenuSubContent({
       data-slot="context-menu-sub-content"
       className={cn(
         "bg-white text-neutral-950 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border border-neutral-200 p-1 shadow-lg dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-        className
+        className,
       )}
       {...props}
     />
@@ -103,7 +103,7 @@ function ContextMenuContent({
         data-slot="context-menu-content"
         className={cn(
           "bg-white text-neutral-950 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-neutral-200 p-1 shadow-md dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-          className
+          className,
         )}
         {...props}
       />
@@ -127,7 +127,7 @@ function ContextMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-neutral-100 focus:text-neutral-900 data-[variant=destructive]:text-red-500 data-[variant=destructive]:focus:bg-red-500/10 dark:data-[variant=destructive]:focus:bg-red-500/20 data-[variant=destructive]:focus:text-red-500 data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-neutral-500 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[variant=destructive]:text-red-900 dark:data-[variant=destructive]:focus:bg-red-900/10 dark:dark:data-[variant=destructive]:focus:bg-red-900/20 dark:data-[variant=destructive]:focus:text-red-900 dark:[&_svg:not([class*='text-'])]:text-neutral-400",
-        className
+        className,
       )}
       {...props}
     />
@@ -145,7 +145,7 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       className={cn(
         "focus:bg-neutral-100 focus:text-neutral-900 relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
-        className
+        className,
       )}
       checked={checked}
       {...props}
@@ -170,7 +170,7 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       className={cn(
         "focus:bg-neutral-100 focus:text-neutral-900 relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -197,7 +197,7 @@ function ContextMenuLabel({
       data-inset={inset}
       className={cn(
         "text-neutral-950 px-2 py-1.5 text-sm font-medium data-[inset]:pl-8 dark:text-neutral-50",
-        className
+        className,
       )}
       {...props}
     />
@@ -213,7 +213,7 @@ function ContextMenuSeparator({
       data-slot="context-menu-separator"
       className={cn(
         "bg-neutral-200 -mx-1 my-1 h-px dark:bg-neutral-800",
-        className
+        className,
       )}
       {...props}
     />
@@ -229,7 +229,7 @@ function ContextMenuShortcut({
       data-slot="context-menu-shortcut"
       className={cn(
         "text-neutral-500 ml-auto text-xs tracking-widest dark:text-neutral-400",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/ui/counting-number.tsx

@@ -36,7 +36,7 @@ const CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(
       className,
       ...props
     },
-    ref
+    ref,
   ) => {
     const localRef = React.useRef<HTMLSpanElement>(null);
     React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);
@@ -46,8 +46,8 @@ const CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(
       typeof decimalPlaces === "number"
         ? decimalPlaces
         : numberStr.includes(".")
-        ? numberStr.split(".")[1].length
-        : 0;
+          ? numberStr.split(".")[1].length
+          : 0;
 
     const motionVal = useMotionValue(fromNumber);
     const springVal = useSpring(motionVal, transition);
@@ -100,7 +100,7 @@ const CountingNumber = React.forwardRef<HTMLSpanElement, CountingNumberProps>(
         {initialText}
       </span>
     );
-  }
+  },
 );
 
 CountingNumber.displayName = "CountingNumber";

package/src/components/ui/dialog.tsx

@@ -39,7 +39,7 @@ function DialogOverlay({
       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 inset-0 z-50 bg-black/50",
-        className
+        className,
       )}
       {...props}
     />
@@ -49,8 +49,11 @@ function DialogOverlay({
 function DialogContent({
   className,
   children,
+  showCloseButton = true,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
@@ -58,15 +61,20 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "bg-white 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-neutral-200 p-6 shadow-lg duration-200 sm:max-w-lg dark:bg-neutral-950 dark:border-neutral-800",
-          className
+          className,
         )}
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="ring-offset-white focus:ring-neutral-950 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400">
-          <XIcon />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-white focus:ring-neutral-950 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
       </DialogPrimitive.Content>
     </DialogPortal>
   );
@@ -88,7 +96,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="dialog-footer"
       className={cn(
         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
+        className,
       )}
       {...props}
     />
@@ -117,7 +125,7 @@ function DialogDescription({
       data-slot="dialog-description"
       className={cn(
         "text-neutral-500 text-sm dark:text-neutral-400",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/ui/dot-background.tsx

@@ -104,7 +104,7 @@ export function DotBackground({
         delay: Math.random() * 5,
         duration: Math.random() * 3 + 2,
       };
-    }
+    },
   );
 
   return (
@@ -113,7 +113,7 @@ export function DotBackground({
       aria-hidden="true"
       className={cn(
         "pointer-events-none absolute inset-0 h-full w-full",
-        className
+        className,
       )}
       {...props}
     >

package/src/components/ui/drawer.tsx

@@ -76,7 +76,10 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className,
+      )}
       {...props}
     />
   );