astro-component-kit 0.0.1 → 0.1.0

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

@@ -0,0 +1,373 @@
+---
+// OverlaysShowcase.astro — Premium overlays section with live preview
+interface Props {
+  title?: string;
+  subtitle?: string;
+}
+
+const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astro.props;
+---
+
+<section class="overlays-showcase">
+  <div class="container">
+    <div class="showcase-header">
+      <span class="showcase-eyebrow">🪟 Overlays</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="overlay-demo">
+          <!-- Modal Dialog -->
+          <div class="overlay-modal">
+            <div class="overlay-backdrop"></div>
+            <div class="overlay-card">
+              <div class="overlay-card__header">
+                <span class="overlay-card__title">Confirm Action</span>
+                <button class="overlay-close" aria-label="Close">&times;</button>
+              </div>
+              <p class="overlay-card__body">Are you sure you want to proceed? This action cannot be undone.</p>
+              <div class="overlay-card__actions">
+                <button class="btn btn--ghost">Cancel</button>
+                <button class="btn btn--primary">Confirm</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Side Drawer -->
+          <div class="overlay-drawer">
+            <div class="drawer-backdrop"></div>
+            <div class="drawer-panel">
+              <div class="drawer-header">
+                <span class="drawer-title">Settings</span>
+                <button class="overlay-close" aria-label="Close">&times;</button>
+              </div>
+              <div class="drawer-body">
+                <div class="drawer-item">
+                  <span class="drawer-label">Theme</span>
+                  <span class="drawer-value">Dark</span>
+                </div>
+                <div class="drawer-item">
+                  <span class="drawer-label">Notifications</span>
+                  <span class="drawer-value">Enabled</span>
+                </div>
+                <div class="drawer-item">
+                  <span class="drawer-label">Language</span>
+                  <span class="drawer-value">English</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Popover -->
+          <div class="overlay-popover">
+            <div class="popover-target">Hover me</div>
+            <div class="popover-content">
+              <span class="popover-arrow"></span>
+              <p class="popover-text">This is a popover with additional context.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="usage-code">
+      <code>&lt;Overlay type="modal"&gt;Content&lt;/Overlay&gt;</code>
+    </div>
+  </div>
+</section>
+
+<style>
+  .overlays-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: 420px;
+    position: relative;
+  }
+
+  .overlay-demo {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 380px;
+  }
+
+  /* Modal Dialog */
+  .overlay-modal {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .overlay-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(6px);
+    border-radius: var(--r-lg);
+  }
+  .overlay-card {
+    position: relative;
+    z-index: 2;
+    width: 300px;
+    padding: var(--sp-6);
+    background: rgba(30, 30, 30, 0.9);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: var(--r-lg);
+    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
+    transform: scale(1) translateY(0);
+  }
+  .overlay-card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--sp-3);
+  }
+  .overlay-card__title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--c-text-1);
+  }
+  .overlay-close {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--c-text-2);
+    font-size: 1.2rem;
+    cursor: pointer;
+    border-radius: var(--r-sm);
+    transition: all 0.2s ease;
+  }
+  .overlay-close:hover {
+    background: rgba(255,255,255,0.1);
+    color: var(--c-text-1);
+  }
+  .overlay-card__body {
+    font-size: 0.9rem;
+    color: var(--c-text-2);
+    line-height: 1.5;
+    margin-bottom: var(--sp-5);
+  }
+  .overlay-card__actions {
+    display: flex;
+    gap: var(--sp-3);
+    justify-content: flex-end;
+  }
+
+  /* Side Drawer */
+  .overlay-drawer {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .drawer-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    border-radius: var(--r-lg);
+  }
+  .drawer-panel {
+    position: absolute;
+    right: var(--sp-4);
+    top: var(--sp-4);
+    bottom: var(--sp-4);
+    width: 200px;
+    background: rgba(25, 25, 25, 0.95);
+    backdrop-filter: blur(18px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-lg);
+    box-shadow: -12px 0 40px rgba(0,0,0,0.4);
+    transform: translateX(0);
+    padding: var(--sp-5);
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+  }
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--sp-4);
+  }
+  .drawer-title {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--c-text-1);
+  }
+  .drawer-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-4);
+  }
+  .drawer-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .drawer-label {
+    font-size: 0.8rem;
+    color: var(--c-text-2);
+  }
+  .drawer-value {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--c-primary-light);
+  }
+
+  /* Popover */
+  .overlay-popover {
+    position: absolute;
+    left: 50%;
+    bottom: var(--sp-8);
+    transform: translateX(-50%);
+  }
+  .popover-target {
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--c-text-2);
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: var(--r-md);
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  .popover-target:hover {
+    color: var(--c-text-1);
+    border-color: rgba(184,134,11,0.3);
+  }
+  .popover-content {
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: 50%;
+    transform: translateX(-50%);
+    width: 200px;
+    padding: var(--sp-3) var(--sp-4);
+    background: rgba(40, 40, 40, 0.95);
+    backdrop-filter: blur(14px);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: var(--r-md);
+    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
+  }
+  .popover-arrow {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 10px;
+    height: 10px;
+    background: rgba(40, 40, 40, 0.95);
+    border-right: 1px solid rgba(255,255,255,0.1);
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+    transform: translateX(-50%) rotate(45deg);
+  }
+  .popover-text {
+    font-size: 0.75rem;
+    color: var(--c-text-2);
+    line-height: 1.4;
+    margin: 0;
+    text-align: center;
+  }
+
+  /* Shared button styles reused from ButtonsShowcase */
+  .btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    font-family: var(--font-sans);
+    border: none;
+    border-radius: var(--r-md);
+    cursor: pointer;
+    transition: all 0.25s ease;
+  }
+  .btn--primary {
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+    color: #0a0a0a;
+    box-shadow: 0 4px 20px rgba(184,134,11,0.3);
+  }
+  .btn--primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(184,134,11,0.4);
+  }
+  .btn--ghost {
+    background: transparent;
+    color: var(--c-text-2);
+    border: 1px solid var(--c-border);
+  }
+  .btn--ghost:hover {
+    color: var(--c-text-1);
+    border-color: var(--c-primary-light);
+  }
+
+  .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) {
+    .preview-stage { padding: var(--sp-8) var(--sp-4); }
+    .overlay-card { width: 240px; padding: var(--sp-4); }
+    .drawer-panel { width: 160px; right: var(--sp-2); }
+    .popover-content { width: 160px; }
+    .overlay-demo { min-height: 340px; }
+  }
+</style>

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

@@ -0,0 +1,239 @@
+---
+// TypographyShowcase.astro — Premium typography section with live preview
+interface Props {
+  title?: string;
+  subtitle?: string;
+}
+
+const { title = "Typography", subtitle = "Headings and text patterns." } = Astro.props;
+---
+
+<section class="typography-showcase">
+  <div class="container">
+    <div class="showcase-header">
+      <span class="showcase-eyebrow">✍️ Typography</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="typo-stack">
+          <!-- Gradient Heading Mockup -->
+          <div class="typo-mockup typo-mockup--gradient">
+            <h3 class="gradient-heading">Premium Design System</h3>
+          </div>
+
+          <!-- Blockquote Mockup -->
+          <div class="typo-mockup typo-mockup--blockquote">
+            <blockquote class="blockquote">
+              <p>Great design is invisible. It simply feels right.</p>
+              <cite>— Design Philosophy</cite>
+            </blockquote>
+          </div>
+
+          <!-- Animated Text Reveal Mockup -->
+          <div class="typo-mockup typo-mockup--reveal">
+            <span class="text-reveal">Shimmer Reveal Effect</span>
+          </div>
+
+          <!-- Link Styles Mockup -->
+          <div class="typo-mockup typo-mockup--links">
+            <div class="link-group">
+              <a href="#" class="styled-link">Hover Underline</a>
+              <a href="#" class="styled-link">Animated Link</a>
+              <a href="#" class="styled-link">Gold Accent</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="usage-code">
+      <code>&lt;Typography variant="heading" size="xl"&gt;Premium Design&lt;/Typography&gt;</code>
+    </div>
+  </div>
+</section>
+
+<style>
+  .typography-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: 200px;
+  }
+  .typo-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-8);
+    width: 100%;
+    max-width: 600px;
+  }
+
+  /* Typography Mockups */
+  .typo-mockup {
+    padding: var(--sp-6);
+    background: rgba(255,255,255,0.02);
+    border-radius: var(--r-md);
+    border: 1px solid rgba(255,255,255,0.05);
+  }
+
+  /* Gradient Heading */
+  .gradient-heading {
+    font-size: clamp(1.8rem, 4vw, 2.8rem);
+    font-weight: 800;
+    font-family: var(--font-sans);
+    margin: 0;
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary), #d4a017);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    line-height: 1.2;
+  }
+
+  /* Blockquote */
+  .blockquote {
+    margin: 0;
+    padding-left: var(--sp-5);
+    border-left: 3px solid var(--c-primary);
+    font-family: var(--font-sans);
+  }
+  .blockquote p {
+    font-size: 1.15rem;
+    font-style: italic;
+    color: var(--c-text-1);
+    margin: 0 0 var(--sp-2) 0;
+    line-height: 1.6;
+  }
+  .blockquote cite {
+    font-size: 0.85rem;
+    font-style: normal;
+    color: var(--c-text-2);
+    font-weight: 500;
+    letter-spacing: 0.02em;
+  }
+
+  /* Animated Text Reveal */
+  .text-reveal {
+    font-size: clamp(1.4rem, 3vw, 2rem);
+    font-weight: 700;
+    font-family: var(--font-sans);
+    background: linear-gradient(
+      110deg,
+      var(--c-text-1) 0%,
+      var(--c-text-1) 40%,
+      var(--c-primary-light) 50%,
+      var(--c-text-1) 60%,
+      var(--c-text-1) 100%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: textShimmer 3.5s linear infinite;
+  }
+  @keyframes textShimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  /* Link Styles */
+  .link-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sp-4);
+    align-items: center;
+  }
+  .styled-link {
+    font-size: 1rem;
+    font-weight: 500;
+    font-family: var(--font-sans);
+    color: var(--c-text-1);
+    text-decoration: none;
+    position: relative;
+    padding-bottom: 2px;
+    transition: color 0.25s ease;
+  }
+  .styled-link::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: var(--c-primary);
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.35s ease;
+  }
+  .styled-link:hover {
+    color: var(--c-primary-light);
+  }
+  .styled-link:hover::after {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+
+  .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) {
+    .typo-stack { gap: var(--sp-5); }
+    .typo-mockup { padding: var(--sp-4); }
+    .preview-stage { padding: var(--sp-8) var(--sp-4); }
+    .link-group { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
+  }
+</style>

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

@@ -0,0 +1,9 @@
+export { default as ButtonsShowcase } from './ButtonsShowcase.astro';
+export { default as FormsShowcase } from './FormsShowcase.astro';
+export { default as CardsShowcase } from './CardsShowcase.astro';
+export { default as FeedbackShowcase } from './FeedbackShowcase.astro';
+export { default as NavigationShowcase } from './NavigationShowcase.astro';
+export { default as LayoutShowcase } from './LayoutShowcase.astro';
+export { default as OverlaysShowcase } from './OverlaysShowcase.astro';
+export { default as DataShowcase } from './DataShowcase.astro';
+export { default as TypographyShowcase } from './TypographyShowcase.astro';

package/src/components/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="astro/astro-jsx" />
+
+declare module '*.astro' {
+  const component: any;
+  export default component;
+}

package/{dist → src}/styles/global.css

@@ -22,9 +22,9 @@
   --c-primary-glow:  rgba(184,134,11,0.12);
   --c-accent:        #fef3c7;
 
-  --c-text-1:        #d4d4d4;
-  --c-text-2:        #737373;
-  --c-text-3:        #404040;
+  --c-text-1:        #ffffff;
+  --c-text-2:        #a3a3a3;
+  --c-text-3:        #737373;
 
   /* Typography */
   --font-sans:  'Inter', system-ui, sans-serif;
@@ -49,7 +49,7 @@
 
   /* Sidebar */
   --sidebar-w: 260px;
-  --header-h:  64px;
+  --header-h:  85px;
 }
 
 /* ── Base ────────────────────────────────────────────────── */
@@ -104,7 +104,7 @@ body::before {
 
 /* ── Utility classes ─────────────────────────────────────── */
 .container {
-  max-width: 1200px;
+  max-width: 1400px;
   margin: 0 auto;
   padding: 0 var(--sp-6);
 }