@martinsura/ui 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -323,14 +323,17 @@ var buttonVariants = classVarianceAuthority.cva(
   {
     variants: {
       variant: {
-        primary: "bg-(--ui-primary) text-(--ui-primary-text) hover:bg-(--ui-primary-hover) active:bg-(--ui-primary-active)",
-        danger: "bg-(--ui-danger) text-(--ui-danger-text) hover:bg-(--ui-danger-hover) active:bg-(--ui-danger-hover)",
-        success: "bg-(--ui-success) text-(--ui-success-text) hover:bg-(--ui-success-hover) active:bg-(--ui-success-hover)",
-        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!"
+        filled: "",
+        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: "",
+        success: "",
+        danger: ""
       },
       size: {
         small: "h-(--ui-h-sm) px-(--ui-px-sm) [font-size:var(--ui-text-sm)] rounded-(--ui-radius-sm)",
@@ -347,8 +350,35 @@ var buttonVariants = classVarianceAuthority.cva(
         round: "rounded-full"
       }
     },
+    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)" },
+      // 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: "primary",
+      variant: "filled",
+      color: "primary",
       size: "middle",
       block: false,
       shape: "default"
@@ -361,7 +391,8 @@ var iconSizeMap = {
   large: 18
 };
 var Button = ({
-  variant = "primary",
+  variant = "filled",
+  color = "primary",
   size = "middle",
   shape = "default",
   block = false,
@@ -373,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(
@@ -385,12 +419,12 @@ var Button = ({
       type: props.htmlType ?? "button",
       disabled: props.disabled || props.loading,
       className: tailwindMerge.twMerge(
-        buttonVariants({ variant, size, block, shape }),
+        buttonVariants({ variant, color, size, block, shape }),
         fullWidthOnMobile && !block && "w-full sm:w-auto",
         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 }),
@@ -408,7 +442,7 @@ var Button = ({
       confirmOk: props.confirm.confirmOk,
       confirmCancel: props.confirm.confirmCancel,
       confirmColor: props.confirm.confirmColor,
-      onConfirm: handleClick,
+      onConfirm: handleConfirm,
       children: button
     }
   );
@@ -421,6 +455,7 @@ var ConfirmButton = (props) => /* @__PURE__ */ jsxRuntime.jsx(
     disabled: props.disabled,
     loading: props.loading,
     variant: props.variant,
+    color: props.color,
     size: props.size,
     icon: props.icon,
     className: props.className,