@martinsura/ui 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -323,15 +323,18 @@ 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)",
+        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!"
       },
+      color: {
+        primary: "",
+        success: "",
+        danger: ""
+      },
       size: {
         small: "h-(--ui-h-sm) px-(--ui-px-sm) [font-size:var(--ui-text-sm)] rounded-(--ui-radius-sm)",
         middle: "h-(--ui-h-md) px-(--ui-px-md) [font-size:var(--ui-text-md)] rounded-(--ui-radius-md)",
@@ -347,8 +350,14 @@ var buttonVariants = classVarianceAuthority.cva(
         round: "rounded-full"
       }
     },
+    compoundVariants: [
+      { 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)" }
+    ],
     defaultVariants: {
-      variant: "primary",
+      variant: "filled",
+      color: "primary",
       size: "middle",
       block: false,
       shape: "default"
@@ -361,7 +370,8 @@ var iconSizeMap = {
   large: 18
 };
 var Button = ({
-  variant = "primary",
+  variant = "filled",
+  color = "primary",
   size = "middle",
   shape = "default",
   block = false,
@@ -385,7 +395,7 @@ 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
@@ -421,6 +431,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,
@@ -532,8 +543,18 @@ var NumberInput = ({
   const resolvedErrors = props.errorName ? resolveError(props.errorName) : [];
   const errorDisplay = props.error ?? props.customError ?? (resolvedErrors.length > 0 ? resolvedErrors.join(", ") : void 0);
   const hasError = !!errorDisplay;
+  const [internalValue, setInternalValue] = react.useState(
+    props.value != null ? String(props.value) : ""
+  );
+  const isFocused = react.useRef(false);
+  react.useEffect(() => {
+    if (!isFocused.current) {
+      setInternalValue(props.value != null ? String(props.value) : "");
+    }
+  }, [props.value]);
   const handleChange = (e) => {
     const raw = e.target.value;
+    setInternalValue(raw);
     if (raw === "" || raw === "-") {
       props.onChange?.(null);
       return;
@@ -543,6 +564,13 @@ var NumberInput = ({
       props.onChange?.(num);
     }
   };
+  const handleFocus = () => {
+    isFocused.current = true;
+  };
+  const handleBlur = () => {
+    isFocused.current = false;
+    setInternalValue(props.value != null ? String(props.value) : "");
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(InputField, { noMargin: props.noMargin, className: props.className, children: [
     props.label && /* @__PURE__ */ jsxRuntime.jsx(
       InputLabel,
@@ -558,11 +586,13 @@ var NumberInput = ({
       {
         type: "number",
         placeholder: props.placeholder,
-        value: props.value ?? "",
+        value: internalValue,
         disabled: props.disabled,
         min: props.min,
         max: props.max,
         onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         className: tailwindMerge.twMerge(
           numberInputClass,
           inputSizeClasses[size],