@neoptocom/neopto-ui 0.2.1 → 0.4.0

package/CONSUMER_SETUP.md

@@ -11,7 +11,7 @@ This component library uses **Tailwind CSS v4 utility classes** directly in the
 ### Step 1: Install the library
 
 ```bash
-npm install @victorfbrito/neo-ui-demo
+npm install @neoptocom/neopto-ui
 ```
 
 ### Step 2: Install Tailwind CSS v4
@@ -27,9 +27,9 @@ Create `postcss.config.js` in your project root:
 ```js
 export default {
   plugins: {
-    '@tailwindcss/postcss': {}
-  }
-}
+    "@tailwindcss/postcss": {},
+  },
+};
 ```
 
 ### Step 4: Setup your CSS file
@@ -40,22 +40,22 @@ In your main CSS file (e.g., `src/index.css`):
 @import "tailwindcss";
 
 /* 👇 Scan the component library */
-@source "../node_modules/@victorfbrito/neo-ui-demo/dist";
+@source "../node_modules/@neoptocom/neopto-ui/dist";
 
 /* 👇 Import library tokens and styles */
-@import "@victorfbrito/neo-ui-demo/styles";
+@import "@neoptocom/neopto-ui/styles";
 ```
 
 Then import your CSS in `src/main.tsx`:
 
 ```tsx
-import './index.css'
+import "./index.css";
 ```
 
 ### Step 5: Use the components!
 
 ```tsx
-import { Button, Input, Typo } from '@victorfbrito/neo-ui-demo';
+import { Button, Input, Typo } from "@neoptocom/neopto-ui";
 
 function App() {
   return (
@@ -76,13 +76,13 @@ Toggle dark mode by adding/removing the `dark` class to your root element:
 
 ```tsx
 // Enable dark mode
-document.documentElement.classList.add('dark');
+document.documentElement.classList.add("dark");
 
 // Disable dark mode
-document.documentElement.classList.remove('dark');
+document.documentElement.classList.remove("dark");
 
 // Toggle
-document.documentElement.classList.toggle('dark');
+document.documentElement.classList.toggle("dark");
 ```
 
 ---
@@ -90,7 +90,7 @@ document.documentElement.classList.toggle('dark');
 ## 🎨 Available Components
 
 - `Button` - Interactive buttons with variants
-- `Input` - Text input fields  
+- `Input` - Text input fields
 - `Typo` - Typography with design tokens
 - `Avatar` & `AvatarGroup` - User avatars
 - `Autocomplete` - Autocomplete input
@@ -109,7 +109,8 @@ document.documentElement.classList.toggle('dark');
 **Problem:** Components render but look unstyled.
 
 **Solution:** Make sure you:
-1. ✅ Imported the library CSS: `import '@victorfbrito/neo-ui-demo/styles'`
+
+1. ✅ Imported the library CSS: `import '@neoptocom/neopto-ui/styles'`
 2. ✅ Added the library path to `tailwind.config.js` content array
 3. ✅ Have Tailwind CSS installed and configured
 
@@ -123,5 +124,4 @@ document.documentElement.classList.toggle('dark');
 
 ## 📚 Full Documentation
 
-Visit the [Storybook documentation](https://victorfbrito.github.io/neo-ui-demo/) for interactive examples and API documentation.
-
+Visit the [Storybook documentation](https://neoptocom.github.io/neopto-ui/storybook-static) for interactive examples and API documentation.

package/README.md

@@ -18,7 +18,7 @@ A modern React component library built with Tailwind CSS v4 and TypeScript. Feat
 ### Step 1: Install the library
 
 ```bash
-npm install @victorfbrito/neo-ui-demo
+npm install @neoptocom/neopto-ui
 ```
 
 ### Step 2: Install Tailwind CSS v4
@@ -34,9 +34,9 @@ Create `postcss.config.js` in your project root:
 ```js
 export default {
   plugins: {
-    '@tailwindcss/postcss': {}
-  }
-}
+    "@tailwindcss/postcss": {},
+  },
+};
 ```
 
 ### Step 4: Setup your CSS file
@@ -47,16 +47,16 @@ In your main CSS file (e.g., `src/index.css`):
 @import "tailwindcss";
 
 /* 👇 Scan the component library */
-@source "../node_modules/@victorfbrito/neo-ui-demo/dist";
+@source "../node_modules/@neoptocom/neopto-ui/dist";
 
 /* 👇 Import library styles */
-@import "@victorfbrito/neo-ui-demo/styles";
+@import "@neoptocom/neopto-ui/styles";
 ```
 
 Then import this CSS in your `src/main.tsx`:
 
 ```tsx
-import './index.css'
+import "./index.css";
 ```
 
 ## 🎨 Usage
@@ -64,7 +64,7 @@ import './index.css'
 ### Basic Example
 
 ```tsx
-import { Button, Input, Typo } from '@victorfbrito/neo-ui-demo';
+import { Button, Input, Typo } from "@neoptocom/neopto-ui";
 
 function App() {
   return (
@@ -81,10 +81,10 @@ function App() {
 
 ```tsx
 // Enable dark mode
-document.documentElement.classList.add('dark');
+document.documentElement.classList.add("dark");
 
 // Toggle dark mode
-document.documentElement.classList.toggle('dark');
+document.documentElement.classList.toggle("dark");
 ```
 
 ## Why Tailwind CSS v4 is Required
@@ -96,47 +96,52 @@ This library uses **Tailwind CSS v4** utility classes directly in components (e.
 ## 🧩 Components
 
 ### Button
+
 ```tsx
-import { Button } from '@your-username/my-ui-lib';
+import { Button } from "@neoptocom/neopto-ui";
 
 <Button variant="primary" size="md">
   Click me
-</Button>
+</Button>;
 ```
 
 ### Input
+
 ```tsx
-import { Input } from '@your-username/my-ui-lib';
+import { Input } from "@neoptocom/neopto-ui";
 
-<Input placeholder="Enter text" size="md" />
+<Input placeholder="Enter text" size="md" />;
 ```
 
 ### Typography
+
 ```tsx
-import { Typo } from '@your-username/my-ui-lib';
+import { Typo } from "@neoptocom/neopto-ui";
 
 <Typo variant="headline-lg" bold="semibold">
   Heading Text
-</Typo>
+</Typo>;
 ```
 
 ### Avatar
+
 ```tsx
-import { Avatar, AvatarGroup } from '@your-username/my-ui-lib';
+import { Avatar, AvatarGroup } from "@neoptocom/neopto-ui";
 
 <AvatarGroup max={3}>
   <Avatar name="John Doe" src="/avatar.jpg" />
   <Avatar name="Jane Smith" />
-</AvatarGroup>
+</AvatarGroup>;
 ```
 
 ### Autocomplete
+
 ```tsx
-import { Autocomplete } from '@your-username/my-ui-lib';
+import { Autocomplete } from "@neoptocom/neopto-ui";
 
 const options = [
   { label: "Option 1", value: "1" },
-  { label: "Option 2", value: "2" }
+  { label: "Option 2", value: "2" },
 ];
 
 <Autocomplete
@@ -144,7 +149,7 @@ const options = [
   options={options}
   selectedOption={selected}
   onSelect={setSelected}
-/>
+/>;
 ```
 
 ## 🎨 Design Tokens
@@ -160,7 +165,8 @@ The library uses a comprehensive design token system:
 
 ## 📚 Documentation
 
-Visit our [Storybook documentation](https://your-username.github.io/my-ui-lib) for:
+Visit our [Storybook documentation](https://neoptocom.github.io/neopto-ui/storybook-static) for:
+
 - Interactive component playground
 - Design system guidelines
 - Usage examples
@@ -183,4 +189,4 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - Built with [React](https://reactjs.org/)
 - Styled with [Tailwind CSS](https://tailwindcss.com/)
 - Documented with [Storybook](https://storybook.js.org/)
-- Bundled with [tsup](https://tsup.egoist.sh/)
+- Bundled with [tsup](https://tsup.egoist.sh/)