@bccampus/ui-components 0.9.13 → 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 (6) hide show
  1. package/dist/components/ui/banner.d.ts +4 -1
  2. package/dist/components/ui/banner.js +78 -10
  3. package/dist/components/ui/navigation-menu.js +2 -3
  4. package/package.json +1 -1
  5. package/src/components/ui/banner.tsx +52 -10
  6. package/src/components/ui/navigation-menu.tsx +6 -7
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/dist/components/ui/navigation-menu.js CHANGED
@@ -1053,7 +1053,7 @@ function NavigationMenuViewport({
1053
1053
  {
1054
1054
  className: cn("absolute top-full left-0 isolate z-50 flex justify-center bg-popover", {
1055
1055
  "min-w-xs": !mega,
1056
- "w-full px-(--spacing-section)": mega
1056
+ "w-full": mega
1057
1057
  }),
1058
1058
  children: /* @__PURE__ */ jsx(
1059
1059
  Viewport,
@@ -1063,8 +1063,7 @@ function NavigationMenuViewport({
1063
1063
  "origin-top-center duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
1064
1064
  "bg-popover text-popover-foreground relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] overscroll-contain",
1065
1065
  {
1066
- "mt-1.5 rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]": !mega,
1067
- "border-b-1 border-complement-1-50": mega
1066
+ "mt-1.5 rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]": !mega
1068
1067
  },
1069
1068
  className
1070
1069
  ),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bccampus/ui-components",
3
- "version": "0.9.13",
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>
package/src/components/ui/navigation-menu.tsx CHANGED
@@ -22,7 +22,7 @@ function NavigationMenu({
22
22
  className={cn(
23
23
  "group/navigation-menu flex max-w-max flex-1 items-center justify-center",
24
24
  { relative: !mega },
25
- className
25
+ className,
26
26
  )}
27
27
  {...props}
28
28
  >
@@ -83,7 +83,7 @@ function NavigationMenuContent({ className, ...props }: React.ComponentProps<typ
83
83
  "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
84
84
  "group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0",
85
85
  "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
86
- className
86
+ className,
87
87
  )}
88
88
  {...props}
89
89
  />
@@ -101,7 +101,7 @@ function NavigationMenuViewport({
101
101
  <div
102
102
  className={cn("absolute top-full left-0 isolate z-50 flex justify-center bg-popover", {
103
103
  "min-w-xs": !mega,
104
- "w-full px-(--spacing-section)": mega,
104
+ "w-full": mega,
105
105
  })}
106
106
  >
107
107
  <NavigationMenuPrimitive.Viewport
@@ -111,9 +111,8 @@ function NavigationMenuViewport({
111
111
  "bg-popover text-popover-foreground relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] overscroll-contain",
112
112
  {
113
113
  "mt-1.5 rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]": !mega,
114
- "border-b-1 border-complement-1-50": mega,
115
114
  },
116
- className
115
+ className,
117
116
  )}
118
117
  {...props}
119
118
  />
@@ -127,7 +126,7 @@ function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof
127
126
  data-slot="navigation-menu-link"
128
127
  className={cn(
129
128
  "[&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
130
- className
129
+ className,
131
130
  )}
132
131
  {...props}
133
132
  />
@@ -143,7 +142,7 @@ function NavigationMenuIndicator({
143
142
  data-slot="navigation-menu-indicator"
144
143
  className={cn(
145
144
  "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
146
- className
145
+ className,
147
146
  )}
148
147
  {...props}
149
148
  >