@martinsura/ui 0.1.11 → 0.1.12

package/dist/index.cjs

@@ -324,11 +324,11 @@ var buttonVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         filled: "",
-        default: "bg-white text-(--ui-text) border border-(--ui-border-strong) hover:bg-(--ui-surface-subtle) active:bg-(--ui-surface-muted)",
-        subtle: "bg-(--ui-surface-subtle) text-(--ui-text) border border-transparent hover:bg-(--ui-surface-muted) active:bg-(--ui-surface-muted)",
-        ghost: "text-(--ui-text) hover:bg-(--ui-surface-muted) active:bg-(--ui-surface-subtle)",
-        text: "text-(--ui-text) hover:text-(--ui-text-strong) active:text-(--ui-text-strong) px-0! bg-transparent",
-        link: "text-(--ui-primary) hover:underline p-0! h-auto!"
+        default: "bg-white border border-(--ui-border-strong) hover:bg-(--ui-surface-subtle) active:bg-(--ui-surface-muted)",
+        subtle: "bg-(--ui-surface-subtle) border border-transparent hover:bg-(--ui-surface-muted) active:bg-(--ui-surface-muted)",
+        ghost: "hover:bg-(--ui-surface-muted) active:bg-(--ui-surface-subtle)",
+        text: "px-0! bg-transparent",
+        link: "hover:underline p-0! h-auto!"
       },
       color: {
         primary: "",
@@ -351,9 +351,30 @@ var buttonVariants = classVarianceAuthority.cva(
       }
     },
     compoundVariants: [
+      // filled
       { variant: "filled", color: "primary", class: "bg-(--ui-primary) text-(--ui-primary-text) hover:bg-(--ui-primary-hover) active:bg-(--ui-primary-active)" },
       { variant: "filled", color: "success", class: "bg-(--ui-success) text-(--ui-success-text) hover:bg-(--ui-success-hover) active:bg-(--ui-success-hover)" },
-      { variant: "filled", color: "danger", class: "bg-(--ui-danger) text-(--ui-danger-text) hover:bg-(--ui-danger-hover) active:bg-(--ui-danger-hover)" }
+      { variant: "filled", color: "danger", class: "bg-(--ui-danger) text-(--ui-danger-text) hover:bg-(--ui-danger-hover) active:bg-(--ui-danger-hover)" },
+      // default
+      { variant: "default", color: "primary", class: "text-(--ui-text)" },
+      { variant: "default", color: "success", class: "text-(--ui-success)" },
+      { variant: "default", color: "danger", class: "text-(--ui-danger)" },
+      // subtle
+      { variant: "subtle", color: "primary", class: "text-(--ui-text)" },
+      { variant: "subtle", color: "success", class: "text-(--ui-success)" },
+      { variant: "subtle", color: "danger", class: "text-(--ui-danger)" },
+      // ghost
+      { variant: "ghost", color: "primary", class: "text-(--ui-text)" },
+      { variant: "ghost", color: "success", class: "text-(--ui-success)" },
+      { variant: "ghost", color: "danger", class: "text-(--ui-danger)" },
+      // text
+      { variant: "text", color: "primary", class: "text-(--ui-text) hover:text-(--ui-text-strong) active:text-(--ui-text-strong)" },
+      { variant: "text", color: "success", class: "text-(--ui-success)" },
+      { variant: "text", color: "danger", class: "text-(--ui-danger)" },
+      // link
+      { variant: "link", color: "primary", class: "text-(--ui-primary)" },
+      { variant: "link", color: "success", class: "text-(--ui-success)" },
+      { variant: "link", color: "danger", class: "text-(--ui-danger)" }
     ],
     defaultVariants: {
       variant: "filled",
@@ -383,10 +404,13 @@ var Button = ({
   const IconComponent = props.icon ?? (props.iconType ? getIcon(props.iconType) : void 0);
   const iconNode = IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: iconSize, strokeWidth: 1.5, className: props.classNames?.icon }) : void 0;
   const content = props.text ?? props.children;
-  const handleClick = () => {
-    if (props.disabled || props.loading) {
-      return;
-    }
+  const handleClick = (e) => {
+    if (props.stopPropagation) e.stopPropagation();
+    if (props.disabled || props.loading) return;
+    props.onClick?.();
+  };
+  const handleConfirm = () => {
+    if (props.disabled || props.loading) return;
     props.onClick?.();
   };
   const button = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -400,7 +424,7 @@ var Button = ({
         props.iconOnly && "px-0!",
         props.className
       ),
-      onClick: props.confirm ? void 0 : handleClick,
+      onClick: props.confirm ? props.stopPropagation ? (e) => e.stopPropagation() : void 0 : handleClick,
       children: [
         props.loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: iconSize, color: "current", className: props.classNames?.spinner }) : iconPosition === "left" && iconNode,
         !props.iconOnly && content !== void 0 && content !== null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: props.classNames?.content, children: content }),
@@ -418,7 +442,7 @@ var Button = ({
       confirmOk: props.confirm.confirmOk,
       confirmCancel: props.confirm.confirmCancel,
       confirmColor: props.confirm.confirmColor,
-      onConfirm: handleClick,
+      onConfirm: handleConfirm,
       children: button
     }
   );