@tenerife.music/ui 1.0.3 → 1.0.6

package/README.md

@@ -1,229 +1,513 @@
-🌴 Tenerife UI — Premium React Component Library
+# 🌴 Tenerife UI
+
+**Premium React Component Library**  
 Elegant. Token-driven. Fully Typed. Built for Luxury Interfaces.
 
 ![Release](https://img.shields.io/github/v/release/Tureckiy-zart/tenerife-ui?style=for-the-badge)
+![React](https://img.shields.io/badge/React-18+-blue?style=for-the-badge)
+![TypeScript](https://img.shields.io/badge/TypeScript-Strict-blue?style=for-the-badge)
+![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.4-38b2ac?style=for-the-badge)
+![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/Tureckiy-zart/tenerife-ui/main/.github/banner.png" width="100%" alt="Tenerife UI Banner" />
+</p>
+
+<p align="center">
+  <strong>A high-quality, fully tokenized design system for modern React applications.<br/>
+  Built with Tailwind, CVA, TypeScript with a luxury-first aesthetic.</strong>
+</p>
+
+> ⚠️ **Important:** The library is under active development. The API may change between versions. Use at your own risk. Thorough testing is recommended before using in production.
 
-<p align="center"> <img src="https://raw.githubusercontent.com/Tureckiy-zart/tenerife-ui/main/.github/banner.png" width="100%" /> </p> <p align="center"> <strong> A high-end, fully tokenized design system crafted for modern React apps.<br/> Built with Tailwind, CVA, TypeScript and a luxury-first aesthetic. </strong> </p> <p align="center"> <img src="https://img.shields.io/badge/React-18+-blue?style=for-the-badge"/> <img src="https://img.shields.io/badge/TailwindCSS-3.4-38b2ac?style=for-the-badge"/> <img src="https://img.shields.io/badge/TypeScript-Strict-blue?style=for-the-badge"/> <img src="https://img.shields.io/badge/Design%20Tokens-Complete-purple?style=for-the-badge"/> <img src="https://img.shields.io/badge/CVA-Variants-success?style=for-the-badge"/> </p>
-🚀 Quick Start
+---
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+# npm
 npm install @tenerife.music/ui
-# or
+
+# pnpm
 pnpm add @tenerife.music/ui
 
-Use a component:
+# yarn
+yarn add @tenerife.music/ui
+```
 
-import { Button } from "@tenerife.music/ui";
+### Minimal Example
 
-export function Demo() {
-return <Button variant="primary">Book Now</Button>;
+```tsx
+import { ThemeProvider, Button } from "@tenerife.music/ui";
+
+export default function App() {
+  return (
+    <ThemeProvider defaultMode="night">
+      <Button variant="default">Click me</Button>
+    </ThemeProvider>
+  );
 }
+```
+
+**Done!** 🎉 You can now use Tenerife UI components.
+
+> 📖 **Need help?** See the [Complete Guide](./docs/GETTING_STARTED.md) for detailed installation and setup instructions.
+
+---
+
+## ✨ Key Features
+
+- 🎨 **Token-driven architecture** — all styles through design tokens, no raw values
+- 🌓 **Day/Night modes** — automatic theme switching with system settings support
+- 🎯 **TypeScript-first** — full typing for all components and API
+- ♿ **Accessibility** — WCAG AA compliance out of the box, full keyboard and screen reader support
+- 📦 **Tree-shakeable** — bundle size optimization through named imports
+- 🎭 **CVA variants** — unified Variant API for all components
+- 🎨 **Tailwind CSS** — full integration with Tailwind preset
+- 🚀 **Production-ready** — tested and ready for production use
+
+---
 
-🎨 Tenerife UI Design Philosophy
+## 📚 Documentation
 
-Tenerife UI создана для:
+| Document                                                  | Description                                            |
+| --------------------------------------------------------- | ------------------------------------------------------ |
+| **[Complete Guide](./docs/GETTING_STARTED.md)**           | Comprehensive guide for installation, setup, and usage |
+| [Quick Start](./docs/QUICK_START.md)                      | Get started in 30 seconds                              |
+| [API Reference](./docs/public-api.md)                     | Complete API documentation for all components          |
+| [Tokens Guide](./docs/TOKENS_GUIDE.md)                    | Working with design tokens                             |
+| [Theme Guide](./docs/THEME_GUIDE.md)                      | Theme setup and customization                          |
+| [Storybook](https://Tureckiy-zart.github.io/tenerife-ui/) | Interactive examples of all components                 |
 
-luxury проектов
+---
 
-продвинутых приложений
+## 🏗 Installation and Setup
 
-маркетплейсов
+### Requirements
 
-платформ с глубокой эстетикой
+- **React**: `^18 || ^19`
+- **React DOM**: `^18 || ^19`
+- **Node.js**: `>=22` (recommended)
+- **TypeScript**: `>=5.0` (optional, but recommended)
 
-темных и светлых тем
+### Step 1: Install Package
 
-брендированных интерфейсов
+```bash
+npm install @tenerife.music/ui
+npm install -D tailwindcss postcss autoprefixer
+```
+
+### Step 2: Configure Tailwind CSS
 
-Это библиотека не «ещё одна коллекция кнопок».
-Это — архитектурно правильная, премиальная, коммерческая дизайн-система.
+Create `tailwind.config.ts`:
 
-🧩 Component Overview
-UI Primitives
+```typescript
+import type { Config } from "tailwindcss";
+import preset from "@tenerife.music/ui/preset";
 
-Button
+const config: Config = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@tenerife.music/ui/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  presets: [preset],
+};
 
-Input / Textarea / Select
+export default config;
+```
 
-Label
+### Step 3: Import Styles
 
-Card
+In your application's root file:
 
-Badge
+```typescript
+import "@tenerife.music/ui/styles";
+```
 
-Overlays
+### Step 4: Setup ThemeProvider
+
+```tsx
+import { ThemeProvider } from "@tenerife.music/ui";
 
-Modal
+export default function App() {
+  return (
+    <ThemeProvider defaultMode="night" enableSystem={true}>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
 
-Tooltip
+> 📖 **Learn more:** See the [Complete Guide](./docs/GETTING_STARTED.md) for setup instructions for Next.js, Vite, Remix, and other frameworks.
 
-Popover
+---
 
-Toast
+## 💡 Usage Examples
 
-Search & Filters
+### Basic Example
 
-SearchBar
+```tsx
+import {
+  ThemeProvider,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from "@tenerife.music/ui";
 
-FilterBar
+export default function App() {
+  return (
+    <ThemeProvider defaultMode="night">
+      <Card>
+        <CardHeader>
+          <CardTitle>Welcome</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Button variant="default">Get Started</Button>
+        </CardContent>
+      </Card>
+    </ThemeProvider>
+  );
+}
+```
 
-FilterSelect
+### Theme Toggle
 
-Layout
+```tsx
+import { ThemeProvider, useTheme, Button } from "@tenerife.music/ui";
 
-Grid
+function ThemeToggle() {
+  const { mode, toggleMode } = useTheme();
 
-Section
+  return (
+    <Button onClick={toggleMode} variant="outline">
+      {mode === "night" ? "☀️ Day" : "🌙 Night"}
+    </Button>
+  );
+}
 
-Navbar
+export default function App() {
+  return (
+    <ThemeProvider defaultMode="night" enableSystem={true}>
+      <ThemeToggle />
+    </ThemeProvider>
+  );
+}
+```
+
+### Form with Validation
+
+```tsx
+import {
+  Field,
+  FieldLabel,
+  FieldControl,
+  FieldError,
+  Input,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from "@tenerife.music/ui";
+
+function ContactForm() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Contact Us</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form className="space-y-4">
+          <Field>
+            <FieldLabel>Email</FieldLabel>
+            <FieldControl asChild>
+              <Input type="email" placeholder="example@email.com" />
+            </FieldControl>
+            <FieldError>Email is required</FieldError>
+          </Field>
+          <Button type="submit" variant="default">
+            Submit
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+```
 
-Hero / ModeHero
+> 📖 **More examples:** See the [Complete Guide](./docs/GETTING_STARTED.md) for additional usage examples.
 
-Data
+---
 
-Table
+## 🧩 Components
 
-List
+### Primitives
 
-Complex
+Basic UI components for building interfaces:
 
-VenueCard
+- **Button** — buttons with various variants (default, outline, destructive, ghost, link)
+- **Input** — text input fields with state support (success, error, warning)
+- **Textarea** — multi-line text input
+- **Label** — form field labels
+- **Card** — cards with variants (default, elevated, glass, outline)
+- **Badge** — badges for labels and statuses
+- **Text / Heading** — typography components
 
-EventCard
+### Forms
 
-CTA Blocks
+Components for creating forms:
 
-📦 Core System Overview (DO NOT REMOVE)
+- **Checkbox** — checkboxes with state support
+- **Radio / RadioGroup** — radio buttons and groups
+- **Select** — dropdown lists with search
+- **Field** — form field wrapper with validation
+- **FormInput / FormSelect / FormTextarea** — specialized form components
 
-Ключевой системный блок.
-Не удалять, не переносить, не изменять структуру.
+### Layout
 
-🏗 Installation
-npm install @tenerife.music/ui
+Components for structuring layouts:
 
-import { ThemeProvider } from "@tenerife.music/ui";
+- **Flex** — flexbox container with direction, alignment, and gap settings
+- **Grid** — responsive grid with breakpoint support
+- **Stack** — vertical/horizontal element placement
+- **Section** — sections with responsive padding
+- **Container** — containers with width constraints
 
-export default function App() {
-return (
-<ThemeProvider>
-<YourApp />
-</ThemeProvider>
-);
-}
+### Overlays
 
-🎨 Design Tokens System
-Цвета
+Components for modal windows and popup elements:
 
-100+ токенов
+- **Modal** — modal windows with variants
+- **Dialog** — dialog windows (DialogRoot, DialogTrigger, DialogContent)
+- **Toast** — notifications with ToastProvider system
+- **Popover** — popup tooltips
+- **Tooltip** — tooltips for elements
 
-Полные оттеночные шкалы
+### Navigation
 
-surface tokens
+Components for interface navigation:
 
-semantic + text tokens
+- **Tabs** — tabs with keyboard support
+- **Breadcrumbs** — breadcrumb navigation
+- **Pagination** — pagination with settings
+- **Stepper** — step-by-step forms
+- **SegmentedControl** — segmented control
 
-day/night mode
+### Data
 
-Типографика
+Components for displaying data:
 
-fluid clamp scale
+- **Table** — tables with sorting and filtering
+- **DataList** — data lists (DataListRoot, DataListItem, DataListLabel, DataListValue)
+- **Skeleton** — loading state skeletons
+- **EmptyState** — empty states with actions
 
-13 стилей
+### Notifications
 
-9 весов
+Notification system:
 
-6 line-heights
+- **NotificationCenter** — notification center with grouping
+- **Toast** — popup notifications
 
-6 tracking options
+### Domain Components
 
-Spacing
+Specialized components for specific domains:
 
-scale 0–96
+- **EventCard** — event cards with variants and sizes
+- **VenueCard** — venue cards
+- **ArtistCard** — artist cards
+- **TicketCard** — ticket cards
+- **PromoCard** — promo cards
 
-semantic tokens
+> 📖 **Full list:** See [API Reference](./docs/public-api.md) for a complete list of all components and their props.
 
-layout tokens
+---
 
-Shadows
+## 🎨 Design Tokens
 
-elevation 1–5
+Tenerife UI uses a fully tokenized design system:
 
-colored shadows
+### Colors
 
-glow
+- 100+ color tokens
+- Full color scales (primary, accent, secondary)
+- Surface tokens (base, elevated1-3, overlay, glass)
+- Semantic colors (success, error, warning, info)
+- Text colors (primary, secondary, tertiary, muted)
+- Day/night mode support
 
-focus rings
+### Typography
 
-Radius
+- Fluid clamp scale for responsive sizes
+- 13 text styles
+- 9 font weights (thin - black)
+- 6 line-height variants
+- 6 letter-spacing variants
 
-none → 3xl
+### Spacing
 
-full-radius
+- 8px-based system (scale 0–96)
+- Semantic tokens (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
+- Layout tokens (section padding, container widths, grid gaps)
 
-Motion
+### Shadows
 
-easing
+- Elevation levels (none, xs, sm, md, lg, xl, 2xl)
+- Colored shadows (primary-_, accent-_)
+- Glow effects (primary-glow-subtle, primary-glow-medium)
+- Focus rings (focus-ring-default, focus-ring-primary)
 
-durations
+### Radius
 
-transitions
+- Radius system (none, xs, sm, md, lg, xl, 2xl, 3xl, full)
+- Component standards (button, card, input, badge)
 
-⚙️ How Tenerife UI Works
-★ Token-first architecture
+### Motion
 
-Никаких raw стилей.
-Всё — через токены.
+- Durations (instant, fast, normal, slow, slower, slowest)
+- Easing functions (linear, ease-in, ease-out, ease-in-out, bounce, elastic)
+- Pre-configured transitions
+- Keyframes (fade, slide, scale, spin, pulse, bounce)
 
-★ Tailwind + CSS Variables
+> 📖 **Learn more:** See the [Tokens Guide](./docs/TOKENS_GUIDE.md) for detailed information on working with tokens.
 
-Цвета, spacing, shadows, radius — генерируются автоматически.
+---
 
-★ CVA для вариативности
+## ⚙️ How Tenerife UI Works
 
-Компоненты имеют единый Variant API.
+### Token-first Architecture
 
-★ Strict TypeScript
+No raw styles. Everything through tokens. This ensures consistency and easy customization.
 
-Идеальный DX и подсказки.
+### Tailwind + CSS Variables
 
-★ Theme Engine
+Colors, spacing, shadows, radius — all generated automatically through Tailwind preset and CSS variables.
 
-Instant day/night mode.
+### CVA for Variability
 
-🧱 Folder Structure
-src/
-components/
-tokens/
-theme/
-layouts/
-overlays/
-search/
-data/
+All components use Class Variance Authority (CVA) for a unified Variant API:
 
-📸 Component Preview
+```tsx
+<Button variant="default" size="md">Click me</Button>
+<Button variant="outline" size="lg">Click me</Button>
+```
 
-[![Storybook](https://img.shields.io/badge/Storybook-Open-success?style=for-the-badge)](https://Tureckiy-zart.github.io/tenerife-ui/)
+### Strict TypeScript
 
-(Добавить скриншоты/видео позже)
+Full typing for all components, props, and API ensures excellent developer experience with autocomplete and type checking.
 
-🔧 Development
+### Theme Engine
+
+Instant switching between day/night modes with support for user system settings.
+
+---
+
+## 🔧 Development
+
+### Install Dependencies
+
+```bash
 pnpm install
+```
+
+### Run in Development Mode
+
+```bash
 pnpm dev
+```
+
+### Run Storybook
+
+```bash
 pnpm storybook
+```
+
+Storybook is available at `http://localhost:6006`
+
+### Testing
+
+```bash
+# Run tests
+pnpm test
+
+# Run tests with coverage
+pnpm test:coverage
+
+# Run accessibility tests
+pnpm test:a11y
+```
+
+### Build
+
+```bash
+pnpm build
+```
+
+### Linting and Formatting
+
+```bash
+# Check linting
+pnpm lint:check
+
+# Fix linting errors
+pnpm lint:fix
+
+# Check formatting
+pnpm format:check
+
+# Format code
+pnpm format
+```
+
+---
+
+## 🛠 Contributing
+
+We welcome contributions to the library! Before starting, please read:
+
+- [TYPING_STANDARD.md](./docs/structure/TYPING_STANDARD.md) — typing standards
+- [STRUCTURE_OF_WORK.md](./docs/structure/STRUCTURE_OF_WORK.md) — work structure
+- [COMPONENT_GUIDELINES.md](./docs/structure/COMPONENT_GUIDELINES.md) — component guidelines
+
+### Contribution Process
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+---
+
+## 📜 License
+
+MIT License — Commercial-friendly.
+
+Use in commercial projects is permitted without restrictions.
 
-🛠 Contributing
+---
 
-Before contributing, please read:
+## 🔗 Links
 
-TYPING_STANDARD.md
+- **Repository**: [https://github.com/Tureckiy-zart/tenerife-ui](https://github.com/Tureckiy-zart/tenerife-ui)
+- **Issues**: [https://github.com/Tureckiy-zart/tenerife-ui/issues](https://github.com/Tureckiy-zart/tenerife-ui/issues)
+- **Storybook**: [https://Tureckiy-zart.github.io/tenerife-ui/](https://Tureckiy-zart.github.io/tenerife-ui/)
+- **npm**: [https://www.npmjs.com/package/@tenerife.music/ui](https://www.npmjs.com/package/@tenerife.music/ui)
 
-STRUCTURE_OF_WORK.md
+---
 
-COMPONENT_GUIDELINES.md
+## 🎤 From the Author
 
-📜 License
+Tenerife UI is my personal approach to creating a commercial, beautiful, and premium UI system.
 
-MIT — Commercial-friendly.
+If you're building interfaces with a "luxury, stylish, and technological" aesthetic — you're home. 🏠
 
-🎤 Author’s Note
+---
 
-Tenerife UI — это мой личный подход к созданию коммерческой, красивой и премиальной UI-системы.
-Если ты строишь интерфейсы с эстетикой “дорого, стильно и технологично” — ты дома
+<p align="center">
+  <strong>Made with ❤️ for luxury projects</strong>
+</p>

package/dist/animation/index.d.ts

@@ -6,4 +6,3 @@
 export * from './presets';
 export * from './tas';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/animation/presets.d.ts

@@ -1,4 +1,4 @@
-import { AnimationProps, PresetConfig, SpringConfig } from './types';
+import { AnimationProps, PresetConfig } from './types';
 /**
  * Fade animation presets
  */
@@ -120,17 +120,15 @@ export declare const scalePresets: {
 };
 /**
  * Stagger animation helper
- * Creates staggered animations for children elements
+ * Note: Stagger animations are not directly supported in CSS-only approach.
+ * This function is kept for API compatibility but returns empty className.
+ * For stagger effects, apply animation classes to child elements with CSS delays.
  */
-export declare function createStagger(staggerChildren?: number, delayChildren?: number, config?: PresetConfig): {
-    transition: {
-        staggerChildren: number;
-        delayChildren: number;
-    } & SpringConfig;
-};
+export declare function createStagger(_staggerChildren?: number, _delayChildren?: number, config?: PresetConfig): AnimationProps;
 /**
  * Reveal on scroll preset
  * Uses Intersection Observer for scroll-triggered animations
+ * Returns CSS class that should be applied when element is in view
  */
 export declare function revealOnScroll(config?: PresetConfig & {
     threshold?: number;
@@ -301,4 +299,3 @@ export declare const presets: {
     stagger: typeof createStagger;
     reveal: typeof revealOnScroll;
 };
-//# sourceMappingURL=presets.d.ts.map