astro-component-kit 0.0.1

package/dist/buttons/3dPushButton.astro

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

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

package/dist/buttons/BorderDrawButton.astro

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

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

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