@abumble/design-system 0.0.21 → 0.0.23

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 (4) hide show
  1. package/dist/components/Banner.js +20 -20
  2. package/dist/components/Banner.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/styles.css +9 -13
package/dist/components/Banner.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx as n, jsxs as r, Fragment as u } from "react/jsx-runtime";
1
+ import { jsx as e, 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
- }, o = {
11
+ }, l = {
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: 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(
17
+ function w({ type: n, title: t, loading: i, hideIcon: c, onClose: o, children: m, className: d, ...h }) {
18
+ const f = l[n] ?? l[a.Note];
19
+ return /* @__PURE__ */ e(
20
20
  "div",
21
21
  {
22
- "data-banner-type": e,
23
- className: p(d),
22
+ "data-banner-type": n,
23
+ className: p("p-3 border-l-4 rounded", d),
24
24
  role: "alert",
25
25
  ...h,
26
26
  children: /* @__PURE__ */ r("div", { className: "flex items-start", children: [
27
- i ? /* @__PURE__ */ n(C, {}) : /* @__PURE__ */ r(u, { children: [
28
- !c && /* @__PURE__ */ n("div", { className: "flex-shrink-0 mr-3", children: /* @__PURE__ */ n(f, {}) }),
27
+ i ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ r(u, { children: [
28
+ !c && /* @__PURE__ */ e("div", { className: "flex-shrink-0 mr-3", children: /* @__PURE__ */ e(f, {}) }),
29
29
  /* @__PURE__ */ r("section", { children: [
30
- t && /* @__PURE__ */ n("p", { className: "font-bold", children: t }),
30
+ t && /* @__PURE__ */ e("p", { className: "font-bold", children: t }),
31
31
  m
32
32
  ] })
33
33
  ] }),
34
- l && /* @__PURE__ */ n(I, { onClick: l })
34
+ o && /* @__PURE__ */ e(I, { onClick: o })
35
35
  ] })
36
36
  }
37
37
  );
38
38
  }
39
- function S({ message: e, ...t }) {
40
- return /* @__PURE__ */ n(w, { ...t, children: /* @__PURE__ */ n("p", { className: "text-sm", children: e }) });
39
+ function S({ message: n, ...t }) {
40
+ return /* @__PURE__ */ e(w, { ...t, children: /* @__PURE__ */ e("p", { className: "text-sm", children: n }) });
41
41
  }
42
42
  function C() {
43
43
  return /* @__PURE__ */ r("div", { className: "flex items-center space-x-4", children: [
44
- /* @__PURE__ */ n(s, { className: "h-12 w-12 rounded-full" }),
44
+ /* @__PURE__ */ e(s, { className: "h-12 w-12 rounded-full" }),
45
45
  /* @__PURE__ */ r("div", { className: "space-y-2", children: [
46
- /* @__PURE__ */ n(s, { className: "h-4 w-[250px]" }),
47
- /* @__PURE__ */ n(s, { className: "h-4 w-[200px]" })
46
+ /* @__PURE__ */ e(s, { className: "h-4 w-[250px]" }),
47
+ /* @__PURE__ */ e(s, { className: "h-4 w-[200px]" })
48
48
  ] })
49
49
  ] });
50
50
  }
51
- function I(e) {
51
+ function I(n) {
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
- ...e,
58
+ ...n,
59
59
  children: [
60
- /* @__PURE__ */ n(v, {}),
61
- /* @__PURE__ */ n("span", { className: "sr-only", children: "Close banner" })
60
+ /* @__PURE__ */ e(v, {}),
61
+ /* @__PURE__ */ e("span", { className: "sr-only", children: "Close banner" })
62
62
  ]
63
63
  }
64
64
  );
package/dist/components/Banner.js.map CHANGED
@@ -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\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,GAIMC,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;AAWA,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,WAAW,oBACd,UAAA;AAAA,QAAAT,IACA,gBAAAO,EAACG,GAAA,CAAA,CAAqB,IAEtB,gBAAAD,EAAAE,GAAA,EACE,UAAA;AAAA,UAAA,CAACV,KACD,gBAAAM,EAAC,OAAA,EAAI,WAAW,sBACf,UAAA,gBAAAA,EAACD,KAAK,EAAA,CACP;AAAA,4BAEA,WAAA,EACC,UAAA;AAAA,YAAAP,KACA,gBAAAQ,EAAC,KAAA,EAAE,WAAW,aACZ,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;"}
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\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('p-3 border-l-4 rounded', 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,GAIMC,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;AAWA,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,EAAG,0BAA0BJ,CAAS;AAAA,MACjD,MAAK;AAAA,MACJ,GAAGC;AAAA,MAEJ,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAW,oBACd,UAAA;AAAA,QAAAT,IACA,gBAAAO,EAACG,GAAA,CAAA,CAAqB,IAEtB,gBAAAD,EAAAE,GAAA,EACE,UAAA;AAAA,UAAA,CAACV,KACD,gBAAAM,EAAC,OAAA,EAAI,WAAW,sBACf,UAAA,gBAAAA,EAACD,KAAK,EAAA,CACP;AAAA,4BAEA,WAAA,EACC,UAAA;AAAA,YAAAP,KACA,gBAAAQ,EAAC,KAAA,EAAE,WAAW,aACZ,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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abumble/design-system",
3
- "version": "0.0.21",
3
+ "version": "0.0.23",
4
4
  "files": [
5
5
  "dist",
6
6
  "src/styles.css"
package/src/styles.css CHANGED
@@ -203,9 +203,9 @@ code {
203
203
  --banner-alert: oklch(0.97 0.02 25);
204
204
  --banner-alert-foreground: oklch(0.45 0.18 25);
205
205
  --banner-alert-border: oklch(0.65 0.2 25);
206
- --banner-note: oklch(0.967 0.001 286.375);
207
- --banner-note-foreground: oklch(0.45 0.02 286);
208
- --banner-note-border: oklch(0.85 0.01 286);
206
+ --banner-note: oklch(0.93 0.05 130);
207
+ --banner-note-foreground: oklch(0.48 0.15 130);
208
+ --banner-note-border: oklch(0.85 0.08 130);
209
209
  }
210
210
 
211
211
  .dark {
@@ -251,34 +251,30 @@ code {
251
251
  --banner-alert: oklch(0.28 0.08 25);
252
252
  --banner-alert-foreground: oklch(0.88 0.1 25);
253
253
  --banner-alert-border: oklch(0.5 0.15 25);
254
- --banner-note: oklch(0.274 0.006 286.033);
255
- --banner-note-foreground: oklch(0.705 0.015 286.067);
256
- --banner-note-border: oklch(0.4 0.02 286);
254
+ --banner-note: oklch(0.22 0.06 130);
255
+ --banner-note-foreground: oklch(0.85 0.08 130);
256
+ --banner-note-border: oklch(0.5 0.12 130);
257
257
  }
258
258
 
259
259
  /* Banner: style by type so colors work when package is imported in other projects */
260
- [data-banner-type] {
261
- padding: 0.75rem;
262
- border: 0;
263
- border-left-width: 4px;
264
- border-left-style: solid;
265
- border-radius: var(--radius);
266
- }
267
260
  [data-banner-type="warning"] {
268
261
  background: var(--banner-warning);
269
262
  color: var(--banner-warning-foreground);
270
263
  border-left-color: var(--banner-warning-border);
271
264
  }
265
+
272
266
  [data-banner-type="info"] {
273
267
  background: var(--banner-info);
274
268
  color: var(--banner-info-foreground);
275
269
  border-left-color: var(--banner-info-border);
276
270
  }
271
+
277
272
  [data-banner-type="alert"] {
278
273
  background: var(--banner-alert);
279
274
  color: var(--banner-alert-foreground);
280
275
  border-left-color: var(--banner-alert-border);
281
276
  }
277
+
282
278
  [data-banner-type="note"] {
283
279
  background: var(--banner-note);
284
280
  color: var(--banner-note-foreground);