@raydenui/ui 0.3.0 → 0.4.1

package/README.md

@@ -1,13 +1,21 @@
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="./public/MacBook Air - 17.png">
+  <source media="(prefers-color-scheme: light)" srcset="./public/MacBook Air - 17.png">
+  <img alt="Rayden UI - Build UI faster. A React UI system designed for humans and AI." src="./public/MacBook Air - 17.png" width="100%">
+</picture>
+
 # Rayden UI
 
-A modern, accessible React component library built with Tailwind CSS v4. Rayden UI brings the [Rayna UI](https://www.figma.com/community/file/1229854793310881425) Figma design system to life with pixel-perfect React components.
+A modern, accessible React component library built with Tailwind CSS v4. Rayden UI brings the [Rayna UI](https://www.raynaui.com/) Figma design system to life with pixel-perfect React components.
 
 [![npm version](https://img.shields.io/npm/v/@raydenui/ui.svg)](https://www.npmjs.com/package/@raydenui/ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 ## Features
 
-- **15+ Production-Ready Components** — Buttons, Inputs, Tabs, Alerts, and more
+- **24+ Production-Ready Components** — Buttons, Inputs, Tables, Selects, Sidebars, and more
+- **Pre-built Blocks** — Login forms, notifications, tables, and more ready to drop in
+- **AI Compatibility** — `@raydenui/ai` package for reliable LLM code generation
 - **Tailwind CSS v4** — Modern styling with custom design tokens
 - **Fully Typed** — Complete TypeScript support with exported types
 - **Accessible** — Built with ARIA attributes and keyboard navigation
@@ -84,10 +92,12 @@ function App() {
 | [Button](./docs/components/Button.md) | Primary action buttons with variants and icon support |
 | [ButtonGroup](./docs/components/ButtonGroup.md) | Horizontal grouping of related buttons |
 | [Input](./docs/components/Input.md) | Text input with label, helper text, and validation states |
+| [Select](./docs/components/Select.md) | Dropdown select with icons, avatars, and status indicators |
 | [Checkbox](./docs/components/FormControl.md#checkbox) | Checkbox input with label and description |
 | [Radio](./docs/components/FormControl.md#radio) | Radio button input with label and description |
 | [Toggle](./docs/components/FormControl.md#toggle) | Switch/toggle input for boolean values |
 | [Chip](./docs/components/Chip.md) | Compact input tags with close/filter actions |
+| [FileUpload](./docs/components/FileUpload.md) | Drag-and-drop file upload with progress and states |
 
 ### Navigation
 
@@ -96,6 +106,19 @@ function App() {
 | [Tabs](./docs/components/Tabs.md) | Tabbed navigation with line and pill variants |
 | [Breadcrumb](./docs/components/Breadcrumb.md) | Hierarchical page navigation |
 | [Pagination](./docs/components/Pagination.md) | Page navigation with prev/next controls |
+| [SidebarMenu](./docs/components/SidebarMenu.md) | Collapsible sidebar navigation with sections |
+| [DropdownMenu](./docs/components/DropdownMenu.md) | Accessible dropdown menu with keyboard navigation |
+
+### Data Display
+
+| Component | Description |
+|-----------|-------------|
+| [Table](./docs/components/Table.md) | Data table with sorting, selection, and avatars |
+| [Avatar](./docs/components/Avatar.md) | User avatar with image, initials, icon, and status |
+| [ActivityFeed](./docs/components/ActivityFeed.md) | Activity timelines and notification feeds |
+| [MetricsCard](./docs/components/MetricsCard.md) | Dashboard metric cards with 6 layout variations |
+| [Icon](./docs/components/Icon.md) | 200+ icons with outline and solid variants |
+| [EmptyStateIllustration](./docs/components/EmptyStateIllustration.md) | 19 empty state illustrations with custom palettes |
 
 ### Feedback
 
@@ -113,6 +136,98 @@ function App() {
 |-----------|-------------|
 | [Divider](./docs/components/Divider.md) | Content separator with optional label/button |
 
+## Blocks
+
+Pre-built UI patterns combining multiple components for common use cases. [View all blocks →](./docs/blocks.md)
+
+| Block | Description |
+|-------|-------------|
+| [LoginBlock](./docs/blocks.md#loginblock) | Complete login form with social providers |
+| [NotificationsBlock](./docs/blocks.md#notificationsblock) | Notification feed with actions and timestamps |
+| [TableBlock](./docs/blocks.md#tableblock) | Full-featured data table with search and filters |
+| [QuickSendBlock](./docs/blocks.md#quicksendblock) | Quick send interface for payments/transfers |
+| [RecentTransactionsBlock](./docs/blocks.md#recenttransactionsblock) | Transaction history display |
+| [EmptyStateBlock](./docs/blocks.md#emptystateblock) | Empty state with illustration and CTA |
+| [SearchableTableBlock](./docs/blocks.md#searchabletableblock) | Table with integrated search |
+
+```tsx
+import { LoginBlock, NotificationsBlock } from "@raydenui/ui";
+
+function App() {
+  return (
+    <LoginBlock
+      variant="split"
+      onSubmit={handleLogin}
+      socialProviders={["google", "github"]}
+    />
+  );
+}
+```
+
+## AI Integration
+
+The `@raydenui/ai` package enables LLMs to reliably generate Rayden UI code without hallucination.
+
+```bash
+# Run directly with npx (no install needed)
+npx @raydenui/ai
+
+# Or install globally
+npm install -g @raydenui/ai
+```
+
+### Features
+
+- **Component Manifests** — Structured definitions of all components, props, and examples
+- **Design Tokens** — Complete token system in JSON format
+- **Composition Rules** — Guidelines for combining components correctly
+- **MCP Server** — Model Context Protocol server for AI assistants
+
+### Claude Desktop Integration
+
+Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "rayden-ai": {
+      "command": "npx",
+      "args": ["@raydenui/ai"]
+    }
+  }
+}
+```
+
+### Claude Code Integration
+
+Add to your project's `.mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "rayden-ai": {
+      "command": "npx",
+      "args": ["@raydenui/ai"]
+    }
+  }
+}
+```
+
+### Programmatic Usage
+
+```tsx
+import { getComponentManifest, getAllManifests } from "@raydenui/ai/manifests";
+import { tokens } from "@raydenui/ai/tokens";
+
+// Get all component definitions
+const manifests = getAllManifests();
+
+// Get a specific component
+const buttonManifest = getComponentManifest("Button");
+```
+
+See the full [AI Integration Guide](./docs/rayden-ai.md) for setup instructions.
+
 ## Design Tokens
 
 Rayden UI includes a complete design token system extracted from the Rayna UI Figma design system.
@@ -236,4 +351,4 @@ MIT License - see [LICENSE](./LICENSE) for details.
 
 ---
 
-Made with care for the React community.
+Made with care for the React community. By Ovalay Studios (https://ovalay.studio)

package/dist/index.cjs

@@ -12399,7 +12399,294 @@ var SelectOption = react.forwardRef(
   }
 );
 SelectOption.displayName = "SelectOption";
+var ActivityItem = react.forwardRef(
+  ({
+    avatar,
+    text,
+    unread = false,
+    date,
+    time,
+    link,
+    badge,
+    connector,
+    children,
+    className,
+    ...rest
+  }, ref) => {
+    const hasConnectorAbove = connector === "middle" || connector === "last";
+    const hasConnectorBelow = connector === "top" || connector === "middle";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex gap-3 items-start", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col items-center shrink-0 gap-1 self-stretch",
+                (connector === "last" || !connector) && "justify-start"
+              ),
+              children: [
+                hasConnectorAbove && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-px bg-grey-100" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 size-8", children: avatar }),
+                hasConnectorBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-px bg-grey-100" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-1 flex-col gap-3 items-start min-w-0",
+                !connector && "",
+                connector === "top" && "pb-4",
+                (connector === "middle" || connector === "last") && "py-4"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-start gap-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-sm leading-5 text-grey-600", children: text }) }),
+                    unread && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-2 rounded-full bg-[#04802E] border-[1.5px] border-white" })
+                  ] }),
+                  (date || time || link || badge) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1 w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-start min-w-0", children: [
+                      date && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: date }),
+                      link && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: "\u30FB" }),
+                        link.href ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "a",
+                          {
+                            href: link.href,
+                            onClick: link.onClick,
+                            className: "text-xs font-medium text-primary-400 underline whitespace-nowrap",
+                            children: link.label
+                          }
+                        ) : /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: link.onClick,
+                            className: "text-xs font-medium text-primary-400 underline whitespace-nowrap",
+                            children: link.label
+                          }
+                        )
+                      ] }),
+                      badge && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: "\u30FB" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-primary-400 px-2 text-xs font-medium text-white whitespace-nowrap", children: badge })
+                      ] })
+                    ] }),
+                    time && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-grey-400 whitespace-nowrap", children: time })
+                  ] })
+                ] }),
+                children
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ActivityItem.displayName = "ActivityItem";
+var styleClasses = {
+  plain: "",
+  card: "bg-white rounded-lg p-2 shadow-[0px_2px_5px_-2px_rgba(16,25,40,0.06),0px_2px_7px_0px_rgba(16,25,40,0.05),0px_0px_0px_1px_rgba(16,25,40,0.05)]",
+  container: "bg-grey-50 border border-grey-100 rounded-lg p-3"
+};
+var ActivityContent = react.forwardRef(
+  ({
+    variant,
+    contentStyle = "card",
+    // File props
+    icon,
+    title,
+    size,
+    fileType,
+    date,
+    // Comment props
+    avatar,
+    author,
+    timestamp,
+    comment,
+    attachments,
+    reactions,
+    replies,
+    onReply,
+    // CTA props
+    primaryAction,
+    secondaryAction,
+    className,
+    ...rest
+  }, ref) => {
+    if (variant === "file") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: cn(
+            "flex items-center gap-2",
+            styleClasses[contentStyle],
+            className
+          ),
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-center size-8 rounded-lg bg-primary-50", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4", children: resolveIcon(icon ?? "file", "sm") }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-grey-700 whitespace-nowrap", children: title }),
+                size && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-0.5 rounded-full bg-grey-400" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: size })
+                ] })
+              ] }),
+              (fileType || date) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                fileType && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: fileType }),
+                fileType && date && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-0.5 rounded-full bg-grey-400" }),
+                date && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: date })
+              ] })
+            ] })
+          ]
+        }
+      );
+    }
+    if (variant === "comment") {
+      contentStyle === "plain" ? "flex gap-2 items-start" : cn("flex flex-col gap-2", styleClasses[contentStyle]);
+      const commentContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        (avatar || author) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+          avatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 size-5", children: avatar }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+            author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-sm font-medium text-grey-700 whitespace-nowrap", children: author }),
+            timestamp && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: [
+              "\u30FB",
+              timestamp
+            ] })
+          ] })
+        ] }),
+        comment && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-sm text-grey-600 leading-5", children: comment }),
+        attachments && attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+          attachments.slice(0, 2).map((file) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center gap-2 rounded-lg border border-grey-100 bg-white pl-1 pr-2 py-1",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-center size-6 rounded bg-primary-50 border border-primary-50", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-3", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "file", size: "xs" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-grey-700 whitespace-nowrap", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: file.name }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-grey-500", children: [
+                    ".",
+                    file.extension
+                  ] })
+                ] })
+              ]
+            },
+            `${file.name}.${file.extension}`
+          )),
+          attachments.length > 2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center size-8 rounded-lg border border-grey-100 bg-white px-2 py-1", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold text-grey-700", children: [
+            "+",
+            attachments.length - 2
+          ] }) })
+        ] }),
+        (reactions != null || replies != null) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+          reactions != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-grey-100 bg-white px-2 py-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-grey-700", children: "\u{1F91D}\u{1F525}" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-grey-700", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+                reactions,
+                " "
+              ] }),
+              "Reactions"
+            ] })
+          ] }),
+          replies != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-grey-100 bg-white px-2 py-1 h-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "message", size: "sm", className: "text-grey-400" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-grey-700", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+                replies,
+                " "
+              ] }),
+              "Replies"
+            ] })
+          ] })
+        ] }),
+        onReply && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onReply,
+            className: "inline-flex items-center justify-center rounded-lg border border-grey-300 bg-white px-3 py-1 text-xs font-semibold text-grey-700",
+            children: "Reply"
+          }
+        )
+      ] });
+      if (contentStyle === "plain") {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref,
+            className: cn("flex gap-2 items-start", className),
+            ...rest,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-px self-stretch bg-grey-100" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 items-start rounded-lg p-3", children: commentContent })
+            ]
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          className: cn(
+            "flex flex-col gap-2 items-start",
+            styleClasses[contentStyle],
+            className
+          ),
+          ...rest,
+          children: commentContent
+        }
+      );
+    }
+    if (variant === "cta") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: cn("flex items-start gap-3", className),
+          ...rest,
+          children: [
+            primaryAction && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: primaryAction.onClick,
+                className: "inline-flex items-center justify-center rounded-lg bg-primary-500 px-4 py-2 text-body-sm font-semibold text-white",
+                children: primaryAction.label
+              }
+            ),
+            secondaryAction && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: secondaryAction.onClick,
+                className: "inline-flex items-center justify-center rounded-lg border border-grey-300 bg-white px-4 py-2 text-body-sm font-semibold text-grey-700",
+                children: secondaryAction.label
+              }
+            )
+          ]
+        }
+      );
+    }
+    return null;
+  }
+);
+ActivityContent.displayName = "ActivityContent";
 
+exports.ActivityContent = ActivityContent;
+exports.ActivityItem = ActivityItem;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;