astro-component-kit 0.0.1 → 0.1.0

package/dist/utilities/GlassBlurLayer.astro

@@ -1,6 +0,0 @@
----
----
-<div class="blur-layer"></div>
-<style>
-  .blur-layer { position: absolute; inset: 0; backdrop-filter: blur(20px); background: rgba(255,255,255,0.03); z-index: -1; pointer-events: none; }
-</style>

package/dist/utilities/GradientBorderMask.astro

@@ -1,7 +0,0 @@
----
----
-<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/dist/utilities/HoverLift.astro

@@ -1,7 +0,0 @@
----
----
-<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/dist/utilities/ResponsiveSpacer.astro

@@ -1,15 +0,0 @@
----
-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/dist/utilities/ResponsiveVisToggle.astro

@@ -1,11 +0,0 @@
----
-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/dist/utilities/ScrollLockParent.astro

@@ -1,11 +0,0 @@
----
----
-<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/dist/utilities/ScrollMarginTarget.astro

@@ -1,10 +0,0 @@
----
-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/dist/utilities/SlideUpReveal.astro

@@ -1,7 +0,0 @@
----
----
-<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/dist/utilities/SmoothAnchorLink.astro

@@ -1,22 +0,0 @@
----
-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/dist/utilities/StackLayering.astro

@@ -1,12 +0,0 @@
----
-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/dist/utilities/StickyObserver.astro

@@ -1,8 +0,0 @@
----
-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/dist/utilities/TextTruncate.astro

@@ -1,10 +0,0 @@
----
-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/dist/utilities/TruncateSingleLine.astro

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

package/dist/utilities/VisuallyHidden.astro

@@ -1,6 +0,0 @@
----
----
-<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/dist/utilities/index.mjs

@@ -1,20 +0,0 @@
-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';

package/dist/utilities/index.ts

@@ -1,20 +0,0 @@
-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';

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

@@ -1,11 +0,0 @@
----
-interface Props { ratio?: string; }
-const { ratio = '16 / 9' } = Astro.props;
----
-<div class="aspect-box" style={`aspect-ratio: ${ratio}`}>
-  <slot />
-</div>
-<style>
-  .aspect-box { width: 100%; background: rgba(30, 41, 59, 0.5); overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); }
-  .aspect-box :global(img, video, iframe) { width: 100%; height: 100%; object-fit: cover; }
-</style>

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

@@ -1,6 +0,0 @@
----
----
-<div class="mesh-bg"></div>
-<style>
-  .mesh-bg { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
-</style>

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

@@ -1,7 +0,0 @@
----
----
-<div class="c-mask"><slot /></div>
-<style>
-  .c-mask { width: 100px; height: 100px; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
-  .c-mask :global(*) { width: 100%; height: 100%; object-fit: cover; }
-</style>

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

@@ -1,7 +0,0 @@
----
----
-<button class="ripple-bt"><slot /></button>
-<style>
-  .ripple-bt { background: none; border: none; padding: 0; outline: none; transition: transform 0.1s; cursor: pointer; border-radius: inherit; }
-  .ripple-bt:active { transform: scale(0.95); }
-</style>

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

@@ -1,11 +0,0 @@
----
-interface Props { duration?: string; delay?: string; }
-const { duration = '0.6s', delay = '0s' } = Astro.props;
----
-<div class="fade-in" style={`--d: ${duration}; --l: ${delay}`}>
-  <slot />
-</div>
-<style>
-  .fade-in { opacity: 0; animation: fade-in-anim var(--d) cubic-bezier(0.16, 1, 0.3, 1) var(--l) forwards; }
-  @keyframes fade-in-anim { to { opacity: 1; } }
-</style>

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

@@ -1,7 +0,0 @@
----
----
-<div class="ratio-3-2"><slot /></div>
-<style>
-  .ratio-3-2 { width: 100%; aspect-ratio: 3 / 2; position: relative; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); }
-  .ratio-3-2 :global(*) { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
-</style>

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

@@ -1,6 +0,0 @@
----
----
-<div class="blur-layer"></div>
-<style>
-  .blur-layer { position: absolute; inset: 0; backdrop-filter: blur(20px); background: rgba(255,255,255,0.03); z-index: -1; pointer-events: none; }
-</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,20 +0,0 @@
-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';