@hilum/ui 3.6.3 → 3.6.4
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 +23 -23
- 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/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 +10 -10
package/dist/index.js
CHANGED
|
@@ -586,27 +586,27 @@ function useProximityIndex(axis = "y") {
|
|
|
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
588
|
"rounded-t-2xl border border-border bg-card p-6 shadow-elevated",
|
|
589
|
-
"max-
|
|
590
|
-
"max-
|
|
591
|
-
"max-
|
|
589
|
+
"max-md:pb-[calc(1.5rem+env(safe-area-inset-bottom))] max-md:pt-8",
|
|
590
|
+
"max-md:before:absolute max-md:before:left-1/2 max-md:before:top-3 max-md:before:h-1 max-md:before:w-9",
|
|
591
|
+
"max-md:before:-translate-x-1/2 max-md:before:rounded-full max-md:before:bg-muted-foreground/35"
|
|
592
592
|
].join(" ");
|
|
593
|
-
var desktopDialogContentClassName = "
|
|
593
|
+
var desktopDialogContentClassName = "md:bottom-auto md:left-1/2 md:top-1/2 md:max-h-[calc(100dvh-2rem)] md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-2xl";
|
|
594
594
|
var dialogSheetMotionClassName = [
|
|
595
595
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
596
596
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
597
597
|
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
598
|
-
"
|
|
598
|
+
"md:data-[state=closed]:zoom-out-95 md:data-[state=open]:zoom-in-95"
|
|
599
599
|
].join(" ");
|
|
600
600
|
var mobilePopperSheetPositionClassName = [
|
|
601
|
-
"max-
|
|
602
|
-
"max-
|
|
601
|
+
"max-md:!fixed max-md:!inset-x-3 max-md:!bottom-3 max-md:!top-auto max-md:!left-3 max-md:!right-3",
|
|
602
|
+
"max-md:!w-auto max-md:!min-w-0 max-md:!max-w-none max-md:!transform-none"
|
|
603
603
|
].join(" ");
|
|
604
|
-
var mobilePopperSheetSurfaceClassName = "max-
|
|
604
|
+
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
605
|
var mobilePopperSheetMotionClassName = [
|
|
606
|
-
"max-
|
|
606
|
+
"max-md:data-[state=closed]:slide-out-to-bottom max-md:data-[state=open]:slide-in-from-bottom"
|
|
607
607
|
].join(" ");
|
|
608
608
|
var mobilePopperSheetStyle = `
|
|
609
|
-
@media (max-width:
|
|
609
|
+
@media (max-width: 767px) {
|
|
610
610
|
[data-radix-popper-content-wrapper]:has([data-hilum-mobile-sheet="true"]) {
|
|
611
611
|
position: fixed !important;
|
|
612
612
|
inset: 0 !important;
|
|
@@ -671,7 +671,7 @@ var DropdownMenuContent = React16.forwardRef(({ className, sideOffset = 4, ...pr
|
|
|
671
671
|
"z-50 min-w-[8rem] rounded-xl border border-border bg-card p-1 shadow-elevated",
|
|
672
672
|
mobilePopperSheetPositionClassName,
|
|
673
673
|
mobilePopperSheetSurfaceClassName,
|
|
674
|
-
"max-
|
|
674
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
675
675
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
676
676
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
677
677
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -789,7 +789,7 @@ var DropdownMenuSubContent = React16.forwardRef(({ className, ...props }, ref) =
|
|
|
789
789
|
"z-50 min-w-[8rem] rounded-xl border border-border bg-card p-1 shadow-elevated",
|
|
790
790
|
mobilePopperSheetPositionClassName,
|
|
791
791
|
mobilePopperSheetSurfaceClassName,
|
|
792
|
-
"max-
|
|
792
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
793
793
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
794
794
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
795
795
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -8144,7 +8144,7 @@ function Combobox({
|
|
|
8144
8144
|
{
|
|
8145
8145
|
type: "button",
|
|
8146
8146
|
"aria-label": "Close options",
|
|
8147
|
-
className: "fixed inset-0 z-40 hidden bg-black/30 backdrop-blur-sm max-
|
|
8147
|
+
className: "fixed inset-0 z-40 hidden bg-black/30 backdrop-blur-sm max-md:block",
|
|
8148
8148
|
onClick: closeDropdown
|
|
8149
8149
|
}
|
|
8150
8150
|
),
|
|
@@ -8153,16 +8153,16 @@ function Combobox({
|
|
|
8153
8153
|
{
|
|
8154
8154
|
className: cn(
|
|
8155
8155
|
"absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-card shadow-elevated",
|
|
8156
|
-
"max-
|
|
8157
|
-
"max-
|
|
8158
|
-
"max-
|
|
8156
|
+
"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",
|
|
8157
|
+
"max-md:max-h-[min(70dvh,28rem)] max-md:rounded-2xl max-md:p-2 max-md:pt-5",
|
|
8158
|
+
"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
8159
|
),
|
|
8160
8160
|
children: /* @__PURE__ */ jsx(
|
|
8161
8161
|
"ul",
|
|
8162
8162
|
{
|
|
8163
8163
|
id: listboxId,
|
|
8164
8164
|
role: "listbox",
|
|
8165
|
-
className: "max-h-60 overflow-auto py-1 max-
|
|
8165
|
+
className: "max-h-60 overflow-auto py-1 max-md:max-h-[calc(min(70dvh,28rem)-3rem)]",
|
|
8166
8166
|
children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 body text-muted-foreground", children: emptyText }) : filtered.map((option, idx) => {
|
|
8167
8167
|
const isSelected = option.value === value;
|
|
8168
8168
|
const isActive = idx === activeIndex;
|
|
@@ -8629,7 +8629,7 @@ var ContextMenuContent = React16.forwardRef(({ className, ...props }, ref) => /*
|
|
|
8629
8629
|
"z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
|
|
8630
8630
|
mobilePopperSheetPositionClassName,
|
|
8631
8631
|
mobilePopperSheetSurfaceClassName,
|
|
8632
|
-
"max-
|
|
8632
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
8633
8633
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
8634
8634
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
8635
8635
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -8745,7 +8745,7 @@ var ContextMenuSubContent = React16.forwardRef(({ className, ...props }, ref) =>
|
|
|
8745
8745
|
"z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
|
|
8746
8746
|
mobilePopperSheetPositionClassName,
|
|
8747
8747
|
mobilePopperSheetSurfaceClassName,
|
|
8748
|
-
"max-
|
|
8748
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
8749
8749
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
8750
8750
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
8751
8751
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -9475,7 +9475,7 @@ var SelectContent = forwardRef(
|
|
|
9475
9475
|
},
|
|
9476
9476
|
onKeyDown: handleKeyDown,
|
|
9477
9477
|
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-
|
|
9478
|
+
`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
9479
|
className
|
|
9480
9480
|
),
|
|
9481
9481
|
children: [
|
|
@@ -9799,7 +9799,7 @@ var PopoverContent = React16.forwardRef(({ className, align = "center", sideOffs
|
|
|
9799
9799
|
motionClasses,
|
|
9800
9800
|
mobilePopperSheetPositionClassName,
|
|
9801
9801
|
mobilePopperSheetSurfaceClassName,
|
|
9802
|
-
"max-
|
|
9802
|
+
"max-md:overflow-y-auto max-md:px-4 max-md:pb-4 max-md:pt-6",
|
|
9803
9803
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
9804
9804
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
9805
9805
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -11916,7 +11916,7 @@ var MenubarContent = React16.forwardRef(({ className, align = "start", alignOffs
|
|
|
11916
11916
|
"z-50 min-w-[12rem] bg-card rounded-xl shadow-natural p-1",
|
|
11917
11917
|
mobilePopperSheetPositionClassName,
|
|
11918
11918
|
mobilePopperSheetSurfaceClassName,
|
|
11919
|
-
"max-
|
|
11919
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
11920
11920
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
11921
11921
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
11922
11922
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -12025,7 +12025,7 @@ var MenubarSubContent = React16.forwardRef(({ className, ...props }, ref) => /*
|
|
|
12025
12025
|
"z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
|
|
12026
12026
|
mobilePopperSheetPositionClassName,
|
|
12027
12027
|
mobilePopperSheetSurfaceClassName,
|
|
12028
|
-
"max-
|
|
12028
|
+
"max-md:overflow-y-auto max-md:px-2 max-md:pb-2 max-md:pt-5",
|
|
12029
12029
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
12030
12030
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
12031
12031
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|