@nexub/react 1.0.0 → 1.1.0

package/dist/chunk-FS4XKWFA.js

@@ -0,0 +1,308 @@
+'use client';
+
+// src/components/Motion/Fade.tsx
+import * as React2 from "react";
+
+// src/components/Motion/useMotion.ts
+import * as React from "react";
+var DURATION_MS = {
+  instant: 0,
+  fast: 150,
+  normal: 200,
+  slow: 300,
+  slower: 500
+};
+var FALLBACK_MARGIN_MS = 50;
+function useMotion({
+  visible,
+  duration = "normal",
+  easing = "out",
+  unmountOnExit = false
+}) {
+  const [phase, setPhase] = React.useState(
+    visible ? "entered" : "exited"
+  );
+  const rafRef = React.useRef(null);
+  const isMounted = React.useRef(true);
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+  const prevVisible = React.useRef(visible);
+  React.useEffect(() => {
+    if (prevVisible.current === visible) return;
+    prevVisible.current = visible;
+    if (visible) {
+      setPhase("entering");
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = requestAnimationFrame(() => {
+          if (isMounted.current) setPhase("entered");
+        });
+      });
+    } else {
+      setPhase("exiting");
+    }
+  }, [visible]);
+  React.useEffect(() => {
+    if (phase !== "exiting") return;
+    const t = setTimeout(() => setPhase("exited"), DURATION_MS[duration] + FALLBACK_MARGIN_MS);
+    return () => clearTimeout(t);
+  }, [phase, duration]);
+  const handleTransitionEnd = React.useCallback((e) => {
+    if (!isMounted.current) return;
+    if (e && e.target !== e.currentTarget) return;
+    setPhase((prev) => prev === "exiting" ? "exited" : prev);
+  }, []);
+  const mounted = unmountOnExit ? phase !== "exited" : true;
+  const transitionStyle = {
+    transitionDuration: `var(--duration-${duration})`,
+    transitionTimingFunction: `var(--ease-${easing})`,
+    transitionProperty: "opacity, transform"
+  };
+  return { phase, mounted, transitionStyle, handleTransitionEnd };
+}
+
+// src/components/Motion/Fade.tsx
+import { jsx } from "react/jsx-runtime";
+var Fade = React2.forwardRef(function Fade2({
+  in: visible,
+  duration = "normal",
+  easing = "out",
+  unmountOnExit = false,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const { phase, mounted, transitionStyle, handleTransitionEnd } = useMotion({
+    visible,
+    duration,
+    easing,
+    unmountOnExit
+  });
+  if (!mounted) return null;
+  const opacity = phase === "entered" ? 1 : 0;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      onTransitionEnd: handleTransitionEnd,
+      style: {
+        opacity,
+        willChange: "opacity",
+        ...transitionStyle,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+Fade.displayName = "Fade";
+
+// src/components/Motion/Slide.tsx
+import * as React3 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var directionTransform = {
+  up: { from: "translateY(12px)", to: "translateY(0)" },
+  down: { from: "translateY(-12px)", to: "translateY(0)" },
+  left: { from: "translateX(12px)", to: "translateX(0)" },
+  right: { from: "translateX(-12px)", to: "translateX(0)" }
+};
+var Slide = React3.forwardRef(function Slide2({
+  in: visible,
+  duration = "normal",
+  easing = "out",
+  unmountOnExit = false,
+  direction = "up",
+  distance,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const { phase, mounted, transitionStyle, handleTransitionEnd } = useMotion({
+    visible,
+    duration,
+    easing,
+    unmountOnExit
+  });
+  if (!mounted) return null;
+  const isEntered = phase === "entered";
+  const dt = directionTransform[direction];
+  let fromTransform = dt.from;
+  if (distance) {
+    if (direction === "up") fromTransform = `translateY(${distance})`;
+    if (direction === "down") fromTransform = `translateY(-${distance})`;
+    if (direction === "left") fromTransform = `translateX(${distance})`;
+    if (direction === "right") fromTransform = `translateX(-${distance})`;
+  }
+  return /* @__PURE__ */ jsx2(
+    Tag,
+    {
+      ref,
+      onTransitionEnd: handleTransitionEnd,
+      style: {
+        opacity: isEntered ? 1 : 0,
+        transform: isEntered ? dt.to : fromTransform,
+        willChange: "opacity, transform",
+        ...transitionStyle,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+Slide.displayName = "Slide";
+
+// src/components/Motion/Scale.tsx
+import * as React4 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Scale = React4.forwardRef(function Scale2({
+  in: visible,
+  duration = "fast",
+  easing = "out-expo",
+  unmountOnExit = false,
+  initialScale = 0.95,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const { phase, mounted, transitionStyle, handleTransitionEnd } = useMotion({
+    visible,
+    duration,
+    easing,
+    unmountOnExit
+  });
+  if (!mounted) return null;
+  const isEntered = phase === "entered";
+  return /* @__PURE__ */ jsx3(
+    Tag,
+    {
+      ref,
+      onTransitionEnd: handleTransitionEnd,
+      style: {
+        opacity: isEntered ? 1 : 0,
+        transform: isEntered ? "scale(1)" : `scale(${initialScale})`,
+        transformOrigin: "top center",
+        willChange: "opacity, transform",
+        ...transitionStyle,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+Scale.displayName = "Scale";
+
+// src/components/Motion/Collapse.tsx
+import * as React5 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Collapse = React5.forwardRef(function Collapse2({
+  in: visible,
+  duration = "normal",
+  easing = "out",
+  unmountOnExit = false,
+  collapsedHeight = 0,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const innerRef = React5.useRef(null);
+  const [height, setHeight] = React5.useState(visible ? "auto" : 0);
+  const [overflow, setOverflow] = React5.useState(
+    visible ? "visible" : "hidden"
+  );
+  const [mounted, setMounted] = React5.useState(unmountOnExit ? visible : true);
+  const prevVisible = React5.useRef(visible);
+  React5.useEffect(() => {
+    const changed = prevVisible.current !== visible;
+    prevVisible.current = visible;
+    if (!changed) return;
+    let raf1 = 0;
+    let raf2 = 0;
+    if (visible) {
+      setMounted(true);
+      raf1 = requestAnimationFrame(() => {
+        const el = innerRef.current;
+        if (el) {
+          setHeight(el.scrollHeight);
+          setOverflow("hidden");
+        }
+      });
+    } else {
+      const el = innerRef.current;
+      if (el) {
+        setHeight(el.scrollHeight);
+        setOverflow("hidden");
+        raf1 = requestAnimationFrame(() => {
+          raf2 = requestAnimationFrame(() => {
+            setHeight(typeof collapsedHeight === "number" ? collapsedHeight : 0);
+          });
+        });
+      }
+    }
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [visible, collapsedHeight]);
+  const finish = React5.useCallback(() => {
+    if (visible) {
+      setHeight("auto");
+      setOverflow("visible");
+    } else if (unmountOnExit) {
+      setMounted(false);
+    }
+  }, [visible, unmountOnExit]);
+  const handleTransitionEnd = React5.useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget || e.propertyName !== "max-height") return;
+      finish();
+    },
+    [finish]
+  );
+  const firstRender = React5.useRef(true);
+  React5.useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    const t = setTimeout(finish, DURATION_MS[duration] + 100);
+    return () => clearTimeout(t);
+  }, [visible, duration, finish]);
+  if (!mounted) return null;
+  const maxHeight = height === "auto" ? "none" : `${height}px`;
+  return /* @__PURE__ */ jsx4(
+    Tag,
+    {
+      ref,
+      style: {
+        maxHeight,
+        overflow,
+        transitionProperty: "max-height",
+        transitionDuration: `var(--duration-${duration})`,
+        transitionTimingFunction: `var(--ease-${easing})`,
+        ...style
+      },
+      onTransitionEnd: handleTransitionEnd,
+      ...rest,
+      children: /* @__PURE__ */ jsx4("div", { ref: innerRef, children })
+    }
+  );
+});
+Collapse.displayName = "Collapse";
+
+export {
+  Fade,
+  Slide,
+  Scale,
+  Collapse
+};

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