@nexub/react 1.0.0 → 1.2.0

package/dist/chunk-FUJOSPNQ.js

@@ -0,0 +1,38 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/GradientDivider/GradientDivider.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var BRAND_GRADIENT_H = "linear-gradient(90deg, #4099f1 0%, #1cce66 40%, #f59e0b 70%, #1b3b6f 100%)";
+var BRAND_GRADIENT_V = "linear-gradient(180deg, #4099f1 0%, #1cce66 40%, #f59e0b 70%, #1b3b6f 100%)";
+var GradientDivider = React.forwardRef(
+  ({ className, height = 3, orientation = "horizontal", style, ...props }, ref) => {
+    const isHorizontal = orientation === "horizontal";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation,
+        className: cn(
+          isHorizontal ? "w-full" : "h-full",
+          className
+        ),
+        style: {
+          background: isHorizontal ? BRAND_GRADIENT_H : BRAND_GRADIENT_V,
+          ...isHorizontal ? { height: `${height}px` } : { width: `${height}px` },
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+GradientDivider.displayName = "GradientDivider";
+
+export {
+  GradientDivider
+};

package/dist/chunk-GTQIA62H.js

@@ -0,0 +1,60 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/IconButton/IconButton.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 iconButtonVariants = cva(
+  [
+    "inline-flex items-center justify-center rounded-md transition-colors flex-shrink-0",
+    "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:opacity-50 disabled:pointer-events-none",
+    "select-none"
+  ],
+  {
+    variants: {
+      variant: {
+        ghost: "bg-transparent text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]",
+        solid: "bg-[var(--color-fill-primary)] text-white hover:bg-[var(--color-fill-primary-hover)]",
+        outline: "bg-transparent border border-[var(--color-border-default)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]",
+        subtle: "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-muted)]"
+      },
+      size: {
+        xs: "h-7 w-7 text-xs",
+        sm: "h-8 w-8 text-sm",
+        md: "h-9 w-9 text-sm",
+        lg: "h-10 w-10 text-base",
+        xl: "h-12 w-12 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "ghost",
+      size: "md"
+    }
+  }
+);
+var IconButton = React.forwardRef(
+  ({ className, variant, size, label, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "aria-label": label,
+        className: cn(iconButtonVariants({ variant, size }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+export {
+  iconButtonVariants,
+  IconButton
+};

package/dist/chunk-H4MXRAXP.js

@@ -0,0 +1,37 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Collapsible/Collapsible.tsx
+import * as React from "react";
+import * as RadixCollapsible from "@radix-ui/react-collapsible";
+import { jsx } from "react/jsx-runtime";
+var Root2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixCollapsible.Root, { ref, className: cn("", className), ...props })
+);
+Root2.displayName = "Collapsible.Root";
+var Trigger2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixCollapsible.Trigger, { ref, className: cn("", className), ...props })
+);
+Trigger2.displayName = "Collapsible.Trigger";
+var Content2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixCollapsible.Content,
+    {
+      ref,
+      className: cn(
+        "overflow-hidden",
+        "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Content2.displayName = "Collapsible.Content";
+var Collapsible = { Root: Root2, Trigger: Trigger2, Content: Content2 };
+
+export {
+  Collapsible
+};

package/dist/chunk-HW3I7I3R.js

@@ -0,0 +1,29 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/TextGradient/TextGradient.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var TextGradient = React.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "bg-[var(--gradient-brand-horizontal)] bg-clip-text text-transparent",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+TextGradient.displayName = "TextGradient";
+
+export {
+  TextGradient
+};

package/dist/chunk-HY3JWSG4.js

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

package/dist/chunk-I5Z3A7N3.js

@@ -0,0 +1,40 @@
+'use client';
+import {
+  Kbd
+} from "./chunk-PER3O4FD.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/KeyboardShortcut/KeyboardShortcut.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var KeyboardShortcut = React.forwardRef(
+  ({ keys, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn("inline-flex items-center gap-1", className),
+        "aria-label": keys.join("+"),
+        ...rest,
+        children: keys.map((key, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-[var(--color-text-muted)] text-xs select-none",
+              "aria-hidden": "true",
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ jsx(Kbd, { children: key })
+        ] }, `${key}-${index}`))
+      }
+    );
+  }
+);
+KeyboardShortcut.displayName = "KeyboardShortcut";
+
+export {
+  KeyboardShortcut
+};

package/dist/chunk-IBCYG6HR.js

@@ -0,0 +1,55 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Tag/Tag.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var tagVariants = cva(
+  "inline-flex items-center rounded font-medium select-none whitespace-nowrap",
+  {
+    variants: {
+      size: {
+        sm: "px-1.5 py-0.5 text-xs",
+        md: "px-2 py-0.5 text-xs",
+        lg: "px-2.5 py-1 text-sm"
+      },
+      tone: {
+        neutral: "bg-[var(--color-neutral-100)] text-[var(--color-neutral-700)]",
+        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: {
+      size: "md",
+      tone: "neutral"
+    }
+  }
+);
+var Tag = React.forwardRef(
+  ({ className, size, tone = "neutral", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(tagVariants({ size, tone }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Tag.displayName = "Tag";
+
+export {
+  tagVariants,
+  Tag
+};

package/dist/chunk-IHW2L532.js

@@ -0,0 +1,175 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Toast/Toast.tsx
+import * as React from "react";
+import * as RadixToast from "@radix-ui/react-toast";
+import { jsx } from "react/jsx-runtime";
+var Provider2 = RadixToast.Provider;
+var Viewport2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Viewport,
+    {
+      ref,
+      className: cn(
+        "fixed top-0 right-0 z-[var(--z-toast,2000)] flex max-h-screen w-full flex-col-reverse p-4 sm:max-w-sm gap-2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Viewport2.displayName = "Toast.Viewport";
+var Root2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Root,
+    {
+      ref,
+      className: cn(
+        "group pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-4 shadow-md transition-all",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=closed]:slide-out-to-right-full",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root2.displayName = "Toast.Root";
+var Title2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Title, { ref, className: cn("text-sm font-semibold", className), ...props })
+);
+Title2.displayName = "Toast.Title";
+var Description2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Description,
+    {
+      ref,
+      className: cn("text-sm text-[var(--color-text-muted)]", className),
+      ...props
+    }
+  )
+);
+Description2.displayName = "Toast.Description";
+var Action2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Action,
+    {
+      ref,
+      className: cn(
+        "inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md border px-3 text-xs font-medium transition-colors hover:bg-[var(--color-bg-subtle)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Action2.displayName = "Toast.Action";
+var Close2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Close, { ref, className: cn("rounded p-1", className), ...props })
+);
+Close2.displayName = "Toast.Close";
+var Toast = { Provider: Provider2, Viewport: Viewport2, Root: Root2, Title: Title2, Description: Description2, Action: Action2, Close: Close2 };
+
+// src/components/Toast/Toaster.tsx
+import "react";
+import * as RadixToast2 from "@radix-ui/react-toast";
+import { X } from "@nexub/icons";
+
+// src/components/Toast/useToast.ts
+import { useState, useEffect } from "react";
+var g = typeof window !== "undefined" ? (() => {
+  const _g = globalThis;
+  _g.__nexub_toast_items ??= [];
+  _g.__nexub_toast_listeners ??= /* @__PURE__ */ new Set();
+  _g.__nexub_toast_counter ??= 0;
+  return _g;
+})() : { __nexub_toast_items: [], __nexub_toast_listeners: /* @__PURE__ */ new Set(), __nexub_toast_counter: 0 };
+function notify() {
+  g.__nexub_toast_listeners.forEach((l) => l([...g.__nexub_toast_items]));
+}
+function add(item) {
+  const id = String(++g.__nexub_toast_counter);
+  g.__nexub_toast_items = [...g.__nexub_toast_items, { ...item, id }];
+  notify();
+  return id;
+}
+function useToastStore() {
+  const [state, setState] = useState([...g.__nexub_toast_items]);
+  useEffect(() => {
+    g.__nexub_toast_listeners.add(setState);
+    return () => {
+      g.__nexub_toast_listeners.delete(setState);
+    };
+  }, []);
+  return state;
+}
+function dismiss(id) {
+  g.__nexub_toast_items = id ? g.__nexub_toast_items.filter((i) => i.id !== id) : [];
+  notify();
+}
+var toast = {
+  success: (title, opts) => add({ title, tone: "success", ...opts }),
+  error: (title, opts) => add({ title, tone: "error", ...opts }),
+  info: (title, opts) => add({ title, tone: "info", ...opts }),
+  warning: (title, opts) => add({ title, tone: "warning", ...opts }),
+  custom: (title, opts) => add({ title, tone: "neutral", ...opts }),
+  dismiss
+};
+
+// src/components/Toast/Toaster.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var toneMap = {
+  success: "border-l-4 border-[var(--color-semantic-success-default)]",
+  error: "border-l-4 border-[var(--color-semantic-error-default)]",
+  warning: "border-l-4 border-[var(--color-semantic-warning-default)]",
+  info: "border-l-4 border-[var(--color-semantic-info-default)]",
+  neutral: ""
+};
+function Toaster() {
+  const toasts = useToastStore();
+  return /* @__PURE__ */ jsxs(RadixToast2.Provider, { swipeDirection: "right", children: [
+    toasts.map((t) => /* @__PURE__ */ jsxs(
+      RadixToast2.Root,
+      {
+        className: cn(
+          "group pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-4 shadow-md transition-all",
+          "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=closed]:slide-out-to-right-full",
+          toneMap[t.tone ?? "neutral"]
+        ),
+        duration: t.duration ?? 5e3,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+            /* @__PURE__ */ jsx2(RadixToast2.Title, { className: "text-sm font-semibold", children: t.title }),
+            t.description && /* @__PURE__ */ jsx2(RadixToast2.Description, { className: "text-sm text-[var(--color-text-muted)]", children: t.description })
+          ] }),
+          t.action && /* @__PURE__ */ jsx2(
+            RadixToast2.Action,
+            {
+              altText: t.action.label,
+              onClick: t.action.onClick,
+              className: "shrink-0 rounded-md border border-[var(--color-border-default)] px-3 py-1.5 text-sm font-medium hover:bg-[var(--color-bg-subtle)] focus:outline-none focus:ring-2 focus:ring-[var(--color-ring-default)]",
+              children: t.action.label
+            }
+          ),
+          /* @__PURE__ */ jsxs(RadixToast2.Close, { className: "rounded-md p-1 transition-opacity [@media(hover:hover)]:opacity-0 group-hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--color-ring-default)]", children: [
+            /* @__PURE__ */ jsx2(X, { size: "sm", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      },
+      t.id
+    )),
+    /* @__PURE__ */ jsx2(RadixToast2.Viewport, { className: "fixed top-0 right-0 z-[var(--z-toast,2000)] flex max-h-screen w-full flex-col-reverse p-4 sm:max-w-sm gap-2" })
+  ] });
+}
+Toaster.displayName = "Toaster";
+
+export {
+  Toast,
+  useToastStore,
+  toast,
+  Toaster
+};

package/dist/chunk-IU76LV3W.js

@@ -0,0 +1,101 @@
+'use client';
+import {
+  Label
+} from "./chunk-JKTZMWWC.js";
+import {
+  FormError
+} from "./chunk-OUBBOOZE.js";
+import {
+  HelperText
+} from "./chunk-T4IVMVMQ.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/FormField/FormField.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var FormFieldContext = React.createContext(null);
+function useFormField() {
+  const ctx = React.useContext(FormFieldContext);
+  if (!ctx) {
+    throw new Error("FormField parts must be used inside <FormField.Root>");
+  }
+  return ctx;
+}
+var Root = React.forwardRef(function Root2({ id: idProp, name, invalid, required, disabled, className, children, ...props }, ref) {
+  const generatedId = React.useId();
+  const id = idProp ?? generatedId;
+  const value = React.useMemo(
+    () => ({
+      id,
+      name,
+      invalid,
+      required,
+      disabled,
+      descriptionId: `${id}-description`,
+      errorId: `${id}-error`
+    }),
+    [id, name, invalid, required, disabled]
+  );
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props, children }) });
+});
+Root.displayName = "FormField.Root";
+function FieldLabel({
+  className,
+  children,
+  ...props
+}) {
+  const { id, required, disabled } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      htmlFor: id,
+      required,
+      disabled,
+      className,
+      ...props,
+      children
+    }
+  );
+}
+FieldLabel.displayName = "FormField.Label";
+function Control({ children }) {
+  const { id, name, invalid, required, disabled, descriptionId, errorId } = useFormField();
+  const describedBy = [descriptionId, invalid ? errorId : null].filter(Boolean).join(" ") || void 0;
+  return React.cloneElement(children, {
+    id,
+    name: children.props["name"] ?? name,
+    invalid: children.props["invalid"] ?? invalid,
+    required: children.props["required"] ?? required,
+    disabled: children.props["disabled"] ?? disabled,
+    "aria-describedby": describedBy,
+    "aria-invalid": invalid ?? void 0,
+    "aria-required": required ?? void 0
+  });
+}
+Control.displayName = "FormField.Control";
+function Description({
+  className,
+  children,
+  ...props
+}) {
+  const { descriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(HelperText, { id: descriptionId, className, ...props, children });
+}
+Description.displayName = "FormField.Description";
+function FieldError({
+  className,
+  children,
+  ...props
+}) {
+  const { errorId, invalid } = useFormField();
+  if (!invalid) return null;
+  return /* @__PURE__ */ jsx(FormError, { id: errorId, className, ...props, children });
+}
+FieldError.displayName = "FormField.Error";
+var FormField = { Root, Label: FieldLabel, Control, Description, Error: FieldError };
+
+export {
+  FormField
+};

package/dist/chunk-IZ6ZPEZ2.js

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

package/dist/chunk-JCUVWDUC.js

@@ -0,0 +1,57 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+import * as React from "react";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+import { jsx } from "react/jsx-runtime";
+var sizeMap = {
+  sm: "h-7 px-2.5 text-xs",
+  md: "h-8 px-3 text-sm",
+  lg: "h-9 px-4 text-sm"
+};
+var SegmentedControlContext = React.createContext({ size: "md" });
+var Root2 = React.forwardRef(
+  ({ className, size = "md", children, ...props }, ref) => /* @__PURE__ */ jsx(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(
+    RadixToggleGroup.Root,
+    {
+      ref,
+      type: "single",
+      className: cn(
+        "inline-flex items-center rounded-lg bg-[var(--color-bg-subtle)] p-0.5 gap-0.5",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) })
+);
+Root2.displayName = "SegmentedControl.Root";
+var Item2 = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size } = React.useContext(SegmentedControlContext);
+    return /* @__PURE__ */ jsx(
+      RadixToggleGroup.Item,
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center justify-center rounded-md font-medium transition-all",
+          "text-[var(--color-text-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+          "data-[state=on]:bg-[var(--color-bg-default)] data-[state=on]:text-[var(--color-text-primary)] data-[state=on]:shadow-sm",
+          "disabled:pointer-events-none disabled:opacity-50",
+          sizeMap[size],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Item2.displayName = "SegmentedControl.Item";
+var SegmentedControl = { Root: Root2, Item: Item2 };
+
+export {
+  SegmentedControl
+};

package/dist/chunk-JKTZMWWC.js

@@ -0,0 +1,63 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Label/Label.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var labelVariants = cva(
+  ["inline-flex items-center gap-1 font-medium leading-none select-none"],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Label = React.forwardRef(
+  ({ className, size, required, disabled, tone, style, children, ...props }, ref) => {
+    const toneStyle = tone ? { color: `var(--color-text-${tone})` } : {};
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        ref,
+        "data-tone": tone,
+        style: { ...toneStyle, ...style },
+        className: cn(
+          labelVariants({ size, disabled }),
+          "text-[var(--color-text-primary)]",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "text-[var(--color-danger-500)] leading-none",
+              children: "*"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+
+export {
+  labelVariants,
+  Label
+};