veloria-ui 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,174 +1,120 @@
 # Changelog
 
-All notable changes to Veloria UI are documented here.  
-Project by [JohnDev19](https://github.com/JohnDev19) · [GitHub](https://github.com/JohnDev19/Veloria-UI) · [veloria-ui.vercel.app](https://veloria-ui.vercel.app/)
+All notable changes to Veloria UI are documented here.
+Project by [JohnDev19](https://github.com/JohnDev19) · [GitHub](https://github.com/JohnDev19/Veloria-UI) · [ui-veloria.vercel.app](https://ui-veloria.vercel.app/)
 
 This project follows [Semantic Versioning](https://semver.org).
 
 ---
 
-## [0.1.0] — 2024-06-28
+## [0.1.4] — 2026-03-16
 
-### Initial Release
+### New Components (10)
 
-First public release of Veloria UI. 102 components, a full CLI, 18 hooks, a Tailwind
-plugin, and a complete CSS token system with light + dark mode.
+**Charts**
+- `SparklineChart` — zero-dependency SVG inline trend line with optional area fill, animated draw-on, and end-point dot. Designed to slot directly into `StatsCard` or any compact metric surface. No external chart library needed.
+- `RadialProgressChart` — multi-segment animated SVG donut ring. Each arc is independently sized via `stroke-dasharray`, eased in on mount, with a customizable center label slot and an optional colour legend below.
+- `GaugeChart` — half-circle SVG gauge with a `requestAnimationFrame`-driven animated needle, configurable colour zones (green → amber → red by default), per-zone stroke arcs, and rendered min/max/value labels. Fully controlled via `value`, `min`, `max`, and `zones` props.
 
----
+**Modern & Unique**
+- `AuroraCard` — dark-surface card with three aurora gradient blobs that track mouse position via `onMouseMove` offset math. Each blob moves at a different speed and direction, creating a parallax aurora effect. The content renders inside a relative `z-10` panel on top. Zero external dependencies — pure CSS transforms + inline style.
+- `TypewriterText` — cycles through a `strings[]` array, typing each character-by-character then erasing, with configurable `speed`, `deleteSpeed`, `pause`, `cursor`, and `loop` props. Cursor blinks independently of the typing loop via a separate `setInterval`. Accessible with `aria-live="polite"`.
 
-#### veloria-ui
-
-**Basic (10)**
-- `Button` — solid, outline, ghost, soft, link, danger variants · sizes xs–xl · loading state · left/right icon slots
-- `IconButton` — square or circular icon-only button with all button variants
-- `Link` — anchor with external link indicator and underline control
-- `Badge` — compact label with 5 color variants and optional dot
-- `Avatar` — image with fallback initials, online/offline status ring, 6 sizes
-- `AvatarGroup` — stacked avatar row with overflow count
-- `Divider` — horizontal/vertical with optional center label
-- `Tag` — closable colored tag with icon slot
-- `Chip` — toggleable with avatar/icon support and remove button
-- `Tooltip` — Radix-powered, all four sides, configurable delay
-
-**Layout (10)**
-- `Container` — responsive max-width wrapper with padding control
-- `Stack` — flex column/row with gap, align, justify, and divider support
-- `Grid` — CSS Grid with column/row/gap config
-- `Flex` — inline flex with full directional control
-- `Section` — semantic `<section>` with vertical padding presets
-- `Spacer` — invisible spacer
-- `AspectRatio` — Radix aspect-ratio wrapper
-- `Center` — flex centering helper
-- `ScrollArea` — custom scrollbar via Radix ScrollArea
-- `Masonry` — CSS multi-column masonry grid
-
-**Navigation (10)**
-- `Navbar` — sticky + glass-blur top bar
-- `Sidebar` — collapsible with width transition
-- `Menu` / `MenuItem` — vertical nav with active/disabled states
-- `DropdownMenu` — full Radix Dropdown with all sub-primitives
-- `Breadcrumb` — accessible trail with custom separator
-- `Pagination` — page numbers, ellipsis, prev/next
-- `Tabs` — line, pills, enclosed variants · Radix powered
-- `Stepper` — horizontal/vertical multi-step progress indicator
-- `CommandDialog` — ⌘K command palette via cmdk
-
-**Forms (10)**
-- `Input` — left/right icon slots, sizes, error state
-- `TextArea` — resize control, error state
-- `Select` — full Radix Select with all sub-primitives
-- `Checkbox` — with label, description, error state
-- `RadioGroup` — per-option labels and descriptions
-- `Switch` — three sizes, label, description
-- `Slider` — range slider
-- `RangeSlider` — dual-thumb slider
-- `DatePicker` — native date input wrapper
-- `TimePicker` — native time input wrapper
-
-**Advanced Forms (10)**
-- `FileUpload` — drag-and-drop zone with click-to-upload fallback
-- `OTPInput` — PIN/OTP with auto-advance and paste support
-- `ColorPicker` — swatches + hex input
-- `SearchInput` — search with loading state and clear button
-- `PasswordInput` — toggle show/hide
-- `Combobox` — searchable single-value select
-- `MultiSelect` — multi-value select with chips
-- `FormField` / `FormLabel` / `FormError` — composable form primitives
-
-**Data Display (10)**
-- `Card` — surface with header/content/footer slots · 5 variants
-- `Table` + sub-primitives — full HTML table system
-- `DataTable` — sortable data table with loading and empty states
-- `List` / `ListItem` — simple, bordered, and divided lists
-- `Statistic` — key metric with trend indicator
-- `Timeline` — vertical events with color-coded icons
-- `Calendar` — month picker with highlighted dates
-- `CodeBlock` — code display with copy button and line numbers
-- `Chart` — chart wrapper (bring your own chart library)
-
-**Feedback (10)**
-- `Alert` — info/success/warning/danger with optional dismiss
-- `Toast` — Radix Toast with all sub-primitives
-- `Snackbar` — positioned message with action
-- `Progress` — linear bar with color variants
-- `CircularProgress` — SVG ring with indeterminate mode
-- `Skeleton` — pulse placeholder for text, rect, circle
-- `LoadingSpinner` — accessible SVG spinner
-- `EmptyState` — icon + title + description + action slot
-- `StatusIndicator` — online/offline/busy/away dot with pulse
-- `Notification` — notification item with avatar, timestamp, unread dot
-
-**Overlay (10)**
-- `Modal` — preset dialog with size variants (sm → full)
-- `Dialog` — full Radix Dialog primitive suite
-- `Drawer` — slide-in from any edge (left/right/top/bottom)
-- `Sheet` — Drawer alias
-- `Popover` — floating panel
-- `HoverCard` — rich hover preview
-- `ContextMenu` — right-click menu
-- `CommandDialog` — ⌘K palette
-- `Lightbox` / `ImageViewer` — full-screen image overlay
-
-**Media (5)**
-- `Image` — fallback, aspect ratio, object-fit, rounded, caption
-- `VideoPlayer` — HTML5 video with captions/subtitles track support
-- `AudioPlayer` — custom UI with seek bar, cover art
-- `Carousel` — autoplay, dots, arrows, loop, slidesPerView
-- `Gallery` — responsive image grid with click handler
-
-**Utility (5)**
-- `ThemeSwitcher` — icon / toggle / select variants
-- `CopyButton` — icon or labelled button with success feedback
-- `KeyboardShortcut` — styled `<kbd>` shortcut display
-- `ResizablePanel` — drag-to-resize with min/max constraints
-- `DragDropArea` — accessible file drop zone
-
-#### Hooks
-- `useDisclosure` — open/close state management
-- `useMediaQuery` — window media query subscription
-- `useBreakpoint` — Tailwind breakpoint helper
-- `useClipboard` — clipboard copy with timeout feedback
-- `useLocalStorage` — persistent state
-- `useTheme` — theme switching (persists to localStorage)
-- `useDebounce` — debounced value
-- `useOnClickOutside` — outside click detection
-- `useKeydown` — keyboard shortcut listener with modifier support
-- `useMounted` — SSR-safe mount check
-- `useToast` — programmatic toast notifications
-
-#### Infrastructure
-- Tailwind CSS plugin + preset (`atlasPlugin`, `atlasPreset`)
-- Full CSS design token system — light and dark themes
-- `AtlasProvider` for Next.js App Router
-- TypeScript strict throughout — full named type exports
-- Tree-shakeable ESM + CJS dual build via tsup
-- Turbo monorepo setup
-
-#### veloria-ui CLI
-- `init` — project setup wizard (detects Next.js, writes atlas.config.json)
-- `add` — copies components + installs npm deps, resolves Veloria UI peer deps
-- `list` — browse all 102 components filtered by category
-- `diff` — compare local copy to latest (registry fetch, coming soon)
-- Auto-detects npm / pnpm / yarn / bun
+**Data Display**
+- `FileCard` — file attachment surface with auto-derived type badge (colour-coded per extension), formatted file size, optional upload/download progress bar that turns green on completion, and download/remove action buttons. Two layout variants: `compact` (inline pill) and `full` (card with icon block).
+- `PricingCard` — structured pricing tier with plan name, price + billing period, optional description, feature list with check/cross icons and optional notes, a CTA button that highlights when `popular` is set, and a "Most popular" ribbon badge. Supports `classic` bevel variant.
 
----
+**Forms**
+- `NumberInput` — stepper input flanked by − and + buttons. Clamps to `min`/`max`, steps by configurable `step` amount, increments on `ArrowUp`/`ArrowDown` keyboard events, and adjusts on mouse scroll when focused. Hides native browser spinners. Supports controlled and uncontrolled modes. Sizes `xs`–`lg`.
+- `AvatarUpload` — avatar circle with a camera overlay that appears on hover, a hidden `<input type="file">` triggered on click or keyboard, instant `FileReader` base64 preview, max-size validation with an error message, and a "Remove photo" link. Sizes `sm`–`xl`. Fully accessible with `role="button"` and `aria-label`.
+
+**Feedback**
+- `StepProgress` — animated segmented progress bar. Each segment fills left-to-right with a staggered CSS `scaleX` transition (40ms per-segment delay). Props: `steps`, `current`, `color`, `animated`, `showLabel`, `size`. Renders a `role="progressbar"` with correct ARIA attributes.
+
+**Utility**
+- `TypewriterText` — see Modern & Unique above (also exported from `utility`).
+
+### Architecture
+
+All 10 new components are **standalone files** — each lives in its own `.tsx` file alongside the relevant `index.tsx`. This means `index.tsx` re-exports them without duplicating implementation, tree-shaking works per-component, and diffs stay minimal when individual components change.
+
+- `src/components/data-display/SparklineChart.tsx`
+- `src/components/data-display/RadialProgressChart.tsx`
+- `src/components/data-display/GaugeChart.tsx`
+- `src/components/data-display/AuroraCard.tsx`
+- `src/components/data-display/FileCard.tsx`
+- `src/components/data-display/PricingCard.tsx`
+- `src/components/forms/NumberInput.tsx`
+- `src/components/forms/AvatarUpload.tsx`
+- `src/components/feedback/StepProgress.tsx`
+- `src/components/utility/TypewriterText.tsx`
+
+### CLI Registry
+
+All 10 new components are registered in `src/cli/registry.ts` and are available via:
+
+```bash
+npx veloria-ui add sparkline-chart
+npx veloria-ui add radial-progress-chart
+npx veloria-ui add gauge-chart
+npx veloria-ui add aurora-card
+npx veloria-ui add pricing-card
+npx veloria-ui add file-card
+npx veloria-ui add number-input
+npx veloria-ui add avatar-upload
+npx veloria-ui add step-progress
+npx veloria-ui add typewriter-text
+```
 
 ---
 
-## [0.1.1] — 2026-03-13 (UPDATED)
+## [0.1.3] — 2026-03-16
 
-### Build fixes
+### Classic Variant
 
-- Fixed `tailwindcss/plugin` resolve error — marked as external in tsup, switched to `require()` at runtime
-- Fixed `"types"` export condition ordering in `package.json` — `types` now comes before `import`/`require`
-- Fixed `use-toast.ts` renamed to `use-toast.tsx` — file contained JSX but had `.ts` extension
-- Fixed `TS2320` / `TS2322` conflicts across all component interfaces — `HTMLAttributes` built-in props (`color`, `size`, `title`, `prefix`, `onChange`, `onDrop`, `onDragOver`) now properly `Omit`-ed before extending
-- Renamed package from `veloria-ui-kit` to `veloria-ui`
-- CLI `--version` flag now reads dynamically from `package.json` instead of being hardcoded
+Added `classic` variant across **Button**, **IconButton**, **Badge**, **Tag**, **Chip**, and **Card** components. The classic style uses beveled inset box-shadows to mimic the tactile feel of physical plastic or rubber:
+- Top-left inset highlight (`rgba(255,255,255,0.72)` light mode, `rgba(255,255,255,0.10)` dark)
+- Bottom-right inset shadow (`rgba(0,0,0,0.14)` light mode, `rgba(0,0,0,0.50)` dark)
+- Active/pressed state inverts the bevel to simulate a physical click-down
+
+New CSS utilities added to `veloria.css`:
+- `.veloria-classic` — applies the raised bevel shadow
+- `.veloria-classic-pressed` — applies the pressed/inverted bevel shadow
+- CSS custom properties `--classic-highlight`, `--classic-shadow`, `--classic-bevel`, `--classic-bevel-pressed` — all responsive to dark mode
+
+### Select Dropdown Redesign
+
+Replaced the system-native OS picker with a fully custom animated dropdown:
+- Layered `box-shadow` (soft ambient + key shadow, separate dark mode values)
+- Open animation: `fade-in-0` + `zoom-in-[0.97]` + directional slide from trigger
+- Close animation: `fade-out-0` + `zoom-out-95` + reverse slide
+- `SelectScrollUpButton` / `SelectScrollDownButton` — appear when list overflows, replacing the OS scrollbar
+- Chevron icon rotates 180° when dropdown is open (CSS rule on `.atlas-select-trigger[data-state="open"] svg`)
+- `SelectLabel` styled as uppercase tracking-widened group headers
+- Max height capped to `min(available-height, 18rem)` to prevent off-screen overflow
+
+### Branding & Naming
+
+- Renamed all `atlas-` CSS keyframe and class prefixes to `veloria-` throughout `veloria.css`
+- Renamed `atlas.css` to `veloria.css` — update your import to `import "veloria-ui/styles"`
+- Renamed `atlasPlugin` → `veloriaPlugin` and `atlasPreset` → `veloriaPreset` in `tailwind.ts`
+- Renamed `AtlasProvider` → `VeloriaProvider` and `AtlasProviderProps` → `VeloriaProviderProps` in `provider.tsx`
+- Renamed `AtlasTheme` type → `VeloriaTheme` in `hooks/index.ts`
+- Renamed `AtlasBaseProps` → `VeloriaBaseProps` and `AtlasAriaProps` → `VeloriaAriaProps` in `types/index.ts`
+- Renamed `atlas.config.json` → `veloria.config.json` — CLI `init` now writes `veloria.config.json`
+- Renamed localStorage theme key from `atlas-theme` to `veloria-theme`
+- Removed legacy `atlas` bin alias from `package.json`
+- Updated all homepage and docs URLs to `https://ui-veloria.vercel.app/`
+
+### Bug Fixes
+
+- Fixed `TypeError: Cannot read properties of null (reading 'matches')` — `window.matchMedia` now uses optional chaining (`?.`) in `useTheme` and an explicit null guard in `useMediaQuery`, preventing crashes in jsdom and certain SSR environments
+- Fixed `TS2430` on `StatisticProps` — added `Omit<..., "prefix">` to resolve conflict with `HTMLAttributes.prefix`
+- Fixed `TS2430` on `CalendarProps` — added `Omit<..., "onChange">` to resolve conflict with `HTMLAttributes.onChange`
 
 ---
 
-## [0.1.2] — 2026-03-15 (UPDATED)
+## [0.1.2] — 2026-03-15
 
 ### New Components (20)
 
@@ -203,4 +149,25 @@ plugin, and a complete CSS token system with light + dark mode.
 - `useIntersection` — IntersectionObserver wrapper with optional `once` mode
 - `useWindowSize` — reactive window width and height, SSR-safe
 - `useStep` — multi-step wizard state with `isFirst`, `isLast`, and progress percentage
-- `useCountdown` — countdown timer with `start`, `pause`, and `reset` controls
+- `useCountdown` — countdown timer with `start`, `pause`, and `reset` controls
+
+---
+
+## [0.1.1] — 2026-03-13
+
+### Build fixes
+
+- Fixed `tailwindcss/plugin` resolve error — marked as external in tsup, switched to `require()` at runtime
+- Fixed `"types"` export condition ordering in `package.json` — `types` now comes before `import`/`require`
+- Fixed `use-toast.ts` renamed to `use-toast.tsx` — file contained JSX but had `.ts` extension
+- Fixed `TS2320` / `TS2322` conflicts across all component interfaces — `HTMLAttributes` built-in props (`color`, `size`, `title`, `prefix`, `onChange`, `onDrop`, `onDragOver`) now properly `Omit`-ed before extending
+- Renamed package from `veloria-ui-kit` to `veloria-ui`
+- CLI `--version` flag now reads dynamically from `package.json` instead of being hardcoded
+
+---
+
+## [0.1.0] — 2024-06-28
+
+### Initial Release
+
+First public release of Veloria UI. A full CLI, hooks, a Tailwind plugin, and a complete CSS token system with light + dark mode.

package/README.md

@@ -10,7 +10,7 @@
 
 ### **Build anything. Ship faster.**
 
-102 production-ready React components — accessible, composable, dark-mode ready.
+Production-ready React components — accessible, composable, dark-mode ready.
 Works with Tailwind CSS and Next.js out of the box.
 
 [![npm](https://img.shields.io/npm/v/veloria-ui?color=0ea5e9&label=veloria-ui)](https://www.npmjs.com/package/veloria-ui)
@@ -18,7 +18,7 @@ Works with Tailwind CSS and Next.js out of the box.
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178c6)](https://www.typescriptlang.org)
 [![GitHub](https://img.shields.io/github/stars/JohnDev19/Veloria-UI?style=social)](https://github.com/JohnDev19/Veloria-UI)
 
-**[Docs](https://veloria-ui.vercel.app/)** · **[Components](https://veloria-ui.vercel.app/components)** · **[Issues](https://github.com/JohnDev19/Veloria-UI/issues)** · **[Changelog](CHANGELOG.md)**
+**[Docs](https://ui-veloria.vercel.app/)** · **[Components](https://ui-veloria.vercel.app/components)** · **[Issues](https://github.com/JohnDev19/Veloria-UI/issues)** · **[Changelog](CHANGELOG.md)**
 
 </div>
 
@@ -47,12 +47,12 @@ import "veloria-ui/styles";
 
 ```ts
 // tailwind.config.ts
-import { atlasPlugin } from "veloria-ui/tailwind";
+import { veloriaPlugin } from "veloria-ui/tailwind";
 
 export default {
   darkMode: ["class"],
   content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
-  plugins: [atlasPlugin],
+  plugins: [veloriaPlugin],
 };
 ```
 
@@ -60,13 +60,13 @@ export default {
 
 ```tsx
 // app/layout.tsx
-import { AtlasProvider } from "veloria-ui/provider";
+import { VeloriaProvider } from "veloria-ui/provider";
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body>
-        <AtlasProvider>{children}</AtlasProvider>
+        <VeloriaProvider>{children}</VeloriaProvider>
       </body>
     </html>
   );
@@ -98,14 +98,14 @@ export default function Page() {
 veloria-ui ships with a CLI that copies components straight into your project — shadcn-style. You own the code.
 
 ```bash
-# Set up veloria-ui in your project (writes atlas.config.json)
+# Set up veloria-ui in your project (writes veloria.config.json)
 npx veloria-ui init
 
 # Add components
 npx veloria-ui add button
 npx veloria-ui add card modal drawer toast
 
-# Browse all 102 components
+# Browse all components
 npx veloria-ui list
 npx veloria-ui list --category forms
 
@@ -117,28 +117,32 @@ After running `add`, a file like `components/ui/button/index.tsx` appears in you
 
 ---
 
-## Components (90)
+## Components
 
 ### Basic (10)
 `Button` `IconButton` `Link` `Badge` `Avatar` `AvatarGroup` `Divider` `Tag` `Chip` `Tooltip`
 
+> All interactive components now support a `classic` variant — beveled edges that mimic physical plastic or rubber with a tactile press effect.
+
 ### Layout (10)
 `Container` `Stack` `Grid` `Flex` `Section` `Spacer` `AspectRatio` `Center` `ScrollArea` `Masonry`
 
 ### Navigation (10)
 `Navbar` `Sidebar` `Menu` `DropdownMenu` `Breadcrumb` `Pagination` `Tabs` `CommandPalette` `NavigationMenu` `Stepper`
 
-### Forms (10)
-`Input` `TextArea` `Select` `Checkbox` `RadioGroup` `Switch` `Slider` `RangeSlider` `DatePicker` `TimePicker`
+### Forms (12)
+`Input` `TextArea` `Select` `Checkbox` `RadioGroup` `Switch` `Slider` `RangeSlider` `DatePicker` `TimePicker` `NumberInput` `AvatarUpload`
+
+> `Select` now uses a fully custom animated dropdown — no OS picker. Includes scroll buttons, chevron animation, and directional slide-in/out transitions.
 
-### Advanced Forms (10)
-`FileUpload` `OTPInput` `ColorPicker` `SearchInput` `PasswordInput` `Combobox` `MultiSelect` `FormField` `FormLabel` `FormError`
+### Advanced Forms (14)
+`FileUpload` `OTPInput` `ColorPicker` `SearchInput` `PasswordInput` `Combobox` `MultiSelect` `FormField` `FormLabel` `FormError` `PhoneInput` `TagInput` `CurrencyInput` `RatingInput`
 
-### Data Display (10)
-`Card` `Table` `DataTable` `List` `ListItem` `Statistic` `Timeline` `Calendar` `Chart` `CodeBlock`
+### Data Display (19)
+`Card` `Table` `DataTable` `List` `ListItem` `Statistic` `Timeline` `Calendar` `Chart` `CodeBlock` `StatsCard` `TreeView` `JsonViewer` `Heatmap` `KanbanBoard` `SparklineChart` `RadialProgressChart` `GaugeChart` `AuroraCard` `FileCard` `PricingCard`
 
-### Feedback (10)
-`Alert` `Toast` `Snackbar` `Progress` `CircularProgress` `Skeleton` `LoadingSpinner` `EmptyState` `StatusIndicator` `Notification`
+### Feedback (15)
+`Alert` `Toast` `Snackbar` `Progress` `CircularProgress` `Skeleton` `LoadingSpinner` `EmptyState` `StatusIndicator` `Notification` `BannerAlert` `ConfirmDialog` `FloatingActionButton` `RichTooltip` `Tour` `StepProgress`
 
 ### Overlay (10)
 `Modal` `Dialog` `Drawer` `Popover` `HoverCard` `ContextMenu` `CommandDialog` `Sheet` `Lightbox` `ImageViewer`
@@ -146,8 +150,121 @@ After running `add`, a file like `components/ui/button/index.tsx` appears in you
 ### Media (5)
 `Image` `VideoPlayer` `AudioPlayer` `Carousel` `Gallery`
 
-### Utility (5)
-`ThemeSwitcher` `CopyButton` `KeyboardShortcut` `ResizablePanel` `DragDropArea`
+### Utility (8)
+`ThemeSwitcher` `CopyButton` `KeyboardShortcut` `ResizablePanel` `DragDropArea` `InfiniteScroll` `VirtualList` `TypewriterText`
+
+---
+
+## New in v0.1.4
+
+### Charts
+
+```tsx
+import { SparklineChart, RadialProgressChart, GaugeChart } from "veloria-ui";
+
+// Inline trend line — slots into any stat card
+<SparklineChart data={[12, 18, 14, 22, 19, 28, 31]} color="hsl(var(--primary))" />
+
+// Animated multi-segment ring
+<RadialProgressChart
+  segments={[
+    { value: 65, label: "Series A", color: "#7F77DD" },
+    { value: 25, label: "Series B", color: "#1D9E75" },
+    { value: 10, label: "Series C", color: "#EF9F27" },
+  ]}
+  size={140}
+  centerLabel={<span className="text-lg font-bold">90%</span>}
+/>
+
+// Gauge with animated needle
+<GaugeChart value={72} label="CPU usage" size={200} />
+```
+
+### Modern & Unique
+
+```tsx
+import { AuroraCard, TypewriterText } from "veloria-ui";
+
+// Dark card with mouse-reactive aurora blobs
+<AuroraCard className="p-8 text-white">
+  <h2 className="text-2xl font-bold">Ship faster</h2>
+  <p className="mt-2 text-white/70">Aurora reacts to your cursor.</p>
+</AuroraCard>
+
+// Typewriter cycling through strings
+<TypewriterText
+  strings={["Build anything.", "Ship faster.", "Dark mode ready."]}
+  speed={80}
+  pause={2000}
+/>
+```
+
+### New Form Components
+
+```tsx
+import { NumberInput, AvatarUpload } from "veloria-ui";
+
+<NumberInput value={qty} onChange={setQty} min={1} max={99} step={1} size="md" />
+
+<AvatarUpload
+  value={avatarUrl}
+  onChange={(file, preview) => upload(file)}
+  onRemove={() => setAvatarUrl(undefined)}
+  maxSize={2 * 1024 * 1024}
+  fallback="JD"
+  size="lg"
+/>
+```
+
+### StepProgress
+
+```tsx
+import { StepProgress } from "veloria-ui";
+
+<StepProgress steps={4} current={2} showLabel size="md" />
+// → Step 2 of 4 · 50%
+```
+
+### PricingCard & FileCard
+
+```tsx
+import { PricingCard, FileCard } from "veloria-ui";
+
+<PricingCard
+  name="Pro"
+  price={29}
+  period="/month"
+  description="For teams that ship fast."
+  popular
+  features={[
+    { label: "Unlimited projects", included: true },
+    { label: "Priority support", included: true },
+    { label: "Custom domain", included: false },
+  ]}
+  onCtaClick={() => checkout("pro")}
+/>
+
+<FileCard
+  filename="Q4_report_final.pdf"
+  size={2.4 * 1024 * 1024}
+  progress={100}
+  onDownload={() => download()}
+  onRemove={() => remove()}
+/>
+```
+
+---
+
+## Classic variant
+
+All interactive components now accept `variant="classic"` — a beveled style that mimics physical plastic or rubber:
+
+```tsx
+<Button variant="classic">Classic button</Button>
+<Badge variant="classic" color="success">New</Badge>
+<Card variant="classic" interactive>Classic card</Card>
+<Chip classic>Filter</Chip>
+```
 
 ---
 
@@ -166,6 +283,12 @@ import {
   useKeydown,        // keyboard shortcut listener with modifier support
   useMounted,        // SSR-safe mount check
   useToast,          // fire toasts programmatically
+  useForm,           // form state + validation, no dependencies
+  usePagination,     // pagination logic decoupled from UI
+  useIntersection,   // IntersectionObserver wrapper
+  useWindowSize,     // reactive viewport dimensions, SSR-safe
+  useStep,           // multi-step wizard state
+  useCountdown,      // countdown timer with start/pause/reset
 } from "veloria-ui";
 ```
 
@@ -214,20 +337,21 @@ veloria-ui/
 │   │   ├── basic/           Button, IconButton, Badge, Avatar, Tooltip…
 │   │   ├── layout/          Container, Stack, Grid, ScrollArea, Masonry…
 │   │   ├── navigation/      Navbar, Tabs, DropdownMenu, Stepper…
-│   │   ├── forms/           Input, Select, Checkbox, Slider, Switch…
+│   │   ├── forms/           Input, Select, Checkbox, Slider, NumberInput, AvatarUpload…
 │   │   ├── advanced-forms/  OTPInput, ColorPicker, Combobox, MultiSelect…
-│   │   ├── data-display/    Card, DataTable, Timeline, Calendar, CodeBlock…
-│   │   ├── feedback/        Alert, Toast, Skeleton, EmptyState, Progress…
+│   │   ├── data-display/    Card, DataTable, SparklineChart, RadialProgressChart,
+│   │   │                    GaugeChart, AuroraCard, PricingCard, FileCard…
+│   │   ├── feedback/        Alert, Toast, Skeleton, StepProgress, EmptyState…
 │   │   ├── overlay/         Modal, Drawer, CommandDialog, Lightbox…
 │   │   ├── media/           VideoPlayer, AudioPlayer, Carousel, Gallery…
-│   │   └── utility/         ThemeSwitcher, CopyButton, ResizablePanel…
-│   ├── hooks/               18 utility hooks
-│   ├── styles/              atlas.css — full design token system
+│   │   └── utility/         ThemeSwitcher, CopyButton, TypewriterText…
+│   ├── hooks/               utility hooks
+│   ├── styles/              veloria.css — full design token system
 │   ├── types/               shared TypeScript types
 │   ├── utils/               cn() and helpers
 │   ├── cli/                 veloria-ui CLI (add, init, list, diff)
-│   ├── provider.tsx         AtlasProvider for Next.js
-│   └── tailwind.ts          atlasPlugin + atlasPreset
+│   ├── provider.tsx         VeloriaProvider for Next.js
+│   └── tailwind.ts          veloriaPlugin + veloriaPreset
 ├── package.json
 ├── tsup.config.ts
 └── tsconfig.json
@@ -250,4 +374,4 @@ MIT © [JohnDev19](https://github.com/JohnDev19)
 
 <div align="center">
   <sub>Built by JohnDev19</sub>
-</div>
+</div>