@hogoshi/ui 0.1.13 → 0.1.15

package/package.json

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

package/src/components/navbar.tsx

@@ -5,7 +5,6 @@ import { NavigationMenu } from "@base-ui/react/navigation-menu";
 import { ArrowDown01Icon } from "@hugeicons-pro/core-stroke-rounded";
 import { useEffect, useState, type ComponentProps, type ReactNode } from "react";
 import { cn } from "../lib/cn";
-import { ChromeVeil } from "./chrome-veil";
 import { Glide, glideActive } from "./glide";
 import type { AppIcon } from "./icon";
 import { Icon } from "./icon";
@@ -32,13 +31,12 @@ export function TopBar({ contained = false, children, className }: { contained?:
 
   return (
     <header className={cn("pointer-events-none inset-x-0 top-0 z-[var(--z-sticky)]", contained ? "absolute" : "fixed", className)}>
-      <ChromeVeil side="top" />
       <div
         className={cn(
           "pointer-events-auto relative mx-auto flex h-12 translate-y-[var(--topbar-offset)] items-center border transition-[width,border-radius,background-color,border-color,box-shadow] duration-[calc(var(--motion-duration)*4)] ease-[var(--motion-ease)]",
           compact
-            ? "border-border bg-bg-elevated w-[min(40rem,calc(100%-max(0.75rem,var(--safe-left))-max(0.75rem,var(--safe-right))))] rounded-full px-2 shadow-[var(--shadow-md)]"
-            : "w-full border-transparent bg-transparent pl-[max(0.75rem,var(--safe-left))] pr-[max(0.75rem,var(--safe-right))]",
+            ? "border-border bg-bg-elevated w-[min(40rem,calc(100%-var(--edge-left)-var(--edge-right)))] rounded-full px-2 shadow-[var(--shadow-md)]"
+            : "w-full border-transparent bg-transparent pr-[var(--edge-right)] pl-[var(--edge-left)]",
         )}
       >
         <Navbar className="relative h-full w-full bg-transparent px-1 shadow-none backdrop-blur-none">{children}</Navbar>

package/src/components/sheet.tsx

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

package/src/components/shell.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { Search01Icon } from "@hugeicons-pro/core-stroke-rounded";
+import type { ComponentProps, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import { Icon } from "./icon";
+import { Kbd } from "./kbd";
+import { Logo } from "./logo";
+import { Sheet, SheetContent, SheetTitle } from "./sheet";
+import { SidebarHeader, SidebarInset, SidebarProvider, SidebarTrigger, sidebarLabel, useSidebar } from "./sidebar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+export const shellGlass = "border-border bg-bg-elevated/70 hover:bg-bg-elevated border backdrop-blur-xl";
+
+const focusRing = "rounded-[var(--radius-sm)] outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+export function AppShell({
+  sidebar,
+  topBar,
+  bottomBar,
+  defaultCollapsed,
+  className,
+  contentClassName,
+  children,
+}: {
+  sidebar?: ReactNode;
+  topBar?: ReactNode;
+  bottomBar?: ReactNode;
+  defaultCollapsed?: boolean;
+  className?: string;
+  contentClassName?: string;
+  children: ReactNode;
+}) {
+  return (
+    <SidebarProvider defaultCollapsed={defaultCollapsed}>
+      <div data-app-shell className={cn("bg-bg fixed inset-0 flex h-app overflow-hidden", className)}>
+        {sidebar}
+        <SidebarInset className="relative flex min-h-0 min-w-0 flex-1 flex-col">
+          {topBar}
+          <div
+            data-scroll-root
+            className={cn(
+              "min-h-0 flex-1 touch-pan-y overflow-x-hidden overflow-y-scroll overscroll-y-contain pb-[var(--safe-bottom)]",
+              topBar && "pt-[var(--topbar-space)]",
+              bottomBar && "pb-[var(--bottombar-space)] md:pb-[var(--safe-bottom)]",
+              contentClassName,
+            )}
+          >
+            {children}
+          </div>
+        </SidebarInset>
+      </div>
+      {bottomBar}
+    </SidebarProvider>
+  );
+}
+
+export function ShellBrand({ href, label, className, ...props }: Omit<ComponentProps<"a">, "children"> & { label: string }) {
+  const { collapsed } = useSidebar();
+  return (
+    <SidebarHeader className={cn("group/header relative overflow-hidden px-2", className)}>
+      <a
+        href={href}
+        aria-label={label}
+        className={cn(
+          "flex min-w-0 items-center gap-2 px-1 whitespace-nowrap",
+          focusRing,
+          collapsed &&
+            "group-hover/header:pointer-events-none group-hover/header:opacity-0 [@media(hover:none)]:pointer-events-none [@media(hover:none)]:opacity-0",
+        )}
+        {...props}
+      >
+        <Logo size="sm" className="shrink-0" />
+        <span className={cn("text-sm font-semibold tracking-tight", sidebarLabel, collapsed && "opacity-0")}>{label}</span>
+      </a>
+      <SidebarTrigger
+        className={
+          collapsed
+            ? "pointer-events-none absolute top-3 left-3 opacity-0 transition-opacity group-hover/header:pointer-events-auto group-hover/header:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100"
+            : "shrink-0"
+        }
+      />
+    </SidebarHeader>
+  );
+}
+
+export function ShellLogo({ href, label, className, children, ...props }: ComponentProps<"a"> & { label: string }) {
+  return (
+    <a href={href} aria-label={label} className={cn("flex shrink-0 items-center gap-2", focusRing, className)} {...props}>
+      <Logo size="sm" />
+      {children}
+    </a>
+  );
+}
+
+export function ShellTitle({ className, children }: { className?: string; children: ReactNode }) {
+  return (
+    <p className={cn("pointer-events-none absolute top-1/2 left-1/2 max-w-[70%] -translate-x-1/2 -translate-y-1/2", className)}>
+      <span
+        aria-hidden
+        className="absolute top-1/2 left-1/2 -z-10 h-[2.4em] w-[260%] -translate-x-1/2 -translate-y-1/2 bg-[radial-gradient(ellipse_at_center,var(--bg)_0%,color-mix(in_oklch,var(--bg)_82%,transparent)_36%,transparent_70%)]"
+      />
+      <span className="relative block truncate text-sm font-semibold">{children}</span>
+    </p>
+  );
+}
+
+export function ShellAction({ className, ...props }: ComponentProps<typeof Button>) {
+  return <Button variant="secondary" size="icon" className={cn(shellGlass, "rounded-full", className)} {...props} />;
+}
+
+export function ShellSearch({
+  onOpen,
+  shortcut = "⌘K",
+  label = "Search",
+  className,
+}: {
+  onOpen: () => void;
+  shortcut?: string;
+  label?: string;
+  className?: string;
+}) {
+  const { collapsed } = useSidebar();
+  const fade = cn(sidebarLabel, collapsed && "opacity-0");
+  const button = (
+    <Button
+      variant="outline"
+      aria-label={label}
+      className={cn(shellGlass, "w-full justify-between overflow-hidden px-3 font-normal whitespace-nowrap [&>span]:w-full [&>span>span]:w-full", className)}
+      onClick={onOpen}
+    >
+      <span className="flex w-full items-center justify-between gap-2">
+        <span className="flex min-w-0 items-center gap-2">
+          <Icon icon={Search01Icon} variant="stroke" size={16} className="shrink-0" />
+          <span className={fade}>{label}</span>
+        </span>
+        <Kbd className={cn("shrink-0", fade)}>{shortcut}</Kbd>
+      </span>
+    </Button>
+  );
+  return (
+    <div className="shrink-0 px-2 pb-2">
+      <Tooltip disabled={!collapsed}>
+        <TooltipTrigger render={button} />
+        <TooltipContent side="right">{label}</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
+
+export function ShellMenu({
+  open,
+  onOpenChange,
+  brand,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  brand: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Sheet side="left" open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="right-auto px-2">
+        <SheetTitle className="px-3 pt-1 text-sm font-semibold">{brand}</SheetTitle>
+        <SidebarProvider>
+          <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+        </SidebarProvider>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/sidebar.tsx

@@ -4,7 +4,6 @@ import { Button as BaseButton } from "@base-ui/react/button";
 import { SidebarLeftIcon } from "@hugeicons-pro/core-stroke-rounded";
 import { createContext, useContext, useEffect, useMemo, useState, type ComponentProps, type ReactNode } from "react";
 import { cn } from "../lib/cn";
-import { ChromeVeil } from "./chrome-veil";
 import type { AppIcon, IconVariant } from "./icon";
 import { Glide, glideActive } from "./glide";
 import { Icon } from "./icon";
@@ -42,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-[calc(var(--safe-top)+0.5rem)] pb-2 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.75rem)] pb-[calc(var(--safe-bottom)+0.75rem)] 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,
       )}
@@ -153,21 +152,19 @@ export function SidebarItem({
 
 export function BottomBar({ className, children, ...props }: ComponentProps<"nav">) {
   return (
-    <>
-      <ChromeVeil side="bottom" fixed className="md:hidden" />
-      <nav
-        className={cn(
-          "bg-bg-elevated/70 border-border fixed right-[max(0.75rem,var(--safe-right))] bottom-[var(--bottombar-offset)] 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}
-      >
-        <div className="relative flex items-stretch justify-around">
-          <Glide selector={ACTIVE} className="bg-accent-muted/60 rounded-[var(--radius-md)]" />
-          {children}
-        </div>
-      </nav>
-    </>
+    <nav
+      data-bottom-bar
+      className={cn(
+        "bg-bg-elevated/70 border-border fixed right-[var(--edge-right)] bottom-[var(--bottombar-offset)] left-[var(--edge-left)] z-[var(--z-sticky)] rounded-[var(--radius-lg)] border p-1 shadow-[var(--shadow-md)] backdrop-blur-xl md:hidden",
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative flex items-stretch justify-around">
+        <Glide selector={ACTIVE} className="bg-accent-muted/60 rounded-[var(--radius-md)]" />
+        {children}
+      </div>
+    </nav>
   );
 }
 

package/src/components/toaster.tsx

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

package/src/index.ts

@@ -42,7 +42,7 @@ 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, TopBar } from "./components/navbar";
-export { ChromeVeil } from "./components/chrome-veil";
+export { AppShell, ShellAction, ShellBrand, ShellLogo, ShellMenu, ShellSearch, ShellTitle, shellGlass } from "./components/shell";
 export { Glide, glideActive } from "./components/glide";
 export type { GlideProps } from "./components/glide";
 export { Calendar } from "./components/calendar";

package/src/styles.css

@@ -78,10 +78,14 @@ body {
   --safe-bottom: env(safe-area-inset-bottom, 0px);
   --safe-left: env(safe-area-inset-left, 0px);
   --app-height: 100dvh;
+  --edge-x: 0.75rem;
+  --edge-left: max(var(--edge-x), var(--safe-left));
+  --edge-right: max(var(--edge-x), var(--safe-right));
   --topbar-offset: calc(var(--safe-top) + 0.75rem);
   --topbar-space: calc(var(--topbar-offset) + 3.75rem);
-  --bottombar-offset: max(0.5rem, var(--safe-bottom));
+  --bottombar-offset: calc(var(--safe-bottom) + 0.75rem);
   --bottombar-space: calc(var(--bottombar-offset) + 4.25rem);
+  --toast-bottom: calc(var(--safe-bottom) + 1.5rem);
 }
 
 @media (display-mode: standalone) {
@@ -90,6 +94,12 @@ body {
   }
 }
 
+@media (max-width: 47.99rem) {
+  html:has([data-bottom-bar]) {
+    --toast-bottom: var(--bottombar-space);
+  }
+}
+
 html,
 body {
   min-height: var(--app-height);
@@ -109,6 +119,7 @@ body {
 
 html {
   scroll-behavior: auto;
+  touch-action: pan-x pan-y;
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;

package/src/components/chrome-veil.tsx

@@ -1,20 +0,0 @@
-import { cn } from "../lib/cn";
-
-const sides = {
-  top: "top-0 h-[calc(var(--safe-top)+2rem)] bg-gradient-to-b [mask-image:linear-gradient(to_bottom,black_30%,transparent)]",
-  bottom: "bottom-0 h-[var(--bottombar-space)] bg-gradient-to-t [mask-image:linear-gradient(to_top,black_30%,transparent)]",
-};
-
-export function ChromeVeil({ side, fixed = false, className }: { side: "top" | "bottom"; fixed?: boolean; className?: string }) {
-  return (
-    <div
-      aria-hidden
-      className={cn(
-        "from-bg pointer-events-none inset-x-0 to-transparent backdrop-blur-xl",
-        fixed ? "fixed z-[calc(var(--z-sticky)-1)]" : "absolute",
-        sides[side],
-        className,
-      )}
-    />
-  );
-}