astro-component-kit 0.0.1 → 0.1.0

package/dist/buttons/BorderDrawButton.astro

@@ -1,112 +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={`draw-btn draw-btn--${size}`}
-  style={`--btn-color: ${color}`}
->
-  <span class="draw-btn__text"><slot /></span>
-</Tag>
-
-<style>
-  .draw-btn {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    color: var(--c-text-2, #94a3b8);
-    border: 2px solid rgba(255, 255, 255, 0.05);
-    cursor: pointer;
-    text-decoration: none;
-    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-    font-weight: 600;
-    user-select: none;
-    white-space: nowrap;
-    font-family: var(--font-sans, inherit);
-  }
-
-  .draw-btn__text {
-    position: relative;
-    z-index: 2;
-    transition: color 0.5s ease;
-  }
-
-  .draw-btn::before,
-  .draw-btn::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 2px solid transparent;
-    z-index: 1;
-    transition: width 0.2s 0.2s ease-out, height 0.2s ease-out, border-color 0.1s;
-  }
-
-  .draw-btn::before {
-    top: -2px;
-    left: -2px;
-  }
-
-  .draw-btn::after {
-    bottom: -2px;
-    right: -2px;
-  }
-
-  .draw-btn:hover:not(:disabled) {
-    color: #fff;
-    border-color: transparent;
-  }
-
-  .draw-btn:hover:not(:disabled)::before {
-    width: calc(100% + 4px);
-    height: calc(100% + 4px);
-    border-top-color: var(--btn-color);
-    border-right-color: var(--btn-color);
-    transition: width 0.2s ease-out, height 0.2s 0.2s ease-out;
-  }
-
-  .draw-btn:hover:not(:disabled)::after {
-    width: calc(100% + 4px);
-    height: calc(100% + 4px);
-    border-bottom-color: var(--btn-color);
-    border-left-color: var(--btn-color);
-    transition: width 0.2s ease-out, height 0.2s 0.2s ease-out;
-  }
-
-  .draw-btn:active:not(:disabled) {
-    transform: scale(0.98);
-  }
-
-  .draw-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    filter: grayscale(1);
-  }
-
-  /* Sizes */
-  .draw-btn--sm { padding: 0.45rem 1.2rem; font-size: 0.85rem; }
-  .draw-btn--md { padding: 0.75rem 1.8rem; font-size: 1rem; }
-  .draw-btn--lg { padding: 1.1rem 2.5rem; font-size: 1.2rem; }
-</style>
-

package/dist/buttons/CyberpunkButton.astro

@@ -1,148 +0,0 @@
----
-interface Props {
-  href?: string;
-  type?: 'button' | 'submit' | 'reset';
-  primaryColor?: string;
-  secondaryColor?: string;
-  size?: 'sm' | 'md' | 'lg';
-  label?: string; // Used for glitch effect text
-}
-
-const { 
-  href, 
-  type = 'button', 
-  primaryColor = '#ff003c', 
-  secondaryColor = '#00e0ff',
-  size = 'md',
-  label = "READY"
-} = Astro.props;
-
-const Tag = href ? 'a' : 'button';
----
-
-<Tag 
-  href={href} 
-  type={href ? undefined : type}
-  class={`cyber-btn cyber-btn--${size}`}
-  style={`--primary-color: ${primaryColor}; --secondary-color: ${secondaryColor};`}
-  data-text={label}
->
-  <span class="cyber-btn__inner">
-    <slot>{label}</slot>
-  </span>
-  <span class="cyber-btn__glitch"></span>
-  <span class="cyber-btn__tag">R25</span>
-</Tag>
-
-<style>
-  .cyber-btn {
-    --glitch-width: 4px;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--primary-color);
-    color: #fff;
-    border: none;
-    font-family: var(--font-sans, 'Inter', sans-serif);
-    font-weight: 800;
-    text-transform: uppercase;
-    font-style: italic;
-    cursor: pointer;
-    text-decoration: none;
-    transition: all 0.2s;
-    clip-path: polygon(-10% 0, 100% 0, 100% 65%, 90% 103%, 0 103%, -10% 70%);
-    user-select: none;
-    white-space: nowrap;
-  }
-
-  .cyber-btn__inner {
-    position: relative;
-    z-index: 2;
-    padding: 0.8rem 2.2rem;
-    display: block;
-  }
-
-  /* Glitch Layers */
-  .cyber-btn::before,
-  .cyber-btn::after,
-  .cyber-btn__glitch {
-    content: attr(data-text);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    z-index: 1;
-  }
-
-  .cyber-btn::before {
-    background: var(--secondary-color);
-    clip-path: polygon(0 0, 100% 0, 100% 5%, 0 5%);
-    transform: translate(-4px, -2px);
-  }
-
-  .cyber-btn::after {
-    background: #f3f3f3;
-    clip-path: polygon(0 95%, 100% 95%, 100% 100%, 0 100%);
-    transform: translate(4px, 2px);
-    color: #000;
-  }
-
-  .cyber-btn__tag {
-    position: absolute;
-    padding: 1px 4px;
-    letter-spacing: 1px;
-    line-height: 1;
-    bottom: -2px;
-    right: 5%;
-    font-weight: 400;
-    font-size: 0.6rem;
-    background: #000;
-    color: var(--secondary-color);
-    z-index: 3;
-    font-style: normal;
-  }
-
-  /* Hover Animations */
-  .cyber-btn:hover {
-    transform: scale(1.03);
-    background: var(--primary-color);
-    box-shadow: 10px 0px 0px var(--secondary-color);
-  }
-
-  .cyber-btn:hover::before,
-  .cyber-btn:hover::after,
-  .cyber-btn:hover .cyber-btn__glitch {
-    opacity: 1;
-    animation: glitch 0.3s infinite;
-  }
-
-  .cyber-btn:hover::before {
-    animation-direction: alternate-reverse;
-  }
-
-  .cyber-btn:active {
-    transform: scale(0.98);
-    filter: brightness(1.2);
-  }
-
-  @keyframes glitch {
-    0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); transform: translate(0); }
-    20% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); transform: translate(-5px); }
-    40% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); transform: translate(5px); }
-    60% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); transform: translate(-5px); }
-    80% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); transform: translate(5px); }
-    100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); transform: translate(0); }
-  }
-
-  /* Sizes */
-  .cyber-btn--sm .cyber-btn__inner { padding: 0.5rem 1.4rem; font-size: 0.85rem; }
-  .cyber-btn--md .cyber-btn__inner { padding: 0.8rem 2.2rem; font-size: 1.05rem; }
-  .cyber-btn--lg .cyber-btn__inner { padding: 1.1rem 3rem; font-size: 1.25rem; }
-</style>
-

package/dist/buttons/DoubleBorderButton.astro

@@ -1,131 +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={`double-border-btn double-border-btn--${variant} double-border-btn--${size}`}
->
-  <span class="double-border-btn__content"><slot /></span>
-</Tag>
-
-<style>
-  .double-border-btn {
-    --offset: 5px;
-    --border-color: rgba(255, 255, 255, 0.4);
-    --hover-color: #fff;
-    
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    background: transparent;
-    color: #fff;
-    border: 1px solid var(--border-color);
-    border-radius: var(--r-sm, 4px);
-    cursor: pointer;
-    text-decoration: none;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 1;
-    user-select: none;
-    white-space: nowrap;
-    font-family: var(--font-sans, inherit);
-    font-weight: 500;
-  }
-
-  .double-border-btn__content {
-    display: block;
-    padding: 0.6rem 1.6rem;
-  }
-
-  .double-border-btn::before {
-    content: '';
-    position: absolute;
-    top: var(--offset);
-    left: var(--offset);
-    width: 100%;
-    height: 100%;
-    border: 1px solid var(--border-color);
-    border-radius: inherit;
-    z-index: -1;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    opacity: 0.5;
-  }
-
-  .double-border-btn:hover:not(:disabled) {
-    color: var(--hover-color);
-    border-color: var(--hover-color);
-    transform: translate(calc(var(--offset) * -0.5), calc(var(--offset) * -0.5));
-  }
-
-  .double-border-btn:hover:not(:disabled)::before {
-    top: calc(var(--offset) * 1.5);
-    left: calc(var(--offset) * 1.5);
-    border-color: var(--hover-color);
-    opacity: 1;
-  }
-
-  .double-border-btn:active:not(:disabled) {
-    transform: translate(0, 0);
-  }
-
-  .double-border-btn:active:not(:disabled)::before {
-    top: 0;
-    left: 0;
-  }
-
-  .double-border-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    filter: grayscale(1);
-  }
-
-  /* Variants */
-  .double-border-btn--primary {
-    --border-color: rgba(99, 102, 241, 0.5);
-    --hover-color: #818cf8;
-    color: #818cf8;
-  }
-
-  .double-border-btn--secondary {
-    --border-color: rgba(255, 255, 255, 0.3);
-    --hover-color: #fff;
-    color: #fff;
-  }
-
-  .double-border-btn--ghost {
-    --border-color: rgba(255, 255, 255, 0.1);
-    --hover-color: rgba(255, 255, 255, 0.8);
-    color: rgba(255, 255, 255, 0.6);
-  }
-
-  /* Sizes */
-  .double-border-btn--sm { --offset: 3px; }
-  .double-border-btn--sm .double-border-btn__content { padding: 0.45rem 1rem; font-size: 0.85rem; }
-  
-  .double-border-btn--md { --offset: 5px; }
-  .double-border-btn--md .double-border-btn__content { padding: 0.65rem 1.6rem; font-size: 1rem; }
-  
-  .double-border-btn--lg { --offset: 8px; }
-  .double-border-btn--lg .double-border-btn__content { padding: 0.85rem 2.2rem; font-size: 1.15rem; }
-</style>
-

package/dist/buttons/GhostOutlineButton.astro

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

@@ -1,165 +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={`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>
-