@mintlify/msft-sdk 1.1.10 → 1.1.11

package/dist/components/nav-tree/dropdown-menu.js

@@ -1,75 +0,0 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { DocumentRegular as h, CheckmarkFilled as x } from "@fluentui/react-icons";
-import { useComponents as u } from "../../context/components-context.js";
-import { cn as r } from "../../utils/cn.js";
-function _({
-  dropdown: i,
-  isActive: a = !1,
-  activeHref: s,
-  className: l = ""
-}) {
-  const [e, o] = b(!1), { LinkComponent: d } = u(), c = i.icon || h;
-  return /* @__PURE__ */ m("div", { className: r("mint:mb-2 mint:lg:mb-2", l), children: [
-    /* @__PURE__ */ t(
-      "button",
-      {
-        onClick: () => o(!e),
-        "aria-expanded": e,
-        "aria-label": `${e ? "Collapse" : "Expand"} ${i.title} dropdown`,
-        className: r(
-          "mint:w-full mint:py-2 mint:px-3 mint:rounded-xl mint:bg-white mint:dark:bg-[#1f1f1f] mint:border mint:border-[rgba(229,231,235,0.7)] mint:dark:border-[rgba(255,255,255,0.07)] mint:cursor-pointer mint:hover:border-[#d1d5db] mint:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:border-[rgba(255,255,255,0.15)] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
-          a && "mint:shadow-[0_0_0_2px_rgba(100,63,178,0.2)] mint:border-[rgba(100,63,178,0.3)]"
-        ),
-        children: /* @__PURE__ */ m("div", { className: "mint:flex mint:items-center mint:gap-2", children: [
-          /* @__PURE__ */ t("div", { className: "mint:shrink-0", children: /* @__PURE__ */ t("div", { className: "mint:w-8 mint:h-8 mint:rounded-lg mint:flex mint:items-center mint:justify-center mint:bg-[#e1cefc] mint:dark:bg-[#38255e] mint:border mint:border-[#643fb2] mint:dark:border-[#c9aaf9]", children: /* @__PURE__ */ t(c, { className: "mint:w-4 mint:h-4 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]" }) }) }),
-          /* @__PURE__ */ m("div", { className: "mint:flex-1 mint:text-left mint:min-w-0", children: [
-            /* @__PURE__ */ t("div", { className: "mint:text-sm mint:font-medium mint:text-[#111827] mint:dark:text-white", children: i.title }),
-            /* @__PURE__ */ t("div", { className: "mint:text-xs mint:text-[#4b5563] mint:dark:text-[#9ca3af] mint:line-clamp-2", children: i.description })
-          ] }),
-          /* @__PURE__ */ t("div", { className: "mint:flex-shrink-0", children: /* @__PURE__ */ t(
-            "svg",
-            {
-              className: r(
-                "mint:w-4 mint:h-4 mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:transition-transform mint:duration-200",
-                e ? "mint:rotate-180" : "mint:rotate-0"
-              ),
-              fill: "none",
-              stroke: "currentColor",
-              viewBox: "0 0 24 24",
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ t(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M19 9l-7 7-7-7"
-                }
-              )
-            }
-          ) })
-        ] })
-      }
-    ),
-    e && i.items && i.items.length > 0 && /* @__PURE__ */ t("div", { className: "mint:relative mint:mt-2", children: /* @__PURE__ */ t("div", { className: "mint:absolute mint:top-0 mint:left-0 mint:right-0 mint:z-10 mint:w-full mint:p-1 mint:rounded-lg mint:bg-white mint:dark:bg-[#1f1f1f] mint:border mint:border-[rgba(229,231,235,0.7)] mint:dark:border-[rgba(255,255,255,0.07)] mint:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)]", children: /* @__PURE__ */ t("div", { className: "mint:flex mint:flex-col mint:gap-1", children: i.items.map((n, f) => /* @__PURE__ */ m(
-      d || "a",
-      {
-        href: n.href,
-        className: "mint:flex mint:items-center mint:justify-between mint:py-1.5 mint:px-2 mint:text-sm mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#111827] mint:dark:text-white mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#111827] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
-        children: [
-          /* @__PURE__ */ m("div", { className: "mint:flex mint:items-center mint:gap-2", children: [
-            n.icon && /* @__PURE__ */ t("div", { className: "mint:w-7 mint:h-7 mint:rounded-lg mint:flex mint:items-center mint:justify-center mint:bg-[#e1cefc] mint:dark:bg-[#38255e] mint:border mint:border-[#643fb2] mint:dark:border-[#c9aaf9]", children: /* @__PURE__ */ t(n.icon, { className: "mint:w-4 mint:h-4 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]" }) }),
-            /* @__PURE__ */ t("span", { className: "mint:font-medium", children: n.title })
-          ] }),
-          n.href && s === n.href && /* @__PURE__ */ t(x, { className: "mint:w-3 mint:h-3 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]" })
-        ]
-      },
-      `${n.href}-${f}`
-    )) }) }) })
-  ] });
-}
-export {
-  _ as DropdownMenu
-};
-//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/nav-tree/dropdown-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-menu.js","sources":["../../../src/components/nav-tree/dropdown-menu.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { CheckmarkFilled, DocumentRegular } from \"@fluentui/react-icons\";\nimport { useComponents } from \"../../context/components-context\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface DropdownConfig {\n  title: string;\n  description: string;\n  icon?: React.ComponentType<{ className?: string }>;\n  color?: {\n    light?: string;\n    dark?: string;\n  };\n  items?: DropdownItem[];\n}\n\nexport interface DropdownItem {\n  title: string;\n  href?: string;\n  description?: string;\n  icon?: React.ComponentType<{ className?: string }>;\n}\n\ninterface DropdownMenuProps {\n  dropdown: DropdownConfig;\n  isActive?: boolean;\n  activeHref?: string;\n  className?: string;\n}\n\nexport function DropdownMenu({\n  dropdown,\n  isActive = false,\n  activeHref,\n  className = \"\",\n}: DropdownMenuProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const { LinkComponent } = useComponents();\n  const Icon = dropdown.icon || DocumentRegular;\n\n  return (\n    <div className={cn(\"mint:mb-2 mint:lg:mb-2\", className)}>\n      <button\n        onClick={() => setIsExpanded(!isExpanded)}\n        aria-expanded={isExpanded}\n        aria-label={`${isExpanded ? \"Collapse\" : \"Expand\"} ${\n          dropdown.title\n        } dropdown`}\n        className={cn(\n          \"mint:w-full mint:py-2 mint:px-3 mint:rounded-xl mint:bg-white mint:dark:bg-[#1f1f1f] mint:border mint:border-[rgba(229,231,235,0.7)] mint:dark:border-[rgba(255,255,255,0.07)] mint:cursor-pointer mint:hover:border-[#d1d5db] mint:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:border-[rgba(255,255,255,0.15)] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\",\n          isActive &&\n            \"mint:shadow-[0_0_0_2px_rgba(100,63,178,0.2)] mint:border-[rgba(100,63,178,0.3)]\"\n        )}\n      >\n        <div className=\"mint:flex mint:items-center mint:gap-2\">\n          <div className=\"mint:shrink-0\">\n            <div className=\"mint:w-8 mint:h-8 mint:rounded-lg mint:flex mint:items-center mint:justify-center mint:bg-[#e1cefc] mint:dark:bg-[#38255e] mint:border mint:border-[#643fb2] mint:dark:border-[#c9aaf9]\">\n              <Icon className=\"mint:w-4 mint:h-4 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\" />\n            </div>\n          </div>\n\n          <div className=\"mint:flex-1 mint:text-left mint:min-w-0\">\n            <div className=\"mint:text-sm mint:font-medium mint:text-[#111827] mint:dark:text-white\">\n              {dropdown.title}\n            </div>\n            <div className=\"mint:text-xs mint:text-[#4b5563] mint:dark:text-[#9ca3af] mint:line-clamp-2\">\n              {dropdown.description}\n            </div>\n          </div>\n\n          <div className=\"mint:flex-shrink-0\">\n            <svg\n              className={cn(\n                \"mint:w-4 mint:h-4 mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:transition-transform mint:duration-200\",\n                isExpanded ? \"mint:rotate-180\" : \"mint:rotate-0\"\n              )}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M19 9l-7 7-7-7\"\n              />\n            </svg>\n          </div>\n        </div>\n      </button>\n\n      {isExpanded && dropdown.items && dropdown.items.length > 0 && (\n        <div className=\"mint:relative mint:mt-2\">\n          <div className=\"mint:absolute mint:top-0 mint:left-0 mint:right-0 mint:z-10 mint:w-full mint:p-1 mint:rounded-lg mint:bg-white mint:dark:bg-[#1f1f1f] mint:border mint:border-[rgba(229,231,235,0.7)] mint:dark:border-[rgba(255,255,255,0.07)] mint:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)]\">\n            <div className=\"mint:flex mint:flex-col mint:gap-1\">\n              {dropdown.items.map((item, index) => {\n                const LinkElement = LinkComponent || \"a\";\n                return (\n                  <LinkElement\n                    key={`${item.href}-${index}`}\n                    href={item.href}\n                    className=\"mint:flex mint:items-center mint:justify-between mint:py-1.5 mint:px-2 mint:text-sm mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#111827] mint:dark:text-white mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#111827] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\"\n                  >\n                    <div className=\"mint:flex mint:items-center mint:gap-2\">\n                      {item.icon && (\n                        <div className=\"mint:w-7 mint:h-7 mint:rounded-lg mint:flex mint:items-center mint:justify-center mint:bg-[#e1cefc] mint:dark:bg-[#38255e] mint:border mint:border-[#643fb2] mint:dark:border-[#c9aaf9]\">\n                          <item.icon className=\"mint:w-4 mint:h-4 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\" />\n                        </div>\n                      )}\n                      <span className=\"mint:font-medium\">{item.title}</span>\n                    </div>\n                    {item.href && activeHref === item.href && (\n                      <CheckmarkFilled className=\"mint:w-3 mint:h-3 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\" />\n                    )}\n                  </LinkElement>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["DropdownMenu","dropdown","isActive","activeHref","className","isExpanded","setIsExpanded","useState","LinkComponent","useComponents","Icon","DocumentRegular","cn","jsx","jsxs","item","index","CheckmarkFilled"],"mappings":";;;;;AA8BO,SAASA,EAAa;AAAA,EAC3B,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAsB;AACpB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,EAAE,eAAAC,EAAA,IAAkBC,EAAA,GACpBC,IAAOT,EAAS,QAAQU;AAE9B,2BACG,OAAA,EAAI,WAAWC,EAAG,0BAA0BR,CAAS,GACpD,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMP,EAAc,CAACD,CAAU;AAAA,QACxC,iBAAeA;AAAA,QACf,cAAY,GAAGA,IAAa,aAAa,QAAQ,IAC/CJ,EAAS,KACX;AAAA,QACA,WAAWW;AAAA,UACT;AAAA,UACAV,KACE;AAAA,QAAA;AAAA,QAGJ,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2LACb,UAAA,gBAAAA,EAACH,GAAA,EAAK,WAAU,iEAAA,CAAiE,EAAA,CACnF,GACF;AAAA,UAEA,gBAAAI,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,YAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,0EACZ,UAAAZ,EAAS,OACZ;AAAA,YACA,gBAAAY,EAAC,OAAA,EAAI,WAAU,+EACZ,YAAS,YAAA,CACZ;AAAA,UAAA,GACF;AAAA,UAEA,gBAAAA,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACAP,IAAa,oBAAoB;AAAA,cAAA;AAAA,cAEnC,MAAK;AAAA,cACL,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,eAAY;AAAA,cAEZ,UAAA,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAc;AAAA,kBACd,gBAAe;AAAA,kBACf,aAAa;AAAA,kBACb,GAAE;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA,EACF,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAGDR,KAAcJ,EAAS,SAASA,EAAS,MAAM,SAAS,KACvD,gBAAAY,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA,gBAAAA,EAAC,SAAI,WAAU,kTACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,sCACZ,YAAS,MAAM,IAAI,CAACE,GAAMC,MAGvB,gBAAAF;AAAA,MAFkBN,KAAiB;AAAA,MAElC;AAAA,QAEC,MAAMO,EAAK;AAAA,QACX,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,YAAAC,EAAK,QACJ,gBAAAF,EAAC,OAAA,EAAI,WAAU,2LACb,UAAA,gBAAAA,EAACE,EAAK,MAAL,EAAU,WAAU,iEAAA,CAAiE,EAAA,CACxF;AAAA,YAEF,gBAAAF,EAAC,QAAA,EAAK,WAAU,oBAAoB,YAAK,MAAA,CAAM;AAAA,UAAA,GACjD;AAAA,UACCE,EAAK,QAAQZ,MAAeY,EAAK,QAChC,gBAAAF,EAACI,GAAA,EAAgB,WAAU,iEAAA,CAAiE;AAAA,QAAA;AAAA,MAAA;AAAA,MAbzF,GAAGF,EAAK,IAAI,IAAIC,CAAK;AAAA,IAAA,CAiB/B,EAAA,CACH,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}