@nexub/patterns 1.0.0 → 1.2.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-QSJUE24Y.js

@@ -0,0 +1,112 @@
+'use client';
+
+// src/components/SettingsLayout/SettingsLayout.tsx
+import * as React from "react";
+import { Card, IconButton, Sheet, Sidebar, TopNav, cn } from "@nexub/react";
+import { Menu } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var isPlainClick = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+function SectionNav({
+  items,
+  activeId,
+  onChoose,
+  label,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Sidebar.Root, { "aria-label": label, className, children: /* @__PURE__ */ jsx(Sidebar.Group, { children: items.map((item) => /* @__PURE__ */ jsx(
+    Sidebar.Item,
+    {
+      href: item.href,
+      icon: item.icon,
+      active: item.id === activeId,
+      onClick: (e) => onChoose(e, item),
+      children: item.label
+    },
+    item.id
+  )) }) });
+}
+var Root = React.forwardRef(
+  ({ items, activeId, onSelect, logo, actions, title, description, navLabel = "Settings", className, children, ...props }, ref) => {
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const onChoose = (e, item) => {
+      if (!isPlainClick(e)) return;
+      if (onSelect) {
+        e.preventDefault();
+        onSelect(item);
+      }
+      setMenuOpen(false);
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex min-h-screen flex-col bg-[var(--color-bg-default)]", className), ...props, children: [
+      /* @__PURE__ */ jsxs(TopNav.Root, { children: [
+        /* @__PURE__ */ jsx(IconButton, { label: `Open ${navLabel.toLowerCase()} menu`, className: "-ml-2 md:hidden", onClick: () => setMenuOpen(true), children: /* @__PURE__ */ jsx(Menu, { size: "md", "aria-hidden": "true" }) }),
+        logo && /* @__PURE__ */ jsx(TopNav.Logo, { className: "min-w-0", children: logo }),
+        actions && /* @__PURE__ */ jsx(TopNav.Actions, { children: actions })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1", children: [
+        /* @__PURE__ */ jsx(
+          SectionNav,
+          {
+            items,
+            activeId,
+            onChoose,
+            label: navLabel,
+            className: "sticky top-[var(--size-nav-header,64px)] hidden h-[calc(100vh-var(--size-nav-header,64px))] shrink-0 md:flex"
+          }
+        ),
+        /* @__PURE__ */ jsx("main", { className: "min-w-0 flex-1 px-4 py-6 md:px-8 md:py-10", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-6", children: [
+          (title || description) && /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
+            title && /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-[var(--color-text-primary)]", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
+          ] }),
+          children
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx(Sheet.Root, { open: menuOpen, onOpenChange: setMenuOpen, direction: "left", children: /* @__PURE__ */ jsxs(Sheet.Portal, { children: [
+        /* @__PURE__ */ jsx(Sheet.Overlay, { className: "md:hidden" }),
+        /* @__PURE__ */ jsxs(Sheet.Content, { side: "left", "aria-describedby": void 0, className: "md:hidden", children: [
+          /* @__PURE__ */ jsx(Sheet.Title, { className: "px-5 pb-2 pt-5 text-base", children: navLabel }),
+          /* @__PURE__ */ jsx(SectionNav, { items, activeId, onChoose, label: navLabel, className: "w-full border-r-0" })
+        ] })
+      ] }) })
+    ] });
+  }
+);
+Root.displayName = "SettingsLayout";
+var Section = React.forwardRef(
+  ({ title, description, className, children, ...props }, ref) => /* @__PURE__ */ jsx(Card, { asChild: true, className: cn("px-5 py-1", className), children: /* @__PURE__ */ jsxs("section", { ref, ...props, children: [
+    (title || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 border-b border-[var(--color-border-default)] pb-4 pt-4", children: [
+      title && /* @__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 })
+    ] }),
+    children
+  ] }) })
+);
+Section.displayName = "SettingsLayout.Section";
+var SettingsRow = React.forwardRef(
+  ({ label, description, value, action, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col gap-2 border-t border-[var(--color-border-default)] py-4 first:border-t-0 sm:flex-row sm:items-center sm:gap-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 sm:w-1/3 sm:shrink-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: label }),
+          description && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 break-words text-sm text-[var(--color-text-secondary)]", children: value }),
+        action && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: action })
+      ]
+    }
+  )
+);
+SettingsRow.displayName = "SettingsRow";
+var SettingsLayout = Object.assign(Root, { Section, Row: SettingsRow });
+
+export {
+  SettingsRow,
+  SettingsLayout
+};

package/dist/chunk-WQX5FFVK.js

@@ -0,0 +1,97 @@
+'use client';
+
+// src/components/AppLauncher/AppLauncher.tsx
+import * as React from "react";
+import { Avatar, IconButton, Popover, cn } from "@nexub/react";
+import { Apps } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var COLUMNS = 3;
+function AppIcon({ app }) {
+  const [failed, setFailed] = React.useState(false);
+  if (app.icon && !failed) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: app.icon,
+        alt: "",
+        width: 40,
+        height: 40,
+        className: "h-10 w-10 rounded-xl object-cover",
+        onError: () => setFailed(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Avatar, { name: app.name, size: "md", className: "rounded-xl", "aria-hidden": "true" });
+}
+var AppLauncher = React.forwardRef(
+  ({ apps, onNavigate, surface = "solid", label = "Nexub apps", className }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const listRef = React.useRef(null);
+    if (apps.length === 0) return null;
+    const onOpenAutoFocus = (e) => {
+      e.preventDefault();
+      const list = listRef.current;
+      (list?.querySelector("a[aria-current]") ?? list?.querySelector("a"))?.focus();
+    };
+    const onKeyDown = (e) => {
+      const links = [...e.currentTarget.querySelectorAll("a")];
+      const i = links.indexOf(document.activeElement);
+      if (i < 0) return;
+      const step = {
+        ArrowRight: 1,
+        ArrowLeft: -1,
+        ArrowDown: COLUMNS,
+        ArrowUp: -COLUMNS,
+        Home: -i,
+        End: links.length - 1 - i
+      };
+      const delta = step[e.key];
+      if (delta === void 0) return;
+      e.preventDefault();
+      links[Math.min(links.length - 1, Math.max(0, i + delta))]?.focus();
+    };
+    const onClick = (e, app) => {
+      const plain = e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+      if (onNavigate && plain) {
+        e.preventDefault();
+        onNavigate(app);
+      }
+      if (plain) setOpen(false);
+    };
+    return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { ref, label, className, children: /* @__PURE__ */ jsx(Apps, { size: "md", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+        Popover.Content,
+        {
+          align: "end",
+          surface,
+          "aria-label": label,
+          onOpenAutoFocus,
+          className: "w-80 max-w-[calc(100vw-2rem)] p-2",
+          children: /* @__PURE__ */ jsx("ul", { ref: listRef, className: "grid grid-cols-3 gap-1", onKeyDown, children: apps.map((app) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: app.href,
+              "aria-current": app.current ? "page" : void 0,
+              onClick: (e) => onClick(e, app),
+              className: cn(
+                "flex flex-col items-center gap-1.5 rounded-lg px-1 py-3 text-center text-xs text-[var(--color-text-primary)] transition-colors",
+                "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+                app.current && "bg-[var(--color-bg-subtle)] font-semibold"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(AppIcon, { app }),
+                /* @__PURE__ */ jsx("span", { className: "w-full truncate", children: app.name })
+              ]
+            }
+          ) }, app.id)) })
+        }
+      ) })
+    ] });
+  }
+);
+AppLauncher.displayName = "AppLauncher";
+
+export {
+  AppLauncher
+};

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/AppLauncher/index.js

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