@orion-ds/react 1.2.3 → 1.2.4
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.
- package/AI_QUICKREF.md +8 -3
- package/README.md +22 -11
- package/dist/styles.css +8421 -0
- package/package.json +10 -5
package/AI_QUICKREF.md
CHANGED
|
@@ -2,8 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
## Setup (Required)
|
|
4
4
|
```tsx
|
|
5
|
-
import
|
|
6
|
-
import '@orion-ds/react/
|
|
5
|
+
// Option 1: Single import (recommended)
|
|
6
|
+
import '@orion-ds/react/styles.css';
|
|
7
|
+
|
|
8
|
+
// Option 2: Separate imports
|
|
9
|
+
// import '@orion-ds/core/theme.css';
|
|
10
|
+
// import '@orion-ds/react/dist/react.css';
|
|
11
|
+
|
|
7
12
|
import { ThemeProvider } from '@orion-ds/react';
|
|
8
13
|
|
|
9
14
|
<ThemeProvider>
|
|
@@ -53,7 +58,7 @@ const { theme, brand, setTheme, setBrand } = useThemeContext();
|
|
|
53
58
|
- NEVER pass `brand` or `theme` props to components (they're global)
|
|
54
59
|
- NEVER hardcode colors (`#fff`) - use `var(--text-primary)`
|
|
55
60
|
- NEVER skip ThemeProvider wrapper
|
|
56
|
-
- ALWAYS import both CSS files
|
|
61
|
+
- ALWAYS import styles.css (or both CSS files separately)
|
|
57
62
|
- ALWAYS add `aria-label` to iconOnly buttons
|
|
58
63
|
|
|
59
64
|
## Full docs: AI_COMPONENTS.md
|
package/README.md
CHANGED
|
@@ -23,31 +23,42 @@ TypeScript-first React component library built on the Orion Design System tokens
|
|
|
23
23
|
## Installation
|
|
24
24
|
|
|
25
25
|
\`\`\`bash
|
|
26
|
-
npm install @orion/react @orion/core
|
|
26
|
+
npm install @orion-ds/react @orion-ds/core
|
|
27
27
|
# or
|
|
28
|
-
pnpm add @orion/react @orion/core
|
|
28
|
+
pnpm add @orion-ds/react @orion-ds/core
|
|
29
29
|
# or
|
|
30
|
-
yarn add @orion/react @orion/core
|
|
30
|
+
yarn add @orion-ds/react @orion-ds/core
|
|
31
31
|
\`\`\`
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
> **Note**: `@orion-ds/core` is a peer dependency that must be installed alongside `@orion-ds/react`.
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
## CSS Setup
|
|
36
|
+
|
|
37
|
+
### Option 1: Single Import (Recommended)
|
|
38
|
+
|
|
39
|
+
The simplest approach - one import that includes both design tokens and component styles:
|
|
36
40
|
|
|
37
41
|
\`\`\`tsx
|
|
38
42
|
// In your app entry file (e.g., main.tsx, App.tsx)
|
|
39
|
-
import '@orion-ds/
|
|
40
|
-
|
|
43
|
+
import '@orion-ds/react/styles.css';
|
|
44
|
+
\`\`\`
|
|
45
|
+
|
|
46
|
+
### Option 2: Separate Imports
|
|
47
|
+
|
|
48
|
+
If you need more control or are using @orion-ds/core elsewhere:
|
|
49
|
+
|
|
50
|
+
\`\`\`tsx
|
|
51
|
+
import '@orion-ds/core/theme.css'; // Design tokens
|
|
52
|
+
import '@orion-ds/react/dist/react.css'; // Component styles
|
|
41
53
|
\`\`\`
|
|
42
54
|
|
|
43
|
-
Missing
|
|
55
|
+
> **⚠️ IMPORTANT**: Missing CSS imports will result in unstyled components. In development, ThemeProvider will warn you if styles are missing.
|
|
44
56
|
|
|
45
57
|
## Quick Start
|
|
46
58
|
|
|
47
59
|
\`\`\`tsx
|
|
48
|
-
// 1. Import
|
|
49
|
-
import '@orion-ds/
|
|
50
|
-
import '@orion-ds/react/dist/react.css';
|
|
60
|
+
// 1. Import styles (pick one option)
|
|
61
|
+
import '@orion-ds/react/styles.css'; // Recommended: single import
|
|
51
62
|
|
|
52
63
|
// 2. Import components
|
|
53
64
|
import { Button, Card, Field, useTheme, ThemeProvider } from '@orion-ds/react';
|