@runic-rpc/ui 0.1.0 → 0.1.1

package/dist/index.d.mts

@@ -6,8 +6,10 @@ interface AppShellProps {
     topbar?: React.ReactNode;
     children: React.ReactNode;
     className?: string;
+    mobileMenuOpen?: boolean;
+    onMobileMenuToggle?: () => void;
 }
-declare function AppShell({ sidebar, topbar, children, className }: AppShellProps): react_jsx_runtime.JSX.Element;
+declare function AppShell({ sidebar, topbar, children, className, mobileMenuOpen, onMobileMenuToggle }: AppShellProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary';
@@ -44,8 +46,9 @@ interface SidebarProps {
     children: React.ReactNode;
     footer?: React.ReactNode;
     className?: string;
+    mobileOpen?: boolean;
 }
-declare function Sidebar({ logo, children, footer, className }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ logo, children, footer, className, mobileOpen }: SidebarProps): react_jsx_runtime.JSX.Element;
 interface SidebarItemProps {
     icon?: React.ReactNode;
     label: string;
@@ -59,8 +62,9 @@ interface TopbarProps {
     leftContent?: React.ReactNode;
     rightContent?: React.ReactNode;
     className?: string;
+    mobileMenuButton?: React.ReactNode;
 }
-declare function Topbar({ leftContent, rightContent, className }: TopbarProps): react_jsx_runtime.JSX.Element;
+declare function Topbar({ leftContent, rightContent, className, mobileMenuButton }: TopbarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Lightweight class name merger (like clsx but simpler)

package/dist/index.d.ts

@@ -6,8 +6,10 @@ interface AppShellProps {
     topbar?: React.ReactNode;
     children: React.ReactNode;
     className?: string;
+    mobileMenuOpen?: boolean;
+    onMobileMenuToggle?: () => void;
 }
-declare function AppShell({ sidebar, topbar, children, className }: AppShellProps): react_jsx_runtime.JSX.Element;
+declare function AppShell({ sidebar, topbar, children, className, mobileMenuOpen, onMobileMenuToggle }: AppShellProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary';
@@ -44,8 +46,9 @@ interface SidebarProps {
     children: React.ReactNode;
     footer?: React.ReactNode;
     className?: string;
+    mobileOpen?: boolean;
 }
-declare function Sidebar({ logo, children, footer, className }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ logo, children, footer, className, mobileOpen }: SidebarProps): react_jsx_runtime.JSX.Element;
 interface SidebarItemProps {
     icon?: React.ReactNode;
     label: string;
@@ -59,8 +62,9 @@ interface TopbarProps {
     leftContent?: React.ReactNode;
     rightContent?: React.ReactNode;
     className?: string;
+    mobileMenuButton?: React.ReactNode;
 }
-declare function Topbar({ leftContent, rightContent, className }: TopbarProps): react_jsx_runtime.JSX.Element;
+declare function Topbar({ leftContent, rightContent, className, mobileMenuButton }: TopbarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Lightweight class name merger (like clsx but simpler)

package/dist/index.js

@@ -51,12 +51,19 @@ function cn(...inputs) {
 
 // src/components/AppShell.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function AppShell({ sidebar, topbar, children, className }) {
+function AppShell({ sidebar, topbar, children, className, mobileMenuOpen, onMobileMenuToggle }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("flex h-screen bg-dark-bg", className), children: [
+    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50 z-30 md:hidden",
+        onClick: onMobileMenuToggle
+      }
+    ),
     sidebar,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden md:ml-64", children: [
       topbar,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "flex-1 overflow-y-auto", children })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "flex-1 overflow-y-auto p-3 sm:p-4 md:p-6", children })
     ] })
   ] });
 }
@@ -157,7 +164,7 @@ function EmptyState({ icon, title, description, action, className }) {
         className
       ),
       style: {
-        background: "linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(77, 232, 255, 0.05) 100%)"
+        background: "linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 107, 102, 0.05) 100%)"
       },
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-20 h-20 flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -166,8 +173,8 @@ function EmptyState({ icon, title, description, action, className }) {
             className: "w-full h-full flex items-center justify-center",
             style: {
               clipPath: "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
-              border: "2px solid #00D9FF",
-              boxShadow: "0 0 20px rgba(0, 217, 255, 0.3)"
+              border: "2px solid #FF3C35",
+              boxShadow: "0 0 20px rgba(255, 60, 53, 0.3)"
             },
             children: icon
           }
@@ -210,13 +217,15 @@ IconButton.displayName = "IconButton";
 
 // src/components/Sidebar.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function Sidebar({ logo, children, footer, className }) {
+function Sidebar({ logo, children, footer, className, mobileOpen }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "aside",
     {
       className: cn(
-        "w-64 h-screen bg-dark-surface border-r border-border-dark",
-        "flex flex-col",
+        "fixed top-0 left-0 w-64 h-screen bg-dark-surface border-r border-border-dark",
+        "flex flex-col z-40 transition-transform duration-300 ease-in-out",
+        // Hide sidebar on mobile by default, show when mobileOpen is true
+        mobileOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0",
         className
       ),
       children: [
@@ -228,40 +237,43 @@ function Sidebar({ logo, children, footer, className }) {
   );
 }
 function SidebarItem({ icon, label, active, href, onClick }) {
-  const Component = href ? "a" : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    Component,
-    {
-      href,
-      onClick,
-      className: cn(
-        "w-full h-10 px-4 flex items-center gap-3 rounded-lg",
-        "text-sm font-medium transition-all duration-200",
-        active ? "bg-dark-elevated text-text-primary border-l-2 border-cyan-primary" : "text-text-secondary hover:bg-dark-elevated hover:text-text-primary",
-        "focus:outline-none focus:ring-2 focus:ring-cyan-primary"
-      ),
-      children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-5 h-5 flex-shrink-0", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: label })
-      ]
-    }
+  const baseClassName = cn(
+    "w-full h-10 px-4 flex items-center gap-3 rounded-lg",
+    "text-sm font-medium transition-all duration-200",
+    active ? "bg-dark-elevated text-text-primary border-l-2 border-cyan-primary" : "text-text-secondary hover:bg-dark-elevated hover:text-text-primary",
+    "focus:outline-none focus:ring-2 focus:ring-cyan-primary",
+    "cursor-pointer"
   );
+  const content = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-5 h-5 flex-shrink-0", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: label })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href, className: baseClassName, children: content });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick, className: baseClassName, children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: baseClassName, children: content });
 }
 
 // src/components/Topbar.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function Topbar({ leftContent, rightContent, className }) {
+function Topbar({ leftContent, rightContent, className, mobileMenuButton }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "header",
     {
       className: cn(
         "h-16 border-b border-border-dark bg-dark-bg",
-        "flex items-center justify-between px-6",
+        "flex items-center justify-between px-3 sm:px-4 md:px-6",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center gap-4", children: leftContent }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center gap-3", children: rightContent })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-3 sm:gap-4", children: [
+          mobileMenuButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "md:hidden", children: mobileMenuButton }),
+          leftContent
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center gap-2 sm:gap-3", children: rightContent })
       ]
     }
   );

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/lib/utils.ts","../src/components/AppShell.tsx","../src/components/Button.tsx","../src/components/DropdownMenu.tsx","../src/components/EmptyState.tsx","../src/components/IconButton.tsx","../src/components/Sidebar.tsx","../src/components/Topbar.tsx"],"sourcesContent":["export { AppShell } from './components/AppShell';\nexport type { AppShellProps } from './components/AppShell';\n\nexport { Button } from './components/Button';\nexport type { ButtonProps } from './components/Button';\n\nexport { DropdownMenu, DropdownMenuItem } from './components/DropdownMenu';\nexport type { DropdownMenuProps, DropdownMenuItemProps } from './components/DropdownMenu';\n\nexport { EmptyState } from './components/EmptyState';\nexport type { EmptyStateProps } from './components/EmptyState';\n\nexport { IconButton } from './components/IconButton';\nexport type { IconButtonProps } from './components/IconButton';\n\nexport { Sidebar, SidebarItem } from './components/Sidebar';\nexport type { SidebarProps, SidebarItemProps } from './components/Sidebar';\n\nexport { Topbar } from './components/Topbar';\nexport type { TopbarProps } from './components/Topbar';\n\nexport { cn } from './lib/utils';\n","/**\n * Lightweight class name merger (like clsx but simpler)\n */\nexport function cn(...inputs: (string | undefined | null | false)[]): string {\n  return inputs.filter(Boolean).join(' ');\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface AppShellProps {\n  sidebar: React.ReactNode;\n  topbar?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function AppShell({ sidebar, topbar, children, className }: AppShellProps) {\n  return (\n    <div className={cn('flex h-screen bg-dark-bg', className)}>\n      {sidebar}\n      <div className=\"flex-1 flex flex-col overflow-hidden\">\n        {topbar}\n        <main className=\"flex-1 overflow-y-auto\">{children}</main>\n      </div>\n    </div>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary';\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant = 'primary', ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'px-6 py-3 text-sm font-medium rounded-lg transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          variant === 'primary' &&\n            'bg-dark-elevated border border-border-light text-text-primary hover:border-cyan-primary',\n          variant === 'secondary' &&\n            'bg-transparent border border-border-dark text-text-secondary hover:bg-dark-elevated',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface DropdownMenuProps {\n  trigger: React.ReactNode;\n  children: React.ReactNode;\n  align?: 'left' | 'right';\n}\n\nexport function DropdownMenu({ trigger, children, align = 'right' }: DropdownMenuProps) {\n  const [open, setOpen] = React.useState(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [open]);\n\n  return (\n    <div className=\"relative\" ref={dropdownRef}>\n      <div onClick={() => setOpen(!open)}>{trigger}</div>\n      {open && (\n        <div\n          className={cn(\n            'absolute top-full mt-2 w-56 z-50',\n            'bg-dark-surface border border-border-dark rounded-xl shadow-lg p-2',\n            align === 'right' ? 'right-0' : 'left-0'\n          )}\n          style={{ boxShadow: '0 10px 40px rgba(0, 0, 0, 0.5)' }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: React.ReactNode;\n}\n\nexport const DropdownMenuItem = React.forwardRef<HTMLButtonElement, DropdownMenuItemProps>(\n  ({ className, icon, children, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'w-full h-10 px-3 flex items-center gap-3',\n          'text-sm font-medium text-text-secondary',\n          'hover:bg-dark-elevated hover:text-text-primary',\n          'rounded-lg transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary',\n          className\n        )}\n        {...props}\n      >\n        {icon && <span className=\"w-5 h-5 flex-shrink-0\">{icon}</span>}\n        <span>{children}</span>\n      </button>\n    );\n  }\n);\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface EmptyStateProps {\n  icon?: React.ReactNode;\n  title: string;\n  description?: string;\n  action?: React.ReactNode;\n  className?: string;\n}\n\nexport function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center p-12 rounded-xl',\n        'glassmorphism border-2 border-cyan-primary/20',\n        className\n      )}\n      style={{\n        background:\n          'linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(77, 232, 255, 0.05) 100%)',\n      }}\n    >\n      {icon && (\n        <div className=\"w-20 h-20 flex items-center justify-center mb-4\">\n          <div\n            className=\"w-full h-full flex items-center justify-center\"\n            style={{\n              clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)',\n              border: '2px solid #00D9FF',\n              boxShadow: '0 0 20px rgba(0, 217, 255, 0.3)',\n            }}\n          >\n            {icon}\n          </div>\n        </div>\n      )}\n      <h3 className=\"text-xl font-semibold text-text-primary mb-2\">{title}</h3>\n      {description && <p className=\"text-sm text-text-secondary text-center mb-6\">{description}</p>}\n      {action}\n    </div>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'circle' | 'rounded';\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, variant = 'circle', ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'w-10 h-10 flex items-center justify-center',\n          'bg-dark-elevated border border-border-dark',\n          'text-text-secondary hover:text-text-primary',\n          'hover:bg-dark-elevated hover:border-cyan-primary',\n          'transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          variant === 'circle' && 'rounded-full',\n          variant === 'rounded' && 'rounded-lg',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface SidebarProps {\n  logo?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n}\n\nexport function Sidebar({ logo, children, footer, className }: SidebarProps) {\n  return (\n    <aside\n      className={cn(\n        'w-64 h-screen bg-dark-surface border-r border-border-dark',\n        'flex flex-col',\n        className\n      )}\n    >\n      {logo && <div className=\"p-6 border-b border-border-dark\">{logo}</div>}\n      <nav className=\"flex-1 overflow-y-auto p-4\">{children}</nav>\n      {footer && <div className=\"p-4 border-t border-border-dark\">{footer}</div>}\n    </aside>\n  );\n}\n\nexport interface SidebarItemProps {\n  icon?: React.ReactNode;\n  label: string;\n  active?: boolean;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport function SidebarItem({ icon, label, active, href, onClick }: SidebarItemProps) {\n  const Component = href ? 'a' : 'button';\n\n  return (\n    <Component\n      href={href}\n      onClick={onClick}\n      className={cn(\n        'w-full h-10 px-4 flex items-center gap-3 rounded-lg',\n        'text-sm font-medium transition-all duration-200',\n        active\n          ? 'bg-dark-elevated text-text-primary border-l-2 border-cyan-primary'\n          : 'text-text-secondary hover:bg-dark-elevated hover:text-text-primary',\n        'focus:outline-none focus:ring-2 focus:ring-cyan-primary'\n      )}\n    >\n      {icon && <span className=\"w-5 h-5 flex-shrink-0\">{icon}</span>}\n      <span>{label}</span>\n    </Component>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface TopbarProps {\n  leftContent?: React.ReactNode;\n  rightContent?: React.ReactNode;\n  className?: string;\n}\n\nexport function Topbar({ leftContent, rightContent, className }: TopbarProps) {\n  return (\n    <header\n      className={cn(\n        'h-16 border-b border-border-dark bg-dark-bg',\n        'flex items-center justify-between px-6',\n        className\n      )}\n    >\n      <div className=\"flex items-center gap-4\">{leftContent}</div>\n      <div className=\"flex items-center gap-3\">{rightContent}</div>\n    </header>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGO,SAAS,MAAM,QAAuD;AAC3E,SAAO,OAAO,OAAO,OAAO,EAAE,KAAK,GAAG;AACxC;;;ACSM;AAJC,SAAS,SAAS,EAAE,SAAS,QAAQ,UAAU,UAAU,GAAkB;AAChF,SACE,6CAAC,SAAI,WAAW,GAAG,4BAA4B,SAAS,GACrD;AAAA;AAAA,IACD,6CAAC,SAAI,WAAU,wCACZ;AAAA;AAAA,MACD,4CAAC,UAAK,WAAU,0BAA0B,UAAS;AAAA,OACrD;AAAA,KACF;AAEJ;;;ACpBA,YAAuB;AAUjB,IAAAA,sBAAA;AAHC,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AACrD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,aACV;AAAA,UACF,YAAY,eACV;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;;;AC5BrB,IAAAC,SAAuB;AA8BnB,IAAAC,sBAAA;AArBG,SAAS,aAAa,EAAE,SAAS,UAAU,QAAQ,QAAQ,GAAsB;AACtF,QAAM,CAAC,MAAM,OAAO,IAAU,gBAAS,KAAK;AAC5C,QAAM,cAAoB,cAAuB,IAAI;AAErD,EAAM,iBAAU,MAAM;AACpB,UAAM,qBAAqB,CAAC,UAAsB;AAChD,UAAI,YAAY,WAAW,CAAC,YAAY,QAAQ,SAAS,MAAM,MAAc,GAAG;AAC9E,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,QAAI,MAAM;AACR,eAAS,iBAAiB,aAAa,kBAAkB;AAAA,IAC3D;AAEA,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,8CAAC,SAAI,WAAU,YAAW,KAAK,aAC7B;AAAA,iDAAC,SAAI,SAAS,MAAM,QAAQ,CAAC,IAAI,GAAI,mBAAQ;AAAA,IAC5C,QACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,UAAU,UAAU,YAAY;AAAA,QAClC;AAAA,QACA,OAAO,EAAE,WAAW,iCAAiC;AAAA,QAEpD;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAMO,IAAM,mBAAyB;AAAA,EACpC,CAAC,EAAE,WAAW,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ;AAChD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,kBAAQ,6CAAC,UAAK,WAAU,yBAAyB,gBAAK;AAAA,UACvD,6CAAC,UAAM,UAAS;AAAA;AAAA;AAAA,IAClB;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;;;AC7D3B,IAAAC,sBAAA;AAFG,SAAS,WAAW,EAAE,MAAM,OAAO,aAAa,QAAQ,UAAU,GAAoB;AAC3F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,YACE;AAAA,MACJ;AAAA,MAEC;AAAA,gBACC,6CAAC,SAAI,WAAU,mDACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,WAAW;AAAA,YACb;AAAA,YAEC;AAAA;AAAA,QACH,GACF;AAAA,QAEF,6CAAC,QAAG,WAAU,gDAAgD,iBAAM;AAAA,QACnE,eAAe,6CAAC,OAAE,WAAU,gDAAgD,uBAAY;AAAA,QACxF;AAAA;AAAA;AAAA,EACH;AAEJ;;;AC3CA,IAAAC,SAAuB;AAUjB,IAAAC,sBAAA;AAHC,IAAM,aAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AACpD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,YAAY;AAAA,UACxB,YAAY,aAAa;AAAA,UACzB;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;;;AClBrB,IAAAC,sBAAA;AAFG,SAAS,QAAQ,EAAE,MAAM,UAAU,QAAQ,UAAU,GAAiB;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA,gBAAQ,6CAAC,SAAI,WAAU,mCAAmC,gBAAK;AAAA,QAChE,6CAAC,SAAI,WAAU,8BAA8B,UAAS;AAAA,QACrD,UAAU,6CAAC,SAAI,WAAU,mCAAmC,kBAAO;AAAA;AAAA;AAAA,EACtE;AAEJ;AAUO,SAAS,YAAY,EAAE,MAAM,OAAO,QAAQ,MAAM,QAAQ,GAAqB;AACpF,QAAM,YAAY,OAAO,MAAM;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,SACI,sEACA;AAAA,QACJ;AAAA,MACF;AAAA,MAEC;AAAA,gBAAQ,6CAAC,UAAK,WAAU,yBAAyB,gBAAK;AAAA,QACvD,6CAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,EACf;AAEJ;;;AC3CI,IAAAC,sBAAA;AAFG,SAAS,OAAO,EAAE,aAAa,cAAc,UAAU,GAAgB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,qDAAC,SAAI,WAAU,2BAA2B,uBAAY;AAAA,QACtD,6CAAC,SAAI,WAAU,2BAA2B,wBAAa;AAAA;AAAA;AAAA,EACzD;AAEJ;","names":["import_jsx_runtime","React","import_jsx_runtime","import_jsx_runtime","React","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/lib/utils.ts","../src/components/AppShell.tsx","../src/components/Button.tsx","../src/components/DropdownMenu.tsx","../src/components/EmptyState.tsx","../src/components/IconButton.tsx","../src/components/Sidebar.tsx","../src/components/Topbar.tsx"],"sourcesContent":["export { AppShell } from './components/AppShell';\nexport type { AppShellProps } from './components/AppShell';\n\nexport { Button } from './components/Button';\nexport type { ButtonProps } from './components/Button';\n\nexport { DropdownMenu, DropdownMenuItem } from './components/DropdownMenu';\nexport type { DropdownMenuProps, DropdownMenuItemProps } from './components/DropdownMenu';\n\nexport { EmptyState } from './components/EmptyState';\nexport type { EmptyStateProps } from './components/EmptyState';\n\nexport { IconButton } from './components/IconButton';\nexport type { IconButtonProps } from './components/IconButton';\n\nexport { Sidebar, SidebarItem } from './components/Sidebar';\nexport type { SidebarProps, SidebarItemProps } from './components/Sidebar';\n\nexport { Topbar } from './components/Topbar';\nexport type { TopbarProps } from './components/Topbar';\n\nexport { cn } from './lib/utils';\n","/**\n * Lightweight class name merger (like clsx but simpler)\n */\nexport function cn(...inputs: (string | undefined | null | false)[]): string {\n  return inputs.filter(Boolean).join(' ');\n}\n","'use client';\n\nimport * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface AppShellProps {\n  sidebar: React.ReactNode;\n  topbar?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n  mobileMenuOpen?: boolean;\n  onMobileMenuToggle?: () => void;\n}\n\nexport function AppShell({ sidebar, topbar, children, className, mobileMenuOpen, onMobileMenuToggle }: AppShellProps) {\n  return (\n    <div className={cn('flex h-screen bg-dark-bg', className)}>\n      {/* Mobile overlay */}\n      {mobileMenuOpen && (\n        <div\n          className=\"fixed inset-0 bg-black/50 z-30 md:hidden\"\n          onClick={onMobileMenuToggle}\n        />\n      )}\n\n      {sidebar}\n\n      <div className=\"flex-1 flex flex-col overflow-hidden md:ml-64\">\n        {topbar}\n        <main className=\"flex-1 overflow-y-auto p-3 sm:p-4 md:p-6\">{children}</main>\n      </div>\n    </div>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary';\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant = 'primary', ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'px-6 py-3 text-sm font-medium rounded-lg transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          variant === 'primary' &&\n            'bg-dark-elevated border border-border-light text-text-primary hover:border-cyan-primary',\n          variant === 'secondary' &&\n            'bg-transparent border border-border-dark text-text-secondary hover:bg-dark-elevated',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface DropdownMenuProps {\n  trigger: React.ReactNode;\n  children: React.ReactNode;\n  align?: 'left' | 'right';\n}\n\nexport function DropdownMenu({ trigger, children, align = 'right' }: DropdownMenuProps) {\n  const [open, setOpen] = React.useState(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [open]);\n\n  return (\n    <div className=\"relative\" ref={dropdownRef}>\n      <div onClick={() => setOpen(!open)}>{trigger}</div>\n      {open && (\n        <div\n          className={cn(\n            'absolute top-full mt-2 w-56 z-50',\n            'bg-dark-surface border border-border-dark rounded-xl shadow-lg p-2',\n            align === 'right' ? 'right-0' : 'left-0'\n          )}\n          style={{ boxShadow: '0 10px 40px rgba(0, 0, 0, 0.5)' }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: React.ReactNode;\n}\n\nexport const DropdownMenuItem = React.forwardRef<HTMLButtonElement, DropdownMenuItemProps>(\n  ({ className, icon, children, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'w-full h-10 px-3 flex items-center gap-3',\n          'text-sm font-medium text-text-secondary',\n          'hover:bg-dark-elevated hover:text-text-primary',\n          'rounded-lg transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary',\n          className\n        )}\n        {...props}\n      >\n        {icon && <span className=\"w-5 h-5 flex-shrink-0\">{icon}</span>}\n        <span>{children}</span>\n      </button>\n    );\n  }\n);\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface EmptyStateProps {\n  icon?: React.ReactNode;\n  title: string;\n  description?: string;\n  action?: React.ReactNode;\n  className?: string;\n}\n\nexport function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center p-12 rounded-xl',\n        'glassmorphism border-2 border-cyan-primary/20',\n        className\n      )}\n      style={{\n        background:\n          'linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 107, 102, 0.05) 100%)',\n      }}\n    >\n      {icon && (\n        <div className=\"w-20 h-20 flex items-center justify-center mb-4\">\n          <div\n            className=\"w-full h-full flex items-center justify-center\"\n            style={{\n              clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)',\n              border: '2px solid #FF3C35',\n              boxShadow: '0 0 20px rgba(255, 60, 53, 0.3)',\n            }}\n          >\n            {icon}\n          </div>\n        </div>\n      )}\n      <h3 className=\"text-xl font-semibold text-text-primary mb-2\">{title}</h3>\n      {description && <p className=\"text-sm text-text-secondary text-center mb-6\">{description}</p>}\n      {action}\n    </div>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'circle' | 'rounded';\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, variant = 'circle', ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'w-10 h-10 flex items-center justify-center',\n          'bg-dark-elevated border border-border-dark',\n          'text-text-secondary hover:text-text-primary',\n          'hover:bg-dark-elevated hover:border-cyan-primary',\n          'transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          variant === 'circle' && 'rounded-full',\n          variant === 'rounded' && 'rounded-lg',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface SidebarProps {\n  logo?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  mobileOpen?: boolean;\n}\n\nexport function Sidebar({ logo, children, footer, className, mobileOpen }: SidebarProps) {\n  return (\n    <aside\n      className={cn(\n        'fixed top-0 left-0 w-64 h-screen bg-dark-surface border-r border-border-dark',\n        'flex flex-col z-40 transition-transform duration-300 ease-in-out',\n        // Hide sidebar on mobile by default, show when mobileOpen is true\n        mobileOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',\n        className\n      )}\n    >\n      {logo && <div className=\"p-6 border-b border-border-dark\">{logo}</div>}\n      <nav className=\"flex-1 overflow-y-auto p-4\">{children}</nav>\n      {footer && <div className=\"p-4 border-t border-border-dark\">{footer}</div>}\n    </aside>\n  );\n}\n\nexport interface SidebarItemProps {\n  icon?: React.ReactNode;\n  label: string;\n  active?: boolean;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport function SidebarItem({ icon, label, active, href, onClick }: SidebarItemProps) {\n  const baseClassName = cn(\n    'w-full h-10 px-4 flex items-center gap-3 rounded-lg',\n    'text-sm font-medium transition-all duration-200',\n    active\n      ? 'bg-dark-elevated text-text-primary border-l-2 border-cyan-primary'\n      : 'text-text-secondary hover:bg-dark-elevated hover:text-text-primary',\n    'focus:outline-none focus:ring-2 focus:ring-cyan-primary',\n    'cursor-pointer'\n  );\n\n  const content = (\n    <>\n      {icon && <span className=\"w-5 h-5 flex-shrink-0\">{icon}</span>}\n      <span>{label}</span>\n    </>\n  );\n\n  // If href is provided, render as anchor (for standalone use)\n  if (href) {\n    return (\n      <a href={href} className={baseClassName}>\n        {content}\n      </a>\n    );\n  }\n\n  // If onClick is provided, render as button\n  if (onClick) {\n    return (\n      <button onClick={onClick} className={baseClassName}>\n        {content}\n      </button>\n    );\n  }\n\n  // Default: render as div (for use with Next.js Link wrapper)\n  return (\n    <div className={baseClassName}>\n      {content}\n    </div>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface TopbarProps {\n  leftContent?: React.ReactNode;\n  rightContent?: React.ReactNode;\n  className?: string;\n  mobileMenuButton?: React.ReactNode;\n}\n\nexport function Topbar({ leftContent, rightContent, className, mobileMenuButton }: TopbarProps) {\n  return (\n    <header\n      className={cn(\n        'h-16 border-b border-border-dark bg-dark-bg',\n        'flex items-center justify-between px-3 sm:px-4 md:px-6',\n        className\n      )}\n    >\n      <div className=\"flex items-center gap-3 sm:gap-4\">\n        {mobileMenuButton && (\n          <div className=\"md:hidden\">{mobileMenuButton}</div>\n        )}\n        {leftContent}\n      </div>\n      <div className=\"flex items-center gap-2 sm:gap-3\">{rightContent}</div>\n    </header>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGO,SAAS,MAAM,QAAuD;AAC3E,SAAO,OAAO,OAAO,OAAO,EAAE,KAAK,GAAG;AACxC;;;ACcQ;AALD,SAAS,SAAS,EAAE,SAAS,QAAQ,UAAU,WAAW,gBAAgB,mBAAmB,GAAkB;AACpH,SACE,6CAAC,SAAI,WAAW,GAAG,4BAA4B,SAAS,GAErD;AAAA,sBACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS;AAAA;AAAA,IACX;AAAA,IAGD;AAAA,IAED,6CAAC,SAAI,WAAU,iDACZ;AAAA;AAAA,MACD,4CAAC,UAAK,WAAU,4CAA4C,UAAS;AAAA,OACvE;AAAA,KACF;AAEJ;;;ACjCA,YAAuB;AAUjB,IAAAA,sBAAA;AAHC,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AACrD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,aACV;AAAA,UACF,YAAY,eACV;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;;;AC5BrB,IAAAC,SAAuB;AA8BnB,IAAAC,sBAAA;AArBG,SAAS,aAAa,EAAE,SAAS,UAAU,QAAQ,QAAQ,GAAsB;AACtF,QAAM,CAAC,MAAM,OAAO,IAAU,gBAAS,KAAK;AAC5C,QAAM,cAAoB,cAAuB,IAAI;AAErD,EAAM,iBAAU,MAAM;AACpB,UAAM,qBAAqB,CAAC,UAAsB;AAChD,UAAI,YAAY,WAAW,CAAC,YAAY,QAAQ,SAAS,MAAM,MAAc,GAAG;AAC9E,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,QAAI,MAAM;AACR,eAAS,iBAAiB,aAAa,kBAAkB;AAAA,IAC3D;AAEA,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,8CAAC,SAAI,WAAU,YAAW,KAAK,aAC7B;AAAA,iDAAC,SAAI,SAAS,MAAM,QAAQ,CAAC,IAAI,GAAI,mBAAQ;AAAA,IAC5C,QACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,UAAU,UAAU,YAAY;AAAA,QAClC;AAAA,QACA,OAAO,EAAE,WAAW,iCAAiC;AAAA,QAEpD;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAMO,IAAM,mBAAyB;AAAA,EACpC,CAAC,EAAE,WAAW,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ;AAChD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,kBAAQ,6CAAC,UAAK,WAAU,yBAAyB,gBAAK;AAAA,UACvD,6CAAC,UAAM,UAAS;AAAA;AAAA;AAAA,IAClB;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;;;AC7D3B,IAAAC,sBAAA;AAFG,SAAS,WAAW,EAAE,MAAM,OAAO,aAAa,QAAQ,UAAU,GAAoB;AAC3F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,YACE;AAAA,MACJ;AAAA,MAEC;AAAA,gBACC,6CAAC,SAAI,WAAU,mDACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,WAAW;AAAA,YACb;AAAA,YAEC;AAAA;AAAA,QACH,GACF;AAAA,QAEF,6CAAC,QAAG,WAAU,gDAAgD,iBAAM;AAAA,QACnE,eAAe,6CAAC,OAAE,WAAU,gDAAgD,uBAAY;AAAA,QACxF;AAAA;AAAA;AAAA,EACH;AAEJ;;;AC3CA,IAAAC,SAAuB;AAUjB,IAAAC,sBAAA;AAHC,IAAM,aAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AACpD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,YAAY;AAAA,UACxB,YAAY,aAAa;AAAA,UACzB;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;;;ACjBrB,IAAAC,sBAAA;AAFG,SAAS,QAAQ,EAAE,MAAM,UAAU,QAAQ,WAAW,WAAW,GAAiB;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA,QAEA,aAAa,kBAAkB;AAAA,QAC/B;AAAA,MACF;AAAA,MAEC;AAAA,gBAAQ,6CAAC,SAAI,WAAU,mCAAmC,gBAAK;AAAA,QAChE,6CAAC,SAAI,WAAU,8BAA8B,UAAS;AAAA,QACrD,UAAU,6CAAC,SAAI,WAAU,mCAAmC,kBAAO;AAAA;AAAA;AAAA,EACtE;AAEJ;AAUO,SAAS,YAAY,EAAE,MAAM,OAAO,QAAQ,MAAM,QAAQ,GAAqB;AACpF,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,SACI,sEACA;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AAEA,QAAM,UACJ,8EACG;AAAA,YAAQ,6CAAC,UAAK,WAAU,yBAAyB,gBAAK;AAAA,IACvD,6CAAC,UAAM,iBAAM;AAAA,KACf;AAIF,MAAI,MAAM;AACR,WACE,6CAAC,OAAE,MAAY,WAAW,eACvB,mBACH;AAAA,EAEJ;AAGA,MAAI,SAAS;AACX,WACE,6CAAC,YAAO,SAAkB,WAAW,eAClC,mBACH;AAAA,EAEJ;AAGA,SACE,6CAAC,SAAI,WAAW,eACb,mBACH;AAEJ;;;AC5DM,IAAAC,sBAAA;AATC,SAAS,OAAO,EAAE,aAAa,cAAc,WAAW,iBAAiB,GAAgB;AAC9F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,sDAAC,SAAI,WAAU,oCACZ;AAAA,8BACC,6CAAC,SAAI,WAAU,aAAa,4BAAiB;AAAA,UAE9C;AAAA,WACH;AAAA,QACA,6CAAC,SAAI,WAAU,oCAAoC,wBAAa;AAAA;AAAA;AAAA,EAClE;AAEJ;","names":["import_jsx_runtime","React","import_jsx_runtime","import_jsx_runtime","React","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.mjs

@@ -7,12 +7,19 @@ function cn(...inputs) {
 
 // src/components/AppShell.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function AppShell({ sidebar, topbar, children, className }) {
+function AppShell({ sidebar, topbar, children, className, mobileMenuOpen, onMobileMenuToggle }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex h-screen bg-dark-bg", className), children: [
+    mobileMenuOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50 z-30 md:hidden",
+        onClick: onMobileMenuToggle
+      }
+    ),
     sidebar,
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col overflow-hidden md:ml-64", children: [
       topbar,
-      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto", children })
+      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto p-3 sm:p-4 md:p-6", children })
     ] })
   ] });
 }
@@ -113,7 +120,7 @@ function EmptyState({ icon, title, description, action, className }) {
         className
       ),
       style: {
-        background: "linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(77, 232, 255, 0.05) 100%)"
+        background: "linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 107, 102, 0.05) 100%)"
       },
       children: [
         icon && /* @__PURE__ */ jsx4("div", { className: "w-20 h-20 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx4(
@@ -122,8 +129,8 @@ function EmptyState({ icon, title, description, action, className }) {
             className: "w-full h-full flex items-center justify-center",
             style: {
               clipPath: "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
-              border: "2px solid #00D9FF",
-              boxShadow: "0 0 20px rgba(0, 217, 255, 0.3)"
+              border: "2px solid #FF3C35",
+              boxShadow: "0 0 20px rgba(255, 60, 53, 0.3)"
             },
             children: icon
           }
@@ -165,14 +172,16 @@ var IconButton = React3.forwardRef(
 IconButton.displayName = "IconButton";
 
 // src/components/Sidebar.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function Sidebar({ logo, children, footer, className }) {
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Sidebar({ logo, children, footer, className, mobileOpen }) {
   return /* @__PURE__ */ jsxs4(
     "aside",
     {
       className: cn(
-        "w-64 h-screen bg-dark-surface border-r border-border-dark",
-        "flex flex-col",
+        "fixed top-0 left-0 w-64 h-screen bg-dark-surface border-r border-border-dark",
+        "flex flex-col z-40 transition-transform duration-300 ease-in-out",
+        // Hide sidebar on mobile by default, show when mobileOpen is true
+        mobileOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0",
         className
       ),
       children: [
@@ -184,40 +193,43 @@ function Sidebar({ logo, children, footer, className }) {
   );
 }
 function SidebarItem({ icon, label, active, href, onClick }) {
-  const Component = href ? "a" : "button";
-  return /* @__PURE__ */ jsxs4(
-    Component,
-    {
-      href,
-      onClick,
-      className: cn(
-        "w-full h-10 px-4 flex items-center gap-3 rounded-lg",
-        "text-sm font-medium transition-all duration-200",
-        active ? "bg-dark-elevated text-text-primary border-l-2 border-cyan-primary" : "text-text-secondary hover:bg-dark-elevated hover:text-text-primary",
-        "focus:outline-none focus:ring-2 focus:ring-cyan-primary"
-      ),
-      children: [
-        icon && /* @__PURE__ */ jsx6("span", { className: "w-5 h-5 flex-shrink-0", children: icon }),
-        /* @__PURE__ */ jsx6("span", { children: label })
-      ]
-    }
+  const baseClassName = cn(
+    "w-full h-10 px-4 flex items-center gap-3 rounded-lg",
+    "text-sm font-medium transition-all duration-200",
+    active ? "bg-dark-elevated text-text-primary border-l-2 border-cyan-primary" : "text-text-secondary hover:bg-dark-elevated hover:text-text-primary",
+    "focus:outline-none focus:ring-2 focus:ring-cyan-primary",
+    "cursor-pointer"
   );
+  const content = /* @__PURE__ */ jsxs4(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx6("span", { className: "w-5 h-5 flex-shrink-0", children: icon }),
+    /* @__PURE__ */ jsx6("span", { children: label })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx6("a", { href, className: baseClassName, children: content });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx6("button", { onClick, className: baseClassName, children: content });
+  }
+  return /* @__PURE__ */ jsx6("div", { className: baseClassName, children: content });
 }
 
 // src/components/Topbar.tsx
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function Topbar({ leftContent, rightContent, className }) {
+function Topbar({ leftContent, rightContent, className, mobileMenuButton }) {
   return /* @__PURE__ */ jsxs5(
     "header",
     {
       className: cn(
         "h-16 border-b border-border-dark bg-dark-bg",
-        "flex items-center justify-between px-6",
+        "flex items-center justify-between px-3 sm:px-4 md:px-6",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-4", children: leftContent }),
-        /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-3", children: rightContent })
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 sm:gap-4", children: [
+          mobileMenuButton && /* @__PURE__ */ jsx7("div", { className: "md:hidden", children: mobileMenuButton }),
+          leftContent
+        ] }),
+        /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-2 sm:gap-3", children: rightContent })
       ]
     }
   );

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/AppShell.tsx","../src/components/Button.tsx","../src/components/DropdownMenu.tsx","../src/components/EmptyState.tsx","../src/components/IconButton.tsx","../src/components/Sidebar.tsx","../src/components/Topbar.tsx"],"sourcesContent":["/**\n * Lightweight class name merger (like clsx but simpler)\n */\nexport function cn(...inputs: (string | undefined | null | false)[]): string {\n  return inputs.filter(Boolean).join(' ');\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface AppShellProps {\n  sidebar: React.ReactNode;\n  topbar?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function AppShell({ sidebar, topbar, children, className }: AppShellProps) {\n  return (\n    <div className={cn('flex h-screen bg-dark-bg', className)}>\n      {sidebar}\n      <div className=\"flex-1 flex flex-col overflow-hidden\">\n        {topbar}\n        <main className=\"flex-1 overflow-y-auto\">{children}</main>\n      </div>\n    </div>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary';\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant = 'primary', ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'px-6 py-3 text-sm font-medium rounded-lg transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          variant === 'primary' &&\n            'bg-dark-elevated border border-border-light text-text-primary hover:border-cyan-primary',\n          variant === 'secondary' &&\n            'bg-transparent border border-border-dark text-text-secondary hover:bg-dark-elevated',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface DropdownMenuProps {\n  trigger: React.ReactNode;\n  children: React.ReactNode;\n  align?: 'left' | 'right';\n}\n\nexport function DropdownMenu({ trigger, children, align = 'right' }: DropdownMenuProps) {\n  const [open, setOpen] = React.useState(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [open]);\n\n  return (\n    <div className=\"relative\" ref={dropdownRef}>\n      <div onClick={() => setOpen(!open)}>{trigger}</div>\n      {open && (\n        <div\n          className={cn(\n            'absolute top-full mt-2 w-56 z-50',\n            'bg-dark-surface border border-border-dark rounded-xl shadow-lg p-2',\n            align === 'right' ? 'right-0' : 'left-0'\n          )}\n          style={{ boxShadow: '0 10px 40px rgba(0, 0, 0, 0.5)' }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: React.ReactNode;\n}\n\nexport const DropdownMenuItem = React.forwardRef<HTMLButtonElement, DropdownMenuItemProps>(\n  ({ className, icon, children, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'w-full h-10 px-3 flex items-center gap-3',\n          'text-sm font-medium text-text-secondary',\n          'hover:bg-dark-elevated hover:text-text-primary',\n          'rounded-lg transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary',\n          className\n        )}\n        {...props}\n      >\n        {icon && <span className=\"w-5 h-5 flex-shrink-0\">{icon}</span>}\n        <span>{children}</span>\n      </button>\n    );\n  }\n);\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface EmptyStateProps {\n  icon?: React.ReactNode;\n  title: string;\n  description?: string;\n  action?: React.ReactNode;\n  className?: string;\n}\n\nexport function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center p-12 rounded-xl',\n        'glassmorphism border-2 border-cyan-primary/20',\n        className\n      )}\n      style={{\n        background:\n          'linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(77, 232, 255, 0.05) 100%)',\n      }}\n    >\n      {icon && (\n        <div className=\"w-20 h-20 flex items-center justify-center mb-4\">\n          <div\n            className=\"w-full h-full flex items-center justify-center\"\n            style={{\n              clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)',\n              border: '2px solid #00D9FF',\n              boxShadow: '0 0 20px rgba(0, 217, 255, 0.3)',\n            }}\n          >\n            {icon}\n          </div>\n        </div>\n      )}\n      <h3 className=\"text-xl font-semibold text-text-primary mb-2\">{title}</h3>\n      {description && <p className=\"text-sm text-text-secondary text-center mb-6\">{description}</p>}\n      {action}\n    </div>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'circle' | 'rounded';\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, variant = 'circle', ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'w-10 h-10 flex items-center justify-center',\n          'bg-dark-elevated border border-border-dark',\n          'text-text-secondary hover:text-text-primary',\n          'hover:bg-dark-elevated hover:border-cyan-primary',\n          'transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          variant === 'circle' && 'rounded-full',\n          variant === 'rounded' && 'rounded-lg',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface SidebarProps {\n  logo?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n}\n\nexport function Sidebar({ logo, children, footer, className }: SidebarProps) {\n  return (\n    <aside\n      className={cn(\n        'w-64 h-screen bg-dark-surface border-r border-border-dark',\n        'flex flex-col',\n        className\n      )}\n    >\n      {logo && <div className=\"p-6 border-b border-border-dark\">{logo}</div>}\n      <nav className=\"flex-1 overflow-y-auto p-4\">{children}</nav>\n      {footer && <div className=\"p-4 border-t border-border-dark\">{footer}</div>}\n    </aside>\n  );\n}\n\nexport interface SidebarItemProps {\n  icon?: React.ReactNode;\n  label: string;\n  active?: boolean;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport function SidebarItem({ icon, label, active, href, onClick }: SidebarItemProps) {\n  const Component = href ? 'a' : 'button';\n\n  return (\n    <Component\n      href={href}\n      onClick={onClick}\n      className={cn(\n        'w-full h-10 px-4 flex items-center gap-3 rounded-lg',\n        'text-sm font-medium transition-all duration-200',\n        active\n          ? 'bg-dark-elevated text-text-primary border-l-2 border-cyan-primary'\n          : 'text-text-secondary hover:bg-dark-elevated hover:text-text-primary',\n        'focus:outline-none focus:ring-2 focus:ring-cyan-primary'\n      )}\n    >\n      {icon && <span className=\"w-5 h-5 flex-shrink-0\">{icon}</span>}\n      <span>{label}</span>\n    </Component>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface TopbarProps {\n  leftContent?: React.ReactNode;\n  rightContent?: React.ReactNode;\n  className?: string;\n}\n\nexport function Topbar({ leftContent, rightContent, className }: TopbarProps) {\n  return (\n    <header\n      className={cn(\n        'h-16 border-b border-border-dark bg-dark-bg',\n        'flex items-center justify-between px-6',\n        className\n      )}\n    >\n      <div className=\"flex items-center gap-4\">{leftContent}</div>\n      <div className=\"flex items-center gap-3\">{rightContent}</div>\n    </header>\n  );\n}\n"],"mappings":"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","names":["jsx","React","jsx","jsxs","jsx","jsxs","React","jsx","jsx","jsxs","jsx","jsxs"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/AppShell.tsx","../src/components/Button.tsx","../src/components/DropdownMenu.tsx","../src/components/EmptyState.tsx","../src/components/IconButton.tsx","../src/components/Sidebar.tsx","../src/components/Topbar.tsx"],"sourcesContent":["/**\n * Lightweight class name merger (like clsx but simpler)\n */\nexport function cn(...inputs: (string | undefined | null | false)[]): string {\n  return inputs.filter(Boolean).join(' ');\n}\n","'use client';\n\nimport * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface AppShellProps {\n  sidebar: React.ReactNode;\n  topbar?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n  mobileMenuOpen?: boolean;\n  onMobileMenuToggle?: () => void;\n}\n\nexport function AppShell({ sidebar, topbar, children, className, mobileMenuOpen, onMobileMenuToggle }: AppShellProps) {\n  return (\n    <div className={cn('flex h-screen bg-dark-bg', className)}>\n      {/* Mobile overlay */}\n      {mobileMenuOpen && (\n        <div\n          className=\"fixed inset-0 bg-black/50 z-30 md:hidden\"\n          onClick={onMobileMenuToggle}\n        />\n      )}\n\n      {sidebar}\n\n      <div className=\"flex-1 flex flex-col overflow-hidden md:ml-64\">\n        {topbar}\n        <main className=\"flex-1 overflow-y-auto p-3 sm:p-4 md:p-6\">{children}</main>\n      </div>\n    </div>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary';\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant = 'primary', ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'px-6 py-3 text-sm font-medium rounded-lg transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          variant === 'primary' &&\n            'bg-dark-elevated border border-border-light text-text-primary hover:border-cyan-primary',\n          variant === 'secondary' &&\n            'bg-transparent border border-border-dark text-text-secondary hover:bg-dark-elevated',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface DropdownMenuProps {\n  trigger: React.ReactNode;\n  children: React.ReactNode;\n  align?: 'left' | 'right';\n}\n\nexport function DropdownMenu({ trigger, children, align = 'right' }: DropdownMenuProps) {\n  const [open, setOpen] = React.useState(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [open]);\n\n  return (\n    <div className=\"relative\" ref={dropdownRef}>\n      <div onClick={() => setOpen(!open)}>{trigger}</div>\n      {open && (\n        <div\n          className={cn(\n            'absolute top-full mt-2 w-56 z-50',\n            'bg-dark-surface border border-border-dark rounded-xl shadow-lg p-2',\n            align === 'right' ? 'right-0' : 'left-0'\n          )}\n          style={{ boxShadow: '0 10px 40px rgba(0, 0, 0, 0.5)' }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: React.ReactNode;\n}\n\nexport const DropdownMenuItem = React.forwardRef<HTMLButtonElement, DropdownMenuItemProps>(\n  ({ className, icon, children, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'w-full h-10 px-3 flex items-center gap-3',\n          'text-sm font-medium text-text-secondary',\n          'hover:bg-dark-elevated hover:text-text-primary',\n          'rounded-lg transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary',\n          className\n        )}\n        {...props}\n      >\n        {icon && <span className=\"w-5 h-5 flex-shrink-0\">{icon}</span>}\n        <span>{children}</span>\n      </button>\n    );\n  }\n);\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface EmptyStateProps {\n  icon?: React.ReactNode;\n  title: string;\n  description?: string;\n  action?: React.ReactNode;\n  className?: string;\n}\n\nexport function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center p-12 rounded-xl',\n        'glassmorphism border-2 border-cyan-primary/20',\n        className\n      )}\n      style={{\n        background:\n          'linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 107, 102, 0.05) 100%)',\n      }}\n    >\n      {icon && (\n        <div className=\"w-20 h-20 flex items-center justify-center mb-4\">\n          <div\n            className=\"w-full h-full flex items-center justify-center\"\n            style={{\n              clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)',\n              border: '2px solid #FF3C35',\n              boxShadow: '0 0 20px rgba(255, 60, 53, 0.3)',\n            }}\n          >\n            {icon}\n          </div>\n        </div>\n      )}\n      <h3 className=\"text-xl font-semibold text-text-primary mb-2\">{title}</h3>\n      {description && <p className=\"text-sm text-text-secondary text-center mb-6\">{description}</p>}\n      {action}\n    </div>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'circle' | 'rounded';\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, variant = 'circle', ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'w-10 h-10 flex items-center justify-center',\n          'bg-dark-elevated border border-border-dark',\n          'text-text-secondary hover:text-text-primary',\n          'hover:bg-dark-elevated hover:border-cyan-primary',\n          'transition-all duration-200',\n          'focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          variant === 'circle' && 'rounded-full',\n          variant === 'rounded' && 'rounded-lg',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface SidebarProps {\n  logo?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  mobileOpen?: boolean;\n}\n\nexport function Sidebar({ logo, children, footer, className, mobileOpen }: SidebarProps) {\n  return (\n    <aside\n      className={cn(\n        'fixed top-0 left-0 w-64 h-screen bg-dark-surface border-r border-border-dark',\n        'flex flex-col z-40 transition-transform duration-300 ease-in-out',\n        // Hide sidebar on mobile by default, show when mobileOpen is true\n        mobileOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',\n        className\n      )}\n    >\n      {logo && <div className=\"p-6 border-b border-border-dark\">{logo}</div>}\n      <nav className=\"flex-1 overflow-y-auto p-4\">{children}</nav>\n      {footer && <div className=\"p-4 border-t border-border-dark\">{footer}</div>}\n    </aside>\n  );\n}\n\nexport interface SidebarItemProps {\n  icon?: React.ReactNode;\n  label: string;\n  active?: boolean;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport function SidebarItem({ icon, label, active, href, onClick }: SidebarItemProps) {\n  const baseClassName = cn(\n    'w-full h-10 px-4 flex items-center gap-3 rounded-lg',\n    'text-sm font-medium transition-all duration-200',\n    active\n      ? 'bg-dark-elevated text-text-primary border-l-2 border-cyan-primary'\n      : 'text-text-secondary hover:bg-dark-elevated hover:text-text-primary',\n    'focus:outline-none focus:ring-2 focus:ring-cyan-primary',\n    'cursor-pointer'\n  );\n\n  const content = (\n    <>\n      {icon && <span className=\"w-5 h-5 flex-shrink-0\">{icon}</span>}\n      <span>{label}</span>\n    </>\n  );\n\n  // If href is provided, render as anchor (for standalone use)\n  if (href) {\n    return (\n      <a href={href} className={baseClassName}>\n        {content}\n      </a>\n    );\n  }\n\n  // If onClick is provided, render as button\n  if (onClick) {\n    return (\n      <button onClick={onClick} className={baseClassName}>\n        {content}\n      </button>\n    );\n  }\n\n  // Default: render as div (for use with Next.js Link wrapper)\n  return (\n    <div className={baseClassName}>\n      {content}\n    </div>\n  );\n}\n","import * as React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface TopbarProps {\n  leftContent?: React.ReactNode;\n  rightContent?: React.ReactNode;\n  className?: string;\n  mobileMenuButton?: React.ReactNode;\n}\n\nexport function Topbar({ leftContent, rightContent, className, mobileMenuButton }: TopbarProps) {\n  return (\n    <header\n      className={cn(\n        'h-16 border-b border-border-dark bg-dark-bg',\n        'flex items-center justify-between px-3 sm:px-4 md:px-6',\n        className\n      )}\n    >\n      <div className=\"flex items-center gap-3 sm:gap-4\">\n        {mobileMenuButton && (\n          <div className=\"md:hidden\">{mobileMenuButton}</div>\n        )}\n        {leftContent}\n      </div>\n      <div className=\"flex items-center gap-2 sm:gap-3\">{rightContent}</div>\n    </header>\n  );\n}\n"],"mappings":"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","names":["jsx","React","jsx","jsxs","jsx","jsxs","React","jsx","jsx","jsxs","jsx","jsxs"]}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@runic-rpc/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Shared UI components and design system for RunicRPC",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./styles": "./src/styles/global.css",
     "./tailwind-preset": "./tailwind.preset.js"
@@ -19,6 +19,13 @@
     "src/styles",
     "tailwind.preset.js"
   ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/RunicRPC/runic-rpc.git",
@@ -52,12 +59,5 @@
     "react-dom": "^19.0.0",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "eslint src",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist"
   }
-}
+}

package/src/styles/global.css

@@ -32,7 +32,7 @@
   /* Firefox scrollbar */
   * {
     scrollbar-width: thin;
-    scrollbar-color: rgba(0, 217, 255, 0.3) #1A1A1A;
+    scrollbar-color: rgba(255, 60, 53, 0.3) #1A1A1A;
   }
 
   /* Selection */

package/tailwind.preset.js

@@ -9,9 +9,9 @@ module.exports = {
           elevated: '#242424',
         },
         cyan: {
-          primary: '#00D9FF',
-          light: '#4DE8FF',
-          glow: 'rgba(0, 217, 255, 0.15)',
+          primary: '#FF3C35',
+          light: '#FF6B66',
+          glow: 'rgba(255, 60, 53, 0.15)',
         },
         text: {
           primary: '#FFFFFF',

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 RunicRPC Contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.