@nexub/react 1.0.0 → 1.1.0

package/dist/chunk-OZPPL76D.js

@@ -0,0 +1,82 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Toolbar/Toolbar.tsx
+import * as React from "react";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+import { jsx } from "react/jsx-runtime";
+var Root2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToolbar.Root,
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-1 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-1",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root2.displayName = "Toolbar.Root";
+var ToolbarButton = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToolbar.Button,
+    {
+      ref,
+      className: cn(
+        "inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors",
+        "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ToolbarButton.displayName = "Toolbar.Button";
+var Separator2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToolbar.Separator,
+    {
+      ref,
+      className: cn("mx-1 w-px self-stretch bg-[var(--color-border-default)]", className),
+      ...props
+    }
+  )
+);
+Separator2.displayName = "Toolbar.Separator";
+var ToggleGroup2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToolbar.ToggleGroup,
+    {
+      ref,
+      className: cn("flex items-center gap-0.5", className),
+      ...props
+    }
+  )
+);
+ToggleGroup2.displayName = "Toolbar.ToggleGroup";
+var ToggleItem2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToolbar.ToggleItem,
+    {
+      ref,
+      className: cn(
+        "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
+        "hover:bg-[var(--color-bg-subtle)] data-[state=on]:bg-[var(--color-bg-subtle)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ToggleItem2.displayName = "Toolbar.ToggleItem";
+var Toolbar = { Root: Root2, Button: ToolbarButton, Separator: Separator2, ToggleGroup: ToggleGroup2, ToggleItem: ToggleItem2 };
+
+export {
+  Toolbar
+};

package/dist/chunk-P6BZNFVU.js

@@ -0,0 +1,38 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Slider/Slider.tsx
+import * as React from "react";
+import * as RadixSlider from "@radix-ui/react-slider";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Slider = React.forwardRef(
+  ({ className, thumbLabels, "aria-label": ariaLabel, ...props }, ref) => {
+    const count = (props.value ?? props.defaultValue ?? [0]).length;
+    return /* @__PURE__ */ jsxs(
+      RadixSlider.Root,
+      {
+        ref,
+        className: cn("relative flex w-full touch-none select-none items-center", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(RadixSlider.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-[var(--color-bg-muted)]", children: /* @__PURE__ */ jsx(RadixSlider.Range, { className: "absolute h-full bg-[var(--color-fill-primary)]" }) }),
+          Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
+            RadixSlider.Thumb,
+            {
+              "aria-label": thumbLabels?.[i] ?? ariaLabel,
+              className: "block h-5 w-5 rounded-full border-2 border-[var(--color-fill-primary)] bg-[var(--color-bg-default)] transition-colors 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)] disabled:pointer-events-none disabled:opacity-50"
+            },
+            i
+          ))
+        ]
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+
+export {
+  Slider
+};

package/dist/chunk-PANDAMD2.js

@@ -0,0 +1,54 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/CheckList/CheckList.tsx
+import * as React from "react";
+import { Check } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CheckList = React.forwardRef(
+  ({ className, items, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        ref,
+        className: cn("flex flex-col gap-2 list-none m-0 p-0", className),
+        ...props,
+        children: [
+          items?.map((item, index) => /* @__PURE__ */ jsx(CheckListItem, { children: item }, index)),
+          children
+        ]
+      }
+    );
+  }
+);
+CheckList.displayName = "CheckList";
+var CheckListItem = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref,
+        className: cn("flex items-start gap-2 text-[var(--color-text-primary)]", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center mt-0.5 h-4 w-4 rounded-full bg-[var(--color-semantic-success-default)]/10", children: /* @__PURE__ */ jsx(
+            Check,
+            {
+              className: "h-3 w-3 text-[var(--color-semantic-success-default)]",
+              "aria-hidden": "true"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm", children })
+        ]
+      }
+    );
+  }
+);
+CheckListItem.displayName = "CheckListItem";
+
+export {
+  CheckList,
+  CheckListItem
+};

package/dist/chunk-PBLEGOLM.js

@@ -0,0 +1,71 @@
+'use client';
+import {
+  glassSurfaceClass
+} from "./chunk-ROZVVWPV.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Card/Card.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var cardVariants = cva(
+  "rounded-lg bg-[var(--color-bg-default)] border border-[var(--color-border-default)] text-[var(--color-text-primary)]",
+  {
+    variants: {
+      variant: {
+        flat: "",
+        surface: "shadow-[var(--shadow-card,0_1px_3px_0_rgb(0_0_0/0.1),0_1px_2px_-1px_rgb(0_0_0/0.1))]",
+        interactive: "cursor-pointer shadow-[var(--shadow-sm)] transition-all duration-200 hover:shadow-[var(--shadow-md)] hover:-translate-y-0.5 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)]"
+      },
+      // Material. 'glass' needs data-material="glass" on the element (set in the
+      // component) for the --glass-* vars to resolve. Single box-shadow carries
+      // both the inset specular highlight and the drop shadow so neither clobbers
+      // the other. Listed after `variant` so tailwind-merge lets it win on bg/border.
+      surface: {
+        solid: "",
+        glass: glassSurfaceClass
+      }
+    },
+    defaultVariants: {
+      variant: "flat",
+      surface: "solid"
+    }
+  }
+);
+var toneBorderMap = {
+  neutral: "",
+  info: "border-l-4 border-l-[var(--color-semantic-info-default)]",
+  success: "border-l-4 border-l-[var(--color-semantic-success-default)]",
+  warning: "border-l-4 border-l-[var(--color-semantic-warning-default)]",
+  danger: "border-l-4 border-l-[var(--color-semantic-error-default)]",
+  leap: "border-l-4 border-l-[var(--color-leap-500)]",
+  bookub: "border-l-4 border-l-[var(--color-bookub-500)]",
+  payub: "border-l-4 border-l-[var(--color-payub-500)]",
+  founderub: "border-l-4 border-l-[var(--color-founderub-500)]"
+};
+var Card = React.forwardRef(
+  ({ className, variant = "flat", surface = "solid", tone, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    const toneStyle = tone ? toneBorderMap[tone] : "";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(cardVariants({ variant, surface }), toneStyle, className),
+        "data-tone": tone,
+        "data-material": surface === "glass" ? "glass" : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+export {
+  cardVariants,
+  Card
+};

package/dist/chunk-PER3O4FD.js

@@ -0,0 +1,33 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Kbd/Kbd.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Kbd = React.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "kbd",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center justify-center font-mono text-xs",
+          "px-1.5 py-0.5 min-w-[1.5rem]",
+          "rounded border border-[var(--color-border-default)]",
+          "bg-[var(--color-bg-subtle)] text-[var(--color-text-secondary)]",
+          "shadow-[0_1px_0_var(--color-border-default)]",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+
+export {
+  Kbd
+};

package/dist/chunk-PICMOOAZ.js

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

package/dist/chunk-POBSY7EZ.js

@@ -0,0 +1,155 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/FileUpload/FileUpload.tsx
+import * as React from "react";
+import { Upload, X } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FileUploadContext = React.createContext(null);
+function useFileUpload() {
+  const ctx = React.useContext(FileUploadContext);
+  if (!ctx) throw new Error("FileUpload parts must be used inside FileUpload.Root");
+  return ctx;
+}
+var Root = React.forwardRef(
+  ({ className, accept, maxFiles, onFilesChange, children, ...props }, ref) => {
+    const [files, setFiles] = React.useState([]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const addFiles = React.useCallback(
+      (newFiles) => {
+        setFiles((prev) => {
+          const next = [...prev, ...newFiles].slice(0, maxFiles);
+          onFilesChange?.(next);
+          return next;
+        });
+      },
+      [maxFiles, onFilesChange]
+    );
+    const removeFile = React.useCallback(
+      (index) => {
+        setFiles((prev) => {
+          const next = prev.filter((_, i) => i !== index);
+          onFilesChange?.(next);
+          return next;
+        });
+      },
+      [onFilesChange]
+    );
+    const contextValue = React.useMemo(
+      () => ({ accept, maxFiles, onFilesChange, files, addFiles, removeFile, isDragging, setIsDragging }),
+      [accept, maxFiles, onFilesChange, files, addFiles, removeFile, isDragging, setIsDragging]
+    );
+    return /* @__PURE__ */ jsx(FileUploadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-4", className), ...props, children }) });
+  }
+);
+Root.displayName = "FileUpload.Root";
+var Dropzone = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { accept, addFiles, isDragging, setIsDragging } = useFileUpload();
+    const inputRef = React.useRef(null);
+    function handleDrop(e) {
+      e.preventDefault();
+      setIsDragging(false);
+      const dropped = Array.from(e.dataTransfer.files);
+      addFiles(dropped);
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Upload files",
+        onClick: () => inputRef.current?.click(),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          setIsDragging(true);
+        },
+        onDragLeave: () => setIsDragging(false),
+        onDrop: handleDrop,
+        className: cn(
+          "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-8 text-center transition-colors",
+          isDragging ? "border-[var(--color-brand-primary-500)] bg-[var(--color-brand-primary-500)]/5" : "border-[var(--color-border-input)] hover:border-[var(--color-brand-primary-500)] hover:bg-[var(--color-bg-subtle)]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Upload, { size: "lg", className: "text-[var(--color-text-muted)]", "aria-hidden": "true" }),
+          children ?? /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--color-text-muted)]", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--color-brand-primary-500)]", children: "Click to upload" }),
+            " ",
+            "or drag and drop"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: "sr-only",
+              multiple: true,
+              accept: accept?.join(","),
+              onChange: (e) => {
+                if (e.target.files) addFiles(Array.from(e.target.files));
+                e.target.value = "";
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Dropzone.displayName = "FileUpload.Dropzone";
+var List = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { files } = useFileUpload();
+    if (files.length === 0) return null;
+    return /* @__PURE__ */ jsx("ul", { ref, className: cn("flex flex-col gap-2", className), ...props });
+  }
+);
+List.displayName = "FileUpload.List";
+var Item = React.forwardRef(({ className, index, ...props }, ref) => {
+  const { files, removeFile } = useFileUpload();
+  const file = files[index];
+  if (!file) return null;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-between gap-3 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--color-text-primary)]", children: file.name }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--color-text-muted)]", children: [
+            (file.size / 1024).toFixed(1),
+            " KB"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => removeFile(index),
+            "aria-label": `Remove ${file.name}`,
+            className: "shrink-0 rounded p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors",
+            children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+});
+Item.displayName = "FileUpload.Item";
+var FileUpload = { Root, Dropzone, List, Item };
+
+export {
+  FileUpload
+};

package/dist/chunk-POFKKYHY.js

@@ -0,0 +1,37 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Flag/Flag.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function countryCodeToEmoji(code) {
+  return code.toUpperCase().split("").map((c) => String.fromCodePoint(c.charCodeAt(0) - 65 + 127462)).join("");
+}
+var sizeClass = {
+  sm: "text-base",
+  md: "text-xl",
+  lg: "text-3xl"
+};
+var Flag = React.forwardRef(
+  ({ code, size = "md", className, ...rest }, ref) => {
+    const emoji = countryCodeToEmoji(code);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: "img",
+        "aria-label": code,
+        className: cn("inline-block leading-none", sizeClass[size], className),
+        ...rest,
+        children: emoji
+      }
+    );
+  }
+);
+Flag.displayName = "Flag";
+
+export {
+  Flag
+};

package/dist/chunk-QF7GUDOE.js

@@ -0,0 +1,67 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Skeleton/Skeleton.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var skeletonVariants = cva(
+  "bg-[var(--color-bg-muted)]",
+  {
+    variants: {
+      shape: {
+        line: "rounded",
+        rect: "rounded-md",
+        circle: "rounded-full"
+      },
+      animated: {
+        true: "animate-pulse"
+      }
+    },
+    defaultVariants: {
+      shape: "line",
+      animated: true
+    }
+  }
+);
+var Skeleton = React.forwardRef(
+  ({
+    className,
+    shape = "line",
+    width,
+    height,
+    animated = true,
+    style,
+    ...props
+  }, ref) => {
+    const defaultHeight = shape === "line" ? "1em" : shape === "circle" ? void 0 : void 0;
+    const resolvedWidth = width !== void 0 ? typeof width === "number" ? `${width}px` : width : shape === "circle" ? height !== void 0 ? typeof height === "number" ? `${height}px` : height : "2.5rem" : "100%";
+    const resolvedHeight = height !== void 0 ? typeof height === "number" ? `${height}px` : height : shape === "circle" ? resolvedWidth : defaultHeight;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn(
+          skeletonVariants({ shape, animated }),
+          "block",
+          className
+        ),
+        style: {
+          width: resolvedWidth,
+          height: resolvedHeight,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+export {
+  skeletonVariants,
+  Skeleton
+};

package/dist/chunk-QHJ43Q2T.js

@@ -0,0 +1,70 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Spinner/Spinner.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var spinnerVariants = cva(
+  [
+    "inline-block rounded-full border-2 border-solid",
+    "animate-spin",
+    // One transparent segment gives the illusion of rotation
+    "border-t-transparent"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-3 w-3 border-[1.5px]",
+        sm: "h-4 w-4 border-2",
+        md: "h-6 w-6 border-2",
+        lg: "h-8 w-8 border-[3px]",
+        xl: "h-10 w-10 border-4"
+      },
+      tone: {
+        neutral: "border-[var(--color-neutral-500)]",
+        info: "border-[var(--color-semantic-info-default)]",
+        success: "border-[var(--color-semantic-success-default)]",
+        warning: "border-[var(--color-semantic-warning-default)]",
+        danger: "border-[var(--color-semantic-error-default)]",
+        leap: "border-[var(--color-leap-500)]",
+        bookub: "border-[var(--color-bookub-500)]",
+        payub: "border-[var(--color-payub-500)]",
+        founderub: "border-[var(--color-founderub-500)]"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "neutral"
+    }
+  }
+);
+var Spinner = React.forwardRef(
+  ({ className, size, tone = "neutral", label = "Loading\u2026", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: "status",
+        "aria-label": label,
+        className: cn("inline-flex items-center justify-center", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(spinnerVariants({ size, tone })),
+            "aria-hidden": "true"
+          }
+        )
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+export {
+  spinnerVariants,
+  Spinner
+};

package/dist/chunk-QURKXXNS.js

@@ -0,0 +1,46 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/ButtonGroup/ButtonGroup.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var ButtonGroup = React.forwardRef(
+  ({ className, orientation = "horizontal", attached = false, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-orientation": orientation,
+        "data-attached": attached || void 0,
+        className: cn(
+          "flex",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          attached ? [
+            "gap-0",
+            "[&>*:not(:first-child):not(:last-child)]:rounded-none",
+            orientation === "horizontal" ? [
+              "[&>*:first-child]:rounded-r-none",
+              "[&>*:last-child]:rounded-l-none",
+              "[&>*:not(:first-child)]:border-l-0"
+            ] : [
+              "[&>*:first-child]:rounded-b-none",
+              "[&>*:last-child]:rounded-t-none",
+              "[&>*:not(:first-child)]:border-t-0"
+            ]
+          ] : "gap-2",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+export {
+  ButtonGroup
+};

package/dist/chunk-ROZVVWPV.js

@@ -0,0 +1,8 @@
+'use client';
+
+// src/utils/glass.ts
+var glassSurfaceClass = "bg-[var(--glass-bg)] border-[var(--glass-border)] backdrop-blur-[var(--glass-blur)] [box-shadow:inset_0_1px_0_0_var(--glass-highlight),var(--glass-shadow)]";
+
+export {
+  glassSurfaceClass
+};