astro-component-kit 0.2.2 → 0.3.1

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 premium, 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,85 @@ Open [http://localhost:4321](http://localhost:4321) to browse components locally
 
 ---
 
-## 📚 Component Library
+## 📚 Component & Section Library
 
-**200+ components** across 10 categories:
+**210+ 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 |
+|----------|:----------:|-------------|
+| **Sections** | 14 | Full landing sections: Heroes, Bento Grids, Pricing Matrices, Testimonials, CTAs, FAQs, Teams, Contact |
+| **Buttons** | 19 | Glass, glow, neumorphic, 3D push, magnetic, cyberpunk, and animated |
+| **Cards** | 19 | Ecommerce, profile, pricing, weather, tilt, portfolio, kanban |
+| **Layout** | 19 | Bento grids, masonry, split screens, sticky sidebars, card grids, full-bleed sections |
+| **Forms** | 18 | Floating inputs, OTP, currency, tags, custom select, color picker, rating stars |
+| **Navigation** | 17 | Glass navbars, mega menus, breadcrumbs, vertical tabs, command palettes |
+| **Overlays** | 20 | Modals, drawers, lightboxes, popovers, bottom sheets, age verifications |
+| **Feedback** | 17 | Alerts, modal dialogs, toasts, spinners, progress bars, confetti |
+| **Data Display** | 19 | Tables, vertical/horizontal timelines, stats grids, sparklines, tree views |
+| **Typography** | 19 | Gradient headings, glitch text, typewriter, 3D text layers, drop caps |
+| **Charts** | 3 | Area, bar, and donut charts with ApexCharts integration |
 
 ---
 
 ## 📖 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 +196,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 +228,22 @@ import 'astro-component-kit/global.css';
 astro-component-kit/
 ├── src/
 │   ├── components/
-│   │   ├── lib/                 ← 200+ component source files
+│   │   ├── lib/                 ← 210+ 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 +263,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 +276,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
 
 ---
@@ -321,18 +292,11 @@ Every component is built with accessibility as a first-class concern:
 
 | Command | Description |
 |---------|-------------|
-| `npm run dev` | Start the docs site dev server |
-| `npm run build` | Build the docs site for production |
+| `npm run dev` | Start the docs site dev server (`http://localhost:4321`) |
+| `npm run build` | Build the docs site for production (`dist/` static output) |
 | `npm run preview` | Preview the built docs site locally |
-| `npm run deploy:ftp` | Deploy docs to astrocomponents.dev via FTP |
-| `npm run typecheck` | Run TypeScript type checking |
-
-### 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 +305,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 +322,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,6 +1,6 @@
 {
   "name": "astro-component-kit",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "A premium, open-source accessible UI component library for Astro",
   "type": "module",
   "main": "./src/components/index.ts",
@@ -17,7 +17,6 @@
     "./navigation": "./src/components/lib/navigation/index.ts",
     "./overlays": "./src/components/lib/overlays/index.ts",
     "./typography": "./src/components/lib/typography/index.ts",
-    "./utilities": "./src/components/lib/utilities/index.ts",
     "./sections": "./src/components/lib/sections/index.ts",
     "./charts": "./src/components/lib/charts/index.ts",
     "./global.css": "./src/styles/global.css"
@@ -34,12 +33,11 @@
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
-    "build:lib": "node scripts/build-lib.mjs",
     "preview": "astro preview",
     "astro": "astro",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build:lib",
-    "deploy:ftp": "node scripts/deploy-ftp.mjs"
+    "typecheck": "astro check",
+    "registry:generate": "node scripts/generate-registry.mjs",
+    "prepublishOnly": "astro check"
   },
   "keywords": [
     "astro",
@@ -81,13 +79,17 @@
   "engines": {
     "node": ">=22.12.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@astrojs/sitemap": "^3.7.2"
+  },
   "devDependencies": {
+    "@astrojs/check": "^0.9.10",
     "@types/three": "^0.184.0",
     "apexcharts": "^3.45.1",
     "astro": ">=5.0.0",
-    "basic-ftp": "^5.3.0",
     "fs-extra": "^11.3.4",
-    "three": "^0.184.0"
+    "playwright": "^1.62.1",
+    "three": "^0.184.0",
+    "typescript": "^5.9.3"
   }
 }

package/src/components/index.ts

@@ -5,21 +5,20 @@
 //   import { GlowButton, GlassCard, GlassNavbar } from '@/components';
 // ============================================================
 
-// Root-level components
-export { default as AnimatedInput } from './lib/AnimatedInput.astro';
-export { default as Badge } from './lib/Badge.astro';
-export { default as GlassButton } from './lib/GlassButton.astro';
-export { default as GlassCard } from './lib/GlassCard.astro';
-export { default as GlassNavbar } from './lib/GlassNavbar.astro';
-export { default as GlowButton } from './lib/GlowButton.astro';
+// Root-level unique components
+export { default as AnimatedGalaxy } from './lib/AnimatedGalaxy.astro';
+export { default as Galaxy3D } from './lib/Galaxy3D.astro';
+export { default as LogoWithGalaxy } from './lib/LogoWithGalaxy.astro';
 
 // Buttons
-export { default as ThreeDPushButton } from './lib/buttons/3dPushButton.astro';
+export { default as ThreeDPushButton } from './lib/buttons/ThreeDPushButton.astro';
 export { default as AnimatedIconButton } from './lib/buttons/AnimatedIconButton.astro';
 export { default as BorderDrawButton } from './lib/buttons/BorderDrawButton.astro';
 export { default as CyberpunkButton } from './lib/buttons/CyberpunkButton.astro';
 export { default as DoubleBorderButton } from './lib/buttons/DoubleBorderButton.astro';
 export { default as GhostOutlineButton } from './lib/buttons/GhostOutlineButton.astro';
+export { default as GlassButton } from './lib/buttons/GlassButton.astro';
+export { default as GlowButton } from './lib/buttons/GlowButton.astro';
 export { default as LiquidButton } from './lib/buttons/LiquidButton.astro';
 export { default as LoadingButton } from './lib/buttons/LoadingButton.astro';
 export { default as MagneticButton } from './lib/buttons/MagneticButton.astro';
@@ -36,6 +35,7 @@ export { default as TiltGlowButton } from './lib/buttons/TiltGlowButton.astro';
 export { default as BlogHorizontalCard } from './lib/cards/BlogHorizontalCard.astro';
 export { default as CyberFeatureCard } from './lib/cards/CyberFeatureCard.astro';
 export { default as EcommerceProductCard } from './lib/cards/EcommerceProductCard.astro';
+export { default as GlassCard } from './lib/cards/GlassCard.astro';
 export { default as GlassEventCard } from './lib/cards/GlassEventCard.astro';
 export { default as GlowPortfolioCard } from './lib/cards/GlowPortfolioCard.astro';
 export { default as InteractiveTiltCard } from './lib/cards/InteractiveTiltCard.astro';
@@ -76,6 +76,7 @@ export { default as VerticalTimeline } from './lib/data/VerticalTimeline.astro';
 
 // Feedback
 export { default as AnimatedCheckmark } from './lib/feedback/AnimatedCheckmark.astro';
+export { default as Badge } from './lib/feedback/Badge.astro';
 export { default as CircleProgress } from './lib/feedback/CircleProgress.astro';
 export { default as ConfettiFeedback } from './lib/feedback/ConfettiFeedback.astro';
 export { default as CyberGlitchAlert } from './lib/feedback/CyberGlitchAlert.astro';
@@ -96,6 +97,7 @@ export { default as ToastNotif } from './lib/feedback/ToastNotif.astro';
 export { default as TypingIndicator } from './lib/feedback/TypingIndicator.astro';
 
 // Forms
+export { default as AnimatedInput } from './lib/forms/AnimatedInput.astro';
 export { default as ChipInput } from './lib/forms/ChipInput.astro';
 export { default as ColorPickerInput } from './lib/forms/ColorPickerInput.astro';
 export { default as CurrencyInput } from './lib/forms/CurrencyInput.astro';
@@ -118,8 +120,8 @@ export { default as StepperInput } from './lib/forms/StepperInput.astro';
 
 // Layout
 export { default as BentoGrid3 } from './lib/layout/BentoGrid3.astro';
-export { default as CenteredContainer } from './lib/layout/CenteredContainer.astro';
 export { default as CenterFixedBox } from './lib/layout/CenterFixedBox.astro';
+export { default as CenteredContainer } from './lib/layout/CenteredContainer.astro';
 export { default as ClusterHorizontal } from './lib/layout/ClusterHorizontal.astro';
 export { default as FeatureHero } from './lib/layout/FeatureHero.astro';
 export { default as FooterCenteredMinimal } from './lib/layout/FooterCenteredMinimal.astro';
@@ -146,6 +148,7 @@ export { default as BurgerMorphIcon } from './lib/navigation/BurgerMorphIcon.ast
 export { default as CommandPaletteUI } from './lib/navigation/CommandPaletteUI.astro';
 export { default as DotNavigationSlider } from './lib/navigation/DotNavigationSlider.astro';
 export { default as FloatingTabBar } from './lib/navigation/FloatingTabBar.astro';
+export { default as GlassNavbar } from './lib/navigation/GlassNavbar.astro';
 export { default as LangSwitcherPill } from './lib/navigation/LangSwitcherPill.astro';
 export { default as MegaMenuGlass } from './lib/navigation/MegaMenuGlass.astro';
 export { default as MinimalSidebar } from './lib/navigation/MinimalSidebar.astro';

package/src/components/lib/AnimatedGalaxy.astro

@@ -1,12 +1,14 @@
 ---
 interface Props {
   className?: string;
+  class?: string;
+  style?: string;
 }
 
-const { className = '' } = Astro.props;
+const { className = '', class: classProp = '', style = '' } = Astro.props;
 ---
 
-<svg class="animated-galaxy-svg {className}" viewBox="0 0 800 500" aria-hidden="true" preserveAspectRatio="xMidYMid slice">
+<svg class={`animated-galaxy-svg ${className} ${classProp}`.trim()} style={style} viewBox="0 0 800 500" aria-hidden="true" preserveAspectRatio="xMidYMid slice">
   <defs>
     <!-- Very subtle core glow -->
     <radialGradient id="galaxyCoreGlow" cx="50%" cy="50%" r="50%">