@nexub/react 1.0.0 → 1.2.0

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
+};

package/dist/chunk-BMVAZIAJ.js

@@ -0,0 +1,187 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/DataTable/DataTable.tsx
+import * as React from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  flexRender
+} from "@tanstack/react-table";
+import { ArrowUp, ArrowDown, ChevronsUpDown } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TableRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+TableRoot.displayName = "DataTable.TableRoot";
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: cn("[&_tr]:border-b border-[var(--color-border-default)]", className),
+    ...props
+  }
+));
+TableHeader.displayName = "DataTable.TableHeader";
+var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "DataTable.TableBody";
+var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b border-[var(--color-border-default)] transition-colors hover:bg-[var(--color-bg-subtle)] data-[state=selected]:bg-[var(--color-bg-subtle)]",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "DataTable.TableRow";
+var TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-4 text-left align-middle text-xs font-medium text-[var(--color-text-muted)] [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "DataTable.TableHead";
+var TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "px-4 py-3 align-middle text-[var(--color-text-primary)] [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableCell.displayName = "DataTable.TableCell";
+function DataTable({
+  columns,
+  data,
+  enableSorting = false,
+  enableRowSelection = false,
+  pagination,
+  className,
+  ...props
+}) {
+  const [sorting, setSorting] = React.useState([]);
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [paginationState, setPaginationState] = React.useState({
+    pageIndex: 0,
+    pageSize: pagination?.pageSize ?? 20
+  });
+  const tableState = React.useMemo(
+    () => ({
+      sorting: enableSorting ? sorting : void 0,
+      rowSelection: enableRowSelection ? rowSelection : void 0,
+      pagination: pagination ? paginationState : void 0
+    }),
+    [enableSorting, sorting, enableRowSelection, rowSelection, pagination, paginationState]
+  );
+  const table = useReactTable({
+    data,
+    columns,
+    state: tableState,
+    onSortingChange: enableSorting ? setSorting : void 0,
+    onRowSelectionChange: enableRowSelection ? setRowSelection : void 0,
+    onPaginationChange: pagination ? setPaginationState : void 0,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: pagination ? getPaginationRowModel() : void 0,
+    enableRowSelection,
+    manualPagination: false
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ...props, children: [
+    /* @__PURE__ */ jsxs(TableRoot, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+        TableHead,
+        {
+          "aria-sort": enableSorting && header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0,
+          children: header.isPlaceholder ? null : enableSorting && header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: header.column.getToggleSortingHandler(),
+              className: "inline-flex items-center gap-1 hover:text-[var(--color-text-primary)]",
+              children: [
+                flexRender(header.column.columnDef.header, header.getContext()),
+                header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { size: "xs", "aria-hidden": "true" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: "xs", className: "opacity-40", "aria-hidden": "true" })
+              ]
+            }
+          ) : flexRender(header.column.columnDef.header, header.getContext())
+        },
+        header.id
+      )) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          "data-state": enableRowSelection && row.getIsSelected() ? "selected" : void 0,
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan: columns.length,
+          className: "h-24 text-center text-[var(--color-text-muted)]",
+          children: "No results."
+        }
+      ) }) })
+    ] }),
+    pagination && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-sm text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of ",
+        table.getPageCount()
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            className: "rounded border border-[var(--color-border-default)] px-3 py-2 min-h-[44px] disabled:opacity-50",
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            className: "rounded border border-[var(--color-border-default)] px-3 py-2 min-h-[44px] disabled:opacity-50",
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  DataTable
+};

package/dist/chunk-BTZW34TX.js

@@ -0,0 +1,76 @@
+'use client';
+import {
+  glassSurfaceClass
+} from "./chunk-ROZVVWPV.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/TopNav/TopNav.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var Root = React.forwardRef(
+  ({ className, children, surface = "solid", ...props }, ref) => /* @__PURE__ */ jsx(
+    "header",
+    {
+      ref,
+      className: cn(
+        "sticky top-0 z-[var(--z-sticky,100)] flex h-[var(--size-nav-header,64px)] items-center border-b border-[var(--color-border-default)] bg-[var(--color-bg-default)] px-4",
+        surface === "glass" && glassSurfaceClass,
+        className
+      ),
+      "data-material": surface === "glass" ? "glass" : void 0,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center gap-4", children })
+    }
+  )
+);
+Root.displayName = "TopNav.Root";
+var Logo = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("shrink-0 flex items-center", className), ...props })
+);
+Logo.displayName = "TopNav.Logo";
+var Menu = React.forwardRef(
+  ({ className, ...props }, ref) => (
+    // Scrolls horizontally on narrow screens rather than hiding the links.
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": "Main",
+        className: cn("flex min-w-0 items-center gap-1 overflow-x-auto", className),
+        ...props
+      }
+    )
+  )
+);
+Menu.displayName = "TopNav.Menu";
+var Item = React.forwardRef(
+  ({ className, active, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "aria-current": active ? "page" : void 0,
+        className: cn(
+          "inline-flex h-9 shrink-0 items-center rounded-md px-4 text-sm font-medium transition-colors",
+          active ? "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)]" : "text-[var(--color-text-muted)] hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Item.displayName = "TopNav.Item";
+var Actions = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("ml-auto flex items-center gap-2", className), ...props })
+);
+Actions.displayName = "TopNav.Actions";
+var TopNav = { Root, Logo, Menu, Item, Actions };
+
+export {
+  TopNav
+};

package/dist/chunk-BUBYXAJK.js

@@ -0,0 +1,20 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Box/Box.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var Box = React.forwardRef(
+  ({ asChild = false, className, children, ...rest }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn(className), ...rest, children });
+  }
+);
+Box.displayName = "Box";
+
+export {
+  Box
+};

package/dist/chunk-BV3U3ATL.js

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

package/dist/chunk-BYCTJHXY.js

@@ -0,0 +1,75 @@
+'use client';
+import {
+  avatarVariants
+} from "./chunk-CPV367VS.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/AvatarGroup/AvatarGroup.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var avatarGroupVariants = cva("flex items-center", {
+  variants: {
+    spacing: {
+      sm: "[&>*:not(:first-child)]:-ml-3",
+      md: "[&>*:not(:first-child)]:-ml-2",
+      lg: "[&>*:not(:first-child)]:-ml-1"
+    }
+  },
+  defaultVariants: {
+    spacing: "md"
+  }
+});
+var AvatarGroup = React.forwardRef(
+  ({ className, max, size = "md", spacing, children, ...props }, ref) => {
+    const items = React.Children.toArray(children);
+    const visibleItems = max !== void 0 ? items.slice(0, max) : items;
+    const overflowCount = max !== void 0 && items.length > max ? items.length - max : 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(avatarGroupVariants({ spacing }), className),
+        role: "group",
+        ...props,
+        children: [
+          visibleItems.map((child, index) => {
+            if (!React.isValidElement(child)) return child;
+            const childWithSize = React.cloneElement(
+              child,
+              { size }
+            );
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "ring-2 ring-[var(--color-bg-default)] rounded-full inline-flex",
+                children: childWithSize
+              },
+              child.key ?? index
+            );
+          }),
+          overflowCount > 0 && /* @__PURE__ */ jsx("span", { className: "ring-2 ring-[var(--color-bg-default)] rounded-full inline-flex", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(avatarVariants({ size }), "font-medium"),
+              role: "img",
+              "aria-label": `${overflowCount} more`,
+              children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+                "+",
+                overflowCount
+              ] })
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+
+export {
+  avatarGroupVariants,
+  AvatarGroup
+};