@popgrids/ui 0.0.23 → 0.0.25

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');
@@ -379,45 +380,53 @@ function Button({
   theme = "brand",
   trailing,
   variant = "default",
+  href,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    button.Button,
-    {
-      "data-slot": "button",
-      className: cn(
-        buttonVariants({
-          variant,
-          size,
-          align,
-          outline,
-          collapsed,
-          pill,
-          className,
-          hasLeading: !!leading,
-          theme,
-          hasTrailing: !!trailing
-        }),
-        tintVariants({ variant, outline })
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        loading && (loadingElement || /* @__PURE__ */ jsxRuntime.jsx(Loader, { className: "absolute inset-0 m-auto", variant: "spinner", theme: "reversed" })),
-        leading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("group-aria-busy/button:opacity-0 transition-opacity", { "opacity-0": loading }), children: leading }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-[18px] truncate relative transition-opacity", { "opacity-0": loading }), children }),
-        trailing && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    loading && (loadingElement || /* @__PURE__ */ jsxRuntime.jsx(Loader, { className: "absolute inset-0 m-auto", variant: "spinner", theme: "reversed" })),
+    leading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("group-aria-busy/button:opacity-0 transition-opacity", { "opacity-0": loading }), children: leading }),
+    children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-[18px] truncate relative transition-opacity", { "opacity-0": loading }), children }),
+    trailing && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "a",
+      {
+        "data-slot": "button",
+        className: sharedClassName,
+        href,
+        ...props,
+        children: content
+      }
+    );
+  }
+  const buttonProps = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(button.Button, { "data-slot": "button", className: sharedClassName, ...buttonProps, children: content });
 }
 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",
@@ -527,6 +536,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 });
 }
@@ -1459,6 +1489,7 @@ function Tag({
 exports.BannerNotification = BannerNotification;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;
+exports.Checkbox = Checkbox;
 exports.ContentBlock = ContentBlock;
 exports.Dialog = DialogRoot;
 exports.DialogBody = DialogBody;