@hilum/ui 3.6.3 → 3.6.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +25 -24
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/combobox.tsx +5 -5
- package/src/components/context-menu.tsx +2 -2
- package/src/components/dialog.tsx +2 -2
- package/src/components/dropdown-menu.tsx +2 -2
- package/src/components/menubar.tsx +2 -2
- package/src/components/popover.tsx +1 -1
- package/src/components/select.tsx +1 -1
- package/src/lib/mobile-popper-sheet.ts +11 -10
package/dist/index.js
CHANGED
|
@@ -585,28 +585,29 @@ function useProximityIndex(axis = "y") {
|
|
|
585
585
|
// src/lib/mobile-popper-sheet.ts
|
|
586
586
|
var mobileDialogSheetContentClassName = [
|
|
587
587
|
"fixed inset-x-0 bottom-0 z-50 max-h-[calc(100dvh-1rem)] w-full overflow-y-auto",
|
|
588
|
+
"max-lg:!w-full max-lg:!max-w-none max-lg:!rounded-b-none",
|
|
588
589
|
"rounded-t-2xl border border-border bg-card p-6 shadow-elevated",
|
|
589
|
-
"max-
|
|
590
|
-
"max-
|
|
591
|
-
"max-
|
|
590
|
+
"max-lg:pb-[calc(1.5rem+env(safe-area-inset-bottom))] max-lg:pt-8",
|
|
591
|
+
"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",
|
|
592
|
+
"max-lg:before:-translate-x-1/2 max-lg:before:rounded-full max-lg:before:bg-muted-foreground/35"
|
|
592
593
|
].join(" ");
|
|
593
|
-
var desktopDialogContentClassName = "
|
|
594
|
+
var desktopDialogContentClassName = "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";
|
|
594
595
|
var dialogSheetMotionClassName = [
|
|
595
596
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
596
597
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
597
598
|
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
598
|
-
"
|
|
599
|
+
"lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95"
|
|
599
600
|
].join(" ");
|
|
600
601
|
var mobilePopperSheetPositionClassName = [
|
|
601
|
-
"max-
|
|
602
|
-
"max-
|
|
602
|
+
"max-md:!fixed max-md:!inset-x-3 max-md:!bottom-3 max-md:!top-auto max-md:!left-3 max-md:!right-3",
|
|
603
|
+
"max-md:!w-auto max-md:!min-w-0 max-md:!max-w-none max-md:!transform-none"
|
|
603
604
|
].join(" ");
|
|
604
|
-
var mobilePopperSheetSurfaceClassName = "max-
|
|
605
|
+
var mobilePopperSheetSurfaceClassName = "max-md:max-h-[min(70dvh,28rem)] max-md:rounded-2xl max-md:border max-md:border-border max-md:shadow-elevated";
|
|
605
606
|
var mobilePopperSheetMotionClassName = [
|
|
606
|
-
"max-
|
|
607
|
+
"max-md:data-[state=closed]:slide-out-to-bottom max-md:data-[state=open]:slide-in-from-bottom"
|
|
607
608
|
].join(" ");
|
|
608
609
|
var mobilePopperSheetStyle = `
|
|
609
|
-
@media (max-width:
|
|
610
|
+
@media (max-width: 767px) {
|
|
610
611
|
[data-radix-popper-content-wrapper]:has([data-hilum-mobile-sheet="true"]) {
|
|
611
612
|
position: fixed !important;
|
|
612
613
|
inset: 0 !important;
|
|
@@ -671,7 +672,7 @@ var DropdownMenuContent = React16.forwardRef(({ className, sideOffset = 4, ...pr
|
|
|
671
672
|
"z-50 min-w-[8rem] rounded-xl border border-border bg-card p-1 shadow-elevated",
|
|
672
673
|
mobilePopperSheetPositionClassName,
|
|
673
674
|
mobilePopperSheetSurfaceClassName,
|
|
674
|
-
"max-
|
|
675
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
675
676
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
676
677
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
677
678
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -789,7 +790,7 @@ var DropdownMenuSubContent = React16.forwardRef(({ className, ...props }, ref) =
|
|
|
789
790
|
"z-50 min-w-[8rem] rounded-xl border border-border bg-card p-1 shadow-elevated",
|
|
790
791
|
mobilePopperSheetPositionClassName,
|
|
791
792
|
mobilePopperSheetSurfaceClassName,
|
|
792
|
-
"max-
|
|
793
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
793
794
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
794
795
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
795
796
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -8144,7 +8145,7 @@ function Combobox({
|
|
|
8144
8145
|
{
|
|
8145
8146
|
type: "button",
|
|
8146
8147
|
"aria-label": "Close options",
|
|
8147
|
-
className: "fixed inset-0 z-40 hidden bg-black/30 backdrop-blur-sm max-
|
|
8148
|
+
className: "fixed inset-0 z-40 hidden bg-black/30 backdrop-blur-sm max-md:block",
|
|
8148
8149
|
onClick: closeDropdown
|
|
8149
8150
|
}
|
|
8150
8151
|
),
|
|
@@ -8153,16 +8154,16 @@ function Combobox({
|
|
|
8153
8154
|
{
|
|
8154
8155
|
className: cn(
|
|
8155
8156
|
"absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-card shadow-elevated",
|
|
8156
|
-
"max-
|
|
8157
|
-
"max-
|
|
8158
|
-
"max-
|
|
8157
|
+
"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",
|
|
8158
|
+
"max-md:max-h-[min(70dvh,28rem)] max-md:rounded-2xl max-md:p-2 max-md:pt-5",
|
|
8159
|
+
"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"
|
|
8159
8160
|
),
|
|
8160
8161
|
children: /* @__PURE__ */ jsx(
|
|
8161
8162
|
"ul",
|
|
8162
8163
|
{
|
|
8163
8164
|
id: listboxId,
|
|
8164
8165
|
role: "listbox",
|
|
8165
|
-
className: "max-h-60 overflow-auto py-1 max-
|
|
8166
|
+
className: "max-h-60 overflow-auto py-1 max-md:max-h-[calc(min(70dvh,28rem)-3rem)]",
|
|
8166
8167
|
children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 body text-muted-foreground", children: emptyText }) : filtered.map((option, idx) => {
|
|
8167
8168
|
const isSelected = option.value === value;
|
|
8168
8169
|
const isActive = idx === activeIndex;
|
|
@@ -8255,7 +8256,7 @@ var DialogContent = forwardRef(
|
|
|
8255
8256
|
if (!open) setMounted(false);
|
|
8256
8257
|
};
|
|
8257
8258
|
if (!mounted) return null;
|
|
8258
|
-
const sizeClassName = size === "sm" ? container ? "max-w-[400px]" : "
|
|
8259
|
+
const sizeClassName = size === "sm" ? container ? "max-w-[400px]" : "lg:max-w-[400px]" : container ? "max-w-[540px]" : "lg:max-w-[540px]";
|
|
8259
8260
|
return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { forceMount: true, container: container ?? void 0, children: [
|
|
8260
8261
|
/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
|
|
8261
8262
|
motion.div,
|
|
@@ -8629,7 +8630,7 @@ var ContextMenuContent = React16.forwardRef(({ className, ...props }, ref) => /*
|
|
|
8629
8630
|
"z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
|
|
8630
8631
|
mobilePopperSheetPositionClassName,
|
|
8631
8632
|
mobilePopperSheetSurfaceClassName,
|
|
8632
|
-
"max-
|
|
8633
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
8633
8634
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
8634
8635
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
8635
8636
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -8745,7 +8746,7 @@ var ContextMenuSubContent = React16.forwardRef(({ className, ...props }, ref) =>
|
|
|
8745
8746
|
"z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
|
|
8746
8747
|
mobilePopperSheetPositionClassName,
|
|
8747
8748
|
mobilePopperSheetSurfaceClassName,
|
|
8748
|
-
"max-
|
|
8749
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
8749
8750
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
8750
8751
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
8751
8752
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -9475,7 +9476,7 @@ var SelectContent = forwardRef(
|
|
|
9475
9476
|
},
|
|
9476
9477
|
onKeyDown: handleKeyDown,
|
|
9477
9478
|
className: cn(
|
|
9478
|
-
`relative flex flex-col gap-0.5 max-h-[300px] overflow-y-auto ${shape3.container} p-1 select-none outline-none max-
|
|
9479
|
+
`relative flex flex-col gap-0.5 max-h-[300px] overflow-y-auto ${shape3.container} p-1 select-none outline-none max-md:!fixed max-md:rounded-2xl max-md:data-[state=open]:slide-in-from-bottom`,
|
|
9479
9480
|
className
|
|
9480
9481
|
),
|
|
9481
9482
|
children: [
|
|
@@ -9799,7 +9800,7 @@ var PopoverContent = React16.forwardRef(({ className, align = "center", sideOffs
|
|
|
9799
9800
|
motionClasses,
|
|
9800
9801
|
mobilePopperSheetPositionClassName,
|
|
9801
9802
|
mobilePopperSheetSurfaceClassName,
|
|
9802
|
-
"max-
|
|
9803
|
+
"max-md:overflow-y-auto max-md:px-4 max-md:pb-4 max-md:pt-6",
|
|
9803
9804
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
9804
9805
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
9805
9806
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -11916,7 +11917,7 @@ var MenubarContent = React16.forwardRef(({ className, align = "start", alignOffs
|
|
|
11916
11917
|
"z-50 min-w-[12rem] bg-card rounded-xl shadow-natural p-1",
|
|
11917
11918
|
mobilePopperSheetPositionClassName,
|
|
11918
11919
|
mobilePopperSheetSurfaceClassName,
|
|
11919
|
-
"max-
|
|
11920
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
11920
11921
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
11921
11922
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
11922
11923
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -12025,7 +12026,7 @@ var MenubarSubContent = React16.forwardRef(({ className, ...props }, ref) => /*
|
|
|
12025
12026
|
"z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
|
|
12026
12027
|
mobilePopperSheetPositionClassName,
|
|
12027
12028
|
mobilePopperSheetSurfaceClassName,
|
|
12028
|
-
"max-
|
|
12029
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
12029
12030
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
12030
12031
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
12031
12032
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|