astro-component-kit 0.0.1 → 0.1.1

package/dist/AnimatedInput.astro

@@ -1,82 +0,0 @@
----
-// src/components/lib/AnimatedInput.astro
-interface Props {
-  label: string;
-  id: string;
-  type?: string;
-  placeholder?: string;
-  required?: boolean;
-  name?: string;
-}
-
-const {
-  label,
-  id,
-  type = 'text',
-  placeholder = ' ',
-  required = false,
-  name,
-} = Astro.props;
----
-
-<div class="anim-input-wrap">
-  <input
-    {id}
-    {name}
-    {type}
-    {placeholder}
-    {required}
-    class="anim-input"
-    autocomplete="off"
-  />
-  <label for={id} class="anim-input-label">{label}</label>
-</div>
-
-<style>
-  .anim-input-wrap {
-    position: relative;
-    width: 100%;
-  }
-
-  .anim-input {
-    width: 100%;
-    padding: 1.1rem 1rem 0.5rem;
-    font-family: inherit;
-    font-size: 0.95rem;
-    color: #e2e8f0;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 12px;
-    outline: none;
-    box-sizing: border-box;
-    transition: border-color 0.25s ease, background 0.25s ease;
-  }
-
-  .anim-input::placeholder { color: transparent; }
-
-  .anim-input:focus {
-    background: rgba(99, 102, 241, 0.06);
-    border-color: rgba(99, 102, 241, 0.5);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
-  }
-
-  .anim-input-label {
-    position: absolute;
-    top: 0.9rem;
-    left: 1rem;
-    font-size: 0.9rem;
-    color: #64748b;
-    pointer-events: none;
-    transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
-  }
-
-  .anim-input:focus ~ .anim-input-label,
-  .anim-input:not(:placeholder-shown) ~ .anim-input-label {
-    top: 0.28rem;
-    font-size: 0.68rem;
-    color: #818cf8;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-  }
-</style>

package/dist/Badge.astro

@@ -1,52 +0,0 @@
----
-// src/components/lib/Badge.astro
-interface Props {
-  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
-  dot?: boolean;
-  pulse?: boolean;
-}
-
-const { variant = 'default', dot = false, pulse = false } = Astro.props;
----
-
-<span class:list={['badge', `badge--${variant}`]}>
-  {dot && <span class:list={['badge__dot', { 'badge__dot--pulse': pulse }]}></span>}
-  <slot />
-</span>
-
-<style>
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.25rem 0.7rem;
-    border-radius: 100px;
-    font-size: 0.72rem;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    white-space: nowrap;
-  }
-
-  .badge--default { background: rgba(100,116,139,0.18); color: #94a3b8; border: 1px solid rgba(100,116,139,0.25); }
-  .badge--success { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.25); }
-  .badge--warning { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
-  .badge--danger  { background: rgba(239,68,68,0.12);  color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
-  .badge--info    { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.25); }
-
-  .badge__dot {
-    width: 6px; height: 6px;
-    border-radius: 50%;
-    background: currentColor;
-    flex-shrink: 0;
-  }
-
-  .badge__dot--pulse {
-    animation: dot-pulse 1.8s ease-in-out infinite;
-  }
-
-  @keyframes dot-pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.4; transform: scale(0.7); }
-  }
-</style>

package/dist/GlassButton.astro

@@ -1,87 +0,0 @@
----
-// src/components/lib/GlassButton.astro
-interface Props {
-  href?: string;
-  variant?: 'primary' | 'secondary' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
-  disabled?: boolean;
-}
-
-const { href, variant = 'primary', size = 'md', disabled = false } = Astro.props;
-const Tag = href ? 'a' : 'button';
----
-
-<Tag
-  href={href}
-  disabled={disabled}
-  class={`glass-btn glass-btn--${variant} glass-btn--${size}`}
->
-  <slot />
-</Tag>
-
-<style>
-  .glass-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    font-family: inherit;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    border-radius: 12px;
-    cursor: pointer;
-    text-decoration: none;
-    border: 1px solid transparent;
-    position: relative;
-    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
-    overflow: hidden;
-  }
-
-  .glass-btn::before {
-    content: '';
-    position: absolute;
-    inset: -1px;
-    border-radius: inherit;
-    padding: 1px;
-    background: linear-gradient(135deg, rgba(255,255,255,0.3), 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;
-  }
-
-  .glass-btn:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35);
-  }
-
-  .glass-btn:active:not(:disabled) { transform: translateY(0); }
-  .glass-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-
-  .glass-btn--primary {
-    background: linear-gradient(135deg, #6366f1, #8b5cf6);
-    color: #fff;
-    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
-  }
-
-  .glass-btn--secondary {
-    background: rgba(255, 255, 255, 0.08);
-    backdrop-filter: blur(12px);
-    color: #e2e8f0;
-    border-color: rgba(255, 255, 255, 0.12);
-  }
-
-  .glass-btn--ghost {
-    background: transparent;
-    color: #a5b4fc;
-    border-color: rgba(99, 102, 241, 0.4);
-  }
-
-  .glass-btn--ghost:hover:not(:disabled) {
-    background: rgba(99, 102, 241, 0.12);
-    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
-  }
-
-  .glass-btn--sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
-  .glass-btn--md { padding: 0.65rem 1.4rem; font-size: 0.9rem; }
-  .glass-btn--lg { padding: 0.85rem 1.9rem; font-size: 1rem; }
-</style>

package/dist/GlassCard.astro

@@ -1,72 +0,0 @@
----
-// src/components/lib/GlassCard.astro
-interface Props {
-  title?: string;
-  subtitle?: string;
-  hoverable?: boolean;
-  padding?: 'sm' | 'md' | 'lg';
-}
-
-const { title, subtitle, hoverable = true, padding = 'md' } = Astro.props;
----
-
-<div class:list={['glass-card', `glass-card--p${padding}`, { 'glass-card--hoverable': hoverable }]}>
-  {title && (
-    <div class="glass-card__header">
-      <h3 class="glass-card__title">{title}</h3>
-      {subtitle && <p class="glass-card__subtitle">{subtitle}</p>}
-    </div>
-  )}
-  <div class="glass-card__body">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .glass-card {
-    background: rgba(255, 255, 255, 0.04);
-    backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.09);
-    border-radius: 20px;
-    position: relative;
-    overflow: hidden;
-    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
-  }
-
-  .glass-card::before {
-    content: '';
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-  }
-
-  .glass-card--hoverable:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.2);
-    border-color: rgba(99, 102, 241, 0.25);
-  }
-
-  .glass-card__header {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
-    margin-bottom: 1rem;
-    padding-bottom: 0.75rem;
-  }
-
-  .glass-card__title {
-    margin: 0 0 0.25rem;
-    font-size: 1.05rem;
-    font-weight: 600;
-    color: #f1f5f9;
-  }
-
-  .glass-card__subtitle {
-    margin: 0;
-    font-size: 0.82rem;
-    color: #64748b;
-  }
-
-  .glass-card--psm { padding: 1rem; }
-  .glass-card--pmd { padding: 1.5rem; }
-  .glass-card--plg { padding: 2rem; }
-</style>

package/dist/GlassNavbar.astro

@@ -1,65 +0,0 @@
----
-// src/components/lib/GlassNavbar.astro
-interface Props {
-  brand?: string;
-  brandHref?: string;
-}
-const { brand = 'Astro Components', brandHref = '/' } = Astro.props;
----
-
-<header class="glass-nav">
-  <div class="glass-nav__inner">
-    <a href={brandHref} class="glass-nav__brand">{brand}</a>
-    <nav class="glass-nav__links">
-      <slot name="links" />
-    </nav>
-    <div class="glass-nav__actions">
-      <slot name="actions" />
-    </div>
-  </div>
-</header>
-
-<style>
-  .glass-nav {
-    background: rgba(10, 10, 20, 0.7);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.07);
-    border-radius: 14px;
-  }
-
-  .glass-nav__inner {
-    padding: 0 1.5rem;
-    height: 56px;
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-  }
-
-  .glass-nav__brand {
-    font-size: 1rem;
-    font-weight: 800;
-    color: #f1f5f9;
-    text-decoration: none;
-    background: linear-gradient(135deg, #818cf8, #c084fc);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    flex-shrink: 0;
-  }
-
-  .glass-nav__links {
-    display: flex; align-items: center; gap: 0.25rem; flex: 1;
-  }
-
-  .glass-nav__links :global(a) {
-    padding: 0.4rem 0.8rem; font-size: 0.875rem; font-weight: 500;
-    color: #94a3b8; text-decoration: none; border-radius: 8px;
-    transition: color 0.2s ease, background 0.2s ease;
-  }
-
-  .glass-nav__links :global(a:hover) { color: #e2e8f0; background: rgba(255,255,255,0.06); }
-
-  .glass-nav__actions {
-    display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
-  }
-</style>

package/dist/GlowButton.astro

@@ -1,60 +0,0 @@
----
-// src/components/lib/GlowButton.astro
-interface Props {
-  color?: string;
-  href?: string;
-}
-const { color = '#6366f1', href } = Astro.props;
-const Tag = href ? 'a' : 'button';
----
-
-<Tag href={href} class="glow-btn" style={`--glow-color: ${color}`}>
-  <slot />
-</Tag>
-
-<style>
-  .glow-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.7rem 1.6rem;
-    font-family: inherit;
-    font-size: 0.9rem;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    color: #fff;
-    background: var(--glow-color);
-    border: none;
-    border-radius: 10px;
-    cursor: pointer;
-    text-decoration: none;
-    position: relative;
-    transition: transform 0.2s ease;
-    box-shadow: 0 0 20px color-mix(in srgb, var(--glow-color) 60%, transparent);
-  }
-
-  .glow-btn::after {
-    content: '';
-    position: absolute;
-    inset: -3px;
-    border-radius: 13px;
-    background: var(--glow-color);
-    opacity: 0;
-    filter: blur(16px);
-    transition: opacity 0.3s ease;
-    z-index: -1;
-  }
-
-  .glow-btn:hover { transform: translateY(-2px); }
-
-  .glow-btn:hover::after {
-    opacity: 0.5;
-    animation: pulse-glow 1.5s ease-in-out infinite;
-  }
-
-  @keyframes pulse-glow {
-    0%, 100% { opacity: 0.4; }
-    50% { opacity: 0.8; }
-  }
-</style>

package/dist/buttons/3dPushButton.astro

@@ -1,136 +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';
----
-
-<Tag 
-  href={href} 
-  type={href ? undefined : type}
-  disabled={disabled}
-  class={`push-btn push-btn--${size}`}
-  style={`--btn-color: ${color}`}
->
-  <span class="push-btn__shadow"></span>
-  <span class="push-btn__edge"></span>
-  <span class="push-btn__front">
-    <slot />
-  </span>
-</Tag>
-
-<style>
-  .push-btn {
-    --depth: 8px;
-    position: relative;
-    display: inline-flex;
-    padding: 0;
-    padding-top: var(--depth); /* Space for the elevated front */
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    outline-offset: 4px;
-    transition: filter 250ms;
-    user-select: none;
-    text-decoration: none;
-    vertical-align: middle;
-  }
-
-  .push-btn__shadow {
-    position: absolute;
-    top: var(--depth); /* Align with base */
-    left: 0;
-    width: 100%;
-    height: calc(100% - var(--depth));
-    border-radius: var(--r-md, 12px);
-    background: rgba(0, 0, 0, 0.4);
-    transform: translateY(2px);
-    filter: blur(4px);
-    transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
-  }
-
-  .push-btn__edge {
-    position: absolute;
-    top: var(--depth); /* Align with base */
-    left: 0;
-    width: 100%;
-    height: calc(100% - var(--depth));
-    border-radius: var(--r-md, 12px);
-    background: linear-gradient(
-      to left,
-      color-mix(in srgb, var(--btn-color), black 30%) 0%,
-      color-mix(in srgb, var(--btn-color), black 15%) 8%,
-      color-mix(in srgb, var(--btn-color), black 15%) 92%,
-      color-mix(in srgb, var(--btn-color), black 30%) 100%
-    );
-  }
-
-  .push-btn__front {
-    display: block;
-    position: relative;
-    padding: 12px 32px;
-    border-radius: var(--r-md, 12px);
-    font-size: 1rem;
-    font-weight: 700;
-    color: white;
-    background: var(--btn-color);
-    transform: translateY(calc(var(--depth) * -1));
-    transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
-    font-family: var(--font-sans, inherit);
-    white-space: nowrap;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .push-btn:hover:not(:disabled) {
-    filter: brightness(110%);
-  }
-
-  .push-btn:hover:not(:disabled) .push-btn__front {
-    transform: translateY(calc(var(--depth) * -1.2));
-    transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
-  }
-
-  .push-btn:hover:not(:disabled) .push-btn__shadow {
-    transform: translateY(4px);
-    transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
-  }
-
-  .push-btn:active:not(:disabled) .push-btn__front {
-    transform: translateY(-2px);
-    transition: transform 34ms;
-  }
-
-  .push-btn:active:not(:disabled) .push-btn__shadow {
-    transform: translateY(1px);
-    transition: transform 34ms;
-  }
-
-  .push-btn:disabled {
-    cursor: not-allowed;
-    filter: grayscale(1) opacity(0.5);
-    box-shadow: none;
-  }
-
-  /* Sizes */
-  .push-btn--sm { --depth: 5px; }
-  .push-btn--sm .push-btn__front { padding: 8px 18px; font-size: 0.85rem; }
-  
-  .push-btn--md { --depth: 8px; }
-  .push-btn--md .push-btn__front { padding: 12px 32px; font-size: 1rem; }
-  
-  .push-btn--lg { --depth: 12px; }
-  .push-btn--lg .push-btn__front { padding: 16px 42px; font-size: 1.15rem; }
-</style>

package/dist/buttons/AnimatedIconButton.astro

@@ -1,146 +0,0 @@
----
-interface Props {
-  href?: string;
-  type?: 'button' | 'submit' | 'reset';
-  variant?: 'primary' | 'secondary' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
-  iconPos?: 'left' | 'right';
-  disabled?: boolean;
-}
-
-const { 
-  href, 
-  type = 'button', 
-  variant = 'primary', 
-  size = 'md',
-  iconPos = 'right',
-  disabled = false 
-} = Astro.props;
-
-const Tag = href ? 'a' : 'button';
----
-
-<Tag 
-  href={href} 
-  type={href ? undefined : type}
-  disabled={disabled}
-  class:list={[
-    "icon-anim-btn",
-    `icon-anim-btn--${variant}`,
-    `icon-anim-btn--${size}`,
-    `icon-anim-btn--${iconPos}`
-  ]}
->
-  <span class="icon-anim-btn__inner">
-    {iconPos === 'left' && (
-      <span class="icon-anim-btn__icon">
-        <slot name="icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="15 18 9 12 15 6"></polyline>
-          </svg>
-        </slot>
-      </span>
-    )}
-    <span class="icon-anim-btn__text"><slot /></span>
-    {iconPos === 'right' && (
-      <span class="icon-anim-btn__icon">
-        <slot name="icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="9 18 15 12 9 6"></polyline>
-          </svg>
-        </slot>
-      </span>
-    )}
-  </span>
-</Tag>
-
-<style>
-  .icon-anim-btn {
-    --btn-bg: var(--c-primary, #6366f1);
-    --btn-color: #fff;
-    --btn-hover-bg: var(--c-primary-light, #818cf8);
-    
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--btn-bg);
-    color: var(--btn-color);
-    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: 600;
-    user-select: none;
-    white-space: nowrap;
-    overflow: hidden;
-    font-family: var(--font-sans, inherit);
-  }
-
-  .icon-anim-btn__inner {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    transition: transform 0.3s ease;
-  }
-
-  .icon-anim-btn__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.25em;
-    height: 1.25em;
-    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  .icon-anim-btn__icon svg {
-    width: 100%;
-    height: 100%;
-  }
-
-  /* Hover Animations */
-  .icon-anim-btn--right:hover:not(:disabled) .icon-anim-btn__icon {
-    transform: translateX(4px) scale(1.1);
-  }
-
-  .icon-anim-btn--left:hover:not(:disabled) .icon-anim-btn__icon {
-    transform: translateX(-4px) scale(1.1);
-  }
-
-  .icon-anim-btn:hover:not(:disabled) {
-    background: var(--btn-hover-bg);
-    box-shadow: 0 4px 20px -5px color-mix(in srgb, var(--btn-bg), transparent 40%);
-  }
-
-  .icon-anim-btn:active:not(:disabled) {
-    transform: scale(0.97);
-  }
-
-  .icon-anim-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    filter: grayscale(1);
-  }
-
-  /* Variants */
-  .icon-anim-btn--secondary {
-    --btn-bg: rgba(255, 255, 255, 0.05);
-    --btn-color: var(--c-text-1, #f8fafc);
-    --btn-hover-bg: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .icon-anim-btn--ghost {
-    --btn-bg: transparent;
-    --btn-color: var(--c-primary-light, #818cf8);
-    --btn-hover-bg: rgba(99, 102, 241, 0.08);
-    border: 1px solid rgba(99, 102, 241, 0.2);
-  }
-
-  /* Sizes */
-  .icon-anim-btn--sm { padding: 0.45rem 1.2rem; font-size: 0.85rem; }
-  .icon-anim-btn--md { padding: 0.75rem 1.8rem; font-size: 1rem; }
-  .icon-anim-btn--lg { padding: 1rem 2.5rem; font-size: 1.15rem; }
-</style>
-