@orion-ds/react 4.9.4 → 4.9.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/contexts/ThemeContext.cjs +5 -6
  2. package/dist/contexts/ThemeContext.d.ts +3 -2
  3. package/dist/contexts/ThemeContext.d.ts.map +1 -1
  4. package/dist/contexts/ThemeContext.mjs +42 -34
  5. package/package.json +1 -1
package/dist/contexts/ThemeContext.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),o=require("react"),g=require("../hooks/useTheme.cjs"),i=require("../utils/fonts.cjs"),S=require("../components/FontLoader/FontLoader.cjs"),h=o.createContext(void 0);function P(){return typeof window>"u"?!0:getComputedStyle(document.documentElement).getPropertyValue("--orion-react-styles-loaded").trim()==="1"}function O({children:t,defaultTheme:r,defaultBrand:d,options:p,disableFontWarnings:c=!1,disableAutoFontLoading:T=!1,disableCSSWarnings:u=!1}){const v={...p,...r!==void 0&&{defaultTheme:r},...d!==void 0&&{defaultBrand:d}},n=g.useTheme(v),a=o.useRef(new Set),m=o.useRef(!1);return o.useEffect(()=>{if(u||typeof window>"u"||!(process.env.NODE_ENV==="development"||window.location.hostname==="localhost"))return;const s=setTimeout(()=>{!m.current&&!P()&&(m.current=!0,console.warn(`[Orion] Component styles not detected!
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),t=require("react"),S=require("../hooks/useTheme.cjs"),i=require("../utils/fonts.cjs"),O=require("../components/FontLoader/FontLoader.cjs"),h={theme:"light",brand:"orion",setTheme:()=>{},setBrand:()=>{},toggleTheme:()=>{},isDark:!1,isLight:!0},p=t.createContext(h);function P(){return typeof window>"u"?!0:getComputedStyle(document.documentElement).getPropertyValue("--orion-react-styles-loaded").trim()==="1"}function x({children:o,defaultTheme:r,defaultBrand:d,options:T,disableFontWarnings:c=!1,disableAutoFontLoading:g=!1,disableCSSWarnings:u=!1}){const v={...T,...r!==void 0&&{defaultTheme:r},...d!==void 0&&{defaultBrand:d}},n=S.useTheme(v),l=t.useRef(new Set),a=t.useRef(!1);return t.useEffect(()=>{if(u||typeof window>"u"||!(process.env.NODE_ENV==="development"||window.location.hostname==="localhost"))return;const s=setTimeout(()=>{!a.current&&!P()&&(a.current=!0,console.warn(`[Orion] Component styles not detected!
2
2
 
3
3
  You must import the component CSS file:
4
4
 
@@ -6,7 +6,7 @@ You must import the component CSS file:
6
6
 
7
7
  Add this import in your app entry file. It includes both design tokens and component styles.
8
8
 
9
- To disable this warning, set disableCSSWarnings={true} on ThemeProvider.`))},100);return()=>clearTimeout(s)},[u]),o.useEffect(()=>{if(c||typeof window>"u"||!(process.env.NODE_ENV==="development"||typeof window<"u"&&window.location.hostname==="localhost"))return;const s=setTimeout(()=>{const{brand:e}=n,l=i.getMissingFonts(e);if(l.length>0&&!a.current.has(e)){a.current.add(e);const w=i.BRAND_FONTS[e].join(", ");console.warn(`[Orion] Missing fonts for "${e}" brand: ${l.join(", ")}
9
+ To disable this warning, set disableCSSWarnings={true} on ThemeProvider.`))},100);return()=>clearTimeout(s)},[u]),t.useEffect(()=>{if(c||typeof window>"u"||!(process.env.NODE_ENV==="development"||typeof window<"u"&&window.location.hostname==="localhost"))return;const s=setTimeout(()=>{const{brand:e}=n,m=i.getMissingFonts(e);if(m.length>0&&!l.current.has(e)){l.current.add(e);const w=i.BRAND_FONTS[e].join(", ");console.warn(`[Orion] Missing fonts for "${e}" brand: ${m.join(", ")}
10
10
 
11
11
  The "${e}" brand requires these fonts: ${w}
12
12
 
@@ -24,10 +24,9 @@ Option 2: Add Google Fonts to your HTML <head>
24
24
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
25
25
  <link href="${i.GOOGLE_FONTS_URL}" rel="stylesheet">
26
26
 
27
- To disable this warning, set disableFontWarnings={true} on ThemeProvider.`)}},1e3);return()=>clearTimeout(s)},[n.brand,c,n]),f.jsxs(h.Provider,{value:n,children:[!T&&f.jsx(S.FontLoader,{}),t]})}function x(){const t=o.useContext(h);if(t===void 0)throw new Error(`❌ useTheme() must be used inside <ThemeProvider>
27
+ To disable this warning, set disableFontWarnings={true} on ThemeProvider.`)}},1e3);return()=>clearTimeout(s)},[n.brand,c,n]),f.jsxs(p.Provider,{value:n,children:[!g&&f.jsx(O.FontLoader,{}),o]})}function C(){const o=t.useContext(p);return process.env.NODE_ENV==="development"&&typeof window<"u"&&o===h&&console.warn(`⚠️ [Orion] useThemeContext() called outside <ThemeProvider>. Using SSR defaults.
28
28
 
29
- Solution:
30
- Wrap your app with ThemeProvider:
29
+ For full theme functionality, wrap your app with <ThemeProvider>:
31
30
 
32
31
  export default function App() {
33
32
  return (
@@ -35,4 +34,4 @@ export default function App() {
35
34
  <YourComponents />
36
35
  </ThemeProvider>
37
36
  );
38
- }`);return t}exports.ThemeProvider=O;exports.useThemeContext=x;
37
+ }`),o}exports.ThemeProvider=x;exports.useThemeContext=C;
package/dist/contexts/ThemeContext.d.ts CHANGED
@@ -53,9 +53,10 @@ export declare function ThemeProvider({ children, defaultTheme, defaultBrand, op
53
53
  /**
54
54
  * Hook to access global theme state
55
55
  *
56
- * ⚠️ IMPORTANT: Must be used inside a ThemeProvider
56
+ * ⚠️ IMPORTANT: Must be used inside a ThemeProvider for full functionality
57
57
  *
58
- * @throws Error if used outside ThemeProvider
58
+ * Returns SSR-safe defaults if used outside ThemeProvider (instead of throwing).
59
+ * In development, a warning is logged if context is accessed outside the provider.
59
60
  *
60
61
  * @example
61
62
  * ```tsx
package/dist/contexts/ThemeContext.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAqB3B;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEhC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEjE;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,mBAA2B,EAC3B,sBAA8B,EAC9B,kBAA0B,GAC3B,EAAE,kBAAkB,2CA2FpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,IAAI,cAAc,CAmBhD"}
1
+ {"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAoC3B;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEhC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEjE;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,mBAA2B,EAC3B,sBAA8B,EAC9B,kBAA0B,GAC3B,EAAE,kBAAkB,2CA2FpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,IAAI,cAAc,CAsBhD"}
package/dist/contexts/ThemeContext.mjs CHANGED
@@ -1,30 +1,41 @@
1
- import { jsxs as y, jsx as g } from "react/jsx-runtime";
2
- import { useRef as a, useEffect as l, useContext as S, createContext as O } from "react";
3
- import { useTheme as P } from "../hooks/useTheme.mjs";
4
- import { getMissingFonts as x, BRAND_FONTS as C, GOOGLE_FONTS_URL as F } from "../utils/fonts.mjs";
5
- import { FontLoader as b } from "../components/FontLoader/FontLoader.mjs";
6
- const f = O(void 0);
7
- function E() {
1
+ import { jsxs as y, jsx as S } from "react/jsx-runtime";
2
+ import { useRef as a, useEffect as u, useContext as O, createContext as x } from "react";
3
+ import { useTheme as C } from "../hooks/useTheme.mjs";
4
+ import { getMissingFonts as F, BRAND_FONTS as P, GOOGLE_FONTS_URL as D } from "../utils/fonts.mjs";
5
+ import { FontLoader as E } from "../components/FontLoader/FontLoader.mjs";
6
+ const f = {
7
+ theme: "light",
8
+ brand: "orion",
9
+ setTheme: () => {
10
+ },
11
+ setBrand: () => {
12
+ },
13
+ toggleTheme: () => {
14
+ },
15
+ isDark: !1,
16
+ isLight: !0
17
+ }, p = x(f);
18
+ function L() {
8
19
  return typeof window > "u" ? !0 : getComputedStyle(document.documentElement).getPropertyValue("--orion-react-styles-loaded").trim() === "1";
9
20
  }
10
- function R({
21
+ function A({
11
22
  children: o,
12
23
  defaultTheme: n,
13
24
  defaultBrand: s,
14
- options: p,
25
+ options: h,
15
26
  disableFontWarnings: i = !1,
16
- disableAutoFontLoading: h = !1,
27
+ disableAutoFontLoading: T = !1,
17
28
  disableCSSWarnings: d = !1
18
29
  }) {
19
- const v = {
20
- ...p,
30
+ const g = {
31
+ ...h,
21
32
  ...n !== void 0 && { defaultTheme: n },
22
33
  ...s !== void 0 && { defaultBrand: s }
23
- }, t = P(v), c = a(/* @__PURE__ */ new Set()), m = a(!1);
24
- return l(() => {
34
+ }, t = C(g), c = a(/* @__PURE__ */ new Set()), m = a(!1);
35
+ return u(() => {
25
36
  if (d || typeof window > "u" || !(process.env.NODE_ENV === "development" || window.location.hostname === "localhost")) return;
26
37
  const r = setTimeout(() => {
27
- !m.current && !E() && (m.current = !0, console.warn(
38
+ !m.current && !L() && (m.current = !0, console.warn(
28
39
  `[Orion] Component styles not detected!
29
40
 
30
41
  You must import the component CSS file:
@@ -37,15 +48,15 @@ To disable this warning, set disableCSSWarnings={true} on ThemeProvider.`
37
48
  ));
38
49
  }, 100);
39
50
  return () => clearTimeout(r);
40
- }, [d]), l(() => {
51
+ }, [d]), u(() => {
41
52
  if (i || typeof window > "u" || !(process.env.NODE_ENV === "development" || typeof window < "u" && window.location.hostname === "localhost")) return;
42
53
  const r = setTimeout(() => {
43
- const { brand: e } = t, u = x(e);
44
- if (u.length > 0 && !c.current.has(e)) {
54
+ const { brand: e } = t, l = F(e);
55
+ if (l.length > 0 && !c.current.has(e)) {
45
56
  c.current.add(e);
46
- const w = C[e].join(", ");
57
+ const w = P[e].join(", ");
47
58
  console.warn(
48
- `[Orion] Missing fonts for "${e}" brand: ${u.join(", ")}
59
+ `[Orion] Missing fonts for "${e}" brand: ${l.join(", ")}
49
60
 
50
61
  The "${e}" brand requires these fonts: ${w}
51
62
 
@@ -61,26 +72,24 @@ Option 1: Use <FontLoader /> component (recommended)
61
72
  Option 2: Add Google Fonts to your HTML <head>
62
73
  <link rel="preconnect" href="https://fonts.googleapis.com">
63
74
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
64
- <link href="${F}" rel="stylesheet">
75
+ <link href="${D}" rel="stylesheet">
65
76
 
66
77
  To disable this warning, set disableFontWarnings={true} on ThemeProvider.`
67
78
  );
68
79
  }
69
80
  }, 1e3);
70
81
  return () => clearTimeout(r);
71
- }, [t.brand, i, t]), /* @__PURE__ */ y(f.Provider, { value: t, children: [
72
- !h && /* @__PURE__ */ g(b, {}),
82
+ }, [t.brand, i, t]), /* @__PURE__ */ y(p.Provider, { value: t, children: [
83
+ !T && /* @__PURE__ */ S(E, {}),
73
84
  o
74
85
  ] });
75
86
  }
76
- function _() {
77
- const o = S(f);
78
- if (o === void 0)
79
- throw new Error(
80
- `❌ useTheme() must be used inside <ThemeProvider>
87
+ function $() {
88
+ const o = O(p);
89
+ return process.env.NODE_ENV === "development" && typeof window < "u" && o === f && console.warn(
90
+ `⚠️ [Orion] useThemeContext() called outside <ThemeProvider>. Using SSR defaults.
81
91
 
82
- Solution:
83
- Wrap your app with ThemeProvider:
92
+ For full theme functionality, wrap your app with <ThemeProvider>:
84
93
 
85
94
  export default function App() {
86
95
  return (
@@ -89,10 +98,9 @@ export default function App() {
89
98
  </ThemeProvider>
90
99
  );
91
100
  }`
92
- );
93
- return o;
101
+ ), o;
94
102
  }
95
103
  export {
96
- R as ThemeProvider,
97
- _ as useThemeContext
104
+ A as ThemeProvider,
105
+ $ as useThemeContext
98
106
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orion-ds/react",
3
- "version": "4.9.4",
3
+ "version": "4.9.6",
4
4
  "type": "module",
5
5
  "description": "Orion Design System - React component library with 40+ AI-ready components and 9 templates",
6
6
  "author": "Orion Design System Team",