astro-component-kit 0.0.1 → 0.1.1

package/dist/data/DataChipsGroup.astro

@@ -1,16 +0,0 @@
----
----
-<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/dist/data/DescriptionListHoriz.astro

@@ -1,14 +0,0 @@
----
----
-<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/dist/data/FileTreeView.astro

@@ -1,22 +0,0 @@
----
----
-<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/dist/data/GanttChartMinimal.astro

@@ -1,12 +0,0 @@
----
----
-<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/dist/data/GlassTable.astro

@@ -1,23 +0,0 @@
----
----
-<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/dist/data/KeyValuePillGroup.astro

@@ -1,12 +0,0 @@
----
----
-<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/dist/data/PriceCompareTable.astro

@@ -1,22 +0,0 @@
----
----
-<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/dist/data/ProgressListSmall.astro

@@ -1,17 +0,0 @@
----
----
-<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/dist/data/RatingBreakdownBar.astro

@@ -1,13 +0,0 @@
----
----
-<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/dist/data/SparklineStatCard.astro

@@ -1,16 +0,0 @@
----
----
-<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/dist/data/StatsGridDashboard.astro

@@ -1,16 +0,0 @@
----
----
-<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/dist/data/StepperDataVertical.astro

@@ -1,15 +0,0 @@
----
----
-<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/dist/data/TagCloudData.astro

@@ -1,14 +0,0 @@
----
----
-<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/dist/data/TimelineHorizSteps.astro

@@ -1,18 +0,0 @@
----
----
-<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/dist/data/TreeItemInteractive.astro

@@ -1,18 +0,0 @@
----
----
-<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/dist/data/UserDirectoryItem.astro

@@ -1,15 +0,0 @@
----
----
-<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/dist/data/VerticalTimeline.astro

@@ -1,21 +0,0 @@
----
----
-<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/dist/data/index.mjs

@@ -1,20 +0,0 @@
-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/dist/data/index.ts

@@ -1,20 +0,0 @@
-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/dist/feedback/AnimatedCheckmark.astro

@@ -1,13 +0,0 @@
----
----
-<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/dist/feedback/Badge.astro

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

@@ -1,22 +0,0 @@
----
-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/dist/feedback/ConfettiFeedback.astro

@@ -1,18 +0,0 @@
----
----
-<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/dist/feedback/CyberGlitchAlert.astro

@@ -1,11 +0,0 @@
----
----
-<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/dist/feedback/EmptyStateCard.astro

@@ -1,13 +0,0 @@
----
----
-<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/dist/feedback/GlassAlert.astro

@@ -1,20 +0,0 @@
----
-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>

package/dist/feedback/GlassModal.astro

@@ -1,19 +0,0 @@
----
----
-<div class="modal-overlay">
-  <div class="modal-box anim-scale-up">
-    <div class="modal-header"><h3>Confirm Action</h3></div>
-    <div class="modal-body"><p>Are you sure you want to delete this resource? This cannot be undone.</p></div>
-    <div class="modal-footer"><button class="btn-sec">Cancel</button><button class="btn-pri">Confirm</button></div>
-  </div>
-</div>
-<style>
-  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 2000; }
-  .modal-box { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 2rem; width: 100%; max-width: 400px; box-shadow: 0 30px 100px rgba(0,0,0,0.5); }
-  .modal-header h3 { margin: 0; color: #fff; }
-  .modal-body p { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }
-  .modal-footer { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }
-  button { padding: 0.6rem 1.2rem; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; }
-  .btn-sec { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.1); }
-  .btn-pri { background: #6366f1; color: #fff; }
-</style>

package/dist/feedback/GlassProgress.astro

@@ -1,10 +0,0 @@
----
-interface Props { value: number; }
----
-<div class="progress-container">
-  <div class="progress-fill" style={`width: ${Astro.props.value}%`}></div>
-</div>
-<style>
-  .progress-container { height: 10px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
-  .progress-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #c084fc); border-radius: inherit; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 10px rgba(99,102,241,0.4); }
-</style>

package/dist/feedback/IndicatorBadgeMinimal.astro

@@ -1,10 +0,0 @@
----
----
-<div class="indicator-wrap">
-  <slot />
-  <span class="dot-indicator"></span>
-</div>
-<style>
-  .indicator-wrap { position: relative; width: fit-content; }
-  .dot-indicator { position: absolute; top: 0; right: 0; width: 10px; height: 10px; background: #6366f1; border: 2px solid #080b14; border-radius: 50%; }
-</style>

package/dist/feedback/NeonSpinner.astro

@@ -1,7 +0,0 @@
----
----
-<div class="neon-ring"></div>
-<style>
-  .neon-ring { width: 40px; height: 40px; border: 4px solid #111; border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s linear infinite; box-shadow: 0 0 10px rgba(99,102,241,0.5); }
-  @keyframes spin { to { transform: rotate(360deg); } }
-</style>

package/dist/feedback/PulseDot.astro

@@ -1,12 +0,0 @@
----
----
-<div class="status-wrap">
-  <div class="pulse-dot"></div>
-  <span>System Active</span>
-</div>
-<style>
-  .status-wrap { display: flex; align-items: center; gap: 0.6rem; color: #34d399; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; }
-  .pulse-dot { width: 8px; height: 8px; background: #34d399; border-radius: 50%; position: relative; }
-  .pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #34d399; animation: pulse 1.5s infinite; }
-  @keyframes pulse { 100% { opacity: 0; transform: scale(3.5); } }
-</style>

package/dist/feedback/RatingPill.astro

@@ -1,13 +0,0 @@
----
-interface Props { score: number; }
-const { score } = Astro.props;
----
-<div class:list={["rate-pill", { "high": score >= 4, "mid": score >= 3 && score < 4, "low": score < 3 }]}>
-  {score.toFixed(1)} ★
-</div>
-<style>
-  .rate-pill { padding: 4px 12px; border-radius: 100px; font-weight: 800; font-size: 0.75rem; color: #fff; width: fit-content; }
-  .high { background: #10b981; }
-  .mid { background: #f59e0b; }
-  .low { background: #ef4444; }
-</style>

package/dist/feedback/ShakeErrorGroup.astro

@@ -1,7 +0,0 @@
----
----
-<div class="shake-box error"><span>Invalid Credentials</span></div>
-<style>
-  .shake-box.error { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #f87171; padding: 1rem; border-radius: 10px; text-align: center; font-weight: 600; }
-  @keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
-</style>

package/dist/feedback/SimpleTooltip.astro

@@ -1,10 +0,0 @@
----
----
-<div class="tooltip-wrap" data-tip="Click to copy ID">
-  <slot />
-</div>
-<style>
-  .tooltip-wrap { position: relative; display: inline-block; cursor: help; }
-  .tooltip-wrap::after { content: attr(data-tip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); padding: 5px 10px; background: #111; color: #fff; font-size: 0.75rem; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: 0.2s; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 5px 15px rgba(0,0,0,0.4); }
-  .tooltip-wrap:hover::after { opacity: 1; bottom: 110%; }
-</style>

package/dist/feedback/SkeletonList.astro

@@ -1,20 +0,0 @@
----
----
-<div class="skeleton-list">
-  {[1,2,3].map(() => (
-    <div class="skel-item">
-      <div class="skel-avatar"></div>
-      <div class="skel-lines"><div></div><div></div></div>
-    </div>
-  ))}
-</div>
-<style>
-  .skel-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
-  .skel-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.05); }
-  .skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
-  .skel-lines div { height: 10px; background: rgba(255,255,255,0.05); border-radius: 5px; }
-  .skel-lines div:last-child { width: 60%; }
-  .skel-item div { position: relative; overflow: hidden; }
-  .skel-item div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent); animation: shimmer 1.5s infinite; }
-  @keyframes shimmer { 100% { transform: translateX(100%); } }
-</style>

package/dist/feedback/Spotlight.astro

@@ -1,9 +0,0 @@
----
----
-<div class="spotlight">
-  <div class="focused-content"><slot /></div>
-</div>
-<style>
-  .spotlight { position: relative; z-index: 100; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.7); }
-  .focused-content { background: #fff; border-radius: inherit; overflow: hidden; }
-</style>