@jameskyeong/uix 0.1.6

package/dist/index.js

@@ -0,0 +1,868 @@
+import { jsx as s, jsxs as v, Fragment as M } from "react/jsx-runtime";
+import { motion as f, useInView as D, AnimatePresence as k } from "motion/react";
+import { forwardRef as c, useState as y, useEffect as w, useRef as S, createContext as T, useLayoutEffect as R, useContext as C, useId as V } from "react";
+import { clsx as h } from "clsx";
+import { twMerge as A } from "tailwind-merge";
+import { Check as $, Copy as j, ChevronUp as G } from "lucide-react";
+import { codeToHtml as X } from "shiki";
+import { createPortal as O } from "react-dom";
+function u(...e) {
+  return A(h(e));
+}
+const L = c(
+  ({ className: e, variant: t = "default", size: r = "sm", children: i, ...n }, o) => {
+    const a = t === "default" ? "uix-convex-colored-sm" : "uix-convex-sm", l = {
+      default: "bg-uix-prime-300 backdrop-blur-sm text-uix-white-100",
+      secondary: "bg-uix-surface-300/80 backdrop-blur-sm text-uix-text-100",
+      outline: "border border-uix-border-200 bg-uix-surface-100/50 backdrop-blur-sm text-uix-text-300"
+    }, x = {
+      sm: "px-2 py-0.5 text-xs",
+      md: "px-2.5 py-1 text-sm"
+    }, { onDrag: g, onDragStart: d, onDragEnd: b, ...m } = n;
+    return /* @__PURE__ */ s(
+      f.span,
+      {
+        ref: o,
+        className: u(
+          "inline-flex items-center rounded-xl font-medium",
+          a,
+          l[t],
+          x[r],
+          e
+        ),
+        whileHover: { scale: 1.05 },
+        whileTap: { scale: 0.97 },
+        transition: {
+          type: "tween",
+          duration: 0.1,
+          ease: "linear"
+        },
+        ...m,
+        children: i
+      }
+    );
+  }
+);
+L.displayName = "Badge";
+const F = c(
+  ({ className: e, variant: t, color: r = "prime", size: i = "md", children: n, ...o }, a) => {
+    const x = `inline-flex items-center justify-center rounded-full font-semibold transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-uix-prime-300 disabled:pointer-events-none disabled:opacity-50 cursor-pointer backdrop-blur-sm ${t === "filled" ? "uix-convex-colored-sm" : "uix-convex-sm"}`, g = "bg-uix-surface-200/70 text-uix-text-100 hover:bg-uix-surface-300/80", d = {
+      prime: "bg-uix-prime-300 text-uix-white-100 hover:bg-uix-prime-400",
+      sub1: "bg-uix-sub1-300 text-uix-white-100 hover:bg-uix-sub1-400",
+      sub2: "bg-uix-sub2-300 text-uix-black-300 hover:bg-uix-sub2-400"
+    }, b = {
+      prime: "border border-uix-prime-300/50 text-uix-prime-300 bg-uix-surface-100/20 hover:bg-uix-prime-300 hover:text-uix-white-100 hover:border-transparent",
+      sub1: "border border-uix-sub1-300/50 text-uix-sub1-300 bg-uix-surface-100/20 hover:bg-uix-sub1-300 hover:text-uix-white-100 hover:border-transparent",
+      sub2: "border border-uix-sub2-300/50 text-uix-sub2-400 bg-uix-surface-100/20 hover:bg-uix-sub2-300 hover:text-uix-black-300 hover:border-transparent"
+    }, m = {
+      prime: "bg-transparent text-uix-prime-300 hover:bg-uix-prime-100/15",
+      sub1: "bg-transparent text-uix-sub1-300 hover:bg-uix-sub1-100/15",
+      sub2: "bg-transparent text-uix-sub2-400 hover:bg-uix-sub2-100/15"
+    }, p = {
+      filled: d[r],
+      outline: b[r],
+      ghost: m[r]
+    }, N = {
+      sm: "px-4 py-2 text-sm",
+      md: "px-6 py-3 text-base",
+      lg: "px-8 py-4 text-lg"
+    }, _ = t ? p[t] : g;
+    return /* @__PURE__ */ s(
+      f.button,
+      {
+        ref: a,
+        className: u(x, _, N[i], e),
+        whileHover: {
+          scale: 1.03,
+          y: -1
+        },
+        whileTap: {
+          scale: 0.96
+        },
+        transition: {
+          duration: 0.06,
+          ease: [0, 0, 1, 1]
+        },
+        ...o,
+        children: n
+      }
+    );
+  }
+);
+F.displayName = "Button";
+const U = c(
+  ({ className: e, children: t, hover: r = !0, accentColor: i = "none", accentPosition: n = "none", ...o }, a) => {
+    const l = {
+      prime: "bg-uix-prime-300",
+      sub1: "bg-uix-sub1-300",
+      sub2: "bg-uix-sub2-300",
+      none: ""
+    };
+    return /* @__PURE__ */ v(
+      f.div,
+      {
+        ref: a,
+        className: u(
+          "relative bg-uix-surface-100/80 backdrop-blur-xl backdrop-saturate-150 uix-glass-border rounded-[2rem] overflow-hidden uix-convex",
+          e
+        ),
+        initial: !1,
+        whileHover: r ? {
+          y: -4,
+          scale: 1.01
+        } : void 0,
+        transition: {
+          type: "tween",
+          duration: 0.15,
+          ease: "linear"
+        },
+        ...o,
+        children: [
+          n === "top" && i !== "none" && /* @__PURE__ */ s("div", { className: u("absolute top-0 left-0 right-0 h-1", l[i]) }),
+          n === "left" && i !== "none" && /* @__PURE__ */ s("div", { className: u("absolute top-0 left-0 bottom-0 w-1", l[i]) }),
+          t
+        ]
+      }
+    );
+  }
+);
+U.displayName = "Card";
+const W = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s("div", { ref: i, className: u("p-6 xl:p-8", e), ...r, children: t })
+);
+W.displayName = "CardContent";
+const Y = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s("div", { ref: i, className: u("flex items-center gap-4 mb-4", e), ...r, children: t })
+);
+Y.displayName = "CardHeader";
+const q = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s(
+    "h3",
+    {
+      ref: i,
+      className: u("text-xl xl:text-2xl font-bold text-uix-text-100", e),
+      ...r,
+      children: t
+    }
+  )
+);
+q.displayName = "CardTitle";
+const J = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s("p", { ref: i, className: u("text-uix-gray-200 leading-relaxed", e), ...r, children: t })
+);
+J.displayName = "CardDescription";
+const K = c(
+  ({ className: e, code: t, language: r = "tsx", showLineNumbers: i = !1, ...n }, o) => {
+    const [a, l] = y(!1), [x, g] = y("");
+    w(() => {
+      (async () => {
+        const m = await X(t.trim(), {
+          lang: r,
+          theme: "github-dark"
+        });
+        g(m);
+      })();
+    }, [t, r]);
+    const d = async () => {
+      await navigator.clipboard.writeText(t.trim()), l(!0), setTimeout(() => l(!1), 2e3);
+    };
+    return /* @__PURE__ */ v(
+      "div",
+      {
+        ref: o,
+        className: u(
+          "relative rounded-2xl bg-uix-black-400 overflow-hidden uix-convex",
+          e
+        ),
+        ...n,
+        children: [
+          /* @__PURE__ */ v("div", { className: "flex items-center justify-between px-4 py-2 border-b border-uix-black-200", children: [
+            /* @__PURE__ */ s(L, { variant: "secondary", size: "sm", children: r }),
+            /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                onClick: d,
+                className: "p-1.5 rounded-xl hover:bg-uix-black-200 transition-colors",
+                "aria-label": "Copy code",
+                children: a ? /* @__PURE__ */ s($, { size: 14, className: "text-green-400" }) : /* @__PURE__ */ s(j, { size: 14, className: "text-uix-gray-100" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: u(
+                "p-4 overflow-x-auto text-sm",
+                "[&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0",
+                "[&_code]:!bg-transparent",
+                i && "[&_.line]:before:content-[counter(line)] [&_.line]:before:counter-increment-[line] [&_.line]:before:mr-4 [&_.line]:before:text-uix-gray-300"
+              ),
+              dangerouslySetInnerHTML: { __html: x }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+K.displayName = "CodeBlock";
+const Q = {
+  prime: "var(--uix-prime-300)",
+  sub1: "var(--uix-sub1-300)",
+  sub2: "var(--uix-sub2-300)"
+}, Z = {
+  prime: "bg-gradient-to-br from-uix-prime-400 via-uix-prime-300 to-uix-prime-400",
+  sub1: "bg-gradient-to-br from-uix-sub1-400 via-uix-sub1-300 to-uix-sub1-400",
+  sub2: "bg-gradient-to-br from-uix-sub2-400 via-uix-sub2-300 to-uix-sub2-400"
+};
+function He({
+  children: e,
+  className: t = "",
+  color: r = "prime",
+  gradient: i = !1,
+  delay: n = 0,
+  charDelay: o = 0.04
+}) {
+  const a = S(null), l = D(a, { once: !0, margin: "-50px" }), [x, g] = y(!1), d = 1, b = e.length, m = d + n + b * o + 0.25;
+  return w(() => {
+    if (i && l && !x) {
+      const p = setTimeout(() => {
+        g(!0);
+      }, m * 1e3);
+      return () => clearTimeout(p);
+    }
+  }, [i, l, x, m]), i && x ? /* @__PURE__ */ s(
+    "span",
+    {
+      ref: a,
+      className: `inline-block bg-clip-text text-transparent ${Z[r]} ${t}`,
+      children: e
+    }
+  ) : /* @__PURE__ */ s("span", { ref: a, className: `inline-block ${t}`, children: e.split("").map((p, N) => /* @__PURE__ */ s(
+    f.span,
+    {
+      className: "inline-block",
+      style: { color: "var(--uix-text-100)" },
+      animate: l ? {
+        color: Q[r]
+      } : {},
+      transition: {
+        duration: 0.25,
+        delay: d + n + N * o,
+        ease: [0.1, 0.1, 0.9, 0.9]
+      },
+      children: p === " " ? " " : p
+    },
+    N
+  )) });
+}
+const H = T(null);
+function E() {
+  const e = C(H);
+  if (!e)
+    throw new Error("Dropdown components must be used within a Dropdown");
+  return e;
+}
+function ze({
+  children: e,
+  open: t,
+  onOpenChange: r,
+  className: i,
+  ...n
+}) {
+  const [o, a] = y(!1), l = S(null), x = t ?? o, g = (d) => {
+    a(d), r == null || r(d);
+  };
+  return /* @__PURE__ */ s(H.Provider, { value: { open: x, setOpen: g, triggerRef: l }, children: /* @__PURE__ */ s("div", { className: h("relative inline-block", i), ...n, children: e }) });
+}
+function Ie({ children: e, className: t, onClick: r, ...i }) {
+  const { open: n, setOpen: o, triggerRef: a } = E();
+  return /* @__PURE__ */ v(
+    "button",
+    {
+      ref: a,
+      type: "button",
+      className: h(
+        "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-sm font-medium",
+        "uix-glass uix-glass-border uix-convex-sm",
+        "text-uix-text-200 hover:text-uix-text-100 transition-colors",
+        t
+      ),
+      onClick: (l) => {
+        o(!n), r == null || r(l);
+      },
+      "aria-expanded": n,
+      "aria-haspopup": "true",
+      ...i,
+      children: [
+        e,
+        /* @__PURE__ */ s(
+          "svg",
+          {
+            className: h("w-3.5 h-3.5 transition-transform duration-200", n && "rotate-180"),
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ s("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+          }
+        )
+      ]
+    }
+  );
+}
+function Pe({ children: e, className: t, align: r = "start" }) {
+  const { open: i, setOpen: n, triggerRef: o } = E(), a = S(null), [l, x] = y({ top: 0, left: 0 });
+  R(() => {
+    if (!i || !o.current) return;
+    const d = () => {
+      var p;
+      const b = (p = o.current) == null ? void 0 : p.getBoundingClientRect();
+      if (!b) return;
+      let m = b.left;
+      r === "center" ? m = b.left + b.width / 2 : r === "end" && (m = b.right), x({
+        top: b.bottom + 8,
+        // mt-2 equivalent
+        left: m
+      });
+    };
+    return d(), window.addEventListener("scroll", d, !0), window.addEventListener("resize", d), () => {
+      window.removeEventListener("scroll", d, !0), window.removeEventListener("resize", d);
+    };
+  }, [i, o, r]), w(() => {
+    if (!i) return;
+    const d = (m) => {
+      a.current && !a.current.contains(m.target) && o.current && !o.current.contains(m.target) && n(!1);
+    }, b = (m) => {
+      var p;
+      m.key === "Escape" && (n(!1), (p = o.current) == null || p.focus());
+    };
+    return document.addEventListener("mousedown", d), document.addEventListener("keydown", b), () => {
+      document.removeEventListener("mousedown", d), document.removeEventListener("keydown", b);
+    };
+  }, [i, n, o]);
+  const g = {
+    start: { transform: "translateX(0)" },
+    center: { transform: "translateX(-50%)" },
+    end: { transform: "translateX(-100%)" }
+  };
+  return typeof document > "u" ? null : O(
+    /* @__PURE__ */ s(k, { children: i && /* @__PURE__ */ s(
+      f.div,
+      {
+        ref: a,
+        initial: { opacity: 0, y: -8 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -8 },
+        transition: {
+          type: "spring",
+          stiffness: 400,
+          damping: 25,
+          mass: 0.8
+        },
+        className: h(
+          "fixed z-50 min-w-[180px]",
+          "uix-glass uix-glass-border uix-convex uix-glass-noise rounded-2xl",
+          "p-1.5 shadow-xl",
+          t
+        ),
+        style: {
+          top: l.top,
+          left: l.left,
+          ...g[r]
+        },
+        role: "menu",
+        children: e
+      }
+    ) }),
+    document.body
+  );
+}
+function Be({
+  children: e,
+  className: t,
+  disabled: r,
+  onClick: i,
+  ...n
+}) {
+  const { setOpen: o } = E();
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      disabled: r,
+      className: h(
+        "w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-left",
+        "transition-colors duration-100",
+        r ? "text-uix-text-300 cursor-not-allowed" : "text-uix-text-200 hover:text-uix-text-100 hover:bg-uix-surface-300/60",
+        t
+      ),
+      onClick: (a) => {
+        r || (i == null || i(a), o(!1));
+      },
+      ...n,
+      children: e
+    }
+  );
+}
+function _e({ className: e, ...t }) {
+  return /* @__PURE__ */ s("hr", { className: h("my-1.5 h-px border-0 bg-uix-border-100", e), ...t });
+}
+const z = c(
+  ({ className: e, orientation: t = "vertical", children: r, ...i }, n) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: n,
+      className: u(
+        "relative",
+        {
+          vertical: "overflow-y-auto overflow-x-hidden",
+          horizontal: "overflow-x-auto overflow-y-hidden",
+          both: "overflow-auto"
+        }[t],
+        // Custom scrollbar styling
+        "[&::-webkit-scrollbar]:w-2",
+        "[&::-webkit-scrollbar-track]:bg-transparent",
+        "[&::-webkit-scrollbar-thumb]:bg-uix-gray-300/50",
+        "[&::-webkit-scrollbar-thumb]:rounded-full",
+        "[&::-webkit-scrollbar-thumb]:hover:bg-uix-gray-300",
+        e
+      ),
+      ...i,
+      children: r
+    }
+  )
+);
+z.displayName = "ScrollArea";
+function Me({ threshold: e = 500, className: t }) {
+  const [r, i] = y(!1);
+  w(() => {
+    const o = () => {
+      i(window.scrollY > e);
+    };
+    return window.addEventListener("scroll", o, { passive: !0 }), () => window.removeEventListener("scroll", o);
+  }, [e]);
+  const n = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ s(k, { children: r && /* @__PURE__ */ s(
+    f.button,
+    {
+      initial: { opacity: 0, scale: 0.5, y: 20 },
+      animate: { opacity: 1, scale: 1, y: 0 },
+      exit: { opacity: 0, scale: 0.5, y: 20 },
+      whileHover: { scale: 1.1, y: -2 },
+      whileTap: { scale: 0.9 },
+      transition: {
+        default: {
+          type: "spring",
+          stiffness: 300,
+          damping: 20,
+          mass: 0.8
+        },
+        scale: {
+          duration: 0.06,
+          ease: [0, 0, 1, 1]
+        }
+      },
+      onClick: n,
+      className: u(
+        "fixed bottom-6 right-6 z-50 p-3 rounded-full bg-uix-prime-300 backdrop-blur-sm text-uix-white-100 hover:bg-uix-prime-400 cursor-pointer uix-convex-colored",
+        t
+      ),
+      "aria-label": "Scroll to top",
+      children: /* @__PURE__ */ s(G, { size: 24 })
+    }
+  ) });
+}
+const ee = c(
+  ({ className: e, children: t, variant: r = "default", container: i = !0, animate: n = !0, id: o, ...a }, l) => {
+    const x = S(null), g = D(x, { once: !0, margin: "-100px" }), d = "backdrop-blur-xl backdrop-saturate-150 uix-glass-border uix-convex", b = {
+      default: `bg-uix-surface-200/50 ${d}`,
+      secondary: `bg-uix-surface-300/50 ${d}`,
+      accent: `bg-uix-prime-300/60 ${d} text-uix-white-100`
+    }, m = i ? /* @__PURE__ */ s("div", { className: "max-w-4xl mx-auto px-6 xl:px-12", children: t }) : t;
+    return /* @__PURE__ */ s(
+      "section",
+      {
+        ref: (p) => {
+          x.current = p, typeof l == "function" ? l(p) : l && (l.current = p);
+        },
+        id: o,
+        className: u("relative py-16 xl:py-24 rounded-[2.5rem]", b[r], e),
+        ...a,
+        children: n ? /* @__PURE__ */ s(
+          f.div,
+          {
+            initial: { opacity: 0, y: 40 },
+            animate: g ? { opacity: 1, y: 0 } : { opacity: 0, y: 40 },
+            transition: {
+              type: "spring",
+              stiffness: 200,
+              damping: 25,
+              mass: 1
+            },
+            children: m
+          }
+        ) : m
+      }
+    );
+  }
+);
+ee.displayName = "Section";
+const te = c(
+  ({ className: e, children: t, subtitle: r, ...i }, n) => /* @__PURE__ */ v("div", { className: "text-center mb-14 xl:mb-20", children: [
+    /* @__PURE__ */ s(
+      "h2",
+      {
+        ref: n,
+        className: u(
+          "text-4xl xl:text-6xl font-bold text-uix-text-100 mb-6 tracking-tight",
+          e
+        ),
+        ...i,
+        children: t
+      }
+    ),
+    r && /* @__PURE__ */ s("p", { className: "text-xl xl:text-2xl text-uix-gray-200 max-w-3xl mx-auto leading-relaxed", children: r })
+  ] })
+);
+te.displayName = "SectionTitle";
+const I = T(null), re = () => {
+  const e = C(I);
+  if (!e)
+    throw new Error("Sheet components must be used within a Sheet provider");
+  return e;
+}, ie = ({ open: e, onOpenChange: t, children: r }) => (w(() => {
+  const i = (n) => {
+    n.key === "Escape" && e && t(!1);
+  };
+  return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+}, [e, t]), w(() => (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+  document.body.style.overflow = "";
+}), [e]), /* @__PURE__ */ s(I.Provider, { value: { open: e, onOpenChange: t }, children: r }));
+ie.displayName = "Sheet";
+const se = c(
+  ({ className: e, side: t = "left", children: r }, i) => {
+    const { open: n, onOpenChange: o } = re(), a = {
+      left: {
+        initial: { x: "-100%" },
+        animate: { x: 0 },
+        exit: { x: "-100%" }
+      },
+      right: {
+        initial: { x: "100%" },
+        animate: { x: 0 },
+        exit: { x: "100%" }
+      }
+    }, l = {
+      left: "left-0",
+      right: "right-0"
+    };
+    return /* @__PURE__ */ s(k, { children: n && /* @__PURE__ */ v(M, { children: [
+      /* @__PURE__ */ s(
+        f.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.2 },
+          className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
+          onClick: () => o(!1)
+        }
+      ),
+      /* @__PURE__ */ s(
+        f.div,
+        {
+          ref: i,
+          initial: a[t].initial,
+          animate: a[t].animate,
+          exit: a[t].exit,
+          transition: { type: "spring", damping: 25, stiffness: 300 },
+          className: u(
+            "fixed top-0 z-50 h-full w-72 bg-uix-surface-100/90 backdrop-blur-xl backdrop-saturate-150 border-r border-black/[0.3] dark:border-white/[0.03] rounded-r-3xl uix-convex-lg",
+            l[t],
+            e
+          ),
+          children: r
+        }
+      )
+    ] }) });
+  }
+);
+se.displayName = "SheetContent";
+const ne = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: i,
+      className: u("flex flex-col gap-2 p-6 border-b border-uix-border-100", e),
+      ...r,
+      children: t
+    }
+  )
+);
+ne.displayName = "SheetHeader";
+const oe = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s("h2", { ref: i, className: u("text-lg font-semibold text-uix-text-100", e), ...r, children: t })
+);
+oe.displayName = "SheetTitle";
+const ae = "relative uix-glass uix-glass-border uix-convex uix-glass-noise rounded-3xl", le = c(({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s(
+  "aside",
+  {
+    ref: i,
+    className: u("hidden xl:flex flex-col w-60 h-full", ae, e),
+    ...r,
+    children: t
+  }
+));
+le.displayName = "Sidebar";
+const ue = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s("div", { ref: i, className: u("flex flex-col gap-1 p-6", e), ...r, children: t })
+);
+ue.displayName = "SidebarHeader";
+const ce = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s(z, { ref: i, className: u("flex-1 p-4", e), ...r, children: t })
+);
+ce.displayName = "SidebarContent";
+const de = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s("div", { ref: i, className: u("mb-6", e), ...r, children: t })
+);
+de.displayName = "SidebarGroup";
+const xe = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: i,
+      className: u(
+        "px-3 mb-3 text-xs font-semibold uppercase tracking-widest text-uix-sub1-300/80",
+        e
+      ),
+      ...r,
+      children: t
+    }
+  )
+);
+xe.displayName = "SidebarGroupLabel";
+const me = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s("ul", { ref: i, className: u("space-y-1", e), ...r, children: t })
+);
+me.displayName = "SidebarMenu";
+const be = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s("li", { ref: i, className: u("", e), ...r, children: t })
+);
+be.displayName = "SidebarMenuItem";
+const pe = c(
+  ({ className: e, isActive: t = !1, children: r, ...i }, n) => {
+    const { onDrag: o, onDragStart: a, onDragEnd: l, ...x } = i;
+    return /* @__PURE__ */ v(
+      f.button,
+      {
+        ref: n,
+        type: "button",
+        className: u(
+          "relative flex w-full items-center gap-2 rounded-xl px-3 py-2.5 text-base font-medium",
+          "hover:bg-uix-surface-300/50 hover:text-uix-text-100",
+          t ? "text-uix-prime-300 bg-uix-prime-100/15" : "text-uix-text-300",
+          e
+        ),
+        whileHover: { x: 4, scale: 1.01 },
+        whileTap: { scale: 0.97 },
+        transition: {
+          duration: 0.08,
+          ease: [0, 0, 1, 1]
+        },
+        ...x,
+        children: [
+          t && /* @__PURE__ */ s(
+            f.span,
+            {
+              className: "absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-uix-prime-300 rounded-r-full",
+              layoutId: "sidebar-active-indicator",
+              transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 20,
+                mass: 0.8
+              }
+            }
+          ),
+          r
+        ]
+      }
+    );
+  }
+);
+pe.displayName = "SidebarMenuButton";
+const fe = c(
+  ({ className: e, variant: t = "default", rounded: r = "3xl", children: i, ...n }, o) => {
+    const a = "relative uix-glass uix-glass-border uix-convex uix-glass-noise", l = {
+      default: "",
+      subtle: "uix-convex-subtle",
+      strong: "uix-convex-lg"
+    }, x = {
+      none: "rounded-none",
+      sm: "rounded-lg",
+      md: "rounded-xl",
+      lg: "rounded-2xl",
+      xl: "rounded-[1.5rem]",
+      "2xl": "rounded-[2rem]",
+      "3xl": "rounded-3xl",
+      full: "rounded-full"
+    };
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: o,
+        className: u(a, l[t], x[r], e),
+        ...n,
+        children: i
+      }
+    );
+  }
+);
+fe.displayName = "Surface";
+const P = T(null), B = () => {
+  const e = C(P);
+  if (!e)
+    throw new Error("Tabs components must be used within a Tabs provider");
+  return e;
+}, ge = c(
+  ({ className: e, defaultValue: t, children: r, ...i }, n) => {
+    const [o, a] = y(t), l = V();
+    return /* @__PURE__ */ s(P.Provider, { value: { activeTab: o, setActiveTab: a, tabsId: l }, children: /* @__PURE__ */ s("div", { ref: n, className: u("w-full", e), ...i, children: r }) });
+  }
+);
+ge.displayName = "Tabs";
+const ve = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: i,
+      className: u(
+        "inline-flex items-center gap-1 rounded-2xl bg-uix-surface-300/50 backdrop-blur-xl backdrop-saturate-150 uix-glass-border p-1.5 uix-convex",
+        e
+      ),
+      ...r,
+      children: t
+    }
+  )
+);
+ve.displayName = "TabsList";
+const ye = c(
+  ({ className: e, value: t, children: r, ...i }, n) => {
+    const { activeTab: o, setActiveTab: a, tabsId: l } = B(), x = o === t, { onDrag: g, onDragStart: d, onDragEnd: b, ...m } = i;
+    return /* @__PURE__ */ v(
+      f.button,
+      {
+        ref: n,
+        type: "button",
+        onClick: () => a(t),
+        className: u(
+          "relative inline-flex items-center justify-center px-4 py-2 text-base font-medium rounded-xl",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-uix-prime-300",
+          x ? "text-uix-text-100" : "text-uix-text-300 hover:text-uix-text-100",
+          e
+        ),
+        whileHover: { scale: 1.02 },
+        whileTap: { scale: 0.96 },
+        transition: {
+          duration: 0.06,
+          ease: [0, 0, 1, 1]
+        },
+        ...m,
+        children: [
+          x && /* @__PURE__ */ s(
+            f.span,
+            {
+              layoutId: `tabs-indicator-${l}`,
+              className: "absolute inset-0 bg-uix-surface-100 rounded-xl uix-convex-sm",
+              transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 20,
+                mass: 0.8
+              }
+            }
+          ),
+          /* @__PURE__ */ s("span", { className: "relative z-10", children: r })
+        ]
+      }
+    );
+  }
+);
+ye.displayName = "TabsTrigger";
+const he = c(
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ s("div", { ref: i, className: u("relative mt-4", e), ...r, children: /* @__PURE__ */ s("div", { className: "grid [&>*]:col-start-1 [&>*]:row-start-1", children: t }) })
+);
+he.displayName = "TabsPanels";
+const we = c(
+  ({ className: e, value: t, children: r, ...i }, n) => {
+    const { activeTab: o } = B(), a = o === t;
+    return /* @__PURE__ */ s(
+      f.div,
+      {
+        ref: n,
+        className: u(e),
+        initial: !1,
+        animate: {
+          opacity: a ? 1 : 0,
+          scale: a ? 1 : 0.98,
+          y: a ? 0 : 8,
+          visibility: a ? "visible" : "hidden"
+        },
+        transition: {
+          type: "spring",
+          stiffness: 400,
+          damping: 25,
+          mass: 0.8
+        },
+        "aria-hidden": !a,
+        children: /* @__PURE__ */ s("div", { ...i, children: r })
+      }
+    );
+  }
+);
+we.displayName = "TabsContent";
+export {
+  L as Badge,
+  F as Button,
+  U as Card,
+  W as CardContent,
+  J as CardDescription,
+  Y as CardHeader,
+  q as CardTitle,
+  K as CodeBlock,
+  He as ColorSwipeText,
+  ze as Dropdown,
+  Pe as DropdownContent,
+  Be as DropdownItem,
+  _e as DropdownSeparator,
+  Ie as DropdownTrigger,
+  z as ScrollArea,
+  Me as ScrollToTop,
+  ee as Section,
+  te as SectionTitle,
+  ie as Sheet,
+  se as SheetContent,
+  ne as SheetHeader,
+  oe as SheetTitle,
+  le as Sidebar,
+  ce as SidebarContent,
+  de as SidebarGroup,
+  xe as SidebarGroupLabel,
+  ue as SidebarHeader,
+  me as SidebarMenu,
+  pe as SidebarMenuButton,
+  be as SidebarMenuItem,
+  fe as Surface,
+  ge as Tabs,
+  we as TabsContent,
+  ve as TabsList,
+  he as TabsPanels,
+  ye as TabsTrigger,
+  u as cn
+};