infinity-ui-elements 1.9.7 → 1.9.9

package/dist/index.js

@@ -519,7 +519,7 @@ const Button = React__namespace.forwardRef(({ className, variant = "primary", co
         }
         return `var(--color-action-ink-${color}-normal)`;
     };
-    const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading && !isIconOnly && (jsxRuntime.jsx(reactSpinners.PulseLoader, { color: getLoaderColor(), size: 10 })), isLoading && isIconOnly && (jsxRuntime.jsx(reactSpinners.ClipLoader, { color: getLoaderColor(), size: 20 })), !isLoading && leadingIcon && (jsxRuntime.jsx("span", { className: "mr-2", children: leadingIcon })), !isIconOnly && !isLoading && children, isIconOnly && !isLoading && children, !isLoading && trailingIcon && jsxRuntime.jsx("span", { children: trailingIcon })] }));
+    const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading && !isIconOnly && (jsxRuntime.jsx(reactSpinners.PulseLoader, { color: getLoaderColor(), size: 10 })), isLoading && isIconOnly && (jsxRuntime.jsx(reactSpinners.ClipLoader, { color: getLoaderColor(), size: 20 })), !isLoading && leadingIcon && jsxRuntime.jsx("span", { children: leadingIcon }), !isIconOnly && !isLoading && children, isIconOnly && !isLoading && children, !isLoading && trailingIcon && jsxRuntime.jsx("span", { children: trailingIcon })] }));
     return (jsxRuntime.jsx(Comp, { className: cn(buttonVariants({
             variant,
             color,
@@ -1676,6 +1676,175 @@ const Checkbox = React__namespace.forwardRef(({ label, errorText, size = "medium
 });
 Checkbox.displayName = "Checkbox";
 
+const chipVariants = classVarianceAuthority.cva("inline-flex items-center justify-center whitespace-nowrap rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none", {
+    variants: {
+        intent: {
+            primary: "",
+            positive: "",
+            negative: "",
+        },
+        selection: {
+            default: "",
+            light: "",
+            intense: "",
+        },
+        size: {
+            xsmall: "h-[24px] px-3 gap-2 text-body-small-medium",
+            small: "h-[28px] px-4 gap-2 text-body-medium-medium",
+            medium: "h-[36px] px-5 gap-3 text-body-large-medium",
+            large: "h-[44px] px-6 gap-3 text-heading-medium-medium",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed",
+            false: "cursor-pointer",
+        },
+    },
+    compoundVariants: [
+        // Selection: default (neutral chip, intent influences focus ring/border)
+        {
+            selection: "default",
+            class: `
+          bg-surface-fill-neutral-intense
+          text-action-ink-neutral-normal
+          border-action-outline-neutral-faded
+          hover:bg-action-fill-neutral-faded-hover
+          hover:border-action-outline-neutral-faded-hover
+          active:bg-action-fill-neutral-faded-activated
+          active:border-action-outline-neutral-faded-activated
+          disabled:bg-surface-fill-neutral-moderate
+          disabled:text-surface-ink-neutral-disabled
+          disabled:border-action-outline-neutral-disabled
+        `,
+        },
+        {
+            selection: "default",
+            intent: "primary",
+            class: "focus-visible:ring-action-outline-primary-faded-hover focus-visible:border-action-outline-primary-faded-hover",
+        },
+        {
+            selection: "default",
+            intent: "positive",
+            class: "focus-visible:ring-action-outline-positive-faded-hover focus-visible:border-action-outline-positive-faded-hover",
+        },
+        {
+            selection: "default",
+            intent: "negative",
+            class: "focus-visible:ring-action-outline-negative-faded-hover focus-visible:border-action-outline-negative-faded-hover",
+        },
+        // Selection: light
+        {
+            selection: "light",
+            intent: "primary",
+            class: `
+          bg-action-fill-primary-faded
+          text-action-ink-primary-normal
+          border-action-outline-primary-faded
+          hover:bg-action-fill-primary-faded-hover
+          hover:border-action-outline-primary-faded-hover
+          active:bg-action-fill-primary-faded-activated
+          active:border-action-outline-primary-faded-activated
+          focus-visible:ring-action-outline-primary-faded-hover
+          disabled:bg-action-fill-primary-disabled
+          disabled:text-action-ink-primary-disabled
+          disabled:border-action-outline-primary-disabled
+        `,
+        },
+        {
+            selection: "light",
+            intent: "positive",
+            class: `
+          bg-action-fill-positive-faded
+          text-action-ink-positive-normal
+          border-action-outline-positive-faded
+          hover:bg-action-fill-positive-faded-hover
+          hover:border-action-outline-positive-faded-hover
+          active:bg-action-fill-positive-faded-activated
+          active:border-action-outline-positive-faded-activated
+          focus-visible:ring-action-outline-positive-faded-hover
+          disabled:bg-action-fill-positive-disabled
+          disabled:text-action-ink-positive-disabled
+          disabled:border-action-outline-positive-disabled
+        `,
+        },
+        {
+            selection: "light",
+            intent: "negative",
+            class: `
+          bg-action-fill-negative-faded
+          text-action-ink-negative-normal
+          border-action-outline-negative-faded
+          hover:bg-action-fill-negative-faded-hover
+          hover:border-action-outline-negative-faded-hover
+          active:bg-action-fill-negative-faded-activated
+          active:border-action-outline-negative-faded-activated
+          focus-visible:ring-action-outline-negative-faded-hover
+          disabled:bg-action-fill-negative-disabled
+          disabled:text-action-ink-negative-disabled
+          disabled:border-action-outline-negative-disabled
+        `,
+        },
+        // Selection: intense
+        {
+            selection: "intense",
+            intent: "primary",
+            class: `
+          bg-action-fill-primary-default
+          text-action-ink-on-primary-normal
+          border-transparent
+          hover:bg-action-fill-primary-hover
+          active:bg-action-fill-primary-activated
+          focus-visible:ring-action-outline-primary-faded-hover
+          disabled:bg-action-fill-primary-disabled
+          disabled:text-action-ink-primary-disabled
+        `,
+        },
+        {
+            selection: "intense",
+            intent: "positive",
+            class: `
+          bg-action-fill-positive-default
+          text-action-ink-on-primary-normal
+          border-transparent
+          hover:bg-action-fill-positive-hover
+          active:bg-action-fill-positive-activated
+          focus-visible:ring-action-outline-positive-faded-hover
+          disabled:bg-action-fill-positive-disabled
+          disabled:text-action-ink-positive-disabled
+        `,
+        },
+        {
+            selection: "intense",
+            intent: "negative",
+            class: `
+          bg-action-fill-negative-default
+          text-action-ink-on-primary-normal
+          border-transparent
+          hover:bg-action-fill-negative-hover
+          active:bg-action-fill-negative-activated
+          focus-visible:ring-action-outline-negative-faded-hover
+          disabled:bg-action-fill-negative-disabled
+          disabled:text-action-ink-negative-disabled
+        `,
+        },
+    ],
+    defaultVariants: {
+        intent: "primary",
+        selection: "default",
+        size: "medium",
+        isDisabled: false,
+    },
+});
+const Chip = React__namespace.forwardRef(({ className, intent = "primary", selection = "default", size = "medium", isDisabled = false, leadingComponent, trailingComponent, disabled, children, type, ...props }, ref) => {
+    const finalDisabled = Boolean(disabled || isDisabled);
+    return (jsxRuntime.jsxs("button", { ref: ref, type: type ?? "button", disabled: finalDisabled, className: cn(chipVariants({
+            intent,
+            selection,
+            size,
+            isDisabled: finalDisabled,
+        }), className), ...props, children: [leadingComponent && (jsxRuntime.jsx("span", { className: "inline-flex items-center", children: leadingComponent })), jsxRuntime.jsx("span", { className: "inline-flex items-center", children: children }), trailingComponent && (jsxRuntime.jsx("span", { className: "inline-flex items-center", children: trailingComponent }))] }));
+});
+Chip.displayName = "Chip";
+
 const counterVariants = classVarianceAuthority.cva("inline-flex items-center justify-center  transition-colors", {
     variants: {
         size: {
@@ -5982,6 +6151,7 @@ exports.Badge = Badge;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Checkbox = Checkbox;
+exports.Chip = Chip;
 exports.Counter = Counter;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
@@ -6025,6 +6195,7 @@ exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
 exports.checkboxVariants = checkboxVariants;
+exports.chipVariants = chipVariants;
 exports.cn = cn;
 exports.counterVariants = counterVariants;
 exports.datePickerVariants = datePickerVariants;