astro-component-kit 0.3.0 → 0.4.0

package/README.md

@@ -1,11 +1,11 @@
 # ⬇ Astro Component Kit
 
-> A premium, open-source accessible UI component library built for [Astro](https://astro.build).
+> A free, open-source accessible UI component library built for [Astro 5.x](https://astro.build).
 > **🌐 Browse & copy components** at [astrocomponents.dev](https://astrocomponents.dev)
 > **📦 Install via npm** or **copy-paste** — your choice!
 
 ![License: MIT](https://img.shields.io/badge/License-MIT-6366f1.svg)
-![Astro](https://img.shields.io/badge/Astro-6.x-c084fc.svg)
+![Astro](https://img.shields.io/badge/Astro-5.x-c084fc.svg)
 ![npm](https://img.shields.io/npm/v/astro-component-kit.svg)
 ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-34d399.svg)
 
@@ -13,12 +13,13 @@
 
 ## ✨ Features
 
-- 🎨 **Premium design** — glassmorphism, gradients and micro-animations
-- ♿ **Accessible** — semantic HTML and ARIA attributes included
+- 🎨 **Premium design** — dark mode first, glassmorphism, fluid typography, and subtle micro-animations
+- ⚡ **Full-page sections** — 14 production-ready landing sections (Heroes, Bento Grids, Pricing Matrices, Testimonials, CTAs, FAQs, Teams)
+- ♿ **Accessible** — strictly WCAG 2.1 AA compliant with ARIA roles and keyboard navigation
 - 📋 **Copy & paste** — browse [astrocomponents.dev](https://astrocomponents.dev) and copy components directly
 - 📦 **npm installable** — `npm install astro-component-kit` for direct imports
-- ♻️ **Zero dependencies** — pure `.astro` components + Vanilla CSS
-- 🌑 **Dark mode first** — designed for dark interfaces out of the box
+- ♻️ **Zero runtime dependencies** — pure `.astro` components + Vanilla CSS
+- 🌑 **Dark mode first** — crafted for modern, dark-themed developer interfaces
 - 🔓 **Open Source** — MIT license, contributions welcome
 
 ---
@@ -35,23 +36,42 @@ Then import and use components in your Astro pages:
 
 ```astro
 ---
-// Root import — all components
-import { GlassButton, GlassCard, GlassNavbar } from 'astro-component-kit';
-
-// Or import by category (recommended for tree-shaking)
-import { GlassButton, GlowButton } from 'astro-component-kit/buttons';
+// Root import — all components and sections
+import { 
+  GlassButton, 
+  GlassCard, 
+  FeatureBentoGrid, 
+  PricingComparisonMatrix, 
+  CtaGlowBanner 
+} from 'astro-component-kit';
+
+// Or import by category (recommended for modularity)
+import { GlassButton, GlowButton, ThreeDPushButton } from 'astro-component-kit/buttons';
 import { GlassCard, ProfileCard, PricingCard } from 'astro-component-kit/cards';
-import { GlassAlert, Badge } from 'astro-component-kit/feedback';
-import { GlassNavbar, BreadcrumbsMinimal } from 'astro-component-kit/navigation';
-import { GlassModal, OverlayModal } from 'astro-component-kit/overlays';
-import { AnimatedInput, OTPInput } from 'astro-component-kit/forms';
-import { MasonryGrid, BentoGrid3 } from 'astro-component-kit/layout';
-import { GradientHeading, GlassBlockQuote } from 'astro-component-kit/typography';
-import { FadeInWrapper, VisuallyHidden } from 'astro-component-kit/utilities';
+import { GlassAlert, Badge, ConfettiFeedback } from 'astro-component-kit/feedback';
+import { GlassNavbar, MegaMenuGlass, BreadcrumbsMinimal } from 'astro-component-kit/navigation';
+import { OverlayModal, CommandDialog, BottomSheetMobile } from 'astro-component-kit/overlays';
+import { AnimatedInput, OTPInput, GlassSlider } from 'astro-component-kit/forms';
+import { GlassCardGrid, SplitScreenLayout, MasonryGrid, BentoGrid3 } from 'astro-component-kit/layout';
+import { GradientHeading, GlassBlockQuote, CyberpunkGlitchText } from 'astro-component-kit/typography';
+import { AreaChart, DonutChart, BarChart } from 'astro-component-kit/charts';
+import { 
+  FeatureBentoGrid, 
+  PricingComparisonMatrix, 
+  TestimonialWallGlass, 
+  CtaGlowBanner, 
+  FaqAccordionSection, 
+  StatsMetricShowcase,
+  TeamGridSection,
+  ContactGlassForm
+} from 'astro-component-kit/sections';
 ---
 
 <GlassButton variant="primary">Click me</GlassButton>
 <GlassCard title="Welcome">Content here</GlassCard>
+
+<!-- Drop-in full section -->
+<FeatureBentoGrid />
 ```
 
 **Import global design tokens** (optional but recommended):
@@ -74,7 +94,7 @@ import 'astro-component-kit/global.css';
 
 ```bash
 git clone https://github.com/konstantinwdk/astro-components.git
-cd astro-component-kit
+cd astro-components
 npm install
 npm run dev
 ```
@@ -83,92 +103,104 @@ Open [http://localhost:4321](http://localhost:4321) to browse components locally
 
 ---
 
-## 📚 Component Library
+## 📚 Component & Section Library
 
-**200+ components** across 10 categories:
+**290+ components & full-page sections** across 11 categories:
 
 | Category | Components | Description |
-|----------|------------|-------------|
-| **Buttons** | 19 | Glass, glow, neumorphic, animated, and more |
-| **Cards** | 19 | Product, profile, pricing, weather, and more |
-| **Data** | 20 | Tables, timelines, charts, trees |
-| **Feedback** | 20 | Alerts, modals, toasts, spinners, tooltips |
-| **Forms** | 20 | Inputs, selects, sliders, OTP, ratings |
-| **Layout** | 20 | Grids, sections, sidebars, footers |
-| **Navigation** | 20 | Navbars, breadcrumbs, tabs, pagination |
-| **Overlays** | 20 | Modals, drawers, lightboxes, popovers |
-| **Typography** | 20 | Headings, links, quotes, glitch text |
-| **Utilities** | 20 | Patterns, masks, reveals, accessibility |
+|----------|:----------:|-------------|
+| **Charts & Stats** | 47 | 41 zero-dependency SVG charts rendered at build time (line, area, bars, waterfall, pie, gauge, treemap, sankey, radar, heatmap, candlestick, KPI tiles…) plus 3 ApexCharts wrappers |
+| **Sections** | 41 | Heroes, features, pricing, testimonials, CTAs, stats dashboards, careers, FAQs, contact, logo walls, blog, changelog, footers |
+| **Buttons** | 22 | Glass, glow, neumorphic, 3D push, magnetic, cyberpunk, and animated |
+| **Cards** | 22 | Ecommerce, profile, pricing, weather, tilt, portfolio, kanban |
+| **Layout** | 22 | Bento grids, masonry, split screens, sticky sidebars, card grids, full-bleed sections |
+| **Forms** | 24 | Floating inputs, OTP, currency, tags, custom select, color picker, rating stars |
+| **Navigation** | 23 | Glass navbars, mega menus, breadcrumbs, vertical tabs, command palettes |
+| **Overlays** | 23 | Modals, drawers, lightboxes, popovers, bottom sheets, age verifications |
+| **Feedback** | 22 | Alerts, modal dialogs, toasts, spinners, progress bars, confetti |
+| **Data Display** | 23 | Tables, vertical/horizontal timelines, stats grids, sparklines, tree views |
+| **Typography** | 24 | Gradient headings, glitch text, typewriter, 3D text layers, drop caps |
+
+### SVG charts — zero dependencies
+
+```astro
+---
+import 'astro-component-kit/global.css';
+import { LineChart, PieChart, KpiStatTile } from 'astro-component-kit/charts';
+---
+
+<KpiStatTile label="Revenue" value="$48.2k" change={24} period="vs last month" />
+<LineChart
+  title="Monthly active users"
+  categories={['Jan', 'Feb', 'Mar', 'Apr']}
+  series={[{ name: 'Web', data: [120, 180, 160, 240] }]}
+/>
+<PieChart />
+```
+
+Every chart ships with a legend, keyboard-focusable marks with tooltips and a "View data" table fallback for screen readers. Colors come from the `--chart-1…8` tokens in `global.css`.
 
 ---
 
 ## 📖 Usage Examples
 
-### Building a Landing Page
+### Building a Complete Landing Page in Minutes
 
 ```astro
 ---
-import { GlassNavbar } from 'astro-component-kit/navigation';
-import { FeatureHero, SplitScreenLayout, BentoGrid3 } from 'astro-component-kit/layout';
-import { GlassButton, GlowButton, ShimmerButton } from 'astro-component-kit/buttons';
-import { GlassCard, PricingCard, ProfileCard } from 'astro-component-kit/cards';
-import { GlassAlert } from 'astro-component-kit/feedback';
-import { GradientHeading } from 'astro-component-kit/typography';
-import { FadeInWrapper } from 'astro-component-kit/utilities';
 import 'astro-component-kit/global.css';
+import { GlassNavbar } from 'astro-component-kit/navigation';
+import { 
+  HeroGradient, 
+  FeatureBentoGrid, 
+  PricingComparisonMatrix, 
+  TestimonialWallGlass, 
+  FaqAccordionSection, 
+  CtaGlowBanner 
+} from 'astro-component-kit/sections';
+import { MinimalFooterGrid } from 'astro-component-kit/layout';
 ---
 
-<FadeInWrapper>
-  <GlassNavbar brand="MyProject" brandHref="/">
-    <div slot="links">
-      <a href="#">Features</a>
-      <a href="#">Pricing</a>
-    </div>
-    <div slot="actions">
-      <GlassButton size="sm">Get Started</GlassButton>
-    </div>
-  </GlassNavbar>
-
-  <FeatureHero>
-    <h1 slot="title">Build Beautiful Interfaces</h1>
-    <p slot="subtitle">Accessible, premium components for Astro.</p>
-    <GlowButton slot="cta">Explore Components</GlowButton>
-  </FeatureHero>
-
-  <BentoGrid3>
-    <div slot="1">
-      <GlassCard title="Feature A" padding="lg">
-        <p>Content for the first feature block.</p>
-      </GlassCard>
-    </div>
-    <div slot="2">
-      <GlassCard title="Feature B" padding="lg">
-        <p>Second feature description.</p>
-      </GlassCard>
-    </div>
-    <div slot="3">
-      <GlassCard title="Feature C" padding="lg">
-        <p>Third feature details.</p>
-      </GlassCard>
-    </div>
-    <div slot="4">
-      <GlassCard title="Stats" padding="lg">
-        <p>200+ components available.</p>
-      </GlassCard>
-    </div>
-  </BentoGrid3>
-</FadeInWrapper>
+<!-- 1. Navigation -->
+<GlassNavbar brand="AstroApp" brandHref="/" />
+
+<!-- 2. Hero Header -->
+<HeroGradient 
+  badge="New Release v0.3.0"
+  title="Build Production Websites at Lightning Speed"
+  subtitle="Zero client JavaScript runtime, accessible UI, and modern dark glassmorphism."
+/>
+
+<!-- 3. Feature Showcase -->
+<FeatureBentoGrid />
+
+<!-- 4. Pricing Matrix with Interactive Billing Toggle -->
+<PricingComparisonMatrix />
+
+<!-- 5. Social Proof & Testimonials -->
+<TestimonialWallGlass />
+
+<!-- 6. FAQ Accordion with Category Filters -->
+<FaqAccordionSection />
+
+<!-- 7. High-Converting CTA Banner -->
+<CtaGlowBanner />
+
+<!-- 8. Footer -->
+<MinimalFooterGrid />
 ```
 
-### Building a Dashboard
+### Building a Dashboard Layout
 
 ```astro
 ---
-import { GlassNavbar } from 'astro-component-kit/navigation';
-import { SidebarLayoutWrapper, StatsGridDashboard, GlassTable } from 'astro-component-kit/layout';
-import { GlassCard } from 'astro-component-kit/cards';
-import { Badge, GlassProgress } from 'astro-component-kit/feedback';
 import 'astro-component-kit/global.css';
+import { GlassNavbar } from 'astro-component-kit/navigation';
+import { SidebarLayoutWrapper, GlassCardGrid } from 'astro-component-kit/layout';
+import { GlassCard, StatCard } from 'astro-component-kit/cards';
+import { AreaChart, DonutChart } from 'astro-component-kit/charts';
+import { GlassTable } from 'astro-component-kit/data';
+import { Badge } from 'astro-component-kit/feedback';
 ---
 
 <SidebarLayoutWrapper>
@@ -183,73 +215,30 @@ import 'astro-component-kit/global.css';
   <div slot="main">
     <GlassNavbar brand="Dashboard" />
 
-    <StatsGridDashboard>
-      <GlassCard title="Users" padding="md">
-        <p class="stat-value">12,458</p>
-        <Badge variant="success">+12%</Badge>
+    <GlassCardGrid columns={3}>
+      <StatCard label="Total Revenue" value="$84,290" icon="📈" />
+      <StatCard label="Active Users" value="14,210" icon="👥" />
+      <StatCard label="Conversion Rate" value="4.8%" icon="⚡" />
+    </GlassCardGrid>
+
+    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin-top: 1.5rem;">
+      <GlassCard title="Traffic Overview">
+        <AreaChart />
       </GlassCard>
-      <GlassCard title="Revenue" padding="md">
-        <p class="stat-value">$48,290</p>
-        <Badge variant="info">This month</Badge>
+      <GlassCard title="Traffic Distribution">
+        <DonutChart />
       </GlassCard>
-    </StatsGridDashboard>
+    </div>
 
-    <GlassCard title="Recent Activity" padding="md">
-      <GlassProgress value={75} />
-    </GlassCard>
+    <div style="margin-top: 1.5rem;">
+      <GlassCard title="Recent Transactions">
+        <GlassTable />
+      </GlassCard>
+    </div>
   </div>
 </SidebarLayoutWrapper>
 ```
 
-### Building a Form Page
-
-```astro
----
-import { AnimatedInput, OTPInput, GlassSlider, NeumorphicSwitch } from 'astro-component-kit/forms';
-import { GlassButton } from 'astro-component-kit/buttons';
-import { GlassAlert } from 'astro-component-kit/feedback';
-import { GlassCard } from 'astro-component-kit/cards';
-import 'astro-component-kit/global.css';
----
-
-<form>
-  <GlassCard title="Account Settings" padding="lg">
-    <AnimatedInput id="email" name="email" label="Email" type="email" />
-    <AnimatedInput id="name" name="name" label="Full Name" />
-
-    <NeumorphicSwitch id="notifications" label="Enable notifications" />
-
-    <GlassSlider id="volume" min="0" max="100" value="50" label="Volume" />
-
-    <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
-      <GlassButton variant="primary" type="submit">Save Changes</GlassButton>
-      <GlassButton variant="ghost">Cancel</GlassButton>
-    </div>
-  </GlassCard>
-</form>
-```
-
-### Using Overlays and Feedback
-
-```astro
----
-import { OverlayModal } from 'astro-component-kit/overlays';
-import { GlassAlert, ToastNotif, Badge } from 'astro-component-kit/feedback';
-import { GlassButton } from 'astro-component-kit/buttons';
-import 'astro-component-kit/global.css';
----
-
-<GlassAlert type="success" title="Success!">
-  Your changes have been saved.
-</GlassAlert>
-
-<GlassAlert type="warning" title="Warning">
-  Please review your settings before continuing.
-</GlassAlert>
-
-<ToastNotif />
-```
-
 ---
 
 ## 🗂️ Project Structure
@@ -258,21 +247,22 @@ import 'astro-component-kit/global.css';
 astro-component-kit/
 ├── src/
 │   ├── components/
-│   │   ├── lib/                 ← 200+ component source files
+│   │   ├── lib/                 ← 290+ component source files
+│   │   │   ├── sections/        ← 14 full-page landing sections
 │   │   │   ├── buttons/         ← 19 button components
 │   │   │   ├── cards/           ← 19 card components
-│   │   │   ├── data/            ← 20 data display components
-│   │   │   ├── feedback/        ← 20 feedback components
-│   │   │   ├── forms/           ← 20 form components
-│   │   │   ├── layout/          ← 20 layout components
-│   │   │   ├── navigation/      ← 20 navigation components
-│   │   │   ├── overlays/        ← 20 overlay components
-│   │   │   ├── typography/      ← 20 typography components
-│   │   │   └── utilities/       ← 20 utility components
+│   │   │   ├── layout/          ← 19 layout & grid components
+│   │   │   ├── forms/           ← 18 form controls & inputs
+│   │   │   ├── navigation/      ← 17 navbar & menu components
+│   │   │   ├── overlays/        ← 20 overlay & modal components
+│   │   │   ├── feedback/        ← 17 alert & feedback components
+│   │   │   ├── data/            ← 19 data visualization & tables
+│   │   │   ├── typography/      ← 19 typography components
+│   │   │   └── charts/          ← 3 interactive data charts
 │   │   └── index.ts             ← Main barrel export
 │   └── types.d.ts               ← TypeScript declarations
 ├── src/styles/
-│   └── global.css               ← Design tokens & global styles
+│   └── global.css               ← Design tokens & global CSS
 └── package.json
 ```
 
@@ -292,12 +282,12 @@ import 'astro-component-kit/global.css';
 
 | Token | Values |
 |-------|--------|
-| **Colors** | Dark palette with gold primary (`#b8860b`), accent highlights |
-| **Spacing** | `--sp-1` (4px) to `--sp-16` (64px) |
+| **Colors** | Dark palette with amber/gold primary (`#eab308`), cyan, emerald, purple accents |
+| **Spacing** | `--sp-1` (4px) to `--sp-20` (80px) |
 | **Typography** | `--font-sans` (Inter), `--font-mono` (JetBrains Mono) |
-| **Radii** | `--r-sm` (8px), `--r-md` (12px), `--r-lg` (20px), `--r-xl` (28px) |
-| **Shadows** | Predefined elevation system for cards and overlays |
-| **Transitions** | Smooth animation timings for all interactions |
+| **Radii** | `--r-sm` (8px), `--r-md` (12px), `--r-lg` (20px), `--r-xl` (28px), `--r-full` (9999px) |
+| **Shadows** | Predefined elevation system for cards, buttons, and overlays |
+| **Transitions** | Smooth cubic-bezier animation timings for all interactions |
 
 ---
 
@@ -305,12 +295,12 @@ import 'astro-component-kit/global.css';
 
 Every component is built with accessibility as a first-class concern:
 
-- ✅ Semantic HTML (`<button>`, `<nav>`, `<main>`, `<article>`, etc.)
-- ✅ ARIA attributes and roles where appropriate
-- ✅ Keyboard navigation support (Tab, Enter, Escape, Arrow keys)
+- ✅ Semantic HTML (`<section>`, `<article>`, `<button>`, `<nav>`, `<main>`, `<dialog>`, etc.)
+- ✅ ARIA attributes and roles where appropriate (`role="switch"`, `aria-label`, `aria-checked`)
+- ✅ Full keyboard navigation support (Tab, Enter, Space, Escape, Arrow keys)
 - ✅ Visible focus indicators on all interactive elements
 - ✅ Screen reader utilities (`.sr-only` class in global.css)
-- ✅ Color contrast meeting WCAG AA standards
+- ✅ Color contrast meeting WCAG AA standards (≥ 4.5:1)
 - ✅ Reduced motion media queries for animations
 
 ---
@@ -322,17 +312,10 @@ Every component is built with accessibility as a first-class concern:
 | Command | Description |
 |---------|-------------|
 | `npm run dev` | Start the docs site dev server (`http://localhost:4321`) |
-| `npm run build` | Build the docs site for production (generates `dist/` for Coolify/deployment) |
+| `npm run build` | Build the docs site for production (`dist/` static output) |
 | `npm run preview` | Preview the built docs site locally |
-| `npm run typecheck` | Run Astro & TypeScript type checking |
-| `npm run registry:generate` | Automatically regenerate component registry data |
-
-### Adding a New Component
-
-1. Create your component in `src/components/lib/{category}/ComponentName.astro`
-2. Add metadata to `src/data/registry/{category}.ts`
-3. Add barrel export in `src/components/lib/{category}/index.ts`
-4. Add to main export in `src/components/index.ts`
+| `npm run typecheck` | Run Astro & TypeScript validation across all files |
+| `node scripts/audit-components-playwright.mjs` | Automated headless browser audit across all 197+ pages |
 
 ---
 
@@ -341,7 +324,7 @@ Every component is built with accessibility as a first-class concern:
 Contributions are warmly welcomed!
 
 1. Fork the repository
-2. Create a branch: `git checkout -b feat/my-component`
+2. Create a branch: `git checkout -b feat/my-new-section`
 3. Add your component to `src/components/lib/{category}/`
 4. Update the registry in `src/data/registry/{category}.ts`
 5. Add barrel exports to the category `index.ts`
@@ -358,4 +341,4 @@ MIT © [konstantinwdk](https://github.com/konstantinwdk)
 - **Documentation**: [astrocomponents.dev](https://astrocomponents.dev)
 - **npm Package**: [npmjs.com/package/astro-component-kit](https://www.npmjs.com/package/astro-component-kit)
 - **GitHub**: [github.com/konstantinwdk/astro-components](https://github.com/konstantinwdk/astro-components)
-- **Issues**: [GitHub Issues](https://github.com/konstantinWDK/astro-components/issues)
+- **Issues**: [GitHub Issues](https://github.com/konstantinwdk/astro-components/issues)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-component-kit",
-  "version": "0.3.0",
-  "description": "A premium, open-source accessible UI component library for Astro",
+  "version": "0.4.0",
+  "description": "A free, open-source accessible UI component library for Astro",
   "type": "module",
   "main": "./src/components/index.ts",
   "module": "./src/components/index.ts",