@widergy/energy-ui 3.125.1 → 3.126.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.126.0](https://github.com/widergy/energy-ui/compare/v3.125.1...v3.126.0) (2025-12-17)
+
+
+### Features
+
+* [PDI-552] utchip ([#737](https://github.com/widergy/energy-ui/issues/737)) ([e5d37e6](https://github.com/widergy/energy-ui/commit/e5d37e659c96542f4fdca9beee63b31306e1e47f))
+
 ## [3.125.1](https://github.com/widergy/energy-ui/compare/v3.125.0...v3.125.1) (2025-12-17)
 
 

package/dist/components/UTChip/README.md

@@ -0,0 +1,208 @@
+# UTChip Component
+
+## Overview
+
+`UTChip` is a compact, interactive component used to display information or actions in a condensed format. Chips are commonly used for tags, filters, selections, or quick actions. They can be interactive (clickable) or static, and support various visual states including active, disabled, and different variants.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `active` | `bool` | `false` | Indicates whether the chip is in an active state. Affects styling and colors. |
+| `adornment` | `shape` | `undefined` | Optional decorative element displayed before the text. See [Adornments](#adornments) section. |
+| `children` | `string` | Required | The text content displayed inside the chip. |
+| `dataTestId` | `string` | `undefined` | Test ID for testing purposes. |
+| `disabled` | `bool` | `false` | Disables the chip, preventing interactions and changing its appearance. |
+| `isDragging` | `bool` | `false` | Indicates whether the chip is being dragged or moved. Useful for drag and drop interactions. |
+| `onClick` | `func` | `undefined` | Callback function triggered when the chip is clicked. If provided, the chip becomes interactive and displays a close button. |
+| `onClose` | `func` | `undefined` | Callback function triggered when the close button (X) is clicked. Only displayed if `onClick` is provided. |
+| `size` | `oneOf(['medium', 'small'])` | `'medium'` | The size of the chip. Affects padding and text size. |
+| `variant` | `oneOf(['default', 'outline'])` | `'default'` | Visual style variant. `default` uses filled background, `outline` uses border-only style. |
+
+## Adornments
+
+Chips can display optional decorative elements before the text. The `adornment` prop accepts an object with the following structure:
+
+```javascript
+{
+  type: 'icon' | 'avatar' | 'image',
+  props: { /* component-specific props */ }
+}
+```
+
+### Adornment Types
+
+| Type | Component | Description | Example Props |
+|------|-----------|-------------|----------------|
+| `icon` | `UTIcon` | Displays an icon from the icon library. | `{ name: 'IconCheck', size: 20 }` |
+| `avatar` | `UTAvatar` | Displays a user avatar. | `{ src: 'url', alt: 'User Name' }` |
+| `image` | `img` | Displays a custom image. | `{ src: 'url', alt: 'Image' }` |
+
+## Variants
+
+### Default Variant
+Filled background with solid colors. Best for primary actions or selections.
+
+### Outline Variant
+Border-only style with transparent background. Best for secondary actions or filters.
+
+## Sizes
+
+### Medium (default)
+Standard size suitable for most use cases.
+
+### Small
+Compact size for space-constrained layouts.
+
+## Color Themes
+
+The chip's colors change based on its state:
+
+- **Active + Default variant**: Light background with negative (red) close button
+- **Active + Outline variant**: Accent-colored border with primary (blue) close button
+- **Inactive**: Gray text and close button
+- **Disabled**: Gray appearance, no interactions
+
+## Usage Examples
+
+### Basic Chip
+```jsx
+<UTChip>Basic Chip</UTChip>
+```
+
+### Interactive Chip with Close Button
+```jsx
+<UTChip 
+  onClick={() => console.log('Chip clicked')}
+  onClose={() => console.log('Chip closed')}
+>
+  Closeable Chip
+</UTChip>
+```
+
+### Active Chip
+```jsx
+<UTChip active>
+  Active Chip
+</UTChip>
+```
+
+### Chip with Icon Adornment
+```jsx
+<UTChip 
+  adornment={{
+    type: 'icon',
+    props: { name: 'IconCheck' }
+  }}
+>
+  Chip with Icon
+</UTChip>
+```
+
+### Chip with Avatar Adornment
+```jsx
+<UTChip 
+  adornment={{
+    type: 'avatar',
+    props: { src: 'avatar-url', alt: 'User' }
+  }}
+>
+  User Chip
+</UTChip>
+```
+
+### Chip with Image Adornment
+```jsx
+<UTChip 
+  adornment={{
+    type: 'image',
+    props: { src: 'image-url', alt: 'Image' }
+  }}
+>
+  Image Chip
+</UTChip>
+```
+
+### Small Outline Variant
+```jsx
+<UTChip 
+  size="small"
+  variant="outline"
+  onClick={() => {}}
+  onClose={() => {}}
+>
+  Filter Tag
+</UTChip>
+```
+
+### Disabled Chip
+```jsx
+<UTChip disabled>
+  Disabled Chip
+</UTChip>
+```
+
+### Dragging Chip
+```jsx
+<UTChip 
+  isDragging={true}
+  onClick={() => console.log('Chip clicked')}
+  onClose={() => console.log('Chip closed')}
+>
+  Draggable Chip
+</UTChip>
+```
+
+### Multiple Chips (Tag List)
+```jsx
+const tags = ['React', 'JavaScript', 'UI'];
+
+{tags.map(tag => (
+  <UTChip 
+    key={tag}
+    onClick={() => selectTag(tag)}
+    onClose={() => removeTag(tag)}
+  >
+    {tag}
+  </UTChip>
+))}
+```
+
+## Behavior
+
+### Interactive Behavior
+- When `onClick` is provided, the chip becomes interactive and displays a close button (X)
+- The close button triggers the `onClose` callback
+- The chip's appearance changes based on the `active` state
+
+### Text Sizing
+- Text size automatically adjusts based on the `size` prop:
+  - `medium`: Uses `body` text variant
+  - `small`: Uses `small` text variant
+
+### Styling
+- The component uses CSS modules for styling
+- Classes are applied dynamically based on props: `size`, `variant`, `active`, and `disabled`
+- Adornments are styled to fit within the chip's layout
+
+## Accessibility
+
+- Use `dataTestId` for testing and accessibility testing
+- Ensure the chip text is descriptive and meaningful
+- When used as a filter or selection, provide clear visual feedback with the `active` state
+- Disabled chips should have appropriate visual indication
+
+## Related Components
+
+- **UTLabel**: Used internally for text rendering
+- **UTButton**: Used internally for the close button
+- **UTIcon**: Used for icon adornments
+- **UTAvatar**: Used for avatar adornments
+- **UTTouchableWithoutFeedback**: Used for interactive container when `onClick` is provided
+
+## Notes
+
+- The component is memoized for performance optimization
+- Adornment props are merged with default props specific to each adornment type
+- The close button only appears when `onClick` is provided
+- Color themes are automatically managed based on the `active` and `variant` states

package/dist/components/UTChip/UTChip.mdx

@@ -0,0 +1,11 @@
+import { ArgTypes, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTChip from './UTChip.stories';
+
+<Meta of={UTChip} />
+
+<Title>UTChip</Title>
+
+<Description of={UTChip} />
+
+<ArgTypes />

package/dist/components/UTChip/UTChip.stories.js

@@ -0,0 +1,385 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithImageAdornment = exports.WithIconAdornment = exports.WithAvatarAdornment = exports.TagList = exports.SmallOutlineInteractive = exports.Small = exports.OutlineActive = exports.Outline = exports.InteractiveActive = exports.Interactive = exports.FilterChips = exports.Dragging = exports.Disabled = exports.Default = exports.AllVariants = exports.Active = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("./constants");
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  args: {
+    children: 'Chip Label'
+  },
+  argTypes: {
+    active: {
+      control: 'boolean',
+      description: 'Indica si el chip está en estado activo.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    adornment: {
+      control: 'object',
+      description: 'Elemento decorativo opcional que se muestra antes del texto. Puede ser un icono, avatar o imagen.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    children: {
+      control: 'text',
+      description: 'Contenido de texto que se muestra dentro del chip.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: 'ID para testing y propósitos de accesibilidad.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Desactiva el chip, previniendo interacciones y cambiando su apariencia.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    isDragging: {
+      control: 'boolean',
+      description: 'Indica si el chip está siendo arrastrado o movido. Útil para interacciones de drag and drop.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    onClick: {
+      control: {
+        type: 'inline-radio'
+      },
+      options: ['undefined', 'function'],
+      mapping: {
+        undefined,
+        function: () => alert('Chip clicked')
+      },
+      description: 'Función callback que se ejecuta cuando se hace clic en el chip. Si se proporciona, el chip se vuelve interactivo y muestra un botón de cerrar.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    onClose: {
+      control: {
+        type: 'inline-radio'
+      },
+      options: ['undefined', 'function'],
+      mapping: {
+        undefined,
+        function: () => alert('Chip closed')
+      },
+      description: 'Función callback que se ejecuta cuando se hace clic en el botón de cerrar (X). Solo se muestra si onClick está definido.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    size: {
+      control: 'select',
+      description: 'Tamaño del chip. Afecta el padding y el tamaño del texto.',
+      options: Object.values(_constants.CHIP_SIZES),
+      table: {
+        defaultValue: {
+          summary: _constants.CHIP_SIZES.MEDIUM
+        },
+        type: {
+          summary: "'".concat(_constants.CHIP_SIZES.MEDIUM, "' | '").concat(_constants.CHIP_SIZES.SMALL, "'")
+        }
+      }
+    },
+    variant: {
+      control: 'select',
+      description: 'Variante visual del chip. "default" usa fondo relleno, "outline" usa solo borde.',
+      options: Object.values(_constants.CHIP_VARIANT),
+      table: {
+        defaultValue: {
+          summary: _constants.CHIP_VARIANT.DEFAULT
+        },
+        type: {
+          summary: "'".concat(_constants.CHIP_VARIANT.DEFAULT, "' | '").concat(_constants.CHIP_VARIANT.OUTLINE, "'")
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: 'UTChip es un componente compacto e interactivo usado para mostrar información o acciones en un formato condensado. Se usa comúnmente para tags, filtros, selecciones o acciones rápidas.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTChip'
+};
+const Default = exports.Default = {
+  args: {
+    active: false,
+    adornment: {
+      type: _constants.ADORNMENT_TYPES.ICON,
+      props: {
+        name: 'IconCircleCheck'
+      }
+    },
+    disabled: false,
+    isDragging: false,
+    onClick: undefined,
+    onClose: undefined,
+    size: _constants.CHIP_SIZES.MEDIUM,
+    variant: _constants.CHIP_VARIANT.DEFAULT
+  },
+  name: 'Playground'
+};
+const Active = exports.Active = {
+  args: {
+    active: true,
+    disabled: false,
+    size: _constants.CHIP_SIZES.MEDIUM,
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+const Disabled = exports.Disabled = {
+  args: {
+    active: false,
+    disabled: true,
+    size: _constants.CHIP_SIZES.MEDIUM,
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+const Small = exports.Small = {
+  args: {
+    active: false,
+    disabled: false,
+    size: _constants.CHIP_SIZES.SMALL,
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+const Outline = exports.Outline = {
+  args: {
+    active: false,
+    disabled: false,
+    size: _constants.CHIP_SIZES.MEDIUM,
+    variant: _constants.CHIP_VARIANT.OUTLINE,
+    isDragging: false
+  }
+};
+const OutlineActive = exports.OutlineActive = {
+  args: {
+    active: true,
+    disabled: false,
+    size: _constants.CHIP_SIZES.MEDIUM,
+    variant: _constants.CHIP_VARIANT.OUTLINE,
+    isDragging: false
+  }
+};
+const Interactive = exports.Interactive = {
+  args: {
+    active: false,
+    disabled: false,
+    onClick: () => alert('Chip clicked'),
+    onClose: () => alert('Chip closed'),
+    size: _constants.CHIP_SIZES.MEDIUM,
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+const InteractiveActive = exports.InteractiveActive = {
+  args: {
+    active: true,
+    disabled: false,
+    onClick: () => alert('Chip clicked'),
+    onClose: () => alert('Chip closed'),
+    size: _constants.CHIP_SIZES.MEDIUM,
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+const WithIconAdornment = exports.WithIconAdornment = {
+  args: {
+    active: false,
+    adornment: {
+      type: _constants.ADORNMENT_TYPES.ICON,
+      props: {
+        name: 'IconCircleCheck'
+      }
+    },
+    disabled: false,
+    size: _constants.CHIP_SIZES.MEDIUM,
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+const WithAvatarAdornment = exports.WithAvatarAdornment = {
+  args: {
+    active: false,
+    adornment: {
+      type: _constants.ADORNMENT_TYPES.AVATAR,
+      props: {
+        initials: 'JD'
+      }
+    },
+    children: 'John Doe',
+    disabled: false,
+    size: _constants.CHIP_SIZES.MEDIUM,
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+const WithImageAdornment = exports.WithImageAdornment = {
+  args: {
+    active: false,
+    adornment: {
+      type: _constants.ADORNMENT_TYPES.IMAGE,
+      props: {
+        src: 'https://widergy.com/wp-content/uploads/2021/12/cropped-favicon-32x32.png'
+      }
+    },
+    disabled: false,
+    size: _constants.CHIP_SIZES.MEDIUM,
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+const SmallOutlineInteractive = exports.SmallOutlineInteractive = {
+  args: {
+    active: false,
+    disabled: false,
+    onClick: () => alert('Filter clicked'),
+    onClose: () => alert('Filter removed'),
+    size: _constants.CHIP_SIZES.SMALL,
+    variant: _constants.CHIP_VARIANT.OUTLINE,
+    isDragging: false
+  },
+  name: 'Small Outline Interactive'
+};
+const Dragging = exports.Dragging = {
+  args: {
+    active: false,
+    disabled: false,
+    isDragging: true,
+    onClick: () => alert('Chip clicked'),
+    onClose: () => alert('Chip closed'),
+    size: _constants.CHIP_SIZES.MEDIUM,
+    variant: _constants.CHIP_VARIANT.DEFAULT
+  }
+};
+const AllVariants = exports.AllVariants = {
+  render: () => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '8px',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.default, {
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    size: _constants.CHIP_SIZES.MEDIUM
+  }, "Default Medium"), /*#__PURE__*/_react.default.createElement(_.default, {
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    size: _constants.CHIP_SIZES.SMALL
+  }, "Default Small"), /*#__PURE__*/_react.default.createElement(_.default, {
+    variant: _constants.CHIP_VARIANT.OUTLINE,
+    size: _constants.CHIP_SIZES.MEDIUM
+  }, "Outline Medium"), /*#__PURE__*/_react.default.createElement(_.default, {
+    variant: _constants.CHIP_VARIANT.OUTLINE,
+    size: _constants.CHIP_SIZES.SMALL
+  }, "Outline Small"), /*#__PURE__*/_react.default.createElement(_.default, {
+    active: true,
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    size: _constants.CHIP_SIZES.MEDIUM
+  }, "Active Default"), /*#__PURE__*/_react.default.createElement(_.default, {
+    active: true,
+    variant: _constants.CHIP_VARIANT.OUTLINE,
+    size: _constants.CHIP_SIZES.MEDIUM
+  }, "Active Outline"), /*#__PURE__*/_react.default.createElement(_.default, {
+    disabled: true,
+    variant: _constants.CHIP_VARIANT.DEFAULT,
+    size: _constants.CHIP_SIZES.MEDIUM
+  }, "Disabled"))
+};
+const TagList = exports.TagList = {
+  render: () => {
+    const tags = ['React', 'JavaScript', 'UI Components'];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '8px',
+        flexWrap: 'wrap'
+      }
+    }, tags.map(tag => /*#__PURE__*/_react.default.createElement(_.default, {
+      key: tag,
+      onClick: () => alert("Selected: ".concat(tag)),
+      onClose: () => alert("Removed: ".concat(tag)),
+      size: _constants.CHIP_SIZES.SMALL,
+      variant: _constants.CHIP_VARIANT.OUTLINE
+    }, tag)));
+  }
+};
+const FilterChips = exports.FilterChips = {
+  render: () => {
+    const filters = ['Active', 'Pending', 'Completed'];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '8px',
+        flexWrap: 'wrap'
+      }
+    }, filters.map((filter, index) => /*#__PURE__*/_react.default.createElement(_.default, {
+      key: filter,
+      active: index === 0,
+      onClick: () => alert("Filter: ".concat(filter)),
+      size: _constants.CHIP_SIZES.MEDIUM,
+      variant: _constants.CHIP_VARIANT.DEFAULT
+    }, filter)));
+  }
+};

package/dist/components/UTChip/constants.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHIP_VARIANT = exports.CHIP_SIZES = exports.ADORNMENT_TYPES = exports.ADORNMENT_COMPONENT_MAPPER = void 0;
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _UTAvatar = _interopRequireDefault(require("../UTAvatar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CHIP_VARIANT = exports.CHIP_VARIANT = {
+  DEFAULT: 'default',
+  OUTLINE: 'outline'
+};
+const CHIP_SIZES = exports.CHIP_SIZES = {
+  MEDIUM: 'medium',
+  SMALL: 'small'
+};
+const ADORNMENT_TYPES = exports.ADORNMENT_TYPES = {
+  ICON: 'icon',
+  AVATAR: 'avatar',
+  IMAGE: 'image'
+};
+const ADORNMENT_COMPONENT_MAPPER = exports.ADORNMENT_COMPONENT_MAPPER = {
+  [ADORNMENT_TYPES.ICON]: _UTIcon.default,
+  [ADORNMENT_TYPES.AVATAR]: _UTAvatar.default,
+  [ADORNMENT_TYPES.IMAGE]: 'img'
+};

package/dist/components/UTChip/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _utils = require("./utils");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const UTChip = _ref => {
+  let {
+    active,
+    adornment,
+    children,
+    dataTestId,
+    disabled,
+    isDragging,
+    onClick,
+    onClose,
+    size = _constants.CHIP_SIZES.MEDIUM,
+    variant = _constants.CHIP_VARIANT.DEFAULT
+  } = _ref;
+  const {
+    Adornment,
+    adornmentProps,
+    buttonProps,
+    Container,
+    containerProps,
+    labelProps
+  } = (0, _utils.getItemsProps)({
+    active,
+    adornment,
+    dataTestId,
+    disabled,
+    isDragging,
+    onClick,
+    size,
+    variant
+  });
+  const handleClose = onClose ? e => {
+    e.stopPropagation();
+    onClose(e);
+  } : undefined;
+  return /*#__PURE__*/_react.default.createElement(Container, _extends({
+    className: "\n        ".concat(_stylesModule.default.chipContainer, "\n        ").concat(_stylesModule.default[size], "\n        ").concat(_stylesModule.default[variant], "\n        ").concat(active ? _stylesModule.default.active : '', "\n        ").concat(disabled ? _stylesModule.default.disabled : '', "\n        ").concat(isDragging ? _stylesModule.default.dragging : '', "\n        ").concat(onClick && !disabled ? _stylesModule.default.interactive : _stylesModule.default.nonInteractive, "\n      ")
+  }, containerProps), Adornment && /*#__PURE__*/_react.default.createElement(Adornment, adornmentProps), /*#__PURE__*/_react.default.createElement(_UTLabel.default, labelProps, children), handleClose && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({}, buttonProps, {
+    Icon: "IconX",
+    onClick: handleClose,
+    size: "small",
+    variant: "text"
+  })));
+};
+UTChip.propTypes = {
+  active: _propTypes.bool,
+  adornment: (0, _propTypes.shape)({
+    props: _propTypes.object,
+    type: (0, _propTypes.oneOf)([_constants.ADORNMENT_TYPES.ICON, _constants.ADORNMENT_TYPES.AVATAR, _constants.ADORNMENT_TYPES.IMAGE])
+  }),
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  isDragging: _propTypes.bool,
+  onClick: _propTypes.func,
+  onClose: _propTypes.func,
+  size: (0, _propTypes.oneOf)([_constants.CHIP_SIZES.MEDIUM, _constants.CHIP_SIZES.SMALL]),
+  variant: (0, _propTypes.oneOf)([_constants.CHIP_VARIANT.DEFAULT, _constants.CHIP_VARIANT.OUTLINE])
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(UTChip);

package/dist/components/UTChip/styles.module.scss

@@ -0,0 +1,106 @@
+.chipContainer {
+  align-items: center;
+  border-style: solid;
+  border-radius: 30px;
+  border-width: 1px;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  width: fit-content;
+}
+
+.small {
+  padding: 4px 8px;
+}
+
+.medium {
+  padding: 8px 12px;
+}
+
+.interactive {
+  cursor: pointer;
+}
+
+.nonInteractive {
+  cursor: default;
+}
+
+.default {
+  background-color: var(--light03);
+  border-color: transparent;
+
+  &:not(.disabled) {
+    &:hover {
+      background-color: var(--light04);
+    }
+
+    &.interactive {
+      &:active {
+        background-color: var(--light05);
+      }
+    }
+
+    &.dragging {
+      background-color: var(--light01);
+      box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+    }
+
+    &:not(.dragging) {
+      &.active {
+        background-color: var(--actionAccent04);
+      }
+    }
+  }
+
+  &.disabled {
+    background-color: var(--light03);
+    opacity: 0.5;
+  }
+}
+
+.outline {
+  background-color: transparent;
+  border-color: var(--light04);
+
+  &:not(.disabled) {
+    &:hover {
+      background-color: var(--light02);
+    }
+
+    &.interactive {
+      &:active {
+        background-color: var(--light03);
+        border-color: transparent;
+      }
+    }
+
+    &.dragging {
+      background-color: var(--light01);
+      box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+    }
+
+    &:not(.dragging) {
+      &.active {
+        background-color: var(--actionAccent01);
+        border-color: var(--actionAccent02);
+      }
+    }
+  }
+
+  &.disabled {
+    border-color: var(--light04);
+    opacity: 0.5;
+  }
+}
+
+.imageAdornment {
+  height: 24px;
+  object-fit: cover;
+  width: 24px;
+}

package/dist/components/UTChip/utils.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextVariant = exports.getTextColorTheme = exports.getItemsProps = exports.getDefaultAdornmentProps = exports.getButtonColorTheme = void 0;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _Palette = require("../../constants/Palette");
+var _constants = require("../UTLabel/constants");
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../UTTouchableWithoutFeedback"));
+var _constants2 = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getTextColorTheme = _ref => {
+  let {
+    active,
+    disabled,
+    isDragging,
+    variant
+  } = _ref;
+  if (active && !disabled && !isDragging) return variant === _constants2.CHIP_VARIANT.DEFAULT ? _Palette.COLOR_THEMES.light : _Palette.COLOR_THEMES.accent;
+  return _Palette.COLOR_THEMES.gray;
+};
+exports.getTextColorTheme = getTextColorTheme;
+const getButtonColorTheme = _ref2 => {
+  let {
+    active,
+    disabled,
+    isDragging,
+    variant
+  } = _ref2;
+  if (active && !disabled && !isDragging) return variant === _constants2.CHIP_VARIANT.DEFAULT ? _Palette.COLOR_THEMES.negative : _Palette.COLOR_THEMES.primary;
+  return _Palette.COLOR_THEMES.gray;
+};
+exports.getButtonColorTheme = getButtonColorTheme;
+const getTextVariant = size => size === _constants2.CHIP_SIZES.SMALL ? _constants.VARIANTS_NAMES.SMALL : _constants.VARIANTS_NAMES.BODY;
+exports.getTextVariant = getTextVariant;
+const getDefaultAdornmentProps = _ref3 => {
+  var _adornment$props;
+  let {
+    active,
+    adornment,
+    disabled,
+    isDragging,
+    variant
+  } = _ref3;
+  if ((0, _isEmpty.default)(adornment) || !adornment.type) return {};
+  if (adornment.type === _constants2.ADORNMENT_TYPES.ICON) return {
+    ...adornment.props,
+    colorTheme: getTextColorTheme({
+      active,
+      disabled,
+      isDragging,
+      variant
+    }),
+    size: 20
+  };
+  if (adornment.type === _constants2.ADORNMENT_TYPES.AVATAR) return {
+    ...adornment.props,
+    size: 'small'
+  };
+  if (adornment.type === _constants2.ADORNMENT_TYPES.IMAGE) return {
+    ...adornment.props,
+    className: "".concat(_stylesModule.default.imageAdornment, " ").concat(((_adornment$props = adornment.props) === null || _adornment$props === void 0 ? void 0 : _adornment$props.className) || '')
+  };
+  return {};
+};
+exports.getDefaultAdornmentProps = getDefaultAdornmentProps;
+const getItemsProps = _ref4 => {
+  let {
+    active,
+    adornment,
+    dataTestId,
+    disabled,
+    isDragging,
+    onClick,
+    size,
+    variant
+  } = _ref4;
+  return {
+    Adornment: adornment !== null && adornment !== void 0 && adornment.type ? _constants2.ADORNMENT_COMPONENT_MAPPER[adornment === null || adornment === void 0 ? void 0 : adornment.type] : null,
+    adornmentProps: getDefaultAdornmentProps({
+      active,
+      adornment,
+      disabled,
+      variant
+    }),
+    Container: onClick && !disabled ? _UTTouchableWithoutFeedback.default : 'div',
+    containerProps: onClick && !disabled ? {
+      onClick,
+      dataTestId
+    } : {
+      'data-testid': dataTestId
+    },
+    labelProps: {
+      colorTheme: getTextColorTheme({
+        active,
+        disabled,
+        isDragging,
+        variant
+      }),
+      variant: getTextVariant(size)
+    },
+    buttonProps: {
+      colorTheme: getButtonColorTheme({
+        active,
+        disabled,
+        isDragging,
+        variant
+      })
+    }
+  };
+};
+exports.getItemsProps = getItemsProps;

package/dist/components/UTLabel/constants.js

@@ -3,43 +3,55 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_LINE_HEIGHT = exports.VARIANTS = exports.DEFAULT_PROPS = void 0;
+exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_NAMES = exports.VARIANTS_LINE_HEIGHT = exports.VARIANTS = exports.DEFAULT_PROPS = void 0;
 var _Palette = require("../../constants/Palette");
+const VARIANTS_NAMES = exports.VARIANTS_NAMES = {
+  TITLE1: 'title1',
+  TITLE2: 'title2',
+  TITLE3: 'title3',
+  SUBTITLE1: 'subtitle1',
+  SUBTITLE2: 'subtitle2',
+  BODY: 'body',
+  SMALL: 'small',
+  XSMALL: 'xsmall',
+  TH: 'th',
+  TD: 'td'
+};
 const VARIANTS = exports.VARIANTS = {
-  title1: 'h1',
-  title2: 'h2',
-  title3: 'h3',
-  subtitle1: 'h4',
-  subtitle2: 'h5',
-  body: 'div',
-  small: 'div',
-  xsmall: 'div',
-  th: 'th',
-  td: 'td'
+  [VARIANTS_NAMES.TITLE1]: 'h1',
+  [VARIANTS_NAMES.TITLE2]: 'h2',
+  [VARIANTS_NAMES.TITLE3]: 'h3',
+  [VARIANTS_NAMES.SUBTITLE1]: 'h4',
+  [VARIANTS_NAMES.SUBTITLE2]: 'h5',
+  [VARIANTS_NAMES.BODY]: 'div',
+  [VARIANTS_NAMES.SMALL]: 'div',
+  [VARIANTS_NAMES.XSMALL]: 'div',
+  [VARIANTS_NAMES.TH]: 'th',
+  [VARIANTS_NAMES.TD]: 'td'
 };
 const VARIANTS_SIZES = exports.VARIANTS_SIZES = {
-  title1: '1.875rem',
-  title2: '1.5rem',
-  title3: '1.375rem',
-  subtitle1: '1.125rem',
-  subtitle2: '1rem',
-  body: '1rem',
-  small: '0.875rem',
-  xsmall: '0.75rem',
-  th: '1rem',
-  td: '1rem'
+  [VARIANTS_NAMES.TITLE1]: '1.875rem',
+  [VARIANTS_NAMES.TITLE2]: '1.5rem',
+  [VARIANTS_NAMES.TITLE3]: '1.375rem',
+  [VARIANTS_NAMES.SUBTITLE1]: '1.125rem',
+  [VARIANTS_NAMES.SUBTITLE2]: '1rem',
+  [VARIANTS_NAMES.BODY]: '1rem',
+  [VARIANTS_NAMES.SMALL]: '0.875rem',
+  [VARIANTS_NAMES.XSMALL]: '0.75rem',
+  [VARIANTS_NAMES.TH]: '1rem',
+  [VARIANTS_NAMES.TD]: '1rem'
 };
 const VARIANTS_LINE_HEIGHT = exports.VARIANTS_LINE_HEIGHT = {
-  title1: '100%',
-  title2: '100%',
-  title3: '100%',
-  subtitle1: '100%',
-  subtitle2: '1.375rem',
-  body: '1.375rem',
-  small: '1.25rem',
-  xsmall: '1.125rem',
-  th: '1.375rem',
-  td: '1.375rem'
+  [VARIANTS_NAMES.TITLE1]: '100%',
+  [VARIANTS_NAMES.TITLE2]: '100%',
+  [VARIANTS_NAMES.TITLE3]: '100%',
+  [VARIANTS_NAMES.SUBTITLE1]: '100%',
+  [VARIANTS_NAMES.SUBTITLE2]: '1.375rem',
+  [VARIANTS_NAMES.BODY]: '1.375rem',
+  [VARIANTS_NAMES.SMALL]: '1.25rem',
+  [VARIANTS_NAMES.XSMALL]: '1.125rem',
+  [VARIANTS_NAMES.TH]: '1.375rem',
+  [VARIANTS_NAMES.TD]: '1.375rem'
 };
 const WEIGHTS = exports.WEIGHTS = {
   thin: 100,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.125.1",
+  "version": "3.126.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",