xtreme-ui 0.0.118 → 0.0.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xtreme-ui",
-  "version": "0.0.118",
+  "version": "0.0.119",
   "type": "module",
   "description": "Collection of reusable components that can be used in web projects",
   "main": "dist/index.js",
@@ -11,12 +11,12 @@
     "build": "vite build",
     "watch": "vite build -w",
     "build-storybook": "storybook build -o dist/storybook",
-    "lint": "eslint --max-warnings 50"
+    "lint": "eslint --max-warnings 50",
+    "clean": "rm -rf node_modules pnpm-lock.yaml && pnpm install"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.8",
-    "@lottiefiles/dotlottie-react": "^0.13.5",
-    "@storybook/preview-api": "^8.6.14",
+    "@floating-ui/react": "^0.27.12",
+    "@lottiefiles/dotlottie-react": "^0.14.1",
     "@uiw/react-color-alpha": "^2.5.5",
     "@uiw/react-color-shade-slider": "^2.5.5",
     "@uiw/react-color-wheel": "^2.5.5",
@@ -25,51 +25,45 @@
     "color-namer": "^1.4.0",
     "colord": "^2.9.3",
     "globals": "^16.2.0",
-    "react-calendar": "^5.1.0",
-    "react-clock": "^5.1.0",
+    "react-calendar": "^6.0.0",
+    "react-clock": "^6.0.0",
     "react-datetime-picker": "^6.0.1",
     "react-easy-crop": "^5.4.2",
     "react-select": "^5.10.1",
-    "use-file-picker": "^2.1.2"
+    "use-file-picker": "^2.1.4"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
-    "@eslint/js": "^9.27.0",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/components": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.14",
+    "@chromatic-com/storybook": "^4.0.0",
+    "@eslint/js": "^9.28.0",
+    "@storybook/addon-docs": "^9.0.8",
+    "@storybook/addon-links": "^9.0.8",
+    "@storybook/react-vite": "^9.0.8",
     "@types/lodash": "^4.17.17",
-    "@types/node": "^22.15.21",
-    "@types/react": "^19.1.5",
-    "@types/react-dom": "^19.1.5",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
-    "@vitejs/plugin-react": "^4.5.0",
-    "@vitejs/plugin-react-swc": "^3.10.0",
-    "eslint": "^9.27.0",
-    "eslint-import-resolver-typescript": "^4.4.0",
+    "@types/node": "^24.0.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.34.0",
+    "@typescript-eslint/parser": "^8.34.0",
+    "@vitejs/plugin-react": "^4.5.2",
+    "@vitejs/plugin-react-swc": "^3.10.2",
+    "eslint": "^9.28.0",
+    "eslint-import-resolver-typescript": "^4.4.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.0.8",
     "lodash": "^4.17.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.6.1",
-    "sass": "^1.89.0",
-    "storybook": "^8.6.14",
-    "stylelint": "^16.19.1",
+    "react-router-dom": "^7.6.2",
+    "sass": "^1.89.2",
+    "storybook": "^9.0.8",
+    "stylelint": "^16.20.0",
     "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-order": "^7.0.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
+    "typescript-eslint": "^8.34.0",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-linter": "^3.0.1",
@@ -104,5 +98,91 @@
   "bugs": {
     "url": "https://github.com/itzzritik/XtremeUI/issues"
   },
-  "readme": "ERROR: No README data found!"
+  "readme": "ERROR: No README data found!",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./ActionCard": {
+      "import": "./dist/components/base/ActionCard/exports.js",
+      "require": "./dist/components/base/ActionCard/exports.cjs"
+    },
+    "./Avatar": {
+      "import": "./dist/components/base/Avatar/exports.js",
+      "require": "./dist/components/base/Avatar/exports.cjs"
+    },
+    "./Button": {
+      "import": "./dist/components/base/Button/exports.js",
+      "require": "./dist/components/base/Button/exports.cjs"
+    },
+    "./ColorPicker": {
+      "import": "./dist/components/base/ColorPicker/exports.js",
+      "require": "./dist/components/base/ColorPicker/exports.cjs"
+    },
+    "./ColorPopper": {
+      "import": "./dist/components/base/ColorPopper/exports.js",
+      "require": "./dist/components/base/ColorPopper/exports.cjs"
+    },
+    "./DatePicker": {
+      "import": "./dist/components/base/DatePicker/exports.js",
+      "require": "./dist/components/base/DatePicker/exports.cjs"
+    },
+    "./FilePicker": {
+      "import": "./dist/components/base/FilePicker/exports.js",
+      "require": "./dist/components/base/FilePicker/exports.cjs"
+    },
+    "./Icon": {
+      "import": "./dist/components/base/Icon/exports.js",
+      "require": "./dist/components/base/Icon/exports.cjs"
+    },
+    "./Lottie": {
+      "import": "./dist/components/base/Lottie/exports.js",
+      "require": "./dist/components/base/Lottie/exports.cjs"
+    },
+    "./ProgressBar": {
+      "import": "./dist/components/base/ProgressBar/exports.js",
+      "require": "./dist/components/base/ProgressBar/exports.cjs"
+    },
+    "./Select": {
+      "import": "./dist/components/base/Select/exports.js",
+      "require": "./dist/components/base/Select/exports.cjs"
+    },
+    "./Spinner": {
+      "import": "./dist/components/base/Spinner/exports.js",
+      "require": "./dist/components/base/Spinner/exports.cjs"
+    },
+    "./Textfield": {
+      "import": "./dist/components/base/Textfield/exports.js",
+      "require": "./dist/components/base/Textfield/exports.cjs"
+    },
+    "./ImageEditor": {
+      "import": "./dist/components/layout/ImageEditor/exports.js",
+      "require": "./dist/components/layout/ImageEditor/exports.cjs"
+    },
+    "./Navigation": {
+      "import": "./dist/components/layout/Navigation/exports.js",
+      "require": "./dist/components/layout/Navigation/exports.cjs"
+    },
+    "./Sider": {
+      "import": "./dist/components/layout/Sider/exports.js",
+      "require": "./dist/components/layout/Sider/exports.cjs"
+    },
+    "./SiderModal": {
+      "import": "./dist/components/layout/SiderModal/exports.js",
+      "require": "./dist/components/layout/SiderModal/exports.cjs"
+    },
+    "./ThemePicker": {
+      "import": "./dist/components/layout/ThemePicker/exports.js",
+      "require": "./dist/components/layout/ThemePicker/exports.cjs"
+    },
+    "./ThemeSelect": {
+      "import": "./dist/components/layout/ThemeSelect/exports.js",
+      "require": "./dist/components/layout/ThemeSelect/exports.cjs"
+    },
+    "./ThemeSwitch": {
+      "import": "./dist/components/layout/ThemeSwitch/exports.js",
+      "require": "./dist/components/layout/ThemeSwitch/exports.cjs"
+    }
+  }
 }

package/dist/components/base/ActionCard/actionCard.module.scss.js

@@ -1,13 +0,0 @@
-const i = "_actionCard_114zv_1", e = "_miniSize_114zv_14", z = "_smallSize_114zv_17", m = "_mediumSize_114zv_20", _ = {
-  actionCard: i,
-  miniSize: e,
-  smallSize: z,
-  mediumSize: m
-};
-export {
-  i as actionCard,
-  _ as default,
-  m as mediumSize,
-  e as miniSize,
-  z as smallSize
-};

package/dist/components/base/ColorPicker/colorPicker.module.scss.js

@@ -1,13 +0,0 @@
-const e = "_colorPicker_16j6k_1", o = "_wheel_16j6k_5", _ = "_shade_16j6k_9", a = "_alpha_16j6k_9", c = {
-  colorPicker: e,
-  wheel: o,
-  shade: _,
-  alpha: a
-};
-export {
-  a as alpha,
-  e as colorPicker,
-  c as default,
-  _ as shade,
-  o as wheel
-};

package/dist/components/base/Lottie/lottie.module.scss.js

@@ -1,9 +0,0 @@
-const t = "_lottieWrapper_wawrm_1", e = "_lottie_wawrm_1", o = {
-  lottieWrapper: t,
-  lottie: e
-};
-export {
-  o as default,
-  e as lottie,
-  t as lottieWrapper
-};

package/dist/components/base/ProgressBar/progressbar.module.scss.js

@@ -1,11 +0,0 @@
-const r = "_progressBar_192yn_1", s = "_progress_192yn_1", e = "_intermediate_192yn_31", t = {
-  progressBar: r,
-  progress: s,
-  intermediate: e
-};
-export {
-  t as default,
-  e as intermediate,
-  s as progress,
-  r as progressBar
-};

package/dist/components/context/index.js

@@ -1,8 +0,0 @@
-"use client";
-import { jsx as r } from "react/jsx-runtime";
-import { DataProvider as e } from "./Data/DataContext.js";
-import { ThemeProvider as i } from "./Theme/ThemeContext.js";
-const n = ({ children: o }) => /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(e, { children: o }) });
-export {
-  n as XProvider
-};

package/dist/components/hooks/useDebouncedEffect.js

@@ -1,11 +0,0 @@
-"use client";
-import { useEffect as r } from "react";
-const n = (t, o, e) => {
-  r(() => {
-    const c = setTimeout(() => t(), e);
-    return () => clearTimeout(c);
-  }, [...o || [], e]);
-};
-export {
-  n as useDebouncedEffect
-};

package/dist/components/hooks/usePersistingState.js

@@ -1,13 +0,0 @@
-"use client";
-import { useState as n, useEffect as a } from "react";
-import { getLocalState as i, setLocalState as u } from "../../utils/function/localStorage.js";
-const f = (t, r) => {
-  const [e, s] = n(r ?? i(t));
-  return a(() => {
-    const o = () => u(t, e);
-    return window.addEventListener("beforeunload", o), () => window.removeEventListener("beforeunload", o);
-  }, [t, e]), [e, s];
-};
-export {
-  f as usePersistingState
-};

package/dist/components/layout/Navigation/navigation.module.scss.js

@@ -1,21 +0,0 @@
-const t = "_navigation_10g7s_1", o = "_brand_10g7s_10", n = "_routeList_10g7s_19", _ = "_route_10g7s_19", s = "_icon_10g7s_52", a = "_label_10g7s_59", i = "_loading_10g7s_79", c = "_active_10g7s_98", e = {
-  navigation: t,
-  brand: o,
-  routeList: n,
-  route: _,
-  icon: s,
-  label: a,
-  loading: i,
-  active: c
-};
-export {
-  c as active,
-  o as brand,
-  e as default,
-  s as icon,
-  a as label,
-  i as loading,
-  t as navigation,
-  _ as route,
-  n as routeList
-};

package/dist/components/layout/Sider/sider.module.scss.js

@@ -1,21 +0,0 @@
-const e = "_sider_11os5_1", i = "_leftSiderContainer_11os5_13", t = "_rightSiderContainer_11os5_21", n = "_content_11os5_29", r = "_miniLeftSider_11os5_39", o = "_miniRightSider_11os5_46", _ = "_leftOpen_11os5_53", s = "_rightOpen_11os5_66", d = {
-  sider: e,
-  leftSiderContainer: i,
-  rightSiderContainer: t,
-  content: n,
-  miniLeftSider: r,
-  miniRightSider: o,
-  leftOpen: _,
-  rightOpen: s
-};
-export {
-  n as content,
-  d as default,
-  _ as leftOpen,
-  i as leftSiderContainer,
-  r as miniLeftSider,
-  o as miniRightSider,
-  s as rightOpen,
-  t as rightSiderContainer,
-  e as sider
-};

package/dist/components/layout/SiderModal/siderModal.module.scss.js

@@ -1,19 +0,0 @@
-const t = "_siderModal_1rtdm_1", o = "_header_1rtdm_8", _ = "_back_1rtdm_16", d = "_icon_1rtdm_21", e = "_title_1rtdm_21", r = "_footer_1rtdm_28", c = "_body_1rtdm_37", s = {
-  siderModal: t,
-  header: o,
-  back: _,
-  icon: d,
-  title: e,
-  footer: r,
-  body: c
-};
-export {
-  _ as back,
-  c as body,
-  s as default,
-  r as footer,
-  o as header,
-  d as icon,
-  t as siderModal,
-  e as title
-};

package/dist/index.js

@@ -1,112 +0,0 @@
-/* empty css                  */
-import { FACE_ICONS as t } from "./utils/constants/iconCollection.js";
-import { STORAGE as p, THEME_SCHEME as f, ThemeColorsPreset as i, defaultColorPreset as x } from "./utils/constants/theme.js";
-import { isEqual as s } from "./utils/function/common.js";
-import { getLocalState as n, setLocalState as c } from "./utils/function/localStorage.js";
-import { assignRef as S, mergeRefs as C } from "./utils/function/mergeRefs.js";
-import { capitalize as P, safeStringFromCodePoint as E, unicodeToString as T } from "./utils/function/string.js";
-import { doc as I, elementObserver as h, getCssProperty as y, getCssPropertyPx as z, getCssPropertyVh as A, getCssPropertyVw as F, isClient as k, localStore as v, setCssProperty as L, waitForElement as w, win as D } from "./utils/helper/domHelper.js";
-import { getColorLabel as b, guessClosestColorName as B, isValidThemeColor as M } from "./utils/helper/colorHelper.js";
-import { createImage as O, getCroppedImg as V, getImageSize as X, getRadianAngle as H, readImageFile as _, readImageSrc as q } from "./utils/helper/imageHelper.js";
-import { themeController as j } from "./utils/helper/themeController.js";
-import { XProvider as K } from "./components/context/index.js";
-import { useXData as U, useXTheme as W } from "./components/context/useContext.js";
-import { ActionCard as Z } from "./components/base/ActionCard/ActionCard.js";
-import { EActionCardSize as ee } from "./components/base/ActionCard/types.js";
-import { Avatar as oe } from "./components/base/Avatar/Avatar.js";
-import { EAvatarSize as me } from "./components/base/Avatar/types.js";
-import { Button as fe } from "./components/base/Button/Button.js";
-import { EButtonTypes as xe } from "./components/base/Button/types.js";
-import { Icon as se } from "./components/base/Icon/Icon.js";
-import { EIconSize as ne } from "./components/base/Icon/types.js";
-import { Lottie as ge } from "./components/base/Lottie/Lottie.js";
-import { ELottieSize as Ce } from "./components/base/Lottie/types.js";
-import { ProgressBar as Pe } from "./components/base/ProgressBar/ProgressBar.js";
-import { Spinner as Te } from "./components/base/Spinner/Spinner.js";
-import { ESpinnerSize as Ie } from "./components/base/Spinner/types.js";
-import { Textfield as ye } from "./components/base/Textfield/Textfield.js";
-import { DatePicker as Ae } from "./components/base/DatePicker/DatePicker.js";
-import { EDatePickerTypes as ke } from "./components/base/DatePicker/types.js";
-import { FilePicker as Le } from "./components/base/FilePicker/FilePicker.js";
-import { FilePickerIcon as De } from "./components/base/FilePicker/types.js";
-import { Select as be } from "./components/base/Select/Select.js";
-import { ColorPopper as Me } from "./components/base/ColorPopper/ColorPopper.js";
-import { Sider as Oe } from "./components/layout/Sider/Sider.js";
-import { SiderModal as Xe } from "./components/layout/SiderModal/SiderModal.js";
-import { Navigation as _e } from "./components/layout/Navigation/Navigation.js";
-import { ThemePicker as Ge } from "./components/layout/ThemePicker/ThemePicker.js";
-import { ThemeSelect as Je } from "./components/layout/ThemeSelect/ThemeSelect.js";
-import { ThemeSwitch as Qe } from "./components/layout/ThemeSwitch/ThemeSwitch.js";
-import { ImageEditor as We } from "./components/layout/ImageEditor/ImageEditor.js";
-import { useScreenType as Ze } from "./components/hooks/useScreen.js";
-import { usePersistingState as er } from "./components/hooks/usePersistingState.js";
-import { useDebouncedEffect as or } from "./components/hooks/useDebouncedEffect.js";
-export {
-  Z as ActionCard,
-  oe as Avatar,
-  fe as Button,
-  Me as ColorPopper,
-  Ae as DatePicker,
-  ee as EActionCardSize,
-  me as EAvatarSize,
-  xe as EButtonTypes,
-  ke as EDatePickerTypes,
-  ne as EIconSize,
-  Ce as ELottieSize,
-  Ie as ESpinnerSize,
-  t as FACE_ICONS,
-  Le as FilePicker,
-  De as FilePickerIcon,
-  se as Icon,
-  We as ImageEditor,
-  ge as Lottie,
-  _e as Navigation,
-  Pe as ProgressBar,
-  p as STORAGE,
-  be as Select,
-  Oe as Sider,
-  Xe as SiderModal,
-  Te as Spinner,
-  f as THEME_SCHEME,
-  ye as Textfield,
-  i as ThemeColorsPreset,
-  Ge as ThemePicker,
-  Je as ThemeSelect,
-  Qe as ThemeSwitch,
-  K as XProvider,
-  S as assignRef,
-  P as capitalize,
-  O as createImage,
-  x as defaultColorPreset,
-  I as doc,
-  h as elementObserver,
-  b as getColorLabel,
-  V as getCroppedImg,
-  y as getCssProperty,
-  z as getCssPropertyPx,
-  A as getCssPropertyVh,
-  F as getCssPropertyVw,
-  X as getImageSize,
-  n as getLocalState,
-  H as getRadianAngle,
-  B as guessClosestColorName,
-  k as isClient,
-  s as isEqual,
-  M as isValidThemeColor,
-  v as localStore,
-  C as mergeRefs,
-  _ as readImageFile,
-  q as readImageSrc,
-  E as safeStringFromCodePoint,
-  L as setCssProperty,
-  c as setLocalState,
-  j as themeController,
-  T as unicodeToString,
-  or as useDebouncedEffect,
-  er as usePersistingState,
-  Ze as useScreenType,
-  U as useXData,
-  W as useXTheme,
-  w as waitForElement,
-  D as win
-};

package/dist/utils/function/localStorage.js

@@ -1,21 +0,0 @@
-import { localStore as c } from "../helper/domHelper.js";
-const n = (r, o) => {
-  var e;
-  try {
-    const t = (e = c) == null ? void 0 : e.getItem(r);
-    return t ? JSON.parse(t) : o ?? "";
-  } catch (t) {
-    return console.log(t), o ?? "";
-  }
-}, a = (r, o) => {
-  var e;
-  try {
-    (e = c) == null || e.setItem(r, JSON.stringify(o));
-  } catch (t) {
-    console.log(t);
-  }
-};
-export {
-  n as getLocalState,
-  a as setLocalState
-};

package/dist/utils/helper/domHelper.js

@@ -1,38 +0,0 @@
-const c = typeof window < "u", o = c ? window : void 0, f = c ? document : void 0, g = c ? localStorage : void 0, s = (n, e) => c ? getComputedStyle((e == null ? void 0 : e.current) || document.documentElement).getPropertyValue(n) : "", h = (n, e) => parseInt(s(n, e).replace(/px/g, "")), b = (n, e) => {
-  const t = parseInt(s(n, e).replace(/vh/g, ""));
-  return [((o == null ? void 0 : o.innerHeight) ?? 0) * t / 100, t];
-}, l = (n, e) => {
-  const t = parseInt(s(n, e).replace(/vw/g, ""));
-  return [((o == null ? void 0 : o.innerWidth) ?? 0) * t / 100, t];
-}, P = (n, e, t) => c ? ((t == null ? void 0 : t.current) || document.documentElement).style.setProperty(n, e) : "", w = (n) => new Promise((e) => {
-  let t = document.querySelector(n);
-  if (t) return e(t);
-  const r = new MutationObserver(() => {
-    t = document.querySelector(n), t && (e(t), r.disconnect());
-  });
-  r.observe(document.body, { childList: !0, subtree: !0 });
-}), C = (n, e) => {
-  var t;
-  (t = e == null ? void 0 : e.forEach) == null || t.call(e, (r) => {
-    let d;
-    new MutationObserver((u) => {
-      var a;
-      document.querySelector(r) && (d = document.querySelector(r)), (a = u == null ? void 0 : u.forEach) == null || a.call(u, (i) => {
-        i.type === "childList" && (Array.from(i.addedNodes).indexOf(d) > -1 && n(d, "added", i), Array.from(i.removedNodes).indexOf(d) > -1 && n(d, "removed", i));
-      });
-    }).observe(document.body, { childList: !0, subtree: !0 });
-  });
-};
-export {
-  f as doc,
-  C as elementObserver,
-  s as getCssProperty,
-  h as getCssPropertyPx,
-  b as getCssPropertyVh,
-  l as getCssPropertyVw,
-  c as isClient,
-  g as localStore,
-  P as setCssProperty,
-  w as waitForElement,
-  o as win
-};

package/dist/utils/helper/themeController.js

@@ -1,52 +0,0 @@
-import { defaultScheme as a } from "../../components/context/Theme/types.js";
-import { defaultColorPreset as h, STORAGE as e } from "../constants/theme.js";
-const S = ({
-  scheme: t,
-  color: o,
-  defScheme: r = a,
-  defColor: m = h
-} = {}) => {
-  const l = t != null ? `'${t}'` : "null", n = o ? JSON.stringify(o) : "null", c = JSON.stringify(m);
-  return `(function() {
-		try {
-			let storedScheme = localStorage.getItem('${e.themeScheme}');
-			const themeScheme = ${l} ?? storedScheme ?? '${r}';
-
-			const themeColorRaw = localStorage.getItem('${e.themeColor}');
-			let { h, s, l } = ${c};
-
-			const preferredColor = ${n};
-
-			if (preferredColor) {
-				({ h, s, l } = preferredColor);
-			} else {
-				try {
-					const parsed = JSON.parse(themeColorRaw);
-					if (parsed && typeof parsed.h === 'number' && typeof parsed.s === 'number' && typeof parsed.l === 'number') {
-						({ h, s, l } = parsed);
-					}
-				} catch {}
-			}
-
-			document.documentElement.setAttribute('${e.themeSchemeAttr}', themeScheme);
-
-			const style = document.getElementById('${e.themeColor}') || 
-				document.head.appendChild(Object.assign(document.createElement('style'), { id: '${e.themeColor}' }));
-			style.textContent = \`:root{ --H: \${h}; --S: \${s}%; --L: \${l}% }\`;
-
-			let meta = document.head.querySelector('meta[name="theme-color"]');
-			if (!meta) {
-				meta = document.createElement('meta');
-				meta.name = 'theme-color';
-				document.head.appendChild(meta);
-			}
-			meta.content = \`hsl(\${h},\${s}%,\${l}%)\`;
-
-			localStorage.setItem('${e.themeScheme}', themeScheme);
-			localStorage.setItem('${e.themeColor}', JSON.stringify({ h, s, l }));
-		} catch {}
-	})();`;
-};
-export {
-  S as themeController
-};