@mintlify/msft-sdk 1.1.0 → 1.1.2

package/dist/components/content-components/param-name.js

@@ -1,9 +1,8 @@
-import { jsx as a } from "react/jsx-runtime";
-import m from "./param-name.module.css.js";
-function s({ children: r }) {
-  return /* @__PURE__ */ a("span", { className: `not-prose ${m.paramName}`, children: r });
+import { jsx as m } from "react/jsx-runtime";
+function i({ children: n }) {
+  return /* @__PURE__ */ m("span", { className: "not-prose mint:inline-block mint:mt-2 mint:mr-1 mint:px-1.5 mint:py-0.5 mint:text-sm mint:font-semibold mint:font-mono mint:rounded mint:bg-gray-100 mint:dark:bg-[#2d2d2d]", children: n });
 }
 export {
-  s as ParamName
+  i as ParamName
 };
 //# sourceMappingURL=param-name.js.map

package/dist/components/content-components/param-name.js.map

@@ -1 +1 @@
-{"version":3,"file":"param-name.js","sources":["../../../src/components/content-components/param-name.tsx"],"sourcesContent":["import styles from \"./param-name.module.css\";\n\ninterface ParamNameProps {\n  children: React.ReactNode;\n}\n\nexport function ParamName({ children }: ParamNameProps) {\n  return <span className={`not-prose ${styles.paramName}`}>{children}</span>;\n}\n"],"names":["ParamName","children","styles"],"mappings":";;AAMO,SAASA,EAAU,EAAE,UAAAC,KAA4B;AACtD,2BAAQ,QAAA,EAAK,WAAW,aAAaC,EAAO,SAAS,IAAK,UAAAD,GAAS;AACrE;"}
+{"version":3,"file":"param-name.js","sources":["../../../src/components/content-components/param-name.tsx"],"sourcesContent":["interface ParamNameProps {\n  children: React.ReactNode;\n}\n\nexport function ParamName({ children }: ParamNameProps) {\n  return (\n    <span className=\"not-prose mint:inline-block mint:mt-2 mint:mr-1 mint:px-1.5 mint:py-0.5 mint:text-sm mint:font-semibold mint:font-mono mint:rounded mint:bg-gray-100 mint:dark:bg-[#2d2d2d]\">\n      {children}\n    </span>\n  );\n}\n"],"names":["ParamName","children","jsx"],"mappings":";AAIO,SAASA,EAAU,EAAE,UAAAC,KAA4B;AACtD,SACE,gBAAAC,EAAC,QAAA,EAAK,WAAU,+KACb,UAAAD,EAAA,CACH;AAEJ;"}

package/dist/components/content-components/table/index.js

@@ -1,122 +1,156 @@
-import { jsxs as r, Fragment as m, jsx as t } from "react/jsx-runtime";
-import * as s from "react";
-import { useState as p } from "react";
-import { TableModal as f } from "./table-modal.js";
-import { ArrowExpand20Regular as N } from "@fluentui/react-icons";
-import o from "./table.module.css.js";
-const T = s.forwardRef(({ className: a, children: e, ...l }, n) => {
-  const [c, d] = p(!1), i = () => {
-    d(!0);
+import { jsxs as d, Fragment as c, jsx as r } from "react/jsx-runtime";
+import * as i from "react";
+import { useState as f } from "react";
+import { TableModal as g } from "./table-modal.js";
+import { ArrowExpand20Regular as x } from "@fluentui/react-icons";
+import { cn as n } from "../../../utils/cn.js";
+const p = i.forwardRef(({ className: t, children: a, ...e }, l) => {
+  const [o, m] = f(!1), s = () => {
+    m(!0);
   }, b = () => {
-    d(!1);
+    m(!1);
   };
-  return /* @__PURE__ */ r(m, { children: [
-    /* @__PURE__ */ r(
+  return /* @__PURE__ */ d(c, { children: [
+    /* @__PURE__ */ d(
       "div",
       {
-        className: o.container,
+        className: "mint:relative mint:block mint:mb-4 mint:mt-8",
         role: "region",
         "aria-label": "Data table",
         children: [
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ d(
             "button",
             {
-              onClick: i,
-              className: o.expandButton,
+              onClick: s,
+              className: "mint:ml-auto mint:flex mint:items-center mint:gap-2 mint:px-2 mint:py-1 mint:rounded-lg mint:bg-transparent mint:border-none mint:cursor-pointer mint:hover:bg-gray-100 mint:dark:hover:bg-[#2d2d2d]",
               "aria-label": "Expand table to full screen view",
               title: "Expand table",
               children: [
-                /* @__PURE__ */ t(N, { className: o.expandIcon }),
-                /* @__PURE__ */ t("span", { className: o.expandText, children: "Expand table" })
+                /* @__PURE__ */ r(x, { className: "mint:h-4 mint:w-4 mint:text-gray-700 mint:dark:text-gray-200" }),
+                /* @__PURE__ */ r("span", { className: "mint:text-sm mint:text-gray-700 mint:dark:text-gray-200", children: "Expand table" })
               ]
             }
           ),
-          /* @__PURE__ */ t("div", { className: o.scrollContainer, children: /* @__PURE__ */ t(
+          /* @__PURE__ */ r("div", { className: "mint:mt-2 mint:overflow-x-auto", children: /* @__PURE__ */ r(
             "table",
             {
-              ref: n,
-              className: `${o.table} ${a || ""}`,
-              ...l,
-              children: e
+              ref: l,
+              className: n(
+                "mint:mt-2 mint:border-collapse mint:text-sm mint:w-full mint:rounded-xl mint:overflow-hidden mint:bg-gray-50 mint:dark:bg-[#2d2d2d]",
+                t
+              ),
+              ...e,
+              children: a
             }
           ) })
         ]
       }
     ),
-    /* @__PURE__ */ t(f, { isOpen: c, onClose: b, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ r(g, { isOpen: o, onClose: b, children: /* @__PURE__ */ r(
       "table",
       {
-        className: `${o.table} ${a || ""}`,
-        children: e
+        className: n(
+          "mint:mt-2 mint:border-collapse mint:text-sm mint:w-full mint:rounded-xl mint:overflow-hidden mint:bg-gray-50 mint:dark:bg-[#2d2d2d]",
+          t
+        ),
+        children: a
       }
     ) })
   ] });
 });
-T.displayName = "Table";
-const $ = s.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ t(
+p.displayName = "Table";
+const y = i.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "thead",
   {
-    ref: l,
-    className: `${o.tableHeader} ${a || ""}`,
-    ...e
+    ref: e,
+    className: n(
+      "mint:text-gray-700 mint:bg-gray-50 mint:dark:text-gray-300 mint:dark:bg-[#2d2d2d] mint:[&>tr]:border-0",
+      t
+    ),
+    ...a
+  }
+));
+y.displayName = "TableHeader";
+const h = i.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+  "tbody",
+  {
+    ref: e,
+    className: n(
+      "mint:[&>tr:first-child>td:first-child]:rounded-tl-xl mint:[&>tr:first-child>td:last-child]:rounded-tr-xl mint:[&>tr:last-child>td:first-child]:rounded-bl-xl mint:[&>tr:last-child>td:last-child]:rounded-br-xl",
+      t
+    ),
+    ...a
   }
 ));
-$.displayName = "TableHeader";
-const w = s.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ t("tbody", { ref: l, className: a, ...e }));
-w.displayName = "TableBody";
-const R = s.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ t(
+h.displayName = "TableBody";
+const u = i.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "tfoot",
   {
-    ref: l,
-    className: `${o.tableFooter} ${a || ""}`,
-    ...e
+    ref: e,
+    className: n(
+      "mint:border-t mint:border-gray-200 mint:bg-gray-50/50 mint:font-medium mint:dark:border-t-gray-600 mint:dark:bg-[#2d2d2d]/50 mint:[&>tr:last-child]:border-b-0",
+      t
+    ),
+    ...a
   }
 ));
-R.displayName = "TableFooter";
-const x = s.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ t(
+u.displayName = "TableFooter";
+const N = i.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "tr",
   {
-    ref: l,
-    className: `${o.tableRow} ${a || ""}`,
-    ...e
+    ref: e,
+    className: n(
+      "mint:border mint:border-gray-50 mint:dark:border-[#2d2d2d]",
+      t
+    ),
+    ...a
   }
 ));
-x.displayName = "TableRow";
-const y = s.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ t(
+N.displayName = "TableRow";
+const w = i.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "th",
   {
-    ref: l,
-    className: `${o.tableHead} ${a || ""}`,
-    ...e
+    ref: e,
+    className: n(
+      "mint:h-10 mint:bg-gray-50 mint:overflow-hidden mint:px-6 mint:text-left mint:font-semibold mint:text-gray-700 mint:first:rounded-tl-xl mint:last:rounded-tr-xl mint:dark:bg-[#2d2d2d] mint:dark:text-gray-300",
+      t
+    ),
+    ...a
   }
 ));
-y.displayName = "TableHead";
-const C = s.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ t(
+w.displayName = "TableHead";
+const k = i.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "td",
   {
-    ref: l,
-    className: `${o.tableCell} ${a || ""}`,
-    ...e
+    ref: e,
+    className: n(
+      "mint:bg-white mint:border-gray-50 mint:px-6 mint:py-3 mint:text-[#141414] mint:dark:bg-[#252525] mint:dark:border-[#2d2d2d] mint:dark:text-gray-200",
+      t
+    ),
+    ...a
   }
 ));
-C.displayName = "TableCell";
-const h = s.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ t(
+k.displayName = "TableCell";
+const T = i.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "caption",
   {
-    ref: l,
-    className: `${o.tableCaption} ${a || ""}`,
-    ...e
+    ref: e,
+    className: n(
+      "mint:mt-4 mint:text-sm mint:text-gray-500 mint:dark:text-gray-400",
+      t
+    ),
+    ...a
   }
 ));
-h.displayName = "TableCaption";
+T.displayName = "TableCaption";
 export {
-  T as Table,
-  w as TableBody,
-  h as TableCaption,
-  C as TableCell,
-  R as TableFooter,
-  y as TableHead,
-  $ as TableHeader,
-  x as TableRow
+  p as Table,
+  h as TableBody,
+  T as TableCaption,
+  k as TableCell,
+  u as TableFooter,
+  w as TableHead,
+  y as TableHeader,
+  N as TableRow
 };
 //# sourceMappingURL=index.js.map

package/dist/components/content-components/table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/content-components/table/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState } from \"react\";\nimport { TableModal } from \"./table-modal\";\nimport { ArrowExpand20Regular } from \"@fluentui/react-icons\";\nimport styles from \"./table.module.css\";\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, children, ...props }, ref) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleExpandClick = () => {\n    setIsModalOpen(true);\n  };\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false);\n  };\n\n  return (\n    <>\n      <div\n        className={styles.container}\n        role=\"region\"\n        aria-label=\"Data table\"\n      >\n        <button\n          onClick={handleExpandClick}\n          className={styles.expandButton}\n          aria-label=\"Expand table to full screen view\"\n          title=\"Expand table\"\n        >\n          <ArrowExpand20Regular className={styles.expandIcon} />\n          <span className={styles.expandText}>\n            Expand table\n          </span>\n        </button>\n        <div className={styles.scrollContainer}>\n          <table\n            ref={ref}\n            className={`${styles.table} ${className || \"\"}`}\n            {...props}\n          >\n            {children}\n          </table>\n        </div>\n      </div>\n      <TableModal isOpen={isModalOpen} onClose={handleCloseModal}>\n        <table\n          className={`${styles.table} ${className || \"\"}`}\n        >\n          {children}\n        </table>\n      </TableModal>\n    </>\n  );\n});\nTable.displayName = \"Table\";\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead\n    ref={ref}\n    className={`${styles.tableHeader} ${className || \"\"}`}\n    {...props}\n  />\n));\nTableHeader.displayName = \"TableHeader\";\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody ref={ref} className={className} {...props} />\n));\nTableBody.displayName = \"TableBody\";\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={`${styles.tableFooter} ${className || \"\"}`}\n    {...props}\n  />\n));\nTableFooter.displayName = \"TableFooter\";\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={`${styles.tableRow} ${className || \"\"}`}\n    {...props}\n  />\n));\nTableRow.displayName = \"TableRow\";\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={`${styles.tableHead} ${className || \"\"}`}\n    {...props}\n  />\n));\nTableHead.displayName = \"TableHead\";\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={`${styles.tableCell} ${className || \"\"}`}\n    {...props}\n  />\n));\nTableCell.displayName = \"TableCell\";\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={`${styles.tableCaption} ${className || \"\"}`}\n    {...props}\n  />\n));\nTableCaption.displayName = \"TableCaption\";\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","children","props","ref","isModalOpen","setIsModalOpen","useState","handleExpandClick","handleCloseModal","jsxs","Fragment","styles","jsx","ArrowExpand20Regular","TableModal","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/content-components/table/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState } from \"react\";\nimport { TableModal } from \"./table-modal\";\nimport { ArrowExpand20Regular } from \"@fluentui/react-icons\";\nimport { cn } from \"../../../utils/cn\";\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, children, ...props }, ref) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleExpandClick = () => {\n    setIsModalOpen(true);\n  };\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false);\n  };\n\n  return (\n    <>\n      <div\n        className=\"mint:relative mint:block mint:mb-4 mint:mt-8\"\n        role=\"region\"\n        aria-label=\"Data table\"\n      >\n        <button\n          onClick={handleExpandClick}\n          className=\"mint:ml-auto mint:flex mint:items-center mint:gap-2 mint:px-2 mint:py-1 mint:rounded-lg mint:bg-transparent mint:border-none mint:cursor-pointer mint:hover:bg-gray-100 mint:dark:hover:bg-[#2d2d2d]\"\n          aria-label=\"Expand table to full screen view\"\n          title=\"Expand table\"\n        >\n          <ArrowExpand20Regular className=\"mint:h-4 mint:w-4 mint:text-gray-700 mint:dark:text-gray-200\" />\n          <span className=\"mint:text-sm mint:text-gray-700 mint:dark:text-gray-200\">\n            Expand table\n          </span>\n        </button>\n        <div className=\"mint:mt-2 mint:overflow-x-auto\">\n          <table\n            ref={ref}\n            className={cn(\n              \"mint:mt-2 mint:border-collapse mint:text-sm mint:w-full mint:rounded-xl mint:overflow-hidden mint:bg-gray-50 mint:dark:bg-[#2d2d2d]\",\n              className\n            )}\n            {...props}\n          >\n            {children}\n          </table>\n        </div>\n      </div>\n      <TableModal isOpen={isModalOpen} onClose={handleCloseModal}>\n        <table\n          className={cn(\n            \"mint:mt-2 mint:border-collapse mint:text-sm mint:w-full mint:rounded-xl mint:overflow-hidden mint:bg-gray-50 mint:dark:bg-[#2d2d2d]\",\n            className\n          )}\n        >\n          {children}\n        </table>\n      </TableModal>\n    </>\n  );\n});\nTable.displayName = \"Table\";\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead\n    ref={ref}\n    className={cn(\n      \"mint:text-gray-700 mint:bg-gray-50 mint:dark:text-gray-300 mint:dark:bg-[#2d2d2d] mint:[&>tr]:border-0\",\n      className\n    )}\n    {...props}\n  />\n));\nTableHeader.displayName = \"TableHeader\";\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\n      \"mint:[&>tr:first-child>td:first-child]:rounded-tl-xl mint:[&>tr:first-child>td:last-child]:rounded-tr-xl mint:[&>tr:last-child>td:first-child]:rounded-bl-xl mint:[&>tr:last-child>td:last-child]:rounded-br-xl\",\n      className\n    )}\n    {...props}\n  />\n));\nTableBody.displayName = \"TableBody\";\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      \"mint:border-t mint:border-gray-200 mint:bg-gray-50/50 mint:font-medium mint:dark:border-t-gray-600 mint:dark:bg-[#2d2d2d]/50 mint:[&>tr:last-child]:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = \"TableFooter\";\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"mint:border mint:border-gray-50 mint:dark:border-[#2d2d2d]\",\n      className\n    )}\n    {...props}\n  />\n));\nTableRow.displayName = \"TableRow\";\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"mint:h-10 mint:bg-gray-50 mint:overflow-hidden mint:px-6 mint:text-left mint:font-semibold mint:text-gray-700 mint:first:rounded-tl-xl mint:last:rounded-tr-xl mint:dark:bg-[#2d2d2d] mint:dark:text-gray-300\",\n      className\n    )}\n    {...props}\n  />\n));\nTableHead.displayName = \"TableHead\";\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"mint:bg-white mint:border-gray-50 mint:px-6 mint:py-3 mint:text-[#141414] mint:dark:bg-[#252525] mint:dark:border-[#2d2d2d] mint:dark:text-gray-200\",\n      className\n    )}\n    {...props}\n  />\n));\nTableCell.displayName = \"TableCell\";\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\n      \"mint:mt-4 mint:text-sm mint:text-gray-500 mint:dark:text-gray-400\",\n      className\n    )}\n    {...props}\n  />\n));\nTableCaption.displayName = \"TableCaption\";\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","children","props","ref","isModalOpen","setIsModalOpen","useState","handleExpandClick","handleCloseModal","jsxs","Fragment","jsx","ArrowExpand20Regular","cn","TableModal","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"mappings":"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"}

package/dist/components/content-components/table/table-modal.js

@@ -1,57 +1,56 @@
-import { jsx as l, jsxs as b } from "react/jsx-runtime";
-import { useRef as s, useEffect as u } from "react";
-import { Dismiss20Regular as w } from "@fluentui/react-icons";
-import o from "./table-modal.module.css.js";
-function x({ isOpen: n, onClose: r, children: y }) {
-  const i = s(null), m = s(null), f = s(null);
-  return u(() => {
-    var e, t;
-    return n ? (f.current = document.activeElement, document.body.style.overflow = "hidden", (e = m.current) == null || e.focus()) : (document.body.style.overflow = "unset", (t = f.current) == null || t.focus()), () => {
+import { jsx as i, jsxs as v } from "react/jsx-runtime";
+import { useRef as d, useEffect as c } from "react";
+import { Dismiss20Regular as y } from "@fluentui/react-icons";
+function x({ isOpen: n, onClose: r, children: b }) {
+  const a = d(null), s = d(null), u = d(null);
+  return c(() => {
+    var t, e;
+    return n ? (u.current = document.activeElement, document.body.style.overflow = "hidden", (t = s.current) == null || t.focus()) : (document.body.style.overflow = "unset", (e = u.current) == null || e.focus()), () => {
       document.body.style.overflow = "unset";
     };
-  }, [n]), u(() => {
-    const e = (t) => {
-      t.key === "Escape" && r();
+  }, [n]), c(() => {
+    const t = (e) => {
+      e.key === "Escape" && r();
     };
-    return n && window.addEventListener("keydown", e), () => {
-      window.removeEventListener("keydown", e);
+    return n && window.addEventListener("keydown", t), () => {
+      window.removeEventListener("keydown", t);
     };
-  }, [n, r]), u(() => {
-    if (!n || !i.current) return;
-    const e = i.current, t = e.querySelectorAll(
+  }, [n, r]), c(() => {
+    if (!n || !a.current) return;
+    const t = a.current, e = t.querySelectorAll(
       'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    ), a = t[0], c = t[t.length - 1], v = (d) => {
-      d.key === "Tab" && (d.shiftKey ? document.activeElement === a && (d.preventDefault(), c == null || c.focus()) : document.activeElement === c && (d.preventDefault(), a == null || a.focus()));
+    ), m = e[0], o = e[e.length - 1], f = (l) => {
+      l.key === "Tab" && (l.shiftKey ? document.activeElement === m && (l.preventDefault(), o == null || o.focus()) : document.activeElement === o && (l.preventDefault(), m == null || m.focus()));
     };
-    return e.addEventListener("keydown", v), () => {
-      e.removeEventListener("keydown", v);
+    return t.addEventListener("keydown", f), () => {
+      t.removeEventListener("keydown", f);
     };
-  }, [n]), n ? /* @__PURE__ */ l(
+  }, [n]), n ? /* @__PURE__ */ i(
     "div",
     {
-      className: o.overlay,
+      className: "mint:fixed mint:inset-0 mint:z-50 mint:flex mint:items-center mint:justify-center mint:p-4 mint:backdrop-blur-sm",
       onClick: r,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "table-modal-title",
-      children: /* @__PURE__ */ b(
+      children: /* @__PURE__ */ v(
         "div",
         {
-          ref: i,
-          className: o.modal,
-          onClick: (e) => e.stopPropagation(),
+          ref: a,
+          className: "mint:relative mint:w-full mint:max-w-screen-2xl mint:max-h-[90vh] mint:overflow-auto mint:bg-white mint:rounded-2xl mint:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] mint:border mint:border-gray-200 mint:dark:bg-[#1f1f1f] mint:dark:border-white/10",
+          onClick: (t) => t.stopPropagation(),
           children: [
-            /* @__PURE__ */ l("div", { className: o.header, children: /* @__PURE__ */ l(
+            /* @__PURE__ */ i("div", { className: "mint:sticky mint:top-0 mint:right-0 mint:z-10 mint:flex mint:justify-end mint:p-2 mint:pr-4 mint:backdrop-blur-sm", children: /* @__PURE__ */ i(
               "button",
               {
-                ref: m,
+                ref: s,
                 onClick: r,
-                className: o.closeButton,
+                className: "mint:p-2 mint:rounded-lg mint:bg-transparent mint:border-none mint:cursor-pointer mint:hover:bg-gray-100 mint:dark:hover:bg-[#141414]",
                 "aria-label": "Close table expanded view",
-                children: /* @__PURE__ */ l(w, { className: o.closeIcon })
+                children: /* @__PURE__ */ i(y, { className: "mint:h-5 mint:w-5 mint:text-gray-700 mint:dark:text-white" })
               }
             ) }),
-            /* @__PURE__ */ l("div", { className: o.content, id: "table-modal-title", children: y })
+            /* @__PURE__ */ i("div", { className: "mint:px-6 mint:py-4", id: "table-modal-title", children: b })
           ]
         }
       )

package/dist/components/content-components/table/table-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-modal.js","sources":["../../../../src/components/content-components/table/table-modal.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { Dismiss20Regular } from \"@fluentui/react-icons\";\nimport styles from \"./table-modal.module.css\";\n\ninterface TableModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n}\n\nexport function TableModal({ isOpen, onClose, children }: TableModalProps) {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      previousActiveElement.current = document.activeElement as HTMLElement;\n      document.body.style.overflow = \"hidden\";\n      closeButtonRef.current?.focus();\n    } else {\n      document.body.style.overflow = \"unset\";\n      previousActiveElement.current?.focus();\n    }\n\n    return () => {\n      document.body.style.overflow = \"unset\";\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    if (isOpen) {\n      window.addEventListener(\"keydown\", handleEscape);\n    }\n\n    return () => {\n      window.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  useEffect(() => {\n    if (!isOpen || !modalRef.current) return;\n\n    const modal = modalRef.current;\n    const focusableElements = modal.querySelectorAll<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n    );\n    const firstFocusable = focusableElements[0];\n    const lastFocusable = focusableElements[focusableElements.length - 1];\n\n    const handleTabKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Tab\") return;\n\n      if (e.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          e.preventDefault();\n          lastFocusable?.focus();\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          e.preventDefault();\n          firstFocusable?.focus();\n        }\n      }\n    };\n\n    modal.addEventListener(\"keydown\", handleTabKey as EventListener);\n    return () => {\n      modal.removeEventListener(\"keydown\", handleTabKey as EventListener);\n    };\n  }, [isOpen]);\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      className={styles.overlay}\n      onClick={onClose}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"table-modal-title\"\n    >\n      <div\n        ref={modalRef}\n        className={styles.modal}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className={styles.header}>\n          <button\n            ref={closeButtonRef}\n            onClick={onClose}\n            className={styles.closeButton}\n            aria-label=\"Close table expanded view\"\n          >\n            <Dismiss20Regular className={styles.closeIcon} />\n          </button>\n        </div>\n        <div className={styles.content} id=\"table-modal-title\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["TableModal","isOpen","onClose","children","modalRef","useRef","closeButtonRef","previousActiveElement","useEffect","_a","_b","handleEscape","e","modal","focusableElements","firstFocusable","lastFocusable","handleTabKey","jsx","styles","jsxs","Dismiss20Regular"],"mappings":";;;;AAUO,SAASA,EAAW,EAAE,QAAAC,GAAQ,SAAAC,GAAS,UAAAC,KAA6B;AACzE,QAAMC,IAAWC,EAAuB,IAAI,GACtCC,IAAiBD,EAA0B,IAAI,GAC/CE,IAAwBF,EAA2B,IAAI;AAiE7D,SA/DAG,EAAU,MAAM;;AACd,WAAIP,KACFM,EAAsB,UAAU,SAAS,eACzC,SAAS,KAAK,MAAM,WAAW,WAC/BE,IAAAH,EAAe,YAAf,QAAAG,EAAwB,YAExB,SAAS,KAAK,MAAM,WAAW,UAC/BC,IAAAH,EAAsB,YAAtB,QAAAG,EAA+B,UAG1B,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAACT,CAAM,CAAC,GAEXO,EAAU,MAAM;AACd,UAAMG,IAAe,CAACC,MAAqB;AACzC,MAAIA,EAAE,QAAQ,YACZV,EAAA;AAAA,IAEJ;AAEA,WAAID,KACF,OAAO,iBAAiB,WAAWU,CAAY,GAG1C,MAAM;AACX,aAAO,oBAAoB,WAAWA,CAAY;AAAA,IACpD;AAAA,EACF,GAAG,CAACV,GAAQC,CAAO,CAAC,GAEpBM,EAAU,MAAM;AACd,QAAI,CAACP,KAAU,CAACG,EAAS,QAAS;AAElC,UAAMS,IAAQT,EAAS,SACjBU,IAAoBD,EAAM;AAAA,MAC9B;AAAA,IAAA,GAEIE,IAAiBD,EAAkB,CAAC,GACpCE,IAAgBF,EAAkBA,EAAkB,SAAS,CAAC,GAE9DG,IAAe,CAACL,MAAqB;AACzC,MAAIA,EAAE,QAAQ,UAEVA,EAAE,WACA,SAAS,kBAAkBG,MAC7BH,EAAE,eAAA,GACFI,KAAA,QAAAA,EAAe,WAGb,SAAS,kBAAkBA,MAC7BJ,EAAE,eAAA,GACFG,KAAA,QAAAA,EAAgB;AAAA,IAGtB;AAEA,WAAAF,EAAM,iBAAiB,WAAWI,CAA6B,GACxD,MAAM;AACX,MAAAJ,EAAM,oBAAoB,WAAWI,CAA6B;AAAA,IACpE;AAAA,EACF,GAAG,CAAChB,CAAM,CAAC,GAENA,IAGH,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO;AAAA,MAClB,SAASjB;AAAA,MACT,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAgB;AAAA,MAEhB,UAAA,gBAAAkB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKhB;AAAA,UACL,WAAWe,EAAO;AAAA,UAClB,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,UAElB,UAAA;AAAA,YAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,QACrB,UAAA,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAKZ;AAAA,gBACL,SAASJ;AAAA,gBACT,WAAWiB,EAAO;AAAA,gBAClB,cAAW;AAAA,gBAEX,UAAA,gBAAAD,EAACG,GAAA,EAAiB,WAAWF,EAAO,UAAA,CAAW;AAAA,cAAA;AAAA,YAAA,GAEnD;AAAA,8BACC,OAAA,EAAI,WAAWA,EAAO,SAAS,IAAG,qBAChC,UAAAhB,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,IA5BgB;AA+BtB;"}
+{"version":3,"file":"table-modal.js","sources":["../../../../src/components/content-components/table/table-modal.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { Dismiss20Regular } from \"@fluentui/react-icons\";\n\ninterface TableModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n}\n\nexport function TableModal({ isOpen, onClose, children }: TableModalProps) {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      previousActiveElement.current = document.activeElement as HTMLElement;\n      document.body.style.overflow = \"hidden\";\n      closeButtonRef.current?.focus();\n    } else {\n      document.body.style.overflow = \"unset\";\n      previousActiveElement.current?.focus();\n    }\n\n    return () => {\n      document.body.style.overflow = \"unset\";\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    if (isOpen) {\n      window.addEventListener(\"keydown\", handleEscape);\n    }\n\n    return () => {\n      window.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  useEffect(() => {\n    if (!isOpen || !modalRef.current) return;\n\n    const modal = modalRef.current;\n    const focusableElements = modal.querySelectorAll<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n    );\n    const firstFocusable = focusableElements[0];\n    const lastFocusable = focusableElements[focusableElements.length - 1];\n\n    const handleTabKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Tab\") return;\n\n      if (e.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          e.preventDefault();\n          lastFocusable?.focus();\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          e.preventDefault();\n          firstFocusable?.focus();\n        }\n      }\n    };\n\n    modal.addEventListener(\"keydown\", handleTabKey as EventListener);\n    return () => {\n      modal.removeEventListener(\"keydown\", handleTabKey as EventListener);\n    };\n  }, [isOpen]);\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      className=\"mint:fixed mint:inset-0 mint:z-50 mint:flex mint:items-center mint:justify-center mint:p-4 mint:backdrop-blur-sm\"\n      onClick={onClose}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"table-modal-title\"\n    >\n      <div\n        ref={modalRef}\n        className=\"mint:relative mint:w-full mint:max-w-screen-2xl mint:max-h-[90vh] mint:overflow-auto mint:bg-white mint:rounded-2xl mint:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] mint:border mint:border-gray-200 mint:dark:bg-[#1f1f1f] mint:dark:border-white/10\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className=\"mint:sticky mint:top-0 mint:right-0 mint:z-10 mint:flex mint:justify-end mint:p-2 mint:pr-4 mint:backdrop-blur-sm\">\n          <button\n            ref={closeButtonRef}\n            onClick={onClose}\n            className=\"mint:p-2 mint:rounded-lg mint:bg-transparent mint:border-none mint:cursor-pointer mint:hover:bg-gray-100 mint:dark:hover:bg-[#141414]\"\n            aria-label=\"Close table expanded view\"\n          >\n            <Dismiss20Regular className=\"mint:h-5 mint:w-5 mint:text-gray-700 mint:dark:text-white\" />\n          </button>\n        </div>\n        <div className=\"mint:px-6 mint:py-4\" id=\"table-modal-title\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["TableModal","isOpen","onClose","children","modalRef","useRef","closeButtonRef","previousActiveElement","useEffect","_a","_b","handleEscape","modal","focusableElements","firstFocusable","lastFocusable","handleTabKey","e","jsx","jsxs","Dismiss20Regular"],"mappings":";;;AASO,SAASA,EAAW,EAAE,QAAAC,GAAQ,SAAAC,GAAS,UAAAC,KAA6B;AACzE,QAAMC,IAAWC,EAAuB,IAAI,GACtCC,IAAiBD,EAA0B,IAAI,GAC/CE,IAAwBF,EAA2B,IAAI;AAiE7D,SA/DAG,EAAU,MAAM;;AACd,WAAIP,KACFM,EAAsB,UAAU,SAAS,eACzC,SAAS,KAAK,MAAM,WAAW,WAC/BE,IAAAH,EAAe,YAAf,QAAAG,EAAwB,YAExB,SAAS,KAAK,MAAM,WAAW,UAC/BC,IAAAH,EAAsB,YAAtB,QAAAG,EAA+B,UAG1B,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAACT,CAAM,CAAC,GAEXO,EAAU,MAAM;AACd,UAAMG,IAAe,CAAC,MAAqB;AACzC,MAAI,EAAE,QAAQ,YACZT,EAAA;AAAA,IAEJ;AAEA,WAAID,KACF,OAAO,iBAAiB,WAAWU,CAAY,GAG1C,MAAM;AACX,aAAO,oBAAoB,WAAWA,CAAY;AAAA,IACpD;AAAA,EACF,GAAG,CAACV,GAAQC,CAAO,CAAC,GAEpBM,EAAU,MAAM;AACd,QAAI,CAACP,KAAU,CAACG,EAAS,QAAS;AAElC,UAAMQ,IAAQR,EAAS,SACjBS,IAAoBD,EAAM;AAAA,MAC9B;AAAA,IAAA,GAEIE,IAAiBD,EAAkB,CAAC,GACpCE,IAAgBF,EAAkBA,EAAkB,SAAS,CAAC,GAE9DG,IAAe,CAACC,MAAqB;AACzC,MAAIA,EAAE,QAAQ,UAEVA,EAAE,WACA,SAAS,kBAAkBH,MAC7BG,EAAE,eAAA,GACFF,KAAA,QAAAA,EAAe,WAGb,SAAS,kBAAkBA,MAC7BE,EAAE,eAAA,GACFH,KAAA,QAAAA,EAAgB;AAAA,IAGtB;AAEA,WAAAF,EAAM,iBAAiB,WAAWI,CAA6B,GACxD,MAAM;AACX,MAAAJ,EAAM,oBAAoB,WAAWI,CAA6B;AAAA,IACpE;AAAA,EACF,GAAG,CAACf,CAAM,CAAC,GAENA,IAGH,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAShB;AAAA,MACT,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAgB;AAAA,MAEhB,UAAA,gBAAAiB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKf;AAAA,UACL,WAAU;AAAA,UACV,SAAS,CAACa,MAAMA,EAAE,gBAAA;AAAA,UAElB,UAAA;AAAA,YAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,qHACb,UAAA,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAKZ;AAAA,gBACL,SAASJ;AAAA,gBACT,WAAU;AAAA,gBACV,cAAW;AAAA,gBAEX,UAAA,gBAAAgB,EAACE,GAAA,EAAiB,WAAU,4DAAA,CAA4D;AAAA,cAAA;AAAA,YAAA,GAE5F;AAAA,8BACC,OAAA,EAAI,WAAU,uBAAsB,IAAG,qBACrC,UAAAjB,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,IA5BgB;AA+BtB;"}

package/dist/components/content-components/tabs/tabs.js

@@ -1,87 +1,92 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import i, { useState as v, useRef as $, useEffect as g } from "react";
-import a from "./tabs.module.css.js";
-import y from "../../prose.module.css.js";
-const A = i.createContext({
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import s, { useState as g, useRef as v, useEffect as y } from "react";
+import { cn as u } from "../../../utils/cn.js";
+const k = s.createContext({
   activeTab: 0,
   setActiveTab: () => {
   }
 });
-function D({ children: h, defaultTab: f = 0 }) {
-  const [c, b] = v(f), o = $([]), r = i.Children.toArray(h);
-  g(() => {
-    o.current = o.current.slice(0, r.length);
+function T({ children: f, defaultTab: p = 0 }) {
+  const [o, m] = g(p), l = v([]), r = s.Children.toArray(f);
+  y(() => {
+    l.current = l.current.slice(0, r.length);
   }, [r.length]);
-  const m = (t, e) => {
-    var s;
-    let l = e;
-    switch (t.key) {
+  const h = (e, t) => {
+    var i;
+    let n = t;
+    switch (e.key) {
       case "ArrowRight":
-        t.preventDefault(), l = (e + 1) % r.length;
+        e.preventDefault(), n = (t + 1) % r.length;
         break;
       case "ArrowLeft":
-        t.preventDefault(), l = (e - 1 + r.length) % r.length;
+        e.preventDefault(), n = (t - 1 + r.length) % r.length;
         break;
       case "Home":
-        t.preventDefault(), l = 0;
+        e.preventDefault(), n = 0;
         break;
       case "End":
-        t.preventDefault(), l = r.length - 1;
+        e.preventDefault(), n = r.length - 1;
         break;
       default:
         return;
     }
-    b(l), (s = o.current[l]) == null || s.focus();
+    m(n), (i = l.current[n]) == null || i.focus();
   };
-  return /* @__PURE__ */ n(A.Provider, { value: { activeTab: c, setActiveTab: b }, children: /* @__PURE__ */ d("div", { className: a.container, children: [
-    /* @__PURE__ */ n(
+  return /* @__PURE__ */ a(k.Provider, { value: { activeTab: o, setActiveTab: m }, children: /* @__PURE__ */ d("div", { className: "mint:my-6", children: [
+    /* @__PURE__ */ a(
       "div",
       {
         role: "tablist",
         "aria-label": "Content tabs",
-        className: a.tabList,
-        children: r.map((t, e) => {
-          if (!i.isValidElement(t)) return null;
-          const l = t.props.title || `Tab ${e + 1}`, s = t.props.icon, p = c === e;
-          return /* @__PURE__ */ n(
+        className: "mint:flex mint:gap-1 mint:border-b mint:border-gray-200 mint:mb-4 mint:overflow-x-auto mint:dark:border-b-gray-700",
+        children: r.map((e, t) => {
+          if (!s.isValidElement(e)) return null;
+          const n = e.props.title || `Tab ${t + 1}`, i = e.props.icon, c = o === t;
+          return /* @__PURE__ */ a(
             "button",
             {
-              ref: (u) => o.current[e] = u,
+              ref: (b) => l.current[t] = b,
               role: "tab",
-              "aria-selected": p,
-              "aria-controls": `tabpanel-${e}`,
-              id: `tab-${e}`,
-              tabIndex: p ? 0 : -1,
-              onClick: () => b(e),
-              onKeyDown: (u) => m(u, e),
-              className: `${a.tab} ${p ? a.tabActive : a.tabInactive}`,
-              children: /* @__PURE__ */ d("span", { className: a.tabContent, children: [
-                s && /* @__PURE__ */ n("span", { "aria-hidden": "true", children: s }),
-                l
+              "aria-selected": c,
+              "aria-controls": `tabpanel-${t}`,
+              id: `tab-${t}`,
+              tabIndex: c ? 0 : -1,
+              onClick: () => m(t),
+              onKeyDown: (b) => h(b, t),
+              className: u(
+                "mint:px-4 mint:py-2 mint:text-sm mint:font-medium mint:border-b-2 mint:rounded-t mint:bg-transparent mint:cursor-pointer mint:transition-all mint:duration-150 mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_#75b6e7] mint:focus-visible:outline-offset-2",
+                c ? "mint:border-b-[#0078d4] mint:text-[#0078d4] mint:dark:border-b-[#75b6e7] mint:dark:text-[#75b6e7]" : "mint:border-b-transparent mint:text-gray-600 mint:hover:text-gray-900 mint:hover:border-b-gray-300 mint:dark:text-gray-400 mint:dark:hover:text-gray-200 mint:dark:hover:border-b-gray-600"
+              ),
+              children: /* @__PURE__ */ d("span", { className: "mint:flex mint:items-center mint:gap-2", children: [
+                i && /* @__PURE__ */ a("span", { "aria-hidden": "true", children: i }),
+                n
               ] })
             },
-            e
+            t
           );
         })
       }
     ),
-    /* @__PURE__ */ n("div", { className: `${a.panelContainer} ${y.prose}`, children: r.map((t, e) => /* @__PURE__ */ n(
+    /* @__PURE__ */ a("div", { children: r.map((e, t) => /* @__PURE__ */ a(
       "div",
       {
         role: "tabpanel",
-        id: `tabpanel-${e}`,
-        "aria-labelledby": `tab-${e}`,
+        id: `tabpanel-${t}`,
+        "aria-labelledby": `tab-${t}`,
         tabIndex: 0,
-        hidden: c !== e,
-        className: `${a.panel} ${c === e ? "" : a.panelHidden}`,
-        children: i.isValidElement(t) ? t.props.children : null
+        hidden: o !== t,
+        className: u(
+          "mint:outline-none",
+          o !== t && "mint:hidden"
+        ),
+        children: s.isValidElement(e) ? e.props.children : null
       },
-      e
+      t
     )) })
   ] }) });
 }
 export {
-  D as Tabs,
-  A as TabsContext
+  T as Tabs,
+  k as TabsContext
 };
 //# sourceMappingURL=tabs.js.map

package/dist/components/content-components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../../src/components/content-components/tabs/tabs.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport styles from \"./tabs.module.css\";\nimport proseStyles from \"../../prose.module.css\";\n\ninterface TabsProps {\n  children: React.ReactNode;\n  defaultTab?: number;\n}\n\ninterface TabsContextValue {\n  activeTab: number;\n  setActiveTab: (index: number) => void;\n}\n\nexport const TabsContext = React.createContext<TabsContextValue>({\n  activeTab: 0,\n  setActiveTab: () => {},\n});\n\nexport function Tabs({ children, defaultTab = 0 }: TabsProps) {\n  const [activeTab, setActiveTab] = useState(defaultTab);\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const tabs = React.Children.toArray(children);\n\n  useEffect(() => {\n    tabRefs.current = tabRefs.current.slice(0, tabs.length);\n  }, [tabs.length]);\n\n  const handleKeyDown = (event: React.KeyboardEvent, currentIndex: number) => {\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        event.preventDefault();\n        newIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        newIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      case \"Home\":\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    setActiveTab(newIndex);\n    tabRefs.current[newIndex]?.focus();\n  };\n\n  return (\n    <TabsContext.Provider value={{ activeTab, setActiveTab }}>\n      <div className={styles.container}>\n        <div\n          role=\"tablist\"\n          aria-label=\"Content tabs\"\n          className={styles.tabList}\n        >\n          {tabs.map((tab, index) => {\n            if (!React.isValidElement(tab)) return null;\n            const title = tab.props.title || `Tab ${index + 1}`;\n            const icon = tab.props.icon;\n            const isActive = activeTab === index;\n\n            return (\n              <button\n                key={index}\n                ref={(el) => (tabRefs.current[index] = el)}\n                role=\"tab\"\n                aria-selected={isActive}\n                aria-controls={`tabpanel-${index}`}\n                id={`tab-${index}`}\n                tabIndex={isActive ? 0 : -1}\n                onClick={() => setActiveTab(index)}\n                onKeyDown={(e) => handleKeyDown(e, index)}\n                className={`${styles.tab} ${\n                  isActive ? styles.tabActive : styles.tabInactive\n                }`}\n              >\n                <span className={styles.tabContent}>\n                  {icon && <span aria-hidden=\"true\">{icon}</span>}\n                  {title}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n\n        <div className={`${styles.panelContainer} ${proseStyles.prose}`}>\n          {tabs.map((tab, index) => (\n            <div\n              key={index}\n              role=\"tabpanel\"\n              id={`tabpanel-${index}`}\n              aria-labelledby={`tab-${index}`}\n              tabIndex={0}\n              hidden={activeTab !== index}\n              className={`${styles.panel} ${\n                activeTab === index ? \"\" : styles.panelHidden\n              }`}\n            >\n              {React.isValidElement(tab) ? tab.props.children : null}\n            </div>\n          ))}\n        </div>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n"],"names":["TabsContext","React","Tabs","children","defaultTab","activeTab","setActiveTab","useState","tabRefs","useRef","tabs","useEffect","handleKeyDown","event","currentIndex","newIndex","_a","jsx","jsxs","styles","tab","index","title","icon","isActive","el","e","proseStyles"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../../src/components/content-components/tabs/tabs.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport { cn } from \"../../../utils/cn\";\n\ninterface TabsProps {\n  children: React.ReactNode;\n  defaultTab?: number;\n}\n\ninterface TabsContextValue {\n  activeTab: number;\n  setActiveTab: (index: number) => void;\n}\n\nexport const TabsContext = React.createContext<TabsContextValue>({\n  activeTab: 0,\n  setActiveTab: () => {},\n});\n\nexport function Tabs({ children, defaultTab = 0 }: TabsProps) {\n  const [activeTab, setActiveTab] = useState(defaultTab);\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const tabs = React.Children.toArray(children);\n\n  useEffect(() => {\n    tabRefs.current = tabRefs.current.slice(0, tabs.length);\n  }, [tabs.length]);\n\n  const handleKeyDown = (event: React.KeyboardEvent, currentIndex: number) => {\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        event.preventDefault();\n        newIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        newIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      case \"Home\":\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    setActiveTab(newIndex);\n    tabRefs.current[newIndex]?.focus();\n  };\n\n  return (\n    <TabsContext.Provider value={{ activeTab, setActiveTab }}>\n      <div className=\"mint:my-6\">\n        <div\n          role=\"tablist\"\n          aria-label=\"Content tabs\"\n          className=\"mint:flex mint:gap-1 mint:border-b mint:border-gray-200 mint:mb-4 mint:overflow-x-auto mint:dark:border-b-gray-700\"\n        >\n          {tabs.map((tab, index) => {\n            if (!React.isValidElement(tab)) return null;\n            const title = tab.props.title || `Tab ${index + 1}`;\n            const icon = tab.props.icon;\n            const isActive = activeTab === index;\n\n            return (\n              <button\n                key={index}\n                ref={(el) => (tabRefs.current[index] = el)}\n                role=\"tab\"\n                aria-selected={isActive}\n                aria-controls={`tabpanel-${index}`}\n                id={`tab-${index}`}\n                tabIndex={isActive ? 0 : -1}\n                onClick={() => setActiveTab(index)}\n                onKeyDown={(e) => handleKeyDown(e, index)}\n                className={cn(\n                  \"mint:px-4 mint:py-2 mint:text-sm mint:font-medium mint:border-b-2 mint:rounded-t mint:bg-transparent mint:cursor-pointer mint:transition-all mint:duration-150 mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_#75b6e7] mint:focus-visible:outline-offset-2\",\n                  isActive\n                    ? \"mint:border-b-[#0078d4] mint:text-[#0078d4] mint:dark:border-b-[#75b6e7] mint:dark:text-[#75b6e7]\"\n                    : \"mint:border-b-transparent mint:text-gray-600 mint:hover:text-gray-900 mint:hover:border-b-gray-300 mint:dark:text-gray-400 mint:dark:hover:text-gray-200 mint:dark:hover:border-b-gray-600\"\n                )}\n              >\n                <span className=\"mint:flex mint:items-center mint:gap-2\">\n                  {icon && <span aria-hidden=\"true\">{icon}</span>}\n                  {title}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n\n        <div>\n          {tabs.map((tab, index) => (\n            <div\n              key={index}\n              role=\"tabpanel\"\n              id={`tabpanel-${index}`}\n              aria-labelledby={`tab-${index}`}\n              tabIndex={0}\n              hidden={activeTab !== index}\n              className={cn(\n                \"mint:outline-none\",\n                activeTab !== index && \"mint:hidden\"\n              )}\n            >\n              {React.isValidElement(tab) ? tab.props.children : null}\n            </div>\n          ))}\n        </div>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n"],"names":["TabsContext","React","Tabs","children","defaultTab","activeTab","setActiveTab","useState","tabRefs","useRef","tabs","useEffect","handleKeyDown","event","currentIndex","newIndex","_a","jsx","jsxs","tab","index","title","icon","isActive","el","e","cn"],"mappings":";;;AAaO,MAAMA,IAAcC,EAAM,cAAgC;AAAA,EAC/D,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EAAC;AACvB,CAAC;AAEM,SAASC,EAAK,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAgB;AAC5D,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASH,CAAU,GAC/CI,IAAUC,EAAqC,EAAE,GAEjDC,IAAOT,EAAM,SAAS,QAAQE,CAAQ;AAE5C,EAAAQ,EAAU,MAAM;AACd,IAAAH,EAAQ,UAAUA,EAAQ,QAAQ,MAAM,GAAGE,EAAK,MAAM;AAAA,EACxD,GAAG,CAACA,EAAK,MAAM,CAAC;AAEhB,QAAME,IAAgB,CAACC,GAA4BC,MAAyB;;AAC1E,QAAIC,IAAWD;AAEf,YAAQD,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACNE,KAAYD,IAAe,KAAKJ,EAAK;AACrC;AAAA,MACF,KAAK;AACH,QAAAG,EAAM,eAAA,GACNE,KAAYD,IAAe,IAAIJ,EAAK,UAAUA,EAAK;AACnD;AAAA,MACF,KAAK;AACH,QAAAG,EAAM,eAAA,GACNE,IAAW;AACX;AAAA,MACF,KAAK;AACH,QAAAF,EAAM,eAAA,GACNE,IAAWL,EAAK,SAAS;AACzB;AAAA,MACF;AACE;AAAA,IAAA;AAGJ,IAAAJ,EAAaS,CAAQ,IACrBC,IAAAR,EAAQ,QAAQO,CAAQ,MAAxB,QAAAC,EAA2B;AAAA,EAC7B;AAEA,SACE,gBAAAC,EAACjB,EAAY,UAAZ,EAAqB,OAAO,EAAE,WAAAK,GAAW,cAAAC,EAAA,GACxC,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAU;AAAA,QAET,UAAAP,EAAK,IAAI,CAACS,GAAKC,MAAU;AACxB,cAAI,CAACnB,EAAM,eAAekB,CAAG,EAAG,QAAO;AACvC,gBAAME,IAAQF,EAAI,MAAM,SAAS,OAAOC,IAAQ,CAAC,IAC3CE,IAAOH,EAAI,MAAM,MACjBI,IAAWlB,MAAce;AAE/B,iBACE,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,KAAK,CAACO,MAAQhB,EAAQ,QAAQY,CAAK,IAAII;AAAA,cACvC,MAAK;AAAA,cACL,iBAAeD;AAAA,cACf,iBAAe,YAAYH,CAAK;AAAA,cAChC,IAAI,OAAOA,CAAK;AAAA,cAChB,UAAUG,IAAW,IAAI;AAAA,cACzB,SAAS,MAAMjB,EAAac,CAAK;AAAA,cACjC,WAAW,CAACK,MAAMb,EAAca,GAAGL,CAAK;AAAA,cACxC,WAAWM;AAAA,gBACT;AAAA,gBACAH,IACI,sGACA;AAAA,cAAA;AAAA,cAGN,UAAA,gBAAAL,EAAC,QAAA,EAAK,WAAU,0CACb,UAAA;AAAA,gBAAAI,KAAQ,gBAAAL,EAAC,QAAA,EAAK,eAAY,QAAQ,UAAAK,GAAK;AAAA,gBACvCD;AAAA,cAAA,EAAA,CACH;AAAA,YAAA;AAAA,YAnBKD;AAAA,UAAA;AAAA,QAsBX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,sBAGF,OAAA,EACE,UAAAV,EAAK,IAAI,CAACS,GAAKC,MACd,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,IAAI,YAAYG,CAAK;AAAA,QACrB,mBAAiB,OAAOA,CAAK;AAAA,QAC7B,UAAU;AAAA,QACV,QAAQf,MAAce;AAAA,QACtB,WAAWM;AAAA,UACT;AAAA,UACArB,MAAce,KAAS;AAAA,QAAA;AAAA,QAGxB,YAAM,eAAeD,CAAG,IAAIA,EAAI,MAAM,WAAW;AAAA,MAAA;AAAA,MAX7CC;AAAA,IAAA,CAaR,EAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}