@bccampus/ui-components 0.9.14 → 0.9.15

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/ui/banner.d.ts +4 -1
  2. package/dist/components/ui/banner.js +78 -10
  3. package/package.json +1 -1
  4. package/src/components/ui/banner.tsx +52 -10
package/dist/components/ui/banner.d.ts CHANGED
@@ -5,6 +5,9 @@ export declare const bannerVariants: (props?: ({
5
5
  size?: "default" | "sm" | "lg" | null | undefined;
6
6
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
7
7
  export interface BannerProps extends React.ComponentProps<"div">, BannerVariantsProps {
8
+ id: string;
9
+ title: string;
8
10
  dismissible?: boolean;
11
+ onDismiss?: (id: string) => void;
9
12
  }
10
- export declare function Banner({ className, size, variant, dismissible, children, ...props }: BannerProps): import("react").JSX.Element | null;
13
+ 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 CHANGED
@@ -1,24 +1,42 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { c as cva } from "../../_chunks/index2.js";
3
3
  import { c as cn } from "../../_chunks/utils.js";
4
- import { useState } from "react";
4
+ import { useState, useCallback } from "react";
5
5
  import { Button } from "./button.js";
6
6
  import { c as createLucideIcon } from "../../_chunks/createLucideIcon.js";
7
+ const __iconNode$2 = [
8
+ ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
9
+ ["path", { d: "M12 16v-4", key: "1dtifu" }],
10
+ ["path", { d: "M12 8h.01", key: "e9boi3" }]
11
+ ];
12
+ const Info = createLucideIcon("info", __iconNode$2);
13
+ const __iconNode$1 = [
14
+ [
15
+ "path",
16
+ {
17
+ 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",
18
+ key: "wmoenq"
19
+ }
20
+ ],
21
+ ["path", { d: "M12 9v4", key: "juzpu7" }],
22
+ ["path", { d: "M12 17h.01", key: "p32p05" }]
23
+ ];
24
+ const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$1);
7
25
  const __iconNode = [
8
26
  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
9
27
  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
10
28
  ];
11
29
  const X = createLucideIcon("x", __iconNode);
12
- const bannerVariants = cva("flex flex-row items-center justify-between px-(--spacing-section) text-sm", {
30
+ const bannerVariants = cva("flex flex-row items-start justify-between px-(--spacing-section) text-sm", {
13
31
  variants: {
14
32
  variant: {
15
- default: "bg-complement-3 text-white",
16
- alert: "bg-complement-2-200 text-black"
33
+ default: "bg-complement-3 text-white dark:text-white",
34
+ alert: "bg-complement-2 text-black dark:text-black"
17
35
  },
18
36
  size: {
19
37
  default: "py-2",
20
38
  sm: "py-1",
21
- lg: "py-3 text-md font-semibold"
39
+ lg: "py-3"
22
40
  }
23
41
  },
24
42
  defaultVariants: {
@@ -26,13 +44,63 @@ const bannerVariants = cva("flex flex-row items-center justify-between px-(--spa
26
44
  size: "default"
27
45
  }
28
46
  });
29
- function Banner({ className, size, variant, dismissible, children, ...props }) {
47
+ function Banner({
48
+ className,
49
+ size,
50
+ variant,
51
+ dismissible,
52
+ onDismiss,
53
+ id,
54
+ title,
55
+ children,
56
+ ...props
57
+ }) {
30
58
  const [dismissed, setDismissed] = useState(false);
59
+ const dismiss = useCallback(() => {
60
+ setDismissed(true);
61
+ onDismiss?.(id);
62
+ }, [id, onDismiss]);
31
63
  if (dismissed) return null;
32
- return /* @__PURE__ */ jsxs("div", { "data-slot": "banner", className: cn(bannerVariants({ variant, size }), className), ...props, children: [
33
- /* @__PURE__ */ jsx("div", { className: "flex-auto text-center", children }),
34
- dismissible && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-6 text-white", onClick: () => setDismissed(true), children: /* @__PURE__ */ jsx(X, {}) }) })
35
- ] });
64
+ return /* @__PURE__ */ jsxs(
65
+ "div",
66
+ {
67
+ "data-slot": "banner",
68
+ id: `announcement-${id}`,
69
+ className: cn(bannerVariants({ variant, size }), className),
70
+ ...props,
71
+ children: [
72
+ /* @__PURE__ */ jsxs(
73
+ "div",
74
+ {
75
+ className: cn("flex-auto flex flex-col justify-center items-center gap-2", {
76
+ "items-start": children
77
+ }),
78
+ children: [
79
+ /* @__PURE__ */ jsxs("div", { className: "flex-auto flex justify-center items-center gap-2", children: [
80
+ variant === "alert" ? /* @__PURE__ */ jsx(TriangleAlert, { className: "size-5" }) : /* @__PURE__ */ jsx(Info, { className: "size-5" }),
81
+ /* @__PURE__ */ jsx("div", { className: cn({ "text-md font-semibold": size === "lg" }), children: title })
82
+ ] }),
83
+ children && /* @__PURE__ */ jsx("div", { className: "pl-7", children })
84
+ ]
85
+ }
86
+ ),
87
+ dismissible && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
88
+ Button,
89
+ {
90
+ variant: "ghost",
91
+ icon: true,
92
+ size: "icon",
93
+ className: cn("size-6", {
94
+ "text-white dark:text-white": !variant || variant === "default",
95
+ "text-black dark:text-black": variant === "alert"
96
+ }),
97
+ onClick: dismiss,
98
+ children: /* @__PURE__ */ jsx(X, {})
99
+ }
100
+ ) })
101
+ ]
102
+ }
103
+ );
36
104
  }
37
105
  export {
38
106
  Banner,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bccampus/ui-components",
3
- "version": "0.9.14",
3
+ "version": "0.9.15",
4
4
  "description": "BCcampus React components",
5
5
  "type": "module",
6
6
  "license": "UNLICENSED",
package/src/components/ui/banner.tsx CHANGED
@@ -1,20 +1,20 @@
1
1
  import { cva, type VariantProps } from "class-variance-authority";
2
2
  import { cn } from "@/lib/utils";
3
- import { useState } from "react";
3
+ import { useCallback, useState } from "react";
4
4
  import { Button } from "./button";
5
- import { X } from "lucide-react";
5
+ import { Info, TriangleAlert, X } from "lucide-react";
6
6
 
7
7
  export type BannerVariantsProps = VariantProps<typeof bannerVariants>;
8
- export const bannerVariants = cva("flex flex-row items-center justify-between px-(--spacing-section) text-sm", {
8
+ export const bannerVariants = cva("flex flex-row items-start justify-between px-(--spacing-section) text-sm", {
9
9
  variants: {
10
10
  variant: {
11
- default: "bg-complement-3 text-white",
12
- alert: "bg-complement-2-200 text-black",
11
+ default: "bg-complement-3 text-white dark:text-white",
12
+ alert: "bg-complement-2 text-black dark:text-black",
13
13
  },
14
14
  size: {
15
15
  default: "py-2",
16
16
  sm: "py-1",
17
- lg: "py-3 text-md font-semibold",
17
+ lg: "py-3",
18
18
  },
19
19
  },
20
20
  defaultVariants: {
@@ -24,19 +24,61 @@ export const bannerVariants = cva("flex flex-row items-center justify-between px
24
24
  });
25
25
 
26
26
  export interface BannerProps extends React.ComponentProps<"div">, BannerVariantsProps {
27
+ id: string;
28
+ title: string;
27
29
  dismissible?: boolean;
30
+ onDismiss?: (id: string) => void;
28
31
  }
29
- export function Banner({ className, size, variant, dismissible, children, ...props }: BannerProps) {
32
+ export function Banner({
33
+ className,
34
+ size,
35
+ variant,
36
+ dismissible,
37
+ onDismiss,
38
+ id,
39
+ title,
40
+ children,
41
+ ...props
42
+ }: BannerProps) {
30
43
  const [dismissed, setDismissed] = useState(false);
31
44
 
45
+ const dismiss = useCallback(() => {
46
+ setDismissed(true);
47
+ onDismiss?.(id);
48
+ }, [id, onDismiss]);
49
+
32
50
  if (dismissed) return null;
33
51
 
34
52
  return (
35
- <div data-slot="banner" className={cn(bannerVariants({ variant, size }), className)} {...props}>
36
- <div className="flex-auto text-center">{children}</div>
53
+ <div
54
+ data-slot="banner"
55
+ id={`announcement-${id}`}
56
+ className={cn(bannerVariants({ variant, size }), className)}
57
+ {...props}
58
+ >
59
+ <div
60
+ className={cn("flex-auto flex flex-col justify-center items-center gap-2", {
61
+ "items-start": children,
62
+ })}
63
+ >
64
+ <div className="flex-auto flex justify-center items-center gap-2">
65
+ {variant === "alert" ? <TriangleAlert className="size-5" /> : <Info className="size-5" />}
66
+ <div className={cn({ "text-md font-semibold": size === "lg" })}>{title}</div>
67
+ </div>
68
+ {children && <div className="pl-7">{children}</div>}
69
+ </div>
37
70
  {dismissible && (
38
71
  <div>
39
- <Button variant="ghost" size="icon" className="size-6 text-white" onClick={() => setDismissed(true)}>
72
+ <Button
73
+ variant="ghost"
74
+ icon
75
+ size="icon"
76
+ className={cn("size-6", {
77
+ "text-white dark:text-white": !variant || variant === "default",
78
+ "text-black dark:text-black": variant === "alert",
79
+ })}
80
+ onClick={dismiss}
81
+ >
40
82
  <X />
41
83
  </Button>
42
84
  </div>