@mintlify/components 0.4.8 → 0.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/frame/frame.css +1 -1
  2. package/dist/components/frame/frame.js +94 -74
  3. package/dist/components/icon/icon.css +1 -1
  4. package/dist/components/icon/icon.js +16 -16
  5. package/dist/index.d.ts +21 -7
  6. package/package.json +1 -1
package/dist/components/frame/frame.css CHANGED
@@ -1 +1 @@
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}
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;pointer-events:none;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 CHANGED
@@ -1,124 +1,144 @@
1
- import { jsx as e, jsxs as c } from "react/jsx-runtime";
2
- import { useRender as d } from "@base-ui-components/react/use-render";
1
+ import { jsxs as i, jsx as e } from "react/jsx-runtime";
2
+ import { useRender as b } from "@base-ui-components/react/use-render";
3
3
  import { cn as n } from "../../utils/cn.js";
4
4
  /* empty css */
5
- import { Icon as l } from "../icon/icon.js";
6
- function N({
7
- children: a,
8
- caption: r,
5
+ import { Icon as c } from "../icon/icon.js";
6
+ function C({
7
+ children: r,
8
+ caption: a,
9
9
  hint: t,
10
- hintIcon: s,
10
+ hintIcon: o,
11
11
  className: m,
12
- containerClassName: o,
13
- style: C,
14
- render: u = /* @__PURE__ */ e("div", {}),
15
- ...v
12
+ containerClassName: s,
13
+ style: v,
14
+ render: F = /* @__PURE__ */ e("div", {}),
15
+ ...g
16
16
  }) {
17
- const i = d({
18
- defaultTagName: "div",
19
- render: u,
20
- props: {
21
- ...v,
22
- style: C,
23
- className: n("mt-frame", m),
24
- "data-slot": "frame"
25
- }
26
- });
27
- return /* @__PURE__ */ c("div", { className: n("mt-frame-container", o), children: [
28
- t && /* @__PURE__ */ e(
29
- h,
17
+ return /* @__PURE__ */ i(f, { className: s, children: [
18
+ t && /* @__PURE__ */ e(h, { icon: o, children: t }),
19
+ /* @__PURE__ */ i(
20
+ d,
30
21
  {
31
- icon: s || /* @__PURE__ */ e(
32
- "svg",
33
- {
34
- xmlns: "http://www.w3.org/2000/svg",
35
- viewBox: "0 0 512 512",
36
- className: "mt-frame-hint-icon",
37
- "aria-hidden": "true",
38
- 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" })
39
- }
40
- ),
41
- children: t
22
+ ...g,
23
+ className: m,
24
+ style: v,
25
+ render: F,
26
+ children: [
27
+ /* @__PURE__ */ e(l, {}),
28
+ /* @__PURE__ */ e(u, { children: r }),
29
+ a && /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e("p", { children: a }) }),
30
+ /* @__PURE__ */ e(p, {})
31
+ ]
42
32
  }
43
- ),
44
- /* @__PURE__ */ c(i.type, { ...i.props, children: [
45
- /* @__PURE__ */ e("div", { className: "mt-frame-background" }),
46
- /* @__PURE__ */ e(f, { children: a }),
47
- r && /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e("p", { children: r }) }),
48
- /* @__PURE__ */ e("div", { className: "mt-frame-border" })
49
- ] })
33
+ )
50
34
  ] });
51
35
  }
52
- function g({
53
- children: a,
54
- className: r,
36
+ function f({ children: r, className: a, ...t }) {
37
+ return /* @__PURE__ */ e(
38
+ "div",
39
+ {
40
+ "data-slot": "frame-container",
41
+ className: n("mt-frame-container", a),
42
+ ...t,
43
+ children: r
44
+ }
45
+ );
46
+ }
47
+ function d({
48
+ children: r,
49
+ className: a,
55
50
  style: t,
56
- render: s = /* @__PURE__ */ e("div", {}),
51
+ render: o = /* @__PURE__ */ e("div", {}),
57
52
  ...m
58
53
  }) {
59
- const o = d({
54
+ const s = b({
60
55
  defaultTagName: "div",
61
- render: s,
56
+ render: o,
62
57
  props: {
63
58
  ...m,
64
59
  style: t,
65
- className: n("mt-frame", r),
60
+ className: n("mt-frame", a),
66
61
  "data-slot": "frame"
67
62
  }
68
63
  });
69
- return /* @__PURE__ */ e(o.type, { ...o.props, children: /* @__PURE__ */ c("div", { className: "mt-frame-wrapper", children: [
70
- /* @__PURE__ */ e("div", { className: "mt-frame-background" }),
71
- a,
72
- /* @__PURE__ */ e("div", { className: "mt-frame-border" })
73
- ] }) });
64
+ return /* @__PURE__ */ e(s.type, { ...s.props, children: r });
65
+ }
66
+ function l({
67
+ className: r,
68
+ ...a
69
+ }) {
70
+ return /* @__PURE__ */ e(
71
+ "div",
72
+ {
73
+ "data-slot": "frame-background",
74
+ className: n("mt-frame-background", r),
75
+ ...a
76
+ }
77
+ );
78
+ }
79
+ function p({ className: r, ...a }) {
80
+ return /* @__PURE__ */ e(
81
+ "div",
82
+ {
83
+ "data-slot": "frame-border",
84
+ className: n("mt-frame-border", r),
85
+ ...a
86
+ }
87
+ );
74
88
  }
75
- function f({ children: a, className: r, ...t }) {
89
+ function u({ children: r, className: a, ...t }) {
76
90
  return /* @__PURE__ */ e(
77
91
  "div",
78
92
  {
79
93
  "data-slot": "frame-content",
80
- className: n("mt-frame-content", r),
94
+ className: n("mt-frame-content", a),
81
95
  ...t,
82
- children: a
96
+ children: r
83
97
  }
84
98
  );
85
99
  }
86
- function p({ children: a, className: r, ...t }) {
100
+ function N({ children: r, className: a, ...t }) {
87
101
  return /* @__PURE__ */ e(
88
102
  "div",
89
103
  {
90
104
  "data-slot": "frame-caption",
91
- className: n("mt-frame-caption", r),
105
+ className: n("mt-frame-caption", a),
92
106
  ...t,
93
- children: a
107
+ children: r
94
108
  }
95
109
  );
96
110
  }
97
- function h({ children: a, className: r, icon: t, ...s }) {
98
- 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;
99
- return /* @__PURE__ */ c(
111
+ function h({ children: r, className: a, icon: t, ...o }) {
112
+ const m = typeof t == "string" ? /* @__PURE__ */ e(c, { icon: t, className: "mt-frame-hint-icon", size: 16 }) : t && typeof t == "object" && "icon" in t ? /* @__PURE__ */ e(c, { ...t, className: "mt-frame-hint-icon", size: 16 }) : t || null;
113
+ return /* @__PURE__ */ i(
100
114
  "div",
101
115
  {
102
116
  "data-slot": "frame-hint",
103
- className: n("mt-frame-hint", r),
104
- ...s,
117
+ className: n("mt-frame-hint", a),
118
+ ...o,
105
119
  children: [
106
120
  m || null,
107
- a && /* @__PURE__ */ e("p", { className: "mt-frame-hint-text", children: a })
121
+ r && /* @__PURE__ */ e("p", { className: "mt-frame-hint-text", children: r })
108
122
  ]
109
123
  }
110
124
  );
111
125
  }
112
- const H = Object.assign(N, {
113
- Root: g,
114
- Content: f,
115
- Caption: p,
126
+ const R = Object.assign(C, {
127
+ Root: f,
128
+ Wrapper: d,
129
+ Background: l,
130
+ Border: p,
131
+ Content: u,
132
+ Caption: N,
116
133
  Hint: h
117
134
  });
118
135
  export {
119
- H as Frame,
120
- p as FrameCaption,
121
- f as FrameContent,
136
+ R as Frame,
137
+ l as FrameBackground,
138
+ p as FrameBorder,
139
+ N as FrameCaption,
140
+ u as FrameContent,
122
141
  h as FrameHint,
123
- g as FrameRoot
142
+ f as FrameRoot,
143
+ d as FrameWrapper
124
144
  };
package/dist/components/icon/icon.css CHANGED
@@ -1 +1 @@
1
- .mt-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
1
+ .mt-icon{flex-shrink:0}
package/dist/components/icon/icon.js CHANGED
@@ -1,5 +1,5 @@
1
- import { jsx as u } from "react/jsx-runtime";
2
- import { cn as m } from "../../utils/cn.js";
1
+ import { jsx as l } from "react/jsx-runtime";
2
+ import { cn as u } from "../../utils/cn.js";
3
3
  import { isAbsoluteUrl as c } from "../../utils/isAbsoluteUrl.js";
4
4
  import { MINTLIFY_ICONS_CDN_URL as o } from "../../constants/index.js";
5
5
  import { FONT_AWESOME_BRANDS as f } from "../../constants/font-awesome-brands.js";
@@ -9,11 +9,11 @@ function R({
9
9
  icon: t,
10
10
  iconType: r,
11
11
  iconLibrary: s,
12
- color: a,
12
+ color: m,
13
13
  size: e = 16,
14
- className: n,
14
+ className: a,
15
15
  style: i,
16
- ...l
16
+ ...n
17
17
  }) {
18
18
  if (r && !p.includes(r))
19
19
  return $ && console.warn(
@@ -23,11 +23,11 @@ function R({
23
23
  ), null;
24
24
  if (typeof t == "string" && (c(t) || t.startsWith("/"))) {
25
25
  if (t.startsWith(o) || t.startsWith("https://mintlify.b-cdn.net")) {
26
- const k = l;
27
- return /* @__PURE__ */ u(
26
+ const k = n;
27
+ return /* @__PURE__ */ l(
28
28
  "svg",
29
29
  {
30
- className: m("mt-icon", n),
30
+ className: u("mt-icon", a),
31
31
  style: {
32
32
  WebkitMaskImage: `url(${t})`,
33
33
  WebkitMaskRepeat: "no-repeat",
@@ -36,7 +36,7 @@ function R({
36
36
  maskRepeat: "no-repeat",
37
37
  maskPosition: "center",
38
38
  maskSize: "100%",
39
- backgroundColor: a || "currentColor",
39
+ backgroundColor: "currentColor",
40
40
  width: e,
41
41
  height: e,
42
42
  ...i
@@ -45,13 +45,13 @@ function R({
45
45
  }
46
46
  );
47
47
  }
48
- const h = l;
49
- return /* @__PURE__ */ u(
48
+ const h = n;
49
+ return /* @__PURE__ */ l(
50
50
  "img",
51
51
  {
52
52
  src: t,
53
53
  alt: t,
54
- className: m("mt-icon", n),
54
+ className: u("mt-icon", a),
55
55
  style: {
56
56
  width: e,
57
57
  height: e,
@@ -61,11 +61,11 @@ function R({
61
61
  }
62
62
  );
63
63
  }
64
- const g = v(t.toLowerCase(), r, s), d = l;
65
- return /* @__PURE__ */ u(
64
+ const g = v(t.toLowerCase(), r, s), d = n;
65
+ return /* @__PURE__ */ l(
66
66
  "svg",
67
67
  {
68
- className: m("mt-icon", n),
68
+ className: u("mt-icon", a),
69
69
  style: {
70
70
  WebkitMaskImage: `url(${g})`,
71
71
  WebkitMaskRepeat: "no-repeat",
@@ -74,7 +74,7 @@ function R({
74
74
  maskRepeat: "no-repeat",
75
75
  maskPosition: "center",
76
76
  maskSize: s === "lucide" ? "100%" : void 0,
77
- backgroundColor: a || "currentColor",
77
+ backgroundColor: m,
78
78
  width: e,
79
79
  height: e,
80
80
  ...i
package/dist/index.d.ts CHANGED
@@ -435,14 +435,21 @@ export { focus_2 as focus }
435
435
 
436
436
  export declare const Frame: typeof FrameComponent & {
437
437
  Root: typeof FrameRoot;
438
+ Wrapper: typeof FrameWrapper;
439
+ Background: typeof FrameBackground;
440
+ Border: typeof FrameBorder;
438
441
  Content: typeof FrameContent;
439
442
  Caption: typeof FrameCaption;
440
443
  Hint: typeof FrameHint;
441
444
  };
442
445
 
446
+ export declare function FrameBackground({ className, ...props }: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
447
+
448
+ export declare function FrameBorder({ className, ...props }: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
449
+
443
450
  export declare function FrameCaption({ children, className, ...props }: FrameCaptionProps): JSX_2.Element;
444
451
 
445
- export declare interface FrameCaptionProps extends HTMLAttributes<HTMLDivElement> {
452
+ declare interface FrameCaptionProps extends HTMLAttributes<HTMLDivElement> {
446
453
  children: ReactNode;
447
454
  className?: string;
448
455
  }
@@ -451,20 +458,20 @@ declare function FrameComponent({ children, caption, hint, hintIcon, className,
451
458
 
452
459
  export declare function FrameContent({ children, className, ...props }: FrameContentProps): JSX_2.Element;
453
460
 
454
- export declare interface FrameContentProps extends HTMLAttributes<HTMLDivElement> {
461
+ declare interface FrameContentProps extends HTMLAttributes<HTMLDivElement> {
455
462
  children: ReactNode;
456
463
  className?: string;
457
464
  }
458
465
 
459
466
  export declare function FrameHint({ children, className, icon, ...props }: FrameHintProps): JSX_2.Element;
460
467
 
461
- export declare interface FrameHintProps extends HTMLAttributes<HTMLDivElement> {
468
+ declare interface FrameHintProps extends HTMLAttributes<HTMLDivElement> {
462
469
  icon?: IconProp;
463
470
  children: ReactNode;
464
471
  className?: string;
465
472
  }
466
473
 
467
- export declare interface FrameProps extends HTMLAttributes<HTMLElement> {
474
+ declare interface FrameProps extends HTMLAttributes<HTMLElement> {
468
475
  /**
469
476
  * Frame caption, at the bottom of the frame.
470
477
  */
@@ -474,7 +481,7 @@ export declare interface FrameProps extends HTMLAttributes<HTMLElement> {
474
481
  */
475
482
  hint?: string;
476
483
  /**
477
- * Frame hint, at the top of the frame.
484
+ * Frame hint icon, at the top of the frame.
478
485
  * @see {@link IconProp}
479
486
  */
480
487
  hintIcon?: IconProp;
@@ -485,9 +492,16 @@ export declare interface FrameProps extends HTMLAttributes<HTMLElement> {
485
492
  render?: React.ReactElement;
486
493
  }
487
494
 
488
- export declare function FrameRoot({ children, className, style, render, ...props }: FrameRootProps): JSX_2.Element;
495
+ export declare function FrameRoot({ children, className, ...props }: FrameRootProps): JSX_2.Element;
496
+
497
+ declare interface FrameRootProps extends HTMLAttributes<HTMLDivElement> {
498
+ className?: string;
499
+ children: ReactNode;
500
+ }
501
+
502
+ export declare function FrameWrapper({ children, className, style, render, ...props }: FrameWrapperProps): JSX_2.Element;
489
503
 
490
- export declare interface FrameRootProps extends HTMLAttributes<HTMLElement> {
504
+ declare interface FrameWrapperProps extends HTMLAttributes<HTMLElement> {
491
505
  className?: string;
492
506
  style?: CSSProperties;
493
507
  children: ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mintlify/components",
3
- "version": "0.4.8",
3
+ "version": "0.4.10",
4
4
  "description": "Mintlify Headless UI components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",