infinity-ui-elements 1.9.7 → 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: {
@@ -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