@vertis-components/components 1.0.0

package/README.md

@@ -0,0 +1,57 @@
+# @vertis/components
+
+Production-ready React UI component library with Figma design token integration and Tailwind CSS styling.
+
+## Features
+
+- 🎨 **Figma Integration**: Generate themes directly from Figma design tokens
+- 🌗 **Dark Mode**: Built-in dark mode support with class-based toggle
+- 📦 **TypeScript**: Fully typed components
+- ⚡ **Tailwind CSS**: Utility-first styling
+- 🎯 **Atomic Design**: Organized component structure
+- 🔧 **Customizable**: Override any theme value in your project
+
+## Installation
+
+```bash
+npm install @vertis/components
+```
+
+## Quick Start
+
+1. Generate your theme from Figma tokens
+2. Configure Tailwind with auto-loaded theme
+3. Import styles and start using components
+
+See [USAGE.md](./USAGE.md) for complete setup instructions.
+
+## Development (Monorepo Contributors)
+
+### Start Storybook
+
+To develop components in isolation:
+
+```bash
+npm run storybook
+```
+
+This will start Storybook at `http://localhost:6006`.
+
+### Build Package
+
+To build the package:
+
+```bash
+npm run build
+```
+
+## Tech Stack
+
+- **React** + **TypeScript**
+- **Tailwind CSS** for styling
+- **Storybook** for component development
+- **tsup** for bundling
+
+## License
+
+[Your License Here]

package/USAGE.md

@@ -0,0 +1,236 @@
+# @vertis/components - Usage Guide
+
+The Vertis Component Library with Figma design token integration.
+
+## Installation
+
+```bash
+npm install @vertis/components
+```
+
+## Quick Start (3 Steps)
+
+### 1. Generate Your Theme from Figma
+
+Create `.env.local` in your project root:
+
+```bash
+FIGMA_PAT=your_personal_access_token
+FIGMA_FILE_KEY=your_figma_file_key
+```
+
+**Get credentials:**
+- FIGMA_PAT: Figma → Settings → Account → Personal access tokens
+- FIGMA_FILE_KEY: From Figma URL: `https://www.figma.com/file/FILE_KEY/...`
+
+**Run theme generation:**
+
+```bash
+# Sync tokens from Figma
+npx vertis-sync-figma
+
+# Generate theme.js
+npx vertis-generate-theme
+```
+
+This creates:
+- `./tokens/` - Raw Figma design tokens (JSON)
+- `./theme.js` - Tailwind theme config with your colors, spacing, and border radius
+
+**Optional: Add to package.json scripts for convenience:**
+
+```json
+{
+  "scripts": {
+    "sync-figma": "vertis-sync-figma",
+    "generate-theme": "vertis-generate-theme"
+  }
+}
+```
+
+---
+
+### 2. Configure Tailwind
+
+**Create or update `tailwind.config.js`:**
+
+```javascript
+const { loadTheme } = require('@vertis/components/tailwind-helper');
+const theme = loadTheme();
+
+module.exports = {
+  darkMode: 'class', // Required for dark mode
+  
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './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}',
+  ],
+  
+  theme: {
+    extend: {
+      // Auto-loaded from your theme.js
+      colors: theme.colors,
+      spacing: theme.spacing,
+      borderRadius: theme.borderRadius,
+    },
+  },
+  
+  plugins: [],
+};
+```
+
+**Create or update `postcss.config.js`:**
+
+```javascript
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+---
+
+### 3. Import Styles & Use Components
+
+**In your main CSS file (e.g., `globals.css` or `app/globals.css`):**
+
+```css
+@import '@vertis/components/styles.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Your custom styles */
+```
+
+**In your React components:**
+
+```tsx
+import { Button, Card, Input, cn } from '@vertis/components';
+
+export default function App() {
+  return (
+    <div className="p-8 bg-white dark:bg-grey-900">
+      <Button variant="primary">Click Me</Button>
+      
+      <Card title="Welcome">
+        <p>Using Vertis components with your Figma theme!</p>
+      </Card>
+      
+      <Input label="Email" placeholder="Enter email" />
+    </div>
+  );
+}
+```
+
+---
+
+## Dark Mode
+
+Toggle dark mode by adding/removing the `dark` class on `<html>`:
+
+```javascript
+// Toggle
+document.documentElement.classList.toggle('dark');
+
+// Enable
+document.documentElement.classList.add('dark');
+
+// Disable
+document.documentElement.classList.remove('dark');
+```
+
+**React hook example:**
+
+```tsx
+import { useEffect, useState } from 'react';
+
+function useDarkMode() {
+  const [isDark, setIsDark] = useState(false);
+  
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDark);
+  }, [isDark]);
+  
+  return [isDark, setIsDark] as const;
+}
+
+function App() {
+  const [isDark, setIsDark] = useDarkMode();
+  
+  return (
+    <button onClick={() => setIsDark(!isDark)}>
+      Toggle {isDark ? 'Light' : 'Dark'} Mode
+    </button>
+  );
+}
+```
+
+---
+
+## Updating Your Theme
+
+When your Figma design tokens change:
+
+```bash
+npm run sync-figma        # Fetch latest tokens
+npm run generate-theme    # Regenerate theme.js
+# Restart your dev server
+```
+
+---
+
+## Available Components
+
+See the [Storybook documentation](https://vertis-components.vercel.app/) for live examples.
+
+**Atoms:**
+- Button, Link, Badge, Avatar, Input, Textarea, Checkbox, Toggle, Rating, etc.
+
+**Molecules:**
+- Card, Alert, Dropdown, DatePicker, Pagination, ProgressBar, Toast, Tooltip, etc.
+
+**Organisms:**
+- Carousel, Tabs, Stepper, Accordion, etc.
+
+---
+
+## TypeScript
+
+All components are fully typed. Import types:
+
+```tsx
+import type { ButtonProps, CardProps, InputProps } from '@vertis/components';
+```
+
+---
+
+## Troubleshooting
+
+### "No theme.js found in project root"
+
+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`
+3. Verify `darkMode: 'class'` is set in Tailwind config
+4. Restart your dev server after config changes
+
+### Colors don't match my Figma design
+
+Regenerate your theme: `npx vertis-sync-figma && npx vertis-generate-theme`
+
+---
+
+## Support
+
+- [Documentation](https://github.com/your-org/vertis-accelerator)

package/dist/index.css

@@ -0,0 +1,102 @@
+/* src/components/Carousel.css */
+.carousel-container {
+  position: relative;
+}
+.carousel-container .swiper {
+  overflow: visible;
+}
+.carousel-full-image .swiper {
+  overflow: hidden;
+  border-radius: 0.75rem;
+}
+.carousel-full-image .swiper-slide {
+  overflow: hidden;
+}
+.carousel-full-image .swiper-slide img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+.carousel-pagination-inside .swiper-pagination {
+  position: absolute;
+  bottom: 1.5rem !important;
+  left: 50% !important;
+  transform: translateX(-50%);
+  width: auto !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  z-index: 10;
+}
+.carousel-pagination-outside .swiper-pagination {
+  position: relative !important;
+  bottom: auto !important;
+  left: auto !important;
+  width: auto !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 2rem;
+}
+.carousel-bullet {
+  width: 0.875rem;
+  height: 0.875rem;
+  background: var(--grey-200, #e5e7eb);
+  border-radius: 9999px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  opacity: 1 !important;
+  transition: all 0.2s ease;
+  margin: 0 !important;
+}
+.carousel-bullet:hover {
+  background: var(--grey-300, #d1d5db);
+}
+.carousel-bullet-active {
+  background: var(--grey-900, #111827) !important;
+}
+.carousel-full-image .carousel-bullet {
+  width: 0.5rem;
+  height: 0.5rem;
+  background: rgba(255, 255, 255, 0.5);
+}
+.carousel-full-image .carousel-bullet:hover {
+  background: rgba(255, 255, 255, 0.7);
+}
+.carousel-full-image .carousel-bullet-active {
+  width: 1.5rem;
+  background: white !important;
+}
+.dark .carousel-multi-slide .carousel-bullet {
+  background: var(--grey-700, #374151);
+}
+.dark .carousel-multi-slide .carousel-bullet:hover {
+  background: var(--grey-600, #4b5563);
+}
+.dark .carousel-multi-slide .carousel-bullet-active {
+  background: var(--grey-100, #f3f4f6) !important;
+}
+.carousel-nav-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+.carousel-nav-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.carousel-container .swiper-slide {
+  height: auto;
+}
+.carousel-slide-content {
+  width: 100%;
+  height: 100%;
+}