@popgrids/ui 0.0.20 → 0.0.22

package/dist/index.js

@@ -1,10 +1,10 @@
-import { Button as Button$1 } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Button as Button$1 } from '@base-ui/react/button';
 import { Dialog } from '@base-ui/react/dialog';
-import { XClose, CheckCircle, Circle, ChevronRight, Check, InfoCircle } from '@untitledui/icons';
+import { XClose, ChevronRight, Check, InfoCircle } from '@untitledui/icons';
 import { Menu } from '@base-ui/react/menu';
 import { Input as Input$1 } from '@base-ui/react/input';
 import { mergeProps } from '@base-ui/react/merge-props';
@@ -12,10 +12,49 @@ import { useRender } from '@base-ui/react/use-render';
 import { useState, useCallback, useEffect } from 'react';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 
-// src/components/button/button.tsx
+// src/components/banner-notification/banner-notification.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var bannerNotificationVariants = 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__ */ jsxs(
+    "div",
+    {
+      "data-slot": "banner-notification",
+      className: cn(bannerNotificationVariants({ variant, theme }), className),
+      ...props,
+      children: [
+        image && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-start [&>svg]:size-5", children: image }),
+        children != null && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-sm", children })
+      ]
+    }
+  );
+}
 var loaderVariants = cva("flex shrink-0 items-center justify-center", {
   variants: {
     theme: {
@@ -246,7 +285,7 @@ var buttonVariants = 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",
@@ -432,28 +471,45 @@ function ButtonLink({
   size = "md",
   theme = "default",
   trailing,
+  href,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
-    "a",
+  const sharedClassName = cn(
+    buttonLinkVariants({
+      hasLeading: !!leading,
+      hasTrailing: !!trailing,
+      primary,
+      size,
+      theme
+    }),
+    className
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: leading }),
+    children != null && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate relative", children }),
+    trailing && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: trailing })
+  ] });
+  if (href != null) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        "data-slot": "button-link",
+        className: sharedClassName,
+        href,
+        ...props,
+        children: content
+      }
+    );
+  }
+  const { type, ...buttonProps } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
     {
       "data-slot": "button-link",
-      className: cn(
-        buttonLinkVariants({
-          hasLeading: !!leading,
-          hasTrailing: !!trailing,
-          primary,
-          size,
-          theme
-        }),
-        className
-      ),
-      ...props,
-      children: [
-        leading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: leading }),
-        children != null && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate relative", children }),
-        trailing && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: trailing })
-      ]
+      className: sharedClassName,
+      type: type ?? "button",
+      ...buttonProps,
+      children: content
     }
   );
 }
@@ -470,24 +526,25 @@ function ContentBlock({ className, children, title, subhead, cta }) {
   ] });
 }
 function DialogRoot(props) {
-  return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+  return /* @__PURE__ */ jsx(Dialog.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal(props) {
-  return /* @__PURE__ */ jsx(Dialog.Portal, { ...props });
+  return /* @__PURE__ */ jsx(Dialog.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogTrigger(props) {
-  return /* @__PURE__ */ jsx(Dialog.Trigger, { ...props });
+  return /* @__PURE__ */ jsx(Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogClose(props) {
-  return /* @__PURE__ */ jsx(Dialog.Close, { ...props });
+  return /* @__PURE__ */ jsx(Dialog.Close, { "data-slot": "dialog-close", ...props });
 }
-function DialogBackdrop({
+function DialogOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     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",
@@ -504,6 +561,7 @@ function DialogViewport({
   return /* @__PURE__ */ jsx(
     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
@@ -512,55 +570,87 @@ function DialogViewport({
     }
   );
 }
-function DialogPopup({
+function DialogContent({
   className,
   children,
   bottom = false,
   showCloseButton = true,
+  closePosition = "top-left",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx(DialogBackdrop, {}),
-    /* @__PURE__ */ jsxs(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__ */ jsxs(
-        DialogClose,
-        {
-          className: "pointer-events-auto fixed top-[15px] left-5 z-50",
-          "aria-label": "Close",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" }),
-            /* @__PURE__ */ 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__ */ jsx("span", { className: "bg-primary-foreground text-background relative z-10 flex size-10 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(XClose, { className: "size-[18px]" }) }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ 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__ */ jsxs(Dialog.Portal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      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__ */ 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__ */ jsx("span", { className: "sr-only", children: "Close" }),
+                /* @__PURE__ */ 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__ */ jsx("span", { className: "bg-primary-foreground text-background relative z-10 flex size-10 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(XClose, { className: "size-[18px]" }) }) })
+              ]
+            }
           ),
-          ...props,
-          children
-        }
-      )
-    ] })
+          /* @__PURE__ */ 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__ */ jsx("div", { className: cn("flex flex-col gap-2 text-center sm:text-left", className), ...props });
+  return /* @__PURE__ */ 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__ */ jsx("div", { className: cn("flex flex-col-reverse gap-2 sm:flex-row", className), ...props });
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row", className),
+      ...props,
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsx(DialogClose, { render: /* @__PURE__ */ jsx(Button, { variant: "tertiary", theme: "base" }), children: "Close" })
+      ]
+    }
+  );
 }
 function DialogTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     Dialog.Title,
     {
+      "data-slot": "dialog-title",
       className: cn("text-lg leading-none font-semibold", className),
       ...props
     }
@@ -573,6 +663,7 @@ function DialogDescription({
   return /* @__PURE__ */ jsx(
     Dialog.Description,
     {
+      "data-slot": "dialog-description",
       className: cn("text-muted-foreground text-sm", className),
       ...props
     }
@@ -582,6 +673,7 @@ function DialogBody({ className, children, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      "data-slot": "dialog-body",
       className: cn("flex shrink-0 grow basis-0 flex-col items-start self-stretch", className),
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: "flex shrink-0 grow basis-0 flex-col items-start gap-10 self-stretch overflow-auto p-4", children })
@@ -598,28 +690,53 @@ function DropdownMenuTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(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__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { sideOffset, ...positionerProps, children: /* @__PURE__ */ jsx(
-    Menu.Popup,
+  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+    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__ */ jsx(
+        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__ */ jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
 }
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    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,
@@ -633,9 +750,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__ */ jsx(Menu.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(ChevronRight, { className: "ml-auto" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ 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
     }
   );
@@ -644,80 +811,79 @@ function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     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__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(
-          Menu.CheckboxItemIndicator,
+        /* @__PURE__ */ jsx(
+          "span",
           {
-            keepMounted: true,
-            className: "transition data-checked:scale-100 data-checked:opacity-100 data-unchecked:scale-75 data-unchecked:opacity-0",
-            children: /* @__PURE__ */ jsx(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__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(
+              Check,
+              {}
+            ) })
           }
-        ) }),
+        ),
         children
       ]
     }
   );
 }
 function DropdownMenuRadioGroup({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+  return /* @__PURE__ */ jsx(
+    Menu.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
 }
 function DropdownMenuRadioItem({
   className,
   children,
+  inset,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
     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__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(
-          Menu.RadioItemIndicator,
+        /* @__PURE__ */ jsx(
+          "span",
           {
-            keepMounted: true,
-            className: "transition data-checked:scale-100 data-checked:opacity-100 data-unchecked:scale-75 data-unchecked:opacity-0",
-            children: /* @__PURE__ */ jsx(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__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(
+              Check,
+              {}
+            ) })
           }
-        ) }),
+        ),
         children
       ]
     }
   );
 }
-function DropdownMenuLabel({
-  className,
-  inset,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    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
@@ -731,62 +897,22 @@ function DropdownMenuSeparator({
     }
   );
 }
-function DropdownMenuShortcut({ className, ...props }) {
-  return /* @__PURE__ */ 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__ */ jsx(Menu.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
-}
-function DropdownMenuSubTrigger({
+function DropdownMenuShortcut({
   className,
-  inset,
-  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
-    Menu.SubmenuTrigger,
+  return /* @__PURE__ */ 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__ */ jsx(ChevronRight, { className: "ml-auto size-4" })
-      ]
+      ...props
     }
   );
 }
-function DropdownMenuSubContent({
-  className,
-  sideOffset = 4,
-  positionerProps,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { sideOffset, ...positionerProps, children: /* @__PURE__ */ jsx(
-    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,
@@ -978,7 +1104,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
       ),
@@ -1050,37 +1176,59 @@ function NotificationBadge({
   });
 }
 var SectionFlourish = () => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center self-stretch py-8 text-xl", children: "\u2726" });
-function TooltipProvider({ delay = 0, ...props }) {
-  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { "data-slot": "tooltip-provider", delay, ...props });
+function TooltipProvider({
+  delay = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
 }
 function Tooltip({ ...props }) {
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
   children,
-  positionerProps,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { ...positionerProps, className: "isolate z-50", children: /* @__PURE__ */ jsxs(
-    Tooltip$1.Popup,
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+    Tooltip$1.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__ */ jsx(Tooltip$1.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__ */ jsx(TooltipArrow, {}) }),
-        children,
-        /* @__PURE__ */ jsx(Tooltip$1.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__ */ jsxs(
+        Tooltip$1.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__ */ jsx(Tooltip$1.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__ */ jsx(TooltipArrow, {}) })
+          ]
+        }
+      )
     }
-  ) }) });
+  ) });
 }
 var TooltipArrow = (props) => {
   return /* @__PURE__ */ jsxs(
@@ -1165,16 +1313,8 @@ function SectionHeader({
             /* @__PURE__ */ jsx(
               TooltipContent,
               {
-                positionerProps: {
-                  sideOffset: 2,
-                  alignOffset: 5,
-                  collisionAvoidance: {
-                    side: "shift",
-                    align: "shift",
-                    fallbackAxisSide: "none"
-                  },
-                  collisionPadding: 16
-                },
+                sideOffset: 2,
+                alignOffset: 5,
                 children: /* @__PURE__ */ jsx("p", { children: description })
               }
             )
@@ -1186,7 +1326,7 @@ function SectionHeader({
 }
 var tagVariants = 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: {
@@ -1267,6 +1407,8 @@ function Tag({
   children,
   leading,
   trailing,
+  interactive,
+  type,
   onClick,
   className = ""
 }) {
@@ -1283,7 +1425,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__ */ jsxs(
     TagElement,
     {
@@ -1292,13 +1435,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__ */ jsxs(Fragment, { children: [
           showLeading && /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit", children: leading }),
@@ -1311,6 +1454,6 @@ function Tag({
   );
 }
 
-export { Button, ButtonLink, ContentBlock, DialogRoot as Dialog, DialogBackdrop, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Footer, Input, Label, Loader, NotificationBadge, SectionFlourish, SectionHeader, Tag, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
+export { BannerNotification, Button, ButtonLink, ContentBlock, DialogRoot as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Footer, Input, Label, Loader, NotificationBadge, SectionFlourish, SectionHeader, Tag, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map