esewa-ui-library 1.0.8 → 1.10.0

package/README.md

@@ -478,6 +478,7 @@ The `ESewaChipGroup` component is a customizable chip group component built with
 | `required`      | `boolean?`                       | `false`       | If true, ensures that at least one chip is selected when the selection mode is `'multiple'`.                                                                  |
 | `chips`         | `ChipProps[]`                    | Required      | An array of chips to display. Each chip includes a text label, an optional icon, and an ID.                                                                  |
 | `className`     | `string?`                        | `''`          | Optional custom class name for styling the chip container.                                                                                                    |
+| `onChange`    | `(selected: number[] | number) => void?` | `undefined` | Callback function to handle chip state change. |
 
 # ESewaDatePicker
 

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

@@ -4,6 +4,7 @@ interface ChipGroupProps {
     required?: boolean;
     chips: ChipProps[];
     className?: string;
+    onChange?: (selected: number[] | number) => void;
 }
 interface ChipProps {
     showIcon?: boolean;

package/dist/index.js

@@ -7005,18 +7005,31 @@ var ESewaChipGroup = function ESewaChipGroup(_ref3) {
   var selection = _ref3.selection,
     required = _ref3.required,
     chips = _ref3.chips,
-    className = _ref3.className;
+    className = _ref3.className,
+    onChange = _ref3.onChange;
   var _useState = React.useState([]),
     selectedChips = _useState[0],
     setSelectedChips = _useState[1];
   var handleSelectChip = function handleSelectChip(id) {
     if (selection === 'single') {
       setSelectedChips([id]);
+      onChange === null || onChange === void 0 ? void 0 : onChange(id);
     } else {
       setSelectedChips(function (prev) {
-        return prev.includes(id) ? required && prev.length === 1 ? prev : prev.filter(function (chipId) {
-          return chipId !== id;
-        }) : [].concat(prev, [id]);
+        var updated;
+        if (prev.includes(id)) {
+          if (required && prev.length === 1) {
+            updated = prev;
+          } else {
+            updated = prev.filter(function (chipId) {
+              return chipId !== id;
+            });
+          }
+        } else {
+          updated = [].concat(prev, [id]);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(updated);
+        return updated;
       });
     }
   };
@@ -7641,14 +7654,21 @@ var darkTheme = _extends({}, theme, darkThemeColors);
 
 var ESewaThemeProvider = function ESewaThemeProvider(_ref) {
   var children = _ref.children;
-  var updateDocumentTheme = function updateDocumentTheme(theme) {
-    document.documentElement.setAttribute('data-theme', theme);
-  };
-  var themeType = window.matchMedia('(prefers-color-scheme: dark)').matches ? darkTheme : lightTheme;
-  var themeColor = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  var _useState = React.useState(lightTheme),
+    themeType = _useState[0],
+    setThemeType = _useState[1];
+  var _useState2 = React.useState('light'),
+    setThemeColor = _useState2[1];
   React.useEffect(function () {
-    updateDocumentTheme(themeColor);
-  }, [themeType, themeColor]);
+    if (typeof window !== 'undefined') {
+      var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      var newThemeType = prefersDark ? darkTheme : lightTheme;
+      var newThemeColor = prefersDark ? 'dark' : 'light';
+      setThemeType(newThemeType);
+      setThemeColor(newThemeColor);
+      document.documentElement.setAttribute('data-theme', newThemeColor);
+    }
+  }, []);
   return React__default.createElement(styled.ThemeProvider, {
     theme: themeType
   }, children);