@popgrids/ui 0.0.22 → 0.0.24

package/dist/index.cjs

@@ -5,8 +5,9 @@ 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 checkbox = require('@base-ui/react/checkbox');
 var icons = require('@untitledui/icons');
+var dialog = require('@base-ui/react/dialog');
 var menu = require('@base-ui/react/menu');
 var input = require('@base-ui/react/input');
 var mergeProps = require('@base-ui/react/merge-props');
@@ -527,6 +528,27 @@ function ContentBlock({ className, children, title, subhead, cta }) {
     children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-base max-w-(--width-xl) pb-3", children })
   ] });
 }
+function Checkbox({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    checkbox.Checkbox.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "border-foreground dark:bg-input/30 dark:data-checked:bg-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:ring-3 data-checked:border-foreground data-checked:bg-foreground data-checked:text-background",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        checkbox.Checkbox.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {})
+        }
+      )
+    }
+  );
+}
 function DialogRoot(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { "data-slot": "dialog", ...props });
 }
@@ -588,17 +610,6 @@ function DialogContent({
         "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,
-            {
-              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]" }) }) })
-              ]
-            }
-          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -613,6 +624,17 @@ function DialogContent({
               ...props,
               children
             }
+          ),
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
+            DialogClose,
+            {
+              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]" }) }) })
+              ]
+            }
           )
         ]
       }
@@ -1459,6 +1481,7 @@ function Tag({
 exports.BannerNotification = BannerNotification;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;
+exports.Checkbox = Checkbox;
 exports.ContentBlock = ContentBlock;
 exports.Dialog = DialogRoot;
 exports.DialogBody = DialogBody;