astro-component-kit 0.0.1 → 0.1.0

package/dist/buttons/GlowButton.astro

@@ -1,119 +0,0 @@
----
-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/dist/buttons/LiquidButton.astro

@@ -1,167 +0,0 @@
----
-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/dist/buttons/LoadingButton.astro

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

package/dist/buttons/MagneticButton.astro

@@ -1,134 +0,0 @@
----
-interface Props {
-  href?: string;
-  type?: 'button' | 'submit' | 'reset';
-  variant?: 'primary' | 'secondary' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
-  strength?: number;
-  disabled?: boolean;
-}
-
-const { 
-  href, 
-  type = 'button', 
-  variant = 'secondary', 
-  size = 'md',
-  strength = 0.5,
-  disabled = false 
-} = Astro.props;
-
-const Tag = href ? 'a' : 'button';
----
-
-<Tag 
-  href={href} 
-  type={href ? undefined : type}
-  disabled={disabled}
-  class={`magnetic-btn magnetic-btn--${variant} magnetic-btn--${size}`}
-  data-strength={strength}
->
-  <span class="magnetic-btn__inner">
-    <slot />
-  </span>
-</Tag>
-
-<style>
-  .magnetic-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: none;
-    border-radius: var(--r-full, 9999px);
-    cursor: pointer;
-    text-decoration: none;
-    position: relative;
-    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
-    user-select: none;
-    font-family: var(--font-sans, inherit);
-    font-weight: 600;
-    white-space: nowrap;
-  }
-
-  .magnetic-btn__inner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-    pointer-events: none;
-  }
-
-  /* Variants */
-  .magnetic-btn--primary {
-    background: var(--c-primary, #6366f1);
-    color: #fff;
-    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
-  }
-
-  .magnetic-btn--secondary {
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(12px);
-    color: var(--c-text-1, #f8fafc);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .magnetic-btn--ghost {
-    background: transparent;
-    color: var(--c-primary-light, #818cf8);
-    border: 1px solid rgba(99, 102, 241, 0.3);
-  }
-
-  .magnetic-btn:hover:not(:disabled) {
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-  }
-
-  .magnetic-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    filter: grayscale(1);
-  }
-
-  /* Sizes */
-  .magnetic-btn--sm { min-width: 80px; min-height: 40px; }
-  .magnetic-btn--sm .magnetic-btn__inner { padding: 0.5rem 1.2rem; font-size: 0.8rem; }
-  
-  .magnetic-btn--md { min-width: 120px; min-height: 50px; }
-  .magnetic-btn--md .magnetic-btn__inner { padding: 0.8rem 1.8rem; font-size: 0.95rem; }
-  
-  .magnetic-btn--lg { min-width: 160px; min-height: 64px; }
-  .magnetic-btn--lg .magnetic-btn__inner { padding: 1.1rem 2.5rem; font-size: 1.1rem; }
-</style>
-
-<script>
-  function initMagnetic() {
-    const btns = document.querySelectorAll('.magnetic-btn:not([data-magnetic-init])');
-    
-    btns.forEach(btn => {
-      btn.setAttribute('data-magnetic-init', 'true');
-      const inner = btn.querySelector('.magnetic-btn__inner') as HTMLElement;
-      const strengthAttr = btn.getAttribute('data-strength');
-      const strength = strengthAttr ? parseFloat(strengthAttr) : 0.5;
-
-      btn.addEventListener('mousemove', (e: any) => {
-        const rect = btn.getBoundingClientRect();
-        const x = (e.clientX - rect.left - rect.width / 2) * strength;
-        const y = (e.clientY - rect.top - rect.height / 2) * strength;
-
-        (btn as HTMLElement).style.transform = `translate(${x}px, ${y}px)`;
-        if (inner) inner.style.transform = `translate(${x * 0.4}px, ${y * 0.4}px)`;
-      });
-
-      btn.addEventListener('mouseleave', () => {
-        (btn as HTMLElement).style.transform = `translate(0px, 0px)`;
-        if (inner) inner.style.transform = `translate(0px, 0px)`;
-      });
-    });
-  }
-
-  // Initial and view transition support
-  initMagnetic();
-  document.addEventListener('astro:after-swap', initMagnetic);
-</script>
-

package/dist/buttons/MinimalPillButton.astro

@@ -1,102 +0,0 @@
----
-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={`pill-btn pill-btn--${variant} pill-btn--${size}`}
->
-  <slot />
-</Tag>
-
-<style>
-  .pill-btn {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem 1.5rem;
-    border-radius: var(--r-full, 9999px);
-    font-size: 0.85rem;
-    font-weight: 500;
-    cursor: pointer;
-    text-decoration: none;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    user-select: none;
-    white-space: nowrap;
-    border: 1px solid transparent;
-    font-family: var(--font-sans, inherit);
-  }
-
-  .pill-btn:hover:not(:disabled) {
-    transform: translateY(-1px);
-  }
-
-  .pill-btn:active:not(:disabled) {
-    transform: translateY(0);
-  }
-
-  .pill-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    filter: grayscale(1);
-  }
-
-  /* Variants */
-  .pill-btn--primary {
-    background: rgba(255, 255, 255, 0.05);
-    color: var(--c-text-2, #94a3b8);
-    border-color: rgba(255, 255, 255, 0.1);
-  }
-  .pill-btn--primary:hover:not(:disabled) {
-    background: #fff;
-    color: #000;
-    border-color: #fff;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
-  }
-
-  .pill-btn--secondary {
-    background: var(--c-primary, #6366f1);
-    color: #fff;
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
-  }
-  .pill-btn--secondary:hover:not(:disabled) {
-    background: var(--c-primary-light, #818cf8);
-    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
-  }
-
-  .pill-btn--ghost {
-    background: transparent;
-    color: var(--c-text-2, #94a3b8);
-    border-color: rgba(255, 255, 255, 0.1);
-  }
-  .pill-btn--ghost:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.05);
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.3);
-  }
-
-  /* Sizes */
-  .pill-btn--sm { padding: 0.35rem 1.2rem; font-size: 0.75rem; }
-  .pill-btn--md { padding: 0.55rem 1.6rem; font-size: 0.85rem; }
-  .pill-btn--lg { padding: 0.8rem 2.2rem; font-size: 1rem; }
-</style>
-