@nexub/react 1.0.0 → 1.2.0

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

@@ -0,0 +1,106 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/CommandPalette/CommandPalette.tsx
+import * as React from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { Command } from "cmdk";
+import { Search } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root2 = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(RadixDialog.Root, { ...props, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
+  /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: "fixed inset-0 z-[var(--z-modal)] bg-[var(--color-overlay)] backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0" }),
+  /* @__PURE__ */ jsx(
+    RadixDialog.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-1/2 top-[20%] z-[var(--z-modal)] w-full max-w-xl -translate-x-1/2",
+        "overflow-hidden rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-2xl",
+        "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(Command, { className: "flex h-full w-full flex-col overflow-hidden text-[var(--color-text-primary)]", children })
+    }
+  )
+] }) }));
+Root2.displayName = "CommandPalette.Root";
+var Input = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-[var(--color-border-default)] px-3", children: [
+  /* @__PURE__ */ jsx(Search, { size: "sm", className: "mr-2 shrink-0 opacity-50", "aria-hidden": "true" }),
+  /* @__PURE__ */ jsx(
+    Command.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-12 w-full bg-transparent py-3 text-sm outline-none placeholder:text-[var(--color-text-muted)] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+Input.displayName = "CommandPalette.Input";
+var List = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.List,
+  {
+    ref,
+    className: cn("max-h-[400px] overflow-y-auto overflow-x-hidden p-2", className),
+    ...props
+  }
+));
+List.displayName = "CommandPalette.List";
+var Empty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Empty,
+  {
+    ref,
+    className: cn(
+      "py-8 text-center text-sm text-[var(--color-text-muted)]",
+      className
+    ),
+    ...props
+  }
+));
+Empty.displayName = "CommandPalette.Empty";
+var Group = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-[var(--color-text-primary)]",
+      "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[var(--color-text-muted)]",
+      className
+    ),
+    ...props
+  }
+));
+Group.displayName = "CommandPalette.Group";
+var Item = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-md px-3 py-2 text-sm outline-none",
+      "aria-selected:bg-[var(--color-bg-subtle)] aria-selected:text-[var(--color-text-primary)]",
+      "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+Item.displayName = "CommandPalette.Item";
+var Separator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+    ...props
+  }
+));
+Separator.displayName = "CommandPalette.Separator";
+var CommandPalette = { Root: Root2, Input, List, Empty, Group, Item, Separator };
+
+export {
+  CommandPalette
+};

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

@@ -0,0 +1,122 @@
+'use client';
+import {
+  glassSurfaceClass
+} from "./chunk-ROZVVWPV.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Dialog/Dialog.tsx
+import * as React from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { jsx } from "react/jsx-runtime";
+var Root2 = RadixDialog.Root;
+var Trigger2 = RadixDialog.Trigger;
+var Portal2 = RadixDialog.Portal;
+var Close2 = RadixDialog.Close;
+var Overlay2 = React.forwardRef(
+  function DialogOverlay({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Overlay,
+      {
+        ref,
+        className: cn(
+          "fixed inset-0 z-[var(--z-modal)] bg-[var(--color-overlay)] backdrop-blur-sm",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Overlay2.displayName = "Dialog.Overlay";
+var Content2 = React.forwardRef(
+  function DialogContent({ className, size = "md", surface = "solid", children, ...props }, ref) {
+    const sizeMap = {
+      sm: "max-w-sm",
+      md: "max-w-lg",
+      lg: "max-w-2xl",
+      xl: "max-w-4xl",
+      full: "max-w-[calc(100vw-2rem)]"
+    };
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Content,
+      {
+        ref,
+        className: cn(
+          "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2",
+          "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-xl",
+          "max-h-[90vh] overflow-y-auto p-6 focus:outline-none",
+          "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",
+          "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+          sizeMap[size],
+          surface === "glass" && glassSurfaceClass,
+          className
+        ),
+        "data-material": surface === "glass" ? "glass" : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Content2.displayName = "Dialog.Content";
+var Title2 = React.forwardRef(
+  function DialogTitle({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Title,
+      {
+        ref,
+        className: cn("text-lg font-semibold text-[var(--color-text-primary)]", className),
+        ...props
+      }
+    );
+  }
+);
+Title2.displayName = "Dialog.Title";
+var Description2 = React.forwardRef(
+  function DialogDescription({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Description,
+      {
+        ref,
+        className: cn("mt-1 text-sm text-[var(--color-text-muted)]", className),
+        ...props
+      }
+    );
+  }
+);
+Description2.displayName = "Dialog.Description";
+var Header = React.forwardRef(
+  function DialogHeader({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4 flex flex-col gap-1", className), ...props });
+  }
+);
+Header.displayName = "Dialog.Header";
+var Footer = React.forwardRef(
+  function DialogFooter({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
+  }
+);
+Footer.displayName = "Dialog.Footer";
+var Dialog = {
+  Root: Root2,
+  Trigger: Trigger2,
+  Portal: Portal2,
+  Overlay: Overlay2,
+  Content: Content2,
+  Close: Close2,
+  Title: Title2,
+  Description: Description2,
+  Header,
+  Footer
+};
+
+export {
+  Dialog
+};

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

package/dist/chunk-SZKUSLHI.js

@@ -0,0 +1,176 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+import * as React from "react";
+import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root2 = RadixDropdownMenu.Root;
+var Trigger2 = RadixDropdownMenu.Trigger;
+var Portal2 = RadixDropdownMenu.Portal;
+var Group2 = RadixDropdownMenu.Group;
+var RadioGroup2 = RadixDropdownMenu.RadioGroup;
+var Sub2 = RadixDropdownMenu.Sub;
+var Content2 = React.forwardRef(
+  function DropdownMenuContent({ className, sideOffset = 4, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDropdownMenu.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(
+          "z-[var(--z-popover)] min-w-48 rounded-lg border border-[var(--color-border-default)]",
+          "bg-[var(--color-bg-default)] p-1 shadow-md outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+          "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+          "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Content2.displayName = "DropdownMenu.Content";
+var itemBaseClasses = cn(
+  "relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none",
+  "transition-colors hover:bg-[var(--color-bg-subtle)] focus:bg-[var(--color-bg-subtle)]",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+);
+var Item2 = React.forwardRef(
+  function DropdownMenuItem({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDropdownMenu.Item,
+      {
+        ref,
+        className: cn(itemBaseClasses, className),
+        ...props
+      }
+    );
+  }
+);
+Item2.displayName = "DropdownMenu.Item";
+var Label2 = React.forwardRef(
+  function DropdownMenuLabel({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDropdownMenu.Label,
+      {
+        ref,
+        className: cn(
+          "px-2 py-1 text-xs font-semibold text-[var(--color-text-muted)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Label2.displayName = "DropdownMenu.Label";
+var Separator2 = React.forwardRef(
+  function DropdownMenuSeparator({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDropdownMenu.Separator,
+      {
+        ref,
+        className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+        ...props
+      }
+    );
+  }
+);
+Separator2.displayName = "DropdownMenu.Separator";
+var CheckboxItem2 = React.forwardRef(function DropdownMenuCheckboxItem({ className, children, checked, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixDropdownMenu.CheckboxItem,
+    {
+      ref,
+      className: cn(itemBaseClasses, "pl-8", className),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixDropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    }
+  );
+});
+CheckboxItem2.displayName = "DropdownMenu.CheckboxItem";
+var RadioItem2 = React.forwardRef(function DropdownMenuRadioItem({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixDropdownMenu.RadioItem,
+    {
+      ref,
+      className: cn(itemBaseClasses, "pl-8", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixDropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", { className: "h-2 w-2 fill-current", viewBox: "0 0 8 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "4" }) }) }) }),
+        children
+      ]
+    }
+  );
+});
+RadioItem2.displayName = "DropdownMenu.RadioItem";
+var SubTrigger2 = React.forwardRef(function DropdownMenuSubTrigger({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixDropdownMenu.SubTrigger,
+    {
+      ref,
+      className: cn(
+        itemBaseClasses,
+        "data-[state=open]:bg-[var(--color-bg-subtle)]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      ]
+    }
+  );
+});
+SubTrigger2.displayName = "DropdownMenu.SubTrigger";
+var SubContent2 = React.forwardRef(function DropdownMenuSubContent({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadixDropdownMenu.SubContent,
+    {
+      ref,
+      className: cn(
+        "z-[var(--z-popover)] min-w-48 rounded-lg border border-[var(--color-border-default)]",
+        "bg-[var(--color-bg-default)] p-1 shadow-md outline-none",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+        "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  );
+});
+SubContent2.displayName = "DropdownMenu.SubContent";
+var DropdownMenu = {
+  Root: Root2,
+  Trigger: Trigger2,
+  Portal: Portal2,
+  Content: Content2,
+  Item: Item2,
+  Group: Group2,
+  Label: Label2,
+  Separator: Separator2,
+  CheckboxItem: CheckboxItem2,
+  RadioGroup: RadioGroup2,
+  RadioItem: RadioItem2,
+  Sub: Sub2,
+  SubTrigger: SubTrigger2,
+  SubContent: SubContent2
+};
+
+export {
+  DropdownMenu
+};

package/dist/chunk-T4IVMVMQ.js

@@ -0,0 +1,32 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/HelperText/HelperText.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var HelperText = React.forwardRef(
+  ({ className, tone, style, children, ...props }, ref) => {
+    const toneStyle = tone ? { color: `var(--color-text-${tone})` } : {};
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        "data-tone": tone,
+        style: { ...toneStyle, ...style },
+        className: cn(
+          "text-sm text-[var(--color-text-muted)] leading-snug",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+HelperText.displayName = "HelperText";
+
+export {
+  HelperText
+};