@alfadocs/ui-kit 1.42.0 → 1.44.0

package/dist/_chunks/{sidebar-ClTY9lLI.js → sidebar-DbZXLl8h.js}

@@ -10,7 +10,7 @@ import { Slot as ls } from "@radix-ui/react-slot";
 import { c as T } from "./index-D2ZczOXr.js";
 import { useTranslation as A } from "react-i18next";
 import { u as cs } from "./registry-DvAUVLHh.js";
-import { u as us } from "./use-edge-resize-ZnGG7gyO.js";
+import { u as us } from "./use-edge-resize-BHesP0kg.js";
 import { c as ms } from "./compose-refs-C0k0tdqF.js";
 import { a as vs, b as ps, d as fs } from "./input-surface-xyERuLU_.js";
 import { X as gs } from "./x-B5YnXwCz.js";
@@ -1347,4 +1347,4 @@ export {
   Ss as s,
   N as u
 };
-//# sourceMappingURL=sidebar-ClTY9lLI.js.map
+//# sourceMappingURL=sidebar-DbZXLl8h.js.map

package/dist/_chunks/tab-bar-Cw9UK18Z.js

@@ -0,0 +1,228 @@
+import { jsx as a, jsxs as d, Fragment as D } from "react/jsx-runtime";
+import { forwardRef as F, Fragment as O } from "react";
+import { c } from "./index-D2ZczOXr.js";
+import { useTranslation as E } from "react-i18next";
+import { B as M } from "./badge-BudgzTe_.js";
+import { D as o } from "./dropdown-menu-DU-Hrf33.js";
+import { u as P } from "./use-media-query-CcAx5SMM.js";
+import { u as Q, a as q } from "./use-scroll-overflow-UbLrUfBo.js";
+import { C as G } from "./chevron-down-DWE7GSq9.js";
+import { C as H } from "./check-DrFSN__t.js";
+import { C as I } from "./chevron-left-B8cOyH-V.js";
+import { C as J } from "./chevron-right-I9AeSxH2.js";
+function K(r) {
+  return r > 99 ? "99+" : String(r);
+}
+const U = c("ds:shrink-0", {
+  variants: {
+    position: {
+      top: "ds:pt-[var(--spacing-md)]",
+      bottom: "ds:pb-[var(--spacing-md)]"
+    },
+    fill: {
+      false: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+      true: ""
+    }
+  },
+  defaultVariants: { position: "top", fill: !1 }
+}), W = "ds:rounded-[var(--radius-lg)] ds:border ds:border-[color:var(--card-border)] ds:bg-[var(--card)]/80 ds:backdrop-blur-md ds:shadow-[var(--shadow-md)]", X = [
+  "ds:flex ds:[justify-content:safe_center] ds:overflow-x-auto ds:py-[var(--spacing-xs)]",
+  "ds:[--tabbar-mask-start:black] ds:[--tabbar-mask-end:black]",
+  "ds:ltr:data-[fade-start=true]:[--tabbar-mask-start:transparent]",
+  "ds:ltr:data-[fade-end=true]:[--tabbar-mask-end:transparent]",
+  "ds:rtl:data-[fade-start=true]:[--tabbar-mask-end:transparent]",
+  "ds:rtl:data-[fade-end=true]:[--tabbar-mask-start:transparent]",
+  "ds:[mask-image:linear-gradient(to_right,var(--tabbar-mask-start)_0,black_var(--tabbar-fade-distance,var(--spacing-lg)),black_calc(100%-var(--tabbar-fade-distance,var(--spacing-lg))),var(--tabbar-mask-end)_100%)]",
+  "ds:motion-reduce:[mask-image:none]",
+  "ds:[.theme-accessible_&]:[mask-image:none]",
+  "ds:forced-colors:[mask-image:none]"
+].join(" "), Y = c(
+  "ds:flex ds:items-stretch ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+  {
+    variants: {
+      fill: { false: "ds:shrink-0", true: "ds:w-full" }
+    },
+    defaultVariants: { fill: !1 }
+  }
+), w = c(
+  "ds:group ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:whitespace-nowrap ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-regular)] ds:text-[color:var(--foreground)] ds:no-underline ds:hover:bg-[var(--muted)]/20 ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]",
+  {
+    variants: {
+      fill: {
+        // Responsive: label under the icon below `sm`, beside it at `sm`+.
+        false: "ds:flex-col ds:sm:flex-row ds:sm:gap-[var(--spacing-sm)]",
+        // Fill the bar, always icon-over-label. No `min-w-0`, so a tab never
+        // shrinks below its label (labels never overlap); if the full set can't
+        // fit, the pill scrolls instead.
+        true: "ds:flex-1 ds:basis-0 ds:flex-col"
+      }
+    },
+    defaultVariants: { fill: !1 }
+  }
+), N = "ds:inline-flex ds:items-center ds:text-[color:var(--accent)] ds:[&>svg]:size-4", Z = "ds:group-aria-[current=page]:underline ds:group-aria-[current=page]:decoration-2 ds:group-aria-[current=page]:decoration-[color:var(--accent)] ds:group-aria-[current=page]:underline-offset-[var(--spacing-xs)]", L = "ds:flex ds:w-full ds:items-center ds:gap-[var(--spacing-sm)] ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-regular)] ds:text-[color:var(--foreground)] ds:hover:bg-[var(--muted)]/20 ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]", y = "ds:absolute ds:top-px ds:bottom-px ds:z-10 ds:flex ds:min-w-[var(--min-target-size)] ds:items-center ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]", S = "ds:start-px ds:justify-start ds:ps-[var(--spacing-xs)]", ss = "ds:end-px ds:justify-end ds:pe-[var(--spacing-xs)]", z = "ds:size-4 ds:shrink-0 ds:text-[color:var(--accent)] ds:rtl:-scale-x-100", as = F(
+  ({
+    items: r,
+    id: B,
+    ariaLabel: f,
+    onSelect: n,
+    renderLink: u,
+    fill: t = !1,
+    position: T = "top",
+    collapseToMenu: p = !1,
+    className: v
+  }, $) => {
+    const { t: g } = E(), j = P("(max-width: 640px)"), { containerRef: A, contentRef: _, isOverflowing: R } = Q(p), b = p && (j || R), {
+      ref: V,
+      canScrollStart: m,
+      canScrollEnd: h,
+      scrollByPage: x
+    } = q(!b), e = r.find((s) => s.isActive) ?? r[0];
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: $,
+        "data-component": "tab-bar",
+        "data-component-id": B,
+        className: `${U({ position: T, fill: t })}${v ? ` ${v}` : ""}`,
+        children: /* @__PURE__ */ d("div", { className: "ds:relative", children: [
+          /* @__PURE__ */ a("div", { ref: A, className: W, children: b ? /* @__PURE__ */ a("nav", { "aria-label": f, className: "ds:w-full", children: /* @__PURE__ */ d(o.Root, { children: [
+            /* @__PURE__ */ d(o.Trigger, { className: L, children: [
+              e != null && e.icon ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: N, children: e.icon }) : null,
+              /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:truncate ds:text-start", children: e == null ? void 0 : e.label }),
+              /* @__PURE__ */ a(
+                G,
+                {
+                  "aria-hidden": "true",
+                  className: "ds:size-4 ds:shrink-0 ds:text-[color:var(--muted-foreground)]"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a(
+              o.Content,
+              {
+                align: "start",
+                className: "ds:min-w-[12rem]",
+                children: r.map((s) => /* @__PURE__ */ a(
+                  o.Item,
+                  {
+                    "data-tab-id": s.id,
+                    startIcon: s.icon,
+                    endIcon: s.isActive ? /* @__PURE__ */ a(
+                      H,
+                      {
+                        "aria-hidden": "true",
+                        className: "ds:text-[color:var(--accent)]"
+                      }
+                    ) : void 0,
+                    "aria-current": s.isActive ? "page" : void 0,
+                    onSelect: () => {
+                      s.href ? window.location.assign(s.href) : n == null || n(s.id);
+                    },
+                    children: s.label
+                  },
+                  s.id
+                ))
+              }
+            )
+          ] }) }) : /* @__PURE__ */ a(
+            "div",
+            {
+              ref: V,
+              "data-fade-start": m ? "true" : void 0,
+              "data-fade-end": h ? "true" : void 0,
+              className: X,
+              children: /* @__PURE__ */ a(
+                "nav",
+                {
+                  ref: _,
+                  "aria-label": f,
+                  className: Y({ fill: t }),
+                  children: r.map((s) => {
+                    const C = typeof s.badgeCount == "number" && s.badgeCount > 0 ? s.badgeCount : void 0, i = s.isActive ? "page" : void 0, l = /* @__PURE__ */ d(D, { children: [
+                      s.icon ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: N, children: s.icon }) : null,
+                      /* @__PURE__ */ d("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+                        /* @__PURE__ */ a("span", { className: Z, children: s.label }),
+                        C !== void 0 ? /* @__PURE__ */ a(M, { variant: "neutral", children: K(C) }) : null
+                      ] })
+                    ] });
+                    if (s.href !== void 0) {
+                      const k = w({ fill: t });
+                      return u ? /* @__PURE__ */ a(O, { children: u({
+                        href: s.href,
+                        className: k,
+                        children: l,
+                        "aria-current": i,
+                        "data-tab-id": s.id,
+                        onClick: s.onClick
+                      }) }, s.id) : /* @__PURE__ */ a(
+                        "a",
+                        {
+                          href: s.href,
+                          "data-tab-id": s.id,
+                          "aria-current": i,
+                          className: k,
+                          ...s.onClick ? { onClick: s.onClick } : {},
+                          children: l
+                        },
+                        s.id
+                      );
+                    }
+                    return /* @__PURE__ */ a(
+                      "button",
+                      {
+                        type: "button",
+                        "data-tab-id": s.id,
+                        "aria-current": i,
+                        className: w({ fill: t }),
+                        onClick: () => n == null ? void 0 : n(s.id),
+                        children: l
+                      },
+                      s.id
+                    );
+                  })
+                }
+              )
+            }
+          ) }),
+          m ? /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              "aria-label": g("navigation.tabBar.scrollBack"),
+              onClick: () => x(-1),
+              className: `${y} ${S}`,
+              children: /* @__PURE__ */ a(
+                I,
+                {
+                  "aria-hidden": "true",
+                  className: z
+                }
+              )
+            }
+          ) : null,
+          h ? /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              "aria-label": g("navigation.tabBar.scrollForward"),
+              onClick: () => x(1),
+              className: `${y} ${ss}`,
+              children: /* @__PURE__ */ a(
+                J,
+                {
+                  "aria-hidden": "true",
+                  className: z
+                }
+              )
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
+);
+as.displayName = "TabBar";
+export {
+  as as T
+};
+//# sourceMappingURL=tab-bar-Cw9UK18Z.js.map