@cloudraker/reki 2.6.1

package/dist/chunks/table-of-contents-gkuvkr2w6lbhi7wt.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { forwardRef as i, isValidElement as O, cloneElement as E } from "react";
+import { c as n } from "./cn-ct4n7r74mh8y0f48.js";
+const m = {
+  state: {
+    default: {
+      classes: "text-reki-subtle hover:border-reki-line hover:text-reki-default hover:font-medium",
+      description: "Inactive section link"
+    },
+    active: {
+      classes: "border-reki-brand font-medium text-reki-default",
+      description: "Currently visible / active section"
+    }
+  }
+}, A = {
+  state: "default"
+}, u = "block w-full truncate border-l-2 border-transparent py-0.5 pl-4 text-sm text-left no-underline", T = i(
+  ({ className: t, "aria-label": a = "Table of contents", ...s }, l) => /* @__PURE__ */ e("nav", { ref: l, "aria-label": a, className: t, ...s })
+), N = i(({ className: t, ...a }, s) => /* @__PURE__ */ e(
+  "p",
+  {
+    ref: s,
+    className: n(
+      "mb-3 text-xs font-semibold tracking-wide text-reki-subtle uppercase",
+      t
+    ),
+    ...a
+  }
+)), C = i(({ className: t, ...a }, s) => /* @__PURE__ */ e(
+  "ul",
+  {
+    ref: s,
+    className: n(
+      "flex flex-col gap-2 border-l-2 border-reki-hairline",
+      t
+    ),
+    ...a
+  }
+)), x = i(({ active: t = !1, className: a, children: s, render: l, ...o }, r) => {
+  const c = t ? m.state.active.classes : m.state.default.classes, d = n(u, c, a), f = {
+    ref: r,
+    "aria-current": t ? "true" : void 0,
+    "data-reki-component": "TableOfContents",
+    "data-reki-part": "item",
+    className: d,
+    children: /* @__PURE__ */ e("span", { className: "block min-w-0 leading-5", children: s }),
+    ...o
+  };
+  return l && O(l) ? /* @__PURE__ */ e("li", { className: "-ml-0.5", children: E(l, f) }) : /* @__PURE__ */ e("li", { className: "-ml-0.5", children: /* @__PURE__ */ e("a", { ...f }) });
+}), p = "flex flex-col gap-2 border-l-2 border-reki-hairline [&>li>a]:pl-7 [&>li>button]:pl-7", k = i(({ label: t, href: a, active: s = !1, className: l, children: o, ...r }, c) => {
+  if (a) {
+    const d = s ? m.state.active.classes : m.state.default.classes;
+    return /* @__PURE__ */ b(
+      "li",
+      {
+        ref: c,
+        className: n("-ml-0.5 flex flex-col gap-2", l),
+        ...r,
+        children: [
+          /* @__PURE__ */ e(
+            "a",
+            {
+              href: a,
+              "aria-current": s ? "true" : void 0,
+              "data-reki-component": "TableOfContents",
+              "data-reki-part": "group-link",
+              className: n(u, d),
+              children: /* @__PURE__ */ e("span", { className: "block min-w-0 leading-5", children: t })
+            }
+          ),
+          /* @__PURE__ */ e("ul", { className: n(p), children: o })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ b(
+    "li",
+    {
+      ref: c,
+      className: n("-ml-0.5 flex flex-col gap-2", l),
+      ...r,
+      children: [
+        /* @__PURE__ */ e("p", { className: "py-0.5 pl-4 text-sm leading-5 font-medium text-reki-subtle", children: t }),
+        /* @__PURE__ */ e("ul", { className: n(p), children: o })
+      ]
+    }
+  );
+});
+T.displayName = "TableOfContents";
+N.displayName = "TableOfContents.Title";
+C.displayName = "TableOfContents.List";
+x.displayName = "TableOfContents.Item";
+k.displayName = "TableOfContents.Group";
+const I = Object.assign(T, {
+  Title: N,
+  List: C,
+  Item: x,
+  Group: k
+});
+export {
+  A as R,
+  I as T,
+  m as a
+};
+//# sourceMappingURL=table-of-contents-gkuvkr2w6lbhi7wt.js.map

package/dist/chunks/table-of-contents-gkuvkr2w6lbhi7wt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-of-contents-gkuvkr2w6lbhi7wt.js","sources":["../../src/components/table-of-contents/table-of-contents.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** TableOfContents item state variant definitions. */\nexport const REKI_TABLE_OF_CONTENTS_VARIANTS = {\n  state: {\n    default: {\n      classes:\n        \"text-reki-subtle hover:border-reki-line hover:text-reki-default hover:font-medium\",\n      description: \"Inactive section link\",\n    },\n    active: {\n      classes: \"border-reki-brand font-medium text-reki-default\",\n      description: \"Currently visible / active section\",\n    },\n  },\n} as const;\n\nexport const REKI_TABLE_OF_CONTENTS_DEFAULT_VARIANTS = {\n  state: \"default\",\n} as const;\n\nexport type RekiTableOfContentsState =\n  keyof typeof REKI_TABLE_OF_CONTENTS_VARIANTS.state;\n\nconst ITEM_BASE =\n  \"block w-full truncate border-l-2 border-transparent py-0.5 pl-4 text-sm text-left no-underline\";\n\nexport type TableOfContentsProps = React.HTMLAttributes<HTMLElement>;\n\nconst TableOfContentsRoot = forwardRef<HTMLElement, TableOfContentsProps>(\n  (\n    { className, \"aria-label\": ariaLabel = \"Table of contents\", ...props },\n    ref,\n  ) => (\n    <nav ref={ref} aria-label={ariaLabel} className={className} {...props} />\n  ),\n);\n\nexport type TableOfContentsTitleProps =\n  React.HTMLAttributes<HTMLParagraphElement>;\n\nconst TableOfContentsTitle = forwardRef<\n  HTMLParagraphElement,\n  TableOfContentsTitleProps\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      \"mb-3 text-xs font-semibold tracking-wide text-reki-subtle uppercase\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nexport type TableOfContentsListProps = React.HTMLAttributes<HTMLUListElement>;\n\nconst TableOfContentsList = forwardRef<\n  HTMLUListElement,\n  TableOfContentsListProps\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\n      \"flex flex-col gap-2 border-l-2 border-reki-hairline\",\n      className,\n    )}\n    {...props}\n  />\n));\nexport interface TableOfContentsItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Whether this item represents the currently active section. */\n  active?: boolean;\n  /**\n   * Custom element to render as the link. Use this to integrate with\n   * framework routers (e.g., Next.js `<Link>`, React Router `<NavLink>`).\n   * The element receives all anchor props including `href`, `className`, and `children`.\n   *\n   * @example\n   * ```tsx\n   * <TableOfContents.Item render={<Link />} href=\"/intro\" active>\n   *   Introduction\n   * </TableOfContents.Item>\n   * ```\n   */\n  render?: React.ReactElement;\n}\n\nconst TableOfContentsItem = forwardRef<\n  HTMLAnchorElement,\n  TableOfContentsItemProps\n>(({ active = false, className, children, render, ...props }, ref) => {\n  const stateClasses = active\n    ? REKI_TABLE_OF_CONTENTS_VARIANTS.state.active.classes\n    : REKI_TABLE_OF_CONTENTS_VARIANTS.state.default.classes;\n\n  const combinedClassName = cn(ITEM_BASE, stateClasses, className);\n\n  const innerContent = (\n    <span className=\"block min-w-0 leading-5\">{children}</span>\n  );\n\n  const sharedProps = {\n    ref,\n    \"aria-current\": active ? (\"true\" as const) : undefined,\n    \"data-reki-component\": \"TableOfContents\",\n    \"data-reki-part\": \"item\",\n    className: combinedClassName,\n    children: innerContent,\n    ...props,\n  };\n\n  // If a render prop is provided, clone it with our props\n  if (render && isValidElement(render)) {\n    return <li className=\"-ml-0.5\">{cloneElement(render, sharedProps)}</li>;\n  }\n\n  // Default to anchor tag\n  return (\n    <li className=\"-ml-0.5\">\n      {/* oxlint-disable-next-line anchor-has-content -- children are in sharedProps */}\n      <a {...sharedProps} />\n    </li>\n  );\n});\n\nexport interface TableOfContentsGroupProps extends Omit<\n  React.HTMLAttributes<HTMLLIElement>,\n  \"title\"\n> {\n  /** Label displayed above the group's items. */\n  label: string;\n  /** URL the group label links to. When provided, the label renders as a clickable link with item styling. */\n  href?: string;\n  /** Whether this group's label represents the currently active section. Only applies when `href` is provided. */\n  active?: boolean;\n}\n\nconst NESTED_UL_CLASSES =\n  \"flex flex-col gap-2 border-l-2 border-reki-hairline [&>li>a]:pl-7 [&>li>button]:pl-7\";\n\nconst TableOfContentsGroup = forwardRef<\n  HTMLLIElement,\n  TableOfContentsGroupProps\n>(({ label, href, active = false, className, children, ...props }, ref) => {\n  if (href) {\n    const stateClasses = active\n      ? REKI_TABLE_OF_CONTENTS_VARIANTS.state.active.classes\n      : REKI_TABLE_OF_CONTENTS_VARIANTS.state.default.classes;\n\n    return (\n      <li\n        ref={ref}\n        className={cn(\"-ml-0.5 flex flex-col gap-2\", className)}\n        {...props}\n      >\n        <a\n          href={href}\n          aria-current={active ? (\"true\" as const) : undefined}\n          data-reki-component=\"TableOfContents\"\n          data-reki-part=\"group-link\"\n          className={cn(ITEM_BASE, stateClasses)}\n        >\n          <span className=\"block min-w-0 leading-5\">{label}</span>\n        </a>\n        <ul className={cn(NESTED_UL_CLASSES)}>{children}</ul>\n      </li>\n    );\n  }\n\n  return (\n    <li\n      ref={ref}\n      className={cn(\"-ml-0.5 flex flex-col gap-2\", className)}\n      {...props}\n    >\n      <p className=\"py-0.5 pl-4 text-sm leading-5 font-medium text-reki-subtle\">\n        {label}\n      </p>\n      <ul className={cn(NESTED_UL_CLASSES)}>{children}</ul>\n    </li>\n  );\n});\n\nTableOfContentsRoot.displayName = \"TableOfContents\";\nTableOfContentsTitle.displayName = \"TableOfContents.Title\";\nTableOfContentsList.displayName = \"TableOfContents.List\";\nTableOfContentsItem.displayName = \"TableOfContents.Item\";\nTableOfContentsGroup.displayName = \"TableOfContents.Group\";\n\n/**\n * TableOfContents — presentational compound component for section navigation.\n *\n * Purely visual; all interaction logic (scroll tracking, active state management)\n * is left to the consumer.\n *\n * @example\n * ```tsx\n * <TableOfContents>\n *   <TableOfContents.Title>On this page</TableOfContents.Title>\n *   <TableOfContents.List>\n *     <TableOfContents.Item href=\"#intro\" active>Introduction</TableOfContents.Item>\n *     <TableOfContents.Group label=\"Getting Started\">\n *       <TableOfContents.Item href=\"#install\">Installation</TableOfContents.Item>\n *       <TableOfContents.Item href=\"#setup\">Setup</TableOfContents.Item>\n *     </TableOfContents.Group>\n *   </TableOfContents.List>\n * </TableOfContents>\n * ```\n */\nexport const TableOfContents = Object.assign(TableOfContentsRoot, {\n  Title: TableOfContentsTitle,\n  List: TableOfContentsList,\n  Item: TableOfContentsItem,\n  Group: TableOfContentsGroup,\n});\n"],"names":["REKI_TABLE_OF_CONTENTS_VARIANTS","REKI_TABLE_OF_CONTENTS_DEFAULT_VARIANTS","ITEM_BASE","TableOfContentsRoot","forwardRef","className","ariaLabel","props","ref","TableOfContentsTitle","jsx","cn","TableOfContentsList","TableOfContentsItem","active","children","render","stateClasses","combinedClassName","sharedProps","isValidElement","cloneElement","NESTED_UL_CLASSES","TableOfContentsGroup","label","href","jsxs","TableOfContents"],"mappings":";;;;AAIO,MAAMA,IAAkC;AAAA,EAC7C,OAAO;AAAA,IACL,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA0C;AAAA,EACrD,OAAO;AACT,GAKMC,IACJ,kGAIIC,IAAsBC;AAAA,EAC1B,CACE,EAAE,WAAAC,GAAW,cAAcC,IAAY,qBAAqB,GAAGC,KAC/DC,wBAEC,OAAA,EAAI,KAAAA,GAAU,cAAYF,GAAW,WAAAD,GAAuB,GAAGE,EAAA,CAAO;AAE3E,GAKME,IAAuBL,EAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD,GAIKK,IAAsBR,EAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD,GAmBKM,IAAsBT,EAG1B,CAAC,EAAE,QAAAU,IAAS,IAAO,WAAAT,GAAW,UAAAU,GAAU,QAAAC,GAAQ,GAAGT,EAAA,GAASC,MAAQ;AACpE,QAAMS,IAAeH,IACjBd,EAAgC,MAAM,OAAO,UAC7CA,EAAgC,MAAM,QAAQ,SAE5CkB,IAAoBP,EAAGT,GAAWe,GAAcZ,CAAS,GAMzDc,IAAc;AAAA,IAClB,KAAAX;AAAA,IACA,gBAAgBM,IAAU,SAAmB;AAAA,IAC7C,uBAAuB;AAAA,IACvB,kBAAkB;AAAA,IAClB,WAAWI;AAAA,IACX,UATA,gBAAAR,EAAC,QAAA,EAAK,WAAU,2BAA2B,UAAAK,GAAS;AAAA,IAUpD,GAAGR;AAAA,EAAA;AAIL,SAAIS,KAAUI,EAAeJ,CAAM,sBACzB,MAAA,EAAG,WAAU,WAAW,UAAAK,EAAaL,GAAQG,CAAW,GAAE,IAKlE,gBAAAT,EAAC,QAAG,WAAU,WAEZ,4BAAC,KAAA,EAAG,GAAGS,GAAa,EAAA,CACtB;AAEJ,CAAC,GAcKG,IACJ,wFAEIC,IAAuBnB,EAG3B,CAAC,EAAE,OAAAoB,GAAO,MAAAC,GAAM,QAAAX,IAAS,IAAO,WAAAT,GAAW,UAAAU,GAAU,GAAGR,EAAA,GAASC,MAAQ;AACzE,MAAIiB,GAAM;AACR,UAAMR,IAAeH,IACjBd,EAAgC,MAAM,OAAO,UAC7CA,EAAgC,MAAM,QAAQ;AAElD,WACE,gBAAA0B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAlB;AAAA,QACA,WAAWG,EAAG,+BAA+BN,CAAS;AAAA,QACrD,GAAGE;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAAe;AAAA,cACA,gBAAcX,IAAU,SAAmB;AAAA,cAC3C,uBAAoB;AAAA,cACpB,kBAAe;AAAA,cACf,WAAWH,EAAGT,GAAWe,CAAY;AAAA,cAErC,UAAA,gBAAAP,EAAC,QAAA,EAAK,WAAU,2BAA2B,UAAAc,EAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,4BAElD,MAAA,EAAG,WAAWb,EAAGW,CAAiB,GAAI,UAAAP,EAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtD;AAEA,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAlB;AAAA,MACA,WAAWG,EAAG,+BAA+BN,CAAS;AAAA,MACrD,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG,EAAC,KAAA,EAAE,WAAU,8DACV,UAAAc,GACH;AAAA,0BACC,MAAA,EAAG,WAAWb,EAAGW,CAAiB,GAAI,UAAAP,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtD,CAAC;AAEDZ,EAAoB,cAAc;AAClCM,EAAqB,cAAc;AACnCG,EAAoB,cAAc;AAClCC,EAAoB,cAAc;AAClCU,EAAqB,cAAc;AAsB5B,MAAMI,IAAkB,OAAO,OAAOxB,GAAqB;AAAA,EAChE,OAAOM;AAAA,EACP,MAAMG;AAAA,EACN,MAAMC;AAAA,EACN,OAAOU;AACT,CAAC;"}

package/dist/chunks/tabs-e4pcjkw94kpe35x0.js

@@ -0,0 +1,177 @@
+"use client";
+import { jsxs as w, jsx as g } from "react/jsx-runtime";
+import { useRef as h, useState as z, useEffect as D } from "react";
+import { c as u } from "./cn-ct4n7r74mh8y0f48.js";
+import { bg as N, bh as y, bi as L, bj as R } from "./vendor-base-ui-bgl9g5nkvqy3tn36.js";
+const I = {
+  variant: "segmented",
+  size: "base"
+};
+function U({
+  tabs: o,
+  value: a,
+  selectedValue: n,
+  onValueChange: i,
+  activateOnFocus: e,
+  className: r,
+  listClassName: t,
+  indicatorClassName: f,
+  variant: v = I.variant,
+  size: C = I.size
+}) {
+  const b = o ?? [];
+  if (b.length === 0)
+    return null;
+  const T = b[0]?.value, k = a !== void 0, P = {
+    value: k ? a : void 0,
+    defaultValue: k ? void 0 : n ?? T
+  }, l = v === "segmented", d = v === "underline", c = C === "sm", { ref: x, isOverflowing: p } = O(l), S = V(x, p);
+  return /* @__PURE__ */ w(
+    N,
+    {
+      ...P,
+      className: u(
+        "relative isolate min-w-0 font-medium",
+        l && (c ? "rounded-md" : "rounded-lg") + " ring ring-reki-hairline/70",
+        r
+      ),
+      onValueChange: (s) => {
+        const m = String(s);
+        i?.(m);
+      },
+      children: [
+        l && /* @__PURE__ */ g(
+          "div",
+          {
+            className: u(
+              "absolute inset-x-0 top-1/2 z-0 -translate-y-1/2 rounded-lg bg-reki-recessed",
+              c ? "h-6.5" : "h-9"
+            )
+          }
+        ),
+        /* @__PURE__ */ w(
+          y,
+          {
+            ref: x,
+            activateOnFocus: e,
+            "data-overflowing": p ? "" : void 0,
+            ...S(),
+            className: u(
+              "relative flex min-w-0 shrink items-stretch",
+              l && "reki-tabs-list overflow-x-auto rounded-lg bg-reki-recessed px-0.5 [--scroll-fade-width:3rem] scroll-px-(--scroll-fade-width)",
+              l && (c ? "h-6.5 rounded-md" : "h-9"),
+              p && "cursor-grab active:cursor-grabbing",
+              d && "gap-4 border-b border-reki-hairline pb-2",
+              d && (c ? "h-6.5" : "h-7.5"),
+              t
+            ),
+            children: [
+              b.map((s) => /* @__PURE__ */ g(
+                L,
+                {
+                  "data-reki-component": "Tabs",
+                  "data-reki-part": "tab",
+                  value: s.value,
+                  render: s.render,
+                  onClick: (m) => {
+                    m.currentTarget.scrollIntoView({
+                      behavior: "smooth",
+                      block: "nearest",
+                      inline: "nearest"
+                    });
+                  },
+                  className: u(
+                    "relative z-2 flex items-center rounded bg-transparent whitespace-nowrap focus:outline-none focus:ring-reki-focus/50 focus-visible:ring-2 focus-visible:ring-reki-brand",
+                    p ? "cursor-grab active:cursor-grabbing" : "cursor-pointer",
+                    c ? "text-xs" : "text-base",
+                    l && "my-0.5 text-reki-subtle hover:text-reki-default aria-selected:text-reki-default focus-visible:ring-inset",
+                    l && (c ? "px-2 rounded-sm" : "px-2.5 rounded-md"),
+                    d && "text-reki-subtle hover:bg-reki-tint hover:text-reki-default aria-selected:hover:bg-reki-tint aria-selected:font-medium aria-selected:text-reki-default",
+                    d && (c ? "px-1.5 py-2.5" : "px-2 py-3"),
+                    s.className
+                  ),
+                  children: s.label
+                },
+                s.value
+              )),
+              /* @__PURE__ */ g(
+                R,
+                {
+                  render: (s) => /* @__PURE__ */ g(
+                    "div",
+                    {
+                      ...s,
+                      className: u(
+                        "absolute z-1 left-0",
+                        "w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200",
+                        "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0",
+                        l && u(
+                          "top-(--active-tab-top) h-(--active-tab-height) bg-reki-base shadow-sm ring ring-reki-line",
+                          c ? "rounded" : "rounded-md"
+                        ),
+                        d && "bottom-0 h-0.5 bg-reki-brand",
+                        f
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function V(o, a) {
+  const n = h(null), i = h(!1);
+  return () => ({
+    onPointerDownCapture: (e) => {
+      const r = o.current;
+      !r || !a || e.pointerType !== "mouse" || e.button !== 0 || (n.current = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        scrollLeft: r.scrollLeft,
+        dragging: !1
+      }, i.current = !1);
+    },
+    onPointerMoveCapture: (e) => {
+      const r = o.current, t = n.current;
+      if (!r || !a || !t || t.pointerId !== e.pointerId)
+        return;
+      const f = e.clientX - t.startX;
+      if (!t.dragging) {
+        if (Math.abs(f) <= 3) return;
+        t.dragging = !0, i.current = !0, r.setPointerCapture(e.pointerId);
+      }
+      e.preventDefault(), r.scrollLeft = t.scrollLeft - f;
+    },
+    onPointerUpCapture: (e) => {
+      const r = o.current, t = n.current;
+      !r || !t || t.pointerId !== e.pointerId || (n.current = null, r.hasPointerCapture(e.pointerId) && r.releasePointerCapture(e.pointerId), i.current && window.setTimeout(() => {
+        i.current = !1;
+      }, 0));
+    },
+    onPointerCancelCapture: (e) => {
+      const r = o.current, t = n.current;
+      !r || !t || t.pointerId !== e.pointerId || (n.current = null, r.hasPointerCapture(e.pointerId) && r.releasePointerCapture(e.pointerId));
+    },
+    onClickCapture: (e) => {
+      i.current && (e.preventDefault(), e.stopPropagation(), i.current = !1);
+    }
+  });
+}
+function O(o) {
+  const a = h(null), [n, i] = z(!1);
+  return D(() => {
+    if (!o) return;
+    const e = a.current;
+    if (!e) return;
+    const r = () => i(e.scrollWidth > e.clientWidth), t = new ResizeObserver(r);
+    return t.observe(e), r(), () => t.disconnect();
+  }, [o]), { ref: a, isOverflowing: n };
+}
+export {
+  U as T
+};
+//# sourceMappingURL=tabs-e4pcjkw94kpe35x0.js.map

package/dist/chunks/tabs-e4pcjkw94kpe35x0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-e4pcjkw94kpe35x0.js","sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\nimport type { TabsTab } from \"@base-ui/react/tabs\";\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn\";\n\n/** Tabs variant definitions. */\nexport const REKI_TABS_VARIANTS = {\n  variant: [\"segmented\", \"underline\"],\n  size: [\"base\", \"sm\"],\n} as const;\n\nexport const REKI_TABS_DEFAULT_VARIANTS = {\n  variant: \"segmented\",\n  size: \"base\",\n} as const;\n\nexport const REKI_TABS_STYLING = {\n  container: {\n    height: 34,\n    borderRadius: 8,\n    background: \"color-accent\",\n    padding: 1,\n  },\n  tab: {\n    paddingX: 10,\n    verticalMargin: 1,\n    fontSize: 16,\n    fontWeight: 500,\n    borderRadius: 8,\n    activeColor: \"text-color-surface\",\n    inactiveColor: \"text-color-label\",\n  },\n  indicator: {\n    background: \"color-surface-secondary\",\n    ring: \"color-color-2\",\n    borderRadius: 6,\n    shadow: \"shadow-sm\",\n  },\n} as const;\n\n// Derived types from REKI_TABS_VARIANTS\nexport interface RekiTabsVariantsProps {\n  /**\n   * Tab style.\n   * - `\"segmented\"` — Pill-shaped indicator on a filled track\n   * - `\"underline\"` — Underline indicator below tab text\n   * @default \"segmented\"\n   */\n  variant?: (typeof REKI_TABS_VARIANTS.variant)[number];\n  /**\n   * Tab size.\n   * - `\"base\"` — Default size (h-9, text-base)\n   * - `\"sm\"` — Compact size (h-6.5, text-xs) — matches Input size=\"sm\"\n   * @default \"base\"\n   */\n  size?: (typeof REKI_TABS_VARIANTS.size)[number];\n}\n\n/** Configuration for a single tab within the Tabs component. */\nexport type TabsItem = {\n  /** Unique identifier for the tab, used as the controlled value. */\n  value: string;\n  /** Display content for the tab trigger. */\n  label: ReactNode;\n  /** Additional CSS classes for this tab trigger. */\n  className?: string;\n  /**\n   * Custom render function or element to replace the tab element (e.g. for link-based tabs).\n   * When using a function, it receives the props to spread on the element and the tab's state.\n   */\n  render?: TabsTab.Props[\"render\"];\n};\n\n/**\n * Tabs component props.\n *\n * @example\n * ```tsx\n * <Tabs\n *   tabs={[\n *     { value: \"overview\", label: \"Overview\" },\n *     { value: \"settings\", label: \"Settings\" },\n *   ]}\n *   value={activeTab}\n *   onValueChange={setActiveTab}\n * />\n * ```\n */\nexport type TabsProps = RekiTabsVariantsProps & {\n  /** Array of tab items to render. */\n  tabs?: TabsItem[];\n  /** Controlled value. When set, component becomes controlled. */\n  value?: string;\n  /** Default selected value for uncontrolled mode. Ignored when `value` is set. */\n  selectedValue?: string;\n  /** Callback fired when the active tab changes. */\n  onValueChange?: (value: string) => void;\n  /**\n   * When `true`, tabs are activated immediately upon receiving focus via arrow keys.\n   * When `false` (default), tabs receive focus but require Enter/Space to activate.\n   */\n  activateOnFocus?: boolean;\n  /** Additional CSS classes for the root element. */\n  className?: string;\n  /** Additional CSS classes for the tab list element. */\n  listClassName?: string;\n  /** Additional CSS classes for the indicator element. */\n  indicatorClassName?: string;\n};\n\n/**\n * Tab navigation component with segmented or underline style.\n * Built on Base UI Tabs with animated active indicator.\n *\n * @example\n * ```tsx\n * <Tabs\n *   variant=\"segmented\"\n *   tabs={[{ value: \"tab1\", label: \"Tab 1\" }, { value: \"tab2\", label: \"Tab 2\" }]}\n *   value={active}\n *   onValueChange={setActive}\n * />\n * ```\n */\nexport function Tabs({\n  tabs,\n  value,\n  selectedValue,\n  onValueChange,\n  activateOnFocus,\n  className,\n  listClassName,\n  indicatorClassName,\n  variant = REKI_TABS_DEFAULT_VARIANTS.variant,\n  size = REKI_TABS_DEFAULT_VARIANTS.size,\n}: TabsProps) {\n  const items: TabsItem[] = tabs ?? [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const fallbackValue = items[0]?.value;\n  const isControlled = value !== undefined;\n  const rootProps = {\n    value: isControlled ? value : undefined,\n    defaultValue: isControlled ? undefined : (selectedValue ?? fallbackValue),\n  };\n\n  const isSegmented = variant === \"segmented\";\n  const isUnderline = variant === \"underline\";\n  const isSm = size === \"sm\";\n  const { ref: listRef, isOverflowing } = useOverflowDetect(isSegmented);\n  const bindDrag = useHorizontalDragScroll(listRef, isOverflowing);\n\n  return (\n    <TabsPrimitive.Root\n      {...rootProps}\n      className={cn(\n        \"relative isolate min-w-0 font-medium\",\n        isSegmented &&\n          (isSm ? \"rounded-md\" : \"rounded-lg\") + \" ring ring-reki-hairline/70\",\n        className,\n      )}\n      onValueChange={(nextValue) => {\n        const stringValue = String(nextValue);\n        onValueChange?.(stringValue);\n      }}\n    >\n      {/* Background element for segmented variant */}\n      {isSegmented && (\n        <div\n          className={cn(\n            \"absolute inset-x-0 top-1/2 z-0 -translate-y-1/2 rounded-lg bg-reki-recessed\",\n            isSm ? \"h-6.5\" : \"h-9\",\n          )}\n        />\n      )}\n      <TabsPrimitive.List\n        ref={listRef}\n        activateOnFocus={activateOnFocus}\n        data-overflowing={isOverflowing ? \"\" : undefined}\n        {...bindDrag()}\n        className={cn(\n          \"relative flex min-w-0 shrink items-stretch\",\n          isSegmented &&\n            \"reki-tabs-list overflow-x-auto rounded-lg bg-reki-recessed px-0.5 [--scroll-fade-width:3rem] scroll-px-(--scroll-fade-width)\",\n          isSegmented && (isSm ? \"h-6.5 rounded-md\" : \"h-9\"),\n          isOverflowing && \"cursor-grab active:cursor-grabbing\",\n          isUnderline && \"gap-4 border-b border-reki-hairline pb-2\",\n          isUnderline && (isSm ? \"h-6.5\" : \"h-7.5\"),\n          listClassName,\n        )}\n      >\n        {items.map((tab) => (\n          <TabsPrimitive.Tab\n            key={tab.value}\n            data-reki-component=\"Tabs\"\n            data-reki-part=\"tab\"\n            value={tab.value}\n            render={tab.render}\n            onClick={(e) => {\n              e.currentTarget.scrollIntoView({\n                behavior: \"smooth\",\n                block: \"nearest\",\n                inline: \"nearest\",\n              });\n            }}\n            className={cn(\n              \"relative z-2 flex items-center rounded bg-transparent whitespace-nowrap focus:outline-none focus:ring-reki-focus/50 focus-visible:ring-2 focus-visible:ring-reki-brand\",\n              isOverflowing\n                ? \"cursor-grab active:cursor-grabbing\"\n                : \"cursor-pointer\",\n              isSm ? \"text-xs\" : \"text-base\",\n              isSegmented &&\n                \"my-0.5 text-reki-subtle hover:text-reki-default aria-selected:text-reki-default focus-visible:ring-inset\",\n              isSegmented && (isSm ? \"px-2 rounded-sm\" : \"px-2.5 rounded-md\"),\n              isUnderline &&\n                \"text-reki-subtle hover:bg-reki-tint hover:text-reki-default aria-selected:hover:bg-reki-tint aria-selected:font-medium aria-selected:text-reki-default\",\n              isUnderline && (isSm ? \"px-1.5 py-2.5\" : \"px-2 py-3\"),\n              tab.className,\n            )}\n          >\n            {tab.label}\n          </TabsPrimitive.Tab>\n        ))}\n        <TabsPrimitive.Indicator\n          render={(props) => (\n            <div\n              {...props}\n              className={cn(\n                \"absolute z-1 left-0\",\n                \"w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200\",\n                \"data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0\",\n                isSegmented &&\n                  cn(\n                    \"top-(--active-tab-top) h-(--active-tab-height) bg-reki-base shadow-sm ring ring-reki-line\",\n                    isSm ? \"rounded\" : \"rounded-md\",\n                  ),\n                isUnderline && \"bottom-0 h-0.5 bg-reki-brand\",\n                indicatorClassName,\n              )}\n            />\n          )}\n        />\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  );\n}\n\n// ─── Horizontal drag-to-scroll ────────────────────────────────────────\n\n/**\n * Enables mouse drag to horizontally scroll the tab list.\n * Touch devices keep native horizontal overflow scrolling and inertia.\n */\nfunction useHorizontalDragScroll(\n  ref: React.RefObject<HTMLElement | null>,\n  enabled: boolean,\n) {\n  const dragState = useRef<{\n    pointerId: number;\n    startX: number;\n    scrollLeft: number;\n    dragging: boolean;\n  } | null>(null);\n  const shouldSuppressClick = useRef(false);\n\n  return () => ({\n    onPointerDownCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      if (!el || !enabled) return;\n      if (event.pointerType !== \"mouse\" || event.button !== 0) return;\n\n      dragState.current = {\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        scrollLeft: el.scrollLeft,\n        dragging: false,\n      };\n      shouldSuppressClick.current = false;\n    },\n    onPointerMoveCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !enabled || !state || state.pointerId !== event.pointerId)\n        return;\n\n      const movementX = event.clientX - state.startX;\n      if (!state.dragging) {\n        if (Math.abs(movementX) <= 3) return;\n        state.dragging = true;\n        shouldSuppressClick.current = true;\n        el.setPointerCapture(event.pointerId);\n      }\n\n      event.preventDefault();\n      el.scrollLeft = state.scrollLeft - movementX;\n    },\n    onPointerUpCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !state || state.pointerId !== event.pointerId) return;\n\n      dragState.current = null;\n      if (el.hasPointerCapture(event.pointerId)) {\n        el.releasePointerCapture(event.pointerId);\n      }\n      if (shouldSuppressClick.current) {\n        window.setTimeout(() => {\n          shouldSuppressClick.current = false;\n        }, 0);\n      }\n    },\n    onPointerCancelCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !state || state.pointerId !== event.pointerId) return;\n\n      dragState.current = null;\n      if (el.hasPointerCapture(event.pointerId)) {\n        el.releasePointerCapture(event.pointerId);\n      }\n    },\n    onClickCapture: (event: MouseEvent<HTMLElement>) => {\n      if (!shouldSuppressClick.current) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      shouldSuppressClick.current = false;\n    },\n  });\n}\n\n// ─── Overflow detection ───────────────────────────────────────────────\n\n/**\n * Detects whether the element's content overflows horizontally.\n * Returns a ref to attach and a boolean for conditional rendering.\n * The `data-overflowing` attribute drives the scroll-fade CSS.\n */\nfunction useOverflowDetect(enabled: boolean) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  useEffect(() => {\n    if (!enabled) return;\n    const el = ref.current;\n    if (!el) return;\n\n    const check = () => setIsOverflowing(el.scrollWidth > el.clientWidth);\n\n    const ro = new ResizeObserver(check);\n    ro.observe(el);\n    check();\n\n    return () => ro.disconnect();\n  }, [enabled]);\n\n  return { ref, isOverflowing };\n}\n"],"names":["REKI_TABS_DEFAULT_VARIANTS","Tabs","tabs","value","selectedValue","onValueChange","activateOnFocus","className","listClassName","indicatorClassName","variant","size","items","fallbackValue","isControlled","rootProps","isSegmented","isUnderline","isSm","listRef","isOverflowing","useOverflowDetect","bindDrag","useHorizontalDragScroll","jsxs","TabsPrimitive.Root","cn","nextValue","stringValue","jsx","TabsPrimitive.List","tab","TabsPrimitive.Tab","e","TabsPrimitive.Indicator","props","ref","enabled","dragState","useRef","shouldSuppressClick","event","el","state","movementX","setIsOverflowing","useState","useEffect","check","ro"],"mappings":"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"}

package/dist/chunks/text-oxsrbmjmfq99ue85.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as g } from "react/jsx-runtime";
+import { forwardRef as b, useMemo as y } from "react";
+import { c as T } from "./cn-ct4n7r74mh8y0f48.js";
+import { r as i } from "./resolve-variant-t8jcltsizeg29ege.js";
+const s = {
+  variant: {
+    heading1: {
+      classes: "text-3xl font-semibold",
+      description: "Large heading for page titles"
+    },
+    heading2: {
+      classes: "text-2xl font-semibold",
+      description: "Medium heading for section titles"
+    },
+    heading3: {
+      classes: "text-lg font-semibold",
+      description: "Small heading for subsections"
+    },
+    body: {
+      classes: "text-reki-default",
+      description: "Default body text"
+    },
+    secondary: {
+      classes: "text-reki-subtle",
+      description: "Muted text for secondary information"
+    },
+    success: {
+      classes: "text-reki-link",
+      description: "Success state text"
+    },
+    error: {
+      classes: "text-reki-danger",
+      description: "Error state text"
+    },
+    mono: {
+      classes: "font-mono",
+      description: "Monospace text for code"
+    },
+    "mono-secondary": {
+      classes: "font-mono text-reki-subtle",
+      description: "Muted monospace text"
+    }
+  },
+  size: {
+    xs: {
+      classes: "text-xs",
+      description: "Extra small text"
+    },
+    sm: {
+      classes: "text-sm",
+      description: "Small text"
+    },
+    base: {
+      classes: "text-base",
+      description: "Default text size"
+    },
+    lg: {
+      classes: "text-lg",
+      description: "Large text"
+    }
+  }
+}, r = {
+  variant: "body",
+  size: "base"
+};
+function h({
+  variant: e = "body",
+  bold: a = !1,
+  size: o = "base",
+  truncate: c = !1,
+  children: l,
+  DANGEROUS_className: d,
+  DANGEROUS_style: m,
+  as: t,
+  ...x
+}, f) {
+  const n = ["body", "secondary", "success", "error"].includes(e), u = ["mono", "mono-secondary"].includes(e), p = y(() => t || (["mono", "mono-secondary"].includes(e) || ["heading1", "heading2", "heading3"].includes(e) ? "span" : "p"), [e, t]);
+  return /* @__PURE__ */ g(
+    p,
+    {
+      ref: f,
+      className: T(
+        "text-reki-default",
+        i(s.variant, e, r.variant).classes,
+        n ? i(s.size, o, r.size).classes : "",
+        n && a ? "font-medium" : "",
+        // Monospace fonts need to be 1pt smaller than body text to optically match
+        u && (o === "lg" ? s.size.base.classes : s.size.sm.classes),
+        c && "truncate min-w-0",
+        d
+      ),
+      style: m,
+      ...x,
+      children: l
+    }
+  );
+}
+const _ = b(h);
+export {
+  _ as T
+};
+//# sourceMappingURL=text-oxsrbmjmfq99ue85.js.map

package/dist/chunks/text-oxsrbmjmfq99ue85.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-oxsrbmjmfq99ue85.js","sources":["../../src/components/text/text.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ForwardedRef,\n  forwardRef,\n  useMemo,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\n\n/** Text variant and size definitions mapping names to their Tailwind classes. */\nexport const REKI_TEXT_VARIANTS = {\n  variant: {\n    heading1: {\n      classes: \"text-3xl font-semibold\",\n      description: \"Large heading for page titles\",\n    },\n    heading2: {\n      classes: \"text-2xl font-semibold\",\n      description: \"Medium heading for section titles\",\n    },\n    heading3: {\n      classes: \"text-lg font-semibold\",\n      description: \"Small heading for subsections\",\n    },\n    body: {\n      classes: \"text-reki-default\",\n      description: \"Default body text\",\n    },\n    secondary: {\n      classes: \"text-reki-subtle\",\n      description: \"Muted text for secondary information\",\n    },\n    success: {\n      classes: \"text-reki-link\",\n      description: \"Success state text\",\n    },\n    error: {\n      classes: \"text-reki-danger\",\n      description: \"Error state text\",\n    },\n    mono: {\n      classes: \"font-mono\",\n      description: \"Monospace text for code\",\n    },\n    \"mono-secondary\": {\n      classes: \"font-mono text-reki-subtle\",\n      description: \"Muted monospace text\",\n    },\n  },\n  size: {\n    xs: {\n      classes: \"text-xs\",\n      description: \"Extra small text\",\n    },\n    sm: {\n      classes: \"text-sm\",\n      description: \"Small text\",\n    },\n    base: {\n      classes: \"text-base\",\n      description: \"Default text size\",\n    },\n    lg: {\n      classes: \"text-lg\",\n      description: \"Large text\",\n    },\n  },\n} as const;\n\nexport const REKI_TEXT_DEFAULT_VARIANTS = {\n  variant: \"body\",\n  size: \"base\",\n} as const;\n\n/**\n * REKI_TEXT_STYLING - Typography metadata for Figma generator\n *\n * This export provides structured styling information extracted from text.tsx\n * for use by the Figma plugin generator. It documents font sizes, weights,\n * colors, and font families used across all Text variants.\n *\n * Source of truth chain:\n * text.tsx (this file) → component-registry.json → text.ts (Figma generator)\n */\nexport const REKI_TEXT_STYLING = {\n  fontSizes: {\n    xs: 12,\n    sm: 14,\n    base: 16,\n    lg: 18,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 30,\n  },\n  fontWeights: {\n    normal: 400,\n    medium: 500,\n    semibold: 600,\n  },\n  baseColor: \"text-reki-default\",\n  variantColors: {\n    body: \"text-reki-default\",\n    secondary: \"text-reki-subtle\",\n    success: \"text-reki-link\",\n    error: \"text-reki-danger\",\n    mono: \"text-reki-default\",\n    \"mono-secondary\": \"text-reki-subtle\",\n  },\n  fontFamilies: {\n    default: \"sans-serif\",\n    mono: \"monospace\",\n  },\n} as const;\n\n// Derived types from REKI_TEXT_VARIANTS\nexport type RekiTextVariant = keyof typeof REKI_TEXT_VARIANTS.variant;\nexport type RekiTextSize = keyof typeof REKI_TEXT_VARIANTS.size;\n\nexport interface RekiTextVariantsProps {\n  variant?: RekiTextVariant;\n  size?: RekiTextSize;\n}\n\nexport function textVariants({\n  variant = REKI_TEXT_DEFAULT_VARIANTS.variant,\n  size = REKI_TEXT_DEFAULT_VARIANTS.size,\n}: RekiTextVariantsProps = {}) {\n  return cn(\n    resolveVariant(REKI_TEXT_VARIANTS.variant, variant, REKI_TEXT_DEFAULT_VARIANTS.variant).classes,\n    resolveVariant(REKI_TEXT_VARIANTS.size, size, REKI_TEXT_DEFAULT_VARIANTS.size).classes,\n  );\n}\n\n// Legacy types for backwards compatibility\ntype Heading = \"heading1\" | \"heading2\" | \"heading3\";\ntype Copy = \"body\" | \"secondary\" | \"success\" | \"error\";\ntype Monospace = \"mono\" | \"mono-secondary\";\ntype TextSize = RekiTextSize;\ntype TextVariant = RekiTextVariant;\n\n/** Valid HTML elements for the Text component's `as` prop. */\nexport type TextElement =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"p\"\n  | \"span\"\n  | \"label\"\n  | \"dt\"\n  | \"dd\"\n  | \"li\"\n  | \"figcaption\"\n  | \"legend\"\n  | \"pre\"\n  | \"code\"\n  | \"em\"\n  | \"strong\"\n  | \"small\"\n  | \"abbr\"\n  | \"time\";\n\ntype BaseTextProps = Omit<\n  ComponentPropsWithoutRef<\"span\">,\n  \"className\" | \"style\"\n> & {\n  DANGEROUS_className?: string;\n  DANGEROUS_style?: CSSProperties;\n};\n\ntype TextPropsInternal<Variant extends TextVariant = \"body\"> = BaseTextProps &\n  (Variant extends Copy\n    ? {\n        variant?: Variant;\n        bold?: boolean;\n        size?: TextSize;\n        truncate?: boolean;\n        /** Optional element override. Defaults to `<p>`. */\n        as?: TextElement;\n      }\n    : Variant extends Monospace\n      ? {\n          variant?: Variant;\n          bold?: never;\n          size?: \"lg\";\n          truncate?: boolean;\n          /** Optional element override. Defaults to `<span>`. */\n          as?: TextElement;\n        }\n      : Variant extends Heading\n        ? {\n            variant: Variant;\n            bold?: never;\n            size?: never;\n            truncate?: boolean;\n            /**\n             * Required for heading variants. Pick the element that reflects\n             * this text's place in the document outline (`\"h1\"` for a page\n             * title, `\"h2\"` for a section title, etc.) or `\"span\"` for\n             * decorative heading-styled text that is NOT a section heading.\n             *\n             * Previously optional (defaulted to `<span>`), which silently\n             * excluded real section headings from the document outline.\n             * Making it required surfaces the decision at the type level.\n             */\n            as: TextElement;\n          }\n        : never);\n\n/**\n * Text component props.\n *\n * @example\n * ```tsx\n * <Text variant=\"heading1\" as=\"h1\">Page Title</Text>\n * <Text variant=\"body\">Default paragraph text.</Text>\n * <Text variant=\"secondary\" size=\"sm\">Muted helper text</Text>\n * <Text variant=\"error\">Something went wrong</Text>\n * <Text variant=\"mono\">console.log(\"code\")</Text>\n * ```\n */\nexport interface TextProps {\n  /**\n   * Text style variant. Determines color, font, and weight.\n   * - `\"heading1\"` — Large page title (30px, semibold)\n   * - `\"heading2\"` — Section title (24px, semibold)\n   * - `\"heading3\"` — Subsection title (18px, semibold)\n   * - `\"body\"` — Default body text\n   * - `\"secondary\"` — Muted text for secondary information\n   * - `\"success\"` — Success state text\n   * - `\"error\"` — Error state text\n   * - `\"mono\"` — Monospace text for code\n   * - `\"mono-secondary\"` — Muted monospace text\n   * @default \"body\"\n   */\n  variant?: RekiTextVariant;\n  /**\n   * Text size (only applies to body/secondary/success/error variants).\n   * - `\"xs\"` — 12px\n   * - `\"sm\"` — 14px\n   * - `\"base\"` — 16px\n   * - `\"lg\"` — 18px\n   * @default \"base\"\n   */\n  size?: RekiTextSize;\n  /** Whether to use bold font weight (only applies to body variants). */\n  bold?: boolean;\n  /** Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes. */\n  truncate?: boolean;\n  /**\n   * The HTML element to render. Accepts headings (`\"h1\"`–`\"h6\"`), block text\n   * (`\"p\"`, `\"pre\"`), inline text (`\"span\"`, `\"code\"`, `\"em\"`, `\"strong\"`,\n   * `\"small\"`, `\"abbr\"`, `\"time\"`), form-related (`\"label\"`, `\"legend\"`),\n   * list/definition (`\"dt\"`, `\"dd\"`, `\"li\"`), and `\"figcaption\"`.\n   *\n   * - **Required** for heading variants (`\"heading1\"`, `\"heading2\"`,\n   *   `\"heading3\"`) — pick the element that reflects this text's place in\n   *   the document outline, or `\"span\"` for decorative heading-styled text\n   *   that is not a section heading.\n   * - **Optional** for body variants (defaults to `\"p\"`) and monospace\n   *   variants (defaults to `\"span\"`).\n   */\n  as?: TextElement;\n  /** Text content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Typography component for rendering text with consistent styling.\n * Renders as `<p>` for body variants and `<span>` for headings/mono.\n * Use the `as` prop to set semantic HTML elements for proper document outlines.\n *\n * @example\n * ```tsx\n * <Text variant=\"heading1\" as=\"h1\">Page Title</Text>\n * <Text variant=\"heading2\" as=\"h2\">Section Title</Text>\n * <Text>Default body text</Text>\n * ```\n */\nfunction _Text<Variant extends TextVariant = \"body\">(\n  {\n    variant = \"body\" as Variant,\n    bold = false,\n    size = \"base\",\n    truncate = false,\n    children,\n    DANGEROUS_className,\n    DANGEROUS_style,\n    as,\n    ...props\n  }: TextPropsInternal<Variant>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const isCopy = [\"body\", \"secondary\", \"success\", \"error\"].includes(variant);\n  const isMono = [\"mono\", \"mono-secondary\"].includes(variant);\n\n  // Heading variants no longer auto-select h1/h2/h3 to avoid coupling visual\n  // presentation to semantic HTML. Use the `as` prop to set the appropriate\n  // heading level for your document outline (e.g., as=\"h2\").\n  const Component = useMemo(() => {\n    if (as) return as;\n    if ([\"mono\", \"mono-secondary\"].includes(variant)) return \"span\";\n    // Headings and body text default to span; use `as` for semantic elements\n    if ([\"heading1\", \"heading2\", \"heading3\"].includes(variant)) return \"span\";\n    return \"p\";\n  }, [variant, as]);\n\n  return (\n    <Component\n      // The dynamic `Component` tag creates an impossible intersection of ref\n      // types across all TextElement members. We widen to the common base\n      // (HTMLElement) which is safe — all text elements extend HTMLElement.\n      ref={ref as React.RefCallback<HTMLElement>}\n      className={cn(\n        \"text-reki-default\",\n        resolveVariant(REKI_TEXT_VARIANTS.variant, variant, REKI_TEXT_DEFAULT_VARIANTS.variant).classes,\n        isCopy ? resolveVariant(REKI_TEXT_VARIANTS.size, size, REKI_TEXT_DEFAULT_VARIANTS.size).classes : \"\",\n        isCopy && bold ? \"font-medium\" : \"\",\n        // Monospace fonts need to be 1pt smaller than body text to optically match\n        isMono &&\n          (size === \"lg\"\n            ? REKI_TEXT_VARIANTS.size.base.classes\n            : REKI_TEXT_VARIANTS.size.sm.classes),\n        truncate && \"truncate min-w-0\",\n        DANGEROUS_className,\n      )}\n      style={DANGEROUS_style}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n}\n\nexport const Text = forwardRef(_Text) as <Variant extends TextVariant = \"body\">(\n  props: TextPropsInternal<Variant> & {\n    ref?: ForwardedRef<ElementRef<\"span\">>;\n  },\n) => React.ReactElement;\n"],"names":["REKI_TEXT_VARIANTS","REKI_TEXT_DEFAULT_VARIANTS","_Text","variant","bold","size","truncate","children","DANGEROUS_className","DANGEROUS_style","as","props","ref","isCopy","isMono","Component","useMemo","jsx","cn","resolveVariant","Text","forwardRef"],"mappings":";;;;;AAYO,MAAMA,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,SAAS;AAAA,EACT,MAAM;AACR;AAiNA,SAASC,EACP;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAS,CAAC,QAAQ,aAAa,WAAW,OAAO,EAAE,SAASV,CAAO,GACnEW,IAAS,CAAC,QAAQ,gBAAgB,EAAE,SAASX,CAAO,GAKpDY,IAAYC,EAAQ,MACpBN,MACA,CAAC,QAAQ,gBAAgB,EAAE,SAASP,CAAO,KAE3C,CAAC,YAAY,YAAY,UAAU,EAAE,SAASA,CAAO,IAAU,SAC5D,MACN,CAACA,GAASO,CAAE,CAAC;AAEhB,SACE,gBAAAO;AAAA,IAACF;AAAA,IAAA;AAAA,MAIC,KAAAH;AAAA,MACA,WAAWM;AAAA,QACT;AAAA,QACAC,EAAenB,EAAmB,SAASG,GAASF,EAA2B,OAAO,EAAE;AAAA,QACxFY,IAASM,EAAenB,EAAmB,MAAMK,GAAMJ,EAA2B,IAAI,EAAE,UAAU;AAAA,QAClGY,KAAUT,IAAO,gBAAgB;AAAA;AAAA,QAEjCU,MACGT,MAAS,OACNL,EAAmB,KAAK,KAAK,UAC7BA,EAAmB,KAAK,GAAG;AAAA,QACjCM,KAAY;AAAA,QACZE;AAAA,MAAA;AAAA,MAEF,OAAOC;AAAA,MACN,GAAGE;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAMa,IAAOC,EAAWnB,CAAK;"}