astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/typography/CurvedPathHeading.astro

@@ -0,0 +1,86 @@
+---
+/**
+ * CurvedPathHeading — Typographic heading flowing along an SVG circular or arched trajectory.
+ * 
+ * @param {string} text - Headline text content. Default is 'ASTRO COMPONENTS KIT • ZERO RUNTIME DEPENDENCIES •'.
+ * @param {number} size - Pixel container diameter. Default is 260.
+ * @param {boolean} animate - Whether the badge rotates continuously. Default is true.
+ */
+interface Props {
+  text?: string;
+  size?: number;
+  animate?: boolean;
+}
+
+const {
+  text = 'ASTRO COMPONENTS KIT • ZERO RUNTIME • PURE CSS •',
+  size = 260,
+  animate = true,
+} = Astro.props;
+
+const pathId = `curve-path-${Math.random().toString(36).substring(2, 8)}`;
+---
+
+<div class:list={['curved-heading', { 'is-animated': animate }]} style={`--curved-size: ${size}px;`}>
+  <svg viewBox="0 0 300 300" width={size} height={size}>
+    <defs>
+      <path
+        id={pathId}
+        d="M 150, 150 m -110, 0 a 110,110 0 1,1 220,0 a 110,110 0 1,1 -220,0"
+      />
+    </defs>
+    <text class="curved-heading__text">
+      <textPath href={`#${pathId}`} startOffset="0%">
+        {text}
+      </textPath>
+    </text>
+  </svg>
+  <div class="curved-heading__core">✦</div>
+</div>
+
+<style>
+  .curved-heading {
+    position: relative;
+    width: var(--curved-size);
+    height: var(--curved-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-sans, system-ui, sans-serif);
+    user-select: none;
+  }
+
+  .curved-heading.is-animated svg {
+    animation: curved-spin 20s linear infinite;
+  }
+
+  .curved-heading__text {
+    font-size: 13.5px;
+    font-weight: 800;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    fill: var(--c-primary-light, #d4a017);
+  }
+
+  .curved-heading__core {
+    position: absolute;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: rgba(184, 134, 11, 0.12);
+    border: 1px solid rgba(184, 134, 11, 0.3);
+    color: var(--c-accent, #fef3c7);
+    display: grid;
+    place-items: center;
+    font-size: 1.2rem;
+  }
+
+  @keyframes curved-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .curved-heading.is-animated svg { animation: none; }
+  }
+</style>

package/src/components/lib/typography/GradientTextMarquee.astro

@@ -0,0 +1,105 @@
+---
+/**
+ * GradientTextMarquee — Continuous kinetic typographic marquee banner with background-clip gold gradient.
+ * 
+ * @param {string[]} phrases - Array of words or slogans to scroll continuously.
+ * @param {string} speed - Animation duration string (e.g. '25s'). Default is '20s'.
+ * @param {boolean} reverse - Whether the marquee moves in reverse direction.
+ */
+interface Props {
+  phrases?: string[];
+  speed?: string;
+  reverse?: boolean;
+}
+
+const {
+  phrases = [
+    'PERFORMANCE FIRST',
+    'ZERO DEPENDENCIES',
+    'ACCESSIBLE WCAG AA',
+    'ASTRO 5 READY',
+    'DARK GLASS MORPHISM',
+  ],
+  speed = '20s',
+  reverse = false,
+} = Astro.props;
+---
+
+<div class="grad-marquee" style={`--marquee-speed: ${speed};`} aria-label="Animated slogan marquee">
+  <div class:list={['grad-marquee__track', { 'is-reverse': reverse }]}>
+    {phrases.map((phrase) => (
+      <span class="grad-marquee__item">
+        <span class="text">{phrase}</span>
+        <span class="dot" aria-hidden="true">✦</span>
+      </span>
+    ))}
+    {/* Duplicate loop */}
+    {phrases.map((phrase) => (
+      <span class="grad-marquee__item" aria-hidden="true">
+        <span class="text">{phrase}</span>
+        <span class="dot" aria-hidden="true">✦</span>
+      </span>
+    ))}
+  </div>
+</div>
+
+<style>
+  .grad-marquee {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    padding: var(--sp-4, 1rem) 0;
+    user-select: none;
+    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
+    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+
+  .grad-marquee__track {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    width: max-content;
+    animation: marquee-roll var(--marquee-speed) linear infinite;
+  }
+
+  .grad-marquee__track:hover {
+    animation-play-state: paused;
+  }
+
+  .grad-marquee__track.is-reverse {
+    animation-direction: reverse;
+  }
+
+  .grad-marquee__item {
+    display: inline-flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .grad-marquee__item .text {
+    font-size: clamp(1.8rem, 4vw, 3.2rem);
+    font-weight: 900;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    background: linear-gradient(135deg, #ffffff 0%, #fef3c7 40%, #d4a017 80%, #b8860b 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    white-space: nowrap;
+  }
+
+  .grad-marquee__item .dot {
+    color: var(--c-primary-light, #d4a017);
+    font-size: 1.2rem;
+  }
+
+  @keyframes marquee-roll {
+    from { transform: translateX(0); }
+    to { transform: translateX(-50%); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .grad-marquee__track { animation: none; overflow-x: auto; }
+  }
+</style>

package/src/components/lib/typography/HackerDecodeText.astro

@@ -0,0 +1,85 @@
+---
+/**
+ * HackerDecodeText — Cyberpunk Matrix-style randomized character deciphering effect on hover.
+ * 
+ * @param {string} text - Final decoded text string. Default is 'CYBERNETIC SYSTEM READY'.
+ * @param {string} tag - HTML heading or paragraph tag. Default is 'h3'.
+ * @param {string} className - Optional CSS class names.
+ */
+interface Props {
+  text?: string;
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span';
+  className?: string;
+}
+
+const {
+  text = 'CYBERNETIC PROTOCOL ONLINE',
+  tag: Tag = 'h3',
+  className = '',
+} = Astro.props;
+---
+
+<Tag
+  class:list={['hacker-text', className]}
+  data-hacker-text={text}
+  title="Hover to decode"
+>
+  {text}
+</Tag>
+
+<style>
+  .hacker-text {
+    font-family: var(--font-mono, 'JetBrains Mono', monospace);
+    font-size: clamp(1.2rem, 3vw, 2rem);
+    font-weight: 800;
+    color: var(--c-primary-light, #d4a017);
+    letter-spacing: 0.08em;
+    cursor: default;
+    user-select: none;
+    transition: text-shadow 0.2s ease;
+  }
+
+  .hacker-text:hover {
+    text-shadow: 0 0 12px rgba(212, 160, 23, 0.7);
+  }
+</style>
+
+<script>
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;:,.<>?';
+
+  function setupHackerText() {
+    document.querySelectorAll('[data-hacker-text]').forEach((el) => {
+      if (el.getAttribute('data-hacker-init')) return;
+      el.setAttribute('data-hacker-init', 'true');
+
+      const original = el.getAttribute('data-hacker-text') || el.textContent || '';
+      let interval: any = null;
+
+      el.addEventListener('pointerenter', () => {
+        let iteration = 0;
+        clearInterval(interval);
+
+        interval = setInterval(() => {
+          el.textContent = original
+            .split('')
+            .map((char, index) => {
+              if (char === ' ') return ' ';
+              if (index < iteration) {
+                return original[index];
+              }
+              return chars[Math.floor(Math.random() * chars.length)];
+            })
+            .join('');
+
+          if (iteration >= original.length) {
+            clearInterval(interval);
+          }
+          iteration += 1 / 2;
+        }, 30);
+      });
+    });
+  }
+
+  setupHackerText();
+  document.addEventListener('astro:page-load', setupHackerText);
+</script>

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

@@ -21,3 +21,7 @@ export { default as ShadowRevealText } from './ShadowRevealText.astro';
 export { default as StrokeHeadingOutline } from './StrokeHeadingOutline.astro';
 export { default as Text3DLayer } from './Text3DLayer.astro';
 export { default as TypewriterText } from './TypewriterText.astro';
+export { default as AnimatedCounterText } from './AnimatedCounterText.astro';
+export { default as GradientTextMarquee } from './GradientTextMarquee.astro';
+export { default as CurvedPathHeading } from './CurvedPathHeading.astro';
+export { default as HackerDecodeText } from './HackerDecodeText.astro';

package/src/styles/global.css

@@ -26,6 +26,21 @@
   --c-text-2:        #a3a3a3;
   --c-text-3:        #737373;
 
+  /* Data-viz — categorical slots (fixed order, CVD-validated for dark surfaces) */
+  --chart-1:         #3987e5;   /* blue    */
+  --chart-2:         #d95926;   /* orange  */
+  --chart-3:         #199e70;   /* aqua    */
+  --chart-4:         #c98500;   /* yellow  */
+  --chart-5:         #d55181;   /* magenta */
+  --chart-6:         #2f9e2f;   /* green   */
+  --chart-7:         #9085e9;   /* violet  */
+  --chart-8:         #e66767;   /* red     */
+  --chart-pos:       #34c38f;   /* status: good     */
+  --chart-neg:       #f06a6a;   /* status: critical */
+  --chart-grid:      rgba(255,255,255,0.07);
+  --chart-axis:      rgba(255,255,255,0.18);
+  --chart-surface:   #0d0d0f;
+
   /* Typography */
   --font-sans:  'Inter', system-ui, sans-serif;
   --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
@@ -35,8 +50,10 @@
   --sp-2: 0.5rem;    /* 8px  */
   --sp-3: 0.75rem;   /* 12px */
   --sp-4: 1rem;      /* 16px */
+  --sp-5: 1.25rem;   /* 20px */
   --sp-6: 1.5rem;    /* 24px */
   --sp-8: 2rem;      /* 32px */
+  --sp-10: 2.5rem;   /* 40px */
   --sp-12: 3rem;     /* 48px */
   --sp-16: 4rem;     /* 64px */
 
@@ -47,11 +64,54 @@
   --r-xl: 28px;
   --r-full: 9999px;
 
+  /* Theme helpers (used by e-commerce components and templates) */
+  --ink-rgb:         255 255 255;  /* foreground for translucent lines/fills */
+  --paper-rgb:       5 5 5;        /* background for translucent surfaces    */
+  --c-on-primary:    #050505;      /* text on primary (gold) buttons         */
+  --c-success:       #34d399;
+  --c-danger:        #f87171;
+  --c-warning:       #fbbf24;
+  color-scheme: dark;
+
   /* Sidebar */
-  --sidebar-w: 260px;
+  --sidebar-w: 280px;
   --header-h:  85px;
 }
 
+/* ── Light theme (opt-in: <html data-theme="light">) ──────── */
+[data-theme='light'] {
+  --c-bg:            #f6f5f2;
+  --c-bg-1:          #ffffff;
+  --c-bg-2:          #ecebe6;
+  --c-surface:       rgba(17,17,17,0.025);
+  --c-border:        rgba(17,17,17,0.09);
+
+  --c-primary:       #8a6500;
+  --c-primary-light: #8a6500;
+  --c-primary-glow:  rgba(138,101,0,0.12);
+  --c-accent:        #5c4300;
+
+  --c-text-1:        #121212;
+  --c-text-2:        #4a4a4a;
+  --c-text-3:        #666666;
+
+  --ink-rgb:         17 17 17;
+  --paper-rgb:       255 255 255;
+  --c-on-primary:    #ffffff;
+  --c-success:       #047857;
+  --c-danger:        #b91c1c;
+  --c-warning:       #92400e;
+  --pm-ink-s:        65%;
+  --pm-ink-l:        36%;
+  --pm-soft-s:       35%;
+  --pm-soft-l:       82%;
+  --pm-soft-a:       0.9;
+  --chart-grid:      rgba(17,24,39,0.08);
+  --chart-axis:      rgba(17,24,39,0.22);
+  --chart-surface:   #ffffff;
+  color-scheme: light;
+}
+
 /* ── Base ────────────────────────────────────────────────── */
 html {
   font-family: var(--font-sans);
@@ -140,3 +200,55 @@ body::before {
 .anim-delay-1  { animation-delay: 0.1s; }
 .anim-delay-2  { animation-delay: 0.2s; }
 .anim-delay-3  { animation-delay: 0.3s; }
+
+/* ── Site header: keep every nav link on one line on tablets / small laptops ── */
+@media (min-width: 769px) and (max-width: 1180px) {
+  #site-nav a { padding-inline: 0.55rem; font-size: 0.82rem; }
+  #site-nav .gh-link { font-size: 0; gap: 0; }
+  #site-nav .gh-link svg { width: 18px; height: 18px; }
+}
+@media (min-width: 769px) and (max-width: 960px) {
+  header .docs-header__brand .brand-logo { height: 46px; }
+  #site-nav { gap: 0; }
+  #site-nav a { padding-inline: 0.45rem; font-size: 0.78rem; }
+}
+
+/* ── Light theme adapters for shared components ──────────────
+   Scoped component styles assume a dark surface; these overrides
+   (:root[data-theme='light'] wins on specificity) keep them legible. */
+:root[data-theme='light'] .badge--default { background: rgba(17,17,17,0.06); color: #3f3f3f; border-color: rgba(17,17,17,0.12); }
+:root[data-theme='light'] .badge--success { background: rgba(4,120,87,0.1); color: #047857; border-color: rgba(4,120,87,0.25); }
+:root[data-theme='light'] .badge--warning { background: rgba(146,64,14,0.1); color: #92400e; border-color: rgba(146,64,14,0.25); }
+:root[data-theme='light'] .badge--danger { background: rgba(185,28,28,0.08); color: #b91c1c; border-color: rgba(185,28,28,0.22); }
+:root[data-theme='light'] .badge--info { background: rgba(29,78,216,0.08); color: #1d4ed8; border-color: rgba(29,78,216,0.22); }
+
+:root[data-theme='light'] .cns--glass .cns__box { background: #fff; border-color: rgba(17,17,17,0.08); box-shadow: 0 30px 60px -40px rgba(17,17,17,0.35); }
+:root[data-theme='light'] .cns__icon { background: rgba(17,17,17,0.04); border-color: rgba(17,17,17,0.08); }
+:root[data-theme='light'] .cns__input { background: #fff; border-color: rgba(17,17,17,0.18); }
+:root[data-theme='light'] .cns__btn { background: #121212; color: #fff; }
+:root[data-theme='light'] .cns__btn:hover { background: var(--c-primary); }
+:root[data-theme='light'] .cns__perks svg { color: #047857; }
+
+:root[data-theme='light'] .fms { background: var(--c-bg-1); border-top-color: rgba(17,17,17,0.08); }
+:root[data-theme='light'] .fms__top { border-bottom-color: rgba(17,17,17,0.08); }
+:root[data-theme='light'] .fms__news-field { background: #fff; border-color: rgba(17,17,17,0.16); }
+:root[data-theme='light'] .fms__news-field button { background: rgba(17,17,17,0.05); }
+:root[data-theme='light'] .fms__news-field button:hover { color: #fff; }
+:root[data-theme='light'] .fms__status { border-color: rgba(17,17,17,0.1); }
+
+:root[data-theme='light'] .logo-badge { background: #fff; border-color: rgba(17,17,17,0.08); }
+:root[data-theme='light'] .step-nav__line { background: rgba(17,17,17,0.1); }
+
+:root[data-theme='light'] .anim-input,
+:root[data-theme='light'] .custom-select,
+:root[data-theme='light'] .stepper { background: #fff; border-color: rgba(17,17,17,0.14); }
+:root[data-theme='light'] .radio-circle { border-color: rgba(17,17,17,0.3); background: #fff; }
+
+:root[data-theme='light'] .step-nav__circle { background: #fff; border-color: rgba(17,17,17,0.18); }
+:root[data-theme='light'] .step-nav__item--complete .step-nav__circle { background: rgba(4,120,87,0.1); border-color: #047857; color: #047857; }
+:root[data-theme='light'] .step-nav__item--active .step-nav__circle { color: #fff; background: var(--c-primary); border-color: var(--c-primary); box-shadow: none; }
+:root[data-theme='light'] .status-feed__line { background: rgba(17,24,39,0.1); }
+:root[data-theme='light'] .status-feed__bullet { background: var(--c-bg-1); border-color: rgba(17,24,39,0.16); }
+:root[data-theme='light'] .status-feed__item--done .status-feed__bullet { background: rgba(4,120,87,0.1); border-color: #047857; color: #047857; }
+:root[data-theme='light'] .status-feed__item--active .status-feed__bullet { background: var(--c-primary-glow); border-color: var(--c-primary-light); color: var(--c-primary-light); box-shadow: none; }
+:root[data-theme='light'] .status-feed__content { background: var(--c-bg-1); border-color: rgba(17,24,39,0.08); }