@vertis-components/components 1.0.0 → 1.0.1

package/README.md

@@ -1,4 +1,4 @@
-# @vertis/components
+# @vertis-components/components
 
 Production-ready React UI component library with Figma design token integration and Tailwind CSS styling.
 
@@ -14,9 +14,21 @@ Production-ready React UI component library with Figma design token integration
 ## Installation
 
 ```bash
-npm install @vertis/components
+npm install @vertis-components/components
 ```
 
+## Basic usage
+
+```tsx
+import { Button } from '@vertis-components/components';
+
+function App() {
+  return <Button variant="primary">Click me</Button>;
+}
+```
+
+For full setup (Tailwind, theme, Figma), see [USAGE.md](./USAGE.md). For live demos and all components, see [Storybook](https://vertis-components.vercel.app/).
+
 ## Quick Start
 
 1. Generate your theme from Figma tokens

package/USAGE.md

@@ -1,11 +1,11 @@
-# @vertis/components - Usage Guide
+# @vertis-components/components - Usage Guide
 
 The Vertis Component Library with Figma design token integration.
 
 ## Installation
 
 ```bash
-npm install @vertis/components
+npm install @vertis-components/components
 ```
 
 ## Quick Start (3 Steps)
@@ -55,7 +55,7 @@ This creates:
 **Create or update `tailwind.config.js`:**
 
 ```javascript
-const { loadTheme } = require('@vertis/components/tailwind-helper');
+const { loadTheme } = require('@vertis-components/components/tailwind-helper');
 const theme = loadTheme();
 
 module.exports = {
@@ -66,8 +66,8 @@ module.exports = {
     './app/**/*.{js,ts,jsx,tsx}',
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
-    // Include @vertis/components
-    './node_modules/@vertis/components/dist/**/*.{js,mjs}',
+    // Include @vertis-components/components
+    './node_modules/@vertis-components/components/dist/**/*.{js,mjs}',
   ],
   
   theme: {
@@ -101,7 +101,7 @@ module.exports = {
 **In your main CSS file (e.g., `globals.css` or `app/globals.css`):**
 
 ```css
-@import '@vertis/components/styles.css';
+@import '@vertis-components/components/styles.css';
 
 @tailwind base;
 @tailwind components;
@@ -113,7 +113,7 @@ module.exports = {
 **In your React components:**
 
 ```tsx
-import { Button, Card, Input, cn } from '@vertis/components';
+import { Button, Card, Input, cn } from '@vertis-components/components';
 
 export default function App() {
   return (
@@ -207,7 +207,7 @@ See the [Storybook documentation](https://vertis-components.vercel.app/) for liv
 All components are fully typed. Import types:
 
 ```tsx
-import type { ButtonProps, CardProps, InputProps } from '@vertis/components';
+import type { ButtonProps, CardProps, InputProps } from '@vertis-components/components';
 ```
 
 ---
@@ -220,8 +220,8 @@ Run `npx vertis-sync-figma && npx vertis-generate-theme` to generate your theme.
 
 ### Components not styled correctly
 
-1. Ensure `@import '@vertis/components/styles.css';` is in your main CSS
-2. Check `tailwind.config.js` includes `./node_modules/@vertis/components/dist/**/*.{js,mjs}` in `content`
+1. Ensure `@import '@vertis-components/components/styles.css';` is in your main CSS
+2. Check `tailwind.config.js` includes `./node_modules/@vertis-components/components/dist/**/*.{js,mjs}` in `content`
 3. Verify `darkMode: 'class'` is set in Tailwind config
 4. Restart your dev server after config changes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertis-components/components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/scripts/convert-tailwind.js

@@ -285,4 +285,4 @@ console.log('    border-grey-300 dark:border-grey-700');
 console.log('\n  Dark mode toggle:');
 console.log('    document.documentElement.classList.toggle("dark");');
 console.log('\n  Next step: Configure Tailwind to use this theme.');
-console.log('  See the @vertis/components USAGE.md for details.\n');
+console.log('  See the @vertis-components/components USAGE.md for details.\n');