@nexub/patterns 0.0.2 → 1.1.0

package/dist/index.cjs

@@ -1,361 +0,0 @@
-'use strict';
-
-var React = require('react');
-var react = require('@nexub/react');
-var jsxRuntime = require('react/jsx-runtime');
-var icons = require('@nexub/icons');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-// src/components/ActivityFeed/ActivityFeed.tsx
-var Root = React__namespace.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "ul",
-    {
-      ref,
-      role: "feed",
-      "aria-label": "Activity feed",
-      className: react.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__ */ jsxRuntime.jsxs("li", { className: react.cn("flex items-start gap-3 py-3", className), children: [
-  avatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 mt-0.5", children: avatar }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: title }),
-    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-0.5", children: description })
-  ] }),
-  timestamp && /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
-  ({ searchPlaceholder, onSearch, searchValue, filters, actions, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: react.cn("flex flex-wrap items-center gap-3", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: filters }),
-    actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
-  ] })
-);
-FilterBar.displayName = "FilterBar";
-var StatCard = React__namespace.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" ? icons.TrendingUp : deltaType === "decrease" ? icons.TrendingDown : icons.Minus;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: react.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-[var(--color-text-muted)]", children: label }),
-            icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--color-text-muted)]", children: icon })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold tracking-tight text-[var(--color-text-primary)]", children: value }),
-          (delta || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            delta && /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: "inline-flex items-center gap-1 text-xs font-medium",
-                style: { color: deltaColor },
-                "data-delta-type": deltaType,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(DeltaIcon, { size: "xs", "aria-hidden": "true" }),
-                  delta
-                ]
-              }
-            ),
-            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: description })
-          ] })
-        ]
-      }
-    );
-  }
-);
-StatCard.displayName = "StatCard";
-var UserCard = React__namespace.forwardRef(
-  ({
-    name,
-    role,
-    email,
-    avatarSrc,
-    avatarFallback,
-    actions,
-    size = "md",
-    className,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: react.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__ */ jsxRuntime.jsx(
-            react.Avatar,
-            {
-              size,
-              src: avatarSrc,
-              name,
-              fallback: avatarFallback
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-[var(--color-text-primary)] truncate", children: name }),
-            role && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[var(--color-text-muted)] truncate", children: role }),
-            email && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[var(--color-text-secondary)] truncate", children: email })
-          ] }),
-          actions && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: react.cn(
-        "mx-auto w-full max-w-[400px] flex flex-col gap-6",
-        className
-      ),
-      children: [
-        logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: logo }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold tracking-tight text-[var(--color-text-primary)]", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.forwardRef(
-  ({ title, description, actions, children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: react.cn("flex flex-col gap-8", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 md:flex-row md:gap-8", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:w-1/3 flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold text-[var(--color-text-primary)]", children: title }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-4", children: [
-      children,
-      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end gap-2", children: actions })
-    ] })
-  ] }) })
-);
-SettingsSection.displayName = "SettingsSection";
-var Root2 = React__namespace.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "dl",
-    {
-      ref,
-      className: react.cn("divide-y divide-[var(--color-border-default)]", className),
-      ...props,
-      children
-    }
-  )
-);
-Root2.displayName = "InfoList.Root";
-var Item2 = ({ label, value, className }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: react.cn("flex items-center justify-between py-3 gap-4", className), children: [
-  /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: label }),
-  /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
-  ({
-    name,
-    price,
-    period,
-    description,
-    features,
-    cta,
-    onSelect,
-    highlighted = false,
-    badge,
-    className,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref,
-      className: react.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__ */ jsxRuntime.jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { tone: "info", children: badge }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold text-[var(--color-text-primary)]", children: name }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl font-bold text-[var(--color-text-primary)]", children: price }),
-            period && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: period })
-          ] }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: features.map((feature) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "li",
-          {
-            className: "flex items-center gap-2 text-sm text-[var(--color-text-secondary)]",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { size: "xs", className: "text-[var(--color-success-500)] shrink-0", "aria-hidden": "true" }),
-              feature
-            ]
-          },
-          feature
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.Button,
-          {
-            variant: highlighted ? "primary" : "outline",
-            className: "mt-auto w-full",
-            onClick: onSelect,
-            children: cta
-          }
-        )
-      ]
-    }
-  )
-);
-PlanCard.displayName = "PlanCard";
-var StepIndicator = React__namespace.forwardRef(
-  ({ steps, currentStep, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("ol", { ref, className: react.cn("flex flex-col gap-0", className), ...props, children: steps.map((step, index) => {
-    const status = index < currentStep ? "complete" : index === currentStep ? "current" : "upcoming";
-    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative flex gap-4 pb-6 last:pb-0", children: [
-      index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "absolute left-4 top-8 h-full w-px bg-[var(--color-border-default)]",
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: react.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__ */ jsxRuntime.jsx(icons.Check, { size: "xs", "aria-hidden": "true" }) : index + 1
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 pt-0.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: step.label }),
-        step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-text-muted)]", children: step.description })
-      ] })
-    ] }, step.label);
-  }) })
-);
-StepIndicator.displayName = "StepIndicator";
-var NotificationItem = React__namespace.forwardRef(
-  ({ title, description, timestamp, read = false, icon, onDismiss, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref,
-      className: react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "shrink-0 mt-0.5", children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 line-clamp-2", children: description }),
-          timestamp && /* @__PURE__ */ jsxRuntime.jsx("time", { className: "text-xs text-[var(--color-text-muted)] mt-1 block", children: timestamp })
-        ] }),
-        onDismiss && /* @__PURE__ */ jsxRuntime.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";
-
-exports.ActivityFeed = ActivityFeed;
-exports.AuthCard = AuthCard;
-exports.FilterBar = FilterBar;
-exports.InfoList = InfoList;
-exports.NotificationItem = NotificationItem;
-exports.PlanCard = PlanCard;
-exports.SettingsSection = SettingsSection;
-exports.StatCard = StatCard;
-exports.StepIndicator = StepIndicator;
-exports.UserCard = UserCard;

package/dist/index.d.cts

@@ -1,119 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-interface ActivityItemProps {
-    avatar?: React.ReactNode;
-    title: React.ReactNode;
-    description?: React.ReactNode;
-    timestamp?: string;
-    className?: string;
-}
-declare const ActivityFeed: {
-    Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
-    Item: {
-        ({ avatar, title, description, timestamp, className }: ActivityItemProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-};
-
-interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {
-    searchPlaceholder?: string;
-    onSearch?: (value: string) => void;
-    searchValue?: string;
-    filters?: React.ReactNode;
-    actions?: React.ReactNode;
-}
-declare const FilterBar: React.ForwardRefExoticComponent<FilterBarProps & React.RefAttributes<HTMLDivElement>>;
-
-interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    label: string;
-    value: React.ReactNode;
-    delta?: string;
-    deltaType?: 'increase' | 'decrease' | 'neutral';
-    icon?: React.ReactNode;
-    description?: string;
-}
-declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
-
-interface UserCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    name: string;
-    role?: string;
-    email?: string;
-    avatarSrc?: string;
-    avatarFallback?: string;
-    actions?: React.ReactNode;
-    size?: 'sm' | 'md' | 'lg';
-}
-declare const UserCard: React.ForwardRefExoticComponent<UserCardProps & React.RefAttributes<HTMLDivElement>>;
-
-interface AuthCardProps {
-    logo?: React.ReactNode;
-    title: string;
-    description?: string;
-    children: React.ReactNode;
-    footer?: React.ReactNode;
-    className?: string;
-}
-declare function AuthCard({ logo, title, description, children, footer, className, }: AuthCardProps): react_jsx_runtime.JSX.Element;
-declare namespace AuthCard {
-    var displayName: string;
-}
-
-interface SettingsSectionProps extends React.HTMLAttributes<HTMLDivElement> {
-    title: string;
-    description?: string;
-    actions?: React.ReactNode;
-    children: React.ReactNode;
-}
-declare const SettingsSection: React.ForwardRefExoticComponent<SettingsSectionProps & React.RefAttributes<HTMLDivElement>>;
-
-interface InfoListRootProps extends React.HTMLAttributes<HTMLDListElement> {
-    children: React.ReactNode;
-}
-interface InfoListItemProps {
-    label: string;
-    value: React.ReactNode;
-    className?: string;
-}
-declare const InfoList: {
-    Root: React.ForwardRefExoticComponent<InfoListRootProps & React.RefAttributes<HTMLDListElement>>;
-    Item: {
-        ({ label, value, className }: InfoListItemProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-};
-
-interface PlanCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    name: string;
-    price: string;
-    period?: string;
-    description?: string;
-    features: string[];
-    cta: string;
-    onSelect?: () => void;
-    highlighted?: boolean;
-    badge?: string;
-}
-declare const PlanCard: React.ForwardRefExoticComponent<PlanCardProps & React.RefAttributes<HTMLDivElement>>;
-
-interface StepIndicatorStep {
-    label: string;
-    description?: string;
-}
-interface StepIndicatorProps extends React.HTMLAttributes<HTMLOListElement> {
-    steps: StepIndicatorStep[];
-    currentStep: number;
-}
-declare const StepIndicator: React.ForwardRefExoticComponent<StepIndicatorProps & React.RefAttributes<HTMLOListElement>>;
-
-interface NotificationItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    title: string;
-    description?: string;
-    timestamp?: string;
-    read?: boolean;
-    icon?: React.ReactNode;
-    onDismiss?: () => void;
-}
-declare const NotificationItem: React.ForwardRefExoticComponent<NotificationItemProps & React.RefAttributes<HTMLDivElement>>;
-
-export { ActivityFeed, type ActivityItemProps, AuthCard, type AuthCardProps, FilterBar, type FilterBarProps, InfoList, type InfoListItemProps, type InfoListRootProps, NotificationItem, type NotificationItemProps, PlanCard, type PlanCardProps, SettingsSection, type SettingsSectionProps, StatCard, type StatCardProps, StepIndicator, type StepIndicatorProps, type StepIndicatorStep, UserCard, type UserCardProps };