@orion-ds/react 1.1.1 → 1.1.3

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 (19) hide show
  1. package/README.md +71 -2
  2. package/dist/components/FontLoader/FontLoader.d.ts +59 -0
  3. package/dist/components/FontLoader/FontLoader.d.ts.map +1 -0
  4. package/dist/components/FontLoader/index.d.ts +8 -0
  5. package/dist/components/FontLoader/index.d.ts.map +1 -0
  6. package/dist/contexts/ThemeContext.d.ts +6 -1
  7. package/dist/contexts/ThemeContext.d.ts.map +1 -1
  8. package/dist/index.cjs +23 -3
  9. package/dist/index.cjs.map +1 -1
  10. package/dist/index.d.ts +2 -0
  11. package/dist/index.d.ts.map +1 -1
  12. package/dist/index.mjs +13122 -12997
  13. package/dist/index.mjs.map +1 -1
  14. package/dist/react.css +1 -1
  15. package/dist/utils/fonts.d.ts +62 -0
  16. package/dist/utils/fonts.d.ts.map +1 -0
  17. package/dist/utils/index.d.ts +1 -0
  18. package/dist/utils/index.d.ts.map +1 -1
  19. package/package.json +1 -1
package/README.md CHANGED
@@ -33,10 +33,20 @@ yarn add @orion/react @orion/core
33
33
  ## Quick Start
34
34
 
35
35
  \`\`\`tsx
36
- import { Button, Card, Field, useTheme } from '@orion/react';
37
- import '@orion/core/theme.css';
36
+ import { Button, Card, Field, useTheme, ThemeProvider, FontLoader } from '@orion-ds/react';
37
+ import '@orion-ds/core/theme.css';
38
+ import '@orion-ds/react/dist/react.css';
38
39
 
39
40
  function App() {
41
+ return (
42
+ <ThemeProvider>
43
+ <FontLoader /> {/* Automatically loads Google Fonts */}
44
+ <MyApp />
45
+ </ThemeProvider>
46
+ );
47
+ }
48
+
49
+ function MyApp() {
40
50
  const { theme, toggleTheme } = useTheme();
41
51
 
42
52
  return (
@@ -53,6 +63,65 @@ function App() {
53
63
  }
54
64
  \`\`\`
55
65
 
66
+ ## Google Fonts (Required)
67
+
68
+ Orion uses custom fonts for each brand. You have two options:
69
+
70
+ ### Option 1: FontLoader Component (Recommended)
71
+
72
+ The `<FontLoader />` component automatically injects Google Fonts:
73
+
74
+ \`\`\`tsx
75
+ import { ThemeProvider, FontLoader } from '@orion-ds/react';
76
+
77
+ function App() {
78
+ return (
79
+ <ThemeProvider>
80
+ <FontLoader />
81
+ <YourApp />
82
+ </ThemeProvider>
83
+ );
84
+ }
85
+ \`\`\`
86
+
87
+ ### Option 2: Manual HTML Setup
88
+
89
+ Add these links to your HTML `<head>`:
90
+
91
+ \`\`\`html
92
+ <link rel="preconnect" href="https://fonts.googleapis.com">
93
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
94
+ <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500&family=Work+Sans:wght@400;500;700&family=Poppins:wght@400;500;700&family=Fugaz+One&display=swap" rel="stylesheet">
95
+ \`\`\`
96
+
97
+ ### Fonts by Brand
98
+
99
+ | Brand | Primary Font | Secondary Font |
100
+ |-------|--------------|----------------|
101
+ | **Orion** | Libre Baskerville | Inter |
102
+ | **Deepblue** | Work Sans | Work Sans |
103
+ | **Red** | Poppins | Inter |
104
+ | **Orange** | DM Sans | Inter |
105
+ | **Lemon** | Fugaz One | Work Sans |
106
+
107
+ ### Programmatic Access
108
+
109
+ \`\`\`tsx
110
+ import { GOOGLE_FONTS_URL, BRAND_FONTS, getMissingFonts } from '@orion-ds/react';
111
+
112
+ // Get the full Google Fonts URL
113
+ console.log(GOOGLE_FONTS_URL);
114
+
115
+ // Get fonts for a specific brand
116
+ console.log(BRAND_FONTS.lemon); // ['Fugaz One', 'Work Sans', 'JetBrains Mono']
117
+
118
+ // Check which fonts are missing for a brand
119
+ const missing = getMissingFonts('lemon');
120
+ if (missing.length > 0) {
121
+ console.warn('Missing fonts:', missing);
122
+ }
123
+ \`\`\`
124
+
56
125
  ## Components
57
126
 
58
127
  ### Forms
package/dist/components/FontLoader/FontLoader.d.ts ADDED
@@ -0,0 +1,59 @@
1
+ /**
2
+ * FontLoader Component
3
+ *
4
+ * Automatically injects Google Fonts into the document head.
5
+ * This ensures all brand fonts are available without manual HTML setup.
6
+ *
7
+ * @example
8
+ * ```tsx
9
+ * import { FontLoader, ThemeProvider } from '@orion-ds/react';
10
+ *
11
+ * function App() {
12
+ * return (
13
+ * <ThemeProvider>
14
+ * <FontLoader />
15
+ * <YourComponents />
16
+ * </ThemeProvider>
17
+ * );
18
+ * }
19
+ * ```
20
+ *
21
+ * Or use it standalone:
22
+ * ```tsx
23
+ * <FontLoader onLoad={() => console.log('Fonts ready!')} />
24
+ * ```
25
+ */
26
+ export interface FontLoaderProps {
27
+ /**
28
+ * Callback when fonts are loaded
29
+ */
30
+ onLoad?: () => void;
31
+ /**
32
+ * Callback when fonts fail to load
33
+ */
34
+ onError?: (error: Error) => void;
35
+ /**
36
+ * Show loading state while fonts are loading
37
+ * @default false
38
+ */
39
+ showLoadingState?: boolean;
40
+ /**
41
+ * Custom loading component
42
+ */
43
+ loadingComponent?: React.ReactNode;
44
+ /**
45
+ * Children to render (will wait for fonts if showLoadingState is true)
46
+ */
47
+ children?: React.ReactNode;
48
+ }
49
+ /**
50
+ * FontLoader - Injects Google Fonts into the document head
51
+ *
52
+ * Place this component near the root of your app to ensure
53
+ * all brand fonts are loaded automatically.
54
+ */
55
+ export declare function FontLoader({ onLoad, onError, showLoadingState, loadingComponent, children, }: FontLoaderProps): import("react/jsx-runtime").JSX.Element | null;
56
+ export declare namespace FontLoader {
57
+ var displayName: string;
58
+ }
59
+ //# sourceMappingURL=FontLoader.d.ts.map
package/dist/components/FontLoader/FontLoader.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FontLoader.d.ts","sourceRoot":"","sources":["../../../src/components/FontLoader/FontLoader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAKH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,OAAO,EACP,gBAAwB,EACxB,gBAAgB,EAChB,QAAQ,GACT,EAAE,eAAe,kDAyEjB;yBA/Ee,UAAU"}
package/dist/components/FontLoader/index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * FontLoader Component
3
+ *
4
+ * Automatically loads Google Fonts required by Orion Design System brands.
5
+ */
6
+ export { FontLoader } from './FontLoader';
7
+ export type { FontLoaderProps } from './FontLoader';
8
+ //# sourceMappingURL=index.d.ts.map
package/dist/components/FontLoader/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FontLoader/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
package/dist/contexts/ThemeContext.d.ts CHANGED
@@ -40,6 +40,11 @@ export interface ThemeProviderProps {
40
40
  * Theme options (see useTheme for full options)
41
41
  */
42
42
  options?: UseThemeOptions;
43
+ /**
44
+ * Disable font loading warnings in development
45
+ * @default false
46
+ */
47
+ disableFontWarnings?: boolean;
43
48
  }
44
49
  /**
45
50
  * ThemeProvider Component
@@ -47,7 +52,7 @@ export interface ThemeProviderProps {
47
52
  * Wraps your application to provide global theme and brand state.
48
53
  * Must be placed near the root of your application.
49
54
  */
50
- export declare function ThemeProvider({ children, options }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
55
+ export declare function ThemeProvider({ children, options, disableFontWarnings }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
51
56
  /**
52
57
  * Hook to access global theme state
53
58
  *
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":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAA4B,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAO9F;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CAItE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,IAAI,cAAc,CAmBhD"}
1
+ {"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAgD,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAA4B,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQ9F;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,mBAA2B,EAAE,EAAE,kBAAkB,2CA+CnG;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,IAAI,cAAc,CAmBhD"}