@offlinemediainc/offline-ui 0.1.2 → 0.1.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/README.md +27 -2
- package/dist/index.cjs +914 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +151 -1
- package/dist/index.d.ts +151 -1
- package/dist/index.js +854 -7
- package/dist/index.js.map +1 -1
- package/dist/styles.css +42 -5
- package/package.json +13 -3
package/README.md
CHANGED
|
@@ -19,15 +19,29 @@ Add the theme CSS to your app's entry point:
|
|
|
19
19
|
import '@offlinemediainc/offline-ui/styles.css';
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
### 2. Configure Tailwind
|
|
22
|
+
### 2. Configure Tailwind
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
The package uses Tailwind CSS classes that need to be generated by your app's Tailwind build.
|
|
25
|
+
|
|
26
|
+
**Tailwind CSS v4** - Add to your CSS:
|
|
25
27
|
|
|
26
28
|
```css
|
|
27
29
|
@import "tailwindcss";
|
|
28
30
|
@source "../node_modules/@offlinemediainc/offline-ui/dist/**/*.js";
|
|
29
31
|
```
|
|
30
32
|
|
|
33
|
+
**Tailwind CSS v3** - Add to your `tailwind.config.ts`:
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
export default {
|
|
37
|
+
content: [
|
|
38
|
+
// ... your existing content paths
|
|
39
|
+
"./node_modules/@offlinemediainc/offline-ui/dist/**/*.{js,cjs}",
|
|
40
|
+
],
|
|
41
|
+
// ...
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
31
45
|
### 3. Use components
|
|
32
46
|
|
|
33
47
|
```tsx
|
|
@@ -104,6 +118,17 @@ export default function Layout({ children }) {
|
|
|
104
118
|
|
|
105
119
|
View the component documentation: [Storybook](https://your-chromatic-url.chromatic.com)
|
|
106
120
|
|
|
121
|
+
## AI/LLM Usage
|
|
122
|
+
|
|
123
|
+
When implementing with this design system, refer to the [Storybook documentation](https://your-chromatic-url.chromatic.com) for:
|
|
124
|
+
|
|
125
|
+
- **Component usage patterns** - Each component has stories showing correct implementation
|
|
126
|
+
- **Design decisions** - Story descriptions document constraints and guidelines
|
|
127
|
+
- **Variants and props** - Interactive examples of all component options
|
|
128
|
+
- **Composition patterns** - How components work together (e.g., Sidebar + Breadcrumb)
|
|
129
|
+
|
|
130
|
+
The Storybook is the source of truth for how components should be used.
|
|
131
|
+
|
|
107
132
|
---
|
|
108
133
|
|
|
109
134
|
## Development
|