@myelmut/design-system 0.1.2 → 0.1.4

package/README.md

@@ -34,14 +34,14 @@ This will generate:
 
 ## Installation
 
-Install the package from NPM:
+Install the package from NPM along with required peer dependencies:
 
 ```bash
-npm install @myelmut/design-system
+npm install @myelmut/design-system i18next react-i18next
 # or
-yarn add @myelmut/design-system
+yarn add @myelmut/design-system i18next react-i18next
 # or
-pnpm add @myelmut/design-system
+pnpm add @myelmut/design-system i18next react-i18next
 ```
 
 ## Usage
@@ -132,7 +132,8 @@ The package includes:
 
 - **Components**: ES modules and CommonJS compatible
 - **TypeScript Declarations**: Full type definitions
-- **Styles**: Pre-compiled Tailwind CSS (`dist/index.css`)
+- **Styles**: Pre-compiled Tailwind CSS (`dist/index.css`) and source CSS (`styles/`)
+- **Assets**: Static assets including fonts, images, and illustrations
 
 ```
 @myelmut/design-system/
@@ -141,6 +142,30 @@ The package includes:
 │   ├── index.es.js       # ES module bundle
 │   ├── index.css         # Compiled styles
 │   └── types/            # TypeScript declarations
+├── styles/
+│   └── globals.css       # Source Tailwind CSS
+└── assets/
+    ├── fonts/            # Font files
+    ├── images/           # Image assets
+    └── illustrations/    # Illustration files (webp)
+```
+
+### Accessing Static Assets
+
+You can import assets directly from the package:
+
+```tsx
+// Import source CSS (if you want to customize Tailwind)
+import '@myelmut/design-system/styles/globals.css';
+
+// Import compiled CSS (recommended for most use cases)
+import '@myelmut/design-system/dist/index.css';
+
+// Import illustrations
+const chickenImage = '@myelmut/design-system/assets/illustrations/chicken.webp';
+const fridgeImage = '@myelmut/design-system/assets/illustrations/fridge.webp';
+const leafImage = '@myelmut/design-system/assets/illustrations/leaf.webp';
+const potImage = '@myelmut/design-system/assets/illustrations/pot.webp';
 ```
 
 ## Available Scripts