rothzerg-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rothzerg
+
+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/README.md

@@ -0,0 +1,216 @@
+# Rothzerg UI
+
+A highly customizable, production-ready React component library built with TypeScript, TailwindCSS 4.2, and BEM CSS methodology.
+
+[![npm version](https://badge.fury.io/js/rothzerg-ui.svg)](https://www.npmjs.com/package/rothzerg-ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## Features
+
+- **20 production-ready components** — Button, Dialog, Select, Toast, and more
+- **5 page blocks** — Hero, Navbar, Sidebar, FeaturesGrid, CTA
+- **Fully customizable** — every token is a CSS custom property, configured via `rothzerg.config.js`
+- **BEM methodology** — semantic class names, easy to override
+- **TailwindCSS 4.2** — compiled at build time, no Tailwind required in your project
+- **Accessible** — built on Radix UI primitives, WCAG 2.1 AA
+- **TypeScript first** — comprehensive type definitions
+- **Tree-shakeable** — only import what you use
+- **Dark mode** — class-based or media query strategy
+- **Storybook** — interactive component browser
+
+---
+
+## Quick Start
+
+### 1. Install
+
+```bash
+bun add rothzerg-ui
+```
+
+### 2. Import styles
+
+```tsx
+// app/layout.tsx (Next.js) or main.tsx (Vite)
+import 'rothzerg-ui/styles';
+```
+
+### 3. Add the provider
+
+```tsx
+import { RothzergProvider } from 'rothzerg-ui';
+import config from './rothzerg.config';
+
+export default function App({ children }: { children: React.ReactNode }) {
+  return (
+    <RothzergProvider config={config}>
+      {children}
+    </RothzergProvider>
+  );
+}
+```
+
+### 4. Use components
+
+```tsx
+import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from 'rothzerg-ui';
+
+export function MyCard() {
+  return (
+    <Card variant="elevated" interactive>
+      <CardHeader row>
+        <CardTitle>Revenue</CardTitle>
+        <Badge variant="success">+12%</Badge>
+      </CardHeader>
+      <CardContent>
+        <p>$48,293 this month</p>
+        <Button variant="outline" size="sm">View report</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+---
+
+## Configuration
+
+Copy `rothzerg.config.example.js` to your project root and customize:
+
+```ts
+// rothzerg.config.ts
+import { defineConfig } from 'rothzerg-ui';
+
+export default defineConfig({
+  theme: {
+    colors: {
+      primary: '#6366f1',        // Your brand color
+      primaryForeground: '#fff',
+      // ... override any token
+    },
+    borderRadius: {
+      md: '0.5rem',             // Rounder components
+    },
+    fonts: {
+      sans: "'Inter', system-ui, sans-serif",
+    },
+    animation: {
+      duration: '120ms',        // Snappier transitions
+    },
+  },
+  darkMode: 'class',            // 'class' | 'media' | false
+});
+```
+
+All config values map to CSS custom properties (`--rz-color-primary`, `--rz-radius-md`, etc.) that you can also override directly in CSS.
+
+### Dark mode
+
+With `darkMode: 'class'` (default), toggle by adding the `dark` class to `<html>`:
+
+```js
+document.documentElement.classList.toggle('dark');
+```
+
+---
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | 6 variants, 4 sizes, loading state, polymorphic |
+| `Input` | With label, hint, error, left/right addons |
+| `Textarea` | With character counter |
+| `Label` | Required/optional indicators |
+| `Checkbox` | Including indeterminate state |
+| `Switch` | 3 sizes, with label and description |
+| `Select` | Flat and grouped options |
+| `Badge` | 7 variants, 3 sizes |
+| `Avatar` | With fallback initials, status indicator, `AvatarGroup` |
+| `Card` | With header, content, footer sub-components |
+| `Dialog` | 5 sizes, backdrop blur |
+| `DropdownMenu` | Sub-menus, checkboxes, radio groups |
+| `Tooltip` | 4 sides, custom content |
+| `Alert` | 5 variants, dismissible |
+| `Accordion` | Single/multiple, default/separated variants |
+| `Tabs` | Default, underline, pills variants |
+| `Separator` | Horizontal/vertical, with label |
+| `Skeleton` | Pulse/wave animation, `SkeletonText`, `SkeletonCard` |
+| `Progress` | Determinate, indeterminate, striped |
+| `Toast / Toaster / useToast` | Hook-based, 5 variants, swipe to dismiss |
+
+## Blocks
+
+| Block | Description |
+|-------|-------------|
+| `Hero` | Centered or split layout, with grid/gradient backgrounds |
+| `Navbar` | Sticky, responsive, mobile drawer, router-agnostic |
+| `Sidebar / SidebarLayout` | Collapsible, with sections and footer slot |
+| `FeaturesGrid` | 2/3/4 column icon card grid |
+| `CTA` | Default, dark, gradient, bordered variants |
+
+---
+
+## CSS Customization
+
+All styles use the `rz-` prefix with BEM methodology:
+
+```css
+/* Override any component style */
+.rz-button--default {
+  background-color: #6366f1;
+}
+
+.rz-card {
+  border-radius: 1rem;
+}
+
+/* Override tokens globally */
+:root {
+  --rz-color-primary: #6366f1;
+  --rz-radius-md: 0.5rem;
+  --rz-animation-duration: 120ms;
+}
+```
+
+---
+
+## Storybook
+
+```bash
+bun run storybook
+```
+
+Opens at `http://localhost:6006` with all components and blocks documented interactively.
+
+---
+
+## Build
+
+```bash
+bun run build
+```
+
+Outputs to `dist/`:
+- `dist/index.js` — ES module
+- `dist/index.cjs` — CommonJS
+- `dist/index.d.ts` — TypeScript declarations
+- `dist/styles.css` — Compiled CSS
+
+---
+
+## Progress
+
+See [PROGRESS.md](./PROGRESS.md) for the full component roadmap and completion status.
+
+## AI Agent Reference
+
+See [AGENTS.md](./AGENTS.md) for comprehensive documentation designed for AI coding assistants.
+
+---
+
+## License
+
+MIT © Rothzerg

package/dist/_virtual/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("../node_modules/use-sync-external-store/shim/index.cjs");
+var shimExports = index.__require();
+exports.shimExports = shimExports;
+//# sourceMappingURL=index.cjs.map

package/dist/_virtual/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/_virtual/index.js

@@ -0,0 +1,6 @@
+import { __require as requireShim } from "../node_modules/use-sync-external-store/shim/index.js";
+var shimExports = requireShim();
+export {
+  shimExports as s
+};
+//# sourceMappingURL=index.js.map

package/dist/_virtual/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index2.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var shim = { exports: {} };
+exports.__module = shim;
+//# sourceMappingURL=index2.cjs.map

package/dist/_virtual/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/index2.js

@@ -0,0 +1,5 @@
+var shim = { exports: {} };
+export {
+  shim as __module
+};
+//# sourceMappingURL=index2.js.map

package/dist/_virtual/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.development.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var useSyncExternalStoreShim_development = {};
+exports.__exports = useSyncExternalStoreShim_development;
+//# sourceMappingURL=use-sync-external-store-shim.development.cjs.map

package/dist/_virtual/use-sync-external-store-shim.development.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.development.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/use-sync-external-store-shim.development.js

@@ -0,0 +1,5 @@
+var useSyncExternalStoreShim_development = {};
+export {
+  useSyncExternalStoreShim_development as __exports
+};
+//# sourceMappingURL=use-sync-external-store-shim.development.js.map

package/dist/_virtual/use-sync-external-store-shim.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.production.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var useSyncExternalStoreShim_production = {};
+exports.__exports = useSyncExternalStoreShim_production;
+//# sourceMappingURL=use-sync-external-store-shim.production.cjs.map

package/dist/_virtual/use-sync-external-store-shim.production.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.production.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/use-sync-external-store-shim.production.js

@@ -0,0 +1,5 @@
+var useSyncExternalStoreShim_production = {};
+export {
+  useSyncExternalStoreShim_production as __exports
+};
+//# sourceMappingURL=use-sync-external-store-shim.production.js.map

package/dist/_virtual/use-sync-external-store-shim.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/blocks/activity-feed/ActivityFeed.cjs

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+;/* empty css                    */
+const TYPE_ICONS = {
+  create: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] }),
+  update: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "23 4 23 10 17 10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })
+  ] }),
+  delete: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] }),
+  comment: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }),
+  invite: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "currentColor", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "19", y1: "8", x2: "19", y2: "14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "22", y1: "11", x2: "16", y2: "11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  ] }),
+  login: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }) }),
+  system: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }) })
+};
+const FILTER_LABELS = {
+  create: "Create",
+  update: "Update",
+  delete: "Delete",
+  comment: "Comment",
+  invite: "Invite",
+  login: "Login",
+  system: "System"
+};
+function getInitials(name) {
+  return name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+}
+function groupItems(items) {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const group = item.group ?? "Activity";
+    if (!map.has(group)) map.set(group, []);
+    map.get(group).push(item);
+  }
+  return map;
+}
+function ActivityFeed({
+  title = "Activity",
+  items,
+  filters,
+  showLoadMore = false,
+  onLoadMore,
+  compact = false,
+  className = ""
+}) {
+  const [activeFilter, setActiveFilter] = React.useState(null);
+  const availableFilters = filters ?? [...new Set(items.map((i) => i.type))];
+  const filtered = React.useMemo(() => {
+    if (!activeFilter) return items;
+    return items.filter((i) => i.type === activeFilter);
+  }, [items, activeFilter]);
+  const grouped = React.useMemo(() => groupItems(filtered), [filtered]);
+  const hasGroups = items.some((i) => i.group);
+  const classes = [
+    "rz-activity-feed",
+    compact ? "rz-activity-feed--compact" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: classes, "aria-label": "Activity feed", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-activity-feed__inner", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-activity-feed__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "rz-activity-feed__title", children: title }),
+      availableFilters.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-activity-feed__filter", role: "group", "aria-label": "Filter activities", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: `rz-activity-feed__filter-btn${activeFilter === null ? " rz-activity-feed__filter-btn--active" : ""}`,
+            onClick: () => setActiveFilter(null),
+            type: "button",
+            children: "All"
+          }
+        ),
+        availableFilters.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: `rz-activity-feed__filter-btn${activeFilter === f ? " rz-activity-feed__filter-btn--active" : ""}`,
+            onClick: () => setActiveFilter(activeFilter === f ? null : f),
+            type: "button",
+            children: FILTER_LABELS[f]
+          },
+          f
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-activity-feed__list", children: [...grouped.entries()].map(([group, groupItems2]) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+      hasGroups && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-activity-feed__group-label", children: group }),
+      groupItems2.map((item) => {
+        var _a, _b, _c, _d;
+        const actorName = ((_a = item.actor) == null ? void 0 : _a.name) ?? "System";
+        const initials = ((_b = item.actor) == null ? void 0 : _b.initials) ?? getInitials(actorName);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `rz-activity-feed__item${item.type === "system" ? " rz-activity-feed__item--system" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-activity-feed__avatar-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-activity-feed__avatar", children: ((_c = item.actor) == null ? void 0 : _c.avatar) ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.actor.avatar, alt: actorName }) : initials }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rz-activity-feed__type-dot rz-activity-feed__type-dot--${item.type}`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", display: "flex", alignItems: "center", justifyContent: "center" }, children: TYPE_ICONS[item.type] }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-activity-feed__body", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "rz-activity-feed__text", children: [
+                  item.actor && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rz-activity-feed__actor", children: [
+                    actorName,
+                    " "
+                  ] }),
+                  item.action,
+                  item.target && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-activity-feed__target", children: item.target })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-activity-feed__meta", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-activity-feed__time", children: item.timestamp }),
+                  (_d = item.tags) == null ? void 0 : _d.map((tag) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-activity-feed__tag", children: tag }, tag))
+                ] }),
+                item.extra && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-activity-feed__extra", children: item.extra })
+              ] })
+            ]
+          },
+          item.id
+        );
+      })
+    ] }, group)) }),
+    showLoadMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-activity-feed__load-more", children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "rz-activity-feed__load-more-btn", onClick: onLoadMore, type: "button", children: "Load more" }) })
+  ] }) });
+}
+exports.ActivityFeed = ActivityFeed;
+//# sourceMappingURL=ActivityFeed.cjs.map

package/dist/blocks/activity-feed/ActivityFeed.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityFeed.cjs","sources":["../../../src/blocks/activity-feed/ActivityFeed.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport './activity-feed.css';\n\nexport type ActivityType = 'create' | 'update' | 'delete' | 'comment' | 'invite' | 'login' | 'system';\n\nexport interface ActivityActor {\n  name: string;\n  avatar?: string;\n  initials?: string;\n}\n\nexport interface ActivityItem {\n  id: string;\n  type: ActivityType;\n  actor?: ActivityActor;\n  action: string; // e.g., \"created\", \"updated\"\n  target?: string; // e.g., resource name\n  extra?: string; // e.g., a comment text\n  tags?: string[];\n  timestamp: string; // ISO or display string\n  group?: string; // e.g., \"Today\", \"Yesterday\"\n}\n\nexport interface ActivityFeedProps {\n  title?: string;\n  items: ActivityItem[];\n  filters?: ActivityType[];\n  showLoadMore?: boolean;\n  onLoadMore?: () => void;\n  compact?: boolean;\n  className?: string;\n}\n\nconst TYPE_ICONS: Record<ActivityType, React.ReactNode> = {\n  create: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\">\n      <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" /><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n    </svg>\n  ),\n  update: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <polyline points=\"23 4 23 10 17 10\" /><path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\" />\n    </svg>\n  ),\n  delete: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\">\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" /><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  ),\n  comment: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>\n    </svg>\n  ),\n  invite: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><line x1=\"19\" y1=\"8\" x2=\"19\" y2=\"14\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\"/><line x1=\"22\" y1=\"11\" x2=\"16\" y2=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\"/>\n    </svg>\n  ),\n  login: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    </svg>\n  ),\n  system: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n    </svg>\n  ),\n};\n\nconst FILTER_LABELS: Record<ActivityType, string> = {\n  create: 'Create',\n  update: 'Update',\n  delete: 'Delete',\n  comment: 'Comment',\n  invite: 'Invite',\n  login: 'Login',\n  system: 'System',\n};\n\nfunction getInitials(name: string) {\n  return name.split(' ').map((w) => w[0]).join('').slice(0, 2).toUpperCase();\n}\n\nfunction groupItems(items: ActivityItem[]): Map<string, ActivityItem[]> {\n  const map = new Map<string, ActivityItem[]>();\n  for (const item of items) {\n    const group = item.group ?? 'Activity';\n    if (!map.has(group)) map.set(group, []);\n    map.get(group)!.push(item);\n  }\n  return map;\n}\n\nexport function ActivityFeed({\n  title = 'Activity',\n  items,\n  filters,\n  showLoadMore = false,\n  onLoadMore,\n  compact = false,\n  className = '',\n}: ActivityFeedProps) {\n  const [activeFilter, setActiveFilter] = useState<ActivityType | null>(null);\n\n  const availableFilters = filters ?? (\n    [...new Set(items.map((i) => i.type))] as ActivityType[]\n  );\n\n  const filtered = useMemo(() => {\n    if (!activeFilter) return items;\n    return items.filter((i) => i.type === activeFilter);\n  }, [items, activeFilter]);\n\n  const grouped = useMemo(() => groupItems(filtered), [filtered]);\n  const hasGroups = items.some((i) => i.group);\n\n  const classes = [\n    'rz-activity-feed',\n    compact ? 'rz-activity-feed--compact' : '',\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <section className={classes} aria-label=\"Activity feed\">\n      <div className=\"rz-activity-feed__inner\">\n        <div className=\"rz-activity-feed__header\">\n          <h2 className=\"rz-activity-feed__title\">{title}</h2>\n          {availableFilters.length > 1 && (\n            <div className=\"rz-activity-feed__filter\" role=\"group\" aria-label=\"Filter activities\">\n              <button\n                className={`rz-activity-feed__filter-btn${activeFilter === null ? ' rz-activity-feed__filter-btn--active' : ''}`}\n                onClick={() => setActiveFilter(null)}\n                type=\"button\"\n              >\n                All\n              </button>\n              {availableFilters.map((f) => (\n                <button\n                  key={f}\n                  className={`rz-activity-feed__filter-btn${activeFilter === f ? ' rz-activity-feed__filter-btn--active' : ''}`}\n                  onClick={() => setActiveFilter(activeFilter === f ? null : f)}\n                  type=\"button\"\n                >\n                  {FILTER_LABELS[f]}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div className=\"rz-activity-feed__list\">\n          {[...grouped.entries()].map(([group, groupItems]) => (\n            <React.Fragment key={group}>\n              {hasGroups && (\n                <div className=\"rz-activity-feed__group-label\">{group}</div>\n              )}\n              {groupItems.map((item) => {\n                const actorName = item.actor?.name ?? 'System';\n                const initials = item.actor?.initials ?? getInitials(actorName);\n\n                return (\n                  <div\n                    key={item.id}\n                    className={`rz-activity-feed__item${item.type === 'system' ? ' rz-activity-feed__item--system' : ''}`}\n                  >\n                    <div className=\"rz-activity-feed__avatar-col\">\n                      <div className=\"rz-activity-feed__avatar\">\n                        {item.actor?.avatar\n                          ? <img src={item.actor.avatar} alt={actorName} />\n                          : initials\n                        }\n                      </div>\n                      <span className={`rz-activity-feed__type-dot rz-activity-feed__type-dot--${item.type}`}>\n                        <span style={{ color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n                          {TYPE_ICONS[item.type]}\n                        </span>\n                      </span>\n                    </div>\n\n                    <div className=\"rz-activity-feed__body\">\n                      <p className=\"rz-activity-feed__text\">\n                        {item.actor && (\n                          <span className=\"rz-activity-feed__actor\">{actorName} </span>\n                        )}\n                        {item.action}\n                        {item.target && (\n                          <> <span className=\"rz-activity-feed__target\">{item.target}</span></>\n                        )}\n                      </p>\n                      <div className=\"rz-activity-feed__meta\">\n                        <span className=\"rz-activity-feed__time\">{item.timestamp}</span>\n                        {item.tags?.map((tag) => (\n                          <span key={tag} className=\"rz-activity-feed__tag\">{tag}</span>\n                        ))}\n                      </div>\n                      {item.extra && (\n                        <div className=\"rz-activity-feed__extra\">{item.extra}</div>\n                      )}\n                    </div>\n                  </div>\n                );\n              })}\n            </React.Fragment>\n          ))}\n        </div>\n\n        {showLoadMore && (\n          <div className=\"rz-activity-feed__load-more\">\n            <button className=\"rz-activity-feed__load-more-btn\" onClick={onLoadMore} type=\"button\">\n              Load more\n            </button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"names":["jsxs","jsx","useState","useMemo","groupItems","Fragment"],"mappings":"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"}

package/dist/blocks/activity-feed/ActivityFeed.d.ts

@@ -0,0 +1,28 @@
+export type ActivityType = 'create' | 'update' | 'delete' | 'comment' | 'invite' | 'login' | 'system';
+export interface ActivityActor {
+    name: string;
+    avatar?: string;
+    initials?: string;
+}
+export interface ActivityItem {
+    id: string;
+    type: ActivityType;
+    actor?: ActivityActor;
+    action: string;
+    target?: string;
+    extra?: string;
+    tags?: string[];
+    timestamp: string;
+    group?: string;
+}
+export interface ActivityFeedProps {
+    title?: string;
+    items: ActivityItem[];
+    filters?: ActivityType[];
+    showLoadMore?: boolean;
+    onLoadMore?: () => void;
+    compact?: boolean;
+    className?: string;
+}
+export declare function ActivityFeed({ title, items, filters, showLoadMore, onLoadMore, compact, className, }: ActivityFeedProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ActivityFeed.d.ts.map

package/dist/blocks/activity-feed/ActivityFeed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityFeed.d.ts","sourceRoot":"","sources":["../../../src/blocks/activity-feed/ActivityFeed.tsx"],"names":[],"mappings":"AACA,OAAO,qBAAqB,CAAC;AAE7B,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEtG,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgED,wBAAgB,YAAY,CAAC,EAC3B,KAAkB,EAClB,KAAK,EACL,OAAO,EACP,YAAoB,EACpB,UAAU,EACV,OAAe,EACf,SAAc,GACf,EAAE,iBAAiB,2CAmHnB"}