@hogoshi/ui 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hogoshi/ui",
-  "version": "0.1.14",
+  "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,7 +31,6 @@ 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)]",

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";
@@ -153,22 +152,19 @@ export function SidebarItem({
 
 export function BottomBar({ className, children, ...props }: ComponentProps<"nav">) {
   return (
-    <>
-      <ChromeVeil side="bottom" fixed className="md:hidden" />
-      <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>
-    </>
+    <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/index.ts

@@ -42,7 +42,6 @@ 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";

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,
-      )}
-    />
-  );
-}