infinity-ui-elements 1.8.6 → 1.8.8

package/dist/index.esm.js

@@ -1410,12 +1410,12 @@ const FormFooter = React.forwardRef(({ helperText, trailingText, validationState
 });
 FormFooter.displayName = "FormFooter";
 
-const checkboxVariants = cva("relative inline-flex items-center justify-center shrink-0 transition-all cursor-pointer", {
+const checkboxVariants = cva("relative inline-flex items-center justify-center shrink-0 transition-all cursor-pointer box-border", {
     variants: {
         size: {
-            small: "w-[14px] h-[14px] rounded-small border-[1.5px]",
-            medium: "w-[16px] h-[16px] rounded-small border-[1.5px]",
-            large: "w-[20px] h-[20px] rounded-medium border-[2px]",
+            small: "w-[10px] h-[10px] rounded-small border-[1.5px]",
+            medium: "w-[12px] h-[12px] rounded-small border-[1.5px]",
+            large: "w-[16px] h-[16px] rounded-medium border-[2px]",
         },
         validationState: {
             none: "",
@@ -1543,7 +1543,7 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
             iconSize: 10,
         },
         medium: {
-            gap: "gap-2.5",
+            gap: "gap-2",
             labelSize: "text-body-small-regular",
             iconSize: 12,
         },
@@ -1556,7 +1556,7 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
     const config = sizeConfig[size];
     // Determine if we should show the error text
     const shouldShowError = errorText && showErrorText;
-    return (jsxs("div", { className: cn("inline-flex flex-col", containerClassName), children: [jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, role: "checkbox", "aria-checked": isIndeterminate ? "mixed" : isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "checkbox", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsxs("div", { className: "relative inline-flex shrink-0", children: [showRipple && (jsx("div", { className: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none w-full h-full", validationState === "error"
+    return (jsxs("div", { className: cn("inline-flex flex-col px-2", containerClassName), children: [jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, role: "checkbox", "aria-checked": isIndeterminate ? "mixed" : isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "checkbox", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsxs("div", { className: "relative inline-flex shrink-0", children: [showRipple && (jsx("div", { className: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none w-full h-full", validationState === "error"
                                     ? "bg-action-outline-negative-faded"
                                     : "bg-action-outline-primary-faded"), style: {
                                     animation: "var(--animate-checkbox-ripple)",
@@ -2179,7 +2179,7 @@ const Tooltip = React.forwardRef(({ children, heading, description, placement =
 });
 Tooltip.displayName = "Tooltip";
 
-const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = false, isRequired = false, infoHeading, infoDescription, linkText, linkHref, onLinkClick, htmlFor, className, labelClassName, linkClassName, }, ref) => {
+const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = false, isRequired = false, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, linkLeadingIcon, linkTrailingIcon, htmlFor, className, labelClassName, linkClassName, }, ref) => {
     // Size-based configurations
     const sizeConfig = {
         small: {
@@ -2202,7 +2202,9 @@ const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = fals
         },
     };
     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("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 }))] }));
+    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 }) }))] }), LinkComponent
+                ? LinkComponent
+                : linkText && (jsx(Link, { href: linkHref, onClick: onLinkClick, type: "action", color: "primary", size: size === "large" ? "small" : "xsmall", leadingIcon: linkLeadingIcon, trailingIcon: linkTrailingIcon, children: linkText }))] }));
 });
 FormHeader.displayName = "FormHeader";
 
@@ -2293,7 +2295,7 @@ const selectVariants = cva("relative flex items-center gap-2 border rounded-larg
         isDisabled: false,
     },
 });
-const Select = React.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, linkText, linkHref, onLinkClick, ...props }, ref) => {
+const Select = React.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
     const [isOpen, setIsOpen] = React.useState(false);
     const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
@@ -2468,7 +2470,7 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
             gap: "gap-3",
         },
     };
-    return (jsxs("div", { className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { ref: selectRef, className: cn(selectVariants({
+    return (jsxs("div", { className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { ref: selectRef, className: cn(selectVariants({
                     size,
                     validationState: currentValidationState,
                     isDisabled,
@@ -2827,7 +2829,7 @@ const textFieldVariants = cva("relative flex items-center gap-2 border rounded-l
         isDisabled: false,
     },
 });
-const TextField = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, linkText, linkHref, onLinkClick, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
+const TextField = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, LinkComponent, linkText, linkHref, onLinkClick, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
     const [internalValue, setInternalValue] = React.useState("");
     const inputValue = value !== undefined ? value : internalValue;
     const hasValue = inputValue && String(inputValue).length > 0;
@@ -2870,7 +2872,7 @@ const TextField = React.forwardRef(({ label, helperText, errorText, successText,
             gap: "gap-3",
         },
     };
-    return (jsxs("div", { className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { className: cn(textFieldVariants({
+    return (jsxs("div", { className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { className: cn(textFieldVariants({
                     size,
                     validationState: currentValidationState,
                     isDisabled,
@@ -3659,7 +3661,7 @@ const textAreaVariants = cva("relative flex flex-col border rounded-large transi
         isDisabled: false,
     },
 });
-const TextArea = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, maxChar, showCharCount = true, infoDescription, infoHeading, linkText, linkHref, onLinkClick, containerClassName, labelClassName, textAreaClassName, className, value, onChange, rows = 4, ...props }, ref) => {
+const TextArea = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, maxChar, showCharCount = true, infoDescription, infoHeading, LinkComponent, linkText, linkHref, onLinkClick, containerClassName, labelClassName, textAreaClassName, className, value, onChange, rows = 4, ...props }, ref) => {
     const [internalValue, setInternalValue] = React.useState("");
     const textAreaValue = value !== undefined ? value : internalValue;
     const currentLength = String(textAreaValue).length;
@@ -3697,7 +3699,7 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
             gap: "gap-3",
         },
     };
-    return (jsxs("div", { className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsx("div", { className: cn(textAreaVariants({
+    return (jsxs("div", { className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsx("div", { className: cn(textAreaVariants({
                     size,
                     validationState: currentValidationState,
                     isDisabled,