@nexub/react 0.0.2 → 1.1.0

package/dist/chunk-7W2YDJ5W.js

@@ -0,0 +1,128 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/NavigationMenu/NavigationMenu.tsx
+import * as React from "react";
+import * as RadixNav from "@radix-ui/react-navigation-menu";
+import { ChevronDown } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root2 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    RadixNav.Root,
+    {
+      ref,
+      className: cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Viewport2, {})
+      ]
+    }
+  )
+);
+Root2.displayName = "NavigationMenu.Root";
+var List2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixNav.List,
+    {
+      ref,
+      className: cn("group flex flex-1 list-none items-center justify-center gap-1", className),
+      ...props
+    }
+  )
+);
+List2.displayName = "NavigationMenu.List";
+var Item2 = RadixNav.Item;
+var Trigger2 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    RadixNav.Trigger,
+    {
+      ref,
+      className: cn(
+        "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors",
+        "hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)] focus:bg-[var(--color-bg-subtle)] focus:text-[var(--color-text-primary)] focus:outline-none",
+        "data-[active]:bg-[var(--color-bg-subtle)]/50 data-[state=open]:bg-[var(--color-bg-subtle)]/50",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            size: "xs",
+            className: "relative ml-1 transition duration-300 group-data-[state=open]:rotate-180",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  )
+);
+Trigger2.displayName = "NavigationMenu.Trigger";
+var Content2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixNav.Content,
+    {
+      ref,
+      className: cn(
+        "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Content2.displayName = "NavigationMenu.Content";
+var Link2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixNav.Link,
+    {
+      ref,
+      className: cn(
+        "block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)] focus:bg-[var(--color-bg-subtle)] focus:text-[var(--color-text-primary)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Link2.displayName = "NavigationMenu.Link";
+var Viewport2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsx(
+    RadixNav.Viewport,
+    {
+      ref,
+      className: cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      ),
+      ...props
+    }
+  ) })
+);
+Viewport2.displayName = "NavigationMenu.Viewport";
+var Indicator2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixNav.Indicator,
+    {
+      ref,
+      className: cn(
+        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-[var(--color-border-default)] shadow-md" })
+    }
+  )
+);
+Indicator2.displayName = "NavigationMenu.Indicator";
+var NavigationMenu = { Root: Root2, List: List2, Item: Item2, Trigger: Trigger2, Content: Content2, Link: Link2, Viewport: Viewport2, Indicator: Indicator2 };
+
+export {
+  NavigationMenu
+};

package/dist/chunk-A7L75YXY.js

@@ -0,0 +1,61 @@
+'use client';
+import {
+  Input
+} from "./chunk-CVBAWKNG.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/SearchInput/SearchInput.tsx
+import * as React from "react";
+import { Search, X } from "@nexub/icons";
+import { jsx } from "react/jsx-runtime";
+var SearchInput = React.forwardRef(
+  ({ value, defaultValue: _defaultValue, onChange, onClear, className, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(
+      _defaultValue ?? ""
+    );
+    const controlled = value !== void 0;
+    const currentValue = controlled ? String(value) : internalValue;
+    const hasValue = currentValue.length > 0;
+    const handleChange = (e) => {
+      if (!controlled) setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+    const handleClear = () => {
+      if (!controlled) setInternalValue("");
+      onClear?.();
+    };
+    const clearButton = hasValue ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClear,
+        "aria-label": "Clear search",
+        className: cn(
+          "shrink-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-ring-default)] rounded"
+        ),
+        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
+      }
+    ) : null;
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "search",
+        value: controlled ? value : internalValue,
+        onChange: handleChange,
+        className,
+        leadingIcon: /* @__PURE__ */ jsx(Search, { className: "h-4 w-4", "aria-hidden": "true" }),
+        trailingIcon: clearButton ?? void 0,
+        ...props
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+
+export {
+  SearchInput
+};

package/dist/chunk-ADO2DB6Q.js

@@ -0,0 +1 @@
+'use client';

package/dist/chunk-AHZQQ7OT.js

@@ -0,0 +1,83 @@
+'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 { 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-5",
+  md: "h-7 w-7",
+  lg: "h-9 w-9"
+};
+var wordmarkSizeMap = {
+  sm: "text-base",
+  md: "text-xl",
+  lg: "text-2xl"
+};
+var Logo = React.forwardRef(
+  ({
+    variant = "full",
+    size = "md",
+    tone = "default",
+    className,
+    ...rest
+  }, ref) => {
+    const resolvedSize = size ?? "md";
+    const resolvedTone = tone ?? "default";
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(logoVariants({ size: resolvedSize, tone: resolvedTone }), className),
+        "aria-label": "Nexub",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            NexubMark,
+            {
+              className: cn(iconSizeMap[resolvedSize], "shrink-0"),
+              "aria-hidden": "true"
+            }
+          ),
+          variant === "full" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                wordmarkSizeMap[resolvedSize],
+                "font-semibold tracking-tight leading-none"
+              ),
+              children: "nexub"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Logo.displayName = "Logo";
+
+export {
+  logoVariants,
+  Logo
+};

package/dist/chunk-AT6RPKU3.js

@@ -0,0 +1,12 @@
+'use client';
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};

package/dist/chunk-BBVOB4EC.js

@@ -0,0 +1,36 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/ScrollArea/ScrollArea.tsx
+import * as React from "react";
+import * as RadixScrollArea from "@radix-ui/react-scroll-area";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ScrollArea = React.forwardRef(
+  ({ className, children, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxs(RadixScrollArea.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
+    /* @__PURE__ */ jsx(RadixScrollArea.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+    (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(
+      RadixScrollArea.Scrollbar,
+      {
+        className: "flex touch-none select-none transition-colors h-full w-2.5 border-l border-l-transparent p-[1px]",
+        orientation: "vertical",
+        children: /* @__PURE__ */ jsx(RadixScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-[var(--color-border-default)]" })
+      }
+    ),
+    (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(
+      RadixScrollArea.Scrollbar,
+      {
+        className: "flex touch-none select-none transition-colors flex-col h-2.5 border-t border-t-transparent p-[1px]",
+        orientation: "horizontal",
+        children: /* @__PURE__ */ jsx(RadixScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-[var(--color-border-default)]" })
+      }
+    ),
+    /* @__PURE__ */ jsx(RadixScrollArea.Corner, {})
+  ] })
+);
+ScrollArea.displayName = "ScrollArea";
+
+export {
+  ScrollArea
+};

package/dist/chunk-BGY23Y5O.js

@@ -0,0 +1,104 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Badge/Badge.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var badgeVariants = cva(
+  [
+    "inline-flex items-center gap-1 font-medium rounded-full whitespace-nowrap",
+    "transition-colors select-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-0.5 text-sm",
+        lg: "px-3 py-1 text-sm"
+      },
+      variant: {
+        solid: "",
+        soft: "",
+        outline: "bg-transparent border"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "solid"
+    }
+  }
+);
+var toneClasses = {
+  neutral: {
+    solid: "bg-[var(--color-neutral-500)] text-white",
+    soft: "bg-[var(--color-neutral-500)]/10 text-[var(--color-neutral-700)]",
+    outline: "border-[var(--color-neutral-500)] text-[var(--color-neutral-700)]"
+  },
+  info: {
+    solid: "bg-[var(--color-fill-info)] text-white",
+    soft: "bg-[var(--color-semantic-info-default)]/10 text-[var(--color-text-info)]",
+    outline: "border-[var(--color-semantic-info-default)] text-[var(--color-text-info)]"
+  },
+  success: {
+    solid: "bg-[var(--color-fill-success)] text-white",
+    soft: "bg-[var(--color-semantic-success-default)]/10 text-[var(--color-text-success)]",
+    outline: "border-[var(--color-semantic-success-default)] text-[var(--color-text-success)]"
+  },
+  warning: {
+    solid: "bg-[var(--color-fill-warning)] text-white",
+    soft: "bg-[var(--color-semantic-warning-default)]/10 text-[var(--color-text-warning)]",
+    outline: "border-[var(--color-semantic-warning-default)] text-[var(--color-text-warning)]"
+  },
+  danger: {
+    solid: "bg-[var(--color-fill-danger)] text-white",
+    soft: "bg-[var(--color-semantic-error-default)]/10 text-[var(--color-text-danger)]",
+    outline: "border-[var(--color-semantic-error-default)] text-[var(--color-text-danger)]"
+  },
+  leap: {
+    solid: "bg-[var(--color-fill-leap)] text-white",
+    soft: "bg-[var(--color-leap-500)]/10 text-[var(--color-leap-700)]",
+    outline: "border-[var(--color-leap-500)] text-[var(--color-leap-700)]"
+  },
+  bookub: {
+    solid: "bg-[var(--color-fill-bookub)] text-white",
+    soft: "bg-[var(--color-bookub-500)]/10 text-[var(--color-bookub-700)]",
+    outline: "border-[var(--color-bookub-500)] text-[var(--color-bookub-700)]"
+  },
+  payub: {
+    solid: "bg-[var(--color-fill-payub)] text-white",
+    soft: "bg-[var(--color-payub-500)]/10 text-[var(--color-payub-700)]",
+    outline: "border-[var(--color-payub-500)] text-[var(--color-payub-700)]"
+  },
+  founderub: {
+    solid: "bg-[var(--color-fill-founderub)] text-white",
+    soft: "bg-[var(--color-founderub-500)]/10 text-[var(--color-founderub-700)]",
+    outline: "border-[var(--color-founderub-500)] text-[var(--color-founderub-700)]"
+  }
+};
+var Badge = React.forwardRef(
+  ({ className, size, variant = "solid", tone = "neutral", leadingIcon, children, ...props }, ref) => {
+    const resolvedVariant = variant ?? "solid";
+    const toneStyle = toneClasses[tone][resolvedVariant];
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(badgeVariants({ size, variant: resolvedVariant }), toneStyle, className),
+        ...props,
+        children: [
+          leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center", children: leadingIcon }),
+          children
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+export {
+  badgeVariants,
+  Badge
+};

package/dist/chunk-BJKW3G2L.js

@@ -0,0 +1,99 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Pagination/Pagination.tsx
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function generatePages(current, total, siblings) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const leftSibling = Math.max(current - siblings, 1);
+  const rightSibling = Math.min(current + siblings, total);
+  const showLeft = leftSibling > 2;
+  const showRight = rightSibling < total - 1;
+  const pages = [1];
+  if (showLeft) pages.push("...");
+  for (let i = leftSibling; i <= rightSibling; i++) {
+    if (i !== 1 && i !== total) pages.push(i);
+  }
+  if (showRight) pages.push("...");
+  pages.push(total);
+  return pages;
+}
+var Pagination = React.forwardRef(
+  ({
+    className,
+    page,
+    totalItems,
+    pageSize = 20,
+    siblingCount = 1,
+    onPageChange,
+    ...props
+  }, ref) => {
+    const totalPages = Math.ceil(totalItems / pageSize);
+    if (totalPages <= 1) return null;
+    const pages = generatePages(page, totalPages, siblingCount);
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        role: "navigation",
+        "aria-label": "Pagination",
+        className: cn("flex items-center gap-1", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onPageChange(page - 1),
+              disabled: page <= 1,
+              "aria-label": "Go to previous page",
+              className: "inline-flex h-11 w-11 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { size: "sm", "aria-hidden": "true" })
+            }
+          ),
+          pages.map(
+            (p, i) => p === "..." ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex h-11 w-11 items-center justify-center text-[var(--color-text-muted)]",
+                children: /* @__PURE__ */ jsx(MoreHorizontal, { size: "sm", "aria-hidden": "true" })
+              },
+              `ellipsis-${i}`
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => onPageChange(p),
+                "aria-label": `Go to page ${p}`,
+                "aria-current": p === page ? "page" : void 0,
+                className: cn(
+                  "inline-flex h-11 w-11 items-center justify-center rounded-md text-sm font-medium transition-colors",
+                  p === page ? "bg-[var(--color-fill-primary)] text-white" : "border border-[var(--color-border-default)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]"
+                ),
+                children: p
+              },
+              p
+            )
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onPageChange(page + 1),
+              disabled: page >= totalPages,
+              "aria-label": "Go to next page",
+              className: "inline-flex h-11 w-11 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: "sm", "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+
+export {
+  Pagination
+};