astro-component-kit 0.0.1

package/src/components/lib/utilities/GradientBorderMask.astro

@@ -0,0 +1,7 @@
+---
+---
+<div class="grad-border-box"><slot /></div>
+<style>
+  .grad-border-box { position: relative; padding: 2rem; background: #080b14; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
+  .grad-border-box::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; background: linear-gradient(135deg, #6366f1, #c084fc); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
+</style>

package/src/components/lib/utilities/HoverLift.astro

@@ -0,0 +1,7 @@
+---
+---
+<div class="h-lift"><slot /></div>
+<style>
+  .h-lift { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s; cursor: pointer; display: inline-block; width: 100%; }
+  .h-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
+</style>

package/src/components/lib/utilities/ResponsiveSpacer.astro

@@ -0,0 +1,15 @@
+---
+interface Props { size?: 'sm' | 'md' | 'lg' | 'xl'; }
+const { size = 'md' } = Astro.props;
+---
+<div class:list={['spacer', `spacer--${size}`]}></div>
+<style>
+  .spacer--sm { height: 1rem; }
+  .spacer--md { height: 2.5rem; }
+  .spacer--lg { height: 5rem; }
+  .spacer--xl { height: 10rem; }
+  @media (max-width: 768px) {
+    .spacer--lg { height: 2.5rem; }
+    .spacer--xl { height: 4rem; }
+  }
+</style>

package/src/components/lib/utilities/ResponsiveVisToggle.astro

@@ -0,0 +1,11 @@
+---
+interface Props { hideOn?: 'mobile' | 'desktop'; }
+const { hideOn } = Astro.props;
+---
+<div class:list={['vis-toggle', hideOn ? `hide-${hideOn}` : '']}>
+  <slot />
+</div>
+<style>
+  @media (max-width: 768px) { .hide-mobile { display: none !important; } }
+  @media (min-width: 769px) { .hide-desktop { display: none !important; } }
+</style>

package/src/components/lib/utilities/ScrollLockParent.astro

@@ -0,0 +1,11 @@
+---
+---
+<div class="scroll-lock-triggers">
+  <div class="scroll-lock-trigger" onclick="document.body.style.overflow = 'hidden'">Lock Scroll</div>
+  <div class="scroll-lock-trigger" onclick="document.body.style.overflow = 'auto'">Unlock Scroll</div>
+</div>
+<style>
+  .scroll-lock-triggers { display: flex; gap: 1rem; }
+  .scroll-lock-trigger { cursor: pointer; color: #6366f1; text-decoration: underline; font-weight: 700; font-size: 0.9rem; }
+  .scroll-lock-trigger:hover { color: #818cf8; }
+</style>

package/src/components/lib/utilities/ScrollMarginTarget.astro

@@ -0,0 +1,10 @@
+---
+interface Props { offset?: string; id?: string; }
+const { offset = '100px', id } = Astro.props;
+---
+<section class="s-target" style={`scroll-margin-top: ${offset}`} id={id}>
+  <slot />
+</section>
+<style>
+  .s-target { position: relative; }
+</style>

package/src/components/lib/utilities/SlideUpReveal.astro

@@ -0,0 +1,7 @@
+---
+---
+<div class="s-reveal"><slot /></div>
+<style>
+  .s-reveal { opacity: 0; transform: translateY(20px); animation: s-rev 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+  @keyframes s-rev { to { opacity: 1; transform: translateY(0); } }
+</style>

package/src/components/lib/utilities/SmoothAnchorLink.astro

@@ -0,0 +1,22 @@
+---
+interface Props { to: string; }
+const { to } = Astro.props;
+---
+<a href={`#${to}`} class="smooth-s"><slot /></a>
+<style>
+  .smooth-s { color: #6366f1; font-weight: 800; text-decoration: none; cursor: pointer; transition: 0.2s; }
+  .smooth-s:hover { color: #818cf8; text-decoration: underline; }
+</style>
+<script>
+  // Ensuring smooth scroll behavior for modern browsers if not set in CSS
+  document.querySelectorAll('.smooth-s').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+      e.preventDefault();
+      const targetId = this.getAttribute('href').substring(1);
+      const targetElement = document.getElementById(targetId);
+      if (targetElement) {
+        targetElement.scrollIntoView({ behavior: 'smooth' });
+      }
+    });
+  });
+</script>

package/src/components/lib/utilities/StackLayering.astro

@@ -0,0 +1,12 @@
+---
+interface Props { layer?: 'base' | 'nav' | 'overlay' | 'toast'; }
+const { layer = 'base' } = Astro.props;
+---
+<div class:list={['z-stack', `z-${layer}`]}><slot /></div>
+<style>
+  .z-stack { position: relative; }
+  .z-base { z-index: 1; }
+  .z-nav { z-index: 1000; }
+  .z-overlay { z-index: 2000; }
+  .z-toast { z-index: 3000; }
+</style>

package/src/components/lib/utilities/StickyObserver.astro

@@ -0,0 +1,8 @@
+---
+interface Props { offset?: string; }
+const { offset = '1rem' } = Astro.props;
+---
+<div class="sticky-u" style={`top: ${offset}`}><slot /></div>
+<style>
+  .sticky-u { position: sticky; z-index: 10; }
+</style>

package/src/components/lib/utilities/TextTruncate.astro

@@ -0,0 +1,10 @@
+---
+interface Props { lines?: number; }
+const { lines = 1 } = Astro.props;
+---
+<div class="truncate" style={`-webkit-line-clamp: ${lines}`}>
+  <slot />
+</div>
+<style>
+  .truncate { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
+</style>

package/src/components/lib/utilities/TruncateSingleLine.astro

@@ -0,0 +1,6 @@
+---
+---
+<div class="s-trunc"><slot /></div>
+<style>
+  .s-trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
+</style>

package/src/components/lib/utilities/VisuallyHidden.astro

@@ -0,0 +1,6 @@
+---
+---
+<span class="sr-only"><slot /></span>
+<style>
+  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
+</style>

package/src/components/lib/utilities/index.ts

@@ -0,0 +1,20 @@
+export { default as AspectRatioBox } from './AspectRatioBox.astro';
+export { default as BackgroundDotPattern } from './BackgroundDotPattern.astro';
+export { default as CircularMask } from './CircularMask.astro';
+export { default as ClickRippleWrapper } from './ClickRippleWrapper.astro';
+export { default as FadeInWrapper } from './FadeInWrapper.astro';
+export { default as FixedRatioImage } from './FixedRatioImage.astro';
+export { default as GlassBlurLayer } from './GlassBlurLayer.astro';
+export { default as GradientBorderMask } from './GradientBorderMask.astro';
+export { default as HoverLift } from './HoverLift.astro';
+export { default as ResponsiveSpacer } from './ResponsiveSpacer.astro';
+export { default as ResponsiveVisToggle } from './ResponsiveVisToggle.astro';
+export { default as ScrollLockParent } from './ScrollLockParent.astro';
+export { default as ScrollMarginTarget } from './ScrollMarginTarget.astro';
+export { default as SlideUpReveal } from './SlideUpReveal.astro';
+export { default as SmoothAnchorLink } from './SmoothAnchorLink.astro';
+export { default as StackLayering } from './StackLayering.astro';
+export { default as StickyObserver } from './StickyObserver.astro';
+export { default as TextTruncate } from './TextTruncate.astro';
+export { default as TruncateSingleLine } from './TruncateSingleLine.astro';
+export { default as VisuallyHidden } from './VisuallyHidden.astro';