@mintlify/components 0.4.7 → 0.4.8

package/dist/components/callout/callout.js

@@ -1,27 +1,27 @@
-import { jsx as l, jsxs as y } from "react/jsx-runtime";
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
 import { cn as m } from "../../utils/cn.js";
-import b from "color";
+import x from "color";
 /* empty css            */
-import { Icon as r } from "../icon/icon.js";
+import { Icon as u } from "../icon/icon.js";
 function d({
-  children: n,
+  children: a,
   variant: o,
   color: t,
-  className: c,
-  style: a,
-  ...u
+  className: n,
+  style: c,
+  ...i
 }) {
-  let s = {};
+  let r = {};
   if (t) {
-    const e = b(t), i = e.isDark(), f = e.lighten(0.5), C = e.darken(0.5);
-    s = {
+    const e = x(t), s = e.isDark(), C = e.lighten(0.5), g = e.darken(0.5);
+    r = {
       borderColor: `${t}33`,
       backgroundColor: `${t}1a`,
-      "--callout-border": i ? `${t}66` : `${t}4d`,
-      "--callout-bg": i ? `${t}4d` : `${t}1a`,
-      "--callout-text": C.hex(),
+      "--callout-border": s ? `${t}66` : `${t}4d`,
+      "--callout-bg": s ? `${t}4d` : `${t}1a`,
+      "--callout-text": g.hex(),
       "--callout-icon-color": t,
-      "--dark-callout-text": f.hex()
+      "--dark-callout-text": C.hex()
     };
   }
   return /* @__PURE__ */ l(
@@ -33,27 +33,27 @@ function d({
         "mt-callout",
         o && `mt-callout-${o}`,
         t && "mt-callout-custom",
-        c
+        n
       ),
       role: "note",
       "aria-label": o ? `${o} callout` : "callout",
-      style: { ...s, ...a },
-      ...u,
-      children: n
+      style: { ...r, ...c },
+      ...i,
+      children: a
     }
   );
 }
-function p({
-  children: n,
+function f({
+  children: a,
   icon: o,
   className: t,
-  ...c
+  ...n
 }) {
-  const a = n || (typeof o == "string" ? /* @__PURE__ */ l(r, { icon: o, className: "mt-callout-icon", size: 16 }) : o && typeof o == "object" && "icon" in o ? /* @__PURE__ */ l(r, { ...o, className: "mt-callout-icon", size: 16 }) : null);
-  return /* @__PURE__ */ l("div", { className: m("mt-callout-icon-wrapper", t), ...c, children: a });
+  const c = a || (typeof o == "string" ? /* @__PURE__ */ l(u, { icon: o, className: "mt-callout-icon", size: 16 }) : o && typeof o == "object" && "icon" in o ? /* @__PURE__ */ l(u, { ...o, className: "mt-callout-icon", size: 16 }) : null);
+  return /* @__PURE__ */ l("div", { className: m("mt-callout-icon-wrapper", t), ...n, children: c });
 }
-function g({
-  children: n,
+function p({
+  children: a,
   className: o,
   ...t
 }) {
@@ -63,77 +63,59 @@ function g({
       "data-slot": "callout-content",
       className: m("mt-callout-content", o),
       ...t,
-      children: /* @__PURE__ */ l("div", { "data-slot": "callout-content-body", className: "mt-callout-body", children: n })
+      children: /* @__PURE__ */ l("div", { "data-slot": "callout-content-body", className: "mt-callout-body", children: a })
     }
   );
 }
-function x({
-  children: n,
+function h({
+  children: a,
   variant: o,
   icon: t,
-  color: c,
-  className: a,
-  style: u,
-  ...s
+  color: n,
+  className: c,
+  style: i,
+  ...r
 }) {
-  const e = o ? h(o) : null, i = typeof t == "string" ? /* @__PURE__ */ l(r, { icon: t, className: "mt-callout-icon", size: 16 }) : t && typeof t == "object" && "icon" in t ? /* @__PURE__ */ l(r, { ...t, className: "mt-callout-icon", size: 16 }) : t !== void 0 ? t : e ? /* @__PURE__ */ l(
-    r,
+  const e = o ? y(o) : null, s = typeof t == "string" ? /* @__PURE__ */ l(u, { icon: t, className: "mt-callout-icon", size: 16 }) : t && typeof t == "object" && "icon" in t ? /* @__PURE__ */ l(u, { ...t, className: "mt-callout-icon", size: 16 }) : t !== void 0 ? t : e ? /* @__PURE__ */ l(
+    u,
     {
-      icon: e.icon,
+      icon: e,
       className: "mt-callout-icon",
       size: 16,
-      iconType: e.iconType
+      iconType: "regular"
     }
   ) : null;
-  return /* @__PURE__ */ y(
+  return /* @__PURE__ */ b(
     d,
     {
       "data-slot": "callout-root",
       variant: o,
-      color: c,
-      className: a,
-      style: u,
-      ...s,
+      color: n,
+      className: c,
+      style: i,
+      ...r,
       children: [
-        i && /* @__PURE__ */ l(p, { children: i }),
-        /* @__PURE__ */ l(g, { children: n })
+        s && /* @__PURE__ */ l(f, { children: s }),
+        /* @__PURE__ */ l(p, { children: a })
       ]
     }
   );
 }
-function h(n) {
+function y(a) {
   return {
-    info: {
-      icon: "circle-info",
-      iconType: "regular"
-    },
-    warning: {
-      icon: "triangle-exclamation",
-      iconType: "regular"
-    },
-    success: {
-      icon: "check",
-      iconType: "regular"
-    },
-    danger: {
-      icon: "hexagon-exclamation",
-      iconType: "regular"
-    },
-    note: {
-      icon: "circle-exclamation",
-      iconType: "regular"
-    },
-    tip: {
-      icon: "lightbulb",
-      iconType: "regular"
-    }
-  }[n];
+    info: "circle-info",
+    warning: "triangle-exclamation",
+    success: "check",
+    danger: "hexagon-exclamation",
+    note: "circle-exclamation",
+    tip: "lightbulb"
+  }[a];
 }
-const j = Object.assign(x, {
+const z = Object.assign(h, {
   Root: d,
-  Icon: p,
-  Content: g
+  Icon: f,
+  Content: p
 });
 export {
-  j as Callout
+  z as Callout
 };

package/dist/components/frame/frame.css

@@ -0,0 +1 @@
+.mt-frame-container{display:block}.mt-frame-hint{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.mt-frame-hint-icon{flex-shrink:0;width:1rem;height:1rem;fill:#9ca3af}.mt-frame-hint-text{font-size:.875rem;font-weight:500;line-height:1.25rem;color:#374151}.mt-frame{position:relative;padding:.5rem;border-radius:1rem;overflow:hidden;background-color:#f9fafb7f}.mt-frame-background{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(229 229 229 / 0.2)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");background-position:10px 10px;mask-image:linear-gradient(0deg,#fff,#fff9);-webkit-mask-image:linear-gradient(0deg,#fff,rgb(255 255 255 / 60%))}.mt-frame-content{position:relative;display:flex;justify-content:center;border-radius:.75rem;overflow:hidden;background-color:#fff}.mt-frame-caption{position:relative;display:flex;justify-content:center;margin-top:.75rem;padding:0 2rem .5rem;font-size:.875rem;line-height:1.25rem;color:#374151}.mt-frame-border{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid rgb(0 0 0 / 5%);border-radius:1rem}:is(.dark,.dark-theme) .mt-frame{background-color:#1f293740}:is(.dark,.dark-theme) .mt-frame-hint-icon{fill:#d1d5db}:is(.dark,.dark-theme) .mt-frame-hint-text{color:#e5e7eb}:is(.dark,.dark-theme) .mt-frame-background{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");mask-image:linear-gradient(0deg,#ffffff1a,#ffffff7f);-webkit-mask-image:linear-gradient(0deg,rgb(255 255 255 / 10%),rgb(255 255 255 / 50%))}:is(.dark,.dark-theme) .mt-frame-content{background-color:#111827}:is(.dark,.dark-theme) .mt-frame-caption{color:#9ca3af}:is(.dark,.dark-theme) .mt-frame-border{border-color:#ffffff0d}

package/dist/components/frame/frame.js

@@ -0,0 +1,124 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useRender as d } from "@base-ui-components/react/use-render";
+import { cn as n } from "../../utils/cn.js";
+/* empty css          */
+import { Icon as l } from "../icon/icon.js";
+function N({
+  children: a,
+  caption: r,
+  hint: t,
+  hintIcon: s,
+  className: m,
+  containerClassName: o,
+  style: C,
+  render: u = /* @__PURE__ */ e("div", {}),
+  ...v
+}) {
+  const i = d({
+    defaultTagName: "div",
+    render: u,
+    props: {
+      ...v,
+      style: C,
+      className: n("mt-frame", m),
+      "data-slot": "frame"
+    }
+  });
+  return /* @__PURE__ */ c("div", { className: n("mt-frame-container", o), children: [
+    t && /* @__PURE__ */ e(
+      h,
+      {
+        icon: s || /* @__PURE__ */ e(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 512 512",
+            className: "mt-frame-hint-icon",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ e("path", { d: "M224 320c0 17.69 14.33 32 32 32h64c17.67 0 32-14.31 32-32s-14.33-32-32-32h-64C238.3 288 224 302.3 224 320zM267.6 256H352c17.67 0 32-14.31 32-32s-14.33-32-32-32h-80v40C272 240.5 270.3 248.5 267.6 256zM272 160H480c17.67 0 32-14.31 32-32s-14.33-32-32-32h-208.8C271.5 98.66 272 101.3 272 104V160zM320 416c0-17.69-14.33-32-32-32H224c-17.67 0-32 14.31-32 32s14.33 32 32 32h64C305.7 448 320 433.7 320 416zM202.1 355.8C196 345.6 192 333.3 192 320c0-5.766 1.08-11.24 2.51-16.55C157.4 300.6 128 269.9 128 232V159.1C128 151.2 135.2 144 143.1 144S160 151.2 159.1 159.1l0 69.72C159.1 245.2 171.3 271.1 200 271.1C222.1 271.1 240 254.1 240 232v-128C240 81.91 222.1 64 200 64H136.6C103.5 64 72.03 80 52.47 106.8L26.02 143.2C9.107 166.5 0 194.5 0 223.3V312C0 387.1 60.89 448 136 448h32.88C163.4 438.6 160 427.7 160 416C160 388.1 178 364.6 202.1 355.8z" })
+          }
+        ),
+        children: t
+      }
+    ),
+    /* @__PURE__ */ c(i.type, { ...i.props, children: [
+      /* @__PURE__ */ e("div", { className: "mt-frame-background" }),
+      /* @__PURE__ */ e(f, { children: a }),
+      r && /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e("p", { children: r }) }),
+      /* @__PURE__ */ e("div", { className: "mt-frame-border" })
+    ] })
+  ] });
+}
+function g({
+  children: a,
+  className: r,
+  style: t,
+  render: s = /* @__PURE__ */ e("div", {}),
+  ...m
+}) {
+  const o = d({
+    defaultTagName: "div",
+    render: s,
+    props: {
+      ...m,
+      style: t,
+      className: n("mt-frame", r),
+      "data-slot": "frame"
+    }
+  });
+  return /* @__PURE__ */ e(o.type, { ...o.props, children: /* @__PURE__ */ c("div", { className: "mt-frame-wrapper", children: [
+    /* @__PURE__ */ e("div", { className: "mt-frame-background" }),
+    a,
+    /* @__PURE__ */ e("div", { className: "mt-frame-border" })
+  ] }) });
+}
+function f({ children: a, className: r, ...t }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "frame-content",
+      className: n("mt-frame-content", r),
+      ...t,
+      children: a
+    }
+  );
+}
+function p({ children: a, className: r, ...t }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "frame-caption",
+      className: n("mt-frame-caption", r),
+      ...t,
+      children: a
+    }
+  );
+}
+function h({ children: a, className: r, icon: t, ...s }) {
+  const m = typeof t == "string" ? /* @__PURE__ */ e(l, { icon: t, className: "mt-frame-hint-icon", size: 16 }) : t && typeof t == "object" && "icon" in t ? /* @__PURE__ */ e(l, { ...t, className: "mt-frame-hint-icon", size: 16 }) : t || null;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-slot": "frame-hint",
+      className: n("mt-frame-hint", r),
+      ...s,
+      children: [
+        m || null,
+        a && /* @__PURE__ */ e("p", { className: "mt-frame-hint-text", children: a })
+      ]
+    }
+  );
+}
+const H = Object.assign(N, {
+  Root: g,
+  Content: f,
+  Caption: p,
+  Hint: h
+});
+export {
+  H as Frame,
+  p as FrameCaption,
+  f as FrameContent,
+  h as FrameHint,
+  g as FrameRoot
+};

package/dist/components/icon/icon.css

@@ -0,0 +1 @@
+.mt-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

package/dist/components/icon/icon.js

@@ -4,7 +4,8 @@ import { isAbsoluteUrl as c } from "../../utils/isAbsoluteUrl.js";
 import { MINTLIFY_ICONS_CDN_URL as o } from "../../constants/index.js";
 import { FONT_AWESOME_BRANDS as f } from "../../constants/font-awesome-brands.js";
 import { IS_DEV as $ } from "../../constants/env.js";
-function N({
+/* empty css         */
+function R({
   icon: t,
   iconType: r,
   iconLibrary: s,
@@ -14,9 +15,9 @@ function N({
   style: i,
   ...l
 }) {
-  if (r && !d.includes(r))
+  if (r && !p.includes(r))
     return $ && console.warn(
-      `Invalid iconType ${r} expected a string equal to one of: ${d.join(
+      `Invalid iconType ${r} expected a string equal to one of: ${p.join(
         ", "
       )}`
     ), null;
@@ -60,7 +61,7 @@ function N({
       }
     );
   }
-  const g = v(t.toLowerCase(), r, s), p = l;
+  const g = v(t.toLowerCase(), r, s), d = l;
   return /* @__PURE__ */ u(
     "svg",
     {
@@ -78,7 +79,7 @@ function N({
         height: e,
         ...i
       },
-      ...p
+      ...d
     }
   );
 }
@@ -88,7 +89,7 @@ function b(t) {
 function v(t, r, s) {
   return b(t) ? `${o}/v7.1.0/brands/${t}.svg` : s === "lucide" ? `${o}/lucide/v0.545.0/${t}.svg` : `${o}/v7.1.0/${r ?? "regular"}/${t}.svg`;
 }
-const R = ["fontawesome", "lucide"], d = [
+const S = ["fontawesome", "lucide"], p = [
   "brands",
   "duotone",
   "light",
@@ -102,8 +103,8 @@ const R = ["fontawesome", "lucide"], d = [
   "thin"
 ];
 export {
-  N as Icon,
+  R as Icon,
   v as getIconUrl,
-  R as iconLibraries,
-  d as iconTypes
+  S as iconLibraries,
+  p as iconTypes
 };

package/dist/index.d.ts

@@ -433,6 +433,67 @@ declare const focus_2: {
 };
 export { focus_2 as focus }
 
+export declare const Frame: typeof FrameComponent & {
+    Root: typeof FrameRoot;
+    Content: typeof FrameContent;
+    Caption: typeof FrameCaption;
+    Hint: typeof FrameHint;
+};
+
+export declare function FrameCaption({ children, className, ...props }: FrameCaptionProps): JSX_2.Element;
+
+export declare interface FrameCaptionProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+
+declare function FrameComponent({ children, caption, hint, hintIcon, className, containerClassName, style, render, ...props }: FrameProps): JSX_2.Element;
+
+export declare function FrameContent({ children, className, ...props }: FrameContentProps): JSX_2.Element;
+
+export declare interface FrameContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+
+export declare function FrameHint({ children, className, icon, ...props }: FrameHintProps): JSX_2.Element;
+
+export declare interface FrameHintProps extends HTMLAttributes<HTMLDivElement> {
+    icon?: IconProp;
+    children: ReactNode;
+    className?: string;
+}
+
+export declare interface FrameProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Frame caption, at the bottom of the frame.
+     */
+    caption?: string;
+    /**
+     * Frame hint text, at the top of the frame.
+     */
+    hint?: string;
+    /**
+     * Frame hint, at the top of the frame.
+     * @see {@link IconProp}
+     */
+    hintIcon?: IconProp;
+    className?: string;
+    containerClassName?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+    render?: React.ReactElement;
+}
+
+export declare function FrameRoot({ children, className, style, render, ...props }: FrameRootProps): JSX_2.Element;
+
+export declare interface FrameRootProps extends HTMLAttributes<HTMLElement> {
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+    render?: React.ReactElement;
+}
+
 export declare function getIconUrl(icon: string, iconType?: IconType, iconLibrary?: IconLibrary): string;
 
 export declare function Icon({ icon, iconType, iconLibrary, color, size, className, style, ...props }: IconProps): JSX_2.Element | null;

package/dist/index.js

@@ -1,17 +1,19 @@
 /* empty css           */
 import { Badge as s } from "./components/badge/badge.js";
-import { Callout as c } from "./components/callout/callout.js";
-import { Icon as n, getIconUrl as p, iconLibraries as f, iconTypes as m } from "./components/icon/icon.js";
-import { colors as l, designTokens as x, focus as d, shadows as g } from "./styles/design-tokens.js";
+import { Callout as m } from "./components/callout/callout.js";
+import { Frame as c } from "./components/frame/frame.js";
+import { Icon as i, getIconUrl as n, iconLibraries as a, iconTypes as x } from "./components/icon/icon.js";
+import { colors as d, designTokens as g, focus as u, shadows as I } from "./styles/design-tokens.js";
 export {
   s as Badge,
-  c as Callout,
-  n as Icon,
-  l as colors,
-  x as designTokens,
-  d as focus,
-  p as getIconUrl,
-  f as iconLibraries,
-  m as iconTypes,
-  g as shadows
+  m as Callout,
+  c as Frame,
+  i as Icon,
+  d as colors,
+  g as designTokens,
+  u as focus,
+  n as getIconUrl,
+  a as iconLibraries,
+  x as iconTypes,
+  I as shadows
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintlify/components",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "Mintlify Headless UI components",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -61,6 +61,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.6",
     "clsx": "^2.1.1",
     "color": "^5.0.3"
   },