astro-component-kit 0.0.1

package/dist/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/dist/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/dist/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/dist/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>

package/dist/feedback/GlassModal.astro

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

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

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

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

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

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

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

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

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

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

package/dist/feedback/StepProgress.astro

@@ -0,0 +1,14 @@
+---
+---
+<div class="steps">
+  <div class="step active">1<span>Details</span></div>
+  <div class="step">2<span>Payment</span></div>
+  <div class="step">3<span>Finish</span></div>
+</div>
+<style>
+  .steps { display: flex; justify-content: space-between; position: relative; margin-bottom: 2rem; }
+  .steps::before { content: ""; position: absolute; top: 15px; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.05); z-index: -1; }
+  .step { width: 32px; height: 32px; border-radius: 50%; background: #1e293b; color: #64748b; border: 2px solid rgba(255,255,255,0.1); display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; position: relative; }
+  .step.active { background: #6366f1; border-color: #6366f1; color: #fff; box-shadow: 0 0 15px rgba(99,102,241,0.4); }
+  .step span { position: absolute; top: 100%; margin-top: 8px; font-size: 0.65rem; white-space: nowrap; color: inherit; }
+</style>

package/dist/feedback/ToastNotif.astro

@@ -0,0 +1,11 @@
+---
+---
+<div class="toast show">
+  <span class="icon">✅</span>
+  <span>Settings saved successfully!</span>
+</div>
+<style>
+  .toast { position: fixed; bottom: 2rem; right: 2rem; background: #111; color: #fff; padding: 1rem 1.5rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 0.8rem; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transform: translateY(100px); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1000; }
+  .toast.show { transform: translateY(0); }
+  .icon { background: rgba(52,211,153,0.1); padding: 4px; border-radius: 6px; }
+</style>

package/dist/feedback/TypingIndicator.astro

@@ -0,0 +1,12 @@
+---
+---
+<div class="typing">
+  <span></span><span></span><span></span>
+</div>
+<style>
+  .typing { display: flex; gap: 4px; padding: 10px 15px; background: rgba(255,255,255,0.05); border-radius: 15px; width: fit-content; }
+  .typing span { width: 6px; height: 6px; background: #64748b; border-radius: 50%; animation: type 1s infinite alternate; }
+  .typing span:nth-child(2) { animation-delay: 0.2s; }
+  .typing span:nth-child(3) { animation-delay: 0.4s; }
+  @keyframes type { to { transform: translateY(-5px); background: #6366f1; } }
+</style>

package/dist/feedback/index.mjs

@@ -0,0 +1,20 @@
+export { default as AnimatedCheckmark } from './AnimatedCheckmark.astro';
+export { default as Badge } from './Badge.astro';
+export { default as CircleProgress } from './CircleProgress.astro';
+export { default as ConfettiFeedback } from './ConfettiFeedback.astro';
+export { default as CyberGlitchAlert } from './CyberGlitchAlert.astro';
+export { default as EmptyStateCard } from './EmptyStateCard.astro';
+export { default as GlassAlert } from './GlassAlert.astro';
+export { default as GlassModal } from './GlassModal.astro';
+export { default as GlassProgress } from './GlassProgress.astro';
+export { default as IndicatorBadgeMinimal } from './IndicatorBadgeMinimal.astro';
+export { default as NeonSpinner } from './NeonSpinner.astro';
+export { default as PulseDot } from './PulseDot.astro';
+export { default as RatingPill } from './RatingPill.astro';
+export { default as ShakeErrorGroup } from './ShakeErrorGroup.astro';
+export { default as SimpleTooltip } from './SimpleTooltip.astro';
+export { default as SkeletonList } from './SkeletonList.astro';
+export { default as Spotlight } from './Spotlight.astro';
+export { default as StepProgress } from './StepProgress.astro';
+export { default as ToastNotif } from './ToastNotif.astro';
+export { default as TypingIndicator } from './TypingIndicator.astro';

package/dist/feedback/index.ts

@@ -0,0 +1,20 @@
+export { default as AnimatedCheckmark } from './AnimatedCheckmark.astro';
+export { default as Badge } from './Badge.astro';
+export { default as CircleProgress } from './CircleProgress.astro';
+export { default as ConfettiFeedback } from './ConfettiFeedback.astro';
+export { default as CyberGlitchAlert } from './CyberGlitchAlert.astro';
+export { default as EmptyStateCard } from './EmptyStateCard.astro';
+export { default as GlassAlert } from './GlassAlert.astro';
+export { default as GlassModal } from './GlassModal.astro';
+export { default as GlassProgress } from './GlassProgress.astro';
+export { default as IndicatorBadgeMinimal } from './IndicatorBadgeMinimal.astro';
+export { default as NeonSpinner } from './NeonSpinner.astro';
+export { default as PulseDot } from './PulseDot.astro';
+export { default as RatingPill } from './RatingPill.astro';
+export { default as ShakeErrorGroup } from './ShakeErrorGroup.astro';
+export { default as SimpleTooltip } from './SimpleTooltip.astro';
+export { default as SkeletonList } from './SkeletonList.astro';
+export { default as Spotlight } from './Spotlight.astro';
+export { default as StepProgress } from './StepProgress.astro';
+export { default as ToastNotif } from './ToastNotif.astro';
+export { default as TypingIndicator } from './TypingIndicator.astro';

package/dist/forms/AnimatedInput.astro

@@ -0,0 +1,16 @@
+---
+interface Props { label: string; id: string; type?: string; placeholder?: string; required?: boolean; name?: string; }
+const { label, id, type = 'text', placeholder = ' ', required = false, name } = Astro.props;
+---
+<div class="anim-input-wrap">
+  <input {id} {name} {type} {placeholder} {required} class="anim-input" autocomplete="off" />
+  <label for={id} class="anim-input-label">{label}</label>
+</div>
+<style>
+  .anim-input-wrap { position: relative; width: 100%; }
+  .anim-input { width: 100%; padding: 1.1rem 1rem 0.5rem; font-family: inherit; font-size: 0.95rem; color: #e2e8f0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; outline: none; box-sizing: border-box; transition: border-color 0.25s ease, background 0.25s ease; }
+  .anim-input::placeholder { color: transparent; }
+  .anim-input:focus { background: rgba(99, 102, 241, 0.06); border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
+  .anim-input-label { position: absolute; top: 0.9rem; left: 1rem; font-size: 0.9rem; color: #64748b; pointer-events: none; transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease; }
+  .anim-input:focus ~ .anim-input-label, .anim-input:not(:placeholder-shown) ~ .anim-input-label { top: 0.28rem; font-size: 0.68rem; color: #818cf8; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
+</style>

package/dist/forms/ChipInput.astro

@@ -0,0 +1,13 @@
+---
+---
+<div class="chip-input">
+  <span class="chip">Astro <button>×</button></span>
+  <span class="chip">UI <button>×</button></span>
+  <input type="text" placeholder="Add tag..." />
+</div>
+<style>
+  .chip-input { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; background: rgba(0,0,0,0.1); border: 1px solid var(--c-border); border-radius: 10px; }
+  .chip { background: #6366f1; color: #fff; padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.8rem; display: flex; align-items: center; gap: 0.4rem; }
+  .chip button { background: none; border: none; color: #fff; cursor: pointer; font-size: 1rem; }
+  .chip-input input { background: none; border: none; outline: none; color: #fff; flex: 1; padding: 0.2rem; }
+</style>

package/dist/forms/ColorPickerInput.astro

@@ -0,0 +1,13 @@
+---
+---
+<div class="color-picker-wrap">
+  <input type="color" class="color-input" id="picker" value="#6366f1" />
+  <label for="picker">Primary Accent</label>
+</div>
+<style>
+  .color-picker-wrap { display: flex; align-items: center; gap: 1rem; }
+  .color-input { -webkit-appearance: none; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; background: transparent; }
+  .color-input::-webkit-color-swatch-wrapper { padding: 0; }
+  .color-input::-webkit-color-swatch { border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; }
+  label { font-size: 0.9rem; color: #e2e8f0; font-weight: 500; }
+</style>

package/dist/forms/CurrencyInput.astro

@@ -0,0 +1,11 @@
+---
+---
+<div class="curr-wrap">
+  <span class="symbol">$</span>
+  <input type="number" step="0.01" value="0.00" />
+</div>
+<style>
+  .curr-wrap { display: flex; align-items: center; background: rgba(255,255,255,0.05); border-radius: 10px; border: 1px solid var(--c-border); overflow: hidden; }
+  .symbol { padding: 0.8rem; background: rgba(255,255,255,0.05); color: #94a3b8; font-weight: 700; }
+  .curr-wrap input { background: none; border: none; padding: 0.8rem; color: #fff; font-size: 1.1rem; width: 100%; outline: none; }
+</style>

package/dist/forms/CustomRadioGroup.astro

@@ -0,0 +1,13 @@
+---
+---
+<div class="radio-group">
+  <label class="radio-item"><input type="radio" name="opt" checked /><span>Option A</span></label>
+  <label class="radio-item"><input type="radio" name="opt" /><span>Option B</span></label>
+</div>
+<style>
+  .radio-group { display: flex; flex-direction: column; gap: 0.8rem; }
+  .radio-item { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; color: #94a3b8; }
+  .radio-item input { appearance: none; width: 20px; height: 20px; border: 2px solid #6366f1; border-radius: 50%; position: relative; cursor: pointer; }
+  .radio-item input:checked::after { content: ''; position: absolute; inset: 4px; background: #6366f1; border-radius: 50%; }
+  .radio-item input:checked + span { color: #fff; font-weight: 600; }
+</style>

package/dist/forms/CyberpunkCheckbox.astro

@@ -0,0 +1,15 @@
+---
+---
+<label class="cyber-check">
+  <input type="checkbox" />
+  <span class="checkmark"></span>
+  <slot />
+</label>
+<style>
+  .cyber-check { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; color: #00e0ff; font-family: monospace; font-weight: 700; text-transform: uppercase; }
+  .cyber-check input { display: none; }
+  .checkmark { width: 18px; height: 18px; border: 2px solid #ff003c; position: relative; transition: 0.2s; }
+  .cyber-check input:checked + .checkmark { background: #ff003c; box-shadow: 0 0 10px #ff003c; }
+  .checkmark::after { content: ''; position: absolute; display: none; left: 5px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
+  .cyber-check input:checked + .checkmark::after { display: block; }
+</style>

package/dist/forms/DragDropUpload.astro

@@ -0,0 +1,12 @@
+---
+---
+<div class="upload-zone">
+  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+  <p>Drag files here or <span>browse</span></p>
+  <input type="file" hidden />
+</div>
+<style>
+  .upload-zone { border: 2px dashed rgba(255,255,255,0.1); border-radius: 20px; padding: 3rem; text-align: center; background: rgba(255,255,255,0.02); cursor: pointer; transition: 0.3s; color: #94a3b8; }
+  .upload-zone:hover { border-color: #6366f1; background: rgba(99, 102, 241, 0.05); color: #fff; }
+  .upload-zone span { color: #6366f1; font-weight: 600; text-decoration: underline; }
+</style>

package/dist/forms/ErrorInput.astro

@@ -0,0 +1,11 @@
+---
+---
+<div class="error-wrap">
+  <input type="text" class="input-error" value="invalid-email" />
+  <span class="error-msg">Please enter a valid email address</span>
+</div>
+<style>
+  .error-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
+  .input-error { border: 1px solid #ef4444 !important; background: rgba(239, 68, 68, 0.05) !important; padding: 0.8rem; color: #fff; border-radius: 10px; outline: none; }
+  .error-msg { font-size: 0.75rem; color: #f87171; font-weight: 500; }
+</style>

package/dist/forms/FloatingPassword.astro

@@ -0,0 +1,20 @@
+---
+---
+<div class="pass-wrap">
+  <input type="password" id="pass" placeholder="Password" />
+  <button type="button" id="toggle-pass">👁️</button>
+</div>
+<style>
+  .pass-wrap { position: relative; width: 100%; }
+  .pass-wrap input { width: 100%; padding: 0.8rem 3rem 0.8rem 1rem; background: rgba(0,0,0,0.2); border: 1px solid var(--c-border); border-radius: 10px; color: #fff; outline: none; }
+  #toggle-pass { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; opacity: 0.5; }
+</style>
+<script>
+  const btn = document.getElementById('toggle-pass');
+  const pass = document.getElementById('pass') as HTMLInputElement;
+  btn?.addEventListener('click', () => {
+    const isPass = pass.type === 'password';
+    pass.type = isPass ? 'text' : 'password';
+    btn.textContent = isPass ? '🙈' : '👁️';
+  });
+</script>

package/dist/forms/FormGroupVertical.astro

@@ -0,0 +1,14 @@
+---
+---
+<div class="form-group">
+  <label>Company Name</label>
+  <input type="text" placeholder="e.g. Acme Corp" />
+  <p class="help-text">Visible on your public profile.</p>
+</div>
+<style>
+  .form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
+  label { font-size: 0.82rem; font-weight: 700; color: #e2e8f0; text-transform: uppercase; letter-spacing: 0.05em; }
+  input { background: #0f172a; border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 0.8rem; border-radius: 8px; outline: none; }
+  input:focus { border-color: #6366f1; }
+  .help-text { font-size: 0.75rem; color: #64748b; }
+</style>

package/dist/forms/GlassSlider.astro

@@ -0,0 +1,7 @@
+---
+---
+<input type="range" class="glass-slider" min="0" max="100" />
+<style>
+  .glass-slider { -webkit-appearance: none; width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 5px; outline: none; backdrop-filter: blur(5px); }
+  .glass-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #6366f1; cursor: pointer; border: 2px solid rgba(255,255,255,0.5); box-shadow: 0 0 10px rgba(99,102,241,0.5); }
+</style>

package/dist/forms/GlassTextarea.astro

@@ -0,0 +1,14 @@
+---
+interface Props { label: string; id: string; rows?: number; }
+const { label, id, rows = 4 } = Astro.props;
+---
+<div class="glass-textarea-wrap">
+  <label for={id} class="glass-label">{label}</label>
+  <textarea {id} {rows} class="glass-textarea" placeholder="Start typing..."></textarea>
+</div>
+<style>
+  .glass-textarea-wrap { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
+  .glass-label { font-size: 0.85rem; font-weight: 600; color: #94a3b8; margin-left: 0.5rem; }
+  .glass-textarea { width: 100%; padding: 1rem; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; color: #fff; font-family: inherit; font-size: 0.9rem; outline: none; transition: 0.3s; resize: vertical; }
+  .glass-textarea:focus { border-color: rgba(99, 102, 241, 0.4); background: rgba(255, 255, 255, 0.06); }
+</style>

package/dist/forms/ModernSelect.astro

@@ -0,0 +1,16 @@
+---
+---
+<div class="select-wrap">
+  <select class="custom-select">
+    <option>Select Option</option>
+    <option>Product Design</option>
+    <option>Web Development</option>
+    <option>Mobile Apps</option>
+  </select>
+  <div class="select-arrow"></div>
+</div>
+<style>
+  .select-wrap { position: relative; width: 100%; }
+  .custom-select { width: 100%; padding: 0.8rem 1rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; color: #fff; appearance: none; cursor: pointer; outline: none; }
+  .select-arrow { position: absolute; top: 18px; right: 15px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #64748b; pointer-events: none; }
+</style>

package/dist/forms/NeumorphicSwitch.astro

@@ -0,0 +1,55 @@
+---
+---
+<label class="neu-switch">
+  <input type="checkbox" />
+  <span class="slider"></span>
+</label>
+<style>
+  .neu-switch {
+    position: relative;
+    display: inline-block;
+    width: 56px;
+    height: 30px;
+  }
+  .neu-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    inset: 0;
+    background: #1a1f2e;
+    transition: 0.4s;
+    border-radius: 34px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow:
+      inset 2px 2px 4px rgba(0, 0, 0, 0.4),
+      inset -2px -2px 4px rgba(255, 255, 255, 0.03);
+  }
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 22px;
+    width: 22px;
+    left: 3px;
+    top: 3px;
+    background: #4b5563;
+    transition: 0.4s;
+    border-radius: 50%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+  input:checked + .slider {
+    background: #1e2433;
+    box-shadow:
+      inset 2px 2px 4px rgba(0, 0, 0, 0.5),
+      inset -2px -2px 4px rgba(255, 255, 255, 0.02);
+  }
+  input:checked + .slider:before {
+    transform: translateX(26px);
+    background: #818cf8;
+    box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
+  }
+</style>
+

package/dist/forms/OTPInput.astro

@@ -0,0 +1,22 @@
+---
+---
+<div class="otp-wrap">
+  <input type="text" maxlength="1" />
+  <input type="text" maxlength="1" />
+  <input type="text" maxlength="1" />
+  <input type="text" maxlength="1" />
+</div>
+<style>
+  .otp-wrap { display: flex; gap: 0.75rem; justify-content: center; }
+  .otp-wrap input { width: 45px; height: 55px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; text-align: center; color: #fff; font-size: 1.5rem; font-weight: 700; outline: none; transition: 0.2s; }
+  .otp-wrap input:focus { border-color: #6366f1; background: rgba(99, 102, 241, 0.1); box-shadow: 0 0 15px rgba(99, 102, 241, 0.3); }
+</style>
+<script>
+  document.querySelectorAll('.otp-wrap input').forEach((input, idx, inputs) => {
+    input.addEventListener('input', () => { 
+      if ((input as HTMLInputElement).value && idx < inputs.length - 1) {
+        (inputs[idx+1] as HTMLInputElement).focus(); 
+      }
+    });
+  });
+</script>

package/dist/forms/RatingStars.astro

@@ -0,0 +1,15 @@
+---
+---
+<div class="rating">
+  <input type="radio" name="star" id="star5" /><label for="star5"></label>
+  <input type="radio" name="star" id="star4" /><label for="star4"></label>
+  <input type="radio" name="star" id="star3" /><label for="star3"></label>
+  <input type="radio" name="star" id="star2" /><label for="star2"></label>
+  <input type="radio" name="star" id="star1" /><label for="star1"></label>
+</div>
+<style>
+  .rating { display: flex; flex-direction: row-reverse; gap: 5px; }
+  .rating input { display: none; }
+  .rating label { width: 24px; height: 24px; background: #334155; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); cursor: pointer; transition: 0.2s; }
+  .rating label:hover, .rating label:hover ~ label, .rating input:checked ~ label { background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }
+</style>

package/dist/forms/SearchReveal.astro

@@ -0,0 +1,13 @@
+---
+---
+<div class="search-box">
+  <input type="text" placeholder="Search..." />
+  <button>🔍</button>
+</div>
+<style>
+  .search-box { position: relative; width: 40px; height: 40px; transition: 0.4s; }
+  .search-box:hover, .search-box:focus-within { width: 250px; }
+  .search-box input { width: 100%; height: 100%; background: #1e293b; border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; padding: 0 45px 0 20px; color: #fff; outline: none; opacity: 0; transition: 0.3s; }
+  .search-box:hover input, .search-box:focus-within input { opacity: 1; }
+  .search-box button { position: absolute; right: 0; width: 40px; height: 40px; background: #6366f1; border: none; border-radius: 50%; color: #fff; cursor: pointer; }
+</style>

package/dist/forms/SegmentedControl.astro

@@ -0,0 +1,13 @@
+---
+---
+<div class="segmented">
+  <input type="radio" name="seg" id="seg1" checked /><label for="seg1">Daily</label>
+  <input type="radio" name="seg" id="seg2" /><label for="seg2">Weekly</label>
+  <input type="radio" name="seg" id="seg3" /><label for="seg3">Monthly</label>
+</div>
+<style>
+  .segmented { display: flex; position: relative; background: rgba(255,255,255,0.05); padding: 4px; border-radius: 10px; width: fit-content; }
+  .segmented label { padding: 0.4rem 1.2rem; cursor: pointer; z-index: 1; font-size: 0.85rem; transition: 0.3s; color: #94a3b8; }
+  .segmented input { display: none; }
+  .segmented input:checked + label { color: #fff; font-weight: 600; background: rgba(99, 102, 241, 0.2); border-radius: 6px; }
+</style>

package/dist/forms/SimpleFileInput.astro

@@ -0,0 +1,11 @@
+---
+---
+<label class="file-btn">
+  <input type="file" />
+  <span>Upload Logo</span>
+</label>
+<style>
+  .file-btn { position: relative; overflow: hidden; display: inline-block; cursor: pointer; }
+  .file-btn input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; cursor: pointer; }
+  .file-btn span { background: #6366f1; color: #fff; padding: 0.7rem 1.5rem; border-radius: 8px; font-weight: 600; display: inline-block; }
+</style>