astro-component-kit 0.0.1

package/src/components/lib/cards/StatCard.astro

@@ -0,0 +1,15 @@
+---
+---
+<div class="stat-card">
+  <div class="icon">📈</div>
+  <div>
+    <span class="label">Total Revenue</span>
+    <span class="value">$124,590</span>
+  </div>
+</div>
+<style>
+  .stat-card { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.2); border-radius: 16px; }
+  .icon { font-size: 1.5rem; background: rgba(99,102,241,0.1); width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px; }
+  .label { display: block; font-size: 0.8rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; }
+  .value { display: block; font-size: 1.4rem; font-weight: 800; color: #fff; }
+</style>

package/src/components/lib/cards/TaskKanbanCard.astro

@@ -0,0 +1,18 @@
+---
+---
+<div class="task-card">
+  <div class="tags"><span class="tag-high">High</span></div>
+  <p>Implement authentication middleware for the API.</p>
+  <div class="task-footer">
+    <span class="date">📅 Oct 24</span>
+    <div class="assign">MJ</div>
+  </div>
+</div>
+<style>
+  .task-card { background: #1e293b; padding: 1rem; border-radius: 10px; border: 1px solid #334155; }
+  .tag-high { background: rgba(239,68,68,0.1); color: #f87171; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
+  p { font-size: 0.85rem; color: #e2e8f0; margin: 0.75rem 0; font-weight: 500; }
+  .task-footer { display: flex; justify-content: space-between; align-items: center; }
+  .date { font-size: 0.75rem; color: #64748b; }
+  .assign { width: 24px; height: 24px; background: #6366f1; color: #fff; font-size: 0.65rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
+</style>

package/src/components/lib/cards/TestimonialCardClean.astro

@@ -0,0 +1,20 @@
+---
+---
+<div class="testi-card">
+  <div class="quote">"This component library transformed our workflow. The best Astro-first UI kit we've found."</div>
+  <div class="author">
+    <div class="pic"></div>
+    <div>
+      <h5>Alex Rivera</h5>
+      <span>CTO at TechFlow</span>
+    </div>
+  </div>
+</div>
+<style>
+  .testi-card { background: rgba(255,255,255,0.03); padding: 2rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); }
+  .quote { font-size: 1rem; color: #e2e8f0; font-style: italic; line-height: 1.6; margin-bottom: 2rem; }
+  .author { display: flex; align-items: center; gap: 1rem; }
+  .pic { width: 40px; height: 40px; background: #334155; border-radius: 50%; }
+  h5 { margin: 0; color: #fff; }
+  span { font-size: 0.75rem; color: #64748b; }
+</style>

package/src/components/lib/cards/WeatherWidgetCard.astro

@@ -0,0 +1,17 @@
+---
+---
+<div class="weather-card">
+  <div class="temp">24°</div>
+  <div class="city">
+    <h4>Sunnyvale</h4>
+    <p>Partly Cloudy</p>
+  </div>
+  <div class="icon">☀️</div>
+</div>
+<style>
+  .weather-card { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(192,132,252,0.2)); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.15); border-radius: 24px; color: #fff; }
+  .temp { font-size: 2.2rem; font-weight: 800; }
+  .city h4 { margin: 0; font-size: 1rem; }
+  .city p { margin: 0; font-size: 0.8rem; opacity: 0.7; }
+  .icon { font-size: 2.5rem; margin-left: auto; }
+</style>

package/src/components/lib/cards/index.ts

@@ -0,0 +1,19 @@
+export { default as BlogHorizontalCard } from './BlogHorizontalCard.astro';
+export { default as CyberFeatureCard } from './CyberFeatureCard.astro';
+export { default as EcommerceProductCard } from './EcommerceProductCard.astro';
+export { default as GlassCard } from './GlassCard.astro';
+export { default as GlassEventCard } from './GlassEventCard.astro';
+export { default as GlowPortfolioCard } from './GlowPortfolioCard.astro';
+export { default as InteractiveTiltCard } from './InteractiveTiltCard.astro';
+export { default as KanbanItemCard } from './KanbanItemCard.astro';
+export { default as MinimalLinkCard } from './MinimalLinkCard.astro';
+export { default as MusicPlayerMini } from './MusicPlayerMini.astro';
+export { default as NeumorphicCard } from './NeumorphicCard.astro';
+export { default as NotificationCard } from './NotificationCard.astro';
+export { default as PricingCard } from './PricingCard.astro';
+export { default as ProfileCard } from './ProfileCard.astro';
+export { default as RetroGameCard } from './RetroGameCard.astro';
+export { default as StatCard } from './StatCard.astro';
+export { default as TaskKanbanCard } from './TaskKanbanCard.astro';
+export { default as TestimonialCardClean } from './TestimonialCardClean.astro';
+export { default as WeatherWidgetCard } from './WeatherWidgetCard.astro';

package/src/components/lib/data/AccordionGroupGlass.astro

@@ -0,0 +1,21 @@
+---
+---
+<div class="acc-wrap">
+  <details open>
+    <summary>How do I install the components?</summary>
+    <div class="content">Simply copy the Astro and CSS code into your project.</div>
+  </details>
+  <details>
+    <summary>Is this open source?</summary>
+    <div class="content">Yes, Astro Components is free under the MIT license.</div>
+  </details>
+</div>
+<style>
+  .acc-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
+  details { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; }
+  summary { padding: 1rem 1.5rem; cursor: pointer; color: #fff; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
+  summary:hover { background: rgba(255,255,255,0.02); }
+  summary::after { content: "+"; font-size: 1.25rem; transition: transform 0.3s; }
+  details[open] summary::after { transform: rotate(45deg); }
+  .content { padding: 0 1.5rem 1rem; color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }
+</style>

package/src/components/lib/data/AvatarGroupStack.astro

@@ -0,0 +1,15 @@
+---
+---
+<div class="av-group">
+  <div class="av" style="background:#6366f1">AJ</div>
+  <div class="av" style="background:#8b5cf6">MK</div>
+  <div class="av" style="background:#ec4899">SL</div>
+  <div class="av more">+4</div>
+</div>
+<style>
+  .av-group { display: flex; align-items: center; }
+  .av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #080b14; margin-left: -10px; display: grid; place-items: center; font-size: 0.65rem; font-weight: 800; color: #fff; position: relative; transition: 0.2s; cursor: pointer; }
+  .av:first-child { margin-left: 0; }
+  .av:hover { transform: translateY(-4px); z-index: 10; }
+  .more { background: #1e293b; color: #94a3b8; border-style: dashed; }
+</style>

package/src/components/lib/data/CalendarGridView.astro

@@ -0,0 +1,18 @@
+---
+---
+<div class="cal-card">
+  <div class="cal-head"><h4>October 2024</h4></div>
+  <div class="cal-grid">
+    <span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span><span>Su</span>
+    {[...Array(31)].map((_, i) => <div class:list={[{ "today": i+1 === 24 }]}>{i+1}</div>)}
+  </div>
+</div>
+<style>
+  .cal-card { background: #111; border: 1px solid #333; border-radius: 16px; padding: 1.25rem; width: fit-content; }
+  .cal-head { text-align: center; margin-bottom: 1rem; color: #fff; }
+  .cal-grid { display: grid; grid-template-columns: repeat(7, 35px); text-align: center; font-size: 0.75rem; color: #64748b; }
+  .cal-grid span { font-weight: 800; padding: 5px 0; color: #818cf8; }
+  .cal-grid div { padding: 8px 0; cursor: pointer; transition: 0.2s; }
+  .cal-grid div:hover { color: #fff; background: rgba(255,255,255,0.05); border-radius: 5px; }
+  .today { background: #6366f1; color: #fff !important; border-radius: 5px; box-shadow: 0 0 10px rgba(99,102,241,0.4); }
+</style>

package/src/components/lib/data/DataChipsGroup.astro

@@ -0,0 +1,16 @@
+---
+---
+<div class="chips-row">
+  <span class="chip-active">All Assets</span>
+  <span>Images</span>
+  <span>Videos</span>
+  <span>Docs</span>
+  <span>Music</span>
+</div>
+<style>
+  .chips-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
+  .chips-row::-webkit-scrollbar { display: none; }
+  .chips-row span { padding: 6px 16px; background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.05); color: #94a3b8; font-size: 0.8rem; border-radius: 100px; cursor: pointer; white-space: nowrap; transition: 0.2s; font-weight: 600; }
+  .chips-row span:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); }
+  .chip-active { background: #6366f1 !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); }
+</style>

package/src/components/lib/data/DescriptionListHoriz.astro

@@ -0,0 +1,14 @@
+---
+---
+<dl class="desc-list">
+  <div class="row"><dt>Module Name</dt><dd>AuthEngine</dd></div>
+  <div class="row"><dt>Version</dt><dd>1.4.2</dd></div>
+  <div class="row"><dt>Status</dt><dd>Deployment Ready</dd></div>
+</dl>
+<style>
+  .desc-list { display: flex; flex-direction: column; width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.1); }
+  .row { display: grid; grid-template-columns: 140px 1fr; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; }
+  .row:last-child { border-bottom: none; }
+  dt { color: #64748b; font-weight: 600; }
+  dd { color: #fff; margin: 0; }
+</style>

package/src/components/lib/data/FileTreeView.astro

@@ -0,0 +1,22 @@
+---
+---
+<div class="tree">
+  <div class="folder active">📁 src</div>
+  <div class="indent">
+    <div class="folder">📁 components</div>
+    <div class="indent">
+      <div class="file">📄 Button.astro</div>
+      <div class="file">📄 Card.astro</div>
+    </div>
+    <div class="file">📄 styles.css</div>
+  </div>
+  <div class="file">📄 astro.config.mjs</div>
+</div>
+<style>
+  .tree { font-family: monospace; font-size: 0.85rem; color: #94a3b8; line-height: 1.8; }
+  .indent { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.1); }
+  .folder { color: #fff; font-weight: 700; cursor: pointer; }
+  .folder.active { color: #818cf8; }
+  .file { cursor: pointer; padding-left: 4px; }
+  .file:hover { color: #fff; }
+</style>

package/src/components/lib/data/GanttChartMinimal.astro

@@ -0,0 +1,12 @@
+---
+---
+<div class="gantt">
+  <div class="g-row"><div class="g-bar" style="width: 40%; margin-left: 10%; background: #6366f1"></div></div>
+  <div class="g-row"><div class="g-bar" style="width: 30%; margin-left: 55%; background: #c084fc"></div></div>
+  <div class="g-row"><div class="g-bar" style="width: 20%; margin-left: 20%; background: #10b981"></div></div>
+</div>
+<style>
+  .gantt { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); }
+  .g-row { height: 20px; position: relative; width: 100%; background: rgba(255,255,255,0.02); border-radius: 4px; }
+  .g-bar { height: 100%; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
+</style>

package/src/components/lib/data/GlassTable.astro

@@ -0,0 +1,23 @@
+---
+---
+<div class="table-wrap">
+  <table>
+    <thead><tr><th>User</th><th>Status</th><th>Role</th><th>Activity</th></tr></thead>
+    <tbody>
+      <tr><td>Alex Smith</td><td><span class="st st-active">Active</span></td><td>Admin</td><td>2m ago</td></tr>
+      <tr><td>Maria Garcia</td><td><span class="st st-away">Away</span></td><td>Editor</td><td>1h ago</td></tr>
+      <tr><td>James Wilson</td><td><span class="st st-offline">Offline</span></td><td>Viewer</td><td>2d ago</td></tr>
+    </tbody>
+  </table>
+</div>
+<style>
+  .table-wrap { width: 100%; overflow-x: auto; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; backdrop-filter: blur(10px); }
+  table { width: 100%; border-collapse: collapse; text-align: left; }
+  th { padding: 1rem 1.5rem; background: rgba(255,255,255,0.03); color: #818cf8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid rgba(255,255,255,0.06); }
+  td { padding: 1rem 1.5rem; color: #e2e8f0; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
+  tr:hover td { background: rgba(255,255,255,0.02); }
+  .st { padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
+  .st-active { background: rgba(16,185,129,0.1); color: #34d399; }
+  .st-away { background: rgba(245,158,11,0.1); color: #fbbf24; }
+  .st-offline { background: rgba(100,116,139,0.1); color: #94a3b8; }
+</style>

package/src/components/lib/data/KeyValuePillGroup.astro

@@ -0,0 +1,12 @@
+---
+---
+<div class="meta-row">
+  <div class="m-pill">OS:<span>MacOS</span></div>
+  <div class="m-pill">Ver:<span>14.5</span></div>
+  <div class="m-pill">Arch:<span>ARM64</span></div>
+</div>
+<style>
+  .meta-row { display: flex; gap: 8px; flex-wrap: wrap; }
+  .m-pill { background: rgba(0,0,0,0.2); color: #64748b; font-size: 0.7rem; padding: 4px 12px; border-radius: 8px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.05); }
+  span { color: #e2e8f0; margin-left: 6px; }
+</style>

package/src/components/lib/data/PriceCompareTable.astro

@@ -0,0 +1,22 @@
+---
+---
+<div class="c-wrap">
+  <table>
+    <thead>
+      <tr><th>Features</th><th>Free</th><th>Pro</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>Feature A</td><td>✅</td><td>✅</td></tr>
+      <tr><td>Feature B</td><td>❌</td><td>✅</td></tr>
+      <tr><td>Storage</td><td>10GB</td><td>100GB</td></tr>
+    </tbody>
+  </table>
+</div>
+<style>
+  .c-wrap { background: #0f172a; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
+  table { width: 100%; font-size: 0.85rem; color: #e2e8f0; border-collapse: collapse; }
+  th { padding: 1rem; background: rgba(255, 255, 255, 0.05); color: #fff; text-align: center; font-weight: 800; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
+  th:first-child { text-align: left; }
+  td { padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.05); text-align: center; }
+  td:first-child { text-align: left; background: rgba(255,255,255,0.02); width: 40%; font-weight: 600; }
+</style>

package/src/components/lib/data/ProgressListSmall.astro

@@ -0,0 +1,17 @@
+---
+---
+<div class="p-list">
+  <div class="p-row"><span>Storage</span><strong>42%</strong></div>
+  <div class="p-bar"><div class="fill" style="width: 42%"></div></div>
+  <div style="margin-top: 1rem"></div>
+  <div class="p-row"><span>Bandwidth</span><strong>68%</strong></div>
+  <div class="p-bar"><div class="fill" style="width: 68%; background: #c084fc"></div></div>
+</div>
+<style>
+  .p-list { width: 100%; max-width: 300px; }
+  .p-row { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 6px; }
+  span { color: #64748b; font-weight: 600; }
+  strong { color: #fff; }
+  .p-bar { height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 100px; overflow: hidden; }
+  .fill { height: 100%; background: #6366f1; border-radius: inherit; }
+</style>

package/src/components/lib/data/RatingBreakdownBar.astro

@@ -0,0 +1,13 @@
+---
+---
+<div class="rating-box">
+  <div class="r-row"><span>5★</span><div class="bar-bg"><div class="bar-val" style="width: 80%"></div></div></div>
+  <div class="r-row"><span>4★</span><div class="bar-bg"><div class="bar-val" style="width: 15%"></div></div></div>
+  <div class="r-row"><span>3★</span><div class="bar-bg"><div class="bar-val" style="width: 5%"></div></div></div>
+</div>
+<style>
+  .rating-box { display: flex; flex-direction: column; gap: 8px; width: 220px; }
+  .r-row { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 0.75rem; font-weight: 700; }
+  .bar-bg { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.03); }
+  .bar-val { height: 100%; background: #fbbf24; border-radius: inherit; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
+</style>

package/src/components/lib/data/SparklineStatCard.astro

@@ -0,0 +1,16 @@
+---
+---
+<div class="spark-card">
+  <div class="top"><span>Sessions</span><h3>2,415</h3></div>
+  <div class="graph">
+    <svg viewBox="0 0 100 30">
+      <path d="M0 25 L10 20 L20 22 L30 15 L40 18 L50 25 L60 10 L70 12 L80 5 L90 8 L100 2" fill="none" stroke="#6366f1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </div>
+</div>
+<style>
+  .spark-card { padding: 1.5rem; background: #111; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; min-width: 160px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
+  h3 { margin: 4px 0; color: #fff; font-size: 1.5rem; font-weight: 800; }
+  span { font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
+  .graph { margin-top: 15px; height: 30px; opacity: 0.8; }
+</style>

package/src/components/lib/data/StatsGridDashboard.astro

@@ -0,0 +1,16 @@
+---
+---
+<div class="s-grid">
+  <div class="s-card"><span>Users</span><h3>12.4k</h3><small class="up">+12%</small></div>
+  <div class="s-card"><span>Revenue</span><h3>$48k</h3><small class="up">+5%</small></div>
+  <div class="s-card"><span>Bounce</span><h3>24%</h3><small class="down">-2%</small></div>
+</div>
+<style>
+  .s-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
+  .s-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); padding: 1.25rem; border-radius: 12px; }
+  span { font-size: 0.75rem; color: #64748b; font-weight: 600; text-transform: uppercase; }
+  h3 { font-size: 1.5rem; color: #fff; margin: 0.25rem 0; }
+  small { font-size: 0.7rem; font-weight: 700; }
+  .up { color: #10b981; }
+  .down { color: #ef4444; }
+</style>

package/src/components/lib/data/StepperDataVertical.astro

@@ -0,0 +1,15 @@
+---
+---
+<div class="v-steps">
+  <div class="v-step done"><span>Check</span>Account Created</div>
+  <div class="v-step current"><span>2</span>Verify Email</div>
+  <div class="v-step"><span>3</span>Setup Profile</div>
+</div>
+<style>
+  .v-steps { display: flex; flex-direction: column; gap: 1rem; }
+  .v-step { display: flex; align-items: center; gap: 1rem; color: #64748b; font-size: 0.9rem; font-weight: 600; }
+  .v-step span { width: 24px; height: 24px; background: #1e293b; display: grid; place-items: center; border-radius: 50%; font-size: 0.7rem; border: 1px solid #334155; }
+  .current { color: #fff; }
+  .current span { background: #6366f1; border-color: #6366f1; box-shadow: 0 0 10px rgba(99,102,241,0.4); }
+  .done span { background: #10b981; border-color: #10b981; color: #fff; }
+</style>

package/src/components/lib/data/TagCloudData.astro

@@ -0,0 +1,14 @@
+---
+---
+<div class="t-cloud">
+  <span class="t-pill">React</span>
+  <span class="t-pill t-active">Astro</span>
+  <span class="t-pill">Next.js</span>
+  <span class="t-pill">Vue</span>
+  <span class="t-pill">Svelte</span>
+</div>
+<style>
+  .t-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+  .t-pill { padding: 4px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; color: #94a3b8; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
+  .t-pill:hover, .t-active { background: #6366f1; color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(99,102,241,0.3); }
+</style>

package/src/components/lib/data/TimelineHorizSteps.astro

@@ -0,0 +1,18 @@
+---
+---
+<div class="h-timeline">
+  <div class="h-line"></div>
+  <div class="h-item"><span>2022</span><strong>Founded</strong></div>
+  <div class="h-item"><span>2023</span><strong>Global</strong></div>
+  <div class="h-item curr"><span>2024</span><strong>V2.0</strong></div>
+</div>
+<style>
+  .h-timeline { display: flex; justify-content: space-between; position: relative; padding: 2rem 0; width: 100%; max-width: 600px; margin: 0 auto; }
+  .h-line { position: absolute; top: 3.2rem; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.1); }
+  .h-item { text-align: center; position: relative; z-index: 1; min-width: 80px; }
+  .h-item span { display: block; font-size: 0.7rem; color: #64748b; margin-bottom: 2rem; font-weight: 700; }
+  .h-item::after { content: ""; position: absolute; left: 50%; top: 1.1rem; width: 16px; height: 16px; background: #1e293b; border: 3px solid #334155; border-radius: 50%; transform: translateX(-50%); transition: 0.3s; }
+  strong { display: block; color: #fff; font-size: 0.85rem; }
+  .curr strong { color: #6366f1; }
+  .curr::after { background: #6366f1; border-color: #080b14; box-shadow: 0 0 15px rgba(99, 102, 241, 0.6); }
+</style>

package/src/components/lib/data/TreeItemInteractive.astro

@@ -0,0 +1,18 @@
+---
+---
+<div class="exp-row">
+  <div class="main"><span>▶</span> Users Database</div>
+  <div class="child">
+    <p>Columns: id, name, email, avatar, status</p>
+    <p>Rows: 1,402 entries</p>
+  </div>
+</div>
+<style>
+  .exp-row { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 12px; }
+  .main { color: #fff; font-size: 0.85rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
+  .main span { font-size: 0.6rem; color: #64748b; transition: 0.3s; }
+  .child { margin-top: 12px; padding-left: 24px; color: #64748b; font-size: 0.8rem; display: none; line-height: 1.5; }
+  .exp-row:hover .main { color: #818cf8; }
+  .exp-row:hover .main span { transform: rotate(90deg); color: #818cf8; }
+  .exp-row:hover .child { display: block; }
+</style>

package/src/components/lib/data/UserDirectoryItem.astro

@@ -0,0 +1,15 @@
+---
+---
+<div class="u-item">
+  <div class="u-pic">JS</div>
+  <div class="u-info"><h5>John Doe</h5><p>Software Engineer</p></div>
+  <div class="u-stat">Online</div>
+</div>
+<style>
+  .u-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); transition: 0.2s; }
+  .u-item:hover { border-color: rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.05); }
+  .u-pic { width: 42px; height: 42px; background: linear-gradient(135deg, #6366f1, #c084fc); border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.8rem; }
+  .u-info h5 { margin: 0; color: #fff; font-size: 1rem; }
+  .u-info p { margin: 2px 0 0; font-size: 0.75rem; color: #64748b; }
+  .u-stat { margin-left: auto; font-size: 0.65rem; color: #34d399; font-weight: 800; text-transform: uppercase; background: rgba(52, 211, 153, 0.1); padding: 2px 8px; border-radius: 4px; }
+</style>

package/src/components/lib/data/VerticalTimeline.astro

@@ -0,0 +1,21 @@
+---
+---
+<div class="timeline-v">
+  <div class="t-item">
+    <div class="t-date">Oct 2024</div>
+    <div class="t-content"><h4>V2 Release</h4><p>Launched the modular registry architecture.</p></div>
+  </div>
+  <div class="t-item">
+    <div class="t-date">Aug 2024</div>
+    <div class="t-content"><h4>Beta Phase</h4><p>Community testing and initial component set.</p></div>
+  </div>
+</div>
+<style>
+  .timeline-v { position: relative; padding-left: 2rem; }
+  .timeline-v::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(99,102,241,0.2); }
+  .t-item { position: relative; margin-bottom: 2.5rem; }
+  .t-item::after { content: ""; position: absolute; left: -2.35rem; top: 5px; width: 12px; height: 12px; background: #6366f1; border: 3px solid #080b14; border-radius: 50%; }
+  .t-date { font-size: 0.75rem; font-weight: 700; color: #6366f1; margin-bottom: 0.25rem; }
+  h4 { color: #fff; margin: 0; }
+  p { font-size: 0.85rem; color: #94a3b8; margin-top: 0.25rem; }
+</style>

package/src/components/lib/data/index.ts

@@ -0,0 +1,20 @@
+export { default as AccordionGroupGlass } from './AccordionGroupGlass.astro';
+export { default as AvatarGroupStack } from './AvatarGroupStack.astro';
+export { default as CalendarGridView } from './CalendarGridView.astro';
+export { default as DataChipsGroup } from './DataChipsGroup.astro';
+export { default as DescriptionListHoriz } from './DescriptionListHoriz.astro';
+export { default as FileTreeView } from './FileTreeView.astro';
+export { default as GanttChartMinimal } from './GanttChartMinimal.astro';
+export { default as GlassTable } from './GlassTable.astro';
+export { default as KeyValuePillGroup } from './KeyValuePillGroup.astro';
+export { default as PriceCompareTable } from './PriceCompareTable.astro';
+export { default as ProgressListSmall } from './ProgressListSmall.astro';
+export { default as RatingBreakdownBar } from './RatingBreakdownBar.astro';
+export { default as SparklineStatCard } from './SparklineStatCard.astro';
+export { default as StatsGridDashboard } from './StatsGridDashboard.astro';
+export { default as StepperDataVertical } from './StepperDataVertical.astro';
+export { default as TagCloudData } from './TagCloudData.astro';
+export { default as TimelineHorizSteps } from './TimelineHorizSteps.astro';
+export { default as TreeItemInteractive } from './TreeItemInteractive.astro';
+export { default as UserDirectoryItem } from './UserDirectoryItem.astro';
+export { default as VerticalTimeline } from './VerticalTimeline.astro';

package/src/components/lib/feedback/AnimatedCheckmark.astro

@@ -0,0 +1,13 @@
+---
+---
+<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+  <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
+  <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
+</svg>
+<style>
+  .checkmark { width: 56px; height: 56px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; margin: 10% auto; box-shadow: inset 0px 0px 0px #7ac142; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
+  .checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #7ac142; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
+  .checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
+  @keyframes stroke { 100% { stroke-dashoffset: 0; } }
+  @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #7ac142; } }
+</style>

package/src/components/lib/feedback/Badge.astro

@@ -0,0 +1,19 @@
+---
+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/feedback/CircleProgress.astro

@@ -0,0 +1,22 @@
+---
+interface Props { percent: number; }
+const { percent } = Astro.props;
+const radius = 30;
+const circum = 2 * Math.PI * radius;
+const offset = circum - (percent / 100) * circum;
+---
+<div class="circle-box">
+  <svg width="80" height="80">
+    <circle class="bg" cx="40" cy="40" r={radius} />
+    <circle class="val" cx="40" cy="40" r={radius} stroke-dasharray={circum} stroke-dashoffset={offset} />
+  </svg>
+  <div class="label">{percent}%</div>
+</div>
+<style>
+  .circle-box { position: relative; width: 80px; height: 80px; display: grid; place-items: center; }
+  svg { transform: rotate(-90deg); }
+  circle { fill: transparent; stroke-width: 6; stroke-linecap: round; }
+  .bg { stroke: rgba(255,255,255,0.05); }
+  .val { stroke: #6366f1; transition: stroke-dashoffset 1s ease; }
+  .label { position: absolute; font-size: 0.8rem; font-weight: 800; color: #fff; }
+</style>

package/src/components/lib/feedback/ConfettiFeedback.astro

@@ -0,0 +1,18 @@
+---
+---
+<div class="confetti-btn-trigger">
+  <span>Success!</span>
+  <div class="confetti-container">
+    <div class="piece" style="--l: 10%; --d: 0.5s"></div>
+    <div class="piece" style="--l: 50%; --d: 1s"></div>
+    <div class="piece" style="--l: 80%; --d: 0.2s"></div>
+  </div>
+</div>
+<style>
+  .confetti-container { position: absolute; inset: 0; pointer-events: none; }
+  .piece { position: absolute; left: var(--l); top: 0; width: 8px; height: 8px; background: #6366f1; border-radius: 2px; opacity: 0; animation: fall 2s infinite var(--d); }
+  @keyframes fall {
+    0% { transform: translateY(0) rotate(0); opacity: 1; }
+    100% { transform: translateY(100px) rotate(360deg); opacity: 0; }
+  }
+</style>

package/src/components/lib/feedback/CyberGlitchAlert.astro

@@ -0,0 +1,11 @@
+---
+---
+<div class="glitch-alert">
+  <span class="glitch-text" data-text="CRITICAL ERROR">CRITICAL ERROR</span>
+</div>
+<style>
+  .glitch-alert { background: #ff003c; padding: 1.5rem; border: 2px solid #fff; position: relative; overflow: hidden; }
+  .glitch-text { font-family: monospace; font-weight: 900; color: #fff; font-size: 1.2rem; }
+  .glitch-text::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 2px 0 #00e0ff; animation: glitch-anim 1s infinite linear alternate-reverse; }
+  @keyframes glitch-anim { 0% { clip: rect(44px, 450px, 56px, 0); } 100% { clip: rect(12px, 450px, 80px, 0); } }
+</style>

package/src/components/lib/feedback/EmptyStateCard.astro

@@ -0,0 +1,13 @@
+---
+---
+<div class="empty-state">
+  <div class="ico">📁</div>
+  <h4>No results found</h4>
+  <p>Try adjusting your search filters or add a new item.</p>
+</div>
+<style>
+  .empty-state { text-align: center; padding: 4rem 2rem; border: 2px dashed rgba(255,255,255,0.1); border-radius: 20px; color: #94a3b8; background: rgba(255,255,255,0.02); }
+  .ico { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
+  h4 { color: #fff; margin: 0; }
+  p { font-size: 0.9rem; margin-top: 0.5rem; }
+</style>

package/src/components/lib/feedback/GlassAlert.astro

@@ -0,0 +1,20 @@
+---
+interface Props { type?: 'info' | 'success' | 'warning' | 'error'; title: string; }
+const { type = 'info', title } = Astro.props;
+---
+<div class:list={['alert', `alert--${type}` ]}>
+  <div class="alert-icon">!</div>
+  <div class="alert-content">
+    <div class="alert-title">{title}</div>
+    <div class="alert-body"><slot /></div>
+  </div>
+</div>
+<style>
+  .alert { display: flex; gap: 1rem; padding: 1.25rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(12px); background: rgba(255,255,255,0.03); }
+  .alert--success { border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.05); }
+  .alert--warning { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.05); }
+  .alert--error { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }
+  .alert-icon { font-weight: 900; background: rgba(255,255,255,0.1); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 0.8rem; }
+  .alert-title { font-weight: 700; color: #fff; margin-bottom: 2px; }
+  .alert-body { font-size: 0.85rem; color: #94a3b8; }
+</style>