@nexub/react 1.0.0 → 1.2.0

package/dist/chunk-BYF223HT.js

@@ -0,0 +1,92 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Progress/Progress.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var progressTrackVariants = cva(
+  "relative w-full overflow-hidden rounded-full bg-[var(--color-bg-muted)]",
+  {
+    variants: {
+      size: {
+        sm: "h-1",
+        md: "h-2",
+        lg: "h-3"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var progressFillVariants = cva(
+  "h-full rounded-full transition-all duration-300 ease-in-out",
+  {
+    variants: {
+      tone: {
+        neutral: "bg-[var(--color-neutral-500)]",
+        info: "bg-[var(--color-semantic-info-default)]",
+        success: "bg-[var(--color-semantic-success-default)]",
+        warning: "bg-[var(--color-semantic-warning-default)]",
+        danger: "bg-[var(--color-semantic-error-default)]",
+        leap: "bg-[var(--color-leap-500)]",
+        bookub: "bg-[var(--color-bookub-500)]",
+        payub: "bg-[var(--color-payub-500)]",
+        founderub: "bg-[var(--color-founderub-500)]"
+      },
+      animated: {
+        true: "bg-[length:200%_100%] animate-[progress-stripes_1s_linear_infinite]"
+      }
+    },
+    defaultVariants: {
+      tone: "neutral"
+    }
+  }
+);
+var Progress = React.forwardRef(
+  ({
+    className,
+    size,
+    tone = "neutral",
+    value = 0,
+    max = 100,
+    animated = false,
+    ...props
+  }, ref) => {
+    const clampedValue = Math.min(Math.max(value, 0), max);
+    const percentage = clampedValue / max * 100;
+    const isIndeterminate = value === void 0 || value === null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": isIndeterminate ? void 0 : clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: cn(progressTrackVariants({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              progressFillVariants({ tone }),
+              animated && "animate-pulse"
+            ),
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+
+export {
+  progressTrackVariants,
+  progressFillVariants,
+  Progress
+};

package/dist/chunk-CPV367VS.js

@@ -0,0 +1,106 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Avatar/Avatar.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var avatarVariants = cva(
+  "relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden bg-[var(--color-bg-muted)] text-[var(--color-text-muted)] font-medium select-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 w-6 text-[10px]",
+        sm: "h-8 w-8 text-xs",
+        md: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base",
+        xl: "h-16 w-16 text-xl"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var badgeSizeMap = {
+  xs: "h-1.5 w-1.5",
+  sm: "h-2 w-2",
+  md: "h-2.5 w-2.5",
+  lg: "h-3 w-3",
+  xl: "h-3.5 w-3.5"
+};
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  const first = parts[0] ?? "";
+  if (parts.length === 1) return first.charAt(0).toUpperCase();
+  const last = parts[parts.length - 1] ?? "";
+  return (first.charAt(0) + last.charAt(0)).toUpperCase();
+}
+var Avatar = React.forwardRef(
+  ({
+    className,
+    size = "md",
+    src,
+    name,
+    fallback,
+    badge,
+    badgeColor,
+    ...props
+  }, ref) => {
+    const [imgError, setImgError] = React.useState(false);
+    const showImage = Boolean(src) && !imgError;
+    const initials = name ? getInitials(name) : null;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(avatarVariants({ size }), className),
+        "aria-label": name ?? void 0,
+        role: "img",
+        ...props,
+        children: [
+          showImage ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: name ?? "",
+              className: "h-full w-full object-cover",
+              onError: () => setImgError(true)
+            }
+          ) : initials ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initials }) : fallback ? fallback : (
+            /* Generic user icon */
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                viewBox: "0 0 24 24",
+                fill: "currentColor",
+                className: "h-[55%] w-[55%]",
+                children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" })
+              }
+            )
+          ),
+          badge && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute bottom-0 right-0 rounded-full ring-2 ring-[var(--color-bg-default)]",
+                badgeSizeMap[size ?? "md"],
+                badgeColor ?? "bg-[var(--color-semantic-success-default)]"
+              ),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+export {
+  avatarVariants,
+  Avatar
+};

package/dist/chunk-CVBAWKNG.js

@@ -0,0 +1,124 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Input/Input.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var inputVariants = cva(
+  [
+    // The wrapper owns ALL focus styling (border + ring). Strip every possible
+    // focus indicator from the inner <input> so we never get a double ring.
+    "flex-1 min-w-0 bg-transparent",
+    "border-0 shadow-none",
+    "outline-none focus:outline-none focus-visible:outline-none",
+    "ring-0 focus:ring-0 focus-visible:ring-0",
+    "placeholder:text-[var(--color-text-placeholder)]",
+    "text-[var(--color-text-primary)]",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputWrapperVariants = cva(
+  [
+    "flex items-center w-full rounded-md border bg-[var(--color-bg-default)] transition-colors",
+    "border-[var(--color-border-input)]",
+    // On focus: the border shifts to the ring color and the ring is a
+    // semi-transparent halo. One hard 1 px border + one soft 2 px glow =
+    // a single clean focus indicator. No double ring.
+    "focus-within:outline-none focus-within:border-[var(--color-ring-default)] focus-within:ring-2 focus-within:ring-[color-mix(in_srgb,var(--color-ring-default)_25%,transparent)]",
+    "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-3 gap-1.5",
+        md: "h-9 px-3 gap-2",
+        lg: "h-10 px-4 gap-2"
+      },
+      invalid: {
+        true: "border-[var(--color-danger-500)] focus-within:border-[var(--color-danger-500)] focus-within:ring-[color-mix(in_srgb,var(--color-danger-500)_25%,transparent)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var addonVariants = cva(
+  [
+    "flex items-center self-stretch px-3 text-[var(--color-text-muted)] bg-[var(--color-bg-subtle)]",
+    "border-[var(--color-border-default)] shrink-0"
+  ],
+  {
+    variants: {
+      side: {
+        leading: "border-r rounded-l-md",
+        trailing: "border-l rounded-r-md"
+      }
+    }
+  }
+);
+var Input = React.forwardRef(
+  ({
+    className,
+    size,
+    invalid,
+    leadingAddon,
+    trailingAddon,
+    leadingIcon,
+    trailingIcon,
+    wrapperClassName,
+    disabled,
+    ...props
+  }, ref) => {
+    const hasAddon = Boolean(leadingAddon ?? trailingAddon);
+    const inputEl = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        className: cn(inputVariants({ size }), className),
+        "aria-invalid": invalid ?? void 0,
+        disabled,
+        ...props
+      }
+    );
+    if (hasAddon) {
+      return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full rounded-md overflow-hidden border border-[var(--color-border-input)]", invalid && "border-[var(--color-danger-500)]"), children: [
+        leadingAddon && /* @__PURE__ */ jsx("span", { className: cn(addonVariants({ side: "leading" })), children: leadingAddon }),
+        /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), "rounded-none border-0 ring-offset-0", wrapperClassName), children: [
+          leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: leadingIcon }),
+          inputEl,
+          trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: trailingIcon })
+        ] }),
+        trailingAddon && /* @__PURE__ */ jsx("span", { className: cn(addonVariants({ side: "trailing" })), children: trailingAddon })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), wrapperClassName), children: [
+      leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: leadingIcon }),
+      inputEl,
+      trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: trailingIcon })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+export {
+  inputVariants,
+  inputWrapperVariants,
+  addonVariants,
+  Input
+};

package/dist/chunk-CZUNTABW.js

@@ -0,0 +1,25 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/PageHeader/PageHeader.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PageHeader = React.forwardRef(
+  ({ className, title, description, actions, breadcrumb, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-4", className), ...props, children: [
+    breadcrumb && /* @__PURE__ */ jsx("div", { children: breadcrumb }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-[var(--color-text-primary)] truncate", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--color-text-muted)]", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+    ] })
+  ] })
+);
+PageHeader.displayName = "PageHeader";
+
+export {
+  PageHeader
+};

package/dist/chunk-DAXDAFNG.js

@@ -0,0 +1,92 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Chip/Chip.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var chipVariants = cva(
+  "inline-flex items-center gap-1 rounded-full font-medium select-none transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-1 text-sm"
+      },
+      tone: {
+        neutral: "bg-[var(--color-neutral-100)] text-[var(--color-neutral-700)] border border-[var(--color-neutral-200)]",
+        info: "bg-[var(--color-semantic-info-default)]/10 text-[var(--color-semantic-info-default)] border border-[var(--color-semantic-info-default)]/20",
+        success: "bg-[var(--color-semantic-success-default)]/10 text-[var(--color-semantic-success-default)] border border-[var(--color-semantic-success-default)]/20",
+        warning: "bg-[var(--color-semantic-warning-default)]/10 text-[var(--color-semantic-warning-default)] border border-[var(--color-semantic-warning-default)]/20",
+        danger: "bg-[var(--color-semantic-error-default)]/10 text-[var(--color-semantic-error-default)] border border-[var(--color-semantic-error-default)]/20",
+        leap: "bg-[var(--color-leap-500)]/10 text-[var(--color-leap-700)] border border-[var(--color-leap-500)]/20",
+        bookub: "bg-[var(--color-bookub-500)]/10 text-[var(--color-bookub-700)] border border-[var(--color-bookub-500)]/20",
+        payub: "bg-[var(--color-payub-500)]/10 text-[var(--color-payub-700)] border border-[var(--color-payub-500)]/20",
+        founderub: "bg-[var(--color-founderub-500)]/10 text-[var(--color-founderub-700)] border border-[var(--color-founderub-500)]/20"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "neutral"
+    }
+  }
+);
+var Chip = React.forwardRef(
+  ({ className, size, tone = "neutral", onRemove, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(chipVariants({ size, tone }), className),
+        ...props,
+        children: [
+          children,
+          onRemove && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Remove",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove();
+              },
+              className: cn(
+                "inline-flex items-center justify-center rounded-full transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-1",
+                "hover:bg-black/10 text-current opacity-60 hover:opacity-100",
+                size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "8",
+                  height: "8",
+                  viewBox: "0 0 8 8",
+                  fill: "none",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M7 1L1 7M1 1l6 6",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+
+export {
+  chipVariants,
+  Chip
+};

package/dist/chunk-DD6XCW6R.js

@@ -0,0 +1,53 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Callout/Callout.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var calloutVariants = cva(
+  "flex gap-2.5 rounded-md px-3 py-2.5 text-sm",
+  {
+    variants: {
+      tone: {
+        neutral: "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)]",
+        info: "bg-[var(--color-semantic-info-default)]/10 text-[var(--color-semantic-info-default)]",
+        success: "bg-[var(--color-semantic-success-default)]/10 text-[var(--color-semantic-success-default)]",
+        warning: "bg-[var(--color-semantic-warning-default)]/10 text-[var(--color-semantic-warning-default)]",
+        danger: "bg-[var(--color-semantic-error-default)]/10 text-[var(--color-semantic-error-default)]",
+        leap: "bg-[var(--color-leap-500)]/10 text-[var(--color-leap-700)]",
+        bookub: "bg-[var(--color-bookub-500)]/10 text-[var(--color-bookub-700)]",
+        payub: "bg-[var(--color-payub-500)]/10 text-[var(--color-payub-700)]",
+        founderub: "bg-[var(--color-founderub-500)]/10 text-[var(--color-founderub-700)]"
+      }
+    },
+    defaultVariants: {
+      tone: "neutral"
+    }
+  }
+);
+var Callout = React.forwardRef(
+  ({ className, tone = "neutral", icon, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(calloutVariants({ tone }), className),
+        "data-tone": tone,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 mt-0.5 inline-flex", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children })
+        ]
+      }
+    );
+  }
+);
+Callout.displayName = "Callout";
+
+export {
+  calloutVariants,
+  Callout
+};

package/dist/chunk-DEH2Z27F.js

@@ -0,0 +1,50 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Code/Code.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Code = React.forwardRef(
+  ({ inline = true, language, className, children, ...rest }, ref) => {
+    if (inline) {
+      return /* @__PURE__ */ jsx(
+        "code",
+        {
+          ref,
+          className: cn(
+            "font-mono text-sm bg-[var(--color-bg-muted)] px-1.5 py-0.5 rounded",
+            className
+          ),
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: cn(
+          "overflow-x-auto rounded-md bg-[var(--color-bg-muted)] p-4",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(
+          "code",
+          {
+            ref,
+            className: "font-mono text-sm",
+            "data-language": language,
+            ...rest,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Code.displayName = "Code";
+
+export {
+  Code
+};

package/dist/chunk-DGJE5MX5.js

@@ -0,0 +1,102 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Logo/Logo.tsx
+import * as React from "react";
+import { NexubMark } from "@nexub/icons";
+import { cva } from "class-variance-authority";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var logoVariants = cva("inline-flex items-center gap-2", {
+  variants: {
+    size: {
+      sm: "h-6",
+      md: "h-8",
+      lg: "h-10"
+    },
+    tone: {
+      default: "text-[var(--color-text-primary)]",
+      inverse: "text-white"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    tone: "default"
+  }
+});
+var iconSizeMap = {
+  sm: "h-5 w-auto aspect-[78/56]",
+  md: "h-7 w-auto aspect-[78/56]",
+  lg: "h-9 w-auto aspect-[78/56]"
+};
+var wordmarkSizeMap = {
+  sm: "text-base",
+  md: "text-xl",
+  lg: "text-2xl"
+};
+var Logo = React.forwardRef(
+  ({
+    variant = "full",
+    mark = "color",
+    product,
+    size = "md",
+    tone = "default",
+    className,
+    ...rest
+  }, ref) => {
+    const resolvedSize = size ?? "md";
+    const resolvedTone = tone ?? "default";
+    const full = variant === "full";
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        role: "img",
+        "aria-label": product ? `Nexub ${product}` : "Nexub",
+        className: cn(logoVariants({ size: resolvedSize, tone: resolvedTone }), className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            NexubMark,
+            {
+              variant: mark,
+              className: cn(iconSizeMap[resolvedSize], "shrink-0"),
+              "aria-hidden": "true"
+            }
+          ),
+          full && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                wordmarkSizeMap[resolvedSize],
+                "font-semibold tracking-tight leading-none"
+              ),
+              children: "nexub"
+            }
+          ),
+          full && product && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-1/2 w-px shrink-0 bg-current opacity-25" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  wordmarkSizeMap[resolvedSize],
+                  "font-medium tracking-tight leading-none whitespace-nowrap",
+                  resolvedTone === "inverse" ? "opacity-70" : "text-[var(--color-text-muted)]"
+                ),
+                children: product
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Logo.displayName = "Logo";
+
+export {
+  logoVariants,
+  Logo
+};