@popgrids/ui 0.0.19 → 0.0.21

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",
@@ -380,6 +419,102 @@ function Button({
     }
   );
 }
+var buttonLinkVariants = classVarianceAuthority.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__ */ 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: sharedClassName,
+      type: type ?? "button",
+      ...buttonProps,
+      children: content
+    }
+  );
+}
 function ContentBlock({ className, children, title, subhead, cta }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex max-w-xl flex-col items-start gap-3 self-stretch", className), children: [
     (title || subhead || cta) && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-10 items-start justify-between self-stretch", children: [
@@ -393,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",
@@ -427,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
@@ -435,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-[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__ */ 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-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__ */ 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
     }
@@ -496,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
     }
@@ -505,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 })
@@ -901,7 +1072,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
       ),
@@ -1109,7 +1280,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: {
@@ -1190,6 +1361,8 @@ function Tag({
   children,
   leading,
   trailing,
+  interactive,
+  type,
   onClick,
   className = ""
 }) {
@@ -1206,7 +1379,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,
     {
@@ -1215,13 +1389,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 }),
@@ -1234,16 +1408,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;