@popgrids/ui 0.0.19 → 0.0.21

package/dist/index.js

@@ -1,8 +1,8 @@
-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 { Menu } from '@base-ui/react/menu';
@@ -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",
@@ -378,6 +417,102 @@ function Button({
     }
   );
 }
+var buttonLinkVariants = cva(
+  "inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all rounded-xs -translate-y-px border-y border-x-4 border-transparent [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none no-underline cursor-pointer",
+  {
+    variants: {
+      hasLeading: {
+        false: null,
+        true: null
+      },
+      hasTrailing: {
+        false: null,
+        true: null
+      },
+      primary: {
+        false: null,
+        true: null
+      },
+      size: {
+        sm: "text-sm [&_svg:not([class*='size-'])]:size-4",
+        md: "text-sm [&_svg:not([class*='size-'])]:size-[18px]",
+        lg: "text-base [&_svg:not([class*='size-'])]:size-5"
+      },
+      theme: {
+        default: "",
+        white: "text-white hover:bg-white/16 focus-visible:bg-blue-dark-600 focus-visible:text-white",
+        black: "text-black hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-black focus-visible:text-white"
+      }
+    },
+    defaultVariants: {
+      primary: false,
+      size: "md",
+      theme: "default"
+    },
+    compoundVariants: [
+      {
+        theme: "default",
+        primary: false,
+        class: "text-grayscale-500 hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-white"
+      },
+      {
+        theme: "default",
+        primary: true,
+        class: "text-foreground hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-white"
+      }
+    ]
+  }
+);
+function ButtonLink({
+  children,
+  className,
+  leading,
+  primary = false,
+  size = "md",
+  theme = "default",
+  trailing,
+  href,
+  ...props
+}) {
+  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: sharedClassName,
+      type: type ?? "button",
+      ...buttonProps,
+      children: content
+    }
+  );
+}
 function ContentBlock({ className, children, title, subhead, cta }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex max-w-xl flex-col items-start gap-3 self-stretch", className), children: [
     (title || subhead || cta) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-10 items-start justify-between self-stretch", children: [
@@ -391,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",
@@ -425,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
@@ -433,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-[15px] z-50 transition-all", { "left-5": closePosition === "top-left", "right-5": 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-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
+              ),
+              ...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
     }
@@ -494,6 +663,7 @@ function DialogDescription({
   return /* @__PURE__ */ jsx(
     Dialog.Description,
     {
+      "data-slot": "dialog-description",
       className: cn("text-muted-foreground text-sm", className),
       ...props
     }
@@ -503,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 })
@@ -899,7 +1070,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
       ),
@@ -1107,7 +1278,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: {
@@ -1188,6 +1359,8 @@ function Tag({
   children,
   leading,
   trailing,
+  interactive,
+  type,
   onClick,
   className = ""
 }) {
@@ -1204,7 +1377,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,
     {
@@ -1213,13 +1387,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 }),
@@ -1232,6 +1406,6 @@ function Tag({
   );
 }
 
-export { Button, 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