@nexub/patterns 0.0.2 → 1.1.0

package/dist/chunk-74JVLMLE.js

@@ -0,0 +1,28 @@
+'use client';
+
+// src/components/InfoList/InfoList.tsx
+import * as React from "react";
+import { cn } from "@nexub/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "dl",
+    {
+      ref,
+      className: cn("divide-y divide-[var(--color-border-default)]", className),
+      ...props,
+      children
+    }
+  )
+);
+Root.displayName = "InfoList.Root";
+var Item = ({ 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 })
+] });
+Item.displayName = "InfoList.Item";
+var InfoList = { Root, Item };
+
+export {
+  InfoList
+};

package/dist/chunk-7GYTYFUD.js

@@ -0,0 +1,60 @@
+'use client';
+
+// src/components/StatCard/StatCard.tsx
+import * as React from "react";
+import { cn } from "@nexub/react";
+import { TrendingUp, TrendingDown, Minus } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+
+export {
+  StatCard
+};

package/dist/chunk-AEYLZU3F.js

@@ -0,0 +1,53 @@
+'use client';
+
+// src/components/UserCard/UserCard.tsx
+import * as React from "react";
+import { cn, Avatar } from "@nexub/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+
+export {
+  UserCard
+};

package/dist/chunk-AOE6GQSH.js

@@ -0,0 +1,38 @@
+'use client';
+
+// src/components/AuthCard/AuthCard.tsx
+import "react";
+import { cn } from "@nexub/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+
+export {
+  AuthCard
+};

package/dist/chunk-EOA5C3Q4.js

@@ -0,0 +1,27 @@
+'use client';
+
+// src/components/FilterBar/FilterBar.tsx
+import * as React from "react";
+import { cn } from "@nexub/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+
+export {
+  FilterBar
+};

package/dist/chunk-MXPRKZPB.js

@@ -0,0 +1,43 @@
+'use client';
+
+// src/components/StepIndicator/StepIndicator.tsx
+import * as React from "react";
+import { cn } from "@nexub/react";
+import { Check } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+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-fill-primary)] 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";
+
+export {
+  StepIndicator
+};

package/dist/chunk-OTNHVOPC.js

@@ -0,0 +1,23 @@
+'use client';
+
+// src/components/SettingsSection/SettingsSection.tsx
+import * as React from "react";
+import { cn } from "@nexub/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+
+export {
+  SettingsSection
+};

package/dist/chunk-QMYBXQG4.js

@@ -0,0 +1,69 @@
+'use client';
+
+// src/components/PlanCard/PlanCard.tsx
+import * as React from "react";
+import { cn, Badge, Button } from "@nexub/react";
+import { Check } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+
+export {
+  PlanCard
+};

package/dist/chunk-Y3TNGDKC.js

@@ -0,0 +1,50 @@
+'use client';
+
+// src/components/NotificationItem/NotificationItem.tsx
+import * as React from "react";
+import { cn } from "@nexub/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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 {
+  NotificationItem
+};

package/dist/chunk-YX7UO577.js

@@ -0,0 +1,34 @@
+'use client';
+
+// src/components/ActivityFeed/ActivityFeed.tsx
+import * as React from "react";
+import { cn } from "@nexub/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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 };
+
+export {
+  ActivityFeed
+};

package/dist/components/ActivityFeed/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  ActivityFeed
+} from "../../chunk-YX7UO577.js";
+export {
+  ActivityFeed
+};

package/dist/components/AuthCard/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  AuthCard
+} from "../../chunk-AOE6GQSH.js";
+export {
+  AuthCard
+};

package/dist/components/FilterBar/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  FilterBar
+} from "../../chunk-EOA5C3Q4.js";
+export {
+  FilterBar
+};

package/dist/components/InfoList/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  InfoList
+} from "../../chunk-74JVLMLE.js";
+export {
+  InfoList
+};

package/dist/components/NotificationItem/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  NotificationItem
+} from "../../chunk-Y3TNGDKC.js";
+export {
+  NotificationItem
+};

package/dist/components/PlanCard/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  PlanCard
+} from "../../chunk-QMYBXQG4.js";
+export {
+  PlanCard
+};

package/dist/components/SettingsSection/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  SettingsSection
+} from "../../chunk-OTNHVOPC.js";
+export {
+  SettingsSection
+};

package/dist/components/StatCard/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  StatCard
+} from "../../chunk-7GYTYFUD.js";
+export {
+  StatCard
+};

package/dist/components/StepIndicator/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  StepIndicator
+} from "../../chunk-MXPRKZPB.js";
+export {
+  StepIndicator
+};

package/dist/components/UserCard/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  UserCard
+} from "../../chunk-AEYLZU3F.js";
+export {
+  UserCard
+};