@popgrids/ui 0.0.20 → 0.0.22

package/dist/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var button = require('@base-ui/react/button');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var button = require('@base-ui/react/button');
 var dialog = require('@base-ui/react/dialog');
 var icons = require('@untitledui/icons');
 var menu = require('@base-ui/react/menu');
@@ -14,10 +14,49 @@ var useRender = require('@base-ui/react/use-render');
 var react = require('react');
 var tooltip = require('@base-ui/react/tooltip');
 
-// src/components/button/button.tsx
+// src/components/banner-notification/banner-notification.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var bannerNotificationVariants = classVarianceAuthority.cva(
+  "flex items-start gap-3 rounded-[6px] px-4 py-3 w-full w-[360px] border-border border",
+  {
+    variants: {
+      variant: {
+        info: ""
+      },
+      theme: {
+        error: "bg-warning-100 dark:bg-warning-200/16",
+        highlight: "bg-success-50 dark:bg-white/0"
+      }
+    },
+    defaultVariants: {
+      variant: "info",
+      theme: "highlight"
+    }
+  }
+);
+function BannerNotification({
+  className,
+  children,
+  variant = "info",
+  theme = "highlight",
+  image,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "banner-notification",
+      className: cn(bannerNotificationVariants({ variant, theme }), className),
+      ...props,
+      children: [
+        image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-start [&>svg]:size-5", children: image }),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 text-sm", children })
+      ]
+    }
+  );
+}
 var loaderVariants = classVarianceAuthority.cva("flex shrink-0 items-center justify-center", {
   variants: {
     theme: {
@@ -248,7 +287,7 @@ var buttonVariants = classVarianceAuthority.cva(
         variant: "primary",
         outline: true,
         theme: "base",
-        class: "ring ring-foreground bg-background/0 text-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1"
+        class: "ring ring-foreground bg-background/0 text-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1"
       },
       {
         variant: "primary",
@@ -434,28 +473,45 @@ function ButtonLink({
   size = "md",
   theme = "default",
   trailing,
+  href,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "a",
+  const sharedClassName = cn(
+    buttonLinkVariants({
+      hasLeading: !!leading,
+      hasTrailing: !!trailing,
+      primary,
+      size,
+      theme
+    }),
+    className
+  );
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    leading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: leading }),
+    children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate relative", children }),
+    trailing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: trailing })
+  ] });
+  if (href != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        "data-slot": "button-link",
+        className: sharedClassName,
+        href,
+        ...props,
+        children: content
+      }
+    );
+  }
+  const { type, ...buttonProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
     {
       "data-slot": "button-link",
-      className: cn(
-        buttonLinkVariants({
-          hasLeading: !!leading,
-          hasTrailing: !!trailing,
-          primary,
-          size,
-          theme
-        }),
-        className
-      ),
-      ...props,
-      children: [
-        leading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: leading }),
-        children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate relative", children }),
-        trailing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: trailing })
-      ]
+      className: sharedClassName,
+      type: type ?? "button",
+      ...buttonProps,
+      children: content
     }
   );
 }
@@ -472,24 +528,25 @@ function ContentBlock({ className, children, title, subhead, cta }) {
   ] });
 }
 function DialogRoot(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Portal, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogTrigger(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogClose(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { "data-slot": "dialog-close", ...props });
 }
-function DialogBackdrop({
+function DialogOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     dialog.Dialog.Backdrop,
     {
+      "data-slot": "dialog-overlay",
       className: cn(
         "fixed inset-0 min-h-dvh bg-[rgb(0_0_32/0.01)] opacity-0 backdrop-blur-sm transition-[opacity,backdrop-filter] duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute dark:bg-[rgb(255_255_255/0.01)] dark:opacity-70",
         "data-closed:opacity-0 data-open:opacity-100",
@@ -506,6 +563,7 @@ function DialogViewport({
   return /* @__PURE__ */ jsxRuntime.jsx(
     dialog.Dialog.Viewport,
     {
+      "data-slot": "dialog-viewport",
       className: cn(
         "fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pt-8 [@media(min-height:600px)]:pb-12",
         className
@@ -514,55 +572,87 @@ function DialogViewport({
     }
   );
 }
-function DialogPopup({
+function DialogContent({
   className,
   children,
   bottom = false,
   showCloseButton = true,
+  closePosition = "top-left",
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogBackdrop, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Popup, { className: "group/popup pointer-events-none flex h-full max-h-full min-h-0 w-full max-w-full justify-center overflow-hidden transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", children: [
-      showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
-        DialogClose,
-        {
-          className: "pointer-events-auto fixed top-[15px] left-5 z-50",
-          "aria-label": "Close",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "before:bg-tint-700-reversed relative block before:absolute before:-inset-1.5 before:rounded-full before:backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary-foreground text-background relative z-10 flex size-10 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(icons.XClose, { className: "size-[18px]" }) }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "bg-background pointer-events-auto fixed top-1/2 left-1/2 flex h-full max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl shadow-2xl transition-all",
+  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      dialog.Dialog.Popup,
+      {
+        "data-slot": "dialog-content",
+        className: "group/popup pointer-events-none flex h-full max-h-full min-h-0 w-full max-w-full justify-center overflow-hidden transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        children: [
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
+            DialogClose,
             {
-              "group-data-closed/popup:duration-pop-hover group-data-open/popup:duration-pop-hover group-data-open/popup:ease-pop-hover group-data-closed/popup:ease-out group-data-ending-style/popup:scale-[0.96] group-data-ending-style/popup:opacity-0 group-data-starting-style/popup:scale-[0.96] group-data-starting-style/popup:opacity-0": !bottom,
-              "group-data-open/popup:slide-in-from-bottom group-data-closed/popup:slide-out-to-bottom group-data-starting-style/popup-scale-100 group-data-ending-style/popup-scale-100 group-data-open/popup:animate-in group-data-closed/popup:animate-out top-auto bottom-0 h-full translate-y-0 rounded-b-none group-data-closed/popup:duration-200 group-data-closed/popup:ease-[cubic-bezier(1,0,0.72,0.32)] group-data-ending-style/popup:translate-y-full group-data-open/popup:duration-300 group-data-open/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-starting-style/popup:translate-y-full": bottom
-            },
-            className
+              className: cn("pointer-events-auto fixed top-[7px] z-50 transition-all", { "left-4": closePosition === "top-left", "right-4": closePosition === "top-right", "group-data-closed/popup:duration-pop-hover group-data-open/popup:duration-pop-hover group-data-open/popup:ease-pop-hover group-data-closed/popup:ease-out group-data-ending-style/popup:scale-[0.96] group-data-ending-style/popup:opacity-0 group-data-starting-style/popup:scale-[0.96] group-data-starting-style/popup:opacity-0": !bottom, " group-data-starting-style/popup-scale-[0.96] group-data-ending-style/popup-scale-100 group-data-open/popup:animate-in group-data-closed/popup:animate-out group-data-closed/popup:duration-200 group-data-closed/popup:ease-[cubic-bezier(1,0,0.72,0.32)] group-data-ending-style/popup:translate-y-1/2 group-data-open/popup:duration-pop-hover group-data-open/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-starting-style/popup:translate-y-1/2": bottom }),
+              "aria-label": "Close",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "before:bg-tint-700-reversed relative block before:absolute before:-inset-1.5 before:rounded-full before:backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary-foreground text-background relative z-10 flex size-10 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(icons.XClose, { className: "size-[18px]" }) }) })
+              ]
+            }
           ),
-          ...props,
-          children
-        }
-      )
-    ] })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "bg-background pointer-events-auto fixed top-1/2 left-1/2 flex h-full max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl shadow-2xl transition-all",
+                {
+                  "group-data-closed/popup:duration-pop-hover group-data-open/popup:duration-pop-hover group-data-open/popup:ease-pop-hover group-data-closed/popup:ease-out group-data-ending-style/popup:scale-[0.96] group-data-ending-style/popup:opacity-0 group-data-starting-style/popup:scale-[0.96] group-data-starting-style/popup:opacity-0": !bottom,
+                  "group-data-open/popup:slide-in-from-bottom group-data-closed/popup:slide-out-to-bottom group-data-starting-style/popup-scale-100 group-data-ending-style/popup-scale-100 group-data-open/popup:animate-in group-data-closed/popup:animate-out top-auto bottom-0 h-full translate-y-0 rounded-b-none group-data-closed/popup:duration-200 group-data-ending-style/popup:translate-y-full group-data-open/popup:duration-300 group-data-open/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-closed/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-starting-style/popup:translate-y-full": bottom
+                },
+                className
+              ),
+              ...props,
+              children
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-2 text-center sm:text-left", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
 }
-function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse gap-2 sm:flex-row", className), ...props });
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row", className),
+      ...props,
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "tertiary", theme: "base" }), children: "Close" })
+      ]
+    }
+  );
 }
 function DialogTitle({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     dialog.Dialog.Title,
     {
+      "data-slot": "dialog-title",
       className: cn("text-lg leading-none font-semibold", className),
       ...props
     }
@@ -575,6 +665,7 @@ function DialogDescription({
   return /* @__PURE__ */ jsxRuntime.jsx(
     dialog.Dialog.Description,
     {
+      "data-slot": "dialog-description",
       className: cn("text-muted-foreground text-sm", className),
       ...props
     }
@@ -584,6 +675,7 @@ function DialogBody({ className, children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      "data-slot": "dialog-body",
       className: cn("flex shrink-0 grow basis-0 flex-col items-start self-stretch", className),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 grow basis-0 flex-col items-start gap-10 self-stretch overflow-auto p-4", children })
@@ -600,28 +692,53 @@ function DropdownMenuTrigger({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
 }
 function DropdownMenuContent({
-  className,
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
   sideOffset = 4,
-  positionerProps,
-  children,
+  className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Positioner, { sideOffset, ...positionerProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Popup,
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Positioner,
     {
-      "data-slot": "dropdown-menu-content",
-      className: cn(
-        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border-border-edge-light z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl border p-1.5 shadow-xl",
-        className
-      ),
-      ...props,
-      children
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        menu.Menu.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-white dark:ring-gray-700 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-xs p-1 shadow-xl ring-1 duration-100 outline-none data-closed:overflow-hidden", className),
+          ...props
+        }
+      )
     }
-  ) }) });
+  ) });
 }
 function DropdownMenuGroup({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
 }
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.GroupLabel,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function DropdownMenuItem({
   className,
   inset,
@@ -635,9 +752,59 @@ function DropdownMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-1.5 rounded-xs px-2 py-1.5 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-xs px-2 py-1.5 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    menu.Menu.SubmenuTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRight, { className: "ml-auto" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-white dark:ring-gray-700 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-sm p-1 shadow-lg ring-1 duration-100",
+        className
+      ),
+      align,
+      alignOffset,
+      side,
+      sideOffset,
       ...props
     }
   );
@@ -646,80 +813,79 @@ function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     menu.Menu.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
+      "data-inset": inset,
       className: cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-          menu.Menu.CheckboxItemIndicator,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
           {
-            keepMounted: true,
-            className: "transition data-checked:scale-100 data-checked:opacity-100 data-unchecked:scale-75 data-unchecked:opacity-0",
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckCircle, { className: "size-4" })
+            className: "pointer-events-none absolute right-2 flex items-center justify-center",
+            "data-slot": "dropdown-menu-checkbox-item-indicator",
+            children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              icons.Check,
+              {}
+            ) })
           }
-        ) }),
+        ),
         children
       ]
     }
   );
 }
 function DropdownMenuRadioGroup({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
 }
 function DropdownMenuRadioItem({
   className,
   children,
+  inset,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     menu.Menu.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
+      "data-inset": inset,
       className: cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-          menu.Menu.RadioItemIndicator,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
           {
-            keepMounted: true,
-            className: "transition data-checked:scale-100 data-checked:opacity-100 data-unchecked:scale-75 data-unchecked:opacity-0",
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Circle, { className: "size-2 fill-current" })
+            className: "pointer-events-none absolute right-2 flex items-center justify-center",
+            "data-slot": "dropdown-menu-radio-item-indicator",
+            children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              icons.Check,
+              {}
+            ) })
           }
-        ) }),
+        ),
         children
       ]
     }
   );
 }
-function DropdownMenuLabel({
-  className,
-  inset,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.GroupLabel,
-    {
-      "data-slot": "dropdown-menu-label",
-      "data-inset": inset,
-      className: cn("px-2 py-1.5 text-sm font-medium data-inset:pl-8", className),
-      ...props,
-      children
-    }
-  );
-}
 function DropdownMenuSeparator({
   className,
   ...props
@@ -733,62 +899,22 @@ function DropdownMenuSeparator({
     }
   );
 }
-function DropdownMenuShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      "data-slot": "dropdown-menu-shortcut",
-      className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
-      ...props
-    }
-  );
-}
-function DropdownMenuSub({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
-}
-function DropdownMenuSubTrigger({
+function DropdownMenuShortcut({
   className,
-  inset,
-  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    menu.Menu.SubmenuTrigger,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
     {
-      "data-slot": "dropdown-menu-sub-trigger",
-      "data-inset": inset,
+      "data-slot": "dropdown-menu-shortcut",
       className: cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-1.5 rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
         className
       ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRight, { className: "ml-auto size-4" })
-      ]
+      ...props
     }
   );
 }
-function DropdownMenuSubContent({
-  className,
-  sideOffset = 4,
-  positionerProps,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Positioner, { sideOffset, ...positionerProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Popup,
-    {
-      "data-slot": "dropdown-menu-sub-content",
-      className: cn(
-        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-2xl border p-1 shadow-lg",
-        className
-      ),
-      ...props,
-      children
-    }
-  ) }) });
-}
 function Footer({
   theme = "template",
   logo,
@@ -980,7 +1106,7 @@ function Input({ className, type, ...props }) {
       "data-slot": "input",
       className: cn(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       ),
@@ -1052,37 +1178,59 @@ function NotificationBadge({
   });
 }
 var SectionFlourish = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center self-stretch py-8 text-xl", children: "\u2726" });
-function TooltipProvider({ delay = 0, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Provider, { "data-slot": "tooltip-provider", delay, ...props });
+function TooltipProvider({
+  delay = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
 }
 function Tooltip({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Root, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
   children,
-  positionerProps,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Positioner, { ...positionerProps, className: "isolate z-50", children: /* @__PURE__ */ jsxRuntime.jsxs(
-    tooltip.Tooltip.Popup,
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Positioner,
     {
-      "data-slot": "tooltip-content",
-      className: cn(
-        "bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-[8px] px-3 py-2 text-xs font-medium",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "flex data-[side=bottom]:-top-[6px] data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:-translate-y-1/2 data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-translate-y-1/2 data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:-translate-x-1/2 data-[side=top]:rotate-180", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipArrow, {}) }),
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "cn-tooltip-arrow bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
-      ]
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        tooltip.Tooltip.Popup,
+        {
+          "data-slot": "tooltip-content",
+          className: cn(
+            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "flex data-[side=bottom]:-top-[6px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:rotate-180", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipArrow, {}) })
+          ]
+        }
+      )
     }
-  ) }) });
+  ) });
 }
 var TooltipArrow = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1167,16 +1315,8 @@ function SectionHeader({
             /* @__PURE__ */ jsxRuntime.jsx(
               TooltipContent,
               {
-                positionerProps: {
-                  sideOffset: 2,
-                  alignOffset: 5,
-                  collisionAvoidance: {
-                    side: "shift",
-                    align: "shift",
-                    fallbackAxisSide: "none"
-                  },
-                  collisionPadding: 16
-                },
+                sideOffset: 2,
+                alignOffset: 5,
                 children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: description })
               }
             )
@@ -1188,7 +1328,7 @@ function SectionHeader({
 }
 var tagVariants = classVarianceAuthority.cva(
   // Base styles
-  "inline-flex items-center justify-center rounded-full box-border relative transition-all duration-150 ease-in-out font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[rgba(21,94,239,0.6)] focus-visible:ring-offset-0",
+  "inline-flex items-center justify-center rounded-full box-border relative font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/60 focus-visible:ring-offset-0",
   {
     variants: {
       selected: {
@@ -1269,6 +1409,8 @@ function Tag({
   children,
   leading,
   trailing,
+  interactive,
+  type,
   onClick,
   className = ""
 }) {
@@ -1285,7 +1427,8 @@ function Tag({
   };
   const showLeading = leading && !collapsed;
   const showTrailing = trailing && !collapsed;
-  const TagElement = onClick ? "button" : "div";
+  const isInteractive = interactive ?? typeof onClick === "function";
+  const TagElement = isInteractive ? "button" : "div";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     TagElement,
     {
@@ -1294,13 +1437,13 @@ function Tag({
           size,
           selected,
           collapsed,
-          interactive: !!onClick
+          interactive: isInteractive
         }),
         className
       ),
       onClick: handleClick,
       onKeyDown: handleKeyDown,
-      type: onClick ? "button" : void 0,
+      type: isInteractive ? type ?? "button" : void 0,
       children: [
         !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           showLeading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit", children: leading }),
@@ -1313,17 +1456,18 @@ function Tag({
   );
 }
 
+exports.BannerNotification = BannerNotification;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;
 exports.ContentBlock = ContentBlock;
 exports.Dialog = DialogRoot;
-exports.DialogBackdrop = DialogBackdrop;
 exports.DialogBody = DialogBody;
 exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
 exports.DialogFooter = DialogFooter;
 exports.DialogHeader = DialogHeader;
-exports.DialogPopup = DialogPopup;
+exports.DialogOverlay = DialogOverlay;
 exports.DialogPortal = DialogPortal;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;