@hilum/ui 3.6.3 → 3.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "3.6.3",
+  "version": "3.6.5",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",

package/src/components/combobox.tsx

@@ -181,21 +181,21 @@ function Combobox({
           <button
             type="button"
             aria-label="Close options"
-            className="fixed inset-0 z-40 hidden bg-black/30 backdrop-blur-sm max-sm:block"
+            className="fixed inset-0 z-40 hidden bg-black/30 backdrop-blur-sm max-md:block"
             onClick={closeDropdown}
           />
           <div
             className={cn(
               "absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-card shadow-elevated",
-              "max-sm:fixed max-sm:inset-x-3 max-sm:bottom-3 max-sm:[bottom:max(0.75rem,env(safe-area-inset-bottom))] max-sm:top-auto max-sm:mt-0 max-sm:w-auto",
-              "max-sm:max-h-[min(70dvh,28rem)] max-sm:rounded-2xl max-sm:p-2 max-sm:pt-5",
-              "max-sm:before:absolute max-sm:before:left-1/2 max-sm:before:top-2 max-sm:before:h-1 max-sm:before:w-9 max-sm:before:-translate-x-1/2 max-sm:before:rounded-full max-sm:before:bg-muted-foreground/35",
+              "max-md:fixed max-md:inset-x-3 max-md:bottom-3 max-md:[bottom:max(0.75rem,env(safe-area-inset-bottom))] max-md:top-auto max-md:mt-0 max-md:w-auto",
+              "max-md:max-h-[min(70dvh,28rem)] max-md:rounded-2xl max-md:p-2 max-md:pt-5",
+              "max-md:before:absolute max-md:before:left-1/2 max-md:before:top-2 max-md:before:h-1 max-md:before:w-9 max-md:before:-translate-x-1/2 max-md:before:rounded-full max-md:before:bg-muted-foreground/35",
             )}
           >
             <ul
               id={listboxId}
               role="listbox"
-              className="max-h-60 overflow-auto py-1 max-sm:max-h-[calc(min(70dvh,28rem)-3rem)]"
+              className="max-h-60 overflow-auto py-1 max-md:max-h-[calc(min(70dvh,28rem)-3rem)]"
             >
               {filtered.length === 0 ? (
                 <li className="px-3 py-2 body text-muted-foreground">{emptyText}</li>

package/src/components/context-menu.tsx

@@ -32,7 +32,7 @@ const ContextMenuContent = React.forwardRef<
           "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
           mobilePopperSheetPositionClassName,
           mobilePopperSheetSurfaceClassName,
-          "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+          "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
           "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",
@@ -184,7 +184,7 @@ const ContextMenuSubContent = React.forwardRef<
         "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
         mobilePopperSheetPositionClassName,
         mobilePopperSheetSurfaceClassName,
-        "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
         "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",

package/src/components/dialog.tsx

@@ -84,10 +84,10 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
       size === "sm"
         ? container
           ? "max-w-[400px]"
-          : "sm:max-w-[400px]"
+          : "lg:max-w-[400px]"
         : container
           ? "max-w-[540px]"
-          : "sm:max-w-[540px]";
+          : "lg:max-w-[540px]";
 
     return (
       <DialogPrimitive.Portal forceMount container={container ?? undefined}>

package/src/components/dropdown-menu.tsx

@@ -39,7 +39,7 @@ const DropdownMenuContent = React.forwardRef<
           "z-50 min-w-[8rem] rounded-xl border border-border bg-card p-1 shadow-elevated",
           mobilePopperSheetPositionClassName,
           mobilePopperSheetSurfaceClassName,
-          "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+          "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
           "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",
@@ -193,7 +193,7 @@ const DropdownMenuSubContent = React.forwardRef<
         "z-50 min-w-[8rem] rounded-xl border border-border bg-card p-1 shadow-elevated",
         mobilePopperSheetPositionClassName,
         mobilePopperSheetSurfaceClassName,
-        "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
         "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",

package/src/components/menubar.tsx

@@ -69,7 +69,7 @@ const MenubarContent = React.forwardRef<
           "z-50 min-w-[12rem] bg-card rounded-xl shadow-natural p-1",
           mobilePopperSheetPositionClassName,
           mobilePopperSheetSurfaceClassName,
-          "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+          "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
           "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",
@@ -214,7 +214,7 @@ const MenubarSubContent = React.forwardRef<
         "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
         mobilePopperSheetPositionClassName,
         mobilePopperSheetSurfaceClassName,
-        "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
         "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",

package/src/components/popover.tsx

@@ -32,7 +32,7 @@ const PopoverContent = React.forwardRef<
           motionClasses,
           mobilePopperSheetPositionClassName,
           mobilePopperSheetSurfaceClassName,
-          "max-sm:overflow-y-auto max-sm:px-4 max-sm:pb-4 max-sm:pt-6",
+          "max-md:overflow-y-auto max-md:px-4 max-md:pb-4 max-md:pt-6",
           "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",

package/src/components/select.tsx

@@ -448,7 +448,7 @@ const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
               }}
               onKeyDown={handleKeyDown}
               className={cn(
-                `relative flex flex-col gap-0.5 max-h-[300px] overflow-y-auto ${shape.container} p-1 select-none outline-none max-sm:!fixed max-sm:rounded-2xl max-sm:data-[state=open]:slide-in-from-bottom`,
+                `relative flex flex-col gap-0.5 max-h-[300px] overflow-y-auto ${shape.container} p-1 select-none outline-none max-md:!fixed max-md:rounded-2xl max-md:data-[state=open]:slide-in-from-bottom`,
                 className,
               )}
             >

package/src/lib/mobile-popper-sheet.ts

@@ -1,35 +1,36 @@
 export const mobileDialogSheetContentClassName = [
   "fixed inset-x-0 bottom-0 z-50 max-h-[calc(100dvh-1rem)] w-full overflow-y-auto",
+  "max-lg:!w-full max-lg:!max-w-none max-lg:!rounded-b-none",
   "rounded-t-2xl border border-border bg-card p-6 shadow-elevated",
-  "max-sm:pb-[calc(1.5rem+env(safe-area-inset-bottom))] max-sm:pt-8",
-  "max-sm:before:absolute max-sm:before:left-1/2 max-sm:before:top-3 max-sm:before:h-1 max-sm:before:w-9",
-  "max-sm:before:-translate-x-1/2 max-sm:before:rounded-full max-sm:before:bg-muted-foreground/35",
+  "max-lg:pb-[calc(1.5rem+env(safe-area-inset-bottom))] max-lg:pt-8",
+  "max-lg:before:absolute max-lg:before:left-1/2 max-lg:before:top-3 max-lg:before:h-1 max-lg:before:w-9",
+  "max-lg:before:-translate-x-1/2 max-lg:before:rounded-full max-lg:before:bg-muted-foreground/35",
 ].join(" ");
 
 export const desktopDialogContentClassName =
-  "sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:max-h-[calc(100dvh-2rem)] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-2xl";
+  "lg:bottom-auto lg:left-1/2 lg:top-1/2 lg:max-h-[calc(100dvh-2rem)] lg:-translate-x-1/2 lg:-translate-y-1/2 lg:rounded-2xl";
 
 export const dialogSheetMotionClassName = [
   "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]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-  "sm:data-[state=closed]:zoom-out-95 sm:data-[state=open]:zoom-in-95",
+  "lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95",
 ].join(" ");
 
 export const mobilePopperSheetPositionClassName = [
-  "max-sm:!fixed max-sm:!inset-x-3 max-sm:!bottom-3 max-sm:!top-auto max-sm:!left-3 max-sm:!right-3",
-  "max-sm:!w-auto max-sm:!min-w-0 max-sm:!max-w-none max-sm:!transform-none",
+  "max-md:!fixed max-md:!inset-x-3 max-md:!bottom-3 max-md:!top-auto max-md:!left-3 max-md:!right-3",
+  "max-md:!w-auto max-md:!min-w-0 max-md:!max-w-none max-md:!transform-none",
 ].join(" ");
 
 export const mobilePopperSheetSurfaceClassName =
-  "max-sm:max-h-[min(70dvh,28rem)] max-sm:rounded-2xl max-sm:border max-sm:border-border max-sm:shadow-elevated";
+  "max-md:max-h-[min(70dvh,28rem)] max-md:rounded-2xl max-md:border max-md:border-border max-md:shadow-elevated";
 
 export const mobilePopperSheetMotionClassName = [
-  "max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=open]:slide-in-from-bottom",
+  "max-md:data-[state=closed]:slide-out-to-bottom max-md:data-[state=open]:slide-in-from-bottom",
 ].join(" ");
 
 export const mobilePopperSheetStyle = `
-@media (max-width: 639px) {
+@media (max-width: 767px) {
   [data-radix-popper-content-wrapper]:has([data-hilum-mobile-sheet="true"]) {
     position: fixed !important;
     inset: 0 !important;