@nexub/patterns 0.0.2 → 1.1.0

package/dist/index.js

@@ -1,330 +1,43 @@
-import * as React from 'react';
-import { cn, Avatar, Badge, Button } from '@nexub/react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { TrendingUp, TrendingDown, Minus, Check } from '@nexub/icons';
-
-// src/components/ActivityFeed/ActivityFeed.tsx
-var Root = React.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-    "ul",
-    {
-      ref,
-      role: "feed",
-      "aria-label": "Activity feed",
-      className: cn("flex flex-col divide-y divide-[var(--color-border-default)]", className),
-      ...props,
-      children
-    }
-  )
-);
-Root.displayName = "ActivityFeed.Root";
-var Item = ({ avatar, title, description, timestamp, className }) => /* @__PURE__ */ jsxs("li", { className: cn("flex items-start gap-3 py-3", className), children: [
-  avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0 mt-0.5", children: avatar }),
-  /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: title }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-0.5", children: description })
-  ] }),
-  timestamp && /* @__PURE__ */ jsx("time", { className: "shrink-0 text-xs text-[var(--color-text-muted)]", children: timestamp })
-] });
-Item.displayName = "ActivityFeed.Item";
-var ActivityFeed = { Root, Item };
-var FilterBar = React.forwardRef(
-  ({ searchPlaceholder, onSearch, searchValue, filters, actions, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-wrap items-center gap-3", className), ...props, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "search",
-        placeholder: searchPlaceholder ?? "Search\u2026",
-        value: searchValue,
-        onChange: (e) => onSearch?.(e.target.value),
-        className: "h-9 rounded-md border border-[var(--color-border-default)] bg-[var(--color-bg-default)] px-3 py-2 text-sm placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-brand-primary-500)] w-full sm:w-64"
-      }
-    ),
-    filters && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: filters }),
-    actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
-  ] })
-);
-FilterBar.displayName = "FilterBar";
-var StatCard = React.forwardRef(
-  ({
-    label,
-    value,
-    delta,
-    deltaType = "neutral",
-    icon,
-    description,
-    className,
-    ...props
-  }, ref) => {
-    const deltaColor = deltaType === "increase" ? "var(--color-success-500)" : deltaType === "decrease" ? "var(--color-error-500)" : "var(--color-text-muted)";
-    const DeltaIcon = deltaType === "increase" ? TrendingUp : deltaType === "decrease" ? TrendingDown : Minus;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-6 flex flex-col gap-3",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--color-text-muted)]", children: label }),
-            icon && /* @__PURE__ */ jsx("span", { className: "text-[var(--color-text-muted)]", children: icon })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold tracking-tight text-[var(--color-text-primary)]", children: value }),
-          (delta || description) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            delta && /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: "inline-flex items-center gap-1 text-xs font-medium",
-                style: { color: deltaColor },
-                "data-delta-type": deltaType,
-                children: [
-                  /* @__PURE__ */ jsx(DeltaIcon, { size: "xs", "aria-hidden": "true" }),
-                  delta
-                ]
-              }
-            ),
-            description && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: description })
-          ] })
-        ]
-      }
-    );
-  }
-);
-StatCard.displayName = "StatCard";
-var UserCard = React.forwardRef(
-  ({
-    name,
-    role,
-    email,
-    avatarSrc,
-    avatarFallback,
-    actions,
-    size = "md",
-    className,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "flex items-center gap-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-4",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            Avatar,
-            {
-              size,
-              src: avatarSrc,
-              name,
-              fallback: avatarFallback
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--color-text-primary)] truncate", children: name }),
-            role && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-text-muted)] truncate", children: role }),
-            email && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-text-secondary)] truncate", children: email })
-          ] }),
-          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions })
-        ]
-      }
-    );
-  }
-);
-UserCard.displayName = "UserCard";
-function AuthCard({
-  logo,
-  title,
-  description,
-  children,
-  footer,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "mx-auto w-full max-w-[400px] flex flex-col gap-6",
-        className
-      ),
-      children: [
-        logo && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: logo }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 text-center", children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight text-[var(--color-text-primary)]", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-6 flex flex-col gap-4", children }),
-        footer && /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2 text-sm text-[var(--color-text-muted)]", children: footer })
-      ]
-    }
-  );
-}
-AuthCard.displayName = "AuthCard";
-var SettingsSection = React.forwardRef(
-  ({ title, description, actions, children, className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-8", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:flex-row md:gap-8", children: [
-    /* @__PURE__ */ jsxs("div", { className: "md:w-1/3 flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--color-text-primary)]", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-4", children: [
-      children,
-      actions && /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-2", children: actions })
-    ] })
-  ] }) })
-);
-SettingsSection.displayName = "SettingsSection";
-var Root2 = React.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-    "dl",
-    {
-      ref,
-      className: cn("divide-y divide-[var(--color-border-default)]", className),
-      ...props,
-      children
-    }
-  )
-);
-Root2.displayName = "InfoList.Root";
-var Item2 = ({ label, value, className }) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between py-3 gap-4", className), children: [
-  /* @__PURE__ */ jsx("dt", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: label }),
-  /* @__PURE__ */ jsx("dd", { className: "text-sm font-medium text-[var(--color-text-primary)] text-right", children: value })
-] });
-Item2.displayName = "InfoList.Item";
-var InfoList = { Root: Root2, Item: Item2 };
-var PlanCard = React.forwardRef(
-  ({
-    name,
-    price,
-    period,
-    description,
-    features,
-    cta,
-    onSelect,
-    highlighted = false,
-    badge,
-    className,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cn(
-        "relative flex flex-col gap-6 rounded-xl border bg-[var(--color-bg-default)] p-6",
-        highlighted ? "border-[var(--color-brand-primary-500)] shadow-lg ring-1 ring-[var(--color-brand-primary-500)]" : "border-[var(--color-border-default)]",
-        className
-      ),
-      ...props,
-      children: [
-        badge && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(Badge, { tone: "info", children: badge }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-[var(--color-text-primary)]", children: name }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold text-[var(--color-text-primary)]", children: price }),
-            period && /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: period })
-          ] }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
-        ] }),
-        /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: features.map((feature) => /* @__PURE__ */ jsxs(
-          "li",
-          {
-            className: "flex items-center gap-2 text-sm text-[var(--color-text-secondary)]",
-            children: [
-              /* @__PURE__ */ jsx(Check, { size: "xs", className: "text-[var(--color-success-500)] shrink-0", "aria-hidden": "true" }),
-              feature
-            ]
-          },
-          feature
-        )) }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: highlighted ? "primary" : "outline",
-            className: "mt-auto w-full",
-            onClick: onSelect,
-            children: cta
-          }
-        )
-      ]
-    }
-  )
-);
-PlanCard.displayName = "PlanCard";
-var StepIndicator = React.forwardRef(
-  ({ steps, currentStep, className, ...props }, ref) => /* @__PURE__ */ jsx("ol", { ref, className: cn("flex flex-col gap-0", className), ...props, children: steps.map((step, index) => {
-    const status = index < currentStep ? "complete" : index === currentStep ? "current" : "upcoming";
-    return /* @__PURE__ */ jsxs("li", { className: "relative flex gap-4 pb-6 last:pb-0", children: [
-      index < steps.length - 1 && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute left-4 top-8 h-full w-px bg-[var(--color-border-default)]",
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold",
-            status === "complete" && "bg-[var(--color-brand-primary-500)] text-white",
-            status === "current" && "border-2 border-[var(--color-brand-primary-500)] text-[var(--color-brand-primary-500)] bg-[var(--color-bg-default)]",
-            status === "upcoming" && "border-2 border-[var(--color-border-default)] text-[var(--color-text-muted)] bg-[var(--color-bg-default)]"
-          ),
-          "aria-current": status === "current" ? "step" : void 0,
-          children: status === "complete" ? /* @__PURE__ */ jsx(Check, { size: "xs", "aria-hidden": "true" }) : index + 1
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 pt-0.5", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: step.label }),
-        step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-text-muted)]", children: step.description })
-      ] })
-    ] }, step.label);
-  }) })
-);
-StepIndicator.displayName = "StepIndicator";
-var NotificationItem = React.forwardRef(
-  ({ title, description, timestamp, read = false, icon, onDismiss, className, ...props }, ref) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cn(
-        "flex items-start gap-3 p-3 rounded-lg transition-colors hover:bg-[var(--color-bg-subtle)]",
-        !read && "bg-[var(--color-bg-subtle)]",
-        className
-      ),
-      ...props,
-      children: [
-        !read && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[var(--color-brand-primary-500)]",
-            "aria-label": "Unread"
-          }
-        ),
-        icon && /* @__PURE__ */ jsx("div", { className: "shrink-0 mt-0.5", children: icon }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 line-clamp-2", children: description }),
-          timestamp && /* @__PURE__ */ jsx("time", { className: "text-xs text-[var(--color-text-muted)] mt-1 block", children: timestamp })
-        ] }),
-        onDismiss && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onDismiss,
-            "aria-label": "Dismiss notification",
-            className: "shrink-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] p-1 rounded",
-            children: "\xD7"
-          }
-        )
-      ]
-    }
-  )
-);
-NotificationItem.displayName = "NotificationItem";
-
-export { ActivityFeed, AuthCard, FilterBar, InfoList, NotificationItem, PlanCard, SettingsSection, StatCard, StepIndicator, UserCard };
+'use client';
+import {
+  StatCard
+} from "./chunk-7GYTYFUD.js";
+import {
+  StepIndicator
+} from "./chunk-MXPRKZPB.js";
+import {
+  UserCard
+} from "./chunk-AEYLZU3F.js";
+import {
+  ActivityFeed
+} from "./chunk-YX7UO577.js";
+import {
+  AuthCard
+} from "./chunk-AOE6GQSH.js";
+import {
+  FilterBar
+} from "./chunk-EOA5C3Q4.js";
+import {
+  InfoList
+} from "./chunk-74JVLMLE.js";
+import {
+  NotificationItem
+} from "./chunk-Y3TNGDKC.js";
+import {
+  PlanCard
+} from "./chunk-QMYBXQG4.js";
+import {
+  SettingsSection
+} from "./chunk-OTNHVOPC.js";
+export {
+  ActivityFeed,
+  AuthCard,
+  FilterBar,
+  InfoList,
+  NotificationItem,
+  PlanCard,
+  SettingsSection,
+  StatCard,
+  StepIndicator,
+  UserCard
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/patterns",
-  "version": "0.0.2",
+  "version": "1.1.0",
   "description": "Composite UI patterns for Nexub Design System — pre-built, production-ready layouts and widgets built on @nexub/react.",
   "type": "module",
   "license": "MIT",
@@ -27,19 +27,18 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "module": "./dist/index.js",
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@nexub/react": "*",
-    "@nexub/icons": "*",
-    "@nexub/tokens": "*"
+    "@nexub/react": "^1.1.0",
+    "@nexub/icons": "^1.1.0",
+    "@nexub/tokens": "^1.1.0"
   },
   "peerDependenciesMeta": {
     "@nexub/icons": {
@@ -59,15 +58,16 @@
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
     "vitest": "^2.1.8",
-    "@nexub/icons": "0.0.2",
-    "@nexub/react": "0.0.2",
-    "@nexub/tokens": "0.0.2"
+    "@nexub/icons": "1.1.0",
+    "@nexub/react": "1.1.0",
+    "@nexub/tokens": "1.1.0"
   },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "lint": "eslint src"
   }
 }