infinity-ui-elements 1.9.6 → 1.9.8

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from "./components/Badge";
 export * from "./components/Button";
 export * from "./components/ButtonGroup";
 export * from "./components/Checkbox";
+export * from "./components/Chip";
 export * from "./components/Counter";
 export * from "./components/DatePicker";
 export * from "./components/DateRangePicker";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC"}

package/dist/index.esm.js

@@ -1655,6 +1655,175 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
 });
 Checkbox.displayName = "Checkbox";
 
+const chipVariants = 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.forwardRef(({ className, intent = "primary", selection = "default", size = "medium", isDisabled = false, leadingComponent, trailingComponent, disabled, children, type, ...props }, ref) => {
+    const finalDisabled = Boolean(disabled || isDisabled);
+    return (jsxs("button", { ref: ref, type: type ?? "button", disabled: finalDisabled, className: cn(chipVariants({
+            intent,
+            selection,
+            size,
+            isDisabled: finalDisabled,
+        }), className), ...props, children: [leadingComponent && (jsx("span", { className: "inline-flex items-center", children: leadingComponent })), jsx("span", { className: "inline-flex items-center", children: children }), trailingComponent && (jsx("span", { className: "inline-flex items-center", children: trailingComponent }))] }));
+});
+Chip.displayName = "Chip";
+
 const counterVariants = cva("inline-flex items-center justify-center  transition-colors", {
     variants: {
         size: {
@@ -2899,7 +3068,7 @@ const DateRangePicker = React.forwardRef(({ className, value: controlledValue, d
                                 ? `${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: jsxs("div", { className: "flex", children: [showPresets && presets.length > 0 && (jsx("div", { className: "w-48 border-r border-surface-outline-neutral-subtle p-4 flex flex-col", children: presets.map((preset) => (jsx(ListItem, { title: preset.label, type: "single", showChevron: false, isSelected: selectedPreset === preset.value, onClick: () => handlePresetClick(preset), containerClassName: "mb-1 last:mb-0" }, preset.value))) })), jsxs("div", { className: "p-4", children: [jsxs("div", { className: "flex gap-6", children: [jsxs("div", { className: "flex flex-col gap-3", children: [jsx("div", { className: "flex flex-col px-3", children: jsx("p", { className: "text-body-small-medium", children: "Start Date" }) }), jsxs("div", { className: "flex flex-col p-5 rounded-[8px] bg-surface-fill-neutral-moderate", children: [jsxs("div", { className: "flex items-center justify-between mb-3 px-3", children: [jsx("h3", { className: "text-body-small-medium font-medium text-surface-ink-neutral-normal", children: formatMonthYear(startMonth) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("button", { onClick: handlePrevStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Previous month", children: jsx(ChevronLeft, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) }), jsx("button", { onClick: handleNextStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Next month", children: jsx(ChevronRight, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) })] })] }), jsx("div", { className: "date-range-calendar-wrapper", children: jsx(Calendar$1, { 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: jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "flex flex-row p-7 gap-7", children: [showPresets && presets.length > 0 && (jsx("div", { className: "w-[160px] flex flex-col gap-2", children: presets.map((preset) => (jsx(ListItem, { title: preset.label, type: "single", showChevron: false, isSelected: selectedPreset === preset.value, onClick: () => handlePresetClick(preset), containerClassName: "px-4 py-3" }, preset.value))) })), jsxs("div", { className: "flex gap-7", children: [jsxs("div", { className: "flex flex-col gap-3", children: [jsx("div", { className: "flex flex-col px-3", children: jsx("p", { className: "text-body-small-medium", children: "Start Date" }) }), jsxs("div", { className: "flex flex-col p-5 rounded-[8px] bg-surface-fill-neutral-moderate", children: [jsxs("div", { className: "flex items-center justify-between mb-3 px-3", children: [jsx("h3", { className: "text-body-small-medium font-medium text-surface-ink-neutral-normal", children: formatMonthYear(startMonth) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("button", { onClick: handlePrevStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Previous month", children: jsx(ChevronLeft, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) }), jsx("button", { onClick: handleNextStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Next month", children: jsx(ChevronRight, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) })] })] }), jsx("div", { className: "date-range-calendar-wrapper", children: jsx(Calendar$1, { onChange: handleStartDateChange, value: tempValue.startDate, minDate: minDateParsed ?? undefined, maxDate: tempValue.endDate
                                                                             ? tempValue.endDate
                                                                             : maxDateParsed ?? undefined, activeStartDate: startMonth, onActiveStartDateChange: ({ activeStartDate, }) => {
                                                                             if (activeStartDate)
@@ -2931,15 +3100,15 @@ const DateRangePicker = React.forwardRef(({ className, value: controlledValue, d
                                                                                 "SAT",
                                                                             ];
                                                                             return weekdayNames[date.getDay()];
-                                                                        } }) })] })] })] }), jsxs("div", { className: "mt-4 pt-4 border-t border-surface-outline-neutral-subtle flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-2 h-2 rounded-full bg-action-fill-primary-default" }), 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" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "secondary", color: "neutral", size: "small", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "primary", color: "primary", size: "small", onClick: handleApply, children: "Apply date range" })] })] })] })] }) }));
+                                                                        } }) })] })] })] })] }), jsxs("div", { className: "border-t-[0.5px] border-surface-outline-neutral-subtle flex  px-8 py-5 items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-2 h-2 rounded-full bg-action-fill-primary-default" }), 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" })] }), jsxs("div", { className: "flex items-center gap-4", children: [jsx(Button, { variant: "secondary", color: "neutral", size: "small", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "primary", color: "primary", size: "small", onClick: handleApply, children: "Apply date range" })] })] })] }) }));
                     return createPortal(calendarPopup, document.body);
                 })()] }));
 });
@@ -5953,5 +6122,5 @@ const UploadBox = React.forwardRef(({ label, helperText, errorText, successText,
 });
 UploadBox.displayName = "UploadBox";
 
-export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, DateRangePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dateRangePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
+export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Chip, Counter, DatePicker, DateRangePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, chipVariants, cn, counterVariants, datePickerVariants, dateRangePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
 //# sourceMappingURL=index.esm.js.map