esewa-ui-library 1.0.7 → 1.0.8

package/README.md

@@ -92,10 +92,10 @@ export default App;
 | `variant`           | `'primary' | 'warning' | 'danger' | 'info'`      | `'primary'` | Determines the alert style |
 | `title`             | `string`                                         | `undefined` | Title of the alert |
 | `description`       | `string`                                         | `undefined` | Alert description text |
-| `descriptionIcon`   | `string`                                         | `undefined` | Icon class for the description |
+| `descriptionIcon`   | `string` | `React.ReactNode`                     | `undefined` | Icon class for the description |
 | `showDescriptionIcon` | `boolean`                                      | `false`     | Whether to show the description icon |
-| `titleIcon`         | `string`                                         | `undefined` | Icon class for the title |
-| `dismissIcon`       | `string`                                         | `undefined` | Icon class for the dismiss button |
+| `titleIcon`         | `string` | `React.ReactNode`                     | `undefined` | Icon class for the title |
+| `dismissIcon`       | `string` | `React.ReactNode`                     | `undefined` | Icon class for the dismiss button |
 | `showDismissIcon`   | `boolean`                                       | `false`     | Whether to show the dismiss button |
 | `onDismiss`        | `() => void`                                     | `undefined` | Callback function when dismiss button is clicked |
 | `showCardFooter`   | `boolean`                                       | `false`     | Whether to show the footer section |
@@ -145,7 +145,7 @@ export default App;
 | Prop Name             | Type                      | Default  | Description |
 |-----------------------|---------------------------|----------|-------------|
 | `title`               | `string | any`             | `undefined` | Title to display in the app bar |
-| `icon`                | `string`                  | `'icon-back'` | Icon to display as the back button |
+| `icon`                | `string`| `React.ReactNode`| `'icon-back'` | Icon to display as the back button |
 | `imageUrl`            | `string`                  | `undefined` | Image URL to display next to the title |
 | `onBackIconClick`     | `() => void`              | `() => {}` | Callback for the back icon click event |
 | `onTitleClick`        | `() => void`              | `() => {}` | Callback for the title click event |
@@ -153,7 +153,7 @@ export default App;
 | `onClick`             | `() => void`              | `() => {}` | Callback for the entire app bar click event |
 | `className`           | `string`                  | `undefined` | Additional class for custom styling |
 | `titleposition`       | `'left' | 'center' | 'right'` | `'center'` | Position of the title within the app bar |
-| `actionIcon`          | `string`                  | `undefined` | Icon for the action button on the right side of the app bar |
+| `actionIcon`          | `string`| `React.ReactNode`| `undefined` | Icon for the action button on the right side of the app bar |
 
 
 # ESewaButton
@@ -199,7 +199,7 @@ export default App;
 | `outlined`     | `boolean`                  | `false`     | If `true`, the button will have an outline style.                                                            |
 | `className`    | `string`                   | `''`        | Additional CSS class(es) to apply to the button.                                                             |
 | `fullwidth`    | `boolean`                  | `false`     | If `true`, the button will span the full width of its container.                                              |
-| `icon`         | `string`                   | `
+| `icon`         | `string`| `React.ReactNode`| `
 
 
 ## Styling and Customization
@@ -619,7 +619,7 @@ export default App;
 |----------------------|------------------------------------------------------------|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `isOpen`             | `boolean`                                                  | `false`                | Controls the visibility of the dialog.                                                                                                                     |
 | `showLeftIcon`       | `boolean`                                                  | `false`                | Whether to show the left icon in the dialog header.                                                                                                        |
-| `leftIcon`           | `string`                                                   | `'icon-es-check'`      | The icon class to be displayed in the left side of the dialog header.                                                                                     |
+| `leftIcon`           | `string` | `React.ReactNode`                               | `'icon-es-check'`      | The icon class to be displayed in the left side of the dialog header.                                                                                     |
 | `showCloseIcon`      | `boolean`                                                  | `false`                | Whether to show the close icon in the dialog header.                                                                                                      |
 | `closeIcon`          | `string`                                                   | `'icon-es-close'`      | The icon class for the close button.                                                                                                                       |
 | `okText`             | `string`                                                   | `'OK'`                  | The text to be displayed on the OK button.                                                                                                                 |
@@ -1447,7 +1447,7 @@ const YourComponent = () => {
 | Name           | Type                 | Default       | Description                                                                 |
 |----------------|----------------------|---------------|-----------------------------------------------------------------------------|
 | `text`         | `string`             | -             | The text content to display inside the tag.                                  |
-| `icon`         | `React.ReactNode`    | `undefined`   | An optional icon to display alongside the text.                              |
+| `icon`         | `string` | `React.ReactNode`    | `undefined`   | An optional icon to display alongside the text.                              |
 | `variant`      | `'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info'` | `'primary'` | Defines the tag's color scheme. Available variants: `primary`, `secondary`, `danger`, `success`, `warning`, `info`. |
 | `iconPosition` | `'start' | 'end'`     | `'start'`     | Defines the position of the icon. Choose between `start` (before text) or `end` (after text). |
 | `size`         | `'normal' | 'small'`  | `'normal'`    | Defines the size of the tag. Available sizes: `normal`, `small`.              |

package/dist/components/AlertCard/eSewaAlertCard.d.ts

@@ -4,10 +4,10 @@ interface AlertCardProps {
     variant?: 'primary' | 'warning' | 'danger' | 'info';
     title?: string;
     description?: string;
-    descriptionIcon?: string;
+    descriptionIcon?: string | React.ReactNode;
     showDescriptionIcon?: boolean;
-    titleIcon?: string;
-    dismissIcon?: string;
+    titleIcon?: string | React.ReactNode;
+    dismissIcon?: string | React.ReactNode;
     showDismissIcon?: boolean;
     onDismiss?: () => void;
     showCardFooter?: boolean;

package/dist/components/AppBar/eSewaAppbar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface AppBarProps {
     title?: string | any;
-    icon?: string;
+    icon?: string | React.ReactNode;
     imageUrl?: string;
     onBackIconClick?: () => void;
     onTitleClick?: () => void;
@@ -9,7 +9,7 @@ interface AppBarProps {
     onClick?: () => void;
     className?: string;
     titleposition?: 'left' | 'center' | 'right';
-    actionIcon?: string;
+    actionIcon?: string | React.ReactNode;
 }
 export declare const ESewaAppBar: React.FC<AppBarProps>;
 export {};

package/dist/components/Button/eSewaButton.d.ts

@@ -8,7 +8,7 @@ interface ButtonProps {
     outlined?: boolean;
     className?: string;
     fullwidth?: boolean;
-    icon?: string;
+    icon?: string | React.ReactNode;
     label?: string;
     iconPlacement?: 'start' | 'end';
     iconClass?: string;

package/dist/components/Chip/eSewaChipGroup.d.ts

@@ -7,7 +7,7 @@ interface ChipGroupProps {
 }
 interface ChipProps {
     showIcon?: boolean;
-    icon?: string;
+    icon?: string | React.ReactNode;
     text: string;
     id: number;
 }

package/dist/components/Dialog/eSewaDialog.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 declare type DialogProps = {
     isOpen: boolean;
     showLeftIcon?: boolean;
-    leftIcon?: string;
+    leftIcon?: string | React.ReactNode;
     showCloseIcon?: boolean;
-    closeIcon?: string;
+    closeIcon?: string | React.ReactNode;
     okText?: string;
     cancelText?: string;
     title?: string;

package/dist/components/Icon/esIcon.d.ts

@@ -5,6 +5,7 @@ interface IconProps {
     size?: number;
     iconPrimaryColor?: string;
     iconSecondaryColor?: string;
+    className?: string;
 }
 export declare const ESIcon: React.FC<IconProps>;
 export default ESIcon;

package/dist/components/Tag/eSewaTag.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface TagProps {
     text: string;
-    icon?: React.ReactNode;
+    icon?: string | React.ReactNode;
     variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info';
     iconPosition?: 'start' | 'end';
     size?: 'normal' | 'small';

package/dist/index.js

@@ -63,9 +63,11 @@ var ESewaButton = function ESewaButton(_ref) {
     disabled: disabled
   }, React__default.createElement("div", {
     className: "flex " + (iconPlacement === 'start' ? 'flex-row' : 'flex-reverse')
-  }, icon && React__default.createElement("i", {
+  }, icon && (typeof icon === 'string' ? React__default.createElement("i", {
     className: icon
-  }, " "), iconClass && React__default.createElement("span", {
+  }, " ") : {
+    icon: icon
+  }), iconClass && React__default.createElement("span", {
     className: iconClass
   }), React__default.createElement("span", null, " ", children))));
 };
@@ -108,22 +110,22 @@ var ESewaAlertCard = function ESewaAlertCard(_ref) {
     className: 'alert-card--header'
   }, titleIcon && React__default.createElement("span", {
     className: 'alert-card--header--icon'
-  }, React__default.createElement("i", {
+  }, typeof titleIcon === 'string' ? React__default.createElement("i", {
     className: titleIcon
-  })), title && React__default.createElement("h3", {
+  }) : titleIcon), title && React__default.createElement("h3", {
     className: 'alert-card--header--title body1'
   }, title), showDismissIcon && React__default.createElement("span", {
     className: 'alert-card--header--dismiss-icon',
     onClick: onDismiss
-  }, React__default.createElement("i", {
+  }, typeof dismissIcon === 'string' ? React__default.createElement("i", {
     className: dismissIcon
-  }))), React__default.createElement("div", {
+  }) : dismissIcon)), React__default.createElement("div", {
     className: 'alert-card--description'
   }, showDescriptionIcon && React__default.createElement("span", {
     className: 'alert-card--description--icon'
-  }, React__default.createElement("i", {
+  }, typeof descriptionIcon === 'string' ? React__default.createElement("i", {
     className: descriptionIcon
-  })), description && React__default.createElement("p", {
+  }) : descriptionIcon), description && React__default.createElement("p", {
     className: 'card-text body2'
   }, description)), showCardFooter && React__default.createElement("div", {
     className: 'alert-card--footer'
@@ -186,7 +188,7 @@ var StyledAppBar = styled__default.header.attrs(function (_ref) {
   return {
     titleposition: titleposition
   };
-})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  .e-app-bar {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    background-color: var(--appbar-bg-top);\n    padding: 7px 12px;\n    position: relative;\n    height: 42px;\n    // left: 0;\n    // right: 0;\n    gap: var(--values-value-8);\n\n    &--nav-icon, &--close-icon {\n      padding: 7px;\n      color: var(--white);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Title section */\n    &--title-wrapper {\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      width: 100%;  // Ensures the title section takes full width to apply the alignment\n    }\n\n    &--title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      overflow: hidden;\n      // display: -webkit-box;\n      // -webkit-line-clamp: 1;\n      // line-clamp: 1;\n      // -webkit-box-orient: vertical;\n    }\n\n    &--title-image img {\n      width: 32px;\n      object-fit: cover;\n      // margin-left: -32px;\n      background: var(--white);\n      border: 1px solid var(--border);\n      border-radius: var(--grid-borderradius-border-radius-xs);\n    }\n\n    &--title-label {\n      color: var(--white);\n      letter-spacing: 0.4px;\n      font-size: var(--values-value-16);\n      font-weight: 500;\n    }\n  }\n"])), function (props) {
+})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  .e-app-bar {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    background-color: var(--appbar-bg-top);\n    padding: 7px 12px;\n    position: relative;\n    height: 42px;\n    gap: var(--values-value-8);\n\n    &--nav-icon,\n    &--close-icon {\n      padding: 7px;\n      color: var(--white);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Title section */\n    &--title-wrapper {\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      width: 100%; // Ensures the title section takes full width to apply the alignment\n    }\n\n    &--title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      overflow: hidden;\n    }\n\n    &--title-image img {\n      width: 32px;\n      object-fit: cover;\n      background: var(--white);\n      border: 1px solid var(--border);\n      border-radius: var(--grid-borderradius-border-radius-xs);\n    }\n\n    &--title-label {\n      color: var(--white);\n      letter-spacing: 0.4px;\n      font-size: var(--values-value-16);\n      font-weight: 500;\n    }\n  }\n"])), function (props) {
   return props.titleposition === 'left' ? 'flex-start' : props.titleposition === 'right' ? 'flex-end' : 'center';
 });
 var ESewaAppBar = function ESewaAppBar(_ref2) {
@@ -230,10 +232,10 @@ var ESewaAppBar = function ESewaAppBar(_ref2) {
   }, React__default.createElement("path", {
     d: 'M15.4218 4.31438C15.8357 4.73135 15.8332 5.4049 15.4162 5.81879L7.64512 13.5324H22.9362C23.5237 13.5324 24 13.9801 24 14.5324C24 15.0847 23.5237 15.5324 22.9362 15.5324H7.76404L15.3644 22.1335C15.8079 22.5187 15.8552 23.1906 15.47 23.6342C15.0847 24.0777 14.4128 24.125 13.9693 23.7398L4.36625 15.3993C4.17619 15.2343 4.05889 15.0166 4.01719 14.7868C3.95669 14.4536 4.0559 14.0973 4.31438 13.8407L13.9174 4.30879C14.3344 3.8949 15.0079 3.8974 15.4218 4.31438Z',
     fill: '#fff'
-  })), icon && React__default.createElement("span", {
+  })), typeof icon === 'string' ? React__default.createElement("span", {
     className: icon
-  })), React__default.createElement("div", {
-    className: "e-app-bar--title-wrapper"
+  }) : icon), React__default.createElement("div", {
+    className: 'e-app-bar--title-wrapper'
   }, React__default.createElement("div", {
     className: 'e-app-bar--title',
     onClick: onTitleClick
@@ -247,9 +249,9 @@ var ESewaAppBar = function ESewaAppBar(_ref2) {
   }, titleText))), actionIcon && React__default.createElement("div", {
     className: 'e-app-bar--close-icon',
     onClick: onActionIconClick
-  }, React__default.createElement("span", {
+  }, typeof actionIcon === 'string' ? React__default.createElement("span", {
     className: actionIcon
-  }))));
+  }) : actionIcon)));
 };
 
 var _templateObject$4;
@@ -394,18 +396,18 @@ var ESewaDialog = function ESewaDialog(_ref) {
     className: 'dialog-header'
   }, showLeftIcon && React__default.createElement("div", {
     className: 'dialog-header-left-icon'
-  }, React__default.createElement("span", {
+  }, typeof leftIcon === 'string' ? React__default.createElement("span", {
     className: leftIcon
-  })), title && React__default.createElement("h4", {
+  }) : leftIcon), title && React__default.createElement("h4", {
     className: 'dialog-header-title'
   }, title), showCloseIcon && React__default.createElement("div", {
     className: 'dialog-header-close-icon',
     onClick: function onClick() {
       return closeDialog();
     }
-  }, React__default.createElement("span", {
+  }, typeof closeIcon === 'string' ? React__default.createElement("span", {
     className: closeIcon
-  }))), React__default.createElement("div", {
+  }) : closeIcon)), React__default.createElement("div", {
     className: 'dialog-body'
   }, React__default.createElement("div", {
     className: 'body2'
@@ -568,7 +570,7 @@ var ESewaImage = function ESewaImage(_ref2) {
 
 var _excluded$2 = ["type", "name", "label", "placeholder", "value", "checked", "min", "max", "step", "required", "readOnly", "disabled", "className", "onChange", "validationMessage", "autoFocus"];
 var _templateObject$a;
-var StyledInput = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  .flex-auto {\n    flex: 1 1 auto !important;\n  }\n  .full-width {\n    display: flex;\n    width: 100%;\n  }\n\n  label {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 17px;\n    letter-spacing: 0.15px;\n    color: ", ";\n  }\n\n  input {\n    flex-grow: 1;\n    border-radius: var(--values-value-8);      \n    padding: var(--values-value-10) var(--values-value-12);\n    color: var(--text-dark);\n    background: var(--input-bg);\n    transition: background-color 0.2s, color 0.2s, border-color 0.2s,\n      box-shadow 0.2s;\n    appearance: none;\n    outline-color: transparent;\n    height: 48px;\n    border: 1px solid var(--default-input-border);\n    box-sizing: border-box;\n\n    &::placeholder {\n      color: var(--input-placeholder);\n      letter-spacing: 0.5px;\n      font-weight: 400;\n      opacity: 1;\n    }\n\n    &:focus-visible {\n      border: 1px solid var(--default-input-border);\n      outline: 1px solid var(--primary);\n    }\n    &.error {\n      border-color: var(--danger-border);\n      outline: none;\n    }\n\n    ::-ms-input-placeholder {\n      color: var(--input-placeholder);\n      font-weight: 400;\n      letter-spacing: 0.5px;\n      font-size: 16px;\n      line-height: 20px;\n    }\n  }\n\n  .validationMessage {\n    color: var(--danger-text);\n  }\n"])), function (props) {
+var StyledInput = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  .flex-auto {\n    flex: 1 1 auto !important;\n  }\n  .full-width {\n    display: flex;\n    width: 100%;\n  }\n\n  label {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 17px;\n    letter-spacing: 0.15px;\n    color: ", ";\n  }\n\n  input {\n    width: 100%;\n    border-radius: var(--values-value-8);      \n    padding: var(--values-value-10) var(--values-value-12);\n    color: var(--text-dark);\n    background: var(--input-bg);\n    transition: background-color 0.2s, color 0.2s, border-color 0.2s,\n      box-shadow 0.2s;\n    appearance: none;\n    outline-color: transparent;\n    height: 48px;\n    border: 1px solid var(--default-input-border);\n    box-sizing: border-box;\n\n    &::placeholder {\n      color: var(--input-placeholder);\n      letter-spacing: 0.5px;\n      font-weight: 400;\n      opacity: 1;\n    }\n\n    &:focus-visible {\n      border: 1px solid var(--default-input-border);\n      outline: 1px solid var(--primary);\n    }\n    &.error {\n      border-color: var(--danger-border);\n      outline: none;\n    }\n\n    ::-ms-input-placeholder {\n      color: var(--input-placeholder);\n      font-weight: 400;\n      letter-spacing: 0.5px;\n      font-size: 16px;\n      line-height: 20px;\n    }\n  }\n\n  .validationMessage {\n    color: var(--danger-text);\n  }\n"])), function (props) {
   return props.theme['text-dark'];
 });
 var ESewaInputField = React.forwardRef(function (_ref, ref) {
@@ -6833,11 +6835,15 @@ var ESewaTag = function ESewaTag(_ref) {
     onClick: onClick
   }, icon && iconPosition === 'start' && React__default.createElement("span", {
     className: 'tag__icon'
-  }, icon), React__default.createElement("span", {
+  }, typeof icon === 'string' ? React__default.createElement("span", {
+    className: icon
+  }) : icon), React__default.createElement("span", {
     className: 'tag__text'
   }, text), icon && iconPosition === 'end' && React__default.createElement("span", {
     className: 'tag__icon'
-  }, icon)));
+  }, typeof icon === 'string' ? React__default.createElement("span", {
+    className: icon
+  }) : icon)));
 };
 
 var _templateObject$i;
@@ -6988,7 +6994,7 @@ var ESewaCarousel = function ESewaCarousel(_ref) {
 
 var _templateObject$k, _templateObject2;
 var ChipContainer = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px;\n"])));
-var Chip = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 12px;\n  border-radius: 16px;\n  cursor: pointer;\n  font-size: 14px;\n  background-color: ", ";\n  color: ", ";\n  &.border-radius-0 {\n    border-radius: var(--values-value-0);\n  }\n  &.border-radius-2 {\n    border-radius: var(--values-value-2);\n  }\n  &.border-radius-4 {\n    border-radius: var(--values-value-4);\n  }\n  &.border-radius-8 {\n    border-radius: var(--values-value-8);\n  }\n  &.border-radius-16 {\n    border-radius: var(--values-value-16);\n  }\n  i{\n    font-size: var(--values-value-12);\n  }\n"])), function (_ref) {
+var Chip = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 12px;\n  border-radius: 16px;\n  cursor: pointer;\n  font-size: 14px;\n  background-color: ", ";\n  color: ", ";\n  &.border-radius-0 {\n    border-radius: var(--values-value-0);\n  }\n  &.border-radius-2 {\n    border-radius: var(--values-value-2);\n  }\n  &.border-radius-4 {\n    border-radius: var(--values-value-4);\n  }\n  &.border-radius-8 {\n    border-radius: var(--values-value-8);\n  }\n  &.border-radius-16 {\n    border-radius: var(--values-value-16);\n  }\n  i{\n    font-size: var(--values-value-12);\n  }\n  .chip__icon {\n    display: flex;\n    align-items: center;\n    font-size: var(--values-value-12);\n  }\n"])), function (_ref) {
   var selected = _ref.selected;
   return selected ? 'var(--primary-500)' : 'var(--secondary-bg-light)';
 }, function (_ref2) {
@@ -7022,9 +7028,11 @@ var ESewaChipGroup = function ESewaChipGroup(_ref3) {
       onClick: function onClick() {
         return handleSelectChip(chip.id);
       }
-    }, chip.showIcon && chip.icon && React__default.createElement("i", {
+    }, chip.showIcon && chip.icon && React__default.createElement("span", {
+      className: "chip__icon"
+    }, typeof chip.icon === 'string' ? React__default.createElement("i", {
       className: chip.icon
-    }), chip.text);
+    }) : chip.icon), chip.text);
   }));
 };
 
@@ -7126,9 +7134,11 @@ var ESIcon = function ESIcon(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 28 : _ref$size,
     iconPrimaryColor = _ref.iconPrimaryColor,
-    iconSecondaryColor = _ref.iconSecondaryColor;
+    iconSecondaryColor = _ref.iconSecondaryColor,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
   return React__default.createElement(StyledIcon, {
-    className: "es-" + icon,
+    className: className + " " + icon,
     style: {
       fontSize: size,
       "--icon-primary-color": iconPrimaryColor,