@streamlayer/react-ui 0.92.0 → 0.93.0

package/lib/ui/theme/breakpoints.js

@@ -1,18 +1,30 @@
-import { BREAKPOINTS as e } from "./constants.js";
-const i = (t) => (n) => `
-  @media (${t}) {
-    ${n}
+import { BREAKPOINTS as e, ORIENTATION as a } from "./constants.js";
+const r = (n) => (t) => `
+  @media only screen and (${n}) {
+    ${t}
   }
-`, o = {
-  up: (t) => {
-    const n = e[t];
-    return i(`min-width: ${n}px`);
+`, d = (n, t) => (i) => `
+  @media only screen and (${n}) and (${t}) {
+    ${i}
+  }
+`, s = {
+  up: (n) => {
+    const t = e[n];
+    return r(`min-width: ${t}px`);
+  },
+  down: (n) => {
+    const t = e[n] - 1;
+    return r(`max-width: ${t}px`);
+  },
+  intermediate: (n, t) => {
+    const i = e[n] - 1, o = e[t];
+    return d(`max-width: ${i}px`, `min-width: ${o}px`);
   },
-  down: (t) => {
-    const n = e[t] - 1;
-    return i(`max-width: ${n}px`);
+  orientation: (n) => {
+    const t = a[n];
+    return r(`orientation: ${t}`);
   }
 };
 export {
-  o as breakpoints
+  s as breakpoints
 };

package/lib/ui/theme/constants.d.ts

@@ -86,4 +86,8 @@ export declare const BREAKPOINTS: {
     xl: number;
     xxl: number;
 };
+export declare const ORIENTATION: {
+    landscape: string;
+    portrait: string;
+};
 export declare const colors: string;

package/lib/ui/theme/constants.js

@@ -60,7 +60,10 @@ const N = {
   lg: 992,
   xl: 1200,
   xxl: 1400
-}, G = Object.keys(E).reduce((A, R) => {
+}, G = {
+  landscape: "landscape",
+  portrait: "portrait"
+}, B = Object.keys(E).reduce((A, R) => {
   const _ = E[R];
   return `
     ${A}
@@ -72,5 +75,6 @@ export {
   E as COLORS,
   S as FONT,
   T as MASTERS_COLORS,
-  G as colors
+  G as ORIENTATION,
+  B as colors
 };

package/lib/ui/theme/index.js

@@ -1,7 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
-import { theme as a } from "./theme.js";
+import { theme as o } from "./theme.js";
+import "./breakpoints.js";
 import "./constants.js";
-const s = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: a, style: m, children: r }) });
+const p = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: o, style: m, children: r }) });
 export {
-  s as StreamLayerThemeProvider
+  p as StreamLayerThemeProvider
 };

package/lib/ui/theme/theme.js

@@ -1,36 +1,44 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { colors as l, FONT as t } from "./constants.js";
-const s = `
-  ${l}
-  --font-family: ${t.REGULAR};
-  --font-regular: ${t.REGULAR};
-  --font-color: ${t.COLOR};
-  --font-serif: ${t.SERIF};
-  --font-weight-default: ${t.WEIGHT_DEFAULT};
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { breakpoints as d } from "./breakpoints.js";
+import { colors as s, FONT as e } from "./constants.js";
+const h = `
+  ${s}
+  --font-family: ${e.REGULAR};
+  --font-regular: ${e.REGULAR};
+  --font-color: ${e.COLOR};
+  --font-serif: ${e.SERIF};
+  --font-weight-default: ${e.WEIGHT_DEFAULT};
 
+  --header-offset: 0px;
   --header-height: 68px;
   --animation-duration: 0.5s;
   --animation-function: ease;
   --container-padding: 16px;
   --border-radius: 8px;
   --pill-offset: 0px;
-`, c = "StreamLayerCSSReset", m = "ttkj0ah", f = () => /* @__PURE__ */ e("table", {
+  --max-width: 600px;
+  --max-notifications-width: 400px;
+
+  ${d.down("xl")`
+    --header-offset: 56px;
+  `}
+`, m = "StreamLayerCSSReset", p = "ttkj0ah", x = () => /* @__PURE__ */ t("table", {
   children: /* @__PURE__ */ r("table", {
-    children: [/* @__PURE__ */ e("thead", {
+    children: [/* @__PURE__ */ t("thead", {
       children: /* @__PURE__ */ r("tr", {
-        children: [/* @__PURE__ */ e("th", {
+        children: [/* @__PURE__ */ t("th", {
           children: "name"
-        }), /* @__PURE__ */ e("th", {
+        }), /* @__PURE__ */ t("th", {
           children: "value"
         })]
       })
-    }), /* @__PURE__ */ e("tbody", {
-      children: s.split(";").map((i) => {
+    }), /* @__PURE__ */ t("tbody", {
+      children: h.split(";").map((i) => {
         const n = i.trim(), [o, a] = n.split(":");
         return /* @__PURE__ */ r("tr", {
-          children: [/* @__PURE__ */ e("td", {
+          children: [/* @__PURE__ */ t("td", {
             children: o
-          }), /* @__PURE__ */ e("td", {
+          }), /* @__PURE__ */ t("td", {
             children: a
           })]
         }, n);
@@ -39,8 +47,8 @@ const s = `
   })
 });
 export {
-  f as ThemeVariables,
-  c as resetCss,
-  m as theme,
-  s as themeStr
+  x as ThemeVariables,
+  m as resetCss,
+  p as theme,
+  h as themeStr
 };

package/lib/utils/decorators/container.js

@@ -2,10 +2,11 @@ import { jsx as r } from "react/jsx-runtime";
 import { StreamLayerThemeProvider as o } from "../../ui/theme/index.js";
 import { AppContainer as t } from "./styles.js";
 import "../../ui/theme/theme.js";
+import "../../ui/theme/breakpoints.js";
 import "../../ui/theme/constants.js";
 import "@linaria/react";
-const h = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(e, {}) }), a = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, {}) }) }) });
+const a = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(e, {}) }), l = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, {}) }) }) });
 export {
-  a as container,
-  h as theme
+  l as container,
+  a as theme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.92.0",
+  "version": "0.93.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -36,24 +36,24 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "*",
-    "@streamlayer/sl-eslib": "^5.63.3",
+    "@streamlayer/sl-eslib": "^5.64.1",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "react-infinite-scroller": "^1.2.6",
     "react-virtualized-auto-sizer": "^1.0.21",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.35.0",
-    "@streamlayer/sdk-web": "^0.30.1",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.33",
-    "@streamlayer/sdk-web-api": "^0.20.0",
-    "@streamlayer/sdk-web-core": "^0.18.1",
-    "@streamlayer/sdk-web-features": "^0.11.15",
-    "@streamlayer/sdk-web-interfaces": "^0.20.0",
-    "@streamlayer/sdk-web-notifications": "^0.13.6",
-    "@streamlayer/sdk-web-storage": "^0.3.11",
-    "@streamlayer/sdk-web-types": "^0.21.0",
-    "@streamlayer/sdk-web-logger": "^0.5.11"
+    "@streamlayer/feature-gamification": "^0.35.1",
+    "@streamlayer/sdk-web": "^0.30.2",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.34",
+    "@streamlayer/sdk-web-api": "^0.20.1",
+    "@streamlayer/sdk-web-core": "^0.18.2",
+    "@streamlayer/sdk-web-features": "^0.11.16",
+    "@streamlayer/sdk-web-interfaces": "^0.20.1",
+    "@streamlayer/sdk-web-notifications": "^0.13.7",
+    "@streamlayer/sdk-web-logger": "^0.5.12",
+    "@streamlayer/sdk-web-storage": "^0.3.12",
+    "@streamlayer/sdk-web-types": "^0.21.1"
   },
   "nx": {
     "implicitDependencies": [
@@ -69,12 +69,12 @@
     "@linaria/core": "^6.0.0",
     "@linaria/react": "^6.0.0",
     "@nanostores/react": "^0.7.1",
-    "@storybook/addon-docs": "^7.6.10",
+    "@storybook/addon-docs": "^7.6.11",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-viewport": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
+    "@storybook/addon-viewport": "^7.6.11",
+    "@storybook/blocks": "^7.6.11",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.6.10",
+    "@storybook/react": "^7.6.11",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/react-window": "^1.8.8",
@@ -94,6 +94,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "@streamlayer/react": "^0.37.0"
+    "@streamlayer/react": "^0.37.1"
   }
 }