@bizapps/design-system-testing 1.0.3 → 1.0.5

package/dist/main.cjs

@@ -273,8 +273,8 @@ var badgeVariants2 = classVarianceAuthority.cva(
         default: "bg-muted text-muted-foreground",
         info: "bg-blue-100 text-blue-500",
         success: "bg-green-100 text-green-800",
-        warning: "bg-yellow-200 text-yellow-800",
-        error: "bg-red-100 text-red-600"
+        warning: "bg-yellow-200 text-yellow-900",
+        error: "bg-red-100 text-red-800"
       },
       size: {
         sm: "h-4 text-xs px-1.5 py-0.5 rounded-md",
@@ -404,9 +404,9 @@ var buttonVariants = classVarianceAuthority.cva(
         primary: "cursor-pointer bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:ring-primary/30",
         secondary: "cursor-pointer bg-secondary text-secondary-foreground hover:bg-[var(--color-orange-700)] focus-visible:ring-secondary/30",
         cancel: "cursor-pointer bg-destructive text-secondary-foreground hover:bg-[var(--color-red-600)] focus-visible:ring-destructive/30",
-        outline: " border-2 border-transparent bg-transparent text-muted-foreground hover:bg-muted",
+        outline: " border-2 border-foreground/50 bg-transparent text-muted-foreground hover:bg-foreground/50 hover:text-white",
         ghost: "cursor-pointer bg-transparent text-muted-foreground hover:bg-foreground/10 hover:text-primary focus-visible:ring-ring/30",
-        cancelGhost: "cursor-pointer bg-destructive/10 text-destructive hover:bg-destructive/15 hover:text-destructive focus-visible:ring-ring/30"
+        cancelGhost: "cursor-pointer bg-destructive/10 text-red-600 hover:bg-destructive/15 hover:text-red-600 focus-visible:ring-ring/30"
       },
       size: {
         sm: "h-8 px-3 text-xs",
@@ -1558,7 +1558,7 @@ function Separator({
       decorative,
       orientation,
       className: cn(
-        "bg-foreground/20 flex h-10 shrink-0 items-center data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        "bg-foreground/20 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
         className
       ),
       ...props
@@ -1677,12 +1677,12 @@ function Slider({
           radixUi.Slider.Track,
           {
             "data-slot": "slider-track",
-            className: "bg-input/90 relative grow overflow-hidden rounded-full data-horizontal:h-2 data-horizontal:w-full data-vertical:h-full data-vertical:w-2",
+            className: "bg-input/90 relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2",
             children: /* @__PURE__ */ jsxRuntime.jsx(
               radixUi.Slider.Range,
               {
                 "data-slot": "slider-range",
-                className: "bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
+                className: "bg-primary absolute select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
               }
             )
           }
@@ -1932,7 +1932,7 @@ function TabsContent({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "wait", initial: false, children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "popLayout", initial: false, children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
         react$1.motion.div,
         {
           className: "mt-2",
@@ -2148,7 +2148,7 @@ function ToggleGroup2({
       "data-orientation": orientation,
       style: { "--gap": spacing },
       className: cn(
-        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch data-[spacing=0]:data-[variant=outline]:rounded-md",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[spacing=0]:data-[variant=outline]:rounded-md",
         className
       ),
       ...props,
@@ -2172,7 +2172,7 @@ function ToggleGroupItem({
       "data-size": context.size || size,
       "data-spacing": context.spacing,
       className: cn(
-        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-2.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-2.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-2.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-2.5 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size
@@ -2790,7 +2790,7 @@ function Combobox({
         className: cn(
           "border-input w-64 justify-between border bg-transparent text-sm font-normal shadow-xs",
           "hover:text-foreground focus-visible:ring-ring/30 hover:bg-transparent",
-          !selected && "text-muted-foreground",
+          selected ? "text-foreground" : "text-muted-foreground",
           className
         ),
         children: [
@@ -4329,16 +4329,32 @@ var Navbar = react.forwardRef(
     utilityLinks = defaultUtilityLinks,
     navigationLinks = defaultNavigationLinks,
     notificationCount = 1,
+    notifications,
     avatarSrc,
     avatarFallback,
     onNavLinkClick,
     onSearchClick,
     onHelpClick,
     onAvatarClick,
+    onNotificationClick,
     ...props
   }, ref) => {
     const containerRef = react.useRef(null);
+    const notifRef = react.useRef(null);
     const [isMobile, setIsMobile] = react.useState(false);
+    const [notifOpen, setNotifOpen] = react.useState(false);
+    const notifArray = Array.isArray(notifications) ? notifications : void 0;
+    const unreadCount = notifArray ? notifArray.filter((n) => !n.read).length : notificationCount;
+    react.useEffect(() => {
+      if (!notifOpen) return;
+      const handler = (e) => {
+        if (notifRef.current && !notifRef.current.contains(e.target)) {
+          setNotifOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [notifOpen]);
     react.useEffect(() => {
       const checkWidth = () => {
         if (containerRef.current) {
@@ -4400,17 +4416,64 @@ var Navbar = react.forwardRef(
               )
             ] }, i)) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  type: "button",
-                  className: "text-muted-foreground hover:text-foreground hover:bg-muted relative flex size-7 cursor-pointer items-center justify-center rounded-md transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BellIcon, { className: "size-3.5" }),
-                    notificationCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-secondary absolute top-1 right-1 flex size-1.5 rounded-full" })
-                  ]
-                }
-              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: notifRef, className: "relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => notifArray && setNotifOpen((o) => !o),
+                    className: "text-muted-foreground hover:text-foreground hover:bg-muted relative flex size-7 cursor-pointer items-center justify-center rounded-md transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BellIcon, { className: "size-3.5" }),
+                      unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-secondary absolute top-1 right-1 flex size-1.5 rounded-full" })
+                    ]
+                  }
+                ),
+                notifArray && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "border-border bg-popover absolute right-0 top-full z-50 w-80 overflow-hidden rounded-lg border shadow-lg transition-all duration-150",
+                      notifOpen ? "pointer-events-auto translate-y-1 opacity-100" : "pointer-events-none -translate-y-1 opacity-0"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border border-b px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: "Notifications" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-80 overflow-y-auto", children: notifArray.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground px-4 py-6 text-center text-sm", children: "No notifications" }) : notifArray.map((n) => /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            onNotificationClick?.(n.id);
+                            setNotifOpen(false);
+                          },
+                          className: cn(
+                            "hover:bg-muted flex w-full items-start gap-3 px-4 py-3 text-left transition-colors",
+                            !n.read && "bg-muted/40"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "p",
+                                {
+                                  className: cn(
+                                    "text-sm",
+                                    !n.read && "font-semibold"
+                                  ),
+                                  children: n.title
+                                }
+                              ),
+                              n.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-0.5 truncate text-xs", children: n.description }),
+                              n.timestamp && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: n.timestamp })
+                            ] }),
+                            !n.read && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-secondary mt-1.5 size-2 shrink-0 rounded-full" })
+                          ]
+                        },
+                        n.id
+                      )) })
+                    ]
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
@@ -4820,12 +4883,13 @@ function SideBar({
   brandName = "Total Portal",
   showHeader = true,
   className,
+  mainClassName,
   children
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(SidebarProvider, { className: cn("min-h-0", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Sidebar, { collapsible: "icon", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(SidebarHeader, { className: "flex flex-row items-center gap-2 p-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger, { variant: "outline", className: "size-8 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger, { variant: "ghost", className: "size-8 shrink-0" }),
         /* @__PURE__ */ jsxRuntime.jsx(SidebarBrand, { brandName })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(SidebarContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarMenu, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4845,7 +4909,7 @@ function SideBar({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
       showHeader && /* @__PURE__ */ jsxRuntime.jsx("header", { className: "flex h-14 items-center justify-between border-b px-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: brandName }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "overflow-y-auto flex-1 p-6", children })
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: cn("overflow-y-auto flex-1 p-6", mainClassName), children })
     ] })
   ] });
 }
@@ -7427,6 +7491,17 @@ function CanNot({ permission, mode = "any", fallback = null, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Can, { permission, mode, negate: true, fallback, children });
 }
 CanNot.displayName = "CanNot";
+function TCCEProvider({
+  children,
+  permissions,
+  toasterPosition,
+  tooltipDelayDuration
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: tooltipDelayDuration, children: /* @__PURE__ */ jsxRuntime.jsxs(AbilityProvider, { permissions, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(Toaster, { position: toasterPosition })
+  ] }) });
+}
 
 Object.defineProperty(exports, "Controller", {
   enumerable: true,
@@ -7621,6 +7696,7 @@ exports.Status = Status;
 exports.StatusIndicator = StatusIndicator;
 exports.StatusLabel = StatusLabel;
 exports.Switch = Switch;
+exports.TCCEProvider = TCCEProvider;
 exports.TEXT_SIZES = TEXT_SIZES;
 exports.TEXT_WEIGHTS = TEXT_WEIGHTS;
 exports.Table = Table;