@assure-one/design-system 0.5.0 → 0.7.1

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React36 from 'react';
-import { forwardRef, useState, useCallback, useId, useRef, useImperativeHandle, useEffect, createContext, useContext, useMemo } from 'react';
+import { forwardRef, useState, useCallback, useId, useRef, useImperativeHandle, useEffect, createContext, Fragment as Fragment$1, useContext, useMemo } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -28,6 +28,7 @@ import { OTPInput as OTPInput$1, REGEXP_ONLY_DIGITS } from 'input-otp';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { RemoveScroll } from 'react-remove-scroll';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { useFormStatus } from 'react-dom';
@@ -5491,15 +5492,46 @@ function SearchSelect({
   onCreate,
   placeholder = "Search...",
   className,
-  disabled = false
+  disabled = false,
+  groupFilter = false,
+  pinnedGroups,
+  closeOnSelect = false,
+  showGroupCounts = false,
+  onCreateNew,
+  createNewLabel = "Create new"
 }) {
   const [search, setSearch] = React36.useState("");
   const [open, setOpen] = React36.useState(false);
+  const [activeChip, setActiveChip] = React36.useState(null);
   const selectedIds = React36.useMemo(() => new Set(selected.map((s) => s.id)), [selected]);
   const filtered = React36.useMemo(
     () => options.filter((opt) => !selectedIds.has(opt.id)),
     [options, selectedIds]
   );
+  const groups = React36.useMemo(() => {
+    const order = [];
+    const byGroup = /* @__PURE__ */ new Map();
+    for (const opt of filtered) {
+      if (!byGroup.has(opt.group)) {
+        byGroup.set(opt.group, []);
+        order.push(opt.group);
+      }
+      byGroup.get(opt.group).push(opt);
+    }
+    return order.map((g) => [g, byGroup.get(g)]);
+  }, [filtered]);
+  const hasGroups = React36.useMemo(() => groups.some(([g]) => g != null), [groups]);
+  const pinnedSet = React36.useMemo(() => new Set(pinnedGroups ?? []), [pinnedGroups]);
+  const chips = React36.useMemo(() => {
+    if (!groupFilter || !hasGroups) return [];
+    return groups.map(([g]) => g).filter((g) => g != null && !pinnedSet.has(g));
+  }, [groupFilter, hasGroups, groups, pinnedSet]);
+  const visibleGroups = React36.useMemo(() => {
+    if (chips.length > 0 && activeChip) {
+      return groups.filter(([g]) => g === activeChip);
+    }
+    return groups;
+  }, [groups, chips.length, activeChip]);
   const trimmedSearch = search.trim();
   const hasExactMatch = React36.useMemo(
     () => options.some((opt) => opt.label.toLowerCase() === trimmedSearch.toLowerCase()),
@@ -5510,8 +5542,9 @@ function SearchSelect({
     (option) => {
       onSelect(option);
       setSearch("");
+      if (closeOnSelect) setOpen(false);
     },
-    [onSelect]
+    [onSelect, closeOnSelect]
   );
   const handleCreate = React36.useCallback(() => {
     if (onCreate && trimmedSearch) {
@@ -5520,8 +5553,17 @@ function SearchSelect({
       setOpen(false);
     }
   }, [onCreate, trimmedSearch]);
+  const inputRef = React36.useRef(null);
+  const singleValue = closeOnSelect ? selected[0] ?? null : null;
+  const showValue = singleValue !== null && !open;
+  React36.useEffect(() => {
+    if (open && closeOnSelect) {
+      const raf = requestAnimationFrame(() => inputRef.current?.focus());
+      return () => cancelAnimationFrame(raf);
+    }
+  }, [open, closeOnSelect]);
   return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
-    selected.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-1.5", children: selected.map((item) => /* @__PURE__ */ jsxs(
+    !closeOnSelect && selected.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-1.5", children: selected.map((item) => /* @__PURE__ */ jsxs(
       "span",
       {
         className: cn(
@@ -5564,7 +5606,7 @@ function SearchSelect({
           }
         },
         children: [
-          /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
@@ -5572,9 +5614,76 @@ function SearchSelect({
                 "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
                 "motion-reduce:transition-none",
                 "focus-within:border-accent focus-within:[box-shadow:var(--shadow-focus-ring)]",
+                showValue && "hover:bg-bg-2 gap-2 pr-2 pl-3",
                 disabled && "bg-bg-disabled cursor-not-allowed"
               ),
-              children: [
+              children: showValue && singleValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => !disabled && setOpen(true),
+                    disabled,
+                    className: "flex h-full flex-1 items-center gap-2 text-left outline-none disabled:cursor-not-allowed",
+                    children: [
+                      singleValue.icon && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "flex size-5 shrink-0 items-center justify-center rounded-full [&_svg]:size-3",
+                            singleValue.iconClassName
+                          ),
+                          "aria-hidden": "true",
+                          children: singleValue.icon
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "text-fg flex-1 truncate text-[13px]", children: [
+                        singleValue.label,
+                        singleValue.description && /* @__PURE__ */ jsxs("span", { className: "text-fg-4", children: [
+                          " \xB7 ",
+                          singleValue.description
+                        ] })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onRemove(singleValue),
+                    disabled,
+                    className: cn(
+                      "text-fg-3 shrink-0 rounded-full p-0.5",
+                      "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+                      "motion-reduce:transition-none",
+                      "hover:bg-overlay-hover hover:text-fg",
+                      "disabled:text-fg-disabled disabled:cursor-not-allowed disabled:hover:bg-transparent",
+                      "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+                    ),
+                    "aria-label": `Clear ${singleValue.label}`,
+                    children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => !disabled && setOpen(true),
+                    disabled,
+                    "aria-label": `Change ${singleValue.label}`,
+                    className: cn(
+                      "text-fg-4 shrink-0 rounded-full p-0.5 outline-none",
+                      "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+                      "motion-reduce:transition-none",
+                      "hover:text-fg",
+                      "disabled:text-fg-disabled disabled:cursor-not-allowed",
+                      "focus-visible:[box-shadow:var(--shadow-focus-ring)]"
+                    ),
+                    children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4", "aria-hidden": "true" })
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   SearchIcon,
                   {
@@ -5585,6 +5694,7 @@ function SearchSelect({
                 /* @__PURE__ */ jsx(
                   Command.Input,
                   {
+                    ref: inputRef,
                     value: search,
                     onValueChange: (v) => {
                       setSearch(v);
@@ -5602,7 +5712,7 @@ function SearchSelect({
                     )
                   }
                 )
-              ]
+              ] })
             }
           ) }),
           /* @__PURE__ */ jsx(
@@ -5610,56 +5720,156 @@ function SearchSelect({
             {
               align: "start",
               sideOffset: 4,
+              avoidCollisions: false,
               onOpenAutoFocus: (e) => e.preventDefault(),
               onInteractOutside: (e) => {
                 const target = e.target;
                 if (target.closest("[cmdk-input]")) e.preventDefault();
               },
-              className: cn("w-(--radix-popover-trigger-width) p-0", "min-w-[12rem]"),
-              children: /* @__PURE__ */ jsxs(Command.List, { className: "scrollbar-thin max-h-60 overflow-y-auto p-1", children: [
-                filtered.length === 0 && !showCreate && /* @__PURE__ */ jsx(Command.Empty, { className: "text-fg-3 px-3 py-2 text-xs", children: search ? "No results found." : "No options available." }),
-                filtered.map((option) => /* @__PURE__ */ jsxs(
-                  Command.Item,
+              style: {
+                width: "var(--radix-popover-trigger-width)",
+                maxHeight: "var(--radix-popover-content-available-height)"
+              },
+              className: cn("p-0", "flex flex-col", "min-w-[12rem] overflow-hidden"),
+              children: /* @__PURE__ */ jsxs(RemoveScroll, { removeScrollBar: false, className: "contents", children: [
+                chips.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-rule flex flex-wrap gap-1 border-b p-1.5", children: [null, ...chips].map((chip) => {
+                  const active = activeChip === chip;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setActiveChip(chip),
+                      className: cn(
+                        "rounded-pill px-2.5 py-0.5 text-[12px] font-medium",
+                        "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                        active ? "bg-pro-fg text-fg-on-pro" : "border-rule text-fg-2 hover:bg-bg-2 border bg-transparent"
+                      ),
+                      children: chip ?? "All"
+                    },
+                    chip ?? "__all"
+                  );
+                }) }),
+                /* @__PURE__ */ jsxs(
+                  Command.List,
                   {
-                    value: option.label,
-                    onSelect: () => handleSelect(option),
                     className: cn(
-                      "rounded-pill flex cursor-default items-center gap-2 px-2 py-1.5 text-[13px] outline-none select-none",
-                      "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+                      // No top padding: a sticky group heading pins at top-0, so any
+                      // top padding would leave a strip above it where the previous
+                      // group's last item peeks through. Top spacing comes from the
+                      // heading's own pt-2 instead.
+                      "scrollbar-thin min-h-0 flex-1 max-h-[min(20rem,60vh)] overflow-y-auto px-1 pb-1",
+                      // Quiet sentence-case section labels (only shown when grouped)
+                      "[&_[cmdk-group-heading]]:bg-surface [&_[cmdk-group-heading]]:sticky [&_[cmdk-group-heading]]:top-0 [&_[cmdk-group-heading]]:z-10",
+                      "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1",
+                      "[&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-medium",
+                      "[&_[cmdk-group-heading]]:text-fg-3"
+                    ),
+                    children: [
+                      filtered.length === 0 && !showCreate && /* @__PURE__ */ jsx(Command.Empty, { className: "text-fg-3 px-3 py-2 text-xs", children: search ? "No results found." : "No options available." }),
+                      visibleGroups.map(([group, groupOptions]) => {
+                        const baseHeading = activeChip ? void 0 : group || void 0;
+                        const heading = baseHeading && showGroupCounts && !trimmedSearch ? `${baseHeading} \xB7 ${groupOptions.length}` : baseHeading;
+                        return /* @__PURE__ */ jsx(Command.Group, { heading, children: groupOptions.map((option) => {
+                          const isRich = !!option.icon || !!option.description;
+                          return /* @__PURE__ */ jsx(
+                            Command.Item,
+                            {
+                              value: hasGroups && group ? `${option.label} ${group} ${option.id}` : `${option.label} ${option.id}`,
+                              onSelect: () => handleSelect(option),
+                              className: cn(
+                                "flex cursor-default items-center outline-none select-none",
+                                "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+                                "motion-reduce:transition-none",
+                                isRich ? "rounded-md text-fg gap-2.5 px-2 py-1.5" : "rounded-pill text-fg-2 gap-2 px-2 py-1.5 text-[13px]",
+                                "data-[selected=true]:bg-bg-2 data-[selected=true]:text-fg"
+                              ),
+                              children: isRich ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                option.icon && /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: cn(
+                                      "flex size-7 shrink-0 items-center justify-center rounded-full [&_svg]:size-3.5",
+                                      option.iconClassName
+                                    ),
+                                    "aria-hidden": "true",
+                                    children: option.icon
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                                  /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-medium", children: option.label }),
+                                  option.description && /* @__PURE__ */ jsx("span", { className: "text-fg-4 block truncate text-[11px]", children: option.description })
+                                ] })
+                              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                                option.color ? /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: "size-2 shrink-0 rounded-full",
+                                    style: { backgroundColor: option.color },
+                                    "aria-hidden": "true"
+                                  }
+                                ) : /* @__PURE__ */ jsx(
+                                  CheckIcon,
+                                  {
+                                    className: "size-4 shrink-0 text-transparent",
+                                    "aria-hidden": "true"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: option.label })
+                              ] })
+                            },
+                            option.id
+                          );
+                        }) }, group ?? "__ungrouped");
+                      }),
+                      showCreate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        filtered.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-rule -mx-1 my-1 h-px", "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsxs(
+                          Command.Item,
+                          {
+                            value: `__create_${trimmedSearch}`,
+                            onSelect: handleCreate,
+                            className: cn(
+                              "rounded-pill flex cursor-default items-center gap-2 px-2 py-1.5 text-[13px] outline-none select-none",
+                              "text-pro-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+                              "motion-reduce:transition-none",
+                              "data-[selected=true]:bg-pro-bg"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsx(PlusIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+                              /* @__PURE__ */ jsxs("span", { className: "line-clamp-1", children: [
+                                "Create \u201C",
+                                trimmedSearch,
+                                "\u201D"
+                              ] })
+                            ]
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                onCreateNew && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: () => {
+                      onCreateNew();
+                      setOpen(false);
+                    },
+                    className: cn(
+                      "border-rule text-pro-fg flex w-full shrink-0 items-center gap-2 border-t px-3 py-2.5 text-[13px] font-medium",
+                      "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
                       "motion-reduce:transition-none",
-                      "data-[selected=true]:bg-bg-2 data-[selected=true]:text-fg"
+                      "hover:bg-pro-bg",
+                      "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-transparent", "aria-hidden": "true" }),
-                      /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: option.label })
+                      /* @__PURE__ */ jsx(PlusIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+                      createNewLabel
                     ]
-                  },
-                  option.id
-                )),
-                showCreate && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  filtered.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-rule -mx-1 my-1 h-px", "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsxs(
-                    Command.Item,
-                    {
-                      value: `__create_${trimmedSearch}`,
-                      onSelect: handleCreate,
-                      className: cn(
-                        "rounded-pill flex cursor-default items-center gap-2 px-2 py-1.5 text-[13px] outline-none select-none",
-                        "text-pro-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-                        "motion-reduce:transition-none",
-                        "data-[selected=true]:bg-pro-bg"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx(PlusIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }),
-                        /* @__PURE__ */ jsxs("span", { className: "line-clamp-1", children: [
-                          "Create \u201C",
-                          trimmedSearch,
-                          "\u201D"
-                        ] })
-                      ]
-                    }
-                  )
-                ] })
+                  }
+                )
               ] })
             }
           )
@@ -8310,6 +8520,149 @@ var KanbanCard = forwardRef(function KanbanCard2({ className, label, title, clie
   ] }) : children });
 });
 KanbanCard.displayName = "KanbanCard";
+var NotificationPanel = forwardRef(
+  function NotificationPanel2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("bg-surface text-fg flex w-full flex-col", className), ...props, children });
+  }
+);
+NotificationPanel.displayName = "NotificationPanel";
+var NotificationPanelHeader = forwardRef(
+  function NotificationPanelHeader2({ title = "Notifications", unreadCount = 0, onMarkAllRead, onSettings, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("border-rule flex items-center justify-between border-b px-4 py-3", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-fg text-sm font-semibold", children: title }),
+            unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "bg-accent/10 text-accent rounded-pill px-1.5 py-0.5 text-[11px] font-semibold tabular-nums", children: unreadCount > 99 ? "99+" : unreadCount })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            onMarkAllRead && unreadCount > 0 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onMarkAllRead,
+                className: "text-fg-3 hover:text-fg text-xs font-medium",
+                children: "Mark all read"
+              }
+            ),
+            onSettings && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onSettings,
+                "aria-label": "Notification settings",
+                className: "text-fg-3 hover:text-fg hover:bg-bg-2 rounded-md p-1 [&_svg]:size-[15px]",
+                children: /* @__PURE__ */ jsx(SettingsIcon, {})
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+NotificationPanelHeader.displayName = "NotificationPanelHeader";
+var FILTER_OPTIONS = ["all", "unread"];
+var NotificationFilter = forwardRef(
+  function NotificationFilter2({ value, onValueChange, actions, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "border-rule flex items-center justify-between gap-2 border-b px-3 py-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-bg-2 inline-flex rounded-md p-0.5 text-xs font-medium", children: FILTER_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onValueChange(option),
+              "aria-pressed": value === option,
+              className: cn(
+                "rounded-[6px] px-2.5 py-1 capitalize transition-colors",
+                "focus-visible:ring-accent outline-none focus-visible:ring-2",
+                value === option ? "bg-surface text-fg shadow-quiet" : "text-fg-3 hover:text-fg"
+              ),
+              children: option
+            },
+            option
+          )) }),
+          actions
+        ]
+      }
+    );
+  }
+);
+NotificationFilter.displayName = "NotificationFilter";
+var NotificationList = forwardRef(
+  function NotificationList2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("divide-rule-soft max-h-[460px] divide-y overflow-y-auto", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+NotificationList.displayName = "NotificationList";
+var NotificationItem = forwardRef(
+  function NotificationItem2({ title, body, typeLabel, client, time, sender, icon, unread, className, ...props }, ref) {
+    const meta = [typeLabel, client, time].filter(Boolean);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          "flex w-full gap-3 px-4 py-3 text-left outline-none",
+          "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "hover:bg-bg-2/60 focus-visible:bg-bg-2/60",
+          unread && "bg-accent/[0.06]",
+          className
+        ),
+        ...props,
+        children: [
+          sender ? /* @__PURE__ */ jsx(Avatar, { size: "sm", name: sender.name, src: sender.src, className: "mt-0.5" }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "bg-bg-2 text-fg-3 mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full [&_svg]:size-3.5",
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            unread && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Unread. " }),
+            /* @__PURE__ */ jsx("p", { className: cn("text-fg text-sm leading-snug", unread ? "font-semibold" : "font-medium"), children: title }),
+            body && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 truncate text-xs", children: body }),
+            meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-fg-4 mt-1 flex flex-wrap items-center gap-1.5 text-[11px]", children: meta.map((part, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    i === 0 && typeLabel ? "font-medium tracking-wide uppercase" : "tabular-nums"
+                  ),
+                  children: part
+                }
+              )
+            ] }, i)) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+NotificationItem.displayName = "NotificationItem";
 var Toolbar = forwardRef(function Toolbar2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2", className), ...props, children });
 });
@@ -8437,6 +8790,6 @@ var KbdHint = forwardRef(function KbdHint2({ className, children, ...props }, re
 });
 KbdHint.displayName = "KbdHint";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityItem, ActivityList, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, AtSignIcon, Avatar, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, Button, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content15 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, DataItem, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DatePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DocumentIcon, DollarSignIcon, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EyeIcon, EyeOffIcon, Eyebrow, FileIcon, FileReturnIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, InboxIcon, InfoCircleSolidIcon, InfoIcon, Input, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, KbdHint, KeyIcon, KeyboardShortcutsDialog, KpiCard, Label4 as Label, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MenuIcon, MessageCircleIcon, MessageCircleWarningIcon, MetadataGrid, MicrosoftBrandIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PenSignIcon, PencilIcon, PhoneIcon, PhoneInput, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, ProgressBar, ProgressRing, RadioGroup3 as RadioGroup, RadioGroupItem, ReceiptIcon, ReplyIcon, RotateCcwIcon, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, StarIcon, StarRating, Stat, Stepper, StrikethroughIcon, SubmitButton, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TeamIcon, TeamMemberSelect, Textarea, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XCircleSolidIcon, XIcon, ZoomInIcon, ZoomOutIcon, alertVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, displayToIso, filterChipVariants, inputVariants, isoToDisplay, labelVariants, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, shadows, sidebarLinkBadgeVariants, spacing, starRatingVariants, surfaces, systemTokens, textareaVariants, typography, useSidebarState, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityItem, ActivityList, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, AtSignIcon, Avatar, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, Button, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content15 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, DataItem, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DatePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DocumentIcon, DollarSignIcon, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EyeIcon, EyeOffIcon, Eyebrow, FileIcon, FileReturnIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, InboxIcon, InfoCircleSolidIcon, InfoIcon, Input, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, KbdHint, KeyIcon, KeyboardShortcutsDialog, KpiCard, Label4 as Label, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MenuIcon, MessageCircleIcon, MessageCircleWarningIcon, MetadataGrid, MicrosoftBrandIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelHeader, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PenSignIcon, PencilIcon, PhoneIcon, PhoneInput, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, ProgressBar, ProgressRing, RadioGroup3 as RadioGroup, RadioGroupItem, ReceiptIcon, ReplyIcon, RotateCcwIcon, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, StarIcon, StarRating, Stat, Stepper, StrikethroughIcon, SubmitButton, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TeamIcon, TeamMemberSelect, Textarea, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XCircleSolidIcon, XIcon, ZoomInIcon, ZoomOutIcon, alertVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, displayToIso, filterChipVariants, inputVariants, isoToDisplay, labelVariants, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, shadows, sidebarLinkBadgeVariants, spacing, starRatingVariants, surfaces, systemTokens, textareaVariants, typography, useSidebarState, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map