xtreme-ui 0.0.14 → 0.0.15

package/dist/components/context/DataContext.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { TSiderModes } from '../layout/Sider/types';
+declare const DataContext: import("react").Context<DataDefaultType>;
+declare const DataProvider: ({ children }: DataProviderProps) => import("react/jsx-runtime").JSX.Element;
+export { DataProvider, DataContext };
+export interface DataDefaultType {
+    siderMode: TSiderModes;
+    setSiderMode: (mode: TSiderModes) => void;
+}
+interface DataProviderProps {
+    children?: ReactNode;
+}

package/dist/components/context/DataContext.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as s, useState as d } from "react";
+import a from "lodash/noop.js";
+const i = {
+  siderMode: "closed",
+  setSiderMode: a
+}, n = s(i), p = ({ children: e }) => {
+  const [o, t] = d("closed");
+  return /* @__PURE__ */ r(n.Provider, { value: { siderMode: o, setSiderMode: t }, children: e });
+};
+export {
+  n as DataContext,
+  p as DataProvider
+};

package/dist/components/context/index.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare const XProvider: ({ children }: XProviderProps) => import("react/jsx-runtime").JSX.Element;
+interface XProviderProps {
+    children?: ReactNode;
+}
+export {};

package/dist/components/context/index.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { DataProvider as t } from "./DataContext.js";
+const m = ({ children: r }) => /* @__PURE__ */ o(t, { children: r });
+export {
+  m as XProvider
+};

package/dist/components/context/useContext.d.ts

@@ -0,0 +1,2 @@
+import { DataDefaultType } from './DataContext';
+export declare const useXData: () => DataDefaultType;

package/dist/components/context/useContext.js

@@ -0,0 +1,7 @@
+"use client";
+import { useContext as t } from "react";
+import { DataContext as o } from "./DataContext.js";
+const a = () => t(o);
+export {
+  a as useXData
+};

package/dist/components/layout/Navigation/Navigation.js

@@ -1,27 +1,41 @@
 "use client";
-import { jsxs as r, jsx as s } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import c from "clsx";
-import a from "./navigation.module.scss.js";
-const m = n((i, o) => {
-  const { className: t, Routes: e } = i, l = c(
-    a.navigation,
-    t
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import l from "clsx";
+import { Icon as y } from "../../base/Icon/Icon.js";
+import i from "./navigation.module.scss.js";
+const b = e((d, f) => {
+  const { className: h, children: p, routes: N = [], pathname: n = "", as: v = "a" } = d, g = l(
+    i.navigation,
+    h
   );
-  return /* @__PURE__ */ r("section", { className: l, ref: o, role: "navigation", children: [
-    /* @__PURE__ */ s("div", { className: a.brand, children: "🎲 XtremeUI" }),
-    /* @__PURE__ */ s("div", { className: a.routeList, children: !!e && /* @__PURE__ */ s(
-      e,
-      {
-        className: a.route,
-        activeClassName: a.active,
-        iconClassName: a.icon,
-        labelClassName: a.label
-      }
-    ) })
+  return /* @__PURE__ */ m("section", { className: g, ref: f, role: "navigation", children: [
+    /* @__PURE__ */ s("div", { className: i.brand, children: p }),
+    /* @__PURE__ */ s("div", { className: i.routeList, children: N.map((a, x) => {
+      var c;
+      return /* @__PURE__ */ m(
+        v,
+        {
+          className: l(i.route, (a == null ? void 0 : a.href) === n && i.active),
+          href: a == null ? void 0 : a.href,
+          children: [
+            (a == null ? void 0 : a.icon) && /* @__PURE__ */ s(
+              y,
+              {
+                className: (c = i) == null ? void 0 : c.icon,
+                code: a == null ? void 0 : a.icon,
+                type: (a == null ? void 0 : a.href) === n ? "duotone" : "thin"
+              }
+            ),
+            /* @__PURE__ */ s("span", { className: i.label, children: a == null ? void 0 : a.name })
+          ]
+        },
+        `route-${a == null ? void 0 : a.href}-${x}`
+      );
+    }) })
   ] });
 });
-m.displayName = "Navigation";
+b.displayName = "Navigation";
 export {
-  m as Navigation
+  b as Navigation
 };

package/dist/components/layout/Navigation/types.d.ts

@@ -1,12 +1,14 @@
-import { FC } from 'react';
+import { ElementType, ReactNode } from 'react';
 export type TNavigationProps = {
     className?: string;
-    Routes?: FC<TNavigationRoute>;
+    children?: ReactNode;
+    as?: ElementType;
+    pathname: string;
+    routes: TNavigationRoute[];
 };
 export type TNavigationRoute = {
-    className: string;
-    activeClassName: string;
-    iconClassName: string;
-    labelClassName: string;
+    name: string;
+    href: string;
+    icon?: string;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/layout/Navigation/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Navigation/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,MAAM,MAAM,gBAAgB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC;CAC9B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACvB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Navigation/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC3B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAA"}

package/dist/components/layout/Sider/Sider.js

@@ -2,32 +2,31 @@
 import { jsxs as f, jsx as i } from "react/jsx-runtime";
 import { forwardRef as h } from "react";
 import S from "clsx";
+import { useXData as p } from "../../context/useContext.js";
 import e from "./sider.module.scss.js";
-const p = h((s, t) => {
+const g = h((t, s) => {
   const {
     className: d,
-    children: n,
-    leftSider: o,
+    children: o,
+    leftSider: n,
     showMiniLeftSider: l = !0,
-    rightSider: c,
-    showMiniRightSider: a = !1,
-    open: r = "closed"
-    // setOpen,
-  } = s, m = S(
+    rightSider: a,
+    showMiniRightSider: m = !1
+  } = t, { siderMode: r } = p(), c = S(
     e.sider,
     r === "left" && e.leftOpen,
     l && e.miniLeftSider,
     r === "right" && e.rightOpen,
-    a && e.miniRightSider,
+    m && e.miniRightSider,
     d
   );
-  return /* @__PURE__ */ f("section", { className: m, ref: t, role: "sider", children: [
-    /* @__PURE__ */ i("div", { className: e.leftSiderContainer, children: o }),
-    /* @__PURE__ */ i("div", { className: e.rightSiderContainer, children: c }),
-    /* @__PURE__ */ i("div", { className: e.content, children: n })
+  return /* @__PURE__ */ f("section", { className: c, ref: s, role: "sider", children: [
+    /* @__PURE__ */ i("div", { className: e.leftSiderContainer, children: n }),
+    /* @__PURE__ */ i("div", { className: e.rightSiderContainer, children: a }),
+    /* @__PURE__ */ i("div", { className: e.content, children: o })
   ] });
 });
-p.displayName = "Sider";
+g.displayName = "Sider";
 export {
-  p as Sider
+  g as Sider
 };

package/dist/components/layout/Sider/types.d.ts

@@ -6,8 +6,6 @@ export type TSiderProps = {
     showMiniLeftSider?: boolean;
     rightSider?: ReactNode;
     showMiniRightSider?: boolean;
-    open?: TSiderModes;
-    setOpen?: (open: boolean) => void;
 };
 export type TSiderModes = keyof typeof EOpenModes;
 declare enum EOpenModes {

package/dist/components/layout/Sider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Sider/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,WAAW,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,UAAU,CAAC;AAClD,aAAK,UAAU;IACd,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Sider/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,WAAW,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,UAAU,CAAC;AAClD,aAAK,UAAU;IACd,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;CACjB"}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export * from './utils/index';
+export { XProvider } from './components/context';
+export { useXData } from './components/context/useContext';
 export { Button } from './components/base/Button/Button';
 export { type TButtonProps, EButtonTypes } from './components/base/Button/types';
 export { Icon } from './components/base/Icon/Icon';

package/dist/index.js

@@ -1,35 +1,39 @@
 "use client";
 import "./styles/index.scss.js";
-import { dom as t, elementObserver as s, getCssProperty as p, getCssPropertyPx as m, getCssPropertyVh as f, getCssPropertyVw as i, isClient as n, setCssProperty as x, waitForElement as g } from "./utils/helper/domHelper.js";
-import { mergeRefs as C } from "./utils/function/mergeRefs.js";
-import { safeStringFromCodePoint as a, unicodeToString as d } from "./utils/function/string.js";
-import { Button as c } from "./components/base/Button/Button.js";
-import { EButtonTypes as S } from "./components/base/Button/types.js";
-import { Icon as E } from "./components/base/Icon/Icon.js";
-import { EIconSize as v } from "./components/base/Icon/types.js";
-import { ProgressBar as F } from "./components/base/ProgressBar/ProgressBar.js";
-import { Textfield as V } from "./components/base/Textfield/Textfield.js";
-import { Sider as h } from "./components/layout/Sider/Sider.js";
-import { Navigation as N } from "./components/layout/Navigation/Navigation.js";
+import { dom as t, elementObserver as p, getCssProperty as s, getCssPropertyPx as m, getCssPropertyVh as f, getCssPropertyVw as i, isClient as x, setCssProperty as n, waitForElement as g } from "./utils/helper/domHelper.js";
+import { mergeRefs as a } from "./utils/function/mergeRefs.js";
+import { safeStringFromCodePoint as d, unicodeToString as y } from "./utils/function/string.js";
+import { XProvider as u } from "./components/context/index.js";
+import { useXData as S } from "./components/context/useContext.js";
+import { Button as B } from "./components/base/Button/Button.js";
+import { EButtonTypes as T } from "./components/base/Button/types.js";
+import { Icon as F } from "./components/base/Icon/Icon.js";
+import { EIconSize as V } from "./components/base/Icon/types.js";
+import { ProgressBar as b } from "./components/base/ProgressBar/ProgressBar.js";
+import { Textfield as z } from "./components/base/Textfield/Textfield.js";
+import { Sider as N } from "./components/layout/Sider/Sider.js";
+import { Navigation as R } from "./components/layout/Navigation/Navigation.js";
 export {
-  c as Button,
-  S as EButtonTypes,
-  v as EIconSize,
-  E as Icon,
-  N as Navigation,
-  F as ProgressBar,
-  h as Sider,
-  V as Textfield,
+  B as Button,
+  T as EButtonTypes,
+  V as EIconSize,
+  F as Icon,
+  R as Navigation,
+  b as ProgressBar,
+  N as Sider,
+  z as Textfield,
+  u as XProvider,
   t as dom,
-  s as elementObserver,
-  p as getCssProperty,
+  p as elementObserver,
+  s as getCssProperty,
   m as getCssPropertyPx,
   f as getCssPropertyVh,
   i as getCssPropertyVw,
-  n as isClient,
-  C as mergeRefs,
-  a as safeStringFromCodePoint,
-  x as setCssProperty,
-  d as unicodeToString,
+  x as isClient,
+  a as mergeRefs,
+  d as safeStringFromCodePoint,
+  n as setCssProperty,
+  y as unicodeToString,
+  S as useXData,
   g as waitForElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "xtreme-ui",
-	"version": "0.0.14",
+	"version": "0.0.15",
 	"type": "module",
 	"description": "Collection of reusable components that can be used in web projects",
 	"main": "dist/index.js",
@@ -27,10 +27,10 @@
 		"@storybook/testing-library": "0.2.0",
 		"@types/lodash": "^4.14.196",
 		"@types/node": "^20.4.8",
-		"@types/react": "^18.2.18",
+		"@types/react": "^18.2.19",
 		"@types/react-dom": "^18.2.7",
-		"@typescript-eslint/eslint-plugin": "^6.2.1",
-		"@typescript-eslint/parser": "^6.2.1",
+		"@typescript-eslint/eslint-plugin": "^6.3.0",
+		"@typescript-eslint/parser": "^6.3.0",
 		"@vitejs/plugin-react": "^4.0.4",
 		"@vitejs/plugin-react-swc": "^3.3.2",
 		"clsx": "^2.0.0",
@@ -47,14 +47,15 @@
 		"react-dom": "^18.2.0",
 		"sass": "^1.64.2",
 		"storybook": "7.2.1",
+		"storybook-react-context": "^0.6.0",
 		"storybook-readme": "^5.0.9",
 		"stylelint": "^15.10.2",
 		"stylelint-config-standard-scss": "^10.0.0",
 		"stylelint-order": "^6.0.3",
 		"typescript": "^5.1.6",
-		"vite": "^4.4.8",
+		"vite": "^4.4.9",
 		"vite-plugin-dts": "^3.5.1",
-		"vite-plugin-linter": "^2.0.2",
+		"vite-plugin-linter": "^2.0.3",
 		"vite-tsconfig-paths": "^4.2.0"
 	},
 	"publishConfig": {