astro-component-kit 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 konstantinwdk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,262 @@
+# ⬇ Astro Components
+
+> 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)  
+> **📦 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)
+![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
+- 📦 **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
+- 🔓 **Open Source** — MIT license, contributions welcome
+
+---
+
+## 🚀 Quick Start
+
+### Option 1: Install via npm (Recommended)
+
+```bash
+npm install astro-component-kit
+```
+
+Then import components in your Astro files:
+
+```astro
+---
+import { GlassButton, GlassCard } from 'astro-component-kit';
+// Or by category:
+import { GlassButton, GlowButton } from 'astro-component-kit/buttons';
+---
+
+<GlassButton variant="primary">Click me</GlassButton>
+<GlassCard>Content here</GlassCard>
+```
+
+Import the global design tokens (optional):
+
+```astro
+---
+import 'astro-component-kit/global.css';
+---
+```
+
+### Option 2: Copy & Paste from Docs
+
+1. Visit [astro-component-kitomponents.dev](https://astro-component-kitomponents.dev)
+2. Browse the component library
+3. Click **Copy** on the component code
+4. Paste into your `src/components/` directory
+5. Import and use in your Astro pages
+
+### Option 3: Clone & Run Locally
+
+```bash
+# Clone the repo
+git clone https://github.com/konstantinwdk/astro-component-kit.git
+cd astro-component-kit
+
+# Install dependencies
+npm install
+
+# Start the dev server (docs site)
+npm run dev
+```
+
+Open [http://localhost:4321](http://localhost:4321) to browse components locally 🎉
+
+---
+
+## 📚 Component Library
+
+The library includes **200+ components** organized by category:
+
+| 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 |
+
+---
+
+## 🗂️ Project Structure
+
+```
+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
+```
+
+---
+
+## 🛠️ 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 |
+
+### Deploying to astro-component-kitomponents.dev
+
+To deploy your docs site to the live server:
+
+```bash
+npm run deploy:ftp
+```
+
+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/`
+
+The FTP credentials are stored in `.vscode/sftp.json` (not committed to git).
+
+### Publishing to npm
+
+```bash
+# 1. Build the library
+npm run build:lib
+
+# 2. Login to npm (first time only)
+npm login
+
+# 3. Publish
+npm publish --access public
+```
+
+---
+
+## ➕ Adding a New Component
+
+### For Copy-Paste Usage (Docs Site)
+
+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>`,
+}
+```
+
+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`
+
+The docs site will automatically pick up the new component.
+
+---
+
+## 🎨 Design Tokens
+
+All components use the design token system in `src/styles/global.css`. Import it in your project:
+
+```astro
+---
+import '../styles/global.css';
+---
+```
+
+Tokens include:
+- Color palette (dark mode optimized)
+- Spacing scale
+- Typography sizes
+- Border radius values
+- Shadow definitions
+- Transition timings
+
+---
+
+## ♿ Accessibility
+
+All components are built with accessibility in mind:
+
+- ✅ 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
+
+---
+
+## 🤝 Contributing
+
+Contributions are warmly welcomed!
+
+1. Fork the repository
+2. Create a branch: `git checkout -b feat/my-component`
+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`
+6. Submit a Pull Request
+
+Please follow the existing code style and include a clear description.
+
+---
+
+## 📄 License
+
+MIT © [konstantinwdk](https://github.com/konstantinwdk)
+
+## 🌐 Links
+
+- **Documentation**: [astro-component-kitomponents.dev](https://astro-component-kitomponents.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)

package/dist/AnimatedInput.astro

@@ -0,0 +1,82 @@
+---
+// src/components/lib/AnimatedInput.astro
+interface Props {
+  label: string;
+  id: string;
+  type?: string;
+  placeholder?: string;
+  required?: boolean;
+  name?: string;
+}
+
+const {
+  label,
+  id,
+  type = 'text',
+  placeholder = ' ',
+  required = false,
+  name,
+} = Astro.props;
+---
+
+<div class="anim-input-wrap">
+  <input
+    {id}
+    {name}
+    {type}
+    {placeholder}
+    {required}
+    class="anim-input"
+    autocomplete="off"
+  />
+  <label for={id} class="anim-input-label">{label}</label>
+</div>
+
+<style>
+  .anim-input-wrap {
+    position: relative;
+    width: 100%;
+  }
+
+  .anim-input {
+    width: 100%;
+    padding: 1.1rem 1rem 0.5rem;
+    font-family: inherit;
+    font-size: 0.95rem;
+    color: #e2e8f0;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    outline: none;
+    box-sizing: border-box;
+    transition: border-color 0.25s ease, background 0.25s ease;
+  }
+
+  .anim-input::placeholder { color: transparent; }
+
+  .anim-input:focus {
+    background: rgba(99, 102, 241, 0.06);
+    border-color: rgba(99, 102, 241, 0.5);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
+  }
+
+  .anim-input-label {
+    position: absolute;
+    top: 0.9rem;
+    left: 1rem;
+    font-size: 0.9rem;
+    color: #64748b;
+    pointer-events: none;
+    transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
+  }
+
+  .anim-input:focus ~ .anim-input-label,
+  .anim-input:not(:placeholder-shown) ~ .anim-input-label {
+    top: 0.28rem;
+    font-size: 0.68rem;
+    color: #818cf8;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+</style>

package/dist/Badge.astro

@@ -0,0 +1,52 @@
+---
+// src/components/lib/Badge.astro
+interface Props {
+  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+  dot?: boolean;
+  pulse?: boolean;
+}
+
+const { variant = 'default', dot = false, pulse = false } = Astro.props;
+---
+
+<span class:list={['badge', `badge--${variant}`]}>
+  {dot && <span class:list={['badge__dot', { 'badge__dot--pulse': pulse }]}></span>}
+  <slot />
+</span>
+
+<style>
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.25rem 0.7rem;
+    border-radius: 100px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .badge--default { background: rgba(100,116,139,0.18); color: #94a3b8; border: 1px solid rgba(100,116,139,0.25); }
+  .badge--success { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.25); }
+  .badge--warning { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
+  .badge--danger  { background: rgba(239,68,68,0.12);  color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
+  .badge--info    { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.25); }
+
+  .badge__dot {
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+    flex-shrink: 0;
+  }
+
+  .badge__dot--pulse {
+    animation: dot-pulse 1.8s ease-in-out infinite;
+  }
+
+  @keyframes dot-pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.4; transform: scale(0.7); }
+  }
+</style>

package/dist/GlassButton.astro

@@ -0,0 +1,87 @@
+---
+// src/components/lib/GlassButton.astro
+interface Props {
+  href?: string;
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const { href, variant = 'primary', size = 'md', disabled = false } = Astro.props;
+const Tag = href ? 'a' : 'button';
+---
+
+<Tag
+  href={href}
+  disabled={disabled}
+  class={`glass-btn glass-btn--${variant} glass-btn--${size}`}
+>
+  <slot />
+</Tag>
+
+<style>
+  .glass-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    font-family: inherit;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    border-radius: 12px;
+    cursor: pointer;
+    text-decoration: none;
+    border: 1px solid transparent;
+    position: relative;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+    overflow: hidden;
+  }
+
+  .glass-btn::before {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+
+  .glass-btn:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35);
+  }
+
+  .glass-btn:active:not(:disabled) { transform: translateY(0); }
+  .glass-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+  .glass-btn--primary {
+    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    color: #fff;
+    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
+  }
+
+  .glass-btn--secondary {
+    background: rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(12px);
+    color: #e2e8f0;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+
+  .glass-btn--ghost {
+    background: transparent;
+    color: #a5b4fc;
+    border-color: rgba(99, 102, 241, 0.4);
+  }
+
+  .glass-btn--ghost:hover:not(:disabled) {
+    background: rgba(99, 102, 241, 0.12);
+    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
+  }
+
+  .glass-btn--sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
+  .glass-btn--md { padding: 0.65rem 1.4rem; font-size: 0.9rem; }
+  .glass-btn--lg { padding: 0.85rem 1.9rem; font-size: 1rem; }
+</style>

package/dist/GlassCard.astro

@@ -0,0 +1,72 @@
+---
+// src/components/lib/GlassCard.astro
+interface Props {
+  title?: string;
+  subtitle?: string;
+  hoverable?: boolean;
+  padding?: 'sm' | 'md' | 'lg';
+}
+
+const { title, subtitle, hoverable = true, padding = 'md' } = Astro.props;
+---
+
+<div class:list={['glass-card', `glass-card--p${padding}`, { 'glass-card--hoverable': hoverable }]}>
+  {title && (
+    <div class="glass-card__header">
+      <h3 class="glass-card__title">{title}</h3>
+      {subtitle && <p class="glass-card__subtitle">{subtitle}</p>}
+    </div>
+  )}
+  <div class="glass-card__body">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .glass-card {
+    background: rgba(255, 255, 255, 0.04);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.09);
+    border-radius: 20px;
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+  }
+
+  .glass-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  }
+
+  .glass-card--hoverable:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.2);
+    border-color: rgba(99, 102, 241, 0.25);
+  }
+
+  .glass-card__header {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .glass-card__title {
+    margin: 0 0 0.25rem;
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: #f1f5f9;
+  }
+
+  .glass-card__subtitle {
+    margin: 0;
+    font-size: 0.82rem;
+    color: #64748b;
+  }
+
+  .glass-card--psm { padding: 1rem; }
+  .glass-card--pmd { padding: 1.5rem; }
+  .glass-card--plg { padding: 2rem; }
+</style>

package/dist/GlassNavbar.astro

@@ -0,0 +1,65 @@
+---
+// src/components/lib/GlassNavbar.astro
+interface Props {
+  brand?: string;
+  brandHref?: string;
+}
+const { brand = 'Astro Components', brandHref = '/' } = Astro.props;
+---
+
+<header class="glass-nav">
+  <div class="glass-nav__inner">
+    <a href={brandHref} class="glass-nav__brand">{brand}</a>
+    <nav class="glass-nav__links">
+      <slot name="links" />
+    </nav>
+    <div class="glass-nav__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</header>
+
+<style>
+  .glass-nav {
+    background: rgba(10, 10, 20, 0.7);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.07);
+    border-radius: 14px;
+  }
+
+  .glass-nav__inner {
+    padding: 0 1.5rem;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .glass-nav__brand {
+    font-size: 1rem;
+    font-weight: 800;
+    color: #f1f5f9;
+    text-decoration: none;
+    background: linear-gradient(135deg, #818cf8, #c084fc);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    flex-shrink: 0;
+  }
+
+  .glass-nav__links {
+    display: flex; align-items: center; gap: 0.25rem; flex: 1;
+  }
+
+  .glass-nav__links :global(a) {
+    padding: 0.4rem 0.8rem; font-size: 0.875rem; font-weight: 500;
+    color: #94a3b8; text-decoration: none; border-radius: 8px;
+    transition: color 0.2s ease, background 0.2s ease;
+  }
+
+  .glass-nav__links :global(a:hover) { color: #e2e8f0; background: rgba(255,255,255,0.06); }
+
+  .glass-nav__actions {
+    display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
+  }
+</style>

package/dist/GlowButton.astro

@@ -0,0 +1,60 @@
+---
+// src/components/lib/GlowButton.astro
+interface Props {
+  color?: string;
+  href?: string;
+}
+const { color = '#6366f1', href } = Astro.props;
+const Tag = href ? 'a' : 'button';
+---
+
+<Tag href={href} class="glow-btn" style={`--glow-color: ${color}`}>
+  <slot />
+</Tag>
+
+<style>
+  .glow-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.7rem 1.6rem;
+    font-family: inherit;
+    font-size: 0.9rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: #fff;
+    background: var(--glow-color);
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    text-decoration: none;
+    position: relative;
+    transition: transform 0.2s ease;
+    box-shadow: 0 0 20px color-mix(in srgb, var(--glow-color) 60%, transparent);
+  }
+
+  .glow-btn::after {
+    content: '';
+    position: absolute;
+    inset: -3px;
+    border-radius: 13px;
+    background: var(--glow-color);
+    opacity: 0;
+    filter: blur(16px);
+    transition: opacity 0.3s ease;
+    z-index: -1;
+  }
+
+  .glow-btn:hover { transform: translateY(-2px); }
+
+  .glow-btn:hover::after {
+    opacity: 0.5;
+    animation: pulse-glow 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse-glow {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 0.8; }
+  }
+</style>