astro-component-kit 0.0.1 → 0.1.0

package/src/components/lib/sections/FeedbackShowcase.astro

@@ -0,0 +1,320 @@
+---
+// FeedbackShowcase.astro — Premium feedback category showcase with live preview
+interface Props {
+  title?: string;
+  subtitle?: string;
+}
+
+const { title = "Feedback", subtitle = "Badges, alerts, and notification components." } = Astro.props;
+---
+
+<section class="feedback-showcase">
+  <div class="container">
+    <div class="showcase-header">
+      <span class="showcase-eyebrow">&#128172; Feedback</span>
+      <h2 class="showcase-title">{title}</h2>
+      <p class="showcase-subtitle">{subtitle}</p>
+    </div>
+
+    <div class="preview-stage">
+      <div class="preview-stage__inner">
+        <div class="feedback-stack">
+
+          <!-- Alert Banner: Success -->
+          <div class="alert alert--success">
+            <span class="alert__icon">&#9989;</span>
+            <span class="alert__message">Changes saved successfully.</span>
+            <span class="alert__dismiss">&times;</span>
+          </div>
+
+          <!-- Alert Banner: Warning -->
+          <div class="alert alert--warning">
+            <span class="alert__icon">&#9888;&#65039;</span>
+            <span class="alert__message">Your session expires in 5 minutes.</span>
+            <span class="alert__dismiss">&times;</span>
+          </div>
+
+          <!-- Badge / Pill -->
+          <div class="badge-row">
+            <span class="badge badge--new">New</span>
+            <span class="badge badge--beta">Beta</span>
+            <span class="badge badge--count">3</span>
+          </div>
+
+          <!-- Toast Notification -->
+          <div class="toast">
+            <span class="toast__icon">&#128276;</span>
+            <div class="toast__content">
+              <span class="toast__title">New message</span>
+              <span class="toast__body">Hey! Can you review the latest PR?</span>
+            </div>
+            <span class="toast__dismiss">&times;</span>
+          </div>
+
+          <!-- Spinner / Loading Indicator -->
+          <div class="spinner-row">
+            <div class="spinner"></div>
+            <span class="spinner__label">Loading...</span>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <div class="usage-code">
+      <code>&lt;Alert variant="success"&gt;Changes saved successfully.&lt;/Alert&gt;</code>
+    </div>
+  </div>
+</section>
+
+<style>
+  .feedback-showcase {
+    padding: var(--sp-16) 0;
+    position: relative;
+  }
+  .showcase-header {
+    text-align: center;
+    margin-bottom: var(--sp-10);
+  }
+  .showcase-eyebrow {
+    display: inline-block;
+    padding: 0.35rem 0.8rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--c-primary-light);
+    background: rgba(184,134,11,0.1);
+    border: 1px solid rgba(184,134,11,0.25);
+    border-radius: var(--r-full);
+    margin-bottom: var(--sp-4);
+  }
+  .showcase-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 800;
+    color: var(--c-text-1);
+    margin-bottom: var(--sp-3);
+  }
+  .showcase-subtitle {
+    font-size: 1.05rem;
+    color: var(--c-text-2);
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  /* Preview Stage */
+  .preview-stage {
+    padding: var(--sp-12);
+    background: rgba(10, 10, 10, 0.6);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-xl);
+    margin-bottom: var(--sp-6);
+    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+  }
+  .preview-stage__inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 340px;
+  }
+  .feedback-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--sp-5);
+    width: 100%;
+    max-width: 480px;
+  }
+
+  /* Alert Styles */
+  .alert {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    width: 100%;
+    padding: 0.85rem 1rem;
+    font-size: 0.9rem;
+    font-family: var(--font-sans);
+    border-radius: var(--r-md);
+    border: 1px solid transparent;
+    animation: fadeSlideIn 0.5s ease both;
+  }
+  .alert:nth-child(2) { animation-delay: 0.15s; }
+  .alert__icon {
+    font-size: 1.1rem;
+    flex-shrink: 0;
+  }
+  .alert__message {
+    flex: 1;
+    color: var(--c-text-1);
+  }
+  .alert__dismiss {
+    font-size: 1.2rem;
+    color: var(--c-text-2);
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.2s ease;
+    flex-shrink: 0;
+    line-height: 1;
+  }
+  .alert__dismiss:hover {
+    opacity: 1;
+  }
+  .alert--success {
+    background: rgba(34,197,94,0.1);
+    border-color: rgba(34,197,94,0.25);
+    color: #22c55e;
+  }
+  .alert--warning {
+    background: rgba(245,158,11,0.1);
+    border-color: rgba(245,158,11,0.25);
+    color: #f59e0b;
+  }
+
+  /* Badge Styles */
+  .badge-row {
+    display: flex;
+    gap: var(--sp-3);
+    align-items: center;
+    animation: fadeSlideIn 0.5s ease 0.3s both;
+  }
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.3rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    font-family: var(--font-sans);
+    border-radius: var(--r-full);
+    white-space: nowrap;
+  }
+  .badge--new {
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+    color: #0a0a0a;
+    box-shadow: 0 2px 10px rgba(184,134,11,0.25);
+  }
+  .badge--beta {
+    background: rgba(255,255,255,0.08);
+    color: var(--c-text-1);
+    border: 1px solid rgba(255,255,255,0.12);
+  }
+  .badge--count {
+    background: rgba(239,68,68,0.15);
+    color: #ef4444;
+    border: 1px solid rgba(239,68,68,0.3);
+    min-width: 1.5rem;
+    padding: 0.3rem 0.5rem;
+  }
+
+  /* Toast Notification */
+  .toast {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    width: 100%;
+    padding: 1rem;
+    background: rgba(255,255,255,0.06);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: var(--r-lg);
+    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
+    animation: fadeSlideIn 0.5s ease 0.45s both;
+  }
+  .toast__icon {
+    font-size: 1.3rem;
+    flex-shrink: 0;
+    margin-top: 0.1rem;
+  }
+  .toast__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    flex: 1;
+  }
+  .toast__title {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--c-text-1);
+    font-family: var(--font-sans);
+  }
+  .toast__body {
+    font-size: 0.8rem;
+    color: var(--c-text-2);
+    font-family: var(--font-sans);
+    line-height: 1.4;
+  }
+  .toast__dismiss {
+    font-size: 1.1rem;
+    color: var(--c-text-2);
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.2s ease;
+    flex-shrink: 0;
+    line-height: 1;
+  }
+  .toast__dismiss:hover {
+    opacity: 1;
+  }
+
+  /* Spinner */
+  .spinner-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    animation: fadeSlideIn 0.5s ease 0.6s both;
+  }
+  .spinner {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 2px solid rgba(184,134,11,0.2);
+    border-top-color: var(--c-primary-light);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  .spinner__label {
+    font-size: 0.85rem;
+    color: var(--c-text-2);
+    font-family: var(--font-sans);
+  }
+
+  /* Animations */
+  @keyframes fadeSlideIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Usage Code */
+  .usage-code {
+    text-align: center;
+    padding: var(--sp-4);
+    background: rgba(255,255,255,0.02);
+    border-radius: var(--r-md);
+  }
+  .usage-code code {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--c-primary-light);
+  }
+
+  @media (max-width: 640px) {
+    .feedback-stack { max-width: 100%; gap: var(--sp-4); }
+    .preview-stage { padding: var(--sp-8) var(--sp-4); }
+    .preview-stage__inner { min-height: auto; }
+    .alert { font-size: 0.85rem; padding: 0.75rem 0.8rem; }
+    .toast { padding: 0.85rem; }
+    .badge { font-size: 0.7rem; padding: 0.25rem 0.6rem; }
+  }
+</style>

package/src/components/lib/sections/FormsShowcase.astro

@@ -0,0 +1,347 @@
+---
+// FormsShowcase.astro — Premium forms section with live preview
+interface Props {
+  title?: string;
+  subtitle?: string;
+}
+
+const { title = "Forms", subtitle = "Form elements with clean animations and validation states." } = Astro.props;
+---
+
+<section class="forms-showcase">
+  <div class="container">
+    <div class="showcase-header">
+      <span class="showcase-eyebrow">📝 Forms</span>
+      <h2 class="showcase-title">{title}</h2>
+      <p class="showcase-subtitle">{subtitle}</p>
+    </div>
+
+    <div class="preview-stage">
+      <div class="preview-stage__inner">
+        <div class="form-grid">
+          <!-- Animated Input -->
+          <div class="form-group">
+            <div class="input-wrapper">
+              <input type="text" class="input-animated" placeholder=" " readonly />
+              <label class="input-label">Email address</label>
+              <span class="input-border"></span>
+            </div>
+          </div>
+
+          <!-- Glass Textarea -->
+          <div class="form-group">
+            <div class="textarea-glass">
+              <span class="textarea-label">Message</span>
+              <div class="textarea-mockup">
+                <span class="textarea-line"></span>
+                <span class="textarea-line short"></span>
+                <span class="textarea-line"></span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Custom Checkbox & Toggle -->
+          <div class="form-group form-group--controls">
+            <div class="checkbox-mockup">
+              <div class="checkbox-box">
+                <svg class="checkbox-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+              </div>
+              <span class="checkbox-label">Accept terms</span>
+            </div>
+            <div class="toggle-mockup">
+              <div class="toggle-track">
+                <div class="toggle-thumb"></div>
+              </div>
+              <span class="toggle-label">Dark mode</span>
+            </div>
+          </div>
+
+          <!-- Select Dropdown -->
+          <div class="form-group">
+            <div class="select-mockup">
+              <span class="select-label">Category</span>
+              <div class="select-display">
+                <span class="select-value">Select option...</span>
+                <svg class="select-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="usage-code">
+      <code>&lt;GlassInput type="email" label="Email" /&gt;</code>
+    </div>
+  </div>
+</section>
+
+<style>
+  .forms-showcase {
+    padding: var(--sp-16) 0;
+    position: relative;
+  }
+  .showcase-header {
+    text-align: center;
+    margin-bottom: var(--sp-10);
+  }
+  .showcase-eyebrow {
+    display: inline-block;
+    padding: 0.35rem 0.8rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--c-primary-light);
+    background: rgba(184,134,11,0.1);
+    border: 1px solid rgba(184,134,11,0.25);
+    border-radius: var(--r-full);
+    margin-bottom: var(--sp-4);
+  }
+  .showcase-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 800;
+    color: var(--c-text-1);
+    margin-bottom: var(--sp-3);
+  }
+  .showcase-subtitle {
+    font-size: 1.05rem;
+    color: var(--c-text-2);
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  /* Preview Stage */
+  .preview-stage {
+    padding: var(--sp-12);
+    background: rgba(10, 10, 10, 0.6);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-xl);
+    margin-bottom: var(--sp-6);
+    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+  }
+  .preview-stage__inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 320px;
+  }
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--sp-6);
+    width: 100%;
+    max-width: 600px;
+  }
+
+  /* Animated Input */
+  .input-wrapper {
+    position: relative;
+  }
+  .input-animated {
+    width: 100%;
+    padding: 1rem 1rem 0.75rem;
+    font-size: 0.9rem;
+    font-family: var(--font-sans);
+    color: var(--c-text-1);
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: var(--r-md);
+    outline: none;
+    transition: all 0.3s ease;
+  }
+  .input-label {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.9rem;
+    color: var(--c-text-2);
+    pointer-events: none;
+    transition: all 0.25s ease;
+    opacity: 0.6;
+  }
+  .input-animated:not(:placeholder-shown) ~ .input-label,
+  .input-animated:focus ~ .input-label {
+    top: 0.5rem;
+    font-size: 0.7rem;
+    color: var(--c-primary-light);
+    opacity: 1;
+  }
+  .input-border {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(90deg, var(--c-primary-light), var(--c-primary));
+    border-radius: var(--r-md);
+    transition: all 0.3s ease;
+    transform: translateX(-50%);
+  }
+  .input-animated:focus ~ .input-border,
+  .input-wrapper:hover .input-border {
+    width: calc(100% - 2rem);
+  }
+
+  /* Glass Textarea */
+  .textarea-glass {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .textarea-label {
+    font-size: 0.85rem;
+    color: var(--c-text-2);
+    font-weight: 500;
+  }
+  .textarea-mockup {
+    padding: 0.85rem 1rem;
+    background: rgba(255,255,255,0.04);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: var(--r-md);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-height: 80px;
+  }
+  .textarea-line {
+    height: 8px;
+    background: rgba(255,255,255,0.12);
+    border-radius: var(--r-sm);
+    width: 100%;
+  }
+  .textarea-line.short {
+    width: 60%;
+  }
+
+  /* Checkbox & Toggle */
+  .form-group--controls {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-4);
+    justify-content: center;
+  }
+  .checkbox-mockup {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+  }
+  .checkbox-box {
+    width: 22px;
+    height: 22px;
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+    border-radius: var(--r-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(184,134,11,0.3);
+  }
+  .checkbox-check {
+    width: 14px;
+    height: 14px;
+    color: #0a0a0a;
+  }
+  .checkbox-label {
+    font-size: 0.85rem;
+    color: var(--c-text-2);
+  }
+
+  .toggle-mockup {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+  }
+  .toggle-track {
+    width: 44px;
+    height: 24px;
+    background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: var(--r-full);
+    position: relative;
+  }
+  .toggle-thumb {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 18px;
+    height: 18px;
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+    border-radius: 50%;
+    box-shadow: 0 2px 6px rgba(184,134,11,0.4);
+    transition: all 0.25s ease;
+  }
+  .toggle-label {
+    font-size: 0.85rem;
+    color: var(--c-text-2);
+  }
+
+  /* Select Dropdown */
+  .select-mockup {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .select-label {
+    font-size: 0.85rem;
+    color: var(--c-text-2);
+    font-weight: 500;
+  }
+  .select-display {
+    padding: 0.85rem 1rem;
+    background: rgba(255,255,255,0.04);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: var(--r-md);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    transition: all 0.25s ease;
+  }
+  .select-display:hover {
+    border-color: rgba(184,134,11,0.3);
+    background: rgba(255,255,255,0.06);
+  }
+  .select-value {
+    font-size: 0.9rem;
+    color: var(--c-text-2);
+  }
+  .select-chevron {
+    width: 18px;
+    height: 18px;
+    color: var(--c-text-2);
+    opacity: 0.6;
+  }
+
+  .usage-code {
+    text-align: center;
+    padding: var(--sp-4);
+    background: rgba(255,255,255,0.02);
+    border-radius: var(--r-md);
+  }
+  .usage-code code {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--c-primary-light);
+  }
+
+  @media (max-width: 640px) {
+    .form-grid {
+      grid-template-columns: 1fr;
+      gap: var(--sp-4);
+    }
+    .preview-stage {
+      padding: var(--sp-8) var(--sp-4);
+    }
+    .preview-stage__inner {
+      min-height: auto;
+    }
+  }
+</style>