astro-component-kit 0.0.1 → 0.1.0

package/README.md

@@ -1,7 +1,7 @@
-# ⬇ Astro Components
+# ⬇ Astro Component Kit
 
-> A premium, open-source accessible UI component library built for [Astro](https://astro.build).  
-> **🌐 Browse & copy components** at [astro-component-kitomponents.dev](https://astro-component-kitomponents.dev)  
+> A premium, open-source accessible UI component library built for [Astro](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)
@@ -9,11 +9,13 @@
 ![npm](https://img.shields.io/npm/v/astro-component-kit.svg)
 ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-34d399.svg)
 
+---
+
 ## ✨ Features
 
 - 🎨 **Premium design** — glassmorphism, gradients and micro-animations
 - ♿ **Accessible** — semantic HTML and ARIA attributes included
-- 📋 **Copy & paste** — browse [astro-component-kitomponents.dev](https://astro-component-kitomponents.dev) and copy components directly
+- 📋 **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
@@ -23,26 +25,36 @@
 
 ## 🚀 Quick Start
 
-### Option 1: Install via npm (Recommended)
+### Option 1: Install via npm
 
 ```bash
 npm install astro-component-kit
 ```
 
-Then import components in your Astro files:
+Then import and use components in your Astro pages:
 
 ```astro
 ---
-import { GlassButton, GlassCard } from 'astro-component-kit';
-// Or by category:
+// 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';
+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';
 ---
 
 <GlassButton variant="primary">Click me</GlassButton>
-<GlassCard>Content here</GlassCard>
+<GlassCard title="Welcome">Content here</GlassCard>
 ```
 
-Import the global design tokens (optional):
+**Import global design tokens** (optional but recommended):
 
 ```astro
 ---
@@ -52,7 +64,7 @@ import 'astro-component-kit/global.css';
 
 ### Option 2: Copy & Paste from Docs
 
-1. Visit [astro-component-kitomponents.dev](https://astro-component-kitomponents.dev)
+1. Visit [astrocomponents.dev](https://astrocomponents.dev)
 2. Browse the component library
 3. Click **Copy** on the component code
 4. Paste into your `src/components/` directory
@@ -61,14 +73,9 @@ import 'astro-component-kit/global.css';
 ### Option 3: Clone & Run Locally
 
 ```bash
-# Clone the repo
-git clone https://github.com/konstantinwdk/astro-component-kit.git
+git clone https://github.com/konstantinwdk/astro-components.git
 cd astro-component-kit
-
-# Install dependencies
 npm install
-
-# Start the dev server (docs site)
 npm run dev
 ```
 
@@ -78,7 +85,7 @@ Open [http://localhost:4321](http://localhost:4321) to browse components locally
 
 ## 📚 Component Library
 
-The library includes **200+ components** organized by category:
+**200+ components** across 10 categories:
 
 | Category | Components | Description |
 |----------|------------|-------------|
@@ -95,143 +102,237 @@ The library includes **200+ components** organized by category:
 
 ---
 
-## 🗂️ Project Structure
+## 📖 Usage Examples
 
-```
-astro-component-kit/
-├── src/
-│   ├── components/
-│   │   ├── lib/                 ← Component source files
-│   │   │   ├── buttons/         ← Button components
-│   │   │   ├── cards/           ← Card components
-│   │   │   ├── ...              ← More categories
-│   │   │   └── index.ts         ← Main barrel export
-│   │   └── types.d.ts           ← TypeScript declarations
-│   ├── data/
-│   │   └── registry/            ← Component metadata for docs site
-│   ├── pages/                   ← Astro pages (docs site)
-│   ├── layouts/                 └── Layout components
-│   └── styles/
-│       └── global.css           ← Design tokens & global styles
-├── dist/                        ← Build output (npm package + site)
-├── scripts/
-│   ├── build-lib.mjs            ← Build script for npm package
-│   └── deploy-ftp.mjs           ← Deploy to astro-component-kitomponents.dev
-└── package.json
-```
+### Building a Landing Page
 
+```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';
 ---
 
-## 🛠️ Development
-
-### Available Scripts
-
-| Command | Description |
-|---------|-------------|
-| `npm run dev` | Start the docs site dev server |
-| `npm run build` | Build the docs site for production |
-| `npm run preview` | Preview the built docs site locally |
-| `npm run build:lib` | Build the component library for npm |
-| `npm run deploy:ftp` | Build & deploy docs to astro-component-kitomponents.dev via FTP |
-| `npm run typecheck` | Run TypeScript type checking |
+<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>
+```
 
-### Deploying to astro-component-kitomponents.dev
+### Building a Dashboard
 
-To deploy your docs site to the live server:
+```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';
+---
 
-```bash
-npm run deploy:ftp
+<SidebarLayoutWrapper>
+  <div slot="sidebar">
+    <nav>
+      <a href="/dashboard">Overview</a>
+      <a href="/analytics">Analytics</a>
+      <a href="/settings">Settings</a>
+    </nav>
+  </div>
+
+  <div slot="main">
+    <GlassNavbar brand="Dashboard" />
+
+    <StatsGridDashboard>
+      <GlassCard title="Users" padding="md">
+        <p class="stat-value">12,458</p>
+        <Badge variant="success">+12%</Badge>
+      </GlassCard>
+      <GlassCard title="Revenue" padding="md">
+        <p class="stat-value">$48,290</p>
+        <Badge variant="info">This month</Badge>
+      </GlassCard>
+    </StatsGridDashboard>
+
+    <GlassCard title="Recent Activity" padding="md">
+      <GlassProgress value={75} />
+    </GlassCard>
+  </div>
+</SidebarLayoutWrapper>
 ```
 
-This script will:
-1. Build the Astro site (`npm run build`)
-2. Connect to the FTP server (config in `.vscode/sftp.json`)
-3. **Clear the remote directory** (deletes old deployment)
-4. **Upload the new build** to `/httpdocs/`
+### Building a Form Page
 
-The FTP credentials are stored in `.vscode/sftp.json` (not committed to git).
+```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';
+---
 
-### Publishing to npm
+<form>
+  <GlassCard title="Account Settings" padding="lg">
+    <AnimatedInput id="email" name="email" label="Email" type="email" />
+    <AnimatedInput id="name" name="name" label="Full Name" />
 
-```bash
-# 1. Build the library
-npm run build:lib
+    <NeumorphicSwitch id="notifications" label="Enable notifications" />
 
-# 2. Login to npm (first time only)
-npm login
+    <GlassSlider id="volume" min="0" max="100" value="50" label="Volume" />
 
-# 3. Publish
-npm publish --access public
+    <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';
 ---
 
-## ➕ Adding a New Component
+<GlassAlert type="success" title="Success!">
+  Your changes have been saved.
+</GlassAlert>
 
-### For Copy-Paste Usage (Docs Site)
+<GlassAlert type="warning" title="Warning">
+  Please review your settings before continuing.
+</GlassAlert>
 
-1. Create your component in `src/components/lib/{category}/ComponentName.astro`
-2. Add metadata to `src/data/registry/{category}.ts`:
-
-```ts
-{
-  slug: 'my-component',
-  name: 'My Component',
-  description: 'What it does.',
-  category: 'buttons',
-  tags: ['button', 'animated'],
-  featured: false,
-  code: `---
-// MyComponent.astro
----
-<div class="my-component"><slot /></div>
-<style>.my-component { /* ... */ }</style>`,
-  usage: `import MyComponent from '../components/MyComponent.astro';
-<MyComponent>Hello!</MyComponent>`,
-}
+<ToastNotif />
 ```
 
-3. Add to the barrel export in `src/components/lib/{category}/index.ts`:
-   ```ts
-   export { default as MyComponent } from './MyComponent.astro';
-   ```
+---
 
-4. Add to the main export in `src/components/index.ts`
+## 🗂️ Project Structure
 
-The docs site will automatically pick up the new component.
+```
+astro-component-kit/
+├── src/
+│   ├── components/
+│   │   ├── lib/                 ← 200+ component source files
+│   │   │   ├── 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
+│   │   └── index.ts             ← Main barrel export
+│   └── types.d.ts               ← TypeScript declarations
+├── src/styles/
+│   └── global.css               ← Design tokens & global styles
+└── package.json
+```
 
 ---
 
 ## 🎨 Design Tokens
 
-All components use the design token system in `src/styles/global.css`. Import it in your project:
+All components share a unified design token system. Import the global CSS:
 
 ```astro
 ---
-import '../styles/global.css';
+import 'astro-component-kit/global.css';
 ---
 ```
 
-Tokens include:
-- Color palette (dark mode optimized)
-- Spacing scale
-- Typography sizes
-- Border radius values
-- Shadow definitions
-- Transition timings
+**Available tokens:**
+
+| Token | Values |
+|-------|--------|
+| **Colors** | Dark palette with gold primary (`#b8860b`), accent highlights |
+| **Spacing** | `--sp-1` (4px) to `--sp-16` (64px) |
+| **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 |
 
 ---
 
 ## ♿ Accessibility
 
-All components are built with accessibility in mind:
+Every component is built with accessibility as a first-class concern:
 
-- ✅ Semantic HTML elements (`<button>`, `<nav>`, `<main>`, etc.)
-- ✅ ARIA attributes where appropriate
-- ✅ Keyboard navigation support
-- ✅ Focus indicators visible by default
-- ✅ Screen reader utilities (`.sr-only` class)
-- ✅ Color contrast WCAG AA compliant
+- ✅ Semantic HTML (`<button>`, `<nav>`, `<main>`, `<article>`, etc.)
+- ✅ ARIA attributes and roles where appropriate
+- ✅ Keyboard navigation support (Tab, Enter, 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
+- ✅ Reduced motion media queries for animations
+
+---
+
+## 🛠️ Development
+
+### Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start the docs site dev server |
+| `npm run build` | Build the docs site for production |
+| `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`
 
 ---
 
@@ -246,8 +347,6 @@ Contributions are warmly welcomed!
 5. Add barrel exports to the category `index.ts`
 6. Submit a Pull Request
 
-Please follow the existing code style and include a clear description.
-
 ---
 
 ## 📄 License
@@ -256,7 +355,7 @@ MIT © [konstantinwdk](https://github.com/konstantinwdk)
 
 ## 🌐 Links
 
-- **Documentation**: [astro-component-kitomponents.dev](https://astro-component-kitomponents.dev)
+- **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-component-kit](https://github.com/konstantinwdk/astro-component-kit)
-- **Issues**: [GitHub Issues](https://github.com/konstantinwdk/astro-component-kit/issues)
+- **GitHub**: [github.com/konstantinwdk/astro-components](https://github.com/konstantinwdk/astro-components)
+- **Issues**: [GitHub Issues](https://github.com/konstantinWDK/astro-components/issues)

package/package.json

@@ -1,61 +1,32 @@
 {
   "name": "astro-component-kit",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A premium, open-source accessible UI component library for Astro",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/types/index.d.ts",
+  "main": "./src/components/index.ts",
+  "module": "./src/components/index.ts",
+  "types": "./src/components/types.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.mjs"
-    },
-    "./buttons": {
-      "types": "./dist/types/buttons/index.d.ts",
-      "import": "./dist/buttons/index.mjs"
-    },
-    "./cards": {
-      "types": "./dist/types/cards/index.d.ts",
-      "import": "./dist/cards/index.mjs"
-    },
-    "./data": {
-      "types": "./dist/types/data/index.d.ts",
-      "import": "./dist/data/index.mjs"
-    },
-    "./feedback": {
-      "types": "./dist/types/feedback/index.d.ts",
-      "import": "./dist/feedback/index.mjs"
-    },
-    "./forms": {
-      "types": "./dist/types/forms/index.d.ts",
-      "import": "./dist/forms/index.mjs"
-    },
-    "./layout": {
-      "types": "./dist/types/layout/index.d.ts",
-      "import": "./dist/layout/index.mjs"
-    },
-    "./navigation": {
-      "types": "./dist/types/navigation/index.d.ts",
-      "import": "./dist/navigation/index.mjs"
-    },
-    "./overlays": {
-      "types": "./dist/types/overlays/index.d.ts",
-      "import": "./dist/overlays/index.mjs"
-    },
-    "./typography": {
-      "types": "./dist/types/typography/index.d.ts",
-      "import": "./dist/typography/index.mjs"
-    },
-    "./utilities": {
-      "types": "./dist/types/utilities/index.d.ts",
-      "import": "./dist/utilities/index.mjs"
-    },
-    "./global.css": "./dist/styles/global.css"
+    ".": "./src/components/index.ts",
+    "./buttons": "./src/components/lib/buttons/index.ts",
+    "./cards": "./src/components/lib/cards/index.ts",
+    "./data": "./src/components/lib/data/index.ts",
+    "./feedback": "./src/components/lib/feedback/index.ts",
+    "./forms": "./src/components/lib/forms/index.ts",
+    "./layout": "./src/components/lib/layout/index.ts",
+    "./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",
+    "./global.css": "./src/styles/global.css"
   },
   "files": [
-    "dist/",
-    "src/components/lib/"
+    "src/components/lib/",
+    "src/components/index.ts",
+    "src/components/types.d.ts",
+    "src/styles/global.css",
+    "LICENSE",
+    "README.md"
   ],
   "sideEffects": false,
   "scripts": {
@@ -99,9 +70,11 @@
     "node": ">=22.12.0"
   },
   "dependencies": {
-    "astro": ">=5.0.0"
+    "astro": ">=5.0.0",
+    "three": "^0.184.0"
   },
   "devDependencies": {
+    "@types/three": "^0.184.0",
     "basic-ftp": "^5.3.0",
     "fs-extra": "^11.3.4"
   }