@abumble/design-system 0.0.22 → 0.0.24

package/dist/components/Banner.js.map

@@ -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;"}
+{"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

@@ -1,6 +1,6 @@
 {
 	"name": "@abumble/design-system",
-	"version": "0.0.22",
+	"version": "0.0.24",
 	"files": [
 		"dist",
 		"src/styles.css"

package/src/styles.css

@@ -193,19 +193,19 @@ code {
 	--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
 	--sidebar-border: oklch(0.92 0.004 286.32);
 	--sidebar-ring: oklch(0.871 0.006 286.286);
-	/* Banner type semantic tokens (light) */
-	--banner-warning: oklch(0.95 0.06 85);
-	--banner-warning-foreground: oklch(0.45 0.12 75);
-	--banner-warning-border: oklch(0.75 0.15 85);
-	--banner-info: oklch(0.94 0.04 250);
-	--banner-info-foreground: oklch(0.35 0.12 265);
-	--banner-info-border: oklch(0.65 0.18 250);
-	--banner-alert: oklch(0.97 0.02 25);
-	--banner-alert-foreground: oklch(0.45 0.18 25);
-	--banner-alert-border: oklch(0.65 0.2 25);
-	--banner-note: oklch(0.967 0.001 286.375);
-	--banner-note-foreground: oklch(0.45 0.02 286);
-	--banner-note-border: oklch(0.85 0.01 286);
+	/* Banner: Tailwind blue/green/yellow/red (light: bg 50, text 800, border 400) */
+	--banner-info: oklch(0.97 0.014 247.896);
+	--banner-info-foreground: oklch(0.45 0.13 264.052);
+	--banner-info-border: oklch(0.704 0.165 259.815);
+	--banner-note: oklch(0.982 0.018 155.826);
+	--banner-note-foreground: oklch(0.448 0.119 151.328);
+	--banner-note-border: oklch(0.792 0.209 151.711);
+	--banner-warning: oklch(0.984 0.046 102.211);
+	--banner-warning-foreground: oklch(0.577 0.245 66.928);
+	--banner-warning-border: oklch(0.828 0.189 84.429);
+	--banner-alert: oklch(0.977 0.014 17.38);
+	--banner-alert-foreground: oklch(0.396 0.141 25.723);
+	--banner-alert-border: oklch(0.577 0.245 27.325);
 }
 
 .dark {
@@ -241,33 +241,27 @@ code {
 	--sidebar-accent-foreground: oklch(0.985 0 0);
 	--sidebar-border: oklch(0.274 0.006 286.033);
 	--sidebar-ring: oklch(0.442 0.017 285.786);
-	/* Banner type semantic tokens (dark) */
-	--banner-warning: oklch(0.28 0.08 75);
-	--banner-warning-foreground: oklch(0.88 0.1 85);
-	--banner-warning-border: oklch(0.5 0.12 75);
-	--banner-info: oklch(0.22 0.06 265);
-	--banner-info-foreground: oklch(0.85 0.08 250);
-	--banner-info-border: oklch(0.45 0.15 265);
-	--banner-alert: oklch(0.28 0.08 25);
-	--banner-alert-foreground: oklch(0.88 0.1 25);
-	--banner-alert-border: oklch(0.5 0.15 25);
-	--banner-note: oklch(0.274 0.006 286.033);
-	--banner-note-foreground: oklch(0.705 0.015 286.067);
-	--banner-note-border: oklch(0.4 0.02 286);
+	/* Banner: Tailwind blue/green/yellow/red (dark: bg 950, text 100, border 600) */
+	--banner-info: oklch(0.274 0.079 264.695);
+	--banner-info-foreground: oklch(0.925 0.033 264.665);
+	--banner-info-border: oklch(0.488 0.243 264.376);
+	--banner-note: oklch(0.266 0.065 152.934);
+	--banner-note-foreground: oklch(0.962 0.044 156.743);
+	--banner-note-border: oklch(0.627 0.194 149.214);
+	--banner-warning: oklch(0.304 0.063 73.684);
+	--banner-warning-foreground: oklch(0.969 0.071 103.748);
+	--banner-warning-border: oklch(0.627 0.194 149.214);
+	--banner-alert: oklch(0.293 0.084 27.325);
+	--banner-alert-foreground: oklch(0.969 0.071 27.325);
+	--banner-alert-border: oklch(0.577 0.245 27.325);
 }
 
-/* Banner: style by type so colors work when package is imported in other projects */
+/* Banner: colors from styles.css tokens; type → info=blue, note=green, warning=yellow, alert=red */
 [data-banner-type] {
-	padding: 0.75rem;
-	border: 0;
 	border-left-width: 4px;
 	border-left-style: solid;
-}
-
-[data-banner-type="warning"] {
-	background: var(--banner-warning);
-	color: var(--banner-warning-foreground);
-	border-left-color: var(--banner-warning-border);
+	border-radius: var(--radius);
+	padding: 0.75rem;
 }
 
 [data-banner-type="info"] {
@@ -276,18 +270,24 @@ code {
 	border-left-color: var(--banner-info-border);
 }
 
-[data-banner-type="alert"] {
-	background: var(--banner-alert);
-	color: var(--banner-alert-foreground);
-	border-left-color: var(--banner-alert-border);
-}
-
 [data-banner-type="note"] {
 	background: var(--banner-note);
 	color: var(--banner-note-foreground);
 	border-left-color: var(--banner-note-border);
 }
 
+[data-banner-type="warning"] {
+	background: var(--banner-warning);
+	color: var(--banner-warning-foreground);
+	border-left-color: var(--banner-warning-border);
+}
+
+[data-banner-type="alert"] {
+	background: var(--banner-alert);
+	color: var(--banner-alert-foreground);
+	border-left-color: var(--banner-alert-border);
+}
+
 @theme inline {
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);