@abumble/design-system 0.0.23 → 0.0.24
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.
- package/dist/components/Banner.js +20 -20
- package/dist/components/Banner.js.map +1 -1
- package/package.json +1 -1
- package/src/styles.css +44 -37
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as n, jsxs as r, Fragment as u } from "react/jsx-runtime";
|
|
2
2
|
import { c as p } from "../shared/utils.js";
|
|
3
3
|
import { CircleX as N, TriangleAlert as g, Lightbulb as x, Info as b, X as v } from "lucide-react";
|
|
4
4
|
import { B } from "../shared/Button.js";
|
|
@@ -8,57 +8,57 @@ const a = {
|
|
|
8
8
|
Note: "note",
|
|
9
9
|
Warning: "warning",
|
|
10
10
|
Alert: "alert"
|
|
11
|
-
},
|
|
11
|
+
}, o = {
|
|
12
12
|
[a.Info]: b,
|
|
13
13
|
[a.Note]: x,
|
|
14
14
|
[a.Warning]: g,
|
|
15
15
|
[a.Alert]: N
|
|
16
16
|
};
|
|
17
|
-
function w({ type:
|
|
18
|
-
const f =
|
|
19
|
-
return /* @__PURE__ */
|
|
17
|
+
function w({ type: e, title: t, loading: i, hideIcon: c, onClose: l, children: m, className: d, ...h }) {
|
|
18
|
+
const f = o[e] ?? o[a.Note];
|
|
19
|
+
return /* @__PURE__ */ n(
|
|
20
20
|
"div",
|
|
21
21
|
{
|
|
22
|
-
"data-banner-type":
|
|
23
|
-
className: p(
|
|
22
|
+
"data-banner-type": e,
|
|
23
|
+
className: p(d),
|
|
24
24
|
role: "alert",
|
|
25
25
|
...h,
|
|
26
26
|
children: /* @__PURE__ */ r("div", { className: "flex items-start", children: [
|
|
27
|
-
i ? /* @__PURE__ */
|
|
28
|
-
!c && /* @__PURE__ */
|
|
27
|
+
i ? /* @__PURE__ */ n(C, {}) : /* @__PURE__ */ r(u, { children: [
|
|
28
|
+
!c && /* @__PURE__ */ n("div", { className: "flex-shrink-0 mr-3", children: /* @__PURE__ */ n(f, {}) }),
|
|
29
29
|
/* @__PURE__ */ r("section", { children: [
|
|
30
|
-
t && /* @__PURE__ */
|
|
30
|
+
t && /* @__PURE__ */ n("p", { className: "font-bold", children: t }),
|
|
31
31
|
m
|
|
32
32
|
] })
|
|
33
33
|
] }),
|
|
34
|
-
|
|
34
|
+
l && /* @__PURE__ */ n(I, { onClick: l })
|
|
35
35
|
] })
|
|
36
36
|
}
|
|
37
37
|
);
|
|
38
38
|
}
|
|
39
|
-
function S({ message:
|
|
40
|
-
return /* @__PURE__ */
|
|
39
|
+
function S({ message: e, ...t }) {
|
|
40
|
+
return /* @__PURE__ */ n(w, { ...t, children: /* @__PURE__ */ n("p", { className: "text-sm", children: e }) });
|
|
41
41
|
}
|
|
42
42
|
function C() {
|
|
43
43
|
return /* @__PURE__ */ r("div", { className: "flex items-center space-x-4", children: [
|
|
44
|
-
/* @__PURE__ */
|
|
44
|
+
/* @__PURE__ */ n(s, { className: "h-12 w-12 rounded-full" }),
|
|
45
45
|
/* @__PURE__ */ r("div", { className: "space-y-2", children: [
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
/* @__PURE__ */
|
|
46
|
+
/* @__PURE__ */ n(s, { className: "h-4 w-[250px]" }),
|
|
47
|
+
/* @__PURE__ */ n(s, { className: "h-4 w-[200px]" })
|
|
48
48
|
] })
|
|
49
49
|
] });
|
|
50
50
|
}
|
|
51
|
-
function I(
|
|
51
|
+
function I(e) {
|
|
52
52
|
return /* @__PURE__ */ r(
|
|
53
53
|
B,
|
|
54
54
|
{
|
|
55
55
|
variant: "ghost",
|
|
56
56
|
size: "icon",
|
|
57
57
|
className: "h-8 w-8 rounded-full ml-auto mb-auto relative -top-1 -right-1",
|
|
58
|
-
...
|
|
58
|
+
...e,
|
|
59
59
|
children: [
|
|
60
|
-
/* @__PURE__ */
|
|
61
|
-
/* @__PURE__ */
|
|
60
|
+
/* @__PURE__ */ n(v, {}),
|
|
61
|
+
/* @__PURE__ */ n("span", { className: "sr-only", children: "Close banner" })
|
|
62
62
|
]
|
|
63
63
|
}
|
|
64
64
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../../src/components/Banner/Banner.tsx"],"sourcesContent":["import type { onClickCallback } from \"@/types/types\";\nimport { cn } from \"@/utils\";\nimport { CircleX, Info, Lightbulb, TriangleAlert, X } from \"lucide-react\";\nimport { Button } from \"../Button\";\nimport { Skeleton } from \"../Skeleton\";\n\nconst bannerType = {\n\tInfo: 'info',\n\tNote: 'note',\n\tWarning: 'warning',\n\tAlert: 'alert'\n} as const;\n\ntype TBannerType = (typeof bannerType)[keyof typeof bannerType];\n\nconst icons: Record<TBannerType, React.ComponentType> = {\n\t[bannerType.Info]: Info,\n\t[bannerType.Note]: Lightbulb,\n\t[bannerType.Warning]: TriangleAlert,\n\t[bannerType.Alert]: CircleX\n};\n\
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../../src/components/Banner/Banner.tsx"],"sourcesContent":["import type { onClickCallback } from \"@/types/types\";\nimport { cn } from \"@/utils\";\nimport { CircleX, Info, Lightbulb, TriangleAlert, X } from \"lucide-react\";\nimport { Button } from \"../Button\";\nimport { Skeleton } from \"../Skeleton\";\n\nconst bannerType = {\n\tInfo: 'info',\n\tNote: 'note',\n\tWarning: 'warning',\n\tAlert: 'alert'\n} as const;\n\ntype TBannerType = (typeof bannerType)[keyof typeof bannerType];\n\n/** Banner colors and layout are in design-system styles.css via [data-banner-type]. Type → color: info=blue, note=green, warning=yellow, alert=red. */\nconst icons: Record<TBannerType, React.ComponentType> = {\n\t[bannerType.Info]: Info,\n\t[bannerType.Note]: Lightbulb,\n\t[bannerType.Warning]: TriangleAlert,\n\t[bannerType.Alert]: CircleX\n};\n\ninterface BannerProps extends React.ComponentProps<\"div\"> {\n\ttype: TBannerType;\n\ttitle?: string;\n\tloading?: boolean;\n\thideIcon?: boolean;\n\tonClose?: onClickCallback<HTMLButtonElement>;\n}\n\nfunction Banner({ type, title, loading, hideIcon, onClose, children, className, ...props }: BannerProps) {\n\tconst Icon = icons[type] ?? icons[bannerType.Note];\n\n\treturn (\n\t\t<div\n\t\t\tdata-banner-type={type}\n\t\t\tclassName={cn(className)}\n\t\t\trole=\"alert\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex items-start\">\n\t\t\t\t{loading ?\n\t\t\t\t\t<BannerLoadingContent />\n\t\t\t\t\t:\n\t\t\t\t\t<>\n\t\t\t\t\t\t{!hideIcon &&\n\t\t\t\t\t\t\t<div className=\"flex-shrink-0 mr-3\">\n\t\t\t\t\t\t\t\t<Icon />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<section>\n\t\t\t\t\t\t\t{title && (\n\t\t\t\t\t\t\t\t<p className=\"font-bold\">\n\t\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</section>\n\t\t\t\t\t</>\n\t\t\t\t}\n\n\t\t\t\t{onClose &&\n\t\t\t\t\t<CloseButton onClick={onClose} />\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\ninterface MessageBannerProps extends BannerProps {\n\tmessage: string | React.ReactNode;\n}\n\nfunction MessageBanner({ message, ...props }: MessageBannerProps) {\n\treturn (\n\t\t<Banner {...props}>\n\t\t\t<p className=\"text-sm\">\n\t\t\t\t{message}\n\t\t\t</p>\n\t\t</Banner>\n\t)\n}\n\nfunction BannerLoadingContent() {\n\treturn (\n\t\t<div className=\"flex items-center space-x-4\">\n\t\t\t<Skeleton className=\"h-12 w-12 rounded-full\" />\n\t\t\t<div className=\"space-y-2\">\n\t\t\t\t<Skeleton className=\"h-4 w-[250px]\" />\n\t\t\t\t<Skeleton className=\"h-4 w-[200px]\" />\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nfunction CloseButton(props: React.ComponentProps<\"button\">) {\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"ghost\"\n\t\t\tsize=\"icon\"\n\t\t\tclassName=\"h-8 w-8 rounded-full ml-auto mb-auto relative -top-1 -right-1\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<X />\n\t\t\t<span className=\"sr-only\">Close banner</span>\n\t\t</Button>\n\t);\n}\n\nexport { Banner, bannerType, MessageBanner, type TBannerType };\n\n"],"names":["bannerType","icons","Info","Lightbulb","TriangleAlert","CircleX","Banner","type","title","loading","hideIcon","onClose","children","className","props","Icon","jsx","cn","jsxs","BannerLoadingContent","Fragment","CloseButton","MessageBanner","message","Skeleton","Button","X"],"mappings":";;;;;AAMA,MAAMA,IAAa;AAAA,EAClB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACR,GAKMC,IAAkD;AAAA,EACvD,CAACD,EAAW,IAAI,GAAGE;AAAA,EACnB,CAACF,EAAW,IAAI,GAAGG;AAAA,EACnB,CAACH,EAAW,OAAO,GAAGI;AAAA,EACtB,CAACJ,EAAW,KAAK,GAAGK;AACrB;AAUA,SAASC,EAAO,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,SAAAC,GAAS,UAAAC,GAAU,WAAAC,GAAW,GAAGC,KAAsB;AACxG,QAAMC,IAAOd,EAAMM,CAAI,KAAKN,EAAMD,EAAW,IAAI;AAEjD,SACC,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,oBAAkBT;AAAA,MAClB,WAAWU,EAAGJ,CAAS;AAAA,MACvB,MAAK;AAAA,MACJ,GAAGC;AAAA,MAEJ,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,QAAAT,IACA,gBAAAO,EAACG,GAAA,CAAA,CAAqB,IAEtB,gBAAAD,EAAAE,GAAA,EACE,UAAA;AAAA,UAAA,CAACV,KACD,gBAAAM,EAAC,OAAA,EAAI,WAAU,sBACd,UAAA,gBAAAA,EAACD,KAAK,EAAA,CACP;AAAA,4BAEA,WAAA,EACC,UAAA;AAAA,YAAAP,KACA,gBAAAQ,EAAC,KAAA,EAAE,WAAU,aACX,UAAAR,GACF;AAAA,YAEAI;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,GACD;AAAA,QAGAD,KACA,gBAAAK,EAACK,GAAA,EAAY,SAASV,EAAA,CAAS;AAAA,MAAA,EAAA,CAEjC;AAAA,IAAA;AAAA,EAAA;AAGH;AAMA,SAASW,EAAc,EAAE,SAAAC,GAAS,GAAGT,KAA6B;AACjE,SACC,gBAAAE,EAACV,KAAQ,GAAGQ,GACX,4BAAC,KAAA,EAAE,WAAU,WACX,UAAAS,EAAA,CACF,EAAA,CACD;AAEF;AAEA,SAASJ,IAAuB;AAC/B,SACC,gBAAAD,EAAC,OAAA,EAAI,WAAU,+BACd,UAAA;AAAA,IAAA,gBAAAF,EAACQ,GAAA,EAAS,WAAU,yBAAA,CAAyB;AAAA,IAC7C,gBAAAN,EAAC,OAAA,EAAI,WAAU,aACd,UAAA;AAAA,MAAA,gBAAAF,EAACQ,GAAA,EAAS,WAAU,gBAAA,CAAgB;AAAA,MACpC,gBAAAR,EAACQ,GAAA,EAAS,WAAU,gBAAA,CAAgB;AAAA,IAAA,EAAA,CACrC;AAAA,EAAA,GACD;AAEF;AAEA,SAASH,EAAYP,GAAuC;AAC3D,SACC,gBAAAI;AAAA,IAACO;AAAA,IAAA;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAU;AAAA,MACT,GAAGX;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE,EAACU,GAAA,EAAE;AAAA,QACH,gBAAAV,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,eAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzC;"}
|
package/package.json
CHANGED
package/src/styles.css
CHANGED
|
@@ -193,19 +193,19 @@ code {
|
|
|
193
193
|
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
194
194
|
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
195
195
|
--sidebar-ring: oklch(0.871 0.006 286.286);
|
|
196
|
-
/* Banner
|
|
197
|
-
--banner-
|
|
198
|
-
--banner-
|
|
199
|
-
--banner-
|
|
200
|
-
--banner-
|
|
201
|
-
--banner-
|
|
202
|
-
--banner-
|
|
203
|
-
--banner-
|
|
204
|
-
--banner-
|
|
205
|
-
--banner-
|
|
206
|
-
--banner-
|
|
207
|
-
--banner-
|
|
208
|
-
--banner-
|
|
196
|
+
/* Banner: Tailwind blue/green/yellow/red (light: bg 50, text 800, border 400) */
|
|
197
|
+
--banner-info: oklch(0.97 0.014 247.896);
|
|
198
|
+
--banner-info-foreground: oklch(0.45 0.13 264.052);
|
|
199
|
+
--banner-info-border: oklch(0.704 0.165 259.815);
|
|
200
|
+
--banner-note: oklch(0.982 0.018 155.826);
|
|
201
|
+
--banner-note-foreground: oklch(0.448 0.119 151.328);
|
|
202
|
+
--banner-note-border: oklch(0.792 0.209 151.711);
|
|
203
|
+
--banner-warning: oklch(0.984 0.046 102.211);
|
|
204
|
+
--banner-warning-foreground: oklch(0.577 0.245 66.928);
|
|
205
|
+
--banner-warning-border: oklch(0.828 0.189 84.429);
|
|
206
|
+
--banner-alert: oklch(0.977 0.014 17.38);
|
|
207
|
+
--banner-alert-foreground: oklch(0.396 0.141 25.723);
|
|
208
|
+
--banner-alert-border: oklch(0.577 0.245 27.325);
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
.dark {
|
|
@@ -241,26 +241,27 @@ code {
|
|
|
241
241
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
242
242
|
--sidebar-border: oklch(0.274 0.006 286.033);
|
|
243
243
|
--sidebar-ring: oklch(0.442 0.017 285.786);
|
|
244
|
-
/* Banner
|
|
245
|
-
--banner-
|
|
246
|
-
--banner-
|
|
247
|
-
--banner-
|
|
248
|
-
--banner-
|
|
249
|
-
--banner-
|
|
250
|
-
--banner-
|
|
251
|
-
--banner-
|
|
252
|
-
--banner-
|
|
253
|
-
--banner-
|
|
254
|
-
--banner-
|
|
255
|
-
--banner-
|
|
256
|
-
--banner-
|
|
244
|
+
/* Banner: Tailwind blue/green/yellow/red (dark: bg 950, text 100, border 600) */
|
|
245
|
+
--banner-info: oklch(0.274 0.079 264.695);
|
|
246
|
+
--banner-info-foreground: oklch(0.925 0.033 264.665);
|
|
247
|
+
--banner-info-border: oklch(0.488 0.243 264.376);
|
|
248
|
+
--banner-note: oklch(0.266 0.065 152.934);
|
|
249
|
+
--banner-note-foreground: oklch(0.962 0.044 156.743);
|
|
250
|
+
--banner-note-border: oklch(0.627 0.194 149.214);
|
|
251
|
+
--banner-warning: oklch(0.304 0.063 73.684);
|
|
252
|
+
--banner-warning-foreground: oklch(0.969 0.071 103.748);
|
|
253
|
+
--banner-warning-border: oklch(0.627 0.194 149.214);
|
|
254
|
+
--banner-alert: oklch(0.293 0.084 27.325);
|
|
255
|
+
--banner-alert-foreground: oklch(0.969 0.071 27.325);
|
|
256
|
+
--banner-alert-border: oklch(0.577 0.245 27.325);
|
|
257
257
|
}
|
|
258
258
|
|
|
259
|
-
/* Banner:
|
|
260
|
-
[data-banner-type
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
border-
|
|
259
|
+
/* Banner: colors from styles.css tokens; type → info=blue, note=green, warning=yellow, alert=red */
|
|
260
|
+
[data-banner-type] {
|
|
261
|
+
border-left-width: 4px;
|
|
262
|
+
border-left-style: solid;
|
|
263
|
+
border-radius: var(--radius);
|
|
264
|
+
padding: 0.75rem;
|
|
264
265
|
}
|
|
265
266
|
|
|
266
267
|
[data-banner-type="info"] {
|
|
@@ -269,18 +270,24 @@ code {
|
|
|
269
270
|
border-left-color: var(--banner-info-border);
|
|
270
271
|
}
|
|
271
272
|
|
|
272
|
-
[data-banner-type="alert"] {
|
|
273
|
-
background: var(--banner-alert);
|
|
274
|
-
color: var(--banner-alert-foreground);
|
|
275
|
-
border-left-color: var(--banner-alert-border);
|
|
276
|
-
}
|
|
277
|
-
|
|
278
273
|
[data-banner-type="note"] {
|
|
279
274
|
background: var(--banner-note);
|
|
280
275
|
color: var(--banner-note-foreground);
|
|
281
276
|
border-left-color: var(--banner-note-border);
|
|
282
277
|
}
|
|
283
278
|
|
|
279
|
+
[data-banner-type="warning"] {
|
|
280
|
+
background: var(--banner-warning);
|
|
281
|
+
color: var(--banner-warning-foreground);
|
|
282
|
+
border-left-color: var(--banner-warning-border);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
[data-banner-type="alert"] {
|
|
286
|
+
background: var(--banner-alert);
|
|
287
|
+
color: var(--banner-alert-foreground);
|
|
288
|
+
border-left-color: var(--banner-alert-border);
|
|
289
|
+
}
|
|
290
|
+
|
|
284
291
|
@theme inline {
|
|
285
292
|
--color-background: var(--background);
|
|
286
293
|
--color-foreground: var(--foreground);
|