react-better-html 1.1.157 → 1.1.159

package/dist/index.js

@@ -59,17 +59,21 @@ __export(index_exports, {
   countries: () => countries,
   darkenColor: () => darkenColor,
   defaultAlertsPluginOptions: () => defaultAlertsPluginOptions,
+  defaultLocalStoragePluginOptions: () => defaultLocalStoragePluginOptions,
+  defaultReactRouterDomPluginOptions: () => defaultReactRouterDomPluginOptions,
   desaturateColor: () => desaturateColor,
   eventPreventDefault: () => eventPreventDefault,
   eventPreventStop: () => eventPreventStop,
   eventStopPropagation: () => eventStopPropagation,
   formatPhoneNumber: () => formatPhoneNumber,
+  generateLocalStorage: () => generateLocalStorage,
   generateRandomString: () => generateRandomString,
   getBrowser: () => getBrowser,
   getFormErrorObject: () => getFormErrorObject,
   isMobileDevice: () => isMobileDevice,
   lightenColor: () => lightenColor,
   loaderControls: () => loaderControls,
+  localStoragePlugin: () => localStoragePlugin,
   reactRouterDomPlugin: () => reactRouterDomPlugin,
   saturateColor: () => saturateColor,
   useAlertControls: () => useAlertControls,
@@ -1615,19 +1619,6 @@ var import_react8 = require("react");
 var import_react7 = require("react");
 var import_styled_components6 = __toESM(require("styled-components"));
 
-// src/plugins/react-router-dom.ts
-var import_react_router_dom = require("react-router-dom");
-var reactRouterDomPlugin = () => ({
-  name: "react-router-dom",
-  components: {
-    Link: import_react_router_dom.Link,
-    NavLink: import_react_router_dom.NavLink
-  },
-  initialize: () => {
-    console.log("react-router-dom plugin initialized");
-  }
-});
-
 // src/plugins/alerts.ts
 var defaultAlertsPluginOptions = {
   position: "bottom",
@@ -1648,6 +1639,39 @@ var alertsPlugin = (options) => ({
   })
 });
 
+// src/plugins/reactRouterDom.ts
+var import_react_router_dom = require("react-router-dom");
+var defaultReactRouterDomPluginOptions = {};
+var reactRouterDomPlugin = (options) => ({
+  name: "react-router-dom",
+  components: {
+    Link: import_react_router_dom.Link,
+    NavLink: import_react_router_dom.NavLink
+  },
+  initialize: () => {
+    console.log("react-router-dom plugin initialized");
+  },
+  getConfig: () => ({
+    ...defaultReactRouterDomPluginOptions,
+    ...options
+  })
+});
+
+// src/plugins/localStorage.ts
+var defaultLocalStoragePluginOptions = {
+  encryption: {}
+};
+var localStoragePlugin = (options) => ({
+  name: "localStorage",
+  initialize: () => {
+    console.log("localStorage plugin initialized");
+  },
+  getConfig: () => ({
+    ...defaultLocalStoragePluginOptions,
+    ...options
+  })
+});
+
 // src/components/Icon.tsx
 var import_react = require("react");
 var import_styled_components = __toESM(require("styled-components"));
@@ -2726,12 +2750,17 @@ function useStyledComponentStyles(props, theme2, excludeProps) {
         haveHover = true;
         const normalKey = key.slice(0, -5);
         hoverStyle[normalKey] = props[key];
+        if (normalKey === "transition") hoverStyle.WebkitTransition = hoverStyle.transition;
       } else {
         if (!cssProps[key.toLowerCase()]) continue;
         normalStyle[key] = props[key];
+        if (key === "transition") normalStyle.WebkitTransition = normalStyle.transition;
       }
     }
-    if (haveHover) normalStyle.transition = theme2?.styles.transition ?? "";
+    if (haveHover) {
+      normalStyle.transition = theme2?.styles.transition ?? "";
+      normalStyle.WebkitTransition = normalStyle.transition;
+    }
     return {
       normalStyle,
       hoverStyle
@@ -4396,13 +4425,15 @@ var countries = [
     name: "Finland",
     code: "FI",
     timeZone: "Europe/Helsinki",
-    phoneNumberExtension: "358"
+    phoneNumberExtension: "358",
+    phoneNumberFormat: "XX XXX XX XX"
   },
   {
     name: "France",
     code: "FR",
     timeZone: "Europe/Paris",
-    phoneNumberExtension: "33"
+    phoneNumberExtension: "33",
+    phoneNumberFormat: "X XX XX XX XX"
   },
   {
     name: "French Guiana",
@@ -4445,7 +4476,7 @@ var countries = [
     code: "DE",
     timeZone: "Europe/Berlin",
     phoneNumberExtension: "49",
-    phoneNumberFormat: "XXXX XXXXXX"
+    phoneNumberFormat: "XXXX XXXXXXX"
   },
   {
     name: "Ghana",
@@ -5421,6 +5452,62 @@ var countries = [
   }
 ];
 
+// src/utils/functions.ts
+var import_crypto_js = __toESM(require("crypto-js"));
+
+// src/utils/variableFunctions.ts
+var checkBetterHtmlContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
+    );
+  }
+  return value !== void 0;
+};
+var loaderControls = {
+  startLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: true
+    }));
+  },
+  stopLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: false
+    }));
+  }
+};
+var alertControls = {
+  createAlert: (alert) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
+      return void 0;
+    const readyAlert = {
+      id: crypto.randomUUID(),
+      ...alert
+    };
+    externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
+    return readyAlert;
+  },
+  removeAlert: (alertId) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
+    externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
+  }
+};
+var colorThemeControls = {
+  toggleTheme: (theme2) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
+    const currentColorTheme = externalBetterHtmlContextValue.colorTheme;
+    const newColorTheme = theme2 ?? (currentColorTheme === "dark" ? "light" : "dark");
+    setTimeout(() => {
+      window.document.body.parentElement?.setAttribute("data-theme", newColorTheme);
+      localStorage.setItem("theme", newColorTheme);
+    }, 0.01 * 1e3);
+  }
+};
+
 // src/utils/functions.ts
 var generateRandomString = (stringLength, options) => {
   const capitals = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
@@ -5492,6 +5579,40 @@ var eventPreventStop = (event) => {
   event.preventDefault();
   event.stopPropagation();
 };
+var encryptString = (text) => {
+  if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "encryptString")) return void 0;
+  const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find((plugin) => plugin.name === "localStorage");
+  if (!localStoragePlugin2) {
+    throw new Error(
+      "`encryptString` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+    );
+  }
+  const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+  if (!pluginConfig?.encryption?.enabled) return text;
+  const encrypted = import_crypto_js.default.AES.encrypt(text, import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.secretKey), {
+    iv: import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.iv),
+    mode: import_crypto_js.default.mode.CBC,
+    padding: import_crypto_js.default.pad.Pkcs7
+  }).toString();
+  return encrypted;
+};
+var decryptString = (text) => {
+  if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "decryptString")) return void 0;
+  const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find((plugin) => plugin.name === "localStorage");
+  if (!localStoragePlugin2) {
+    throw new Error(
+      "`decryptString` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+    );
+  }
+  const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+  if (!pluginConfig?.encryption?.enabled) return text;
+  const decrypted = import_crypto_js.default.AES.decrypt(text, import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.secretKey), {
+    iv: import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.iv),
+    mode: import_crypto_js.default.mode.CBC,
+    padding: import_crypto_js.default.pad.Pkcs7
+  });
+  return decrypted.toString(import_crypto_js.default.enc.Utf8);
+};
 
 // src/components/Label.tsx
 var import_react17 = require("react");
@@ -5894,8 +6015,18 @@ var getWeekDayName = (day, short = false) => {
 };
 var weekDaysIndex = [1, 2, 3, 4, 5, 6, 0];
 var yearsRange = Array.from({ length: 100 + 1 + 50 }, (_, index) => index + (/* @__PURE__ */ new Date()).getFullYear() - 100);
+var SelectWrapperComponent = import_styled_components10.default.div.withConfig({
+  shouldForwardProp: (prop) => !["theme"].includes(prop)
+})`
+   &:has(select:focus) {
+      outline: auto;
+      outline-color: -webkit-focus-ring-color;
+      outline-style: auto;
+      outline-offset: 2px;
+   }
+`;
 var SelectComponent = import_styled_components10.default.select.withConfig({
-  shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme"].includes(prop)
 })`
    position: absolute;
    top: 50%;
@@ -5905,6 +6036,7 @@ var SelectComponent = import_styled_components10.default.select.withConfig({
 `;
 function Calendar({ value, minDate, maxDate, onChange }) {
   const theme2 = useTheme();
+  const internalYearSelectId = (0, import_react19.useId)();
   const [currentDate, setCurrentDate] = (0, import_react19.useState)(value ? new Date(value) : void 0);
   const [currentMonth, setCurrentMonth] = (0, import_react19.useState)(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
   const [currentYear, setCurrentYear] = (0, import_react19.useState)(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
@@ -5972,11 +6104,20 @@ function Calendar({ value, minDate, maxDate, onChange }) {
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { alignItems: "center", gap: 4, children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectWrapperComponent, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: currentYear }),
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: "chevronDown", size: 12 }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectComponent, { theme: theme2, value: currentYear, onChange: onChangeYearSelect, children: yearsRange.map((year) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: year, children: year }, year)) })
-        ] })
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            SelectComponent,
+            {
+              theme: theme2,
+              value: currentYear,
+              onChange: onChangeYearSelect,
+              id: internalYearSelectId,
+              children: yearsRange.map((year) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: year, children: year }, year))
+            }
+          )
+        ] }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
@@ -6100,6 +6241,10 @@ var InputElement = import_styled_components11.default.input.withConfig({
       cursor: not-allowed;
    }
 
+   &:read-only {
+      caret-color: transparent;
+   }
+
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
       -webkit-appearance: none;
@@ -6756,6 +6901,7 @@ InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime(
                         width: buttonWidth,
                         height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
+                        tabIndex: -1,
                         children: hours.map((hour) => {
                           const isSelected = hour.toString() === valueHour;
                           return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -6789,6 +6935,7 @@ InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime(
                         width: buttonWidth,
                         height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
+                        tabIndex: -1,
                         children: minutes.map((minute) => {
                           const isSelected = minute.toString() === valueMinute;
                           return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -6877,46 +7024,66 @@ InputFieldComponent.time = (0, import_react20.forwardRef)(function Time({ ...pro
           userSelect: "none",
           ...insideInputFieldComponentProps,
           children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { height: "100%", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: hours.map((hour) => {
-              const isSelected = hour.toString() === valueHour;
-              return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                  backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                  filterHover: "brightness(0.9)",
-                  cursor: "pointer",
-                  padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                  value: hour,
-                  onClickWithValue: onClickHour,
-                  ref: isSelected ? selectedHourRef : void 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
-                },
-                hour
-              );
-            }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: minutes.map((minute) => {
-              const isSelected = minute.toString() === valueMinute;
-              return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                  backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                  filterHover: "brightness(0.9)",
-                  cursor: "pointer",
-                  padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                  value: minute,
-                  onClickWithValue: onClickMinute,
-                  ref: isSelected ? selectedMinuteRef : void 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
-                },
-                minute
-              );
-            }) })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              Div_default,
+              {
+                className: "react-better-html-no-scrollbar",
+                width: buttonWidth,
+                height: "100%",
+                overflowY: "auto",
+                tabIndex: -1,
+                children: hours.map((hour) => {
+                  const isSelected = hour.toString() === valueHour;
+                  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    Div_default.row,
+                    {
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                      filterHover: "brightness(0.9)",
+                      cursor: "pointer",
+                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                      value: hour,
+                      onClickWithValue: onClickHour,
+                      ref: isSelected ? selectedHourRef : void 0,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                    },
+                    hour
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              Div_default,
+              {
+                className: "react-better-html-no-scrollbar",
+                width: buttonWidth,
+                height: "100%",
+                overflowY: "auto",
+                tabIndex: -1,
+                children: minutes.map((minute) => {
+                  const isSelected = minute.toString() === valueMinute;
+                  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    Div_default.row,
+                    {
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                      filterHover: "brightness(0.9)",
+                      cursor: "pointer",
+                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                      value: minute,
+                      onClickWithValue: onClickMinute,
+                      ref: isSelected ? selectedMinuteRef : void 0,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                    },
+                    minute
+                  );
+                })
+              }
+            )
           ] })
         }
       ) : void 0,
@@ -7410,61 +7577,6 @@ var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
 var import_react24 = require("react");
-
-// src/utils/variableFunctions.ts
-var checkBetterHtmlContextValue = (value, functionsName) => {
-  if (value === void 0) {
-    throw new Error(
-      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
-    );
-  }
-  return value !== void 0;
-};
-var loaderControls = {
-  startLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: true
-    }));
-  },
-  stopLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: false
-    }));
-  }
-};
-var alertControls = {
-  createAlert: (alert) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
-      return void 0;
-    const readyAlert = {
-      id: crypto.randomUUID(),
-      ...alert
-    };
-    externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
-    return readyAlert;
-  },
-  removeAlert: (alertId) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
-    externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
-  }
-};
-var colorThemeControls = {
-  toggleTheme: (theme2) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
-    const currentColorTheme = externalBetterHtmlContextValue.colorTheme;
-    const newColorTheme = theme2 ?? (currentColorTheme === "dark" ? "light" : "dark");
-    setTimeout(() => {
-      window.document.body.parentElement?.setAttribute("data-theme", newColorTheme);
-      localStorage.setItem("theme", newColorTheme);
-    }, 0.01 * 1e3);
-  }
-};
-
-// src/components/ColorThemeSwitch.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
@@ -9068,6 +9180,71 @@ FoldableComponent.box = (0, import_react28.forwardRef)(function Box3({ ...props
 var Foldable2 = (0, import_react28.memo)(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
+
+// src/utils/localStorage.ts
+function generateLocalStorage() {
+  return {
+    setItem: (name, value) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
+      );
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
+      }
+      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      const readyValue = encryptionEnabled ? encryptString(JSON.stringify(value)) : JSON.stringify(value);
+      if (value) localStorage.setItem(readyName.toString(), readyValue);
+      else localStorage.removeItem(readyName.toString());
+    },
+    getItem: (name) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
+      );
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
+      }
+      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      const item = localStorage.getItem(readyName.toString());
+      if (item === null) return void 0;
+      try {
+        return encryptionEnabled ? JSON.parse(decryptString(item)) : JSON.parse(item);
+      } catch (error) {
+        return void 0;
+      }
+    },
+    removeItem: (name) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
+      );
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
+      }
+      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      localStorage.removeItem(readyName.toString());
+    },
+    removeAllItems: () => {
+      localStorage.clear();
+    }
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BetterHtmlProvider,
@@ -9099,17 +9276,21 @@ var Foldable_default = Foldable2;
   countries,
   darkenColor,
   defaultAlertsPluginOptions,
+  defaultLocalStoragePluginOptions,
+  defaultReactRouterDomPluginOptions,
   desaturateColor,
   eventPreventDefault,
   eventPreventStop,
   eventStopPropagation,
   formatPhoneNumber,
+  generateLocalStorage,
   generateRandomString,
   getBrowser,
   getFormErrorObject,
   isMobileDevice,
   lightenColor,
   loaderControls,
+  localStoragePlugin,
   reactRouterDomPlugin,
   saturateColor,
   useAlertControls,