@hogoshi/ui 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hogoshi/ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/navbar.tsx

@@ -3,7 +3,7 @@
 import { Button as BaseButton } from "@base-ui/react/button";
 import { NavigationMenu } from "@base-ui/react/navigation-menu";
 import { ArrowDown01Icon } from "@hugeicons-pro/core-stroke-rounded";
-import type { ComponentProps, ReactNode } from "react";
+import { useEffect, useState, type ComponentProps, type ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { Glide, glideActive } from "./glide";
 import type { AppIcon } from "./icon";
@@ -14,6 +14,37 @@ const itemClass =
 
 const motion = "duration-[calc(var(--motion-duration)*3)] ease-[var(--motion-ease)] motion-reduce:transition-none";
 
+export function TopBar({ contained = false, children, className }: { contained?: boolean; children: ReactNode; className?: string }) {
+  const [compact, setCompact] = useState(false);
+
+  useEffect(() => {
+    const root = document.querySelector("[data-scroll-root]");
+    const read = () => {
+      const top = root instanceof HTMLElement ? root.scrollTop : window.scrollY;
+      setCompact(top > 24);
+    };
+    read();
+    const target: EventTarget = root instanceof HTMLElement ? root : window;
+    target.addEventListener("scroll", read, { passive: true });
+    return () => target.removeEventListener("scroll", read);
+  }, []);
+
+  return (
+    <header className={cn("pointer-events-none inset-x-0 top-0 z-[var(--z-sticky)] flex justify-center", contained ? "absolute" : "fixed", className)}>
+      <div
+        className={cn(
+          "pointer-events-auto flex items-center transition-[width,height,margin,border-radius,background-color,border-color,box-shadow] duration-500 ease-[var(--motion-ease)] motion-reduce:transition-none",
+          compact
+            ? "border-border bg-bg-elevated mt-[calc(var(--safe-top)+0.75rem)] h-12 w-[min(40rem,calc(100%-1.5rem))] rounded-full border px-2 shadow-[var(--shadow-md)]"
+            : "mt-[calc(var(--safe-top)+0.5rem)] h-14 w-full border border-transparent bg-transparent px-3",
+        )}
+      >
+        <Navbar className="relative h-full w-full bg-transparent px-1 shadow-none backdrop-blur-none">{children}</Navbar>
+      </div>
+    </header>
+  );
+}
+
 export function Navbar({ className, children, ...props }: ComponentProps<"header">) {
   return (
     <header

package/src/components/sheet.tsx

@@ -18,9 +18,9 @@ const SideContext = createContext<SheetSide>("right");
 const direction = { top: "up", right: "right", bottom: "down", left: "left" } as const;
 
 const edge = {
-  top: "top-[max(0.75rem,var(--safe-top))]",
+  top: "top-[calc(var(--safe-top)+0.75rem)]",
   right: "right-[max(0.75rem,var(--safe-right))]",
-  bottom: "bottom-[max(0.75rem,var(--safe-bottom))]",
+  bottom: "bottom-2",
   left: "left-[max(0.75rem,var(--safe-left))]",
 };
 

package/src/components/sidebar.tsx

@@ -41,7 +41,7 @@ export function Sidebar({ className, ...props }: ComponentProps<"aside">) {
     <aside
       data-collapsed={collapsed || undefined}
       className={cn(
-        "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-[var(--safe-bottom)] pl-[var(--safe-left)] transition-[width] duration-[var(--motion-duration)] ease-[var(--motion-ease)] md:flex",
+        "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",
         collapsed && "w-[calc(3.5rem+var(--safe-left))]",
         className,
       )}
@@ -154,7 +154,7 @@ export function BottomBar({ className, children, ...props }: ComponentProps<"nav
   return (
     <nav
       className={cn(
-        "bg-bg-elevated/70 border-border fixed right-[max(0.75rem,var(--safe-right))] bottom-[max(0.5rem,var(--safe-bottom))] 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",
+        "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",
         className,
       )}
       {...props}

package/src/components/toaster.tsx

@@ -13,13 +13,13 @@ export function Toaster() {
       position="bottom-right"
       closeButton
       offset={{
-        bottom: "max(1.5rem, var(--safe-bottom))",
-        right: "max(1.5rem, var(--safe-right))",
+        bottom: "1.5rem",
+        right: "1.5rem",
       }}
       mobileOffset={{
-        bottom: "calc(4.25rem + max(0.5rem, var(--safe-bottom)))",
-        left: "max(1rem, var(--safe-left))",
-        right: "max(1rem, var(--safe-right))",
+        bottom: "5rem",
+        left: "1rem",
+        right: "1rem",
       }}
       style={{ zIndex: "var(--z-toast)" }}
       toastOptions={{

package/src/index.ts

@@ -29,7 +29,7 @@ export type { SortDirection } from "./components/table";
 export { Progress } from "./components/progress";
 export { Logo } from "./components/logo";
 export { LOGO_PATH, LOGO_VIEWBOX, logoSvg } from "./components/logo-mark";
-export { Navbar, NavbarItem, NavbarMenu, NavbarMenuLink, NavbarMenus } from "./components/navbar";
+export { Navbar, NavbarItem, NavbarMenu, NavbarMenuLink, NavbarMenus, TopBar } from "./components/navbar";
 export { Glide, glideActive } from "./components/glide";
 export type { GlideProps } from "./components/glide";
 export { Calendar } from "./components/calendar";