@runic-rpc/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+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.

package/dist/index.d.mts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface AppShellProps {
+    sidebar: React.ReactNode;
+    topbar?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function AppShell({ sidebar, topbar, children, className }: AppShellProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary';
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface DropdownMenuProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    align?: 'left' | 'right';
+}
+declare function DropdownMenu({ trigger, children, align }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+}
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, action, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'circle' | 'rounded';
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface SidebarProps {
+    logo?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+}
+declare function Sidebar({ logo, children, footer, className }: SidebarProps): react_jsx_runtime.JSX.Element;
+interface SidebarItemProps {
+    icon?: React.ReactNode;
+    label: string;
+    active?: boolean;
+    href?: string;
+    onClick?: () => void;
+}
+declare function SidebarItem({ icon, label, active, href, onClick }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+
+interface TopbarProps {
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    className?: string;
+}
+declare function Topbar({ leftContent, rightContent, className }: TopbarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Lightweight class name merger (like clsx but simpler)
+ */
+declare function cn(...inputs: (string | undefined | null | false)[]): string;
+
+export { AppShell, type AppShellProps, Button, type ButtonProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Topbar, type TopbarProps, cn };

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface AppShellProps {
+    sidebar: React.ReactNode;
+    topbar?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function AppShell({ sidebar, topbar, children, className }: AppShellProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary';
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface DropdownMenuProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    align?: 'left' | 'right';
+}
+declare function DropdownMenu({ trigger, children, align }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+}
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, action, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'circle' | 'rounded';
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface SidebarProps {
+    logo?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+}
+declare function Sidebar({ logo, children, footer, className }: SidebarProps): react_jsx_runtime.JSX.Element;
+interface SidebarItemProps {
+    icon?: React.ReactNode;
+    label: string;
+    active?: boolean;
+    href?: string;
+    onClick?: () => void;
+}
+declare function SidebarItem({ icon, label, active, href, onClick }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+
+interface TopbarProps {
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    className?: string;
+}
+declare function Topbar({ leftContent, rightContent, className }: TopbarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Lightweight class name merger (like clsx but simpler)
+ */
+declare function cn(...inputs: (string | undefined | null | false)[]): string;
+
+export { AppShell, type AppShellProps, Button, type ButtonProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Topbar, type TopbarProps, cn };

package/dist/index.js

@@ -0,0 +1,282 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AppShell: () => AppShell,
+  Button: () => Button,
+  DropdownMenu: () => DropdownMenu,
+  DropdownMenuItem: () => DropdownMenuItem,
+  EmptyState: () => EmptyState,
+  IconButton: () => IconButton,
+  Sidebar: () => Sidebar,
+  SidebarItem: () => SidebarItem,
+  Topbar: () => Topbar,
+  cn: () => cn
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return inputs.filter(Boolean).join(" ");
+}
+
+// src/components/AppShell.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function AppShell({ sidebar, topbar, children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("flex h-screen bg-dark-bg", className), children: [
+    sidebar,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+      topbar,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "flex-1 overflow-y-auto", children })
+    ] })
+  ] });
+}
+
+// src/components/Button.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = React.forwardRef(
+  ({ className, variant = "primary", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        ref,
+        className: cn(
+          "px-6 py-3 text-sm font-medium rounded-lg transition-all duration-200",
+          "focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          variant === "primary" && "bg-dark-elevated border border-border-light text-text-primary hover:border-cyan-primary",
+          variant === "secondary" && "bg-transparent border border-border-dark text-text-secondary hover:bg-dark-elevated",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/DropdownMenu.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function DropdownMenu({ trigger, children, align = "right" }) {
+  const [open, setOpen] = React2.useState(false);
+  const dropdownRef = React2.useRef(null);
+  React2.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { onClick: () => setOpen(!open), children: trigger }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: cn(
+          "absolute top-full mt-2 w-56 z-50",
+          "bg-dark-surface border border-border-dark rounded-xl shadow-lg p-2",
+          align === "right" ? "right-0" : "left-0"
+        ),
+        style: { boxShadow: "0 10px 40px rgba(0, 0, 0, 0.5)" },
+        children
+      }
+    )
+  ] });
+}
+var DropdownMenuItem = React2.forwardRef(
+  ({ className, icon, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        ref,
+        className: cn(
+          "w-full h-10 px-3 flex items-center gap-3",
+          "text-sm font-medium text-text-secondary",
+          "hover:bg-dark-elevated hover:text-text-primary",
+          "rounded-lg transition-all duration-200",
+          "focus:outline-none focus:ring-2 focus:ring-cyan-primary",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "w-5 h-5 flex-shrink-0", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children })
+        ]
+      }
+    );
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+// src/components/EmptyState.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function EmptyState({ icon, title, description, action, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center p-12 rounded-xl",
+        "glassmorphism border-2 border-cyan-primary/20",
+        className
+      ),
+      style: {
+        background: "linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(77, 232, 255, 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)(
+          "div",
+          {
+            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)"
+            },
+            children: icon
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "text-xl font-semibold text-text-primary mb-2", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-text-secondary text-center mb-6", children: description }),
+        action
+      ]
+    }
+  );
+}
+
+// src/components/IconButton.tsx
+var React3 = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var IconButton = React3.forwardRef(
+  ({ className, variant = "circle", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        ref,
+        className: cn(
+          "w-10 h-10 flex items-center justify-center",
+          "bg-dark-elevated border border-border-dark",
+          "text-text-secondary hover:text-text-primary",
+          "hover:bg-dark-elevated hover:border-cyan-primary",
+          "transition-all duration-200",
+          "focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          variant === "circle" && "rounded-full",
+          variant === "rounded" && "rounded-lg",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/components/Sidebar.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Sidebar({ logo, children, footer, className }) {
+  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",
+        className
+      ),
+      children: [
+        logo && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "p-6 border-b border-border-dark", children: logo }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("nav", { className: "flex-1 overflow-y-auto p-4", children }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "p-4 border-t border-border-dark", children: footer })
+      ]
+    }
+  );
+}
+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 })
+      ]
+    }
+  );
+}
+
+// src/components/Topbar.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Topbar({ leftContent, rightContent, className }) {
+  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",
+        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 })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppShell,
+  Button,
+  DropdownMenu,
+  DropdownMenuItem,
+  EmptyState,
+  IconButton,
+  Sidebar,
+  SidebarItem,
+  Topbar,
+  cn
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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":"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","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

@@ -0,0 +1,237 @@
+"use client";
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return inputs.filter(Boolean).join(" ");
+}
+
+// src/components/AppShell.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function AppShell({ sidebar, topbar, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-screen bg-dark-bg", className), children: [
+    sidebar,
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+      topbar,
+      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto", children })
+    ] })
+  ] });
+}
+
+// src/components/Button.tsx
+import * as React from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Button = React.forwardRef(
+  ({ className, variant = "primary", ...props }, ref) => {
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        ref,
+        className: cn(
+          "px-6 py-3 text-sm font-medium rounded-lg transition-all duration-200",
+          "focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          variant === "primary" && "bg-dark-elevated border border-border-light text-text-primary hover:border-cyan-primary",
+          variant === "secondary" && "bg-transparent border border-border-dark text-text-secondary hover:bg-dark-elevated",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/DropdownMenu.tsx
+import * as React2 from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DropdownMenu({ trigger, children, align = "right" }) {
+  const [open, setOpen] = React2.useState(false);
+  const dropdownRef = React2.useRef(null);
+  React2.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs2("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsx3("div", { onClick: () => setOpen(!open), children: trigger }),
+    open && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: cn(
+          "absolute top-full mt-2 w-56 z-50",
+          "bg-dark-surface border border-border-dark rounded-xl shadow-lg p-2",
+          align === "right" ? "right-0" : "left-0"
+        ),
+        style: { boxShadow: "0 10px 40px rgba(0, 0, 0, 0.5)" },
+        children
+      }
+    )
+  ] });
+}
+var DropdownMenuItem = React2.forwardRef(
+  ({ className, icon, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        ref,
+        className: cn(
+          "w-full h-10 px-3 flex items-center gap-3",
+          "text-sm font-medium text-text-secondary",
+          "hover:bg-dark-elevated hover:text-text-primary",
+          "rounded-lg transition-all duration-200",
+          "focus:outline-none focus:ring-2 focus:ring-cyan-primary",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx3("span", { className: "w-5 h-5 flex-shrink-0", children: icon }),
+          /* @__PURE__ */ jsx3("span", { children })
+        ]
+      }
+    );
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+// src/components/EmptyState.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action, className }) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center p-12 rounded-xl",
+        "glassmorphism border-2 border-cyan-primary/20",
+        className
+      ),
+      style: {
+        background: "linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(77, 232, 255, 0.05) 100%)"
+      },
+      children: [
+        icon && /* @__PURE__ */ jsx4("div", { className: "w-20 h-20 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx4(
+          "div",
+          {
+            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)"
+            },
+            children: icon
+          }
+        ) }),
+        /* @__PURE__ */ jsx4("h3", { className: "text-xl font-semibold text-text-primary mb-2", children: title }),
+        description && /* @__PURE__ */ jsx4("p", { className: "text-sm text-text-secondary text-center mb-6", children: description }),
+        action
+      ]
+    }
+  );
+}
+
+// src/components/IconButton.tsx
+import * as React3 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var IconButton = React3.forwardRef(
+  ({ className, variant = "circle", ...props }, ref) => {
+    return /* @__PURE__ */ jsx5(
+      "button",
+      {
+        ref,
+        className: cn(
+          "w-10 h-10 flex items-center justify-center",
+          "bg-dark-elevated border border-border-dark",
+          "text-text-secondary hover:text-text-primary",
+          "hover:bg-dark-elevated hover:border-cyan-primary",
+          "transition-all duration-200",
+          "focus:outline-none focus:ring-2 focus:ring-cyan-primary focus:ring-offset-2 focus:ring-offset-dark-bg",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          variant === "circle" && "rounded-full",
+          variant === "rounded" && "rounded-lg",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/components/Sidebar.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Sidebar({ logo, children, footer, className }) {
+  return /* @__PURE__ */ jsxs4(
+    "aside",
+    {
+      className: cn(
+        "w-64 h-screen bg-dark-surface border-r border-border-dark",
+        "flex flex-col",
+        className
+      ),
+      children: [
+        logo && /* @__PURE__ */ jsx6("div", { className: "p-6 border-b border-border-dark", children: logo }),
+        /* @__PURE__ */ jsx6("nav", { className: "flex-1 overflow-y-auto p-4", children }),
+        footer && /* @__PURE__ */ jsx6("div", { className: "p-4 border-t border-border-dark", children: footer })
+      ]
+    }
+  );
+}
+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 })
+      ]
+    }
+  );
+}
+
+// src/components/Topbar.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function Topbar({ leftContent, rightContent, className }) {
+  return /* @__PURE__ */ jsxs5(
+    "header",
+    {
+      className: cn(
+        "h-16 border-b border-border-dark bg-dark-bg",
+        "flex items-center justify-between 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 })
+      ]
+    }
+  );
+}
+export {
+  AppShell,
+  Button,
+  DropdownMenu,
+  DropdownMenuItem,
+  EmptyState,
+  IconButton,
+  Sidebar,
+  SidebarItem,
+  Topbar,
+  cn
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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"]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@runic-rpc/ui",
+  "version": "0.1.0",
+  "description": "Shared UI components and design system for RunicRPC",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./src/styles/global.css",
+    "./tailwind-preset": "./tailwind.preset.js"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "tailwind.preset.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/RunicRPC/runic-rpc.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/RunicRPC/runic-rpc#readme",
+  "bugs": {
+    "url": "https://github.com/RunicRPC/runic-rpc/issues"
+  },
+  "author": "RunicRPC <runic-rpc>",
+  "license": "MIT",
+  "keywords": [
+    "ui",
+    "components",
+    "design-system",
+    "react",
+    "tailwind"
+  ],
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "lucide-react": "^0.469.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "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

@@ -0,0 +1,52 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-border-dark;
+  }
+
+  body {
+    @apply bg-dark-bg text-text-primary font-sans antialiased;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-dark-surface;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-cyan-primary/30 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-cyan-primary/50;
+  }
+
+  /* Firefox scrollbar */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 217, 255, 0.3) #1A1A1A;
+  }
+
+  /* Selection */
+  ::selection {
+    @apply bg-cyan-primary/30 text-text-primary;
+  }
+}
+
+@layer utilities {
+  .focus-ring {
+    @apply ring-2 ring-cyan-primary ring-offset-2 ring-offset-dark-bg;
+  }
+
+  .glassmorphism {
+    @apply backdrop-blur-sm bg-dark-surface/50 border border-border-light;
+  }
+}

package/tailwind.preset.js

@@ -0,0 +1,35 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        dark: {
+          bg: '#0F0F0F',
+          surface: '#1A1A1A',
+          elevated: '#242424',
+        },
+        cyan: {
+          primary: '#00D9FF',
+          light: '#4DE8FF',
+          glow: 'rgba(0, 217, 255, 0.15)',
+        },
+        text: {
+          primary: '#FFFFFF',
+          secondary: '#9CA3AF',
+          muted: '#6B7280',
+        },
+        border: {
+          dark: '#2A2A2A',
+          light: '#3A3A3A',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      borderRadius: {
+        DEFAULT: '0.5rem',
+      },
+    },
+  },
+  plugins: [],
+};