astro-component-kit 0.0.1

package/dist/utilities/index.mjs

@@ -0,0 +1,20 @@
+export { default as AspectRatioBox } from './AspectRatioBox.astro';
+export { default as BackgroundDotPattern } from './BackgroundDotPattern.astro';
+export { default as CircularMask } from './CircularMask.astro';
+export { default as ClickRippleWrapper } from './ClickRippleWrapper.astro';
+export { default as FadeInWrapper } from './FadeInWrapper.astro';
+export { default as FixedRatioImage } from './FixedRatioImage.astro';
+export { default as GlassBlurLayer } from './GlassBlurLayer.astro';
+export { default as GradientBorderMask } from './GradientBorderMask.astro';
+export { default as HoverLift } from './HoverLift.astro';
+export { default as ResponsiveSpacer } from './ResponsiveSpacer.astro';
+export { default as ResponsiveVisToggle } from './ResponsiveVisToggle.astro';
+export { default as ScrollLockParent } from './ScrollLockParent.astro';
+export { default as ScrollMarginTarget } from './ScrollMarginTarget.astro';
+export { default as SlideUpReveal } from './SlideUpReveal.astro';
+export { default as SmoothAnchorLink } from './SmoothAnchorLink.astro';
+export { default as StackLayering } from './StackLayering.astro';
+export { default as StickyObserver } from './StickyObserver.astro';
+export { default as TextTruncate } from './TextTruncate.astro';
+export { default as TruncateSingleLine } from './TruncateSingleLine.astro';
+export { default as VisuallyHidden } from './VisuallyHidden.astro';

package/dist/utilities/index.ts

@@ -0,0 +1,20 @@
+export { default as AspectRatioBox } from './AspectRatioBox.astro';
+export { default as BackgroundDotPattern } from './BackgroundDotPattern.astro';
+export { default as CircularMask } from './CircularMask.astro';
+export { default as ClickRippleWrapper } from './ClickRippleWrapper.astro';
+export { default as FadeInWrapper } from './FadeInWrapper.astro';
+export { default as FixedRatioImage } from './FixedRatioImage.astro';
+export { default as GlassBlurLayer } from './GlassBlurLayer.astro';
+export { default as GradientBorderMask } from './GradientBorderMask.astro';
+export { default as HoverLift } from './HoverLift.astro';
+export { default as ResponsiveSpacer } from './ResponsiveSpacer.astro';
+export { default as ResponsiveVisToggle } from './ResponsiveVisToggle.astro';
+export { default as ScrollLockParent } from './ScrollLockParent.astro';
+export { default as ScrollMarginTarget } from './ScrollMarginTarget.astro';
+export { default as SlideUpReveal } from './SlideUpReveal.astro';
+export { default as SmoothAnchorLink } from './SmoothAnchorLink.astro';
+export { default as StackLayering } from './StackLayering.astro';
+export { default as StickyObserver } from './StickyObserver.astro';
+export { default as TextTruncate } from './TextTruncate.astro';
+export { default as TruncateSingleLine } from './TruncateSingleLine.astro';
+export { default as VisuallyHidden } from './VisuallyHidden.astro';

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "astro-component-kit",
+  "version": "0.0.1",
+  "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",
+  "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"
+  },
+  "files": [
+    "dist/",
+    "src/components/lib/"
+  ],
+  "sideEffects": false,
+  "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"
+  },
+  "keywords": [
+    "astro",
+    "astro-component",
+    "ui",
+    "components",
+    "accessible",
+    "a11y",
+    "glassmorphism",
+    "frontend",
+    "web"
+  ],
+  "author": "konstantinwdk <entiplay@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/konstantinwdk/astro-components"
+  },
+  "bugs": {
+    "url": "https://github.com/konstantinwdk/astro-components/issues"
+  },
+  "homepage": "https://astrocomponents.dev",
+  "peerDependencies": {
+    "astro": ">=5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "dependencies": {
+    "astro": ">=5.0.0"
+  },
+  "devDependencies": {
+    "basic-ftp": "^5.3.0",
+    "fs-extra": "^11.3.4"
+  }
+}

package/src/components/lib/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/src/components/lib/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/src/components/lib/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/src/components/lib/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/src/components/lib/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/src/components/lib/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>