shivanya-sdk 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shivanya-sdk",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Shivanya SDK monorepo",
   "repository": {
     "type": "git",

package/packages/shell/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shivanya-shell",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "description": "Reusable React shell, layout, and application structure components for Shivanya applications",
   "main": "dist/index.js",
@@ -19,7 +19,7 @@
     "build": "tsc && node scripts/copy-assets.mjs"
   },
   "dependencies": {
-    "shivanya-ui": "^1.0.5"
+    "shivanya-ui": "^1.0.6"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/packages/shell/scripts/copy-assets.mjs

@@ -5,10 +5,20 @@ import { fileURLToPath } from "node:url";
 const currentFile = fileURLToPath(import.meta.url);
 const root = path.resolve(path.dirname(currentFile), "..");
 
-const source = path.join(root, "src", "styles", "shell.css");
-const target = path.join(root, "dist", "styles", "shell.css");
+const source = path.join(root, "src", "styles");
+const target = path.join(root, "dist", "styles");
 
-fs.mkdirSync(path.dirname(target), { recursive: true });
-fs.copyFileSync(source, target);
+fs.mkdirSync(target, { recursive: true });
 
-console.log("Shivanya Shell CSS copied.");
+for (const file of fs.readdirSync(source)) {
+  if (!file.endsWith(".css")) {
+    continue;
+  }
+
+  fs.copyFileSync(
+    path.join(source, file),
+    path.join(target, file),
+  );
+}
+
+console.log("Shivanya Shell CSS and assets copied.");

package/packages/shell/src/components/DrawerHeader.tsx

@@ -1,19 +1,44 @@
+import {
+  CloseIcon,
+  IconButton,
+} from "shivanya-ui";
+
 import type { ShellBranding } from "../types/shell.js";
 import { ShellBrand } from "./ShellBrand.js";
 
+export interface DrawerHeaderProps {
+  branding?: ShellBranding;
+  onClose?: () => void;
+}
+
 export function DrawerHeader({
   branding,
   onClose,
-}: {
-  branding?: ShellBranding;
-  onClose?: () => void;
-}) {
+}: DrawerHeaderProps) {
   return (
     <header className="shivanya-shell-drawer-header">
-      {branding && <ShellBrand branding={{ ...branding, href: undefined }} />}
-      <button type="button" onClick={onClose} aria-label="Close menu">
-        ×
-      </button>
+      {branding && (
+        <ShellBrand
+          branding={{
+            ...branding,
+            href: undefined,
+          }}
+          compact={false}
+        />
+      )}
+
+      <IconButton
+        size="sm"
+        variant="ghost"
+        rounded
+        iconRotateOnHover
+        iconHoverColor="var(--shivanya-color-primary)"
+        aria-label="Close menu"
+        title="Close menu"
+        onClick={onClose}
+      >
+        <CloseIcon size="sm" />
+      </IconButton>
     </header>
   );
-}
+}

package/packages/shell/src/components/ShellBrand.tsx

@@ -1,12 +1,14 @@
 import type { ShellBranding } from "../types/shell.js";
 
+interface ShellBrandProps {
+  branding: ShellBranding;
+  compact?: boolean;
+}
+
 export function ShellBrand({
   branding,
   compact = false,
-}: {
-  branding: ShellBranding;
-  compact?: boolean;
-}) {
+}: ShellBrandProps) {
   const content = (
     <span className="shivanya-shell-brand-content">
       {branding.src ? (
@@ -16,17 +18,21 @@ export function ShellBrand({
           className="shivanya-shell-brand-image"
         />
       ) : null}
+
       <span className="shivanya-shell-brand-text">
         {branding.name && <strong>{branding.name}</strong>}
         {!compact && branding.subtitle && <small>{branding.subtitle}</small>}
       </span>
     </span>
   );
-  if (branding.href)
+
+  if (branding.href) {
     return (
       <a className="shivanya-shell-brand" href={branding.href}>
         {content}
       </a>
     );
+  }
+
   return <span className="shivanya-shell-brand">{content}</span>;
-}
+}

package/packages/shell/src/components/ShellFooter.tsx

@@ -7,12 +7,25 @@ export function ShellFooter({
   className = "",
 }: ShellFooterProps) {
   return (
-    <footer className={`shivanya-shell-footer ${className}`.trim()}>
-      {branding && <ShellBrand branding={branding} />}
-      {children}
-      <span className="shivanya-shell-footer-copy">
+    <footer
+      className={[
+        "shivanya-shell-footer",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className="shivanya-shell-footer-brand">
+        {branding && <ShellBrand branding={branding} />}
+      </div>
+
+      <div className="shivanya-shell-footer-content">
+        {children}
+      </div>
+
+      <div className="shivanya-shell-footer-copy">
         © {new Date().getFullYear()}
-      </span>
+      </div>
     </footer>
   );
-}
+}

package/packages/shell/src/components/ShellHeader.tsx

@@ -1,7 +1,8 @@
-"use client"
+"use client";
 
 import type { CSSProperties } from "react";
 import type { ShellHeaderProps } from "../types/shell.js";
+import { Button } from "shivanya-ui";
 import { useShell } from "../hooks/useShell.js";
 import { ShellBrand } from "./ShellBrand.js";
 
@@ -19,63 +20,45 @@ export function ShellHeader({
 }: ShellHeaderProps) {
   const shell = useShell();
 
-  const menuAction = () => {
-    if (
-      typeof window !== "undefined" &&
-      window.matchMedia("(max-width: 767px)").matches
-    ) {
-      shell.toggleMobile();
-    } else {
-      shell.toggleSidebar();
-    }
-  };
-
   return (
     <header
       className={`shivanya-shell-header shivanya-shell-header-${position} ${className}`.trim()}
       style={
         {
           "--shivanya-shell-header-height":
-            typeof height === "number"
-              ? `${height}px`
-              : height,
+            typeof height === "number" ? `${height}px` : height,
         } as CSSProperties
       }
     >
       <div className="shivanya-shell-header-inner">
         <div className="shivanya-shell-header-start">
           {showMenu && (
-            <button
-              type="button"
-              className="shivanya-shell-menu-button"
-              onClick={menuAction}
-              aria-label={menuLabel}
-              title={menuLabel}
-            >
-              <span aria-hidden="true">☰</span>
-            </button>
+            <div className="shivanya-shell-mobile-menu">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                rounded
+                onClick={shell.toggleMobile}
+                aria-label={menuLabel}
+                title={menuLabel}
+              >
+                ☰
+              </Button>
+            </div>
           )}
 
-          {start}
+          {branding && <ShellBrand branding={branding} compact={false} />}
 
-          {branding && (
-            <ShellBrand
-              branding={branding}
-              compact={shell.sidebarCollapsed}
-            />
-          )}
+          {start}
         </div>
 
-        <div className="shivanya-shell-header-center">
-          {center}
-        </div>
+        <div className="shivanya-shell-header-center">{center}</div>
 
-        <div className="shivanya-shell-header-end">
-          {end}
-        </div>
+        <div className="shivanya-shell-header-end">{end}</div>
       </div>
 
       {children}
     </header>
   );
-}
+}

package/packages/shell/src/components/ShellMobileNav.tsx

@@ -1,29 +1,116 @@
-"use client"
+"use client";
+
+import { useEffect, useState } from "react";
+import type {
+  AnimationEvent,
+  CSSProperties,
+} from "react";
 
-import { useEffect } from "react";
 import type { ShellMobileNavProps } from "../types/shell.js";
+
 import { ShellSidebar } from "./ShellSidebar.js";
-import { useShell } from "../hooks/useShell.js";
+import { DrawerHeader } from "./DrawerHeader.js";
+import { useOptionalShell } from "../hooks/useShell.js";
+
+export function ShellMobileNav({
+  open: controlledOpen,
+  onClose: controlledOnClose,
+  size = 280,
+  className = "",
+  ...props
+}: ShellMobileNavProps) {
+  const shell = useOptionalShell();
+
+  const open =
+    controlledOpen ?? shell?.mobileOpen ?? false;
+
+  const close =
+    controlledOnClose ?? shell?.closeMobile ?? (() => {});
+
+  const [mounted, setMounted] = useState(open);
 
-export function ShellMobileNav(props: ShellMobileNavProps) {
-  const shell = useShell();
-  const open = props.open ?? shell.mobileOpen;
-  const close = props.onClose ?? shell.closeMobile;
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+    }
+  }, [open]);
 
   useEffect(() => {
-    if (!open || typeof document === "undefined") return;
-    const previous = document.body.style.overflow;
+    if (!mounted) {
+      return;
+    }
+
+    const previousOverflow =
+      document.body.style.overflow;
+
+    const previousTouchAction =
+      document.body.style.touchAction;
+
     document.body.style.overflow = "hidden";
+    document.body.style.touchAction = "none";
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        close();
+      }
+    };
+
+    document.addEventListener(
+      "keydown",
+      handleKeyDown,
+    );
+
     return () => {
-      document.body.style.overflow = previous;
+      document.body.style.overflow =
+        previousOverflow;
+
+      document.body.style.touchAction =
+        previousTouchAction;
+
+      document.removeEventListener(
+        "keydown",
+        handleKeyDown,
+      );
     };
-  }, [open]);
+  }, [mounted, close]);
 
-  if (!open) return null;
+  if (!mounted) {
+    return null;
+  }
+
+  const panelStyle = {
+    "--shivanya-shell-mobile-width":
+      typeof size === "number"
+        ? `${size}px`
+        : size,
+  } as CSSProperties;
+
+  const handleAnimationEnd = (
+    event: AnimationEvent<HTMLElement>,
+  ) => {
+    if (
+      event.target !== event.currentTarget ||
+      event.animationName !==
+        "shivanya-mobile-drawer-close"
+    ) {
+      return;
+    }
+
+    if (!open) {
+      setMounted(false);
+    }
+  };
 
   return (
     <div
-      className="shivanya-shell-mobile-layer"
+      className={[
+        "shivanya-shell-mobile-layer",
+        open
+          ? "shivanya-shell-mobile-layer-open"
+          : "shivanya-shell-mobile-layer-closing",
+      ]
+        .filter(Boolean)
+        .join(" ")}
       role="dialog"
       aria-modal="true"
       aria-label="Navigation"
@@ -34,28 +121,30 @@ export function ShellMobileNav(props: ShellMobileNavProps) {
         onClick={close}
         aria-label="Close navigation"
       />
-      <div
+
+      <aside
         className="shivanya-shell-mobile-panel"
-        style={{
-          width:
-            typeof props.size === "number" ? `${props.size}px` : props.size,
-        }}
+        style={panelStyle}
+        onAnimationEnd={handleAnimationEnd}
       >
-        <button
-          type="button"
-          className="shivanya-shell-mobile-close"
-          onClick={close}
-          aria-label="Close navigation"
-        >
-          ×
-        </button>
+        <DrawerHeader
+          branding={props.branding}
+          onClose={close}
+        />
+
         <ShellSidebar
           {...props}
           collapsed={false}
           variant="static"
-          className={`shivanya-shell-mobile-sidebar ${props.className || ""}`}
+          branding={undefined}
+          className={[
+            "shivanya-shell-mobile-sidebar",
+            className,
+          ]
+            .filter(Boolean)
+            .join(" ")}
         />
-      </div>
+      </aside>
     </div>
   );
-}
+}

package/packages/shell/src/components/ShellRoot.tsx

@@ -1,11 +1,16 @@
-import type { CSSProperties } from "react";
 import type { ShellRootProps } from "../types/shell.js";
-import "../styles/shell.css";
 
-export function ShellRoot({ children, className = "", style }: ShellRootProps) {
+export function ShellRoot({
+  children,
+  className = "",
+  style,
+}: ShellRootProps) {
   return (
-    <div className={`shivanya-shell ${className}`.trim()} style={style}>
+    <div
+      className={`shivanya-shell ${className}`.trim()}
+      style={style}
+    >
       {children}
     </div>
   );
-}
+}

package/packages/shell/src/components/ShellSidebar.tsx

@@ -1,6 +1,21 @@
+"use client";
+
 import type { CSSProperties, ElementType } from "react";
-import type { ShellNavItem, ShellSidebarProps } from "../types/shell.js";
-import { getShellItemKey, isShellItemActive } from "../utils/navigation.js";
+import type {
+  ShellNavItem,
+  ShellSidebarProps,
+} from "../types/shell.js";
+
+import {
+  Sidebar,
+  SidebarItem,
+} from "shivanya-ui";
+
+import {
+  getShellItemKey,
+  isShellItemActive,
+} from "../utils/navigation.js";
+
 import { ShellBrand } from "./ShellBrand.js";
 
 export function ShellSidebar({
@@ -20,21 +35,43 @@ export function ShellSidebar({
 }: ShellSidebarProps) {
   return (
     <aside
-      className={`shivanya-shell-sidebar shivanya-shell-sidebar-${position} shivanya-shell-sidebar-${variant} ${collapsed ? "shivanya-shell-sidebar-collapsed" : ""} ${className}`.trim()}
+      className={[
+        "shivanya-shell-sidebar",
+        `shivanya-shell-sidebar-${position}`,
+        `shivanya-shell-sidebar-${variant}`,
+        collapsed
+          ? "shivanya-shell-sidebar-collapsed"
+          : "",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
       style={
         {
           "--shivanya-shell-sidebar-width":
-            typeof width === "number" ? `${width}px` : width,
+            typeof width === "number"
+              ? `${width}px`
+              : width,
         } as CSSProperties
       }
     >
       {branding && (
         <div className="shivanya-shell-sidebar-brand">
-          <ShellBrand branding={branding} compact={collapsed} />
+          <ShellBrand
+            branding={branding}
+            compact={collapsed}
+          />
         </div>
       )}
+
       {children || (
-        <nav className="shivanya-shell-nav" aria-label="Primary navigation">
+        <Sidebar
+          className="shivanya-shell-nav"
+          variant="ghost"
+          size="md"
+          radius="md"
+          itemPosition="start"
+        >
           {navigation.map((item, index) => (
             <ShellNavItemView
               key={getShellItemKey(item, index)}
@@ -45,9 +82,14 @@ export function ShellSidebar({
               onNavigate={onNavigate}
             />
           ))}
-        </nav>
+        </Sidebar>
+      )}
+
+      {footer && (
+        <div className="shivanya-shell-sidebar-footer">
+          {footer}
+        </div>
       )}
-      {footer && <div className="shivanya-shell-sidebar-footer">{footer}</div>}
     </aside>
   );
 }
@@ -65,48 +107,67 @@ function ShellNavItemView({
   collapsed: boolean;
   onNavigate?: (item: ShellNavItem) => void;
 }) {
-  if (item.divider)
-    return <div className="shivanya-shell-nav-divider" role="separator" />;
-  const className =
-    `shivanya-shell-nav-item ${active ? "is-active" : ""} ${item.disabled ? "is-disabled" : ""}`.trim();
-  const content = (
+  if (item.divider) {
+    return (
+      <div
+        className="shivanya-shell-nav-divider"
+        role="separator"
+      />
+    );
+  }
+
+  const handleClick = () => {
+    if (item.disabled) {
+      return;
+    }
+
+    item.onClick?.();
+    onNavigate?.(item);
+  };
+
+  const rightSection = (
     <>
-      <span className="shivanya-shell-nav-icon">{item.icon}</span>
-      <span className="shivanya-shell-nav-label">{item.label}</span>
       {!collapsed && item.badge ? (
-        <span className="shivanya-shell-nav-badge">{item.badge}</span>
+        <span className="shivanya-shell-nav-badge">
+          {item.badge}
+        </span>
       ) : null}
+
       {!collapsed && item.endIcon ? (
-        <span className="shivanya-shell-nav-end">{item.endIcon}</span>
+        <span className="shivanya-shell-nav-end">
+          {item.endIcon}
+        </span>
       ) : null}
     </>
   );
-  const handleClick = () => {
-    if (!item.disabled) {
-      item.onClick?.();
-      onNavigate?.(item);
-    }
-  };
-  if (Link && item.href && !item.disabled)
-    return (
-      <Link
-        className={className}
-        href={item.href}
-        onClick={handleClick}
-        title={collapsed ? String(item.label ?? "") : undefined}
-      >
-        {content}
-      </Link>
-    );
+
   return (
-    <button
-      type="button"
-      className={className}
+    <SidebarItem
+      component={Link && item.href && !item.disabled ? Link : "button"}
+      href={
+        Link && item.href && !item.disabled
+          ? item.href
+          : undefined
+      }
+      icon={item.icon}
+      rightSection={rightSection}
+      active={active}
       disabled={item.disabled}
       onClick={handleClick}
-      title={collapsed ? String(item.label ?? "") : undefined}
+      className={[
+        "shivanya-shell-nav-item",
+        active ? "is-active" : "",
+        item.disabled ? "is-disabled" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      title={
+        collapsed
+          ? String(item.label ?? "")
+          : undefined
+      }
     >
-      {content}
-    </button>
+      {item.label}
+    </SidebarItem>
   );
-}
+}