@mintlify/components 1.0.1 → 1.0.3

package/dist/components/mermaid/mermaid.js

@@ -1,19 +1,20 @@
 import { jsxs as y, jsx as n } from "react/jsx-runtime";
 import C from "../../node_modules/.pnpm/mermaid@11.12.2/node_modules/mermaid/dist/mermaid.core.js";
-import { useState as l, useRef as T, useId as F, useEffect as c } from "react";
+import { useState as l, useRef as D, useId as F, useEffect as c } from "react";
 import { Classes as x } from "../../constants/selectors.js";
-import { useIsDarkTheme as Z } from "../../hooks/use-is-dark-theme.js";
+import { useIsDarkTheme as H } from "../../hooks/use-is-dark-theme.js";
 import { cn as I } from "../../utils/cn.js";
-import { usePanZoom as D } from "./use-pan-zoom.js";
-import { ZoomControls as H } from "./zoom-controls.js";
-const L = 120, K = ({
+import { makeMarkerIdsUnique as L } from "../../utils/make-marker-ids-unique.js";
+import { usePanZoom as Z } from "./use-pan-zoom.js";
+import { ZoomControls as q } from "./zoom-controls.js";
+const j = 120, A = 800, V = ({
   chart: u,
   className: f,
-  ariaLabel: O = "Mermaid diagram",
-  placement: w = "bottom-right",
+  ariaLabel: T = "Mermaid diagram",
+  placement: k = "bottom-right",
   actions: o
 }) => {
-  const [R, p] = l(""), [h, a] = l(null), [k, E] = l(!1), g = T(null), v = F(), { isDarkTheme: b } = Z(), { style: M, zoomIn: S, zoomOut: _, reset: s, pan: z, panStep: N } = D();
+  const [O, p] = l(""), [g, a] = l(null), [_, w] = l(!1), h = D(null), v = F(), { isDarkTheme: b } = H(), { style: E, zoomIn: M, zoomOut: R, reset: s, pan: S, panStep: N } = Z();
   return c(() => {
     s(), a(null);
   }, [s]), c(() => {
@@ -22,17 +23,23 @@ const L = 120, K = ({
       const m = {
         startOnLoad: !1,
         fontFamily: "inherit",
-        theme: b ? "dark" : "default"
+        theme: b ? "dark" : "default",
+        gantt: {
+          useWidth: A
+        }
       }, e = document.createElement("div");
       e.style.position = "absolute", e.style.left = "-9999px", e.style.top = "-9999px", document.body.appendChild(e);
       try {
         C.initialize(m);
-        const r = `mermaid-${v.replace(/:/g, "")}-${Date.now()}`, { svg: i } = await C.render(r, u, e);
-        t || (p(i), a(null));
+        const r = `mermaid-${v.replace(/:/g, "")}-${Date.now()}`, { svg: d } = await C.render(r, u, e);
+        if (!t) {
+          const z = L(d, r);
+          p(z), a(null);
+        }
       } catch (r) {
         if (console.error("Error while rendering mermaid", r), !t) {
-          const i = r instanceof Error ? r.message : "Failed to render diagram";
-          a(i), p("");
+          const d = r instanceof Error ? r.message : "Failed to render diagram";
+          a(d), p("");
         }
       } finally {
         document.body.removeChild(e);
@@ -43,19 +50,19 @@ const L = 120, K = ({
   }, [u, v, b]), c(() => {
     if (o !== void 0)
       return;
-    const t = g.current;
+    const t = h.current;
     if (!t)
       return;
-    const d = new ResizeObserver((m) => {
+    const i = new ResizeObserver((m) => {
       for (const e of m) {
         const r = e.contentRect.height;
-        E(r >= L);
+        w(r >= j);
       }
     });
-    return d.observe(t), () => {
-      d.disconnect();
+    return i.observe(t), () => {
+      i.disconnect();
     };
-  }, [o]), h ? /* @__PURE__ */ y(
+  }, [o]), g ? /* @__PURE__ */ y(
     "div",
     {
       className: I(
@@ -67,7 +74,7 @@ const L = 120, K = ({
       role: "alert",
       children: [
         /* @__PURE__ */ n("p", { className: "font-medium", "data-component-part": "mermaid-error-title", children: "Failed to render diagram" }),
-        /* @__PURE__ */ n("p", { className: "mt-1 text-xs", "data-component-part": "mermaid-error-message", children: h })
+        /* @__PURE__ */ n("p", { className: "mt-1 text-xs", "data-component-part": "mermaid-error-message", children: g })
       ]
     }
   ) : /* @__PURE__ */ y(
@@ -79,26 +86,26 @@ const L = 120, K = ({
         f
       ),
       children: [
-        (o === !0 || o === void 0 && k) && /* @__PURE__ */ n(
-          H,
+        (o === !0 || o === void 0 && _) && /* @__PURE__ */ n(
+          q,
           {
-            onPan: z,
+            onPan: S,
             onReset: s,
-            onZoomIn: S,
-            onZoomOut: _,
+            onZoomIn: M,
+            onZoomOut: R,
             panStep: N,
-            placement: w
+            placement: k
           }
         ),
         /* @__PURE__ */ n(
           "div",
           {
-            "aria-label": O,
-            dangerouslySetInnerHTML: { __html: R },
+            "aria-label": T,
+            dangerouslySetInnerHTML: { __html: O },
             "data-component-part": "mermaid-diagram",
-            ref: g,
+            ref: h,
             role: "img",
-            style: M
+            style: E
           }
         )
       ]
@@ -106,5 +113,5 @@ const L = 120, K = ({
   );
 };
 export {
-  K as Mermaid
+  V as Mermaid
 };

package/dist/components/steps/steps.d.ts

@@ -1,4 +1,5 @@
 import { default as React, ReactNode } from 'react';
+import { Rect } from 'react-use-rect';
 import { IconLibrary, IconType } from '../../utils/icon-utils';
 import { StepTitleSize } from './constants';
 type Numberish = number | `${number}`;
@@ -12,6 +13,13 @@ type StepsItemProps = {
     titleSize?: StepTitleSize;
     className?: string;
     isLast?: boolean;
+    id?: string;
+    noAnchor?: boolean;
+    scrollElementIntoView?: (id: string) => void;
+    onCopyAnchorLink?: (id: string | undefined) => void;
+    onRegisterHeading?: (id: string, rect: Rect) => void;
+    onUnregisterHeading?: (id: string) => void;
+    _hasContext?: boolean;
 };
 type StepsProps = {
     children: React.ReactElement<StepsItemProps> | React.ReactElement<StepsItemProps>[];
@@ -20,7 +28,7 @@ type StepsProps = {
 };
 declare const Steps: {
     ({ children, titleSize, className }: StepsProps): import("react/jsx-runtime").JSX.Element;
-    Item: ({ stepNumber, icon, iconType, iconLibrary, title, children, titleSize, className, isLast, }: StepsItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ stepNumber, icon, iconType, iconLibrary, title, children, titleSize, className, isLast, id, noAnchor, scrollElementIntoView, onRegisterHeading, onUnregisterHeading, _hasContext, onCopyAnchorLink, }: StepsItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export { Steps };
 export type { StepsItemProps, StepsProps };

package/dist/components/steps/steps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../../src/components/steps/steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAoB,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEnE,KAAK,SAAS,GAAG,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AAEtC,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA8GF,KAAK,UAAU,GAAG;IAChB,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAClC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;IACzC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,KAAK;yCAAwC,UAAU;wGA1G1D,cAAc;CAkIhB,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../../src/components/steps/steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,KAAK,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAMpD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAoB,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEnE,KAAK,SAAS,GAAG,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AAEtC,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACrD,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAqOF,KAAK,UAAU,GAAG;IAChB,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAClC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;IACzC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,KAAK;yCAAwC,UAAU;oNA1N1D,cAAc;CAkPhB,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/steps/steps.js

@@ -1,92 +1,190 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Classes as d } from "../../constants/selectors.js";
-import { cn as o } from "../../utils/cn.js";
-import { STEP_TITLE_SIZES as N } from "./constants.js";
-import { Icon as g } from "../icon/icon.js";
-const h = ({
-  stepNumber: r = 1,
-  icon: s,
-  iconType: m,
-  iconLibrary: n,
-  title: t,
-  children: a,
-  titleSize: i = "p",
-  className: b,
-  isLast: f = !1
+import { jsx as t, jsxs as w } from "react/jsx-runtime";
+import { useState as E, useCallback as z, useEffect as C } from "react";
+import { useRect as O } from "../../node_modules/.pnpm/react-use-rect@2.0.6_react@18.3.1/node_modules/react-use-rect/dist/index.esm.js";
+import { Classes as j } from "../../constants/selectors.js";
+import { LinkIcon as Z } from "../../icons/index.js";
+import { cn as r } from "../../utils/cn.js";
+import { copyToClipboard as _ } from "../../utils/copy-to-clipboard.js";
+import { STEP_TITLE_SIZES as q } from "./constants.js";
+import { Icon as F } from "../icon/icon.js";
+const M = ({
+  stepNumber: c = 1,
+  icon: o,
+  iconType: v,
+  iconLibrary: m,
+  title: s,
+  children: n,
+  titleSize: k = "p",
+  className: $,
+  isLast: P = !1,
+  id: e,
+  noAnchor: l = !1,
+  scrollElementIntoView: N,
+  onRegisterHeading: i,
+  onUnregisterHeading: f,
+  _hasContext: y,
+  onCopyAnchorLink: u
 }) => {
-  const u = N.includes(i) ? i : "p", v = typeof s == "string" ? /* @__PURE__ */ e(
-    g,
+  const [x, R] = E(null), [S, B] = E(!1), [D] = O(R), I = q.includes(k) ? k : "p", p = ["h2", "h3"].includes(I), T = z(async () => {
+    if (!p || l || !e || typeof window > "u")
+      return;
+    await _(
+      `${window.location.href.split("#")[0]}#${encodeURIComponent(e)}`
+    ) === "success" && (window.location.hash = encodeURIComponent(e), u == null || u(e));
+  }, [p, e, l, u]);
+  C(() => {
+    if (y && e && x)
+      return i == null || i(e, x), () => {
+        f == null || f(e);
+      };
+  }, [x, e, y, i, f]), C(() => {
+    if (!(!e || l))
+      try {
+        decodeURIComponent(window.location.hash.substring(1)) === e && (N == null || N(e));
+      } catch {
+      }
+  }, []);
+  const d = z(
+    (a) => {
+      !p || l || !e || B(a);
+    },
+    [p, l, e]
+  ), h = {
+    onMouseEnter: () => d(!0),
+    onMouseLeave: () => d(!1),
+    onClick: T
+  }, L = typeof o == "string" ? /* @__PURE__ */ t(
+    F,
     {
       className: "size-3 bg-stone-900 dark:bg-stone-50",
-      icon: s,
-      iconLibrary: n,
-      iconType: m,
+      icon: o,
+      iconLibrary: m,
+      iconType: v,
       overrideColor: !0,
       overrideSize: !0
     }
-  ) : s ?? Number(r);
+  ) : o ?? Number(c);
   return (
     // biome-ignore lint/a11y/useSemanticElements: TODO
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ w(
       "div",
       {
-        className: o(
-          d.Step,
+        className: r(
+          j.Step,
           "group/step relative flex items-start pb-5",
-          b
+          $
         ),
         "data-component-part": "step-item",
+        id: e,
+        ref: D,
         role: "listitem",
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "div",
             {
-              className: o(
+              className: r(
                 "absolute top-11 h-[calc(100%-2.75rem)] w-px",
-                f ? 'bg-linear-to-b from-stone-200 via-80% via-stone-200 to-transparent group-has-[[data-component-part="step-content"]:empty]/step:hidden dark:from-white/10 dark:via-white/10' : "bg-stone-200/70 dark:bg-white/10"
+                P ? 'bg-linear-to-b from-stone-200 via-80% via-stone-200 to-transparent group-has-[[data-component-part="step-content"]:empty]/step:hidden dark:from-white/10 dark:via-white/10' : "bg-stone-200/70 dark:bg-white/10"
               ),
               contentEditable: !1,
               "data-component-part": "step-line"
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "div",
             {
               className: "absolute ml-[-13px] py-2",
               contentEditable: !1,
               "data-component-part": "step-number",
-              children: /* @__PURE__ */ e("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-stone-50 font-semibold text-stone-900 text-xs dark:bg-white/10 dark:text-stone-50", children: v })
+              children: /* @__PURE__ */ w(
+                "div",
+                {
+                  className: "relative flex size-7 shrink-0 items-center justify-center rounded-full bg-stone-50 font-semibold text-stone-900 text-xs dark:bg-white/10 dark:text-stone-50",
+                  onMouseEnter: () => d(!0),
+                  onMouseLeave: () => d(!1),
+                  children: [
+                    /* @__PURE__ */ t("div", { className: r(S && "opacity-0"), children: L }),
+                    p && !l && e && /* @__PURE__ */ t(
+                      "div",
+                      {
+                        className: "absolute",
+                        "data-component-part": "step-number-anchor-link",
+                        children: /* @__PURE__ */ t(
+                          "a",
+                          {
+                            "aria-label": "Navigate to header",
+                            className: r(
+                              "flex items-center border-0 opacity-0",
+                              S && "opacity-100"
+                            ),
+                            href: `#${encodeURIComponent(e)}`,
+                            onClick: (a) => {
+                              a.preventDefault(), T();
+                            },
+                            children: /* @__PURE__ */ t("div", { className: "flex size-6 items-center justify-center", children: /* @__PURE__ */ t(Z, {}) })
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
             }
           ),
-          /* @__PURE__ */ c("div", { className: "w-full overflow-hidden pr-px pl-8", children: [
-            !!t && (() => {
-              const l = "mt-2 text-stone-900 dark:text-stone-200", p = {
+          /* @__PURE__ */ w("div", { className: "w-full overflow-hidden pr-px pl-8", children: [
+            !!s && (() => {
+              const a = "mt-2 text-stone-900 dark:text-stone-200", b = {
                 contentEditable: !1,
                 "data-component-part": "step-title"
               };
               return {
-                p: /* @__PURE__ */ e(
+                p: /* @__PURE__ */ t(
                   "p",
                   {
-                    className: o(
-                      l,
+                    className: r(
+                      a,
                       "prose dark:prose-invert font-semibold"
                     ),
-                    ...p,
-                    children: t
+                    ...b,
+                    ...h,
+                    children: s
                   }
                 ),
-                h2: /* @__PURE__ */ e("h2", { className: l, ...p, children: t }),
-                h3: /* @__PURE__ */ e("h3", { className: l, ...p, children: t }),
-                h4: /* @__PURE__ */ e("h4", { className: l, ...p, children: t })
-              }[u];
+                h2: /* @__PURE__ */ t(
+                  "h2",
+                  {
+                    className: a,
+                    ...b,
+                    ...h,
+                    children: s
+                  }
+                ),
+                h3: /* @__PURE__ */ t(
+                  "h3",
+                  {
+                    className: a,
+                    ...b,
+                    ...h,
+                    children: s
+                  }
+                ),
+                h4: /* @__PURE__ */ t(
+                  "h4",
+                  {
+                    className: a,
+                    ...b,
+                    ...h,
+                    children: s
+                  }
+                )
+              }[I];
             })(),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ t(
               "div",
               {
-                className: o("prose dark:prose-invert", !t && "mt-2"),
+                className: r("prose dark:prose-invert", !s && "mt-2"),
                 "data-component-part": "step-content",
-                children: a
+                children: n
               }
             )
           ] })
@@ -94,33 +192,33 @@ const h = ({
       }
     )
   );
-}, x = ({ children: r, titleSize: s, className: m }) => {
-  const n = (Array.isArray(r) ? r : [r]).filter(
+}, G = ({ children: c, titleSize: o, className: v }) => {
+  const m = (Array.isArray(c) ? c : [c]).filter(
     Boolean
   );
   return (
     // biome-ignore lint/a11y/useSemanticElements: TODO
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ t(
       "div",
       {
-        className: o(d.Steps, "mt-10 mb-6 ml-3.5", m),
+        className: r(j.Steps, "mt-10 mb-6 ml-3.5", v),
         "data-component-part": "steps",
         role: "list",
-        children: n.map(({ props: t }, a) => /* @__PURE__ */ e(
-          h,
+        children: m.map(({ props: s }, n) => /* @__PURE__ */ t(
+          M,
           {
-            ...t,
-            isLast: a === n.length - 1,
-            stepNumber: t.stepNumber ?? a + 1,
-            titleSize: t.titleSize ?? s
+            ...s,
+            isLast: n === m.length - 1,
+            stepNumber: s.stepNumber ?? n + 1,
+            titleSize: s.titleSize ?? o
           },
-          `step-${a}`
+          `step-${n}`
         ))
       }
     )
   );
 };
-x.Item = h;
+G.Item = M;
 export {
-  x as Steps
+  G as Steps
 };

package/dist/components/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,2BAA2B,EAC3B,uBAAuB,EACxB,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAKhE,KAAK,aAAa,GAAG;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,CAAC,uBAAuB,CAAC,CAAC,EAAE,MAAM,CAAC;IACnC,CAAC,2BAA2B,CAAC,CAAC,EAAE,MAAM,CAAC;CACxC,CAAC;AAMF;;;;;;;;GAQG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,YAAY,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACtE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACvC,CAAC;AAgMF,eAAO,MAAM,IAAI,gGAtLd,SAAS;yBA/BoB,aAAa;CAuN3C,CAAC;AAEH,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,2BAA2B,EAC3B,uBAAuB,EACxB,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAKhE,KAAK,aAAa,GAAG;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,CAAC,uBAAuB,CAAC,CAAC,EAAE,MAAM,CAAC;IACnC,CAAC,2BAA2B,CAAC,CAAC,EAAE,MAAM,CAAC;CACxC,CAAC;AAMF;;;;;;;;GAQG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,YAAY,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACtE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACvC,CAAC;AAwMF,eAAO,MAAM,IAAI,gGA9Ld,SAAS;yBA/BoB,aAAa;CA+N3C,CAAC;AAEH,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/tabs/tabs.js

@@ -1,36 +1,42 @@
-import { jsxs as h, jsx as p, Fragment as N } from "react/jsx-runtime";
-import { useRef as R, useId as $, Children as C, isValidElement as B, useState as H, useEffect as j, useCallback as x } from "react";
+import { jsxs as y, jsx as p, Fragment as R } from "react/jsx-runtime";
+import { useRef as $, useId as C, useMemo as I, Children as B, isValidElement as H, useState as j, useEffect as M, useCallback as h } from "react";
 import { CHILD_TAB_IDS_ATTRIBUTE as S, CHILD_HEADING_IDS_ATTRIBUTE as U } from "../../constants/index.js";
-import { Classes as y } from "../../constants/selectors.js";
-import { cn as f } from "../../utils/cn.js";
+import { Classes as v } from "../../constants/selectors.js";
+import { cn as u } from "../../utils/cn.js";
 import { slugify as F } from "../../utils/slugify.js";
 import { Icon as K } from "../icon/icon.js";
-const I = "Tab Title", M = ({ children: u }) => /* @__PURE__ */ p(N, { children: u }), q = ({
-  children: u,
-  defaultTabIndex: v = 0,
-  onTabChange: b,
-  className: k,
-  borderBottom: g,
-  ariaLabel: A,
-  panelsRef: D
+const k = "Tab Title", q = ({ children: b }) => /* @__PURE__ */ p(R, { children: b }), z = ({
+  children: b,
+  defaultTabIndex: g = 0,
+  onTabChange: m,
+  className: A,
+  borderBottom: D,
+  ariaLabel: w,
+  panelsRef: E
 }) => {
-  const m = R([]), w = $(), o = C.toArray(u).filter(
-    (t) => B(t)
-  ), s = o.map((t, e) => {
-    if (t.props.id)
-      return t.props.id;
-    const r = t.props.title ?? I;
-    return `${w}-${F(r)}-${e}`;
-  }), E = o.length > 0 ? Math.max(0, Math.min(v, o.length - 1)) : 0, [i, T] = H(E);
-  j(() => {
-    o.length > 0 && i >= o.length && T(o.length - 1);
+  const f = $([]), T = C(), o = I(
+    () => B.toArray(b).filter(
+      (t) => H(t)
+    ),
+    [b]
+  ), s = I(
+    () => o.map((t, e) => {
+      if (t.props.id)
+        return t.props.id;
+      const r = t.props.title ?? k;
+      return `${T}-${F(r)}-${e}`;
+    }),
+    [o, T]
+  ), L = o.length > 0 ? Math.max(0, Math.min(g, o.length - 1)) : 0, [i, x] = j(L);
+  M(() => {
+    o.length > 0 && i >= o.length && x(o.length - 1);
   }, [o.length, i]);
-  const l = x(
+  const l = h(
     (t) => {
-      t !== i && (T(t), b == null || b(t));
+      t !== i && (x(t), m == null || m(t));
     },
-    [i, b]
-  ), L = x(
+    [i, m]
+  ), _ = h(
     (t, e) => {
       const r = o.length;
       if (r !== 0) {
@@ -39,46 +45,46 @@ const I = "Tab Title", M = ({ children: u }) => /* @__PURE__ */ p(N, { children:
           const a = t.key === "ArrowLeft" ? (e - 1 + r) % r : (e + 1) % r;
           l(a), setTimeout(() => {
             var n;
-            (n = m.current[a]) == null || n.focus();
+            (n = f.current[a]) == null || n.focus();
           }, 0);
         } else if (t.key === "Enter" || t.key === " ")
           t.preventDefault(), l(e);
         else if (t.key === "Home")
           t.preventDefault(), l(0), setTimeout(() => {
             var a;
-            (a = m.current[0]) == null || a.focus();
+            (a = f.current[0]) == null || a.focus();
           }, 0);
         else if (t.key === "End") {
           t.preventDefault();
           const a = r - 1;
           l(a), setTimeout(() => {
             var n;
-            (n = m.current[a]) == null || n.focus();
+            (n = f.current[a]) == null || n.focus();
           }, 0);
         }
       }
     },
     [o.length, l]
   );
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ y(
     "div",
     {
-      className: f(
-        y.Tabs,
+      className: u(
+        v.Tabs,
         "tabs tab-container",
-        g && "border-stone-200 border-b pb-6 dark:border-stone-700",
-        k
+        D && "border-stone-200 border-b pb-6 dark:border-stone-700",
+        A
       ),
       children: [
         /* @__PURE__ */ p(
           "ul",
           {
-            "aria-label": A ?? "Tabs",
+            "aria-label": w ?? "Tabs",
             className: "not-prose mb-6 flex min-w-full flex-none gap-x-6 overflow-auto border-stone-200 border-b pb-px dark:border-stone-700",
             "data-component-part": "tabs-list",
             role: "tablist",
             children: o.map((t, e) => {
-              const r = t.props.title ?? I, a = t.props.icon, n = t.props.iconType, _ = t.props.iconLibrary, c = e === i;
+              const r = t.props.title ?? k, a = t.props.icon, n = t.props.iconType, N = t.props.iconLibrary, c = e === i;
               return /* @__PURE__ */ p(
                 "li",
                 {
@@ -92,16 +98,16 @@ const I = "Tab Title", M = ({ children: u }) => /* @__PURE__ */ p(N, { children:
                   onClick: (d) => {
                     d.stopPropagation(), l(e);
                   },
-                  onKeyDown: (d) => L(d, e),
+                  onKeyDown: (d) => _(d, e),
                   ref: (d) => {
-                    m.current[e] = d;
+                    f.current[e] = d;
                   },
                   role: "tab",
                   tabIndex: c ? 0 : -1,
-                  children: /* @__PURE__ */ h(
+                  children: /* @__PURE__ */ y(
                     "div",
                     {
-                      className: f(
+                      className: u(
                         "-mb-px flex max-w-max items-center gap-1.5 whitespace-nowrap border-b pt-3 pb-2.5 font-semibold text-sm leading-6",
                         c ? "border-current text-primary dark:text-primary-light" : "border-transparent text-stone-900 hover:border-stone-300 dark:text-stone-200 dark:hover:border-stone-700"
                       ),
@@ -112,13 +118,13 @@ const I = "Tab Title", M = ({ children: u }) => /* @__PURE__ */ p(N, { children:
                         a && /* @__PURE__ */ p(
                           K,
                           {
-                            className: f(
+                            className: u(
                               "size-4 shrink-0",
                               c ? "bg-primary dark:bg-primary-light" : "bg-stone-900 dark:bg-stone-200",
-                              y.TabIcon
+                              v.TabIcon
                             ),
                             icon: a,
-                            iconLibrary: _,
+                            iconLibrary: N,
                             iconType: n,
                             overrideColor: !0
                           }
@@ -133,14 +139,14 @@ const I = "Tab Title", M = ({ children: u }) => /* @__PURE__ */ p(N, { children:
             })
           }
         ),
-        /* @__PURE__ */ p("div", { "data-component-part": "tabs-panels", ref: D, children: o.map((t, e) => {
+        /* @__PURE__ */ p("div", { "data-component-part": "tabs-panels", ref: E, children: o.map((t, e) => {
           const r = e === i;
           return /* @__PURE__ */ p(
             "div",
             {
               "aria-hidden": !r,
               "aria-labelledby": s[e],
-              className: f(
+              className: u(
                 "prose dark:prose-invert overflow-x-auto",
                 !r && "hidden"
               ),
@@ -156,9 +162,9 @@ const I = "Tab Title", M = ({ children: u }) => /* @__PURE__ */ p(N, { children:
       ]
     }
   );
-}, W = Object.assign(q, {
-  Item: M
+}, X = Object.assign(z, {
+  Item: q
 });
 export {
-  W as Tabs
+  X as Tabs
 };