@alfadocs/ui-kit 1.50.1 → 1.51.0

package/dist/_chunks/tabs-CFsuMQ5H.js

@@ -1,409 +0,0 @@
-import { jsx as a, jsxs as C } from "react/jsx-runtime";
-import { forwardRef as V, useContext as I, useRef as A, useState as M, useEffect as q, useMemo as _, Children as F, isValidElement as J, useCallback as K, createContext as Q } from "react";
-import * as j from "@radix-ui/react-tabs";
-import * as k from "@radix-ui/react-dropdown-menu";
-import { a as N, c as B } from "./index-D2ZczOXr.js";
-import { useTranslation as Y } from "react-i18next";
-import { c as Z } from "./compose-refs-C0k0tdqF.js";
-import { S as D } from "./select-upNAltly.js";
-import { b as ee } from "./menu-row-BAr8bx1I.js";
-import { u as te } from "./registry-DvAUVLHh.js";
-import { X as se } from "./x-B5YnXwCz.js";
-import { u as ae } from "./use-direction-Dp8h70PP.js";
-import { C as re } from "./chevron-down-DWE7GSq9.js";
-const oe = {
-  id: "tabs",
-  capabilities: ["select_single"],
-  state: {
-    activeTab: {
-      type: "string | null",
-      descriptionKey: "ui.agent.tabs.state.activeTab",
-      description: "Value of the currently-active tab.",
-      read: (o) => o.getActiveTab()
-    }
-  },
-  actions: {
-    select_tab: {
-      safety: "read",
-      argsType: "{ value: string }",
-      argsSchema: {
-        type: "object",
-        properties: { value: { type: "string" } },
-        required: ["value"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.tabs.actions.selectTab",
-      description: "Activate the tab with the given value.",
-      invoke: (o, s) => {
-        o.selectTab(s.value);
-      }
-    }
-  },
-  domHooks: {
-    root: { attr: "data-component", value: "tabs" },
-    instanceId: {
-      attr: "data-component-id",
-      sourceProp: "id",
-      description: "Sourced from the id prop on Tabs.Root."
-    },
-    item: {
-      attr: "data-tab-id",
-      description: "Each Tab.Trigger emits its value as data-tab-id."
-    }
-  }
-}, P = B("ds:relative ds:flex", {
-  variants: {
-    variant: {
-      // Shadcn-style segmented control: light container, white active card
-      default: "ds:flex-1 ds:min-w-0 ds:items-center ds:bg-muted/10 ds:rounded-[var(--radius-md)] ds:p-1",
-      // Classic underline tabs: bottom border with colored active indicator
-      underlined: "ds:flex-1 ds:min-w-0 ds:items-end ds:[border-block-end:1px_solid_var(--border)]",
-      // Segmented control: warm secondary container, content-width
-      pills: "ds:items-center ds:bg-secondary ds:rounded-[var(--radius-md)] ds:p-1"
-    },
-    orientation: {
-      horizontal: "ds:flex-row ds:overflow-hidden",
-      vertical: "ds:flex-col"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    orientation: "horizontal"
-  }
-}), G = B(
-  [
-    "ds:relative ds:inline-flex ds:items-center ds:justify-center ds:whitespace-nowrap ds:border-0",
-    "ds:gap-2 ds:font-medium ds:transition-colors",
-    "ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
-    "ds:cursor-pointer ds:select-none",
-    "ds:disabled:pointer-events-none ds:disabled:opacity-50",
-    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
-    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        default: [
-          "ds:rounded-[var(--radius-sm)] ds:bg-transparent ds:text-muted-foreground",
-          "ds:hover:bg-muted/10 ds:hover:text-foreground",
-          "ds:data-[state=active]:bg-background ds:data-[state=active]:text-foreground",
-          "ds:data-[state=active]:shadow-sm"
-        ].join(" "),
-        underlined: [
-          "ds:bg-transparent ds:text-muted-foreground",
-          "ds:[border-block-end:2px_solid_transparent]",
-          "ds:hover:bg-muted/10 ds:hover:text-foreground",
-          "ds:data-[state=active]:[border-block-end-color:var(--primary)]",
-          "ds:data-[state=active]:text-foreground ds:data-[state=active]:[margin-block-end:-1px]"
-        ].join(" "),
-        pills: [
-          "ds:rounded-[var(--radius-full)] ds:bg-transparent ds:text-muted-foreground",
-          "ds:hover:bg-muted/20 ds:hover:text-foreground",
-          "ds:data-[state=active]:bg-primary ds:data-[state=active]:text-primary-foreground"
-        ].join(" ")
-      },
-      size: {
-        sm: "ds:h-8 ds:px-[var(--spacing-sm)] ds:text-[length:var(--font-size-sm)]",
-        md: "ds:h-10 ds:px-[var(--spacing-md)] ds:text-[length:var(--font-size-base)]",
-        lg: "ds:h-12 ds:px-[var(--spacing-lg)] ds:text-[length:var(--font-size-lg)]"
-      },
-      orientation: {
-        horizontal: "",
-        vertical: "ds:w-full ds:justify-start"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-      orientation: "horizontal"
-    }
-  }
-), O = Q({
-  variant: "default",
-  size: "md",
-  orientation: "horizontal",
-  overflow: "dropdown",
-  value: "",
-  setValue: () => {
-  }
-}), H = V(
-  ({
-    variant: o = "default",
-    size: s = "md",
-    orientation: n = "horizontal",
-    overflow: d = "dropdown",
-    className: i,
-    children: u,
-    value: t,
-    defaultValue: m,
-    onValueChange: l,
-    id: f,
-    ...g
-  }, w) => {
-    const b = A(null), v = Z(w, b), y = ae(b), p = t !== void 0, [h, z] = M(
-      m ?? ""
-    ), r = p ? t ?? "" : h, e = K(
-      (T) => {
-        p || z(T), l == null || l(T);
-      },
-      [p, l]
-    ), x = _(
-      () => ({ variant: o, size: s, orientation: n, overflow: d, value: r, setValue: e }),
-      [o, s, n, d, r, e]
-    ), c = A(r);
-    q(() => {
-      c.current = r;
-    }, [r]);
-    const R = _(
-      () => ({
-        getActiveTab: () => c.current || null,
-        selectTab: (T) => e(T)
-      }),
-      [e]
-    );
-    return te(oe, R, f), /* @__PURE__ */ a(O.Provider, { value: x, children: /* @__PURE__ */ a(
-      j.Root,
-      {
-        ref: v,
-        orientation: n,
-        dir: y,
-        value: r,
-        onValueChange: e,
-        id: f,
-        "data-component": "tabs",
-        "data-component-id": f,
-        className: N(
-          "ds:flex",
-          n === "vertical" ? "ds:flex-row ds:gap-[var(--spacing-md)]" : "ds:flex-col",
-          i
-        ),
-        ...g,
-        children: u
-      }
-    ) });
-  }
-);
-H.displayName = "Tabs";
-const U = V(
-  ({ className: o, children: s, "aria-label": n, ...d }, i) => {
-    const { variant: u, size: t, orientation: m, overflow: l, value: f, setValue: g } = I(O), { t: w } = Y(), b = A(null), [v, y] = M([]), p = m === "horizontal", h = l === "dropdown" && p;
-    q(() => {
-      if (!h) {
-        y([]);
-        return;
-      }
-      const e = b.current;
-      if (!e) return;
-      const x = () => {
-        const R = e.getBoundingClientRect().right, T = [];
-        e.querySelectorAll('[role="tab"]').forEach(
-          (S) => {
-            var L;
-            if (S.getBoundingClientRect().right > R + 2) {
-              const E = S.getAttribute("data-value") ?? S.dataset.value ?? "", $ = ((L = S.textContent) == null ? void 0 : L.trim()) ?? E;
-              T.push({ value: E, label: $ });
-            }
-          }
-        ), y(T);
-      }, c = new ResizeObserver(x);
-      return c.observe(e), x(), () => c.disconnect();
-    }, [h, s]);
-    const z = (e) => {
-      b.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
-    }, r = _(() => l !== "select" ? [] : F.toArray(s).filter(
-      (e) => J(e)
-    ).filter(
-      (e) => typeof e.props.value == "string" && e.props.value.length > 0
-    ).map((e) => {
-      const x = e.props.value, c = e.props.children, R = typeof c == "string" ? c : typeof c == "number" ? String(c) : x;
-      return { value: x, label: R };
-    }), [s, l]);
-    return l === "select" && p ? /* @__PURE__ */ C("div", { className: "ds:@container/tabs ds:relative ds:w-full", children: [
-      /* @__PURE__ */ a("div", { className: "ds:block ds:@[448px]/tabs:hidden", children: /* @__PURE__ */ a(
-        D,
-        {
-          options: r,
-          value: f,
-          onValueChange: (e) => {
-            typeof e == "string" && e.length > 0 && g(e);
-          },
-          size: t,
-          "aria-label": n ?? w("tabs.selectLabel")
-        }
-      ) }),
-      /* @__PURE__ */ a("div", { className: "ds:hidden ds:@[448px]/tabs:flex ds:relative ds:items-center", children: /* @__PURE__ */ a(
-        j.List,
-        {
-          ref: z,
-          "aria-label": n,
-          className: P({ variant: u, orientation: m, className: o }),
-          ...d,
-          children: s
-        }
-      ) })
-    ] }) : /* @__PURE__ */ C("div", { className: "ds:relative ds:flex ds:items-center", children: [
-      /* @__PURE__ */ a(
-        j.List,
-        {
-          ref: z,
-          "aria-label": n,
-          className: P({ variant: u, orientation: m, className: o }),
-          ...d,
-          children: s
-        }
-      ),
-      h && v.length > 0 && /* @__PURE__ */ a(
-        ne,
-        {
-          tabs: v,
-          label: w("tabs.moreTabs"),
-          size: t
-        }
-      )
-    ] });
-  }
-);
-U.displayName = "TabsList";
-function ne({ tabs: o, label: s, size: n }) {
-  const { variant: d } = I(O);
-  return /* @__PURE__ */ C(k.Root, { children: [
-    /* @__PURE__ */ C(
-      k.Trigger,
-      {
-        className: N(
-          G({ variant: d, size: n, orientation: "horizontal" }),
-          "ds:shrink-0 ds:ms-1"
-        ),
-        "aria-label": s,
-        children: [
-          s,
-          /* @__PURE__ */ a(re, { "aria-hidden": "true", className: "ds:size-4" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ a(k.Portal, { children: /* @__PURE__ */ a(
-      k.Content,
-      {
-        sideOffset: 4,
-        className: N(
-          "ds:z-[var(--z-dropdown)] ds:min-w-40 ds:overflow-hidden ds:rounded-[var(--radius-md)]",
-          "ds:border ds:border-border ds:bg-popover ds:p-1 ds:shadow-md",
-          "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
-          "ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0",
-          "ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95"
-        ),
-        children: o.map(({ value: i, label: u }) => /* @__PURE__ */ a(
-          k.Item,
-          {
-            className: N(
-              "ds:relative ds:flex ds:cursor-pointer ds:select-none ds:items-center",
-              "ds:rounded-[var(--radius-sm)] ds:px-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]",
-              "ds:text-[var(--font-size-sm)] ds:text-foreground ds:outline-none",
-              ee.highlighted,
-              "ds:data-[disabled]:pointer-events-none ds:data-[disabled]:opacity-50"
-            ),
-            onSelect: () => {
-              const t = document.querySelector(
-                `[role="tab"][data-value="${CSS.escape(i)}"]`
-              );
-              t == null || t.click(), t == null || t.scrollIntoView({ inline: "nearest" });
-            },
-            children: u
-          },
-          i
-        ))
-      }
-    ) })
-  ] });
-}
-const W = V(
-  ({
-    variant: o,
-    size: s,
-    orientation: n,
-    icon: d,
-    badge: i,
-    dismissible: u = !1,
-    onDismiss: t,
-    className: m,
-    children: l,
-    value: f,
-    onKeyDown: g,
-    ...w
-  }, b) => {
-    const v = I(O), y = o ?? v.variant, p = s ?? v.size, h = n ?? v.orientation, z = (r) => {
-      u && (r.key === "Delete" || r.key === "Backspace") && (r.preventDefault(), t == null || t()), g == null || g(r);
-    };
-    return /* @__PURE__ */ C(
-      j.Trigger,
-      {
-        ref: b,
-        value: f,
-        "data-value": f,
-        "data-tab-id": f,
-        className: G({
-          variant: y,
-          size: p,
-          orientation: h,
-          className: m
-        }),
-        onKeyDown: z,
-        ...w,
-        children: [
-          d && /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "ds:shrink-0 ds:size-4", children: d }),
-          l,
-          i && /* @__PURE__ */ a("span", { className: "ds:shrink-0", children: i }),
-          u && // Visual-only dismiss indicator — pointer dismiss fires here; keyboard dismiss fires via Delete/Backspace on the trigger above.
-          // No role/tabIndex to avoid nested-interactive (interactive content inside <button> is invalid HTML).
-          /* @__PURE__ */ a(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: N(
-                "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
-                "ds:size-6 ds:rounded-[var(--radius-sm)]",
-                "ds:hover:bg-muted-foreground/20"
-              ),
-              onPointerDown: (r) => {
-                r.stopPropagation(), r.preventDefault(), t == null || t();
-              },
-              children: /* @__PURE__ */ a(se, { className: "ds:size-3.5" })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-W.displayName = "TabsTrigger";
-const X = V(
-  ({ className: o, children: s, ...n }, d) => /* @__PURE__ */ a(
-    j.Content,
-    {
-      ref: d,
-      className: N(
-        "ds:mt-[var(--spacing-sm)] ds:outline-none",
-        "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
-        "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-        o
-      ),
-      ...n,
-      children: s
-    }
-  )
-);
-X.displayName = "TabsContent";
-const xe = Object.assign(H, {
-  Root: H,
-  List: U,
-  Trigger: W,
-  Content: X
-});
-export {
-  xe as T,
-  X as a,
-  U as b,
-  W as c,
-  oe as t
-};
-//# sourceMappingURL=tabs-CFsuMQ5H.js.map