astro-component-kit 0.2.2 → 0.3.0

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

@@ -1,15 +1,76 @@
 ---
-interface Props { title: string; subtitle?: string; }
-const { title, subtitle } = Astro.props;
+/**
+ * GlassSectionHeader — A section header with glassmorphism styling and accent underline.
+ *
+ * Displays a title with an optional subtitle and a decorative accent line.
+ * The accent line uses the primary color from design tokens.
+ * Suitable for introducing new sections on landing pages or documentation.
+ *
+ * @param {string} title - Main heading text. Required.
+ * @param {string} subtitle - Supporting description. Optional.
+ * @param {'left' | 'center'} align - Text alignment. Default: 'left'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```astro
+ * <GlassSectionHeader
+ *   title="Why Astro Components Kit"
+ *   subtitle="Build faster with premium components"
+ *   align="center"
+ * />
+ * ```
+ */
+interface Props {
+  title: string;
+  subtitle?: string;
+  align?: 'left' | 'center';
+  className?: string;
+}
+
+const { title, subtitle = '', align = 'left', className = '' } = Astro.props;
 ---
-<div class="s-header">
-  <h2>{title}</h2>
-  {subtitle && <p>{subtitle}</p>}
-  <div class="s-line"></div>
+
+<div class:list={['glass-section-header', { 'is-centered': align === 'center' }, className]}>
+  <h2 class="glass-section-header__title">{title}</h2>
+  {subtitle && <p class="glass-section-header__subtitle">{subtitle}</p>}
+  <div class="glass-section-header__line" aria-hidden="true"></div>
 </div>
+
 <style>
-  .s-header { margin-bottom: 3rem; }
-  h2 { font-size: 2rem; color: #fff; margin: 0; }
-  p { color: #64748b; margin: 0.5rem 0 0; }
-  .s-line { height: 4px; width: 60px; background: #6366f1; border-radius: 2px; margin-top: 1.25rem; }
-</style>
+  .glass-section-header {
+    margin-bottom: var(--sp-8);
+  }
+  .glass-section-header.is-centered {
+    text-align: center;
+  }
+  .glass-section-header__title {
+    font-size: clamp(1.5rem, 3vw, 2rem);
+    font-weight: 800;
+    color: var(--c-text-1);
+    margin: 0;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+  }
+  .glass-section-header__subtitle {
+    font-size: clamp(0.9rem, 1.5vw, 1rem);
+    color: var(--c-text-3);
+    margin: var(--sp-2) 0 0;
+    max-width: 600px;
+    line-height: 1.6;
+  }
+  .is-centered .glass-section-header__subtitle {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .glass-section-header__line {
+    height: 4px;
+    width: 60px;
+    background: var(--c-primary-light);
+    border-radius: 2px;
+    margin-top: var(--sp-4);
+  }
+  .is-centered .glass-section-header__line {
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>

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

@@ -1,13 +1,88 @@
 ---
+/**
+ * LandingSectionSplit — Landing page section with text on one side and a media container on the other.
+ */
+interface Props {
+  title?: string;
+  subtitle?: string;
+  className?: string;
+}
+
+const { 
+  title = 'Build Faster with Astro', 
+  subtitle = 'Scale with pre-built accessible components and modular designs.', 
+  className = '' 
+} = Astro.props;
 ---
-<section class="split-sec">
-  <div class="txt"><h2>Build faster</h2><p>Scale with pre-built logic and stunning modular designs.</p></div>
-  <div class="media"></div>
+
+<section class={`split-sec ${className}`}>
+  <div class="split-sec-text">
+    <h2>{title}</h2>
+    <p>{subtitle}</p>
+    <div class="split-sec-actions">
+      <slot name="actions">
+        <button class="split-demo-btn">Explore Docs</button>
+      </slot>
+    </div>
+  </div>
+  <div class="split-sec-media">
+    <slot name="media">
+      <div class="media-mockup">
+        <span>⚡ Interactive Preview</span>
+      </div>
+    </slot>
+  </div>
 </section>
+
 <style>
-  .split-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding: 4rem 1.5rem; }
-  .media { height: 400px; background: rgba(15, 23, 42, 0.5); border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
-  h2 { font-size: 2.5rem; color: #fff; margin-bottom: 1rem; }
-  p { font-size: 1.1rem; color: #94a3b8; line-height: 1.6; }
-  @media (max-width: 768px) { .split-sec { grid-template-columns: 1fr; } }
+  .split-sec {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    align-items: center;
+    padding: 2.5rem 1rem;
+    width: 100%;
+  }
+  .split-sec-text h2 {
+    font-size: 2.2rem;
+    font-weight: 800;
+    color: #fff;
+    margin: 0 0 1rem;
+    line-height: 1.2;
+  }
+  .split-sec-text p {
+    font-size: 1.05rem;
+    color: #94a3b8;
+    line-height: 1.6;
+    margin: 0 0 1.5rem;
+  }
+  .split-demo-btn {
+    padding: 0.75rem 1.5rem;
+    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    border: none;
+    border-radius: 8px;
+    color: #fff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .split-sec-media {
+    width: 100%;
+  }
+  .media-mockup {
+    height: 220px;
+    background: rgba(15, 23, 42, 0.6);
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #94a3b8;
+    font-weight: 600;
+  }
+  @media (max-width: 768px) {
+    .split-sec {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+    }
+  }
 </style>

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

@@ -1,7 +1,46 @@
 ---
+/**
+ * MasonryGrid — A CSS-based masonry layout for items of varying heights.
+ */
+interface Props {
+  columns?: number;
+  gap?: string;
+  className?: string;
+}
+
+const { columns = 3, gap = '1.5rem', className = '' } = Astro.props;
 ---
-<div class="masonry"><slot /></div>
+
+<div class={`masonry ${className}`} style={`--cols: ${columns}; --gap: ${gap};`}>
+  <slot>
+    <div class="masonry-demo-item" style="height: 120px;">Item 1 (Small)</div>
+    <div class="masonry-demo-item" style="height: 200px;">Item 2 (Tall)</div>
+    <div class="masonry-demo-item" style="height: 160px;">Item 3 (Medium)</div>
+    <div class="masonry-demo-item" style="height: 140px;">Item 4 (Medium)</div>
+    <div class="masonry-demo-item" style="height: 180px;">Item 5 (Tall)</div>
+    <div class="masonry-demo-item" style="height: 110px;">Item 6 (Small)</div>
+  </slot>
+</div>
+
 <style>
-  .masonry { columns: 3 250px; column-gap: 1.5rem; }
-  .masonry :global(> *) { break-inside: avoid; margin-bottom: 1.5rem; display: block; }
+  .masonry {
+    columns: var(--cols, 3) 220px;
+    column-gap: var(--gap, 1.5rem);
+    width: 100%;
+  }
+  .masonry :global(> *) {
+    break-inside: avoid;
+    margin-bottom: var(--gap, 1.5rem);
+    display: block;
+  }
+  .masonry-demo-item {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-md, 12px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #94a3b8;
+    font-weight: 600;
+  }
 </style>

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

@@ -1,20 +1,92 @@
 ---
+/**
+ * MinimalFooterGrid — Multi-column grid footer for project links and brand info.
+ */
+interface Props {
+  brandName?: string;
+  className?: string;
+}
+
+const { brandName = 'AstroKit', className = '' } = Astro.props;
 ---
-<footer class="m-footer">
+
+<footer class={`m-footer ${className}`}>
   <div class="f-row">
-    <div class="f-info">Logo<span>© 2024</span></div>
+    <div class="f-info">
+      <span class="f-brand">{brandName}</span>
+      <span class="f-copy">© {new Date().getFullYear()} All rights reserved.</span>
+    </div>
     <div class="f-links">
-      <div><a>Docs</a><a>Blog</a></div>
-      <div><a>Twitter</a><a>Discord</a></div>
+      <div class="f-col">
+        <span class="f-col-title">Product</span>
+        <a href="#components">Components</a>
+        <a href="#docs">Documentation</a>
+        <a href="#pricing">Pricing</a>
+      </div>
+      <div class="f-col">
+        <span class="f-col-title">Community</span>
+        <a href="https://github.com" target="_blank" rel="noopener">GitHub</a>
+        <a href="https://discord.com" target="_blank" rel="noopener">Discord</a>
+        <a href="https://x.com" target="_blank" rel="noopener">Twitter</a>
+      </div>
     </div>
   </div>
 </footer>
+
 <style>
-  .m-footer { padding: 4rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
-  .f-row { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; }
-  .f-info { font-weight: 800; color: #fff; }
-  span { display: block; font-size: 0.75rem; color: #64748b; font-weight: 400; }
-  .f-links { display: flex; gap: 3rem; }
-  a { display: block; color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.5rem; text-decoration: none; cursor: pointer; }
-  a:hover { color: #fff; }
+  .m-footer {
+    width: 100%;
+    padding: 3rem 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(0, 0, 0, 0.2);
+  }
+  .f-row {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 2rem;
+  }
+  .f-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .f-brand {
+    font-weight: 800;
+    font-size: 1.2rem;
+    color: #fff;
+  }
+  .f-copy {
+    font-size: 0.8rem;
+    color: #64748b;
+  }
+  .f-links {
+    display: flex;
+    gap: 3rem;
+  }
+  .f-col {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .f-col-title {
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #94a3b8;
+    margin-bottom: 0.25rem;
+  }
+  a {
+    color: #cbd5e1;
+    font-size: 0.85rem;
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+  a:hover {
+    color: #fff;
+  }
 </style>

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

@@ -1,7 +1,41 @@
 ---
+/**
+ * ScrollSnapSection — Layout wrapper that snaps sections to the full viewport height.
+ */
+interface Props {
+  height?: string;
+  className?: string;
+}
+
+const { height = '300px', className = '' } = Astro.props;
 ---
-<div class="snap-wrap"><slot /></div>
+
+<div class={`snap-wrap ${className}`} style={`--snap-height: ${height};`}>
+  <slot>
+    <section class="snap-panel panel-1"><h4>Slide 1 (Scroll to snap)</h4></section>
+    <section class="snap-panel panel-2"><h4>Slide 2</h4></section>
+    <section class="snap-panel panel-3"><h4>Slide 3</h4></section>
+  </slot>
+</div>
+
 <style>
-  .snap-wrap { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; }
-  .snap-wrap :global(section) { height: 100vh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; }
+  .snap-wrap {
+    height: var(--snap-height, 300px);
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+    width: 100%;
+    border-radius: var(--r-lg, 12px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  .snap-wrap :global(section), .snap-panel {
+    height: var(--snap-height, 300px);
+    scroll-snap-align: start;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+  }
+  .panel-1 { background: rgba(99, 102, 241, 0.15); }
+  .panel-2 { background: rgba(192, 132, 252, 0.15); }
+  .panel-3 { background: rgba(251, 191, 36, 0.15); }
 </style>

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

@@ -1,7 +1,47 @@
 ---
+/**
+ * SectionDividerText — A text-based section divider with decorative lines on each side.
+ *
+ * Displays uppercase text centered between two horizontal lines. Ideal for separating
+ * content sections on landing pages or documentation pages.
+ *
+ * @param {string} color - Text and line color using CSS color value. Default: 'var(--c-text-3)'.
+ * @param {string} fontSize - Size of the divider text. Default: '0.75rem'.
+ *
+ * @example
+ * ```astro
+ * <SectionDividerText>Features</SectionDividerText>
+ * ```
+ */
+interface Props {
+  color?: string;
+  fontSize?: string;
+}
+
+const { color = 'var(--c-text-3)', fontSize = '0.75rem' } = Astro.props;
 ---
-<div class="txt-divider"><span><slot /></span></div>
+
+<div class="section-divider" style={`--divider-color: ${color}; --divider-font-size: ${fontSize}`}>
+  <span><slot /></span>
+</div>
+
 <style>
-  .txt-divider { display: flex; align-items: center; gap: 1rem; color: #64748b; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 2rem 0; }
-  .txt-divider::before, .txt-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
-</style>
+  .section-divider {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-4);
+    color: var(--divider-color, var(--c-text-3));
+    font-size: var(--divider-font-size, 0.75rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin: var(--sp-6) 0;
+  }
+  .section-divider::before,
+  .section-divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--c-border);
+  }
+</style>

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

@@ -1,11 +1,66 @@
 ---
+/**
+ * SidebarLayoutWrapper — A two-column layout with a sidebar and main content area.
+ *
+ * Creates a full-height page layout with a fixed-width sidebar column and a flexible main column.
+ * Stacks vertically on mobile screens (below 768px). Uses named slots for sidebar and main content.
+ *
+ * @param {string} sidebarWidth - Width of the sidebar column. Default: '280px'.
+ * @param {string} breakpoint - Screen width at which the layout stacks vertically. Default: '768px'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```astro
+ * <SidebarLayoutWrapper sidebarWidth="260px">
+ *   <div slot="sidebar">
+ *     <nav>Navigation links</nav>
+ *   </div>
+ *   <div slot="main">
+ *     <h1>Main content</h1>
+ *   </div>
+ * </SidebarLayoutWrapper>
+ * ```
+ */
+interface Props {
+  sidebarWidth?: string;
+  breakpoint?: string;
+  className?: string;
+}
+
+const { sidebarWidth = '280px', breakpoint = '768px', className = '' } = Astro.props;
 ---
-<div class="side-page">
-  <aside class="side-col"><slot name="sidebar" /></aside>
-  <main class="main-col"><slot name="main" /></main>
+
+<div class:list={['sidebar-layout', className]} style={`--sidebar-w: ${sidebarWidth}; --breakpoint: ${breakpoint}`}>
+  <aside class="sidebar-layout__sidebar">
+    <slot name="sidebar" />
+  </aside>
+  <main class="sidebar-layout__main">
+    <slot name="main" />
+  </main>
 </div>
+
 <style>
-  .side-page { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
-  .side-col { border-right: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0,0,0,0.1); }
-  .main-col { padding: 2rem; }
-</style>
+  .sidebar-layout {
+    display: grid;
+    grid-template-columns: var(--sidebar-w) 1fr;
+    min-height: 100vh;
+  }
+  .sidebar-layout__sidebar {
+    border-right: 1px solid var(--c-border);
+    background: var(--c-bg-1);
+    overflow-y: auto;
+  }
+  .sidebar-layout__main {
+    padding: var(--sp-6);
+  }
+
+  @media (max-width: 768px) {
+    .sidebar-layout {
+      grid-template-columns: 1fr;
+    }
+    .sidebar-layout__sidebar {
+      border-right: none;
+      border-bottom: 1px solid var(--c-border);
+    }
+  }
+</style>

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

@@ -1,11 +1,67 @@
 ---
+/**
+ * SplitScreenLayout — A layout divided into two equal halves, perfect for landing pages.
+ */
+interface Props {
+  className?: string;
+}
+
+const { className = '' } = Astro.props;
 ---
-<div class="split-layout">
-  <div class="split-side left"><slot name="left" /></div>
-  <div class="split-side right"><slot name="right" /></div>
+
+<div class={`split-layout ${className}`}>
+  <div class="split-side left">
+    <slot name="left">
+      <div class="demo-split-block">
+        <h3>Left Content</h3>
+        <p>Hero text and main value proposition.</p>
+      </div>
+    </slot>
+  </div>
+  <div class="split-side right">
+    <slot name="right">
+      <div class="demo-split-block">
+        <h3>Right Content</h3>
+        <p>Visual graphic, product mockups, or form.</p>
+      </div>
+    </slot>
+  </div>
 </div>
+
 <style>
-  .split-layout { display: flex; min-height: 80vh; flex-wrap: wrap; }
-  .split-side { flex: 1; min-width: 300px; display: flex; align-items: center; padding: 4rem; }
-  .left { background: rgba(0,0,0,0.1); }
+  .split-layout {
+    display: flex;
+    min-height: 50vh;
+    flex-wrap: wrap;
+    width: 100%;
+    border-radius: var(--r-xl, 16px);
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+  .split-side {
+    flex: 1;
+    min-width: 280px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 2rem;
+  }
+  .left {
+    background: rgba(255, 255, 255, 0.02);
+  }
+  .right {
+    background: rgba(0, 0, 0, 0.3);
+    border-left: 1px solid rgba(255, 255, 255, 0.06);
+  }
+  .demo-split-block {
+    text-align: center;
+  }
+  .demo-split-block h3 {
+    color: #fff;
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+  .demo-split-block p {
+    color: #94a3b8;
+  }
 </style>

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

@@ -1,21 +1,94 @@
 ---
+/**
+ * StepLayoutVertical — Vertical Progress Steps with space for detailed descriptions.
+ */
+interface Props {
+  className?: string;
+}
+
+const { className = '' } = Astro.props;
 ---
-<div class="step-lay">
+
+<div class={`step-lay ${className}`}>
   <div class="step-line">
     <div class="step-point">1</div>
     <div class="step-point">2</div>
+    <div class="step-point">3</div>
   </div>
   <div class="step-content">
-    <div class="step-block"><h4>Setup</h4><p>Install the library.</p></div>
-    <div class="step-block"><h4>Config</h4><p>Set up registry.</p></div>
+    <div class="step-block">
+      <h4>1. Installation</h4>
+      <p>Install astro-component-kit via npm in seconds.</p>
+    </div>
+    <div class="step-block">
+      <h4>2. Configuration</h4>
+      <p>Import components and design tokens into your Astro project.</p>
+    </div>
+    <div class="step-block">
+      <h4>3. Build & Ship</h4>
+      <p>Enjoy zero-runtime overhead and instant static builds.</p>
+    </div>
   </div>
 </div>
+
 <style>
-  .step-lay { display: flex; gap: 2.5rem; }
-  .step-line { width: 40px; display: flex; flex-direction: column; align-items: center; gap: 5rem; position: relative; }
-  .step-line::before { content: ""; position: absolute; height: 100%; width: 2px; background: rgba(255,255,255,0.05); z-index: -1; }
-  .step-point { width: 34px; height: 34px; border-radius: 50%; background: #6366f1; color: #fff; display: grid; place-items: center; font-weight: 800; box-shadow: 0 0 15px rgba(99,102,241,0.4); }
-  .step-block { height: 90px; }
-  h4 { margin: 0; color: #fff; font-size: 1.1rem; }
-  p { color: #64748b; font-size: 0.9rem; margin-top: 0.4rem; }
+  .step-lay {
+    display: flex;
+    gap: 2rem;
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  .step-line {
+    width: 36px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+  }
+  .step-line::before {
+    content: "";
+    position: absolute;
+    top: 18px;
+    bottom: 18px;
+    width: 2px;
+    background: rgba(255, 255, 255, 0.1);
+    z-index: 0;
+  }
+  .step-point {
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    background: #6366f1;
+    color: #fff;
+    display: grid;
+    place-items: center;
+    font-weight: 800;
+    font-size: 0.9rem;
+    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
+    z-index: 1;
+  }
+  .step-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    flex: 1;
+  }
+  .step-block {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 50px;
+  }
+  .step-block h4 {
+    margin: 0;
+    color: #fff;
+    font-size: 1.05rem;
+  }
+  .step-block p {
+    color: #94a3b8;
+    font-size: 0.85rem;
+    margin: 0.25rem 0 0;
+  }
 </style>