@veevarts/design-system 0.1.22 → 0.1.24

package/README.md

@@ -149,6 +149,65 @@ import { Card, Input, Modal, Dropdown } from '@veevarts/design-system';
 
 For complete HeroUI documentation, visit: [HeroUI Storybook](https://storybook.heroui.com/)
 
+### Configure Tailwind CSS
+
+To use the Veevart design tokens and HeroUI theme in your project, update your `tailwind.config.js`:
+
+```js
+const { heroui } = require('@heroui/react');
+const { veevartPreset, createHeroUIConfig } = require('@veevarts/design-system/tailwind');
+
+module.exports = {
+  presets: [veevartPreset],
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  darkMode: 'class',
+  plugins: [heroui(createHeroUIConfig())],
+};
+```
+
+#### Custom Primary Color (Client Branding)
+
+Override the primary color for client-specific branding:
+
+```js
+const { heroui } = require('@heroui/react');
+const { veevartPreset, createHeroUIConfig } = require('@veevarts/design-system/tailwind');
+
+// Color from API, environment variable, or configuration
+const clientPrimaryColor = process.env.CLIENT_PRIMARY_COLOR || '#C14615';
+
+module.exports = {
+  presets: [veevartPreset],
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  darkMode: 'class',
+  plugins: [
+    heroui(createHeroUIConfig({
+      colors: {
+        primary: clientPrimaryColor,
+        // You can also override: secondary, success, warning, danger
+      },
+    })),
+  ],
+};
+```
+
+#### Available Tailwind Exports
+
+| Export | Description |
+|--------|-------------|
+| `veevartPreset` | Complete Tailwind preset with all design tokens |
+| `createHeroUIConfig(overrides?)` | Creates HeroUI plugin config with optional color overrides |
+| `tokens` | All tokens: `{ colors, typography, spacing, tailwindTheme }` |
+| `colors` | Color tokens (brand, semantic, neutral, palettes) |
+| `typography` | Typography tokens (fontFamily, fontSize, fontWeight, lineHeight) |
+| `spacing` | Spacing tokens |
+
 ---
 
 ## 🏗️ Project Structure

package/dist/components/index.d.ts

@@ -1,2 +1,15 @@
+/**
+ * Components Index
+ *
+ * Re-exports all HeroUI components and overrides with custom implementations.
+ * Import from this file instead of @heroui/react to ensure custom components are used.
+ *
+ * Example:
+ *   import { Button, Card, Input } from '../../components';
+ *
+ * When a component is customized, it will automatically be used instead of the HeroUI version.
+ */
+export * from '@heroui/react';
+export type * from '@heroui/react';
 export { Button } from './Button';
 export type { ButtonProps } from './Button';