infinity-ui-elements 1.4.0 → 1.4.1-beta.1

package/dist/index.esm.js

@@ -1,10 +1,10 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { PulseLoader, ClipLoader } from 'react-spinners';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { PulseLoader, ClipLoader } from 'react-spinners';
 
 // Define patterns for custom classes that should be preserved
 // This approach is more scalable than hardcoding individual class names
@@ -45,6 +45,132 @@ function cn(...inputs) {
     return clsx(mergedStandard, customClasses);
 }
 
+const badgeVariants = cva("inline-flex items-center whitespace-nowrap transition-colors", {
+    variants: {
+        variant: {
+            light: "",
+            filled: "",
+        },
+        color: {
+            primary: "",
+            positive: "",
+            negative: "",
+            notice: "",
+            info: "",
+            neutral: "",
+        },
+        size: {
+            small: "px-2 h-[var(--size-20)]  gap-2 rounded-large text-body-small-medium",
+            medium: "px-3 h-[var(--size-24)]  gap-3 rounded-large text-body-medium-medium",
+            large: "px-4 h-[var(--size-28)] gap-3 rounded-xlarge text-body-large-medium",
+        },
+    },
+    compoundVariants: [
+        // Light variant colors
+        {
+            variant: "light",
+            color: "primary",
+            class: "bg-action-fill-primary-faded text-action-ink-primary-normal",
+        },
+        {
+            variant: "light",
+            color: "positive",
+            class: "bg-action-fill-positive-faded text-action-ink-positive-normal",
+        },
+        {
+            variant: "light",
+            color: "negative",
+            class: "bg-action-fill-negative-faded text-action-ink-negative-normal",
+        },
+        {
+            variant: "light",
+            color: "notice",
+            class: "bg-action-fill-notice-faded text-action-ink-notice-normal",
+        },
+        {
+            variant: "light",
+            color: "info",
+            class: "bg-action-fill-info-faded text-action-ink-info-normal",
+        },
+        {
+            variant: "light",
+            color: "neutral",
+            class: "bg-action-fill-neutral-faded text-action-ink-neutral-normal",
+        },
+        // Filled variant colors
+        {
+            variant: "filled",
+            color: "primary",
+            class: "bg-action-fill-primary-default text-action-ink-on-primary-normal",
+        },
+        {
+            variant: "filled",
+            color: "positive",
+            class: "bg-action-fill-positive-default text-action-ink-on-primary-normal",
+        },
+        {
+            variant: "filled",
+            color: "negative",
+            class: "bg-action-fill-negative-default text-action-ink-on-primary-normal",
+        },
+        {
+            variant: "filled",
+            color: "notice",
+            class: "bg-action-fill-notice-default text-action-ink-on-primary-normal",
+        },
+        {
+            variant: "filled",
+            color: "info",
+            class: "bg-action-fill-info-default text-action-ink-on-primary-normal",
+        },
+        {
+            variant: "filled",
+            color: "neutral",
+            class: "bg-action-fill-neutral-default text-action-ink-on-primary-normal",
+        },
+    ],
+    defaultVariants: {
+        variant: "light",
+        color: "info",
+        size: "medium",
+    },
+});
+const Badge = React.forwardRef(({ className, variant, size, color, showDot = false, children, ...props }, ref) => {
+    const getDotColor = () => {
+        if (variant === "filled") {
+            return "bg-action-ink-on-primary-normal";
+        }
+        // Light variant - use the corresponding action color
+        switch (color) {
+            case "primary":
+                return "bg-action-fill-primary-default";
+            case "positive":
+                return "bg-action-fill-positive-default";
+            case "negative":
+                return "bg-action-fill-negative-default";
+            case "notice":
+                return "bg-action-fill-notice-default";
+            case "info":
+                return "bg-action-fill-info-default";
+            case "neutral":
+                return "bg-action-fill-neutral-default";
+            default:
+                return "bg-action-fill-info-default";
+        }
+    };
+    const getDotSize = () => {
+        if (size === "small") {
+            return "h-2 w-2";
+        }
+        if (size === "medium") {
+            return "h-[6px] w-[6px]";
+        }
+        return "h-3 w-3";
+    };
+    return (jsxs("div", { ref: ref, className: cn(badgeVariants({ variant, size, color }), className), ...props, children: [showDot && (jsx("span", { className: cn("rounded-full", getDotColor(), getDotSize()), "aria-hidden": "true" })), children] }));
+});
+Badge.displayName = "Badge";
+
 const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none", {
     variants: {
         variant: {
@@ -492,7 +618,7 @@ function hasIcon(name) {
     return name in iconRegistry;
 }
 
-const checkboxVariants = cva("relative inline-flex items-center justify-center shrink-0 border transition-all cursor-pointer", {
+const checkboxVariants = cva("relative inline-flex items-center justify-center shrink-0 transition-all cursor-pointer", {
     variants: {
         size: {
             small: "w-[14px] h-[14px] rounded-small border-[1.5px]",
@@ -529,7 +655,7 @@ const checkboxVariants = cva("relative inline-flex items-center justify-center s
             isChecked: true,
             validationState: "none",
             isDisabled: false,
-            class: "bg-action-fill-primary-hover border-surface-outline-neutral-muted",
+            class: "bg-action-fill-primary-default hover:bg-action-fill-primary-hover hover:border-action-fill-primary-hover border-action-fill-primary-default",
         },
         // Checked or Indeterminate state - error validation
         {
@@ -565,6 +691,7 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
     const [internalChecked, setInternalChecked] = React.useState(false);
     const [showRipple, setShowRipple] = React.useState(false);
     const inputRef = React.useRef(null);
+    const rippleTimeoutRef = React.useRef(null);
     // Use forwarded ref or internal ref
     React.useImperativeHandle(ref, () => inputRef.current);
     const isChecked = checked !== undefined ? checked : internalChecked;
@@ -574,6 +701,14 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
             inputRef.current.indeterminate = isIndeterminate;
         }
     }, [isIndeterminate]);
+    // Cleanup timeout on unmount
+    React.useEffect(() => {
+        return () => {
+            if (rippleTimeoutRef.current) {
+                clearTimeout(rippleTimeoutRef.current);
+            }
+        };
+    }, []);
     const handleChange = (e) => {
         if (onChange) {
             onChange(e);
@@ -583,31 +718,28 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
         }
     };
     const triggerRipple = () => {
-        if (!isDisabled) {
+        if (!isDisabled && !showRipple) {
+            // Clear any existing timeout
+            if (rippleTimeoutRef.current) {
+                clearTimeout(rippleTimeoutRef.current);
+            }
             setShowRipple(true);
-            setTimeout(() => {
+            rippleTimeoutRef.current = setTimeout(() => {
                 setShowRipple(false);
-            }, 360); // Match animation duration (0.36s)
+                rippleTimeoutRef.current = null;
+            }, 400); // Match animation duration (0.4s)
         }
     };
     const handleContainerClick = () => {
         if (!isDisabled && inputRef.current) {
-            // Only show ripple when checking (not unchecking)
-            const willBeChecked = !isChecked && !isIndeterminate;
-            if (willBeChecked) {
-                triggerRipple();
-            }
+            triggerRipple();
             inputRef.current.click();
         }
     };
     const handleKeyDown = (e) => {
         if ((e.key === " " || e.key === "Enter") && !isDisabled) {
             e.preventDefault();
-            // Only show ripple when checking (not unchecking)
-            const willBeChecked = !isChecked && !isIndeterminate;
-            if (willBeChecked) {
-                triggerRipple();
-            }
+            triggerRipple();
             inputRef.current?.click();
         }
     };
@@ -648,6 +780,215 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
 });
 Checkbox.displayName = "Checkbox";
 
+const counterVariants = cva("inline-flex items-center justify-center  transition-colors", {
+    variants: {
+        size: {
+            small: "text-body-xsmall-medium rounded-small px-1 py-0.5 min-w-[20px] h-[16px]",
+            medium: "text-body-small-medium rounded-medium px-2 py-1 min-w-[24px] h-[20px]",
+            large: "text-body-medium-medium rounded-medium px-2 py-1 min-w-[28px] h-[24px]",
+        },
+        color: {
+            positive: "",
+            negative: "",
+            notice: "",
+            information: "",
+            neutral: "",
+            primary: "",
+        },
+        emphasis: {
+            subtle: "",
+            intense: "",
+        },
+    },
+    compoundVariants: [
+        // Positive - Subtle
+        {
+            color: "positive",
+            emphasis: "subtle",
+            class: "bg-feedback-fill-positive-subtle text-feedback-ink-positive-intense",
+        },
+        // Positive - Intense
+        {
+            color: "positive",
+            emphasis: "intense",
+            class: "bg-feedback-fill-positive-intense text-action-ink-on-primary-normal",
+        },
+        // Negative - Subtle
+        {
+            color: "negative",
+            emphasis: "subtle",
+            class: "bg-feedback-fill-negative-subtle text-feedback-ink-negative-subtle",
+        },
+        // Negative - Intense
+        {
+            color: "negative",
+            emphasis: "intense",
+            class: "bg-feedback-fill-negative-intense text-action-ink-on-primary-normal",
+        },
+        // Notice - Subtle
+        {
+            color: "notice",
+            emphasis: "subtle",
+            class: "bg-feedback-fill-notice-subtle text-feedback-ink-notice-subtle",
+        },
+        // Notice - Intense
+        {
+            color: "notice",
+            emphasis: "intense",
+            class: "bg-feedback-fill-notice-intense text-action-ink-on-primary-normal",
+        },
+        // Information - Subtle
+        {
+            color: "information",
+            emphasis: "subtle",
+            class: "bg-feedback-fill-info-subtle text-feedback-ink-info-subtle",
+        },
+        // Information - Intense
+        {
+            color: "information",
+            emphasis: "intense",
+            class: "bg-feedback-fill-info-intense text-action-ink-on-primary-normal",
+        },
+        // Neutral - Subtle
+        {
+            color: "neutral",
+            emphasis: "subtle",
+            class: "bg-surface-fill-neutral-subtle text-surface-ink-neutral-normal",
+        },
+        // Neutral - Intense
+        {
+            color: "neutral",
+            emphasis: "intense",
+            class: "bg-feedback-fill-neutral-intense text-action-ink-on-primary-normal",
+        },
+        // Primary - Subtle
+        {
+            color: "primary",
+            emphasis: "subtle",
+            class: "bg-surface-fill-primary-moderate text-surface-ink-primary-normal",
+        },
+        // Primary - Intense
+        {
+            color: "primary",
+            emphasis: "intense",
+            class: "bg-surface-fill-primary-intense text-action-ink-on-primary-normal",
+        },
+    ],
+    defaultVariants: {
+        size: "medium",
+        color: "neutral",
+        emphasis: "subtle",
+    },
+});
+const Counter = React.forwardRef(({ value, max, size = "medium", color = "neutral", emphasis = "subtle", className, ...props }, ref) => {
+    // Handle max value logic
+    const displayValue = React.useMemo(() => {
+        if (max !== undefined && typeof value === "number" && value > max) {
+            return `${max}+`;
+        }
+        return value;
+    }, [value, max]);
+    return (jsx("span", { ref: ref, className: cn(counterVariants({
+            size,
+            color,
+            emphasis,
+        }), className), ...props, children: displayValue }));
+});
+Counter.displayName = "Counter";
+
+const dividerVariants = cva("", {
+    variants: {
+        orientation: {
+            horizontal: "w-full",
+            vertical: "h-full",
+        },
+        thickness: {
+            thinner: "",
+            thin: "",
+            thick: "",
+            thicker: "",
+        },
+        lineStyle: {
+            solid: "border-solid",
+            dashed: "border-dashed",
+        },
+        variant: {
+            normal: "",
+            subtle: "",
+            muted: "",
+        },
+    },
+    compoundVariants: [
+        // Horizontal orientation with thickness
+        {
+            orientation: "horizontal",
+            thickness: "thinner",
+            class: "border-t-[0.5px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thin",
+            class: "border-t-[1px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thick",
+            class: "border-t-[2px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thicker",
+            class: "border-t-[3px]",
+        },
+        // Vertical orientation with thickness
+        {
+            orientation: "vertical",
+            thickness: "thinner",
+            class: "border-l-[0.5px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thin",
+            class: "border-l-[1px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thick",
+            class: "border-l-[2px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thicker",
+            class: "border-l-[3px]",
+        },
+        // Normal variant colors
+        {
+            variant: "normal",
+            class: "border-surface-outline-neutral-normal",
+        },
+        // Subtle variant colors
+        {
+            variant: "subtle",
+            class: "border-surface-outline-neutral-subtle",
+        },
+        // Muted variant colors
+        {
+            variant: "muted",
+            class: "border-surface-outline-neutral-muted",
+        },
+    ],
+    defaultVariants: {
+        orientation: "horizontal",
+        thickness: "thin",
+        lineStyle: "solid",
+        variant: "normal",
+    },
+});
+const Divider = React.forwardRef(({ className, orientation = "horizontal", thickness = "thin", lineStyle = "solid", variant = "normal", ...props }, ref) => {
+    return (jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cn(dividerVariants({ orientation, thickness, lineStyle, variant }), className), ...props }));
+});
+Divider.displayName = "Divider";
+
 const tooltipVariants = cva("fixed z-50 bg-popup-fill-intense text-action-ink-on-primary-normal rounded-medium border border-popup-outline-subtle flex flex-col  p-4 rounded-xlarge min-w-[200px] max-w-[300px] transition-opacity duration-200", {
     variants: {
         isVisible: {
@@ -902,6 +1243,389 @@ const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = fals
 });
 FormHeader.displayName = "FormHeader";
 
+const listItemVariants = cva("flex items-start gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
+    variants: {
+        variant: {
+            default: `hover:bg-action-fill-neutral-faded
+          focus:bg-action-fill-neutral-faded
+          focus:ring-2
+          ring-action-outline-primary-faded-hover
+          border border-transparent
+          `,
+            bordered: "border border-action-outline-primary-faded hover:bg-surface-fill-primary-subtle",
+            primary: `hover:bg-action-fill-neutral-faded
+          focus:bg-action-fill-neutral-faded 
+          focus:ring-2 
+          ring-action-outline-primary-faded-hover
+          border border-transparent
+          `,
+            negative: `hover:bg-action-fill-negative-faded 
+          focus:bg-action-fill-negative-faded 
+          focus:ring-2 ring-action-outline-negative-faded-hover
+          border border-transparent
+          `,
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-60",
+            false: "",
+        },
+        isSelected: {
+            true: "bg-action-fill-primary-faded border-action-outline-primary-faded",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        isDisabled: false,
+        isSelected: false,
+    },
+});
+const ChevronRightIcon = ({ className }) => (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ListItem = React.forwardRef(({ className, type = "single", leadingIcon, title, description, trailingIcon, showChevron = true, variant = "default", isDisabled = false, isSelected = false, onSelectionChange, checkboxSize = "small", containerClassName, contentClassName, onClick, ...props }, ref) => {
+    const [internalSelected, setInternalSelected] = React.useState(isSelected);
+    // Sync internal state with prop
+    React.useEffect(() => {
+        setInternalSelected(isSelected);
+    }, [isSelected]);
+    const handleClick = (e) => {
+        if (isDisabled)
+            return;
+        if (type === "multiple") {
+            const newSelected = !internalSelected;
+            setInternalSelected(newSelected);
+            onSelectionChange?.(newSelected);
+        }
+        onClick?.(e);
+    };
+    const handleCheckboxChange = (e) => {
+        e.stopPropagation();
+        if (isDisabled)
+            return;
+        const newSelected = e.target.checked;
+        setInternalSelected(newSelected);
+        onSelectionChange?.(newSelected);
+    };
+    return (jsxs("div", { ref: ref, className: cn(listItemVariants({
+            variant,
+            isDisabled,
+            isSelected: type === "multiple" ? internalSelected : false,
+        }), containerClassName), onClick: handleClick, role: type === "multiple" ? "checkbox" : "button", "aria-checked": type === "multiple" ? internalSelected : undefined, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, ...props, children: [type === "multiple" && (jsx(Checkbox, { checked: internalSelected, onChange: handleCheckboxChange, isDisabled: isDisabled, size: checkboxSize, className: "shrink-0 mt-0.5" })), leadingIcon && (jsx("div", { className: cn(`shrink-0 flex items-center justify-center mt-0.5`, variant === "primary"
+                    ? "text-action-ink-primary-normal"
+                    : variant === "negative"
+                        ? "text-action-ink-negative-normal"
+                        : "text-action-ink-neutral-subtle", isDisabled && "text-surface-ink-neutral-disabled"), children: leadingIcon })), jsxs("div", { className: cn("flex-1 min-w-0 flex flex-col justify-center", contentClassName), children: [jsx("div", { className: cn("text-body-medium-regular truncate", variant === "primary"
+                            ? "text-action-ink-primary-normal"
+                            : variant === "negative"
+                                ? "text-action-ink-negative-normal"
+                                : "text-action-ink-neutral-normal", isDisabled && "text-surface-ink-neutral-disabled"), children: title }), description && (jsx("div", { className: cn("text-body-small-regular text-surface-ink-neutral-muted mt-0.5 line-clamp-2", isDisabled && "text-surface-ink-neutral-disabled"), children: description }))] }), (trailingIcon || showChevron) && (jsx("div", { className: "shrink-0 self-center text-action-ink-neutral-subtle", children: trailingIcon || jsx(ChevronRightIcon, {}) }))] }));
+});
+ListItem.displayName = "ListItem";
+
+const radioVariants = cva("relative inline-flex items-center justify-center shrink-0 border transition-all cursor-pointer rounded-full", {
+    variants: {
+        size: {
+            small: "w-[14px] h-[14px] border-[1.5px]",
+            medium: "w-[16px] h-[16px] border-[1.5px]",
+            large: "w-[20px] h-[20px] border-[2px]",
+        },
+        validationState: {
+            none: "",
+            error: "border-action-outline-negative-default hover:border-action-outline-negative-hover",
+        },
+        isChecked: {
+            true: "",
+            false: "",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-60 border-action-outline-neutral-disabled bg-surface-fill-neutral-subtle",
+            false: "",
+        },
+        isFocused: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // Unchecked state - none validation
+        {
+            isChecked: false,
+            validationState: "none",
+            isDisabled: false,
+            class: `border-action-outline-neutral-faded 
+          hover:bg-action-fill-neutral-faded 
+          hover:border-action-outline-neutral-faded
+          `,
+        },
+        // Checked state - none validation
+        {
+            isChecked: true,
+            validationState: "none",
+            isDisabled: false,
+            class: "bg-action-fill-primary-default hover:bg-action-fill-primary-hover border-action-fill-primary-default hover:border-action-fill-primary-hover",
+        },
+        // Checked state - error validation
+        {
+            isChecked: true,
+            validationState: "error",
+            isDisabled: false,
+            class: "bg-action-fill-negative-default hover:bg-action-fill-negative-hover border-action-fill-negative-default hover:border-action-fill-negative-hover",
+        },
+        // Focused state - none validation
+        {
+            isFocused: true,
+            validationState: "none",
+            isDisabled: false,
+            class: "ring-2 ring-action-outline-primary-faded",
+        },
+        // Focused state - error validation
+        {
+            isFocused: true,
+            validationState: "error",
+            isDisabled: false,
+            class: "ring-2 ring-action-outline-negative-faded",
+        },
+    ],
+    defaultVariants: {
+        size: "medium",
+        validationState: "none",
+        isChecked: false,
+        isDisabled: false,
+        isFocused: false,
+    },
+});
+const Radio = React.forwardRef(({ label, errorText, size = "medium", validationState = "none", isDisabled = false, showErrorText = true, containerClassName, labelClassName, className, checked, onChange, ...props }, ref) => {
+    const [internalChecked, setInternalChecked] = React.useState(false);
+    const [showRipple, setShowRipple] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const inputRef = React.useRef(null);
+    // Use forwarded ref or internal ref
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const isChecked = checked !== undefined ? checked : internalChecked;
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+        else {
+            setInternalChecked(e.target.checked);
+        }
+    };
+    const triggerRipple = () => {
+        if (!isDisabled) {
+            setShowRipple(true);
+            setTimeout(() => {
+                setShowRipple(false);
+            }, 360); // Match animation duration (0.36s)
+        }
+    };
+    const handleContainerClick = () => {
+        if (!isDisabled && inputRef.current) {
+            // Only show ripple when checking (not unchecking)
+            const willBeChecked = !isChecked;
+            if (willBeChecked) {
+                triggerRipple();
+            }
+            inputRef.current.click();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if ((e.key === " " || e.key === "Enter") && !isDisabled) {
+            e.preventDefault();
+            // Only show ripple when checking (not unchecking)
+            const willBeChecked = !isChecked;
+            if (willBeChecked) {
+                triggerRipple();
+            }
+            inputRef.current?.click();
+        }
+    };
+    const handleFocus = () => {
+        if (!isDisabled) {
+            setIsFocused(true);
+        }
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+    };
+    // Size-based configurations
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+            labelSize: "text-body-small-regular",
+            innerCircleSize: 6,
+        },
+        medium: {
+            gap: "gap-2.5",
+            labelSize: "text-body-medium-regular",
+            innerCircleSize: 7,
+        },
+        large: {
+            gap: "gap-3",
+            labelSize: "text-body-large-regular",
+            innerCircleSize: 8,
+        },
+    };
+    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, onFocus: handleFocus, onBlur: handleBlur, role: "radio", "aria-checked": isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "radio", 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)",
+                                } })), jsx("div", { className: cn(radioVariants({
+                                    size,
+                                    validationState,
+                                    isChecked,
+                                    isDisabled,
+                                    isFocused,
+                                }), className), children: isChecked && (jsx("div", { className: "rounded-full bg-white transition-all", style: {
+                                        width: `${config.innerCircleSize}px`,
+                                        height: `${config.innerCircleSize}px`,
+                                    } })) })] }), label && (jsx("label", { className: cn(config.labelSize, "select-none inline-flex items-center", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : "text-surface-ink-neutral-normal", labelClassName), children: label }))] }), shouldShowError && (jsx(FormFooter, { helperText: errorText, validationState: "negative", size: size, isDisabled: isDisabled }))] }));
+});
+Radio.displayName = "Radio";
+
+const switchVariants = cva("relative inline-flex items-center shrink-0 cursor-pointer rounded-full transition-all duration-200", {
+    variants: {
+        size: {
+            small: "w-[20px] h-[12px]",
+            medium: "w-[28px] h-[16px]",
+            large: "w-[36px] h-[20px]",
+        },
+        isChecked: {
+            true: "bg-action-fill-primary-default ",
+            false: "bg-surface-fill-neutral-subtle",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-60",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            isChecked: true,
+            isDisabled: false,
+            class: "hover:bg-action-fill-primary-hover ",
+        },
+        {
+            isChecked: false,
+            isDisabled: false,
+            class: "hover:bg-action-fill-neutral-faded",
+        },
+    ],
+    defaultVariants: {
+        size: "medium",
+        isChecked: false,
+        isDisabled: false,
+    },
+});
+const switchThumbVariants = cva("inline-block rounded-full bg-neutral-00 shadow-sm transition-transform duration-200", {
+    variants: {
+        size: {
+            small: "h-[8px] w-[8px]",
+            medium: "h-[12px] w-[12px]",
+            large: "h-[16px] w-[16px]",
+        },
+        isChecked: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // Small size translations
+        {
+            size: "small",
+            isChecked: false,
+            class: "translate-x-[2px]",
+        },
+        {
+            size: "small",
+            isChecked: true,
+            class: "translate-x-[10px]",
+        },
+        // Medium size translations
+        {
+            size: "medium",
+            isChecked: false,
+            class: "translate-x-[2px]",
+        },
+        {
+            size: "medium",
+            isChecked: true,
+            class: "translate-x-[14px]",
+        },
+        // Large size translations
+        {
+            size: "large",
+            isChecked: false,
+            class: "translate-x-[2px]",
+        },
+        {
+            size: "large",
+            isChecked: true,
+            class: "translate-x-[18px]",
+        },
+    ],
+    defaultVariants: {
+        size: "medium",
+        isChecked: false,
+    },
+});
+const Switch = React.forwardRef(({ label, size = "medium", isDisabled = false, containerClassName, labelClassName, trackClassName, thumbClassName, className, checked, onChange, ...props }, ref) => {
+    const [internalChecked, setInternalChecked] = React.useState(false);
+    const inputRef = React.useRef(null);
+    // Use forwarded ref or internal ref
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const isChecked = checked !== undefined ? checked : internalChecked;
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+        else {
+            setInternalChecked(e.target.checked);
+        }
+    };
+    const handleContainerClick = () => {
+        if (!isDisabled && inputRef.current) {
+            inputRef.current.click();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if ((e.key === " " || e.key === "Enter") && !isDisabled) {
+            e.preventDefault();
+            inputRef.current?.click();
+        }
+    };
+    // Size-based configurations
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+            labelSize: "text-body-small-regular",
+        },
+        medium: {
+            gap: "gap-2.5",
+            labelSize: "text-body-medium-regular",
+        },
+        large: {
+            gap: "gap-3",
+            labelSize: "text-body-large-regular",
+        },
+    };
+    const config = sizeConfig[size];
+    return (jsx("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: "switch", "aria-checked": isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "checkbox", role: "switch", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsx("div", { className: "relative inline-flex shrink-0", children: jsx("div", { className: cn(switchVariants({
+                            size,
+                            isChecked,
+                            isDisabled,
+                        }), trackClassName, className, "focus-visible:ring-2 focus-visible:ring-action-outline-primary-faded focus-visible:ring-offset-2"), children: jsx("span", { className: cn(switchThumbVariants({
+                                size,
+                                isChecked,
+                            }), thumbClassName) }) }) }), label && (jsx("label", { className: cn(config.labelSize, "select-none inline-flex items-center", isDisabled
+                        ? "text-surface-ink-neutral-disabled"
+                        : "text-surface-ink-neutral-normal", labelClassName), children: label }))] }) }));
+});
+Switch.displayName = "Switch";
+
 const textAreaVariants = cva("relative flex flex-col border rounded-medium transition-all font-display font-size-100 leading-100", {
     variants: {
         size: {
@@ -911,19 +1635,17 @@ const textAreaVariants = cva("relative flex flex-col border rounded-medium trans
         },
         validationState: {
             none: `
-        border-action-outline-neutral-default 
+        border-action-outline-neutral-faded 
         hover:border-action-outline-primary-hover 
         focus-within:border-action-outline-primary-hover 
         focus-within:ring-2 
         ring-action-outline-primary-faded-hover`,
             positive: `
           border-action-outline-positive-default 
-          hover:border-action-outline-positive-hover
           focus-within:border-action-outline-positive-hover
           focus-within:ring-2
           ring-action-outline-positive-faded-hover`,
             negative: `border-action-outline-negative-default 
-          hover:border-action-outline-negative-hover 
           focus-within:border-action-outline-negative-hover
           focus-within:ring-2 
           ring-action-outline-negative-faded-hover`,
@@ -970,7 +1692,18 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
     // Check if we're approaching or at the limit
     const isNearLimit = maxChar && currentLength >= maxChar * 0.9;
     const isAtLimit = maxChar && currentLength >= maxChar;
-    return (jsxs("div", { className: cn("w-full flex flex-col gap-3", 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({
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+        },
+        medium: {
+            gap: "gap-2",
+        },
+        large: {
+            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({
                     size,
                     validationState: currentValidationState,
                     isDisabled,
@@ -1088,5 +1821,5 @@ const TextField = React.forwardRef(({ label, helperText, errorText, successText,
 });
 TextField.displayName = "TextField";
 
-export { Button, Checkbox, FormFooter, FormHeader, Icon, Text, TextArea, TextField, Tooltip, buttonVariants, checkboxVariants, cn, getAvailableIcons, hasIcon, iconRegistry, textAreaVariants, textFieldVariants, tooltipVariants };
+export { Badge, Button, Checkbox, Counter, Divider, FormFooter, FormHeader, Icon, ListItem, Radio, Switch, Text, TextArea, TextField, Tooltip, badgeVariants, buttonVariants, checkboxVariants, cn, counterVariants, getAvailableIcons, hasIcon, iconRegistry, listItemVariants, radioVariants, switchVariants, textAreaVariants, textFieldVariants, tooltipVariants };
 //# sourceMappingURL=index.esm.js.map