@mintlify/components 0.4.3 → 0.4.5

package/dist/components/badge/badge.js

@@ -1,8 +1,8 @@
-import { jsxs as c, jsx as p } from "react/jsx-runtime";
-import { cn as g } from "../../utils/cn.js";
+import { jsxs as p, jsx as g } from "react/jsx-runtime";
+import { cn as f } from "../../utils/cn.js";
 /* empty css          */
-import { Icon as f } from "../icon/icon.js";
-function j({
+import { Icon as l } from "../icon/icon.js";
+function y({
   children: d,
   color: e = "gray",
   shape: m = "rounded",
@@ -11,18 +11,20 @@ function j({
   disabled: s = !1,
   icon: t,
   iconType: n,
-  className: i
+  iconLibrary: i,
+  className: c
 }) {
-  const o = typeof t == "string" ? /* @__PURE__ */ p(
-    f,
+  const o = typeof t == "string" ? /* @__PURE__ */ g(
+    l,
     {
       icon: t,
       iconType: n,
+      iconLibrary: i,
       className: "mt-badge-icon",
-      size: l[a]
+      size: b[a]
     }
   ) : t;
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ p(
     "span",
     {
       "data-shape": m,
@@ -31,11 +33,11 @@ function j({
       "data-color": e,
       "data-size": a,
       "aria-disabled": s,
-      className: g(
+      className: f(
         "mt-badge",
         `mt-badge-${e}`,
         `mt-badge-${a}`,
-        i
+        c
       ),
       children: [
         !!o && o,
@@ -44,12 +46,12 @@ function j({
     }
   );
 }
-const l = {
+const b = {
   xs: 12,
   sm: 14,
   md: 16,
   lg: 16
 };
 export {
-  j as Badge
+  y as Badge
 };

package/dist/components/icon/base-icon.js

@@ -0,0 +1,98 @@
+import { jsx as l } from "react/jsx-runtime";
+import { cn as u } from "../../utils/cn.js";
+import { isAbsoluteUrl as g } from "../../utils/isAbsoluteUrl.js";
+import { MINTLIFY_ICONS_CDN_URL as a } from "../../constants/index.js";
+import { FONT_AWESOME_BRANDS as p } from "../../constants/font-awesome-brands.js";
+function v({
+  icon: t,
+  iconType: e,
+  iconLibrary: s,
+  color: o,
+  size: r = 16,
+  className: n,
+  style: i
+}) {
+  if (e && !d.includes(e))
+    return console.warn(
+      `Invalid iconType ${e} expected a string equal to one of: ${d.join(
+        ", "
+      )}`
+    ), null;
+  if (typeof t == "string" && (g(t) || t.startsWith("/")))
+    return t.startsWith(a) || t.startsWith("https://mintlify.b-cdn.net") ? /* @__PURE__ */ l(
+      "svg",
+      {
+        className: u("mt-icon", n),
+        style: {
+          WebkitMaskImage: `url(${t})`,
+          WebkitMaskRepeat: "no-repeat",
+          WebkitMaskPosition: "center",
+          maskImage: `url(${t})`,
+          maskRepeat: "no-repeat",
+          maskPosition: "center",
+          maskSize: "100%",
+          backgroundColor: o || "currentColor",
+          width: r,
+          height: r,
+          ...i
+        }
+      }
+    ) : /* @__PURE__ */ l(
+      "img",
+      {
+        src: t,
+        alt: t,
+        className: u("mt-icon", n),
+        style: {
+          width: r,
+          height: r,
+          ...i
+        }
+      }
+    );
+  const m = k(t.toLowerCase(), e, s);
+  return /* @__PURE__ */ l(
+    "svg",
+    {
+      className: u("mt-icon", n),
+      style: {
+        WebkitMaskImage: `url(${m})`,
+        WebkitMaskRepeat: "no-repeat",
+        WebkitMaskPosition: "center",
+        maskImage: `url(${m})`,
+        maskRepeat: "no-repeat",
+        maskPosition: "center",
+        maskSize: s === "lucide" ? "100%" : void 0,
+        backgroundColor: o || "currentColor",
+        width: r,
+        height: r,
+        ...i
+      }
+    }
+  );
+}
+function h(t) {
+  return t ? p.includes(t.toLowerCase()) : !1;
+}
+function k(t, e, s) {
+  return h(t) ? `${a}/v7.1.0/brands/${t}.svg` : s === "lucide" ? `${a}/lucide/v0.545.0/${t}.svg` : `${a}/v7.1.0/${e ?? "regular"}/${t}.svg`;
+}
+const W = ["fontawesome", "lucide"], d = [
+  "brands",
+  "duotone",
+  "light",
+  "regular",
+  "sharp-duotone-solid",
+  "sharp-light",
+  "sharp-regular",
+  "sharp-solid",
+  "sharp-thin",
+  "solid",
+  "thin"
+];
+export {
+  v as BaseIcon,
+  k as getIconUrl,
+  W as iconLibraries,
+  d as iconTypes
+};

package/dist/components/icon/icon.js

@@ -1,99 +1,32 @@
-import { jsx as l } from "react/jsx-runtime";
-import { cn as u } from "../../utils/cn.js";
-import { isAbsoluteUrl as d } from "../../utils/isAbsoluteUrl.js";
-import { MINTLIFY_ICONS_CDN_URL as a } from "../../constants/index.js";
-import { FONT_AWESOME_BRANDS as g } from "../../constants/font-awesome-brands.js";
+import { jsx as m } from "react/jsx-runtime";
+import { BaseIcon as c } from "./base-icon.js";
 /* empty css         */
-function W({
-  icon: t,
-  iconType: e,
-  iconLibrary: s,
-  color: o,
-  size: r = 16,
-  className: n,
-  style: i
+function d({
+  icon: i,
+  iconType: o,
+  iconLibrary: r,
+  color: n,
+  size: t = 16,
+  className: e,
+  style: l
 }) {
-  if (e && !p.includes(e))
-    return console.warn(
-      `Invalid iconType ${e} expected a string equal to one of: ${p.join(
-        ", "
-      )}`
-    ), null;
-  if (typeof t == "string" && (d(t) || t.startsWith("/")))
-    return t.startsWith(a) || t.startsWith("https://mintlify.b-cdn.net") ? /* @__PURE__ */ l(
-      "svg",
-      {
-        className: u("mt-icon", n),
-        style: {
-          WebkitMaskImage: `url(${t})`,
-          WebkitMaskRepeat: "no-repeat",
-          WebkitMaskPosition: "center",
-          maskImage: `url(${t})`,
-          maskRepeat: "no-repeat",
-          maskPosition: "center",
-          maskSize: "100%",
-          backgroundColor: o || "currentColor",
-          width: r,
-          height: r,
-          ...i
-        }
-      }
-    ) : /* @__PURE__ */ l(
-      "img",
-      {
-        src: t,
-        alt: t,
-        className: u("mt-icon", n),
-        style: {
-          width: r,
-          height: r,
-          ...i
-        }
-      }
-    );
-  const m = k(t.toLowerCase(), e, s);
-  return /* @__PURE__ */ l(
-    "svg",
+  return /* @__PURE__ */ m(
+    c,
     {
-      className: u("mt-icon", n),
+      icon: i,
+      iconType: o,
+      iconLibrary: r,
+      color: n,
+      size: t,
+      className: e,
       style: {
-        WebkitMaskImage: `url(${m})`,
-        WebkitMaskRepeat: "no-repeat",
-        WebkitMaskPosition: "center",
-        maskImage: `url(${m})`,
-        maskRepeat: "no-repeat",
-        maskPosition: "center",
-        maskSize: s === "lucide" ? "100%" : void 0,
-        backgroundColor: o || "currentColor",
-        width: r,
-        height: r,
-        ...i
+        display: "inline-block",
+        verticalAlign: "middle",
+        ...l
       }
     }
   );
 }
-function h(t) {
-  return t ? g.includes(t.toLowerCase()) : !1;
-}
-function k(t, e, s) {
-  return h(t) ? `${a}/v7.1.0/brands/${t}.svg` : s === "lucide" ? `${a}/lucide/v0.545.0/${t}.svg` : `${a}/v7.1.0/${e ?? "regular"}/${t}.svg`;
-}
-const C = ["fontawesome", "lucide"], p = [
-  "brands",
-  "duotone",
-  "light",
-  "regular",
-  "sharp-duotone-solid",
-  "sharp-light",
-  "sharp-regular",
-  "sharp-solid",
-  "sharp-thin",
-  "solid",
-  "thin"
-];
 export {
-  W as Icon,
-  k as getIconUrl,
-  C as iconLibraries,
-  p as iconTypes
+  d as Icon
 };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-export declare function Badge({ children, color, shape, size, stroke, disabled, icon, iconType, className, }: BadgeProps): JSX_2.Element;
+export declare function Badge({ children, color, shape, size, stroke, disabled, icon, iconType, iconLibrary, className, }: BadgeProps): JSX_2.Element;
 
 export declare interface BadgeProps {
     /**
@@ -42,10 +42,49 @@ export declare interface BadgeProps {
      * @see {@link IconType}
      */
     iconType?: IconType;
+    /**
+     * Icon library when `icon` is a string.
+     * @see {@link IconLibrary}
+     */
+    iconLibrary?: IconLibrary;
     className?: string;
     children: ReactNode;
 }
 
+export declare function BaseIcon({ icon, iconType, iconLibrary, color, size, className, style, }: BaseIconProps): JSX_2.Element | null;
+
+export declare interface BaseIconProps {
+    /**
+     * Icon name or custom URL.
+     * Supports Font Awesome icons, Lucide icons, or any custom URL.
+     */
+    icon: string;
+    /**
+     * Icon style variant.
+     * @default "regular"
+     * @see {@link IconType}
+     */
+    iconType?: IconType;
+    /**
+     * Icon library to use.
+     * @default "fontawesome"
+     * @see {@link IconLibrary}
+     */
+    iconLibrary?: IconLibrary;
+    /**
+     * Icon color.
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * Icon size in pixels.
+     * @default 16
+     */
+    size?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+
 export declare const colors: {
     "base-white": string;
     "base-dark-1": string;
@@ -382,39 +421,17 @@ export { focus_2 as focus }
 
 export declare function getIconUrl(icon: string, iconType?: IconType, iconLibrary?: IconLibrary): string;
 
-export declare function Icon({ icon, iconType, iconLibrary, color, size, className, style, }: IconProps): JSX_2.Element | null;
+export declare function Icon({ icon, iconType, iconLibrary, color, size, className, style, }: IconProps): JSX_2.Element;
 
 export declare const iconLibraries: readonly ["fontawesome", "lucide"];
 
 export declare type IconLibrary = "fontawesome" | "lucide";
 
 export declare interface IconProps {
-    /**
-     * Icon name or custom URL.
-     * Supports Font Awesome icons, Lucide icons, or any custom URL.
-     */
     icon: string;
-    /**
-     * Icon style variant.
-     * @default "regular"
-     * @see {@link IconType}
-     */
     iconType?: IconType;
-    /**
-     * Icon library to use.
-     * @default "fontawesome"
-     * @see {@link IconLibrary}
-     */
     iconLibrary?: IconLibrary;
-    /**
-     * Icon color.
-     * @default "currentColor"
-     */
     color?: string;
-    /**
-     * Icon size in pixels.
-     * @default 16
-     */
     size?: number;
     className?: string;
     style?: CSSProperties;

package/dist/index.js

@@ -1,15 +1,17 @@
 /* empty css           */
 import { Badge as s } from "./components/badge/badge.js";
-import { Icon as i, getIconUrl as n, iconLibraries as p, iconTypes as t } from "./components/icon/icon.js";
-import { colors as m, designTokens as a, focus as d, shadows as g } from "./styles/design-tokens.js";
+import { Icon as n } from "./components/icon/icon.js";
+import { BaseIcon as p, getIconUrl as t, iconLibraries as f, iconTypes as m } from "./components/icon/base-icon.js";
+import { colors as x, designTokens as d, focus as g, shadows as I } from "./styles/design-tokens.js";
 export {
   s as Badge,
-  i as Icon,
-  m as colors,
-  a as designTokens,
-  d as focus,
-  n as getIconUrl,
-  p as iconLibraries,
-  t as iconTypes,
-  g as shadows
+  p as BaseIcon,
+  n as Icon,
+  x as colors,
+  d as designTokens,
+  g as focus,
+  t as getIconUrl,
+  f as iconLibraries,
+  m as iconTypes,
+  I as shadows
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintlify/components",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Mintlify Headless UI components",
   "type": "module",
   "main": "./dist/index.cjs",