@hilum/ui 3.6.5 → 3.6.7

package/package.json

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

package/src/components/alert-dialog.tsx

@@ -7,6 +7,7 @@ import { focusRingClasses, motionClasses, pressClasses } from "../lib/interactio
 import {
   desktopDialogContentClassName,
   dialogSheetMotionClassName,
+  mobileDialogSheetStyle,
   mobileDialogSheetContentClassName,
 } from "../lib/mobile-popper-sheet";
 
@@ -37,13 +38,15 @@ const AlertDialogContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof AlertDialog.Content>
 >(({ className, children, ...props }, ref) => (
   <AlertDialog.Portal>
+    <style>{mobileDialogSheetStyle}</style>
     <AlertDialogOverlay />
     <AlertDialog.Content
       ref={ref}
+      data-hilum-dialog-sheet="true"
       className={cn(
         mobileDialogSheetContentClassName,
         desktopDialogContentClassName,
-        "border border-border shadow-elevated sm:max-w-md",
+        "border border-border shadow-elevated max-w-md",
         dialogSheetMotionClassName,
         className,
       )}

package/src/components/dialog.tsx

@@ -2,6 +2,7 @@
 
 import {
   createContext,
+  createElement,
   forwardRef,
   useContext,
   useEffect,
@@ -20,6 +21,7 @@ import { surfaceClasses } from "../lib/surface-classes";
 import {
   desktopDialogContentClassName,
   dialogSheetMotionClassName,
+  mobileDialogSheetStyle,
   mobileDialogSheetContentClassName,
 } from "../lib/mobile-popper-sheet";
 import { Button } from "./button";
@@ -84,13 +86,14 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
       size === "sm"
         ? container
           ? "max-w-[400px]"
-          : "lg:max-w-[400px]"
+          : "max-w-[400px]"
         : container
           ? "max-w-[540px]"
-          : "lg:max-w-[540px]";
+          : "max-w-[540px]";
 
     return (
       <DialogPrimitive.Portal forceMount container={container ?? undefined}>
+        {!container && <style>{mobileDialogSheetStyle}</style>}
         <DialogPrimitive.Overlay asChild forceMount>
           <motion.div
             className={cn(
@@ -104,6 +107,7 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
         </DialogPrimitive.Overlay>
         <DialogPrimitive.Content ref={ref} asChild forceMount {...props}>
           <motion.div
+            data-hilum-dialog-sheet={container ? undefined : "true"}
             className={cn(
               container
                 ? "absolute left-1/2 top-1/2 z-50 w-[calc(100%-2rem)]"
@@ -137,7 +141,7 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
               {children}
               <DialogPrimitive.Close asChild>
                 <Button variant="ghost" size="icon-sm" className="absolute right-3 top-3">
-                  <XIcon />
+                  {createElement(XIcon)}
                   <span className="sr-only">Close</span>
                 </Button>
               </DialogPrimitive.Close>

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

@@ -17,6 +17,24 @@ export const dialogSheetMotionClassName = [
   "lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95",
 ].join(" ");
 
+export const mobileDialogSheetStyle = `
+@media (max-width: 1023px) {
+  [data-hilum-dialog-sheet="true"] {
+    position: fixed !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    top: auto !important;
+    width: 100% !important;
+    max-width: none !important;
+    max-height: calc(100dvh - 1rem) !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    transform-origin: bottom center !important;
+  }
+}
+`;
+
 export const mobilePopperSheetPositionClassName = [
   "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",