@dimasbaguspm/versaur 0.0.8 → 0.0.9

package/dist/tabs-KyFmo5cA.js

@@ -0,0 +1,310 @@
+import { c as d, j as o, a as u } from "./index-DOdDlCoL.js";
+import { forwardRef as f, createContext as m, useContext as g, useState as p, useLayoutEffect as h, useRef as y } from "react";
+const w = d(
+  "flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200",
+  {
+    variants: {
+      separator: {
+        default: "gap-2",
+        compact: "gap-1"
+      }
+    },
+    defaultVariants: {
+      separator: "default"
+    }
+  }
+), T = d(
+  "inline-flex items-center gap-1 transition-colors",
+  {
+    variants: {
+      isCurrent: {
+        true: "font-semibold text-slate-900 dark:text-white cursor-default",
+        false: "hover:text-primary focus:text-primary text-slate-700 dark:text-slate-200"
+      }
+    },
+    defaultVariants: {
+      isCurrent: !1
+    }
+  }
+), j = "mx-1 text-slate-400 dark:text-slate-500 select-none", I = f(function({ children: t, icon: r, isCurrent: a, className: s, ...n }, i) {
+  return /* @__PURE__ */ o.jsx("li", { className: "flex items-center", children: /* @__PURE__ */ o.jsxs(
+    "a",
+    {
+      ref: i,
+      "aria-current": a ? "page" : void 0,
+      tabIndex: a ? -1 : 0,
+      className: u(T({ isCurrent: a }) + s),
+      ...n,
+      children: [
+        r && /* @__PURE__ */ o.jsx("span", { className: "mr-1 inline-flex", children: r }),
+        t
+      ]
+    }
+  ) });
+});
+function V() {
+  return /* @__PURE__ */ o.jsx("span", { className: j, "aria-hidden": "true", children: "/" });
+}
+const C = f(
+  function({ children: t, "aria-label": r = "Breadcrumb", ...a }, s) {
+    return /* @__PURE__ */ o.jsx("nav", { "aria-label": r, ...a, children: /* @__PURE__ */ o.jsx("ol", { ref: s, className: w(), children: t }) });
+  }
+), O = Object.assign(C, {
+  Item: I,
+  Separator: V
+}), x = m(null), v = () => {
+  const e = g(x);
+  if (!e)
+    throw new Error("useTabsContext must be used within a TabsProvider");
+  return e;
+}, B = d(
+  "inline-flex items-center justify-center transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none select-none px-4 py-2 text-base relative",
+  {
+    variants: {
+      active: {
+        true: "font-medium",
+        false: "font-normal"
+      },
+      color: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: ""
+      },
+      variant: {
+        underline: "bg-transparent border-b-2 border-transparent",
+        filled: "rounded-lg bg-none flex-1 min-w-0"
+      }
+    },
+    compoundVariants: [
+      // Underline variants
+      {
+        variant: "underline",
+        color: "primary",
+        active: !0,
+        class: "text-coral border-coral"
+      },
+      {
+        variant: "underline",
+        color: "primary",
+        active: !1,
+        class: "text-foreground hover:text-coral"
+      },
+      {
+        variant: "underline",
+        color: "secondary",
+        active: !0,
+        class: "text-sage border-sage"
+      },
+      {
+        variant: "underline",
+        color: "secondary",
+        active: !1,
+        class: "text-foreground hover:text-sage"
+      },
+      {
+        variant: "underline",
+        color: "tertiary",
+        active: !0,
+        class: "text-mist border-mist"
+      },
+      {
+        variant: "underline",
+        color: "tertiary",
+        active: !1,
+        class: "text-foreground hover:text-mist"
+      },
+      {
+        variant: "underline",
+        color: "ghost",
+        active: !0,
+        class: "text-slate border-slate"
+      },
+      {
+        variant: "underline",
+        color: "ghost",
+        active: !1,
+        class: "text-foreground hover:text-slate"
+      },
+      {
+        variant: "underline",
+        color: "neutral",
+        active: !0,
+        class: "text-foreground border-light-gray"
+      },
+      {
+        variant: "underline",
+        color: "neutral",
+        active: !1,
+        class: "text-foreground hover:text-light-gray"
+      },
+      // Filled variant (no color, only white/transparent)
+      {
+        variant: "filled",
+        active: !0,
+        class: "bg-white text-foreground shadow-sm"
+      },
+      {
+        variant: "filled",
+        active: !1,
+        class: "bg-transparent text-foreground hover:bg-white/80"
+      }
+    ],
+    defaultVariants: {
+      active: !1,
+      color: "primary",
+      variant: "underline"
+    }
+  }
+), N = d(
+  "flex flex-row w-full overflow-x-auto whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        underline: "border-b border-border",
+        filled: "p-1 bg-neutral rounded-lg gap-2"
+      }
+    },
+    defaultVariants: {
+      variant: "underline"
+    }
+  }
+), S = d(
+  "absolute bottom-0 h-0.5 rounded transition-all duration-300",
+  {
+    variants: {
+      color: {
+        primary: "bg-coral",
+        secondary: "bg-sage",
+        tertiary: "bg-mist",
+        ghost: "bg-slate",
+        neutral: "bg-light-gray"
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  }
+), k = ({
+  value: e,
+  children: t,
+  className: r,
+  ...a
+}) => {
+  const {
+    activeTab: s,
+    setActiveTab: n,
+    color: i,
+    variant: c = "underline"
+  } = v(), l = s === e;
+  return /* @__PURE__ */ o.jsx(
+    "button",
+    {
+      role: "tab",
+      id: `tabs-trigger-${e}`,
+      "aria-selected": l,
+      "aria-controls": `tabs-content-${e}`,
+      tabIndex: l ? 0 : -1,
+      className: u(
+        B({
+          active: l,
+          color: i,
+          variant: c
+        }),
+        r
+      ),
+      onClick: () => n(e),
+      type: "button",
+      ...a,
+      children: t
+    }
+  );
+}, R = ({
+  left: e,
+  width: t,
+  className: r,
+  ...a
+}) => {
+  const { color: s } = v();
+  return /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      "aria-hidden": !0,
+      className: u(S({ color: s }), r),
+      style: {
+        left: e,
+        width: t,
+        pointerEvents: "none"
+      },
+      ...a
+    }
+  );
+};
+function A(e, t, r) {
+  const [a, s] = p({
+    left: 0,
+    width: 0
+  });
+  return h(() => {
+    if (!t.current) return;
+    const n = t.current.querySelector(
+      `#tabs-trigger-${e}`
+    );
+    if (n) {
+      const { offsetLeft: i, offsetWidth: c } = n;
+      s({ left: i, width: c }), n.scrollIntoView({
+        behavior: "smooth",
+        inline: "center",
+        block: "nearest"
+      });
+    }
+  }, [e, r, t]), a;
+}
+const E = ({
+  value: e,
+  onValueChange: t,
+  children: r,
+  className: a,
+  color: s = "primary",
+  variant: n = "underline",
+  ...i
+}) => {
+  const c = {
+    activeTab: e,
+    setActiveTab: t,
+    color: s,
+    variant: n
+  }, l = y(null), b = A(e, l, r);
+  return /* @__PURE__ */ o.jsx(x.Provider, { value: c, children: /* @__PURE__ */ o.jsxs(
+    "div",
+    {
+      role: "tablist",
+      className: u(
+        N({
+          variant: n
+        }),
+        a
+      ),
+      ref: l,
+      style: { position: "relative" },
+      ...i,
+      children: [
+        r,
+        n === "underline" && /* @__PURE__ */ o.jsx(
+          R,
+          {
+            left: b.left,
+            width: b.width
+          }
+        )
+      ]
+    }
+  ) });
+}, P = Object.assign(E, {
+  Trigger: k
+});
+export {
+  O as B,
+  P as T
+};