@hogoshi/ui 0.1.2 → 0.1.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/package.json
CHANGED
|
@@ -24,7 +24,7 @@ export function CommandDialog({
|
|
|
24
24
|
return (
|
|
25
25
|
<CommandPrimitive.Dialog
|
|
26
26
|
overlayClassName="hogoshi-command-overlay fixed inset-0 z-[var(--z-overlay)] bg-transparent backdrop-blur-2xl"
|
|
27
|
-
contentClassName="hogoshi-command border-border bg-bg-elevated/70 fixed top-[12vh] left-1/2 z-[var(--z-modal)] flex max-h-[min(32rem,calc(100dvh-
|
|
27
|
+
contentClassName="hogoshi-command border-border bg-bg-elevated/70 fixed top-[max(12vh,calc(var(--safe-top)+0.75rem))] left-1/2 z-[var(--z-modal)] flex max-h-[min(32rem,calc(100dvh-max(0.75rem,var(--safe-top))-max(0.75rem,var(--safe-bottom))-2rem))] w-[min(36rem,calc(100vw-max(1rem,var(--safe-left))-max(1rem,var(--safe-right))))] max-w-xl flex-col overflow-hidden rounded-[var(--radius-lg)] border shadow-[var(--shadow-lg)] backdrop-blur-xl outline-none"
|
|
28
28
|
className={cn("flex flex-col", className)}
|
|
29
29
|
{...props}
|
|
30
30
|
>
|
|
@@ -19,7 +19,7 @@ export function DialogContent({ className, children, ...props }: ComponentProps<
|
|
|
19
19
|
<BaseDialog.Backdrop className={cn("fixed inset-0 z-[var(--z-overlay)] bg-transparent", backdropMotion)} />
|
|
20
20
|
<BaseDialog.Popup
|
|
21
21
|
className={cn(
|
|
22
|
-
"border-border bg-bg-elevated/70 fixed top-1/2 left-1/2 z-[var(--z-modal)] grid w-[calc(100vw-
|
|
22
|
+
"border-border bg-bg-elevated/70 fixed top-1/2 left-1/2 z-[var(--z-modal)] grid max-h-[calc(100dvh-max(1rem,var(--safe-top))-max(1rem,var(--safe-bottom)))] w-[min(32rem,calc(100vw-max(1rem,var(--safe-left))-max(1rem,var(--safe-right))))] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-[var(--radius-lg)] border p-6 shadow-[var(--shadow-lg)] backdrop-blur-xl outline-none",
|
|
23
23
|
popupMotion,
|
|
24
24
|
className,
|
|
25
25
|
)}
|
package/src/components/sheet.tsx
CHANGED
|
@@ -18,17 +18,17 @@ const SideContext = createContext<SheetSide>("right");
|
|
|
18
18
|
const direction = { top: "up", right: "right", bottom: "down", left: "left" } as const;
|
|
19
19
|
|
|
20
20
|
const edge = {
|
|
21
|
-
top: "top-[calc(
|
|
22
|
-
right: "right-[
|
|
23
|
-
bottom: "bottom-
|
|
24
|
-
left: "left-[
|
|
21
|
+
top: "top-[calc(var(--safe-top)+0.75rem)]",
|
|
22
|
+
right: "right-[max(0.75rem,var(--safe-right))]",
|
|
23
|
+
bottom: "bottom-2",
|
|
24
|
+
left: "left-[max(0.75rem,var(--safe-left))]",
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
const frame = {
|
|
28
28
|
right: `${edge.top} ${edge.bottom} ${edge.right} w-[min(20rem,calc(100vw-1.5rem))]`,
|
|
29
29
|
left: `${edge.top} ${edge.bottom} ${edge.left} w-[min(20rem,calc(100vw-1.5rem))]`,
|
|
30
|
-
bottom: `${edge.left} ${edge.right} ${edge.bottom} max-h-[min(90dvh,calc(100dvh-
|
|
31
|
-
top: `${edge.left} ${edge.right} ${edge.top} max-h-[min(90dvh,calc(100dvh-
|
|
30
|
+
bottom: `${edge.left} ${edge.right} ${edge.bottom} max-h-[min(90dvh,calc(100dvh-max(0.75rem,var(--safe-top))-max(0.75rem,var(--safe-bottom))))] md:max-h-[min(32rem,70dvh)]`,
|
|
31
|
+
top: `${edge.left} ${edge.right} ${edge.top} max-h-[min(90dvh,calc(100dvh-max(0.75rem,var(--safe-top))-max(0.75rem,var(--safe-bottom))))] md:max-h-[min(32rem,70dvh)]`,
|
|
32
32
|
} as const;
|
|
33
33
|
|
|
34
34
|
const motion = {
|
|
@@ -41,7 +41,7 @@ export function Sidebar({ className, ...props }: ComponentProps<"aside">) {
|
|
|
41
41
|
<aside
|
|
42
42
|
data-collapsed={collapsed || undefined}
|
|
43
43
|
className={cn(
|
|
44
|
-
"bg-bg-elevated border-border hidden h-full min-h-0 w-[calc(15rem+var(--safe-left))] shrink-0 flex-col overflow-hidden border-r pt-[var(--safe-top)] pb-
|
|
44
|
+
"bg-bg-elevated border-border hidden h-full min-h-0 w-[calc(15rem+var(--safe-left))] shrink-0 flex-col overflow-hidden border-r pt-[calc(var(--safe-top)+0.5rem)] pb-2 pl-[var(--safe-left)] transition-[width] duration-[var(--motion-duration)] ease-[var(--motion-ease)] md:flex",
|
|
45
45
|
collapsed && "w-[calc(3.5rem+var(--safe-left))]",
|
|
46
46
|
className,
|
|
47
47
|
)}
|
|
@@ -154,7 +154,7 @@ export function BottomBar({ className, children, ...props }: ComponentProps<"nav
|
|
|
154
154
|
return (
|
|
155
155
|
<nav
|
|
156
156
|
className={cn(
|
|
157
|
-
"bg-bg-elevated/70 border-border fixed right-[
|
|
157
|
+
"bg-bg-elevated/70 border-border fixed right-[max(0.75rem,var(--safe-right))] bottom-2 left-[max(0.75rem,var(--safe-left))] z-[var(--z-sticky)] rounded-[var(--radius-lg)] border p-1 shadow-[var(--shadow-md)] backdrop-blur-xl md:hidden",
|
|
158
158
|
className,
|
|
159
159
|
)}
|
|
160
160
|
{...props}
|
|
@@ -13,13 +13,13 @@ export function Toaster() {
|
|
|
13
13
|
position="bottom-right"
|
|
14
14
|
closeButton
|
|
15
15
|
offset={{
|
|
16
|
-
bottom: "
|
|
17
|
-
right: "
|
|
16
|
+
bottom: "1.5rem",
|
|
17
|
+
right: "1.5rem",
|
|
18
18
|
}}
|
|
19
19
|
mobileOffset={{
|
|
20
|
-
bottom: "
|
|
21
|
-
left: "
|
|
22
|
-
right: "
|
|
20
|
+
bottom: "5rem",
|
|
21
|
+
left: "1rem",
|
|
22
|
+
right: "1rem",
|
|
23
23
|
}}
|
|
24
24
|
style={{ zIndex: "var(--z-toast)" }}
|
|
25
25
|
toastOptions={{
|