@mintlify/components 0.4.11 → 0.4.12
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.mt-callout{display:flex;gap:.75rem;padding:1rem 1.25rem;border-radius
|
|
1
|
+
.mt-callout{display:flex;gap:.75rem;padding:1rem 1.25rem;border-radius:1rem;border-width:1px;border-style:solid;margin:1rem 0;background-color:var(--callout-bg, rgb(250 250 250 / 50%));border-color:var(--callout-border, rgb(113 113 122 / 20%));color:var(--callout-text, rgb(24 24 27));--callout-icon-color: rgb(161 161 170)}:is(.dark,.dark-theme) .mt-callout{background-color:var(--callout-bg, rgb(113 113 122 / 10%));border-color:var(--callout-border, rgb(113 113 122 / 30%));color:var(--callout-text, rgb(228 228 231));--callout-icon-color: rgb(212 212 216)}.mt-callout-icon-wrapper{flex-shrink:0;display:flex;align-items:flex-start;padding-top:.125rem}.mt-callout-icon{color:var(--callout-icon-color)}.mt-callout-content{flex:1;min-width:0;font-size:.875rem;line-height:1.5}.mt-callout-body{color:var(--callout-text)}:is(.dark,.dark-theme) .mt-callout-custom .mt-callout-body{color:var(--dark-callout-text)}.mt-callout-info{--callout-bg: rgb(250 250 250 / 50%);--callout-border: rgb(113 113 122 / 20%);--callout-text: rgb(24 24 27);--callout-icon-color: rgb(161 161 170)}:is(.dark,.dark-theme) .mt-callout-info{--callout-bg: rgb(113 113 122 / 10%);--callout-border: rgb(113 113 122 / 30%);--callout-text: rgb(228 228 231);--callout-icon-color: rgb(212 212 216)}.mt-callout-warning{--callout-bg: rgb(255 251 235 / 50%);--callout-border: rgb(245 158 11 / 20%);--callout-text: rgb(120 53 15);--callout-icon-color: rgb(251 191 36)}:is(.dark,.dark-theme) .mt-callout-warning{--callout-bg: rgb(245 158 11 / 10%);--callout-border: rgb(245 158 11 / 30%);--callout-text: rgb(253 230 138);--callout-icon-color: rgb(252 211 77 / 80%)}.mt-callout-success{--callout-bg: rgb(236 253 245 / 50%);--callout-border: rgb(16 185 129 / 20%);--callout-text: rgb(6 78 59);--callout-icon-color: rgb(22 163 74)}:is(.dark,.dark-theme) .mt-callout-success{--callout-bg: rgb(16 185 129 / 10%);--callout-border: rgb(16 185 129 / 30%);--callout-text: rgb(167 243 208);--callout-icon-color: rgb(74 222 128 / 80%)}.mt-callout-danger{--callout-bg: rgb(254 242 242 / 50%);--callout-border: rgb(239 68 68 / 20%);--callout-text: rgb(127 29 29);--callout-icon-color: rgb(220 38 38)}:is(.dark,.dark-theme) .mt-callout-danger{--callout-bg: rgb(239 68 68 / 10%);--callout-border: rgb(239 68 68 / 30%);--callout-text: rgb(252 165 165);--callout-icon-color: rgb(248 113 113 / 80%)}.mt-callout-note{--callout-bg: rgb(240 249 255 / 50%);--callout-border: rgb(14 165 233 / 20%);--callout-text: rgb(12 74 110);--callout-icon-color: rgb(14 165 233)}:is(.dark,.dark-theme) .mt-callout-note{--callout-bg: rgb(14 165 233 / 10%);--callout-border: rgb(14 165 233 / 30%);--callout-text: rgb(186 230 253);--callout-icon-color: rgb(14 165 233)}.mt-callout-tip{--callout-bg: rgb(236 253 245 / 50%);--callout-border: rgb(16 185 129 / 20%);--callout-text: rgb(6 78 59);--callout-icon-color: rgb(5 150 105)}:is(.dark,.dark-theme) .mt-callout-tip{--callout-bg: rgb(16 185 129 / 10%);--callout-border: rgb(16 185 129 / 30%);--callout-text: rgb(167 243 208);--callout-icon-color: rgb(52 211 153 / 80%)}
|
|
@@ -1,120 +1,137 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { cn as
|
|
3
|
-
import
|
|
1
|
+
import { jsxs as x, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { cn as i } from "../../utils/cn.js";
|
|
3
|
+
import b from "color";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import { Icon as
|
|
5
|
+
import { Icon as s } from "../icon/icon.js";
|
|
6
|
+
function h(l) {
|
|
7
|
+
return {
|
|
8
|
+
info: "circle-info",
|
|
9
|
+
warning: "triangle-exclamation",
|
|
10
|
+
success: "check",
|
|
11
|
+
danger: "hexagon-exclamation",
|
|
12
|
+
note: "circle-exclamation",
|
|
13
|
+
tip: "lightbulb"
|
|
14
|
+
}[l];
|
|
15
|
+
}
|
|
6
16
|
function d({
|
|
7
|
-
children:
|
|
8
|
-
variant:
|
|
9
|
-
color:
|
|
10
|
-
className:
|
|
11
|
-
style:
|
|
12
|
-
...
|
|
17
|
+
children: l,
|
|
18
|
+
variant: t,
|
|
19
|
+
color: o,
|
|
20
|
+
className: e,
|
|
21
|
+
style: r,
|
|
22
|
+
...a
|
|
13
23
|
}) {
|
|
14
|
-
let
|
|
15
|
-
if (
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
borderColor: `${
|
|
19
|
-
backgroundColor: `${
|
|
20
|
-
"--callout-border":
|
|
21
|
-
"--callout-bg":
|
|
22
|
-
"--callout-text":
|
|
23
|
-
"--callout-icon-color":
|
|
24
|
-
"--dark-callout-text":
|
|
24
|
+
let c = {};
|
|
25
|
+
if (o) {
|
|
26
|
+
const u = b(o), m = u.isDark(), g = u.lighten(0.5), p = u.darken(0.5);
|
|
27
|
+
c = {
|
|
28
|
+
borderColor: `${o}33`,
|
|
29
|
+
backgroundColor: `${o}1a`,
|
|
30
|
+
"--callout-border": m ? `${o}66` : `${o}4d`,
|
|
31
|
+
"--callout-bg": m ? `${o}4d` : `${o}1a`,
|
|
32
|
+
"--callout-text": p.hex(),
|
|
33
|
+
"--callout-icon-color": o,
|
|
34
|
+
"--dark-callout-text": g.hex()
|
|
25
35
|
};
|
|
26
36
|
}
|
|
27
|
-
return /* @__PURE__ */
|
|
37
|
+
return /* @__PURE__ */ n(
|
|
28
38
|
"div",
|
|
29
39
|
{
|
|
30
40
|
"data-slot": "callout",
|
|
31
|
-
"data-variant":
|
|
32
|
-
className:
|
|
41
|
+
"data-variant": t,
|
|
42
|
+
className: i(
|
|
33
43
|
"mt-callout",
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
44
|
+
t && `mt-callout-${t}`,
|
|
45
|
+
o && "mt-callout-custom",
|
|
46
|
+
e
|
|
37
47
|
),
|
|
38
48
|
role: "note",
|
|
39
|
-
"aria-label":
|
|
40
|
-
style: { ...
|
|
41
|
-
...
|
|
42
|
-
children:
|
|
49
|
+
"aria-label": t ? `${t} callout` : "callout",
|
|
50
|
+
style: { ...c, ...r },
|
|
51
|
+
...a,
|
|
52
|
+
children: l
|
|
43
53
|
}
|
|
44
54
|
);
|
|
45
55
|
}
|
|
46
|
-
function
|
|
47
|
-
children:
|
|
48
|
-
icon:
|
|
49
|
-
|
|
50
|
-
|
|
56
|
+
function C({
|
|
57
|
+
children: l,
|
|
58
|
+
icon: t,
|
|
59
|
+
variant: o,
|
|
60
|
+
className: e,
|
|
61
|
+
...r
|
|
51
62
|
}) {
|
|
52
|
-
const
|
|
53
|
-
|
|
63
|
+
const a = o ? h(o) : null, c = l || (typeof t == "string" ? /* @__PURE__ */ n(
|
|
64
|
+
s,
|
|
65
|
+
{
|
|
66
|
+
icon: t,
|
|
67
|
+
className: "mt-callout-icon",
|
|
68
|
+
size: 16,
|
|
69
|
+
color: "currentColor"
|
|
70
|
+
}
|
|
71
|
+
) : t && typeof t == "object" && "icon" in t ? /* @__PURE__ */ n(
|
|
72
|
+
s,
|
|
73
|
+
{
|
|
74
|
+
...t,
|
|
75
|
+
className: "mt-callout-icon",
|
|
76
|
+
size: 16,
|
|
77
|
+
color: "currentColor"
|
|
78
|
+
}
|
|
79
|
+
) : t !== void 0 ? t : a ? /* @__PURE__ */ n(
|
|
80
|
+
s,
|
|
81
|
+
{
|
|
82
|
+
icon: a,
|
|
83
|
+
className: "mt-callout-icon",
|
|
84
|
+
size: 16,
|
|
85
|
+
iconType: "regular",
|
|
86
|
+
color: "currentColor"
|
|
87
|
+
}
|
|
88
|
+
) : null);
|
|
89
|
+
return c ? /* @__PURE__ */ n("div", { className: i("mt-callout-icon-wrapper", e), ...r, children: c }) : null;
|
|
54
90
|
}
|
|
55
|
-
function
|
|
56
|
-
children:
|
|
57
|
-
className:
|
|
58
|
-
...
|
|
91
|
+
function f({
|
|
92
|
+
children: l,
|
|
93
|
+
className: t,
|
|
94
|
+
...o
|
|
59
95
|
}) {
|
|
60
|
-
return /* @__PURE__ */
|
|
96
|
+
return /* @__PURE__ */ n(
|
|
61
97
|
"div",
|
|
62
98
|
{
|
|
63
99
|
"data-slot": "callout-content",
|
|
64
|
-
className:
|
|
65
|
-
...
|
|
66
|
-
children: /* @__PURE__ */
|
|
100
|
+
className: i("mt-callout-content", t),
|
|
101
|
+
...o,
|
|
102
|
+
children: /* @__PURE__ */ n("div", { "data-slot": "callout-content-body", className: "mt-callout-body", children: l })
|
|
67
103
|
}
|
|
68
104
|
);
|
|
69
105
|
}
|
|
70
|
-
function
|
|
71
|
-
children:
|
|
72
|
-
variant:
|
|
73
|
-
icon:
|
|
74
|
-
color:
|
|
75
|
-
className:
|
|
76
|
-
style:
|
|
77
|
-
...
|
|
106
|
+
function $({
|
|
107
|
+
children: l,
|
|
108
|
+
variant: t,
|
|
109
|
+
icon: o,
|
|
110
|
+
color: e,
|
|
111
|
+
className: r,
|
|
112
|
+
style: a,
|
|
113
|
+
...c
|
|
78
114
|
}) {
|
|
79
|
-
|
|
80
|
-
u,
|
|
81
|
-
{
|
|
82
|
-
icon: e,
|
|
83
|
-
className: "mt-callout-icon",
|
|
84
|
-
size: 16,
|
|
85
|
-
iconType: "regular"
|
|
86
|
-
}
|
|
87
|
-
) : null;
|
|
88
|
-
return /* @__PURE__ */ b(
|
|
115
|
+
return /* @__PURE__ */ x(
|
|
89
116
|
d,
|
|
90
117
|
{
|
|
91
118
|
"data-slot": "callout-root",
|
|
92
|
-
variant:
|
|
93
|
-
color:
|
|
94
|
-
className:
|
|
95
|
-
style:
|
|
96
|
-
...
|
|
119
|
+
variant: t,
|
|
120
|
+
color: e,
|
|
121
|
+
className: r,
|
|
122
|
+
style: a,
|
|
123
|
+
...c,
|
|
97
124
|
children: [
|
|
98
|
-
|
|
99
|
-
/* @__PURE__ */
|
|
125
|
+
/* @__PURE__ */ n(C, { icon: o, variant: t }),
|
|
126
|
+
/* @__PURE__ */ n(f, { children: l })
|
|
100
127
|
]
|
|
101
128
|
}
|
|
102
129
|
);
|
|
103
130
|
}
|
|
104
|
-
|
|
105
|
-
return {
|
|
106
|
-
info: "circle-info",
|
|
107
|
-
warning: "triangle-exclamation",
|
|
108
|
-
success: "check",
|
|
109
|
-
danger: "hexagon-exclamation",
|
|
110
|
-
note: "circle-exclamation",
|
|
111
|
-
tip: "lightbulb"
|
|
112
|
-
}[a];
|
|
113
|
-
}
|
|
114
|
-
const z = Object.assign(h, {
|
|
131
|
+
const z = Object.assign($, {
|
|
115
132
|
Root: d,
|
|
116
|
-
Icon:
|
|
117
|
-
Content:
|
|
133
|
+
Icon: C,
|
|
134
|
+
Content: f
|
|
118
135
|
});
|
|
119
136
|
export {
|
|
120
137
|
z as Callout
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRender as
|
|
1
|
+
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useRender as F } 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
|
|
6
|
-
function
|
|
5
|
+
import { Icon as i } from "../icon/icon.js";
|
|
6
|
+
function z({
|
|
7
7
|
children: r,
|
|
8
8
|
caption: a,
|
|
9
9
|
hint: t,
|
|
@@ -11,22 +11,22 @@ function C({
|
|
|
11
11
|
className: m,
|
|
12
12
|
containerClassName: s,
|
|
13
13
|
style: v,
|
|
14
|
-
render:
|
|
14
|
+
render: N = /* @__PURE__ */ e("div", {}),
|
|
15
15
|
...g
|
|
16
16
|
}) {
|
|
17
|
-
return /* @__PURE__ */
|
|
17
|
+
return /* @__PURE__ */ c(f, { className: s, children: [
|
|
18
18
|
t && /* @__PURE__ */ e(h, { icon: o, children: t }),
|
|
19
|
-
/* @__PURE__ */
|
|
19
|
+
/* @__PURE__ */ c(
|
|
20
20
|
d,
|
|
21
21
|
{
|
|
22
22
|
...g,
|
|
23
23
|
className: m,
|
|
24
24
|
style: v,
|
|
25
|
-
render:
|
|
25
|
+
render: N,
|
|
26
26
|
children: [
|
|
27
27
|
/* @__PURE__ */ e(l, {}),
|
|
28
28
|
/* @__PURE__ */ e(u, { children: r }),
|
|
29
|
-
a && /* @__PURE__ */ e(
|
|
29
|
+
a && /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e("p", { children: a }) }),
|
|
30
30
|
/* @__PURE__ */ e(p, {})
|
|
31
31
|
]
|
|
32
32
|
}
|
|
@@ -51,7 +51,7 @@ function d({
|
|
|
51
51
|
render: o = /* @__PURE__ */ e("div", {}),
|
|
52
52
|
...m
|
|
53
53
|
}) {
|
|
54
|
-
const s =
|
|
54
|
+
const s = F({
|
|
55
55
|
defaultTagName: "div",
|
|
56
56
|
render: o,
|
|
57
57
|
props: {
|
|
@@ -97,7 +97,7 @@ function u({ children: r, className: a, ...t }) {
|
|
|
97
97
|
}
|
|
98
98
|
);
|
|
99
99
|
}
|
|
100
|
-
function
|
|
100
|
+
function C({ children: r, className: a, ...t }) {
|
|
101
101
|
return /* @__PURE__ */ e(
|
|
102
102
|
"div",
|
|
103
103
|
{
|
|
@@ -109,8 +109,16 @@ function N({ children: r, className: a, ...t }) {
|
|
|
109
109
|
);
|
|
110
110
|
}
|
|
111
111
|
function h({ children: r, className: a, icon: t, ...o }) {
|
|
112
|
-
const m = typeof t == "string" ? /* @__PURE__ */ e(
|
|
113
|
-
|
|
112
|
+
const m = typeof t == "string" ? /* @__PURE__ */ e(i, { icon: t, className: "mt-frame-hint-icon", size: 16 }) : t && typeof t == "object" && "icon" in t ? /* @__PURE__ */ e(i, { ...t, className: "mt-frame-hint-icon", size: 16 }) : t || /* @__PURE__ */ e(
|
|
113
|
+
"svg",
|
|
114
|
+
{
|
|
115
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
116
|
+
viewBox: "0 0 512 512",
|
|
117
|
+
className: "mt-frame-hint-icon",
|
|
118
|
+
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" })
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
return /* @__PURE__ */ c(
|
|
114
122
|
"div",
|
|
115
123
|
{
|
|
116
124
|
"data-slot": "frame-hint",
|
|
@@ -123,20 +131,20 @@ function h({ children: r, className: a, icon: t, ...o }) {
|
|
|
123
131
|
}
|
|
124
132
|
);
|
|
125
133
|
}
|
|
126
|
-
const
|
|
134
|
+
const M = Object.assign(z, {
|
|
127
135
|
Root: f,
|
|
128
136
|
Wrapper: d,
|
|
129
137
|
Background: l,
|
|
130
138
|
Border: p,
|
|
131
139
|
Content: u,
|
|
132
|
-
Caption:
|
|
140
|
+
Caption: C,
|
|
133
141
|
Hint: h
|
|
134
142
|
});
|
|
135
143
|
export {
|
|
136
|
-
|
|
144
|
+
M as Frame,
|
|
137
145
|
l as FrameBackground,
|
|
138
146
|
p as FrameBorder,
|
|
139
|
-
|
|
147
|
+
C as FrameCaption,
|
|
140
148
|
u as FrameContent,
|
|
141
149
|
h as FrameHint,
|
|
142
150
|
f as FrameRoot,
|
package/dist/index.d.ts
CHANGED
|
@@ -54,7 +54,7 @@ export declare interface CalloutContentProps extends HTMLAttributes<HTMLDivEleme
|
|
|
54
54
|
className?: string;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
declare function CalloutIcon({ children, icon, className, ...props }: CalloutIconProps): JSX_2.Element;
|
|
57
|
+
declare function CalloutIcon({ children, icon, variant, className, ...props }: CalloutIconProps): JSX_2.Element | null;
|
|
58
58
|
|
|
59
59
|
export declare interface CalloutIconProps extends HTMLAttributes<HTMLDivElement> {
|
|
60
60
|
children?: ReactNode;
|
|
@@ -62,7 +62,8 @@ export declare interface CalloutIconProps extends HTMLAttributes<HTMLDivElement>
|
|
|
62
62
|
* Icon before content. String (icon name) or IconProps object.
|
|
63
63
|
* @see {@link IconProp}
|
|
64
64
|
*/
|
|
65
|
-
icon?:
|
|
65
|
+
icon?: IconProp;
|
|
66
|
+
variant?: CalloutVariant;
|
|
66
67
|
className?: string;
|
|
67
68
|
}
|
|
68
69
|
|