infinity-ui-elements 1.9.6 → 1.9.8

package/dist/index.js

@@ -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: {
@@ -2920,7 +3089,7 @@ const DateRangePicker = React__namespace.forwardRef(({ className, value: control
                                 ? `${window.innerHeight - position.bottom - gap - 10}px`
                                 : `${position.top - gap - 10}px`,
                             overflowY: "auto",
-                        }, className: cn("bg-surface-fill-neutral-intense rounded-large shadow-lg border border-surface-outline-neutral-subtle", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsxs("div", { className: "flex", children: [showPresets && presets.length > 0 && (jsxRuntime.jsx("div", { className: "w-48 border-r border-surface-outline-neutral-subtle p-4 flex flex-col", children: presets.map((preset) => (jsxRuntime.jsx(ListItem, { title: preset.label, type: "single", showChevron: false, isSelected: selectedPreset === preset.value, onClick: () => handlePresetClick(preset), containerClassName: "mb-1 last:mb-0" }, preset.value))) })), jsxRuntime.jsxs("div", { className: "p-4", children: [jsxRuntime.jsxs("div", { className: "flex gap-6", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsx("div", { className: "flex flex-col px-3", children: jsxRuntime.jsx("p", { className: "text-body-small-medium", children: "Start Date" }) }), jsxRuntime.jsxs("div", { className: "flex flex-col p-5 rounded-[8px] bg-surface-fill-neutral-moderate", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3 px-3", children: [jsxRuntime.jsx("h3", { className: "text-body-small-medium font-medium text-surface-ink-neutral-normal", children: formatMonthYear(startMonth) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("button", { onClick: handlePrevStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Previous month", children: jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) }), jsxRuntime.jsx("button", { onClick: handleNextStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Next month", children: jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) })] })] }), jsxRuntime.jsx("div", { className: "date-range-calendar-wrapper", children: jsxRuntime.jsx(Calendar, { onChange: handleStartDateChange, value: tempValue.startDate, minDate: minDateParsed ?? undefined, maxDate: tempValue.endDate
+                        }, className: cn("bg-surface-fill-neutral-intense rounded-large shadow-lg border-[0.5px] border-surface-outline-neutral-subtle", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsxs("div", { className: "flex flex-row p-7 gap-7", children: [showPresets && presets.length > 0 && (jsxRuntime.jsx("div", { className: "w-[160px] flex flex-col gap-2", children: presets.map((preset) => (jsxRuntime.jsx(ListItem, { title: preset.label, type: "single", showChevron: false, isSelected: selectedPreset === preset.value, onClick: () => handlePresetClick(preset), containerClassName: "px-4 py-3" }, preset.value))) })), jsxRuntime.jsxs("div", { className: "flex gap-7", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsx("div", { className: "flex flex-col px-3", children: jsxRuntime.jsx("p", { className: "text-body-small-medium", children: "Start Date" }) }), jsxRuntime.jsxs("div", { className: "flex flex-col p-5 rounded-[8px] bg-surface-fill-neutral-moderate", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3 px-3", children: [jsxRuntime.jsx("h3", { className: "text-body-small-medium font-medium text-surface-ink-neutral-normal", children: formatMonthYear(startMonth) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("button", { onClick: handlePrevStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Previous month", children: jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) }), jsxRuntime.jsx("button", { onClick: handleNextStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Next month", children: jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) })] })] }), jsxRuntime.jsx("div", { className: "date-range-calendar-wrapper", children: jsxRuntime.jsx(Calendar, { onChange: handleStartDateChange, value: tempValue.startDate, minDate: minDateParsed ?? undefined, maxDate: tempValue.endDate
                                                                             ? tempValue.endDate
                                                                             : maxDateParsed ?? undefined, activeStartDate: startMonth, onActiveStartDateChange: ({ activeStartDate, }) => {
                                                                             if (activeStartDate)
@@ -2952,15 +3121,15 @@ const DateRangePicker = React__namespace.forwardRef(({ className, value: control
                                                                                 "SAT",
                                                                             ];
                                                                             return weekdayNames[date.getDay()];
-                                                                        } }) })] })] })] }), jsxRuntime.jsxs("div", { className: "mt-4 pt-4 border-t border-surface-outline-neutral-subtle flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-action-fill-primary-default" }), jsxRuntime.jsx("span", { className: "text-sm text-surface-ink-neutral-normal", children: tempValue.startDate && tempValue.endDate
-                                                                ? isSameDay(tempValue.startDate, tempValue.endDate)
-                                                                    ? "Today"
-                                                                    : `${formatDate(tempValue.startDate)} - ${formatDate(tempValue.endDate)}`
-                                                                : tempValue.startDate
-                                                                    ? `From ${formatDate(tempValue.startDate)}`
-                                                                    : tempValue.endDate
-                                                                        ? `Until ${formatDate(tempValue.endDate)}`
-                                                                        : "No selection" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(Button, { variant: "secondary", color: "neutral", size: "small", onClick: handleCancel, children: "Cancel" }), jsxRuntime.jsx(Button, { variant: "primary", color: "primary", size: "small", onClick: handleApply, children: "Apply date range" })] })] })] })] }) }));
+                                                                        } }) })] })] })] })] }), jsxRuntime.jsxs("div", { className: "border-t-[0.5px] border-surface-outline-neutral-subtle flex  px-8 py-5 items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-action-fill-primary-default" }), jsxRuntime.jsx("span", { className: "text-sm text-surface-ink-neutral-normal", children: tempValue.startDate && tempValue.endDate
+                                                        ? isSameDay(tempValue.startDate, tempValue.endDate)
+                                                            ? "Today"
+                                                            : `${formatDate(tempValue.startDate)} - ${formatDate(tempValue.endDate)}`
+                                                        : tempValue.startDate
+                                                            ? `From ${formatDate(tempValue.startDate)}`
+                                                            : tempValue.endDate
+                                                                ? `Until ${formatDate(tempValue.endDate)}`
+                                                                : "No selection" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(Button, { variant: "secondary", color: "neutral", size: "small", onClick: handleCancel, children: "Cancel" }), jsxRuntime.jsx(Button, { variant: "primary", color: "primary", size: "small", onClick: handleApply, children: "Apply date range" })] })] })] }) }));
                     return reactDom.createPortal(calendarPopup, document.body);
                 })()] }));
 });
@@ -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;