@popgrids/ui 0.0.22 → 0.0.24

package/dist/index.js

@@ -3,8 +3,9 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Button as Button$1 } from '@base-ui/react/button';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { Check, XClose, ChevronRight, InfoCircle } from '@untitledui/icons';
 import { Dialog } from '@base-ui/react/dialog';
-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';
@@ -525,6 +526,27 @@ function ContentBlock({ className, children, title, subhead, cta }) {
     children && /* @__PURE__ */ jsx("div", { className: "prose prose-base max-w-(--width-xl) pb-3", children })
   ] });
 }
+function Checkbox({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Checkbox$1.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__ */ jsx(
+        Checkbox$1.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+          children: /* @__PURE__ */ jsx(Check, {})
+        }
+      )
+    }
+  );
+}
 function DialogRoot(props) {
   return /* @__PURE__ */ jsx(Dialog.Root, { "data-slot": "dialog", ...props });
 }
@@ -586,17 +608,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__ */ 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__ */ 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",
             {
@@ -611,6 +622,17 @@ function DialogContent({
               ...props,
               children
             }
+          ),
+          showCloseButton && /* @__PURE__ */ 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__ */ 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]" }) }) })
+              ]
+            }
           )
         ]
       }
@@ -1454,6 +1476,6 @@ function Tag({
   );
 }
 
-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 };
+export { BannerNotification, Button, ButtonLink, Checkbox, 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