@bccampus/ui-components 0.9.14 → 0.9.16

package/dist/components/ui/banner.d.ts

@@ -5,6 +5,9 @@ export declare const bannerVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface BannerProps extends React.ComponentProps<"div">, BannerVariantsProps {
+    id: string;
+    title: string;
     dismissible?: boolean;
+    onDismiss?: (id: string) => void;
 }
-export declare function Banner({ className, size, variant, dismissible, children, ...props }: BannerProps): import("react").JSX.Element | null;
+export declare function Banner({ className, size, variant, dismissible, onDismiss, id, title, children, ...props }: BannerProps): import("react").JSX.Element | null;

package/dist/components/ui/banner.js

@@ -1,24 +1,43 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as cva } from "../../_chunks/index2.js";
 import { c as cn } from "../../_chunks/utils.js";
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { Button } from "./button.js";
+import { PageSection } from "./page-section.js";
 import { c as createLucideIcon } from "../../_chunks/createLucideIcon.js";
+const __iconNode$2 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 16v-4", key: "1dtifu" }],
+  ["path", { d: "M12 8h.01", key: "e9boi3" }]
+];
+const Info = createLucideIcon("info", __iconNode$2);
+const __iconNode$1 = [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$1);
 const __iconNode = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
 const X = createLucideIcon("x", __iconNode);
-const bannerVariants = cva("flex flex-row items-center justify-between px-(--spacing-section) text-sm", {
+const bannerVariants = cva("flex flex-row items-start justify-between px-(--spacing-section) text-sm", {
   variants: {
     variant: {
-      default: "bg-complement-3 text-white",
-      alert: "bg-complement-2-200 text-black"
+      default: "bg-complement-3 text-white dark:text-white",
+      alert: "bg-complement-2  text-black dark:text-black"
     },
     size: {
       default: "py-2",
       sm: "py-1",
-      lg: "py-3 text-md font-semibold"
+      lg: "py-3"
     }
   },
   defaultVariants: {
@@ -26,13 +45,64 @@ const bannerVariants = cva("flex flex-row items-center justify-between px-(--spa
     size: "default"
   }
 });
-function Banner({ className, size, variant, dismissible, children, ...props }) {
+function Banner({
+  className,
+  size,
+  variant,
+  dismissible,
+  onDismiss,
+  id,
+  title,
+  children,
+  ...props
+}) {
   const [dismissed, setDismissed] = useState(false);
+  const dismiss = useCallback(() => {
+    setDismissed(true);
+    onDismiss?.(id);
+  }, [id, onDismiss]);
   if (dismissed) return null;
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "banner", className: cn(bannerVariants({ variant, size }), className), ...props, children: [
-    /* @__PURE__ */ jsx("div", { className: "flex-auto text-center", children }),
-    dismissible && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-6 text-white", onClick: () => setDismissed(true), children: /* @__PURE__ */ jsx(X, {}) }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    PageSection,
+    {
+      py: "none",
+      "data-slot": "banner",
+      id: `announcement-${id}`,
+      className: cn(bannerVariants({ variant, size }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex-auto flex flex-col justify-center items-center", {
+              "items-start": children
+            }),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-auto flex justify-center items-center gap-2", children: [
+                variant === "alert" ? /* @__PURE__ */ jsx(TriangleAlert, { className: "size-5" }) : /* @__PURE__ */ jsx(Info, { className: "size-5" }),
+                /* @__PURE__ */ jsx("div", { className: cn({ "text-md font-semibold": size === "lg" }), dangerouslySetInnerHTML: { __html: title } })
+              ] }),
+              children && /* @__PURE__ */ jsx("div", { className: "pl-7", dangerouslySetInnerHTML: { __html: children } })
+            ]
+          }
+        ),
+        dismissible && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            icon: true,
+            size: "icon",
+            className: cn("size-6", {
+              "text-white dark:text-white": !variant || variant === "default",
+              "text-black dark:text-black": variant === "alert"
+            }),
+            onClick: dismiss,
+            children: /* @__PURE__ */ jsx(X, {})
+          }
+        ) })
+      ]
+    }
+  );
 }
 export {
   Banner,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.9.14",
+  "version": "0.9.16",
   "description": "BCcampus React components",
   "type": "module",
   "license": "UNLICENSED",
@@ -44,7 +44,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.575.0",
+    "lucide-react": "^0.576.0",
     "nanostores": "^1.1.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -56,7 +56,7 @@
     "@eslint/js": "^9.39.3",
     "@ladle/react": "^5.1.1",
     "@tailwindcss/vite": "^4.2.1",
-    "@types/node": "^24.10.14",
+    "@types/node": "^24.11.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.3",
@@ -65,7 +65,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "glob": "^13.0.6",
-    "globals": "^17.3.0",
+    "globals": "^17.4.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.56.1",
     "vite": "^7.3.1",

package/src/components/ui/banner.tsx

@@ -1,20 +1,21 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Button } from "./button";
-import { X } from "lucide-react";
+import { Info, TriangleAlert, X } from "lucide-react";
+import { PageSection } from "./page-section";
 
 export type BannerVariantsProps = VariantProps<typeof bannerVariants>;
-export const bannerVariants = cva("flex flex-row items-center justify-between px-(--spacing-section) text-sm", {
+export const bannerVariants = cva("flex flex-row items-start justify-between px-(--spacing-section) text-sm", {
   variants: {
     variant: {
-      default: "bg-complement-3 text-white",
-      alert: "bg-complement-2-200 text-black",
+      default: "bg-complement-3 text-white dark:text-white",
+      alert: "bg-complement-2  text-black dark:text-black",
     },
     size: {
       default: "py-2",
       sm: "py-1",
-      lg: "py-3 text-md font-semibold",
+      lg: "py-3",
     },
   },
   defaultVariants: {
@@ -24,23 +25,66 @@ export const bannerVariants = cva("flex flex-row items-center justify-between px
 });
 
 export interface BannerProps extends React.ComponentProps<"div">, BannerVariantsProps {
+  id: string;
+  title: string;
   dismissible?: boolean;
+  onDismiss?: (id: string) => void;
 }
-export function Banner({ className, size, variant, dismissible, children, ...props }: BannerProps) {
+export function Banner({
+  className,
+  size,
+  variant,
+  dismissible,
+  onDismiss,
+  id,
+  title,
+  children,
+  ...props
+}: BannerProps) {
   const [dismissed, setDismissed] = useState(false);
 
+  const dismiss = useCallback(() => {
+    setDismissed(true);
+    onDismiss?.(id);
+  }, [id, onDismiss]);
+
   if (dismissed) return null;
 
   return (
-    <div data-slot="banner" className={cn(bannerVariants({ variant, size }), className)} {...props}>
-      <div className="flex-auto text-center">{children}</div>
+    <PageSection
+      py="none"
+      data-slot="banner"
+      id={`announcement-${id}`}
+      className={cn(bannerVariants({ variant, size }), className)}
+      {...props}
+    >
+      <div
+        className={cn("flex-auto flex flex-col justify-center items-center", {
+          "items-start": children,
+        })}
+      >
+        <div className="flex-auto flex justify-center items-center gap-2">
+          {variant === "alert" ? <TriangleAlert className="size-5" /> : <Info className="size-5" />}
+          <div className={cn({ "text-md font-semibold": size === "lg" })} dangerouslySetInnerHTML={{ __html: title }} />
+        </div>
+        {children && <div className="pl-7" dangerouslySetInnerHTML={{ __html: children }} />}
+      </div>
       {dismissible && (
         <div>
-          <Button variant="ghost" size="icon" className="size-6 text-white" onClick={() => setDismissed(true)}>
+          <Button
+            variant="ghost"
+            icon
+            size="icon"
+            className={cn("size-6", {
+              "text-white dark:text-white": !variant || variant === "default",
+              "text-black dark:text-black": variant === "alert",
+            })}
+            onClick={dismiss}
+          >
             <X />
           </Button>
         </div>
       )}
-    </div>
+    </PageSection>
   );
 }