@popgrids/ui 0.0.23 → 0.0.25

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';
@@ -377,45 +378,53 @@ function Button({
   theme = "brand",
   trailing,
   variant = "default",
+  href,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    Button$1,
-    {
-      "data-slot": "button",
-      className: cn(
-        buttonVariants({
-          variant,
-          size,
-          align,
-          outline,
-          collapsed,
-          pill,
-          className,
-          hasLeading: !!leading,
-          theme,
-          hasTrailing: !!trailing
-        }),
-        tintVariants({ variant, outline })
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        loading && (loadingElement || /* @__PURE__ */ jsx(Loader, { className: "absolute inset-0 m-auto", variant: "spinner", theme: "reversed" })),
-        leading && /* @__PURE__ */ jsx("div", { className: cn("group-aria-busy/button:opacity-0 transition-opacity", { "opacity-0": loading }), children: leading }),
-        children && /* @__PURE__ */ jsx("span", { className: cn("min-w-[18px] truncate relative transition-opacity", { "opacity-0": loading }), children }),
-        trailing && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn("group-aria-busy/button:opacity-0 transition-opacity", {
-              "opacity-0": loading,
-              "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed
-            }),
-            children: trailing
-          }
-        )
-      ] })
-    }
+  const sharedClassName = cn(
+    buttonVariants({
+      variant,
+      size,
+      align,
+      outline,
+      collapsed,
+      pill,
+      className,
+      hasLeading: !!leading,
+      theme,
+      hasTrailing: !!trailing
+    }),
+    tintVariants({ variant, outline })
   );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading && (loadingElement || /* @__PURE__ */ jsx(Loader, { className: "absolute inset-0 m-auto", variant: "spinner", theme: "reversed" })),
+    leading && /* @__PURE__ */ jsx("div", { className: cn("group-aria-busy/button:opacity-0 transition-opacity", { "opacity-0": loading }), children: leading }),
+    children && /* @__PURE__ */ jsx("span", { className: cn("min-w-[18px] truncate relative transition-opacity", { "opacity-0": loading }), children }),
+    trailing && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("group-aria-busy/button:opacity-0 transition-opacity", {
+          "opacity-0": loading,
+          "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed
+        }),
+        children: trailing
+      }
+    )
+  ] });
+  if (href != null) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        "data-slot": "button",
+        className: sharedClassName,
+        href,
+        ...props,
+        children: content
+      }
+    );
+  }
+  const buttonProps = props;
+  return /* @__PURE__ */ jsx(Button$1, { "data-slot": "button", className: sharedClassName, ...buttonProps, children: content });
 }
 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",
@@ -525,6 +534,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 });
 }
@@ -1454,6 +1484,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