@nexub/react 1.0.0 → 1.1.0

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-DOHXBNOP.js

@@ -0,0 +1,119 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/DatePicker/DatePicker.tsx
+import * as React from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { DayPicker } from "react-day-picker";
+import { format } from "date-fns";
+import { CalendarDays, ChevronLeft, ChevronRight } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var calendarClassNames = {
+  months: "flex flex-col sm:flex-row gap-4",
+  month: "flex flex-col gap-4",
+  month_caption: "flex justify-center pt-1 relative items-center",
+  caption_label: "text-sm font-medium",
+  nav: "flex items-center gap-1",
+  button_previous: "absolute left-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+  button_next: "absolute right-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+  month_grid: "w-full border-collapse",
+  weekdays: "flex",
+  weekday: "text-[var(--color-text-muted)] rounded-md w-8 font-normal text-[0.8rem] flex-1 text-center",
+  week: "flex w-full mt-2",
+  day: cn(
+    "relative p-0 text-center text-sm flex-1",
+    "[&:has([aria-selected].day-range-end)]:rounded-r-md",
+    "[&:has([aria-selected].day-outside)]:bg-[var(--color-bg-subtle)]/50",
+    "[&:has([aria-selected])]:bg-[var(--color-bg-subtle)]",
+    "first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
+    "focus-within:relative focus-within:z-20"
+  ),
+  day_button: cn(
+    "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
+    "hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+    "aria-selected:opacity-100"
+  ),
+  selected: "bg-[var(--color-fill-primary)] text-white hover:bg-[var(--color-fill-primary-hover)] hover:text-white focus:bg-[var(--color-fill-primary)] focus:text-white",
+  today: "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)]",
+  outside: "text-[var(--color-text-muted)] opacity-50",
+  disabled: "text-[var(--color-text-muted)] opacity-50",
+  hidden: "invisible"
+};
+var DatePicker = React.forwardRef(
+  function DatePicker2({
+    value,
+    onChange,
+    placeholder = "Pick a date",
+    disabled = false,
+    minDate,
+    maxDate,
+    className,
+    id,
+    "aria-label": ariaLabel
+  }, ref) {
+    const [open, setOpen] = React.useState(false);
+    const display = value ? format(value, "PP") : placeholder;
+    return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          id,
+          disabled,
+          "aria-label": ariaLabel ? `${ariaLabel}: ${display}` : display,
+          className: cn(
+            "inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border border-[var(--color-border-input)] bg-[var(--color-bg-default)] px-3 py-2 text-sm",
+            "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            !value && "text-[var(--color-text-muted)]",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
+            value ? format(value, "PP") : placeholder
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+        RadixPopover.Content,
+        {
+          align: "start",
+          className: cn(
+            "z-[var(--z-popover)] 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=open]:fade-in-0 data-[state=open]:zoom-in-95",
+            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+          ),
+          children: /* @__PURE__ */ jsx(
+            DayPicker,
+            {
+              mode: "single",
+              selected: value,
+              onSelect: (date) => {
+                onChange?.(date);
+                setOpen(false);
+              },
+              startMonth: minDate,
+              endMonth: maxDate,
+              initialFocus: true,
+              showOutsideDays: true,
+              className: "p-3",
+              classNames: calendarClassNames,
+              components: {
+                Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { size: "xs", "aria-hidden": "true" }) : orientation === "right" ? /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", ...rest })
+              }
+            }
+          )
+        }
+      ) })
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+export {
+  DatePicker
+};

package/dist/chunk-DR2Y3PIT.js

@@ -0,0 +1,91 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/FilterChip/FilterChip.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FilterChip = React.forwardRef(
+  ({ className, selected = false, count, onRemove, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-full border px-3 py-1 text-sm font-medium select-none transition-colors",
+          selected ? "bg-[var(--color-fill-accent)] text-white border-[var(--color-fill-accent)]" : "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)] border-[var(--color-border-default)] hover:bg-[var(--color-bg-muted)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref,
+              type: "button",
+              className: cn(
+                "inline-flex items-center gap-1 bg-transparent border-0 p-0 m-0 cursor-pointer",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)] rounded-sm",
+                selected ? "text-white" : "text-[var(--color-text-primary)]",
+                className
+              ),
+              "aria-pressed": selected,
+              ...props,
+              children: [
+                children,
+                count !== void 0 && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex items-center justify-center rounded-full text-xs font-semibold px-1.5 min-w-[1.25rem] h-5",
+                      selected ? "bg-white/20 text-white" : "bg-[var(--color-bg-muted)] text-[var(--color-text-muted)]"
+                    ),
+                    children: count
+                  }
+                )
+              ]
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Remove filter",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove();
+              },
+              className: cn(
+                "inline-flex items-center justify-center rounded-full w-4 h-4 text-xs transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-1",
+                selected ? "text-white hover:bg-white/20" : "text-[var(--color-text-muted)] hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-text-primary)]"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "10",
+                  height: "10",
+                  viewBox: "0 0 10 10",
+                  fill: "none",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M8 2L2 8M2 2l6 6",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FilterChip.displayName = "FilterChip";
+
+export {
+  FilterChip
+};

package/dist/chunk-ELC2NBGH.js

@@ -0,0 +1,89 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Table/Table.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Root = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })
+);
+Root.displayName = "Table.Root";
+var Header = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+Header.displayName = "Table.Header";
+var Body = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+Body.displayName = "Table.Body";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-[var(--color-bg-subtle)] font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "Table.Footer";
+var Row = 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)]/50 data-[state=selected]:bg-[var(--color-bg-subtle)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Row.displayName = "Table.Row";
+var Head = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-4 text-left align-middle font-medium text-[var(--color-text-muted)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+Head.displayName = "Table.Head";
+var Cell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+Cell.displayName = "Table.Cell";
+var Caption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-[var(--color-text-muted)]", className),
+    ...props
+  }
+));
+Caption.displayName = "Table.Caption";
+var Table = {
+  Root,
+  Header,
+  Body,
+  Footer: TableFooter,
+  Row,
+  Head,
+  Cell,
+  Caption
+};
+
+export {
+  Table
+};

package/dist/chunk-EV43I5J6.js

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