astro-component-kit 0.0.1

package/src/components/lib/buttons/GhostOutlineButton.astro

@@ -0,0 +1,109 @@
+---
+interface Props {
+  href?: string;
+  type?: 'button' | 'submit' | 'reset';
+  primaryColor?: string;
+  secondaryColor?: string;
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const { 
+  href, 
+  type = 'button', 
+  primaryColor = '#6366f1',
+  secondaryColor = '#c084fc',
+  size = 'md',
+  disabled = false 
+} = Astro.props;
+
+const Tag = href ? 'a' : 'button';
+---
+
+<Tag 
+  href={href} 
+  type={href ? undefined : type}
+  disabled={disabled}
+  class={`ghost-grad-btn ghost-grad-btn--${size}`}
+  style={`--primary-color: ${primaryColor}; --secondary-color: ${secondaryColor};`}
+>
+  <span class="ghost-grad-btn__text"><slot /></span>
+</Tag>
+
+<style>
+  .ghost-grad-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #0f172a;
+    color: #fff;
+    padding: 2px;
+    border: none;
+    border-radius: var(--r-md, 12px);
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-weight: 700;
+    user-select: none;
+    white-space: nowrap;
+    overflow: hidden;
+    font-family: var(--font-sans, inherit);
+  }
+
+  .ghost-grad-btn::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    z-index: 1;
+    transition: opacity 0.3s ease;
+  }
+
+  .ghost-grad-btn:hover:not(:disabled)::before {
+    opacity: 0.8;
+  }
+
+  .ghost-grad-btn__text {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: #0f172a;
+    padding: 0.7rem 1.8rem;
+    border-radius: calc(var(--r-md, 12px) - 2px);
+    z-index: 2;
+    transition: background 0.3s ease, color 0.3s ease;
+  }
+
+  .ghost-grad-btn:hover:not(:disabled) .ghost-grad-btn__text {
+    background: transparent;
+    color: #fff;
+  }
+
+  .ghost-grad-btn:hover:not(:disabled) {
+    box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--primary-color), transparent 50%);
+    transform: translateY(-1px);
+  }
+
+  .ghost-grad-btn:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  .ghost-grad-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    filter: grayscale(1);
+  }
+
+  /* Sizes */
+  .ghost-grad-btn--sm { font-size: 0.85rem; }
+  .ghost-grad-btn--sm .ghost-grad-btn__text { padding: 0.45rem 1.2rem; }
+  
+  .ghost-grad-btn--md { font-size: 1rem; }
+  .ghost-grad-btn--md .ghost-grad-btn__text { padding: 0.75rem 1.8rem; }
+  
+  .ghost-grad-btn--lg { font-size: 1.15rem; }
+  .ghost-grad-btn--lg .ghost-grad-btn__text { padding: 1.1rem 2.5rem; }
+</style>
+

package/src/components/lib/buttons/GlassButton.astro

@@ -0,0 +1,165 @@
+---
+interface Props {
+  href?: string;
+  type?: 'button' | 'submit' | 'reset';
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const { href, type = 'button', variant = 'primary', size = 'md', disabled = false } = Astro.props;
+const Tag = href ? 'a' : 'button';
+---
+<Tag 
+  href={href} 
+  type={href ? undefined : type}
+  disabled={disabled} 
+  class={`glass-btn glass-btn--${variant} glass-btn--${size}`}
+>
+  <slot />
+</Tag>
+
+<style>
+---
+interface Props {
+  href?: string;
+  type?: 'button' | 'submit' | 'reset';
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const { href, type = 'button', variant = 'primary', size = 'md', disabled = false } = Astro.props;
+const Tag = href ? 'a' : 'button';
+---
+<Tag 
+  href={href} 
+  type={href ? undefined : type}
+  disabled={disabled} 
+  class={`glass-btn glass-btn--${variant} glass-btn--${size}`}
+>
+  <span class="glass-btn__shimmer"></span>
+  <span class="glass-btn__content">
+    <slot />
+  </span>
+</Tag>
+
+<style>
+  .glass-btn {
+    --btn-bg: rgba(255, 255, 255, 0.05);
+    --btn-border: rgba(255, 255, 255, 0.1);
+    --btn-text: var(--c-text-1, #d4d4d4);
+    --btn-glow: rgba(184, 134, 11, 0);
+    
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    font-family: var(--font-sans, inherit);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    border-radius: var(--r-md, 12px);
+    cursor: pointer;
+    text-decoration: none;
+    border: 1px solid var(--btn-border);
+    background: var(--btn-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    position: relative;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    white-space: nowrap;
+    user-select: none;
+    overflow: hidden;
+    color: var(--btn-text);
+  }
+
+  /* Shimmer Effect */
+  .glass-btn__shimmer {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.05),
+      rgba(255, 255, 255, 0.15),
+      rgba(255, 255, 255, 0.05),
+      transparent
+    );
+    transform: translateX(-100%);
+    transition: transform 0.6s ease;
+    pointer-events: none;
+  }
+
+  .glass-btn:hover:not(:disabled) .glass-btn__shimmer {
+    transform: translateX(100%);
+  }
+
+  /* Glass Border Glow */
+  .glass-btn::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent, rgba(255,255,255,0.05));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+    opacity: 0.5;
+    transition: opacity 0.3s ease;
+  }
+
+  .glass-btn:hover:not(:disabled)::after {
+    opacity: 1;
+  }
+
+  .glass-btn:hover:not(:disabled) {
+    transform: translateY(-2px);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 10px 30px -10px var(--btn-glow);
+  }
+
+  .glass-btn:active:not(:disabled) {
+    transform: translateY(0) scale(0.98);
+  }
+
+  .glass-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    filter: grayscale(1);
+  }
+
+  /* Variants */
+  .glass-btn--primary {
+    --btn-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.7), rgba(212, 160, 23, 0.7));
+    --btn-text: #0a0a0a;
+    --btn-glow: rgba(184, 134, 11, 0.4);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .glass-btn--secondary {
+    --btn-bg: rgba(255, 255, 255, 0.03);
+    --btn-glow: rgba(255, 255, 255, 0.1);
+  }
+
+  .glass-btn--ghost {
+    --btn-bg: transparent;
+    --btn-text: var(--c-primary-light, #d4a017);
+    --btn-border: rgba(184, 134, 11, 0.25);
+    --btn-glow: rgba(184, 134, 11, 0.15);
+    backdrop-filter: none;
+  }
+
+  .glass-btn--ghost:hover:not(:disabled) {
+    background: rgba(184, 134, 11, 0.08);
+    border-color: rgba(184, 134, 11, 0.4);
+  }
+
+  /* Sizes */
+  .glass-btn--sm { padding: 0.45rem 1.1rem; font-size: 0.85rem; }
+  .glass-btn--md { padding: 0.75rem 1.6rem; font-size: 0.95rem; }
+  .glass-btn--lg { padding: 1.1rem 2.4rem; font-size: 1.1rem; }
+</style>
+</style>
+

package/src/components/lib/buttons/GlowButton.astro

@@ -0,0 +1,119 @@
+---
+interface Props {
+  color?: string;
+  href?: string;
+  type?: 'button' | 'submit' | 'reset';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const { color = '#6366f1', href, type = 'button', size = 'md', disabled = false } = Astro.props;
+const Tag = href ? 'a' : 'button';
+---
+<Tag 
+  href={href} 
+  type={href ? undefined : type}
+  disabled={disabled}
+  class={`glow-btn glow-btn--${size}`} 
+  style={`--btn-color: ${color}`}
+>
+  <span class="glow-btn__content"><slot /></span>
+</Tag>
+
+<style>
+  .glow-btn {
+    --glow-color: var(--btn-color);
+    --glow-opacity: 0.4;
+    
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-sans, inherit);
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: #fff;
+    background: var(--btn-color);
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    text-decoration: none;
+    position: relative;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    white-space: nowrap;
+    user-select: none;
+    z-index: 1;
+    
+    /* Layered Glow */
+    box-shadow: 
+      0 0 10px color-mix(in srgb, var(--glow-color), transparent 60%),
+      0 0 20px color-mix(in srgb, var(--glow-color), transparent 80%);
+  }
+
+  .glow-btn__content {
+    position: relative;
+    z-index: 2;
+  }
+
+  .glow-btn::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    background: var(--btn-color);
+    border-radius: inherit;
+    z-index: -1;
+    opacity: 0;
+    filter: blur(8px);
+    transition: opacity 0.3s ease;
+  }
+
+  .glow-btn::after {
+    content: '';
+    position: absolute;
+    inset: -8px;
+    background: var(--btn-color);
+    border-radius: 14px;
+    opacity: 0;
+    filter: blur(25px);
+    transition: opacity 0.4s ease;
+    z-index: -2;
+  }
+
+  .glow-btn:hover:not(:disabled) {
+    transform: translateY(-3px) scale(1.03);
+    box-shadow: 
+      0 0 20px color-mix(in srgb, var(--glow-color), transparent 40%),
+      0 0 40px color-mix(in srgb, var(--glow-color), transparent 70%);
+  }
+
+  .glow-btn:hover:not(:disabled)::before {
+    opacity: 0.4;
+  }
+
+  .glow-btn:hover:not(:disabled)::after {
+    opacity: 0.7;
+    animation: animate-glow 2.5s ease-in-out infinite;
+  }
+
+  .glow-btn:active:not(:disabled) {
+    transform: translateY(1px) scale(0.98);
+  }
+
+  .glow-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    filter: grayscale(1);
+    box-shadow: none;
+  }
+
+  @keyframes animate-glow {
+    0%, 100% { opacity: 0.5; filter: blur(20px); transform: scale(1); }
+    50% { opacity: 0.8; filter: blur(30px); transform: scale(1.1); }
+  }
+
+  /* Sizes */
+  .glow-btn--sm { padding: 0.5rem 1.4rem; font-size: 0.75rem; }
+  .glow-btn--md { padding: 0.8rem 2.2rem; font-size: 0.875rem; }
+  .glow-btn--lg { padding: 1.1rem 3rem; font-size: 1rem; }
+</style>
+

package/src/components/lib/buttons/LiquidButton.astro

@@ -0,0 +1,167 @@
+---
+interface Props {
+  href?: string;
+  type?: 'button' | 'submit' | 'reset';
+  color?: string;
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const { 
+  href, 
+  type = 'button', 
+  color = '#6366f1',
+  size = 'md',
+  disabled = false 
+} = Astro.props;
+
+const Tag = href ? 'a' : 'button';
+// Create a unique filter ID to avoid conflicts when multiple buttons are on screen
+const filterId = `gooey-${Math.random().toString(36).substr(2, 9)}`;
+---
+
+<Tag 
+  href={href} 
+  type={href ? undefined : type}
+  disabled={disabled}
+  class={`liquid-btn liquid-btn--${size}`}
+  style={`--liquid-color: ${color}`}
+>
+  <span class="liquid-btn__text"><slot /></span>
+  
+  <div class="liquid-wrapper">
+    <div class="liquid-main"></div>
+    <div class="liquid-container">
+      <div class="liquid-blob"></div>
+      <div class="liquid-blob"></div>
+      <div class="liquid-blob"></div>
+      <div class="liquid-blob"></div>
+    </div>
+  </div>
+
+  <svg style="position: absolute; width: 0; height: 0; pointer-events: none;">
+    <defs>
+      <filter id={filterId}>
+        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="goo" />
+        <feComposite in="SourceGraphic" in2="goo" operator="atop" />
+      </filter>
+    </defs>
+  </svg>
+</Tag>
+
+<style define:vars={{ filterId: `url(#${filterId})` }}>
+  .liquid-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #080b14;
+    color: #fff;
+    border: none;
+    border-radius: var(--r-md, 14px);
+    cursor: pointer;
+    text-decoration: none;
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
+    z-index: 1;
+    font-family: var(--font-sans, inherit);
+    font-weight: 800;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    user-select: none;
+    white-space: nowrap;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .liquid-btn__text {
+    position: relative;
+    z-index: 10;
+    padding: 0 4px;
+    transition: color 0.4s ease;
+  }
+
+  .liquid-wrapper {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
+    filter: var(--filterId);
+    border-radius: inherit;
+    /* Subtle base fill */
+    opacity: 0.95;
+  }
+
+  .liquid-main {
+    position: absolute;
+    bottom: -100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--liquid-color);
+    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+
+  .liquid-container {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+  }
+
+  .liquid-blob {
+    position: absolute;
+    top: 100%;
+    background: var(--liquid-color);
+    border-radius: 50%;
+    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+
+  .liquid-blob:nth-child(1) { left: 10%; width: 60px; height: 60px; transition-delay: 0s; }
+  .liquid-blob:nth-child(2) { left: 40%; width: 80px; height: 80px; transition-delay: 0.05s; }
+  .liquid-blob:nth-child(3) { left: 70%; width: 50px; height: 50px; transition-delay: 0.02s; }
+  .liquid-blob:nth-child(4) { left: 30%; width: 70px; height: 70px; transition-delay: 0.08s; }
+
+  /* Hover States */
+  .liquid-btn:hover:not(:disabled) {
+    border-color: rgba(255, 255, 255, 0.1);
+    transform: translateY(-2px);
+    box-shadow: 0 20px 40px -10px color-mix(in srgb, var(--liquid-color), transparent 70%);
+  }
+
+  .liquid-btn:hover:not(:disabled) .liquid-main {
+    transform: translateY(-100%);
+  }
+
+  .liquid-btn:hover:not(:disabled) .liquid-blob {
+    transform: translateY(-180%) scale(1.4);
+  }
+
+  /* Movement animation for blobs when hovered */
+  .liquid-btn:hover:not(:disabled) .liquid-blob:nth-child(odd) {
+    animation: liquid-wiggle 3s ease-in-out infinite alternate;
+  }
+  .liquid-btn:hover:not(:disabled) .liquid-blob:nth-child(even) {
+    animation: liquid-wiggle 4s ease-in-out infinite alternate-reverse;
+  }
+
+  @keyframes liquid-wiggle {
+    0% { margin-left: -5px; }
+    100% { margin-left: 5px; }
+  }
+
+  .liquid-btn:active:not(:disabled) {
+    transform: scale(0.96);
+  }
+
+  .liquid-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    filter: grayscale(1);
+  }
+
+  /* Sizes */
+  .liquid-btn--sm { padding: 0.6rem 1.6rem; font-size: 0.8rem; }
+  .liquid-btn--md { padding: 0.9rem 2.4rem; font-size: 0.95rem; }
+  .liquid-btn--lg { padding: 1.2rem 3.5rem; font-size: 1.1rem; }
+</style>
+

package/src/components/lib/buttons/LoadingButton.astro

@@ -0,0 +1,148 @@
+---
+interface Props {
+  isLoading?: boolean;
+  href?: string;
+  type?: 'button' | 'submit' | 'reset';
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const { 
+  isLoading = false, 
+  href, 
+  type = 'button', 
+  variant = 'primary', 
+  size = 'md',
+  disabled = false 
+} = Astro.props;
+
+const Tag = href ? 'a' : 'button';
+---
+
+<Tag 
+  href={href} 
+  type={href ? undefined : type}
+  disabled={disabled || isLoading}
+  class:list={[
+    "load-btn", 
+    `load-btn--${variant}`, 
+    `load-btn--${size}`, 
+    { "is-loading": isLoading }
+  ]}
+>
+  <span class="load-btn__content">
+    <slot />
+  </span>
+  <span class="load-btn__spinner">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
+    </svg>
+  </span>
+</Tag>
+
+<style>
+  .load-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-sans, inherit);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    border-radius: var(--r-md, 12px);
+    cursor: pointer;
+    text-decoration: none;
+    border: 1px solid transparent;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .load-btn__content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  .load-btn__spinner {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: scale(0.5);
+    transition: all 0.2s ease;
+    pointer-events: none;
+  }
+
+  .load-btn__spinner svg {
+    width: 1.25em;
+    height: 1.25em;
+    animation: spin 1s linear infinite;
+  }
+
+  /* Loading State */
+  .load-btn.is-loading {
+    cursor: wait;
+  }
+  
+  .load-btn.is-loading .load-btn__content {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+
+  .load-btn.is-loading .load-btn__spinner {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  /* Variants */
+  .load-btn--primary {
+    background: var(--c-primary, #6366f1);
+    color: #fff;
+    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
+  }
+  .load-btn--primary:hover:not(:disabled) {
+    background: var(--c-primary-light, #818cf8);
+    transform: translateY(-1px);
+  }
+
+  .load-btn--secondary {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--c-text-1, #f8fafc);
+    border-color: var(--c-border, rgba(255, 255, 255, 0.1));
+  }
+  .load-btn--secondary:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .load-btn--ghost {
+    background: transparent;
+    color: var(--c-primary-light, #818cf8);
+    border-color: rgba(99, 102, 241, 0.3);
+  }
+  .load-btn--ghost:hover:not(:disabled) {
+    background: rgba(99, 102, 241, 0.05);
+  }
+
+  /* Sizes / Layout */
+  .load-btn--sm { padding: 0.45rem 1rem; font-size: 0.825rem; min-width: 100px; }
+  .load-btn--md { padding: 0.75rem 1.6rem; font-size: 0.95rem; min-width: 140px; }
+  .load-btn--lg { padding: 1rem 2.2rem; font-size: 1.1rem; min-width: 180px; }
+
+  .load-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    filter: grayscale(1);
+  }
+</style>
+