@vvedantb/ui 0.34.0 → 0.36.0

package/src/ui/command.tsx

@@ -150,7 +150,7 @@ const CommandList = React.forwardRef<
   return (
     <CommandPrimitive.List
       ref={ref}
-      className={merge(list ?? "max-h-80 overflow-y-auto overflow-x-hidden pb-2", className)}
+      className={merge(list ?? "max-h-80 max-sm:max-h-[60dvh] overflow-y-auto overflow-x-hidden pb-2", className)}
       {...props}
     />
   );
@@ -225,7 +225,7 @@ const CommandItem = React.forwardRef<
       ref={ref}
       className={merge(
         item ??
-          "relative flex cursor-default gap-2 select-none items-center rounded-menu-item px-2.5 py-2 text-sm outline-none transition-colors data-[disabled=true]:pointer-events-none data-[selected=true]:bg-surface-tertiary/80 data-[selected=true]:text-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+          "relative flex cursor-default gap-2 select-none items-center rounded-menu-item px-2.5 py-2 max-sm:min-h-10 text-sm outline-none transition-colors data-[disabled=true]:pointer-events-none data-[selected=true]:bg-surface-tertiary/80 data-[selected=true]:text-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
       {...props}

package/src/ui/context-menu.tsx

@@ -24,7 +24,7 @@ import { useCn, useUiConfig } from "./ui-config";
 
 /** App defaults for `ContextMenu*` (see `UiConfigProvider`). */
 export interface ContextMenuConfig extends MenuConfig {
-  /** Default for `ContextMenuSubContent` `portal`. */
+  /** Default for `ContextMenuSubContent` `portal` (built-in: `true`). */
   subContentPortal?: boolean;
 }
 
@@ -88,7 +88,7 @@ const ContextMenuSubContent = React.forwardRef<
       {...props}
     />
   );
-  return (portal ?? config?.subContentPortal) ? (
+  return (portal ?? config?.subContentPortal ?? true) ? (
     <ContextMenuPrimitive.Portal>{content}</ContextMenuPrimitive.Portal>
   ) : (
     content
@@ -109,7 +109,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Content
         ref={ref}
-        collisionPadding={collisionPadding ?? config?.collisionPadding}
+        collisionPadding={collisionPadding ?? config?.collisionPadding ?? 8}
         className={merge(config?.classes?.content ?? [menuContentClass, "w-40"], className)}
         onKeyDown={suppressAltKey ? suppressAltKeyDown(onKeyDown) : onKeyDown}
         {...props}

package/src/ui/dropdown-menu.tsx

@@ -127,7 +127,7 @@ const DropdownMenuContent = React.forwardRef<
         <DropdownMenuPrimitive.Content
           ref={ref}
           sideOffset={sideOffset ?? config?.sideOffset ?? 4}
-          collisionPadding={collisionPadding ?? config?.collisionPadding}
+          collisionPadding={collisionPadding ?? config?.collisionPadding ?? 8}
           className={merge(
             config?.classes?.content ?? menuContentClass,
             fitViewport && fitViewportClass,

package/src/ui/hover-card.tsx

@@ -16,7 +16,7 @@ export interface HoverCardConfig {
   closeDelay?: number;
   /** Default for `HoverCardContent` `sideOffset`. */
   sideOffset?: number;
-  /** Default for `HoverCardContent` `portal`. */
+  /** Default for `HoverCardContent` `portal` (built-in: `true`). */
   portal?: boolean;
 }
 
@@ -40,7 +40,7 @@ const HoverCardTrigger = HoverCardPrimitive.Trigger;
 const HoverCardContent = React.forwardRef<
   React.ComponentRef<typeof HoverCardPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> & {
-    /** Render into `document.body` so a clipping parent cannot cut it off. */
+    /** Render into `document.body` so a clipping parent cannot cut it off (default `true`). */
     portal?: boolean;
   }
 >(({ className, align = "center", sideOffset, portal, ...props }, ref) => {
@@ -62,7 +62,7 @@ const HoverCardContent = React.forwardRef<
       {...props}
     />
   );
-  return (portal ?? config?.portal) ? (
+  return (portal ?? config?.portal ?? true) ? (
     <HoverCardPrimitive.Portal>{content}</HoverCardPrimitive.Portal>
   ) : (
     content

package/src/ui/input-group.tsx

@@ -116,10 +116,10 @@ function InputGroupAddon({
 const inputGroupButtonBaseClasses = "text-sm shadow-none flex gap-2 items-center";
 
 const inputGroupButtonSizeClasses = {
-  xs: "h-7 gap-1 rounded-lg px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-  sm: "h-8 rounded-lg px-2.5 gap-1.5 text-xs has-[>svg]:px-2.5",
-  "icon-xs": "size-7 rounded-lg p-0 has-[>svg]:p-0",
-  "icon-sm": "size-8 rounded-lg p-0 has-[>svg]:p-0",
+  xs: "h-7 gap-1 rounded-lg px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2 max-sm:hit-target",
+  sm: "h-8 rounded-lg px-2.5 gap-1.5 text-xs has-[>svg]:px-2.5 max-sm:hit-target",
+  "icon-xs": "size-7 rounded-lg p-0 has-[>svg]:p-0 max-sm:hit-target",
+  "icon-sm": "size-8 rounded-lg p-0 has-[>svg]:p-0 max-sm:hit-target",
 };
 
 const inputGroupButtonVariants = cva(inputGroupButtonBaseClasses, {

package/src/ui/popover.tsx

@@ -15,7 +15,7 @@ export interface PopoverConfig {
   classes?: { trigger?: string; content?: string };
   /** Default for `PopoverContent` `sideOffset`. */
   sideOffset?: number;
-  /** Default for `PopoverContent` `collisionPadding`. */
+  /** Default for `PopoverContent` `collisionPadding` (built-in: `8`). */
   collisionPadding?: PopoverContentProps["collisionPadding"];
 }
 
@@ -40,22 +40,20 @@ const PopoverContent = React.forwardRef<
   React.ComponentRef<typeof PopoverPrimitive.Content>,
   PopoverContentProps & {
     /**
-     * Grow from the trigger, keep 8px from the viewport edge (unless
-     * `collisionPadding` is set) and, on small screens, cap width and height.
+     * Grow from the trigger and, on small screens, cap width and height.
      */
     fitViewport?: boolean;
   }
 >(({ className, align = "center", sideOffset, fitViewport, collisionPadding, ...props }, ref) => {
   const config = useUiConfig("Popover");
   const merge = useCn();
-  const padding = collisionPadding ?? config?.collisionPadding;
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
         ref={ref}
         align={align}
         sideOffset={sideOffset ?? config?.sideOffset ?? 6}
-        collisionPadding={fitViewport ? (padding ?? 8) : padding}
+        collisionPadding={collisionPadding ?? config?.collisionPadding ?? 8}
         className={merge(
           config?.classes?.content ?? [
             "z-50 w-72 max-sm:max-w-[calc(100vw-2rem)] max-sm:max-h-[85dvh] max-sm:overflow-y-auto p-4 outline-none",

package/src/ui/search-input.tsx

@@ -7,7 +7,7 @@ import { Kbd } from "./kbd";
 import { useCn, useUiConfig } from "./ui-config";
 
 const sizeClasses = {
-  sm: { input: "h-8 pl-8 text-sm", icon: "left-2" },
+  sm: { input: "h-8 pl-8 text-base sm:text-sm", icon: "left-2" },
   md: { input: "h-10 pl-9", icon: "left-3" },
 };
 

package/src/ui/select.tsx

@@ -33,9 +33,9 @@ export interface SelectConfig {
     /** `SelectItem` indicator. */
     check?: React.ReactNode;
   };
-  /** Adds `data-slot="select-trigger"` to the trigger, for parent selectors such as `ButtonGroup`'s. */
+  /** Adds `data-slot="select-trigger"` to the trigger, for parent selectors such as `ButtonGroup`'s (built-in: `true`). */
   triggerSlot?: boolean;
-  /** Default for `SelectContent` `collisionPadding`. */
+  /** Default for `SelectContent` `collisionPadding` (built-in: `8`). */
   collisionPadding?: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
 }
 
@@ -52,7 +52,7 @@ const SelectTrigger = React.forwardRef<
   return (
     <SelectPrimitive.Trigger
       ref={ref}
-      data-slot={config?.triggerSlot ? "select-trigger" : undefined}
+      data-slot={(config?.triggerSlot ?? true) ? "select-trigger" : undefined}
       className={merge(
         config?.classes?.trigger ?? [
           "flex h-10 w-full max-sm:min-w-0 items-center justify-between whitespace-nowrap rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm ring-offset-background placeholder:text-field-placeholder transition-[border-color,box-shadow,background-color] duration-200 ease-smooth disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
@@ -127,10 +127,10 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         ref={ref}
-        collisionPadding={collisionPadding ?? config?.collisionPadding}
+        collisionPadding={collisionPadding ?? config?.collisionPadding ?? 8}
         className={merge(
           classes?.content ?? [
-            "relative z-50 max-h-96 min-w-32 overflow-hidden outline-none",
+            "relative z-50 max-h-96 max-sm:max-h-[85dvh] min-w-32 overflow-hidden outline-none",
             floatingSurfaceClass,
             floatingSurfaceAnimateClass,
           ],

package/src/ui/sonner.tsx

@@ -135,6 +135,9 @@ function createToasterClassNames({
     // `unstyled` drops sonner's `[data-content]` grow, so the text column grows
     // here and the action and cancel buttons sit at the right edge.
     content: "flex min-w-0 grow flex-col",
+    // `unstyled` also drops sonner's `position: relative` on `[data-icon]`, so
+    // the absolutely positioned `.sonner-loader` anchors here, not to the toast.
+    icon: "relative",
     title: titleLeading === "5" ? "font-medium leading-5" : "font-medium leading-snug",
     description: descriptionMuted
       ? `${descriptionSize} leading-snug text-muted-foreground!`

package/src/ui/tooltip.tsx

@@ -10,7 +10,7 @@ export interface TooltipConfig {
   delayDuration?: number;
   /** Default for `TooltipContent` `sideOffset`. */
   sideOffset?: number;
-  /** Default for `TooltipContent` `portal`. */
+  /** Default for `TooltipContent` `portal` (built-in: `true`). */
   portal?: boolean;
 }
 
@@ -32,7 +32,7 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipContent = React.forwardRef<
   React.ComponentRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
-    /** Render into `document.body` so a clipping parent cannot cut it off. */
+    /** Render into `document.body` so a clipping parent cannot cut it off (default `true`). */
     portal?: boolean;
   }
 >(({ className, sideOffset, portal, ...props }, ref) => {
@@ -50,7 +50,7 @@ const TooltipContent = React.forwardRef<
       {...props}
     />
   );
-  return (portal ?? config?.portal) ? (
+  return (portal ?? config?.portal ?? true) ? (
     <TooltipPrimitive.Portal>{content}</TooltipPrimitive.Portal>
   ) : (
     content