@orion-ds/react 5.5.0 → 5.5.2

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 +13 -11
  2. package/dist/contexts/ThemeContext.d.ts +6 -3
  3. package/dist/contexts/ThemeContext.d.ts.map +1 -1
  4. package/dist/contexts/ThemeContext.mjs +30 -26
  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"),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!
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:v=!1,disableCSSWarnings:u=!1}){const g={...T,...r!==void 0&&{defaultTheme:r},...d!==void 0&&{defaultBrand:d}},n=S.useTheme(g),a=t.useRef(new Set),m=t.useRef(!1);return t.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!
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]),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(", ")}
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,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(", ")}
10
10
 
11
11
  The "${e}" brand requires these fonts: ${w}
12
12
 
@@ -24,14 +24,16 @@ 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(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.
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:[!v&&f.jsx(O.FontLoader,{}),o]})}function C(){const o=t.useContext(p);if(o===h&&process.env.NODE_ENV==="development")throw new Error(`useThemeContext must be used within a <ThemeProvider> component.
28
28
 
29
- For full theme functionality, wrap your app with <ThemeProvider>:
29
+ Wrap your app at the root:
30
30
 
31
- export default function App() {
32
- return (
33
- <ThemeProvider>
34
- <YourComponents />
35
- </ThemeProvider>
36
- );
37
- }`),o}exports.ThemeProvider=x;exports.useThemeContext=C;
31
+ import { ThemeProvider } from '@orion-ds/react';
32
+
33
+ export default function App() {
34
+ return (
35
+ <ThemeProvider>
36
+ <YourComponents />
37
+ </ThemeProvider>
38
+ );
39
+ }`);return o}exports.ThemeProvider=x;exports.useThemeContext=C;
package/dist/contexts/ThemeContext.d.ts CHANGED
@@ -55,13 +55,16 @@ export declare function ThemeProvider({ children, defaultTheme, defaultBrand, op
55
55
  *
56
56
  * ⚠️ IMPORTANT: Must be used inside a ThemeProvider for full functionality
57
57
  *
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.
58
+ * **Development**: Throws a clear error if used outside ThemeProvider
59
+ * (helps catch integration mistakes early)
60
+ *
61
+ * **Production**: Returns SSR-safe defaults if used outside ThemeProvider
62
+ * (maintains compatibility during Next.js static prerendering)
60
63
  *
61
64
  * @example
62
65
  * ```tsx
63
66
  * function MyComponent() {
64
- * const { theme, brand, setTheme, setBrand } = useTheme();
67
+ * const { theme, brand, setTheme, setBrand } = useThemeContext();
65
68
  * // Components automatically inherit theme/brand from <html> attributes
66
69
  * // DO NOT pass brand prop to components - it's applied globally!
67
70
  * }
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;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"}
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;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,IAAI,cAAc,CAyBhD"}
package/dist/contexts/ThemeContext.mjs CHANGED
@@ -1,8 +1,8 @@
1
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";
2
+ import { useRef as u, useEffect as l, useContext as O, createContext as x } from "react";
3
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";
4
+ import { getMissingFonts as E, BRAND_FONTS as P, GOOGLE_FONTS_URL as D } from "../utils/fonts.mjs";
5
+ import { FontLoader as F } from "../components/FontLoader/FontLoader.mjs";
6
6
  const f = {
7
7
  theme: "light",
8
8
  brand: "orion",
@@ -18,7 +18,7 @@ const f = {
18
18
  function L() {
19
19
  return typeof window > "u" ? !0 : getComputedStyle(document.documentElement).getPropertyValue("--orion-react-styles-loaded").trim() === "1";
20
20
  }
21
- function A({
21
+ function R({
22
22
  children: o,
23
23
  defaultTheme: n,
24
24
  defaultBrand: s,
@@ -27,15 +27,15 @@ function A({
27
27
  disableAutoFontLoading: T = !1,
28
28
  disableCSSWarnings: d = !1
29
29
  }) {
30
- const g = {
30
+ const v = {
31
31
  ...h,
32
32
  ...n !== void 0 && { defaultTheme: n },
33
33
  ...s !== void 0 && { defaultBrand: s }
34
- }, t = C(g), c = a(/* @__PURE__ */ new Set()), m = a(!1);
35
- return u(() => {
34
+ }, t = C(v), m = u(/* @__PURE__ */ new Set()), c = u(!1);
35
+ return l(() => {
36
36
  if (d || typeof window > "u" || !(process.env.NODE_ENV === "development" || window.location.hostname === "localhost")) return;
37
37
  const r = setTimeout(() => {
38
- !m.current && !L() && (m.current = !0, console.warn(
38
+ !c.current && !L() && (c.current = !0, console.warn(
39
39
  `[Orion] Component styles not detected!
40
40
 
41
41
  You must import the component CSS file:
@@ -48,15 +48,15 @@ To disable this warning, set disableCSSWarnings={true} on ThemeProvider.`
48
48
  ));
49
49
  }, 100);
50
50
  return () => clearTimeout(r);
51
- }, [d]), u(() => {
51
+ }, [d]), l(() => {
52
52
  if (i || typeof window > "u" || !(process.env.NODE_ENV === "development" || typeof window < "u" && window.location.hostname === "localhost")) return;
53
53
  const r = setTimeout(() => {
54
- const { brand: e } = t, l = F(e);
55
- if (l.length > 0 && !c.current.has(e)) {
56
- c.current.add(e);
54
+ const { brand: e } = t, a = E(e);
55
+ if (a.length > 0 && !m.current.has(e)) {
56
+ m.current.add(e);
57
57
  const w = P[e].join(", ");
58
58
  console.warn(
59
- `[Orion] Missing fonts for "${e}" brand: ${l.join(", ")}
59
+ `[Orion] Missing fonts for "${e}" brand: ${a.join(", ")}
60
60
 
61
61
  The "${e}" brand requires these fonts: ${w}
62
62
 
@@ -80,27 +80,31 @@ To disable this warning, set disableFontWarnings={true} on ThemeProvider.`
80
80
  }, 1e3);
81
81
  return () => clearTimeout(r);
82
82
  }, [t.brand, i, t]), /* @__PURE__ */ y(p.Provider, { value: t, children: [
83
- !T && /* @__PURE__ */ S(E, {}),
83
+ !T && /* @__PURE__ */ S(F, {}),
84
84
  o
85
85
  ] });
86
86
  }
87
87
  function $() {
88
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.
89
+ if (o === f && process.env.NODE_ENV === "development")
90
+ throw new Error(
91
+ `useThemeContext must be used within a <ThemeProvider> component.
91
92
 
92
- For full theme functionality, wrap your app with <ThemeProvider>:
93
+ Wrap your app at the root:
93
94
 
94
- export default function App() {
95
- return (
96
- <ThemeProvider>
97
- <YourComponents />
98
- </ThemeProvider>
99
- );
100
- }`
101
- ), o;
95
+ import { ThemeProvider } from '@orion-ds/react';
96
+
97
+ export default function App() {
98
+ return (
99
+ <ThemeProvider>
100
+ <YourComponents />
101
+ </ThemeProvider>
102
+ );
103
+ }`
104
+ );
105
+ return o;
102
106
  }
103
107
  export {
104
- A as ThemeProvider,
108
+ R as ThemeProvider,
105
109
  $ as useThemeContext
106
110
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orion-ds/react",
3
- "version": "5.5.0",
3
+ "version": "5.5.2",
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",