infinity-ui-elements 1.8.4 → 1.8.6

package/dist/index.esm.js

@@ -1372,17 +1372,17 @@ const FormFooter = React.forwardRef(({ helperText, trailingText, validationState
     // Size-based configurations
     const sizeConfig = {
         small: {
-            textSize: "xsmall",
+            textClassName: "text-caption-small-regular",
             iconSize: 12,
             gap: "gap-1",
         },
         medium: {
-            textSize: "small",
+            textClassName: "text-caption-medium-regular",
             iconSize: 14,
             gap: "gap-1",
         },
         large: {
-            textSize: "medium",
+            textClassName: "text-caption-large-regular",
             iconSize: 16,
             gap: "gap-1.5",
         },
@@ -1391,20 +1391,22 @@ const FormFooter = React.forwardRef(({ helperText, trailingText, validationState
     // Determine text color based on validation state and disabled state
     const getTextColor = () => {
         if (isDisabled)
-            return "disabled";
+            return "text-surface-ink-neutral-disabled";
         if (validationState === "positive")
-            return "positive";
+            return "text-feedback-ink-positive-intense";
         if (validationState === "negative")
-            return "negative";
+            return "text-feedback-ink-negative-subtle";
         if (validationState === "default")
-            return "default";
-        return "default";
+            return "text-surface-ink-neutral-subtle";
+        return "text-surface-ink-neutral-subtle";
     };
+    const helperTextColorClass = getTextColor();
+    const trailingTextColorClass = getTextColor();
     // Don't render anything if there's no content
     if (!helperText && !trailingText) {
         return null;
     }
-    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [helperText && (jsxs("div", { className: cn("flex items-center", config.gap), children: [validationState === "positive" && (jsx("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-positive-intense shrink-0", children: jsx("path", { d: "M3 7L6 10L11 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })), validationState === "negative" && (jsxs("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-negative-subtle shrink-0", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1" }), jsx("path", { d: "M7 4V7.5M7 10V9.5", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] })), jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "regular", color: getTextColor(), className: cn("italic font-size-100 leading-100", helperTextClassName), children: helperText })] })), trailingText && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "regular", color: isDisabled ? "disabled" : "muted", className: cn("font-size-100 leading-100 shrink-0", trailingTextClassName), children: trailingText }))] }));
+    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [helperText && (jsxs("div", { className: cn("flex items-center", config.gap), children: [validationState === "positive" && (jsx("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-positive-intense shrink-0", children: jsx("path", { d: "M3 7L6 10L11 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })), validationState === "negative" && (jsxs("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-negative-subtle shrink-0", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1" }), jsx("path", { d: "M7 4V7.5M7 10V9.5", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] })), jsx("span", { className: cn(config.textClassName, helperTextColorClass, "italic font-size-100 leading-100", helperTextClassName), children: helperText })] })), trailingText && (jsx("span", { className: cn(config.textClassName, trailingTextColorClass, "font-size-100 leading-100 shrink-0", trailingTextClassName), children: trailingText }))] }));
 });
 FormFooter.displayName = "FormFooter";
 
@@ -1542,7 +1544,7 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
         },
         medium: {
             gap: "gap-2.5",
-            labelSize: "text-body-medium-regular",
+            labelSize: "text-body-small-regular",
             iconSize: 12,
         },
         large: {
@@ -2181,23 +2183,26 @@ const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = fals
     // Size-based configurations
     const sizeConfig = {
         small: {
-            textSize: "xsmall",
+            textClassName: "text-body-xsmall-semibold",
+            textClassNameRegular: "text-caption-small-regular",
             iconSize: 12,
             gap: "gap-1.5",
         },
         medium: {
-            textSize: "small",
+            textClassName: "text-body-small-semibold",
+            textClassNameRegular: "text-caption-medium-regular",
             iconSize: 14,
             gap: "gap-2",
         },
         large: {
-            textSize: "medium",
+            textClassName: "text-body-medium-semibold",
+            textClassNameRegular: "text-caption-large-regular",
             iconSize: 16,
             gap: "gap-2.5",
         },
     };
     const config = sizeConfig[size];
-    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [jsxs("div", { className: cn("flex items-center", config.gap), children: [jsxs("label", { htmlFor: htmlFor, className: cn("flex items-center", labelClassName), children: [jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "semibold", color: "subtle", children: label }), isRequired && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "semibold", color: "negative", className: "ml-0.5", children: "*" })), isOptional && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "regular", className: "text-surface-ink-neutral-muted italic ml-1", children: "(optional)" }))] }), infoDescription && (jsx(Tooltip, { description: infoDescription, heading: infoHeading, children: jsxs("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-surface-ink-neutral-muted", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1" }), jsx("path", { d: "M7 6V10M7 4.5V4", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }) }))] }), linkText && (jsx("a", { href: linkHref, onClick: onLinkClick, className: cn("text-surface-ink-primary-normal hover:text-surface-ink-primary-hover transition-colors cursor-pointer font-display font-semibold leading-tight shrink-0", size === "small" && "text-xs", size === "medium" && "text-xs", size === "large" && "text-sm", linkClassName), children: linkText }))] }));
+    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [jsxs("div", { className: cn("flex items-center", config.gap), children: [jsxs("label", { htmlFor: htmlFor, className: cn("flex items-center", labelClassName), children: [jsx("span", { className: cn(config.textClassName, "text-surface-neutral-subtle"), children: label }), isRequired && (jsx("span", { className: cn(config.textClassName, "text-color-negative ml-0.5"), children: "*" })), isOptional && (jsx("span", { className: cn(config.textClassNameRegular, "text-surface-neutral-muted italic ml-1"), children: "(optional)" }))] }), infoDescription && (jsx(Tooltip, { description: infoDescription, heading: infoHeading, children: jsx(Icon, { name: "info", size: config.iconSize }) }))] }), linkText && (jsx(Link, { href: linkHref, onClick: onLinkClick, type: "action", color: "primary", size: size === "large" ? "small" : "xsmall", children: linkText }))] }));
 });
 FormHeader.displayName = "FormHeader";
 
@@ -2249,7 +2254,7 @@ const Modal = React.forwardRef(({ isOpen, onClose, title, description, footer, c
 });
 Modal.displayName = "Modal";
 
-const selectVariants = cva("relative flex items-center gap-2 border rounded-medium transition-all font-display font-size-100 leading-100", {
+const selectVariants = cva("relative flex items-center gap-2 border rounded-large transition-all font-display font-size-100 leading-100", {
     variants: {
         size: {
             small: "h-[28px] px-3 text-xs gap-2",
@@ -2442,7 +2447,13 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
     }, [isOpen, value, options, isDisabled, isLoading]);
     // Transform options to dropdown menu items
     const menuItems = options.map((option) => ({
-        ...option,
+        value: option.value,
+        label: option.label ?? String(option.value),
+        description: option.description,
+        leadingIcon: option.leadingIcon,
+        trailingIcon: option.trailingIcon,
+        isDisabled: option.isDisabled,
+        variant: option.variant,
         onClick: () => handleSelect(option),
     }));
     const widthStyle = menuWidth === "full" ? "100%" : menuWidth === "auto" ? "auto" : menuWidth;
@@ -2467,9 +2478,7 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted"), children: prefix })), jsx("span", { className: cn("flex-1 text-left truncate", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: isLoading
-                            ? "Loading..."
-                            : selectedOption?.label || selectedOption?.title || placeholder }), showClearButton && hasValue && !isDisabled && !isLoading && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && !showClearButton && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                                    : "text-surface-ink-neutral-muted"), children: prefix })), jsx("span", { className: cn("flex-1 text-left truncate", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: isLoading ? "Loading..." : selectedOption?.label || placeholder }), showClearButton && hasValue && !isDisabled && !isLoading && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && !showClearButton && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"