astro-component-kit 0.2.2 → 0.3.1

package/src/components/lib/layout/BentoGrid3.astro

@@ -1,14 +1,84 @@
 ---
+/**
+ * BentoGrid3 — Modern dashboard grid inspired by Bento-box layouts.
+ */
+interface Props {
+  className?: string;
+}
+
+const { className = '' } = Astro.props;
 ---
-<div class="bento">
-  <div class="item wide"><slot name="1" /></div>
-  <div class="item"><slot name="2" /></div>
-  <div class="item"><slot name="3" /></div>
-  <div class="item tall"><slot name="4" /></div>
+
+<div class={`bento ${className}`}>
+  <div class="item wide">
+    <slot name="1">
+      <h4>Main Highlight</h4>
+      <p>Wide key feature metric or banner</p>
+    </slot>
+  </div>
+  <div class="item">
+    <slot name="2">
+      <h4>Stat Widget</h4>
+      <p>Quick KPI</p>
+    </slot>
+  </div>
+  <div class="item">
+    <slot name="3">
+      <h4>Live Feed</h4>
+      <p>Real-time status</p>
+    </slot>
+  </div>
+  <div class="item tall">
+    <slot name="4">
+      <h4>Analytics</h4>
+      <p>Vertical trend tracker</p>
+    </slot>
+  </div>
 </div>
+
 <style>
-  .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; gap: 1rem; }
-  .item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 1rem; }
-  .wide { grid-column: span 2; }
-  .tall { grid-row: span 2; }
+  .bento {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 150px;
+    gap: 1rem;
+    width: 100%;
+  }
+  .item {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .item h4 {
+    color: #fff;
+    font-size: 1.1rem;
+    margin: 0 0 0.25rem 0;
+  }
+  .item p {
+    color: #94a3b8;
+    font-size: 0.85rem;
+    margin: 0;
+  }
+  .wide {
+    grid-column: span 2;
+  }
+  .tall {
+    grid-row: span 2;
+  }
+  @media (max-width: 768px) {
+    .bento {
+      grid-template-columns: 1fr;
+      grid-auto-rows: auto;
+    }
+    .wide {
+      grid-column: span 1;
+    }
+    .tall {
+      grid-row: span 1;
+    }
+  }
 </style>

package/src/components/lib/layout/CenterFixedBox.astro

@@ -1,6 +1,56 @@
 ---
+/**
+ * CenterFixedBox — Absolute center box helper component.
+ */
+interface Props {
+  className?: string;
+}
+
+const { className = '' } = Astro.props;
 ---
-<div class="abs-center"><slot /></div>
+
+<div class={`abs-center-container ${className}`}>
+  <div class="abs-center">
+    <slot>
+      <div class="abs-card">
+        <h4>Centered Content</h4>
+        <p>Centered cleanly in viewport or parent container.</p>
+      </div>
+    </slot>
+  </div>
+</div>
+
 <style>
-  .abs-center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 500; }
+  .abs-center-container {
+    position: relative;
+    width: 100%;
+    min-height: 200px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--r-lg, 12px);
+    overflow: hidden;
+    border: 1px dashed rgba(255, 255, 255, 0.15);
+  }
+  .abs-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: max-content;
+  }
+  .abs-card {
+    padding: 1.25rem 2rem;
+    background: rgba(20, 20, 20, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    text-align: center;
+  }
+  .abs-card h4 {
+    margin: 0 0 0.25rem;
+    color: #fff;
+  }
+  .abs-card p {
+    margin: 0;
+    font-size: 0.85rem;
+    color: #94a3b8;
+  }
 </style>

package/src/components/lib/layout/CenteredContainer.astro

@@ -1,8 +1,47 @@
 ---
-interface Props { maxWidth?: string; }
-const { maxWidth = '1200px' } = Astro.props;
+/**
+ * CenteredContainer — A responsive centered container with configurable max-width.
+ *
+ * Provides consistent horizontal padding and centers content within a max-width constraint.
+ * Uses the global container token for consistency across the library.
+ *
+ * @param {string} maxWidth - Maximum width of the container. Default: '1200px'.
+ * @param {string} padding - Horizontal padding on each side. Default: '1.5rem'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```astro
+ * <CenteredContainer maxWidth="900px">
+ *   <p>Centered content</p>
+ * </CenteredContainer>
+ * ```
+ */
+interface Props {
+  maxWidth?: string;
+  padding?: string;
+  className?: string;
+}
+
+const { maxWidth = '1200px', padding = '1.5rem', className = '' } = Astro.props;
 ---
-<div class="container" style={`--max-width: ${maxWidth}`}><slot /></div>
+
+<div class:list={['centered-container', className]} style={`--container-max: ${maxWidth}; --container-pad: ${padding}`}>
+  <slot />
+</div>
+
 <style>
-  .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
-</style>
+  .centered-container {
+    width: 100%;
+    max-width: var(--container-max);
+    margin: 0 auto;
+    padding-left: var(--container-pad);
+    padding-right: var(--container-pad);
+  }
+
+  @media (max-width: 640px) {
+    .centered-container {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+  }
+</style>

package/src/components/lib/layout/ClusterHorizontal.astro

@@ -1,6 +1,40 @@
 ---
+/**
+ * ClusterHorizontal — Auto-wrapping flex row for buttons, badges, or list items.
+ */
+interface Props {
+  gap?: string;
+  align?: 'flex-start' | 'center' | 'flex-end';
+  className?: string;
+}
+
+const { gap = '0.75rem', align = 'center', className = '' } = Astro.props;
 ---
-<div class="cluster"><slot /></div>
+
+<div class={`cluster ${className}`} style={`--gap: ${gap}; --align: ${align};`}>
+  <slot>
+    <span class="cluster-tag">Tag 1</span>
+    <span class="cluster-tag">Tag 2</span>
+    <span class="cluster-tag">Tag 3</span>
+    <span class="cluster-tag">Tag 4</span>
+    <span class="cluster-tag">Tag 5</span>
+  </slot>
+</div>
+
 <style>
-  .cluster { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
+  .cluster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap, 0.75rem);
+    align-items: var(--align, center);
+    width: 100%;
+  }
+  .cluster-tag {
+    padding: 0.4rem 0.8rem;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 9999px;
+    font-size: 0.8rem;
+    color: #94a3b8;
+  }
 </style>

package/src/components/lib/layout/FeatureHero.astro

@@ -1,81 +1,150 @@
 ---
-import AnimatedGalaxy from '@components/lib/AnimatedGalaxy.astro';
+/**
+ * FeatureHero — A visually striking hero section with animated gradient background and glassmorphism overlay.
+ *
+ * Features a full-screen hero with subtle gradient background, glass-effect card overlay,
+ * and customizable title, subtitle, and action slots. Designed for landing pages and
+ * product showcase sections.
+ *
+ * @param {string} title - Main headline text. Default: 'Experience the Next Dimension of Design'.
+ * @param {string} subtitle - Supporting description text. Default: 'Build stunning interfaces faster than ever with our premium component ecosystem.'.
+ * @param {string} gradientFrom - Start color of the background gradient. Default: 'rgba(99,102,241,0.15)'.
+ * @param {string} gradientTo - End color of the background gradient. Default: 'transparent'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```astro
+ * <FeatureHero
+ *   title="Ship Faster with Premium Components"
+ *   subtitle="200+ production-ready UI components for Astro."
+ * >
+ *   <a href="/docs">Browse Components</a>
+ * </FeatureHero>
+ * ```
+ */
+interface Props {
+  title?: string;
+  subtitle?: string;
+  gradientFrom?: string;
+  gradientTo?: string;
+  className?: string;
+}
+
+const {
+  title = 'Experience the Next Dimension of Design',
+  subtitle = 'Build stunning interfaces faster than ever with our premium component ecosystem.',
+  gradientFrom = 'rgba(99,102,241,0.15)',
+  gradientTo = 'transparent',
+  className = '',
+} = Astro.props;
 ---
-<section class="f-hero">
-  <div class="f-galaxy-bg">
-    <AnimatedGalaxy />
+
+<section class:list={['feature-hero', className]}>
+  <div class="feature-hero__bg" aria-hidden="true">
+    <div class="feature-hero__gradient" style={`--gradient-from: ${gradientFrom}; --gradient-to: ${gradientTo}`}></div>
   </div>
-  <div class="f-overlay"></div>
-  <div class="f-inner">
-    <h1>Experience the <span>Next Dimension</span> of Design</h1>
-    <p>Build stunning interfaces faster than ever with our premium component ecosystem.</p>
-    <div class="f-actions"><slot /></div>
+  <div class="feature-hero__overlay" aria-hidden="true"></div>
+  <div class="feature-hero__inner">
+    <h1 class="feature-hero__title">{title}</h1>
+    <p class="feature-hero__subtitle">{subtitle}</p>
+    <div class="feature-hero__actions">
+      <slot />
+    </div>
   </div>
 </section>
+
 <style>
-  .f-hero { 
+  .feature-hero {
     position: relative;
-    padding: 8rem 2rem; 
-    text-align: center; 
+    padding: var(--sp-16) var(--sp-6);
+    text-align: center;
     overflow: hidden;
-    background: radial-gradient(circle at top, rgba(99,102,241,0.15) 0%, transparent 70%);
+    background: radial-gradient(
+      circle at top,
+      var(--gradient-from, rgba(99,102,241,0.15)) 0%,
+      var(--gradient-to, transparent) 70%
+    );
   }
-  .f-galaxy-bg {
+
+  .feature-hero__bg {
     position: absolute;
     inset: 0;
     z-index: 0;
-    opacity: 0.5;
   }
-  .f-galaxy-bg svg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+
+  .feature-hero__gradient {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(
+      ellipse at 50% 0%,
+      var(--gradient-from, rgba(99,102,241,0.15)) 0%,
+      var(--gradient-to, transparent) 60%
+    );
+    animation: hero-pulse 8s ease-in-out infinite alternate;
+  }
+
+  @keyframes hero-pulse {
+    0% { opacity: 0.5; transform: scale(1); }
+    100% { opacity: 1; transform: scale(1.05); }
   }
-  .f-overlay {
+
+  .feature-hero__overlay {
     position: absolute;
     inset: 0;
     z-index: 1;
-    background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
+    background: radial-gradient(
+      ellipse at center,
+      rgba(0,0,0,0.3) 0%,
+      rgba(0,0,0,0.6) 100%
+    );
     pointer-events: none;
   }
-  .f-inner { 
+
+  .feature-hero__inner {
     position: relative;
     z-index: 2;
-    max-width: 800px; 
-    margin: 0 auto; 
-  }
-  h1 { 
-    font-size: 4rem; 
-    font-weight: 900; 
-    line-height: 1.1; 
-    margin-bottom: 1.5rem; 
-    color: #fff;
-    text-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 0 40px rgba(99,102,241,0.3);
+    max-width: 800px;
+    margin: 0 auto;
   }
-  h1 span { 
-    background: linear-gradient(135deg, #6366f1, #c084fc); 
-    -webkit-background-clip: text; 
-    -webkit-text-fill-color: transparent;
-    filter: drop-shadow(0 0 20px rgba(99,102,241,0.5));
+
+  .feature-hero__title {
+    font-size: clamp(2rem, 5vw, 4rem);
+    font-weight: 900;
+    line-height: 1.1;
+    margin: 0 0 var(--sp-6);
+    color: var(--c-text-1);
+    text-shadow:
+      0 2px 20px rgba(0,0,0,0.5),
+      0 0 40px rgba(99,102,241,0.3);
   }
-  p { 
-    font-size: 1.25rem; 
-    color: #e2e8f0; 
-    line-height: 1.6; 
-    margin-bottom: 2.5rem;
-    text-shadow: 0 1px 10px rgba(0,0,0,0.4);
+
+  .feature-hero__subtitle {
+    font-size: clamp(1rem, 2vw, 1.25rem);
+    color: var(--c-text-2);
+    line-height: 1.6;
+    margin: 0 0 var(--sp-8);
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
   }
-  .f-actions { 
-    display: flex; 
-    justify-content: center; 
-    gap: 1rem; 
+
+  .feature-hero__actions {
+    display: flex;
+    justify-content: center;
+    gap: var(--sp-4);
+    flex-wrap: wrap;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .f-galaxy-bg * {
+    .feature-hero__gradient {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
     }
   }
-</style>
+
+  @media (max-width: 640px) {
+    .feature-hero {
+      padding: var(--sp-12) var(--sp-4);
+    }
+  }
+</style>

package/src/components/lib/layout/FooterCenteredMinimal.astro

@@ -1,14 +1,62 @@
 ---
-import LogoWithGalaxy from '../LogoWithGalaxy.astro';
+/**
+ * FooterCenteredMinimal — A minimal centered footer with copyright text.
+ *
+ * Displays a simple, clean footer with a logo slot and copyright text.
+ * Suitable for landing pages, documentation sites, and minimal layouts.
+ *
+ * @param {string} copyright - Copyright text. Default: '© 2026 Built with Astro Components Kit.'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```astro
+ * <FooterCenteredMinimal copyright="© 2026 MyCompany. All rights reserved." />
+ * ```
+ */
+interface Props {
+  copyright?: string;
+  className?: string;
+}
+
+const { copyright = '© 2026 Built with Astro Components Kit.', className = '' } = Astro.props;
 ---
-<footer class="c-footer">
-  <div class="c-logo">
-    <LogoWithGalaxy size="medium" />
+
+<footer class:list={['footer-centered', className]}>
+  <div class="footer-centered__inner">
+    <div class="footer-centered__logo">
+      <slot name="logo" />
+    </div>
+    <p class="footer-centered__copy">{copyright}</p>
   </div>
-  <div class="c-copy">© 2024 Built with ❤️ and Astro.</div>
 </footer>
+
 <style>
-  .c-footer { text-align: center; padding: 4rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
-  .c-logo { margin-bottom: 0.5rem; display: flex; justify-content: center; }
-  .c-copy { font-size: 0.8rem; color: #64748b; }
-</style>
+  .footer-centered {
+    border-top: 1px solid var(--c-border);
+    padding: var(--sp-10) var(--sp-6);
+    text-align: center;
+  }
+  .footer-centered__inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--sp-4);
+  }
+  .footer-centered__logo {
+    display: flex;
+    justify-content: center;
+  }
+  .footer-centered__copy {
+    font-size: 0.8rem;
+    color: var(--c-text-3);
+    margin: 0;
+  }
+
+  @media (max-width: 640px) {
+    .footer-centered {
+      padding: var(--sp-8) var(--sp-4);
+    }
+  }
+</style>

package/src/components/lib/layout/FullBleedSection.astro

@@ -1,6 +1,48 @@
 ---
+/**
+ * FullBleedSection — Section that breaks out of the container to hit viewport edges.
+ */
+interface Props {
+  className?: string;
+}
+
+const { className = '' } = Astro.props;
 ---
-<section class="full-bleed"><slot /></section>
+
+<section class={`full-bleed ${className}`}>
+  <div class="full-bleed-inner">
+    <slot>
+      <h3>Full Bleed Background Container</h3>
+      <p>Content breaks out to full viewport edges while inner content stays readable.</p>
+    </slot>
+  </div>
+</section>
+
 <style>
-  .full-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: rgba(30, 41, 59, 0.5); padding: 4rem 1.5rem; }
+  .full-bleed {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    background: rgba(30, 41, 59, 0.4);
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 3.5rem 1.5rem;
+    box-sizing: border-box;
+  }
+  .full-bleed-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    text-align: center;
+  }
+  .full-bleed-inner h3 {
+    color: #fff;
+    margin-bottom: 0.5rem;
+  }
+  .full-bleed-inner p {
+    color: #94a3b8;
+    margin: 0;
+  }
 </style>

package/src/components/lib/layout/GalleryGrid4.astro

@@ -1,7 +1,39 @@
 ---
+/**
+ * GalleryGrid4 — 4-Column aspect ratio grid for visual galleries and photos.
+ */
+interface Props {
+  className?: string;
+}
+
+const { className = '' } = Astro.props;
 ---
-<div class="gal-grid"><slot /></div>
+
+<div class={`gal-grid ${className}`}>
+  <slot>
+    <div class="gal-item"><span>Photo 1</span></div>
+    <div class="gal-item"><span>Photo 2</span></div>
+    <div class="gal-item"><span>Photo 3</span></div>
+    <div class="gal-item"><span>Photo 4</span></div>
+  </slot>
+</div>
+
 <style>
-  .gal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
-  .gal-grid :global(> *) { aspect-ratio: 1; border-radius: 12px; background: rgba(255, 255, 255, 0.05); overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
+  .gal-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 16px;
+    width: 100%;
+  }
+  .gal-grid :global(> *), .gal-item {
+    aspect-ratio: 1;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #94a3b8;
+    font-weight: 600;
+  }
 </style>

package/src/components/lib/layout/GlassCardGrid.astro

@@ -1,6 +1,28 @@
 ---
+/**
+ * GlassCardGrid — A responsive grid specifically designed for card layouts with auto-fill columns.
+ * 
+ * @param {string} minWidth - Minimum width of columns (default: '300px').
+ * @param {string} gap - Gap between items (default: '2rem').
+ */
+interface Props {
+  minWidth?: string;
+  gap?: string;
+  className?: string;
+}
+
+const { minWidth = '300px', gap = '2rem', className = '' } = Astro.props;
 ---
-<div class="card-grid"><slot /></div>
+
+<div class={`card-grid ${className}`} style={`--min-width: ${minWidth}; --gap: ${gap};`}>
+  <slot />
+</div>
+
 <style>
-  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--min-width, 300px), 1fr));
+    gap: var(--gap, 2rem);
+    width: 100%;
+  }
 </style>