@hilum/ui 3.6.5 → 3.6.7

package/dist/index.js

@@ -2,7 +2,7 @@ import { tokens } from './chunk-RI6QJR2L.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React16 from 'react';
-import { createContext, forwardRef, useRef, useState, useCallback, useEffect, useContext, isValidElement, cloneElement, useMemo, useId, Children, useLayoutEffect } from 'react';
+import { createContext, forwardRef, useRef, useState, useCallback, useEffect, useContext, isValidElement, cloneElement, useMemo, useId, Children, useLayoutEffect, createElement } from 'react';
 import { Check, Circle, ChevronRight, Minus, Search, X, ChevronDown, CornerDownRight, SkipForward, Pencil, Inbox, MessageCircle, Home, Pause, Play, RotateCcw, Link, ImageIcon, User, Globe, Brain, Paintbrush, Heart, Rocket, Lightbulb, Palette, Shield, Bell, Mail, Lock, Users, Loader, ArrowUp, ArrowRight, ArrowLeft, Plus, Settings, Star, Clock, SquareLibrary, RectangleHorizontal, Moon, Sun, Monitor, Dot, Menu, Copy, Pipette, MoreHorizontal, ChevronLeft, ChevronsUpDown, ChevronUp, CalendarIcon, Upload, File, CircleHelp, Info, AlertTriangle, AlertCircle, CheckCircle, GripVertical, Bold, Italic, Underline, Strikethrough, Heading1, Heading2, Heading3, List as List$1, ListOrdered, AlignLeft, FileText, Image as Image$1, Filter, ArrowDown, PanelLeft, TrendingDown, TrendingUp, Download, XCircle, Loader2 } from 'lucide-react';
 import { IconCornerDownRight, IconPlayerSkipForward, IconPencil, IconInbox, IconMessageCircle, IconHome, IconPlayerPause, IconPlayerPlay, IconRotate2, IconCheck, IconLink, IconPhoto, IconUser, IconGlobe, IconBrain, IconBrush, IconHeart, IconRocket, IconBulb, IconPalette, IconShield, IconBell, IconMail, IconLock, IconUsers, IconLoader2, IconSearch, IconArrowUp, IconArrowRight, IconArrowLeft, IconPlus, IconSettings, IconStar, IconClock, IconLibrary, IconCircle, IconSquare, IconMoon, IconSun, IconDeviceDesktop, IconPoint, IconMenu2, IconCopy, IconX, IconColorPicker, IconChevronDown, IconChevronRight } from '@tabler/icons-react';
 import { ArrowElbowDownRight, SkipForward as SkipForward$1, Pencil as Pencil$1, Tray, ChatCircle, House, Pause as Pause$1, Play as Play$1, ArrowCounterClockwise, Check as Check$1, Link as Link$1, Image, User as User$1, Globe as Globe$1, Brain as Brain$1, PaintBrush, Heart as Heart$1, Rocket as Rocket$1, Lightbulb as Lightbulb$1, Palette as Palette$1, Shield as Shield$1, Bell as Bell$1, Envelope, Lock as Lock$1, Users as Users$1, Spinner as Spinner$1, MagnifyingGlass, ArrowUp as ArrowUp$1, ArrowRight as ArrowRight$1, ArrowLeft as ArrowLeft$1, Plus as Plus$1, Gear, Star as Star$1, Clock as Clock$1, Books, Circle as Circle$1, Rectangle, Moon as Moon$1, Sun as Sun$1, Monitor as Monitor$1, DotOutline, List, Copy as Copy$1, X as X$1, Eyedropper, CaretDown, CaretRight } from '@phosphor-icons/react';
@@ -598,6 +598,23 @@ var dialogSheetMotionClassName = [
   "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
   "lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95"
 ].join(" ");
+var 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;
+  }
+}
+`;
 var 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"
@@ -1946,15 +1963,17 @@ var AlertDialogOverlay = React16.forwardRef(({ className, ...props }, ref) => /*
 ));
 AlertDialogOverlay.displayName = "AlertDialogOverlay";
 var AlertDialogContent = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [
+  /* @__PURE__ */ jsx("style", { children: mobileDialogSheetStyle }),
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialog.Content,
     {
       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
       ),
@@ -8256,8 +8275,9 @@ var DialogContent = forwardRef(
       if (!open) setMounted(false);
     };
     if (!mounted) return null;
-    const sizeClassName = size === "sm" ? container ? "max-w-[400px]" : "lg:max-w-[400px]" : container ? "max-w-[540px]" : "lg:max-w-[540px]";
+    const sizeClassName = size === "sm" ? container ? "max-w-[400px]" : "max-w-[400px]" : container ? "max-w-[540px]" : "max-w-[540px]";
     return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { forceMount: true, container: container ?? void 0, children: [
+      !container && /* @__PURE__ */ jsx("style", { children: mobileDialogSheetStyle }),
       /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
         motion.div,
         {
@@ -8273,6 +8293,7 @@ var DialogContent = forwardRef(
       /* @__PURE__ */ jsx(DialogPrimitive.Content, { ref, asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsx(
         motion.div,
         {
+          "data-hilum-dialog-sheet": container ? void 0 : "true",
           className: cn(
             container ? "absolute left-1/2 top-1/2 z-50 w-[calc(100%-2rem)]" : [
               mobileDialogSheetContentClassName,
@@ -8298,7 +8319,7 @@ var DialogContent = forwardRef(
           children: /* @__PURE__ */ jsxs(SurfaceProvider, { value: dialogLevel, children: [
             children,
             /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon-sm", className: "absolute right-3 top-3", children: [
-              /* @__PURE__ */ jsx(XIcon, {}),
+              createElement(XIcon),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
             ] }) })
           ] })