astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/forms/PhoneCountryInput.astro

@@ -0,0 +1,145 @@
+---
+/**
+ * PhoneCountryInput — Accessible phone input with country dial code selector and dark glass styling.
+ * 
+ * @param {string} id - HTML ID for the phone input.
+ * @param {string} label - Input label text. Default is 'Phone Number'.
+ * @param {string} name - Form field name. Default is 'phone'.
+ * @param {string} placeholder - Phone placeholder. Default is '612 345 678'.
+ * @param {boolean} required - HTML required field attribute.
+ */
+interface Props {
+  id: string;
+  label?: string;
+  name?: string;
+  placeholder?: string;
+  required?: boolean;
+}
+
+const {
+  id = 'phone-number-input',
+  label = 'Phone Number',
+  name = 'phone',
+  placeholder = '612 345 678',
+  required = false,
+} = Astro.props;
+
+const countries = [
+  { code: '+34', flag: '🇪🇸', name: 'ES' },
+  { code: '+1', flag: '🇺🇸', name: 'US' },
+  { code: '+44', flag: '🇬🇧', name: 'UK' },
+  { code: '+49', flag: '🇩🇪', name: 'DE' },
+  { code: '+33', flag: '🇫🇷', name: 'FR' },
+  { code: '+52', flag: '🇲🇽', name: 'MX' },
+  { code: '+54', flag: '🇦🇷', name: 'AR' },
+];
+---
+
+<div class="phone-group">
+  <label for={id} class="phone-group__label">{label}</label>
+
+  <div class="phone-group__wrap">
+    <div class="phone-group__prefix">
+      <select class="phone-group__select" aria-label="Country calling code" name={`${name}_country`}>
+        {countries.map((c) => (
+          <option value={c.code}>
+            {c.flag} {c.code}
+          </option>
+        ))}
+      </select>
+      <span class="phone-group__arrow" aria-hidden="true">▾</span>
+    </div>
+
+    <input
+      type="tel"
+      id={id}
+      name={name}
+      placeholder={placeholder}
+      required={required}
+      class="phone-group__input"
+      autocomplete="tel-national"
+    />
+  </div>
+</div>
+
+<style>
+  .phone-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-2, 0.5rem);
+    width: 100%;
+    max-width: 380px;
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+
+  .phone-group__label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--c-text-1, #ffffff);
+  }
+
+  .phone-group__wrap {
+    display: flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--r-md, 12px);
+    overflow: hidden;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .phone-group__wrap:focus-within {
+    border-color: rgba(184, 134, 11, 0.5);
+    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
+  }
+
+  .phone-group__prefix {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .phone-group__select {
+    appearance: none;
+    -webkit-appearance: none;
+    background: transparent;
+    border: none;
+    color: var(--c-text-1, #ffffff);
+    font-size: 0.88rem;
+    font-weight: 600;
+    padding: 0.75rem 1.6rem 0.75rem 0.85rem;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .phone-group__select option {
+    background: #111116;
+    color: #ffffff;
+  }
+
+  .phone-group__arrow {
+    position: absolute;
+    right: 0.5rem;
+    font-size: 0.7rem;
+    color: var(--c-text-3, #737373);
+    pointer-events: none;
+  }
+
+  .phone-group__input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    padding: 0.75rem 1rem;
+    color: var(--c-text-1, #ffffff);
+    font-size: 0.92rem;
+    font-family: inherit;
+    outline: none;
+  }
+
+  .phone-group__input::placeholder {
+    color: rgba(255, 255, 255, 0.3);
+  }
+</style>

package/src/components/lib/forms/TagsAutocompleteInput.astro

@@ -0,0 +1,249 @@
+---
+/**
+ * TagsAutocompleteInput — Tag entry field with pill badges, keyboard deletion, and suggestion dropdown.
+ * 
+ * @param {string} id - HTML ID for the tag input.
+ * @param {string} label - Input label. Default is 'Tags'.
+ * @param {string[]} initialTags - Pre-populated list of tags. Default is ['Astro', 'TypeScript'].
+ * @param {string[]} suggestions - Autocomplete candidate options.
+ * @param {string} placeholder - Input placeholder. Default is 'Add tag & press Enter...'.
+ */
+interface Props {
+  id: string;
+  label?: string;
+  initialTags?: string[];
+  suggestions?: string[];
+  placeholder?: string;
+}
+
+const {
+  id = 'tags-autocomplete',
+  label = 'Tags',
+  initialTags = ['Astro', 'TypeScript'],
+  suggestions = ['React', 'Tailwind', 'Three.js', 'SSR', 'Vite', 'GraphQL'],
+  placeholder = 'Add tag & press Enter...',
+} = Astro.props;
+---
+
+<div class="tags-field" data-tags-root>
+  <label for={id} class="tags-field__label">{label}</label>
+
+  <div class="tags-field__box" data-tags-box>
+    <div class="tags-field__list" data-tags-list>
+      {initialTags.map((tag) => (
+        <span class="tag-pill" data-tag={tag}>
+          <span class="tag-pill__name">{tag}</span>
+          <button type="button" class="tag-pill__remove" aria-label={`Remove tag ${tag}`} data-tag-remove>×</button>
+        </span>
+      ))}
+    </div>
+
+    <input
+      type="text"
+      id={id}
+      placeholder={placeholder}
+      class="tags-field__input"
+      data-tags-input
+      autocomplete="off"
+    />
+  </div>
+
+  <div class="tags-field__suggestions" data-tags-suggestions hidden>
+    {suggestions.map((sug) => (
+      <button type="button" class="sug-item" data-sug-val={sug}>
+        + {sug}
+      </button>
+    ))}
+  </div>
+</div>
+
+<style>
+  .tags-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-2, 0.5rem);
+    width: 100%;
+    max-width: 440px;
+    font-family: var(--font-sans, system-ui, sans-serif);
+    position: relative;
+  }
+
+  .tags-field__label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--c-text-1, #ffffff);
+  }
+
+  .tags-field__box {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 0.5rem 0.75rem;
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--r-md, 12px);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    min-height: 44px;
+  }
+
+  .tags-field__box:focus-within {
+    border-color: rgba(184, 134, 11, 0.5);
+    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
+  }
+
+  .tags-field__list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .tag-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0.25rem 0.65rem;
+    background: rgba(184, 134, 11, 0.15);
+    border: 1px solid rgba(184, 134, 11, 0.35);
+    border-radius: var(--r-full, 9999px);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--c-accent, #fef3c7);
+    user-select: none;
+    animation: pill-pop 0.2s ease-out;
+  }
+
+  @keyframes pill-pop {
+    from { transform: scale(0.8); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+  }
+
+  .tag-pill__remove {
+    background: transparent;
+    border: none;
+    color: var(--c-accent, #fef3c7);
+    font-size: 1rem;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0 2px;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+  }
+
+  .tag-pill__remove:hover {
+    opacity: 1;
+    color: #ef4444;
+  }
+
+  .tags-field__input {
+    flex: 1;
+    min-width: 140px;
+    background: transparent;
+    border: none;
+    color: var(--c-text-1, #ffffff);
+    font-size: 0.88rem;
+    outline: none;
+    padding: 0.2rem 0;
+  }
+
+  .tags-field__input::placeholder {
+    color: rgba(255, 255, 255, 0.3);
+  }
+
+  .tags-field__suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 4px;
+    padding: 0.4rem;
+    background: rgba(12, 12, 16, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-sm, 8px);
+  }
+
+  .sug-item {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-full, 9999px);
+    color: var(--c-text-2, #a3a3a3);
+    font-size: 0.72rem;
+    font-weight: 600;
+    padding: 0.2rem 0.6rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .sug-item:hover {
+    background: rgba(184, 134, 11, 0.2);
+    border-color: rgba(184, 134, 11, 0.4);
+    color: var(--c-text-1, #ffffff);
+  }
+</style>
+
+<script>
+  function setupTagsFields() {
+    document.querySelectorAll('[data-tags-root]').forEach((root) => {
+      const input = root.querySelector('[data-tags-input]') as HTMLInputElement;
+      const list = root.querySelector('[data-tags-list]') as HTMLElement;
+      const suggestions = root.querySelector('[data-tags-suggestions]') as HTMLElement;
+      if (!input || !list) return;
+
+      function addTag(text: string) {
+        const clean = text.trim();
+        if (!clean) return;
+
+        // Check duplicate
+        const exists = Array.from(list.querySelectorAll('.tag-pill__name')).some(
+          (el) => el.textContent?.toLowerCase() === clean.toLowerCase()
+        );
+        if (exists) return;
+
+        const pill = document.createElement('span');
+        pill.className = 'tag-pill';
+        pill.setAttribute('data-tag', clean);
+        pill.innerHTML = `
+          <span class="tag-pill__name">${clean}</span>
+          <button type="button" class="tag-pill__remove" aria-label="Remove tag ${clean}" data-tag-remove>×</button>
+        `;
+        list.appendChild(pill);
+        input.value = '';
+      }
+
+      list.addEventListener('click', (e) => {
+        const target = e.target as HTMLElement;
+        if (target.matches('[data-tag-remove]')) {
+          const pill = target.closest('.tag-pill');
+          if (pill) pill.remove();
+        }
+      });
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ',') {
+          e.preventDefault();
+          addTag(input.value);
+        } else if (e.key === 'Backspace' && !input.value) {
+          const last = list.querySelector('.tag-pill:last-child');
+          if (last) last.remove();
+        }
+      });
+
+      input.addEventListener('focus', () => {
+        if (suggestions) suggestions.hidden = false;
+      });
+
+      if (suggestions) {
+        suggestions.addEventListener('click', (e) => {
+          const btn = (e.target as HTMLElement).closest('[data-sug-val]') as HTMLElement;
+          if (btn) {
+            const val = btn.getAttribute('data-sug-val');
+            if (val) addTag(val);
+          }
+        });
+      }
+    });
+  }
+
+  setupTagsFields();
+  document.addEventListener('astro:page-load', setupTagsFields);
+</script>

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

@@ -21,3 +21,8 @@ export { default as SearchReveal } from './SearchReveal.astro';
 export { default as SegmentedControl } from './SegmentedControl.astro';
 export { default as SimpleFileInput } from './SimpleFileInput.astro';
 export { default as StepperInput } from './StepperInput.astro';
+export { default as GlassInlineToggleGroup } from './GlassInlineToggleGroup.astro';
+export { default as PasswordStrengthInput } from './PasswordStrengthInput.astro';
+export { default as PhoneCountryInput } from './PhoneCountryInput.astro';
+export { default as TagsAutocompleteInput } from './TagsAutocompleteInput.astro';
+

package/src/components/lib/index.ts

@@ -3,6 +3,8 @@ export * from './buttons/index';
 export * from './cards/index';
 export * from './charts/index';
 export * from './data/index';
+export * from './ecommerce/index';
+export * from './app/index';
 export * from './feedback/index';
 export * from './forms/index';
 export * from './layout/index';

package/src/components/lib/layout/BentoGrid3.astro

@@ -9,6 +9,7 @@ interface Props {
 const { className = '' } = Astro.props;
 ---
 
+<div class="cq-bento-grid3-cq">
 <div class={`bento ${className}`}>
   <div class="item wide">
     <slot name="1">
@@ -35,8 +36,9 @@ const { className = '' } = Astro.props;
     </slot>
   </div>
 </div>
-
+</div>
 <style>
+  .cq-bento-grid3-cq { container-type: inline-size; }
   .bento {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -45,8 +47,8 @@ const { className = '' } = Astro.props;
     width: 100%;
   }
   .item {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 16px;
     padding: 1.25rem;
     display: flex;
@@ -69,7 +71,7 @@ const { className = '' } = Astro.props;
   .tall {
     grid-row: span 2;
   }
-  @media (max-width: 768px) {
+  @container (max-width: 768px) {
     .bento {
       grid-template-columns: 1fr;
       grid-auto-rows: auto;

package/src/components/lib/layout/CenterFixedBox.astro

@@ -28,7 +28,7 @@ const { className = '' } = Astro.props;
     background: rgba(0, 0, 0, 0.2);
     border-radius: var(--r-lg, 12px);
     overflow: hidden;
-    border: 1px dashed rgba(255, 255, 255, 0.15);
+    border: 1px dashed rgb(var(--ink-rgb, 255 255 255) / 0.15);
   }
   .abs-center {
     position: absolute;
@@ -40,7 +40,7 @@ const { className = '' } = Astro.props;
   .abs-card {
     padding: 1.25rem 2rem;
     background: rgba(20, 20, 20, 0.85);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: 12px;
     text-align: center;
   }

package/src/components/lib/layout/CenteredContainer.astro

@@ -25,11 +25,13 @@ interface Props {
 const { maxWidth = '1200px', padding = '1.5rem', className = '' } = Astro.props;
 ---
 
+<div class="cq-centered-container-cq">
 <div class:list={['centered-container', className]} style={`--container-max: ${maxWidth}; --container-pad: ${padding}`}>
   <slot />
 </div>
-
+</div>
 <style>
+  .cq-centered-container-cq { container-type: inline-size; }
   .centered-container {
     width: 100%;
     max-width: var(--container-max);
@@ -38,7 +40,7 @@ const { maxWidth = '1200px', padding = '1.5rem', className = '' } = Astro.props;
     padding-right: var(--container-pad);
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .centered-container {
       padding-left: 1rem;
       padding-right: 1rem;

package/src/components/lib/layout/ClusterHorizontal.astro

@@ -31,8 +31,8 @@ const { gap = '0.75rem', align = 'center', className = '' } = Astro.props;
   }
   .cluster-tag {
     padding: 0.4rem 0.8rem;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: 9999px;
     font-size: 0.8rem;
     color: #94a3b8;

package/src/components/lib/layout/DiagonalSectionDivider.astro

@@ -0,0 +1,69 @@
+---
+/**
+ * DiagonalSectionDivider — Angled SVG/clip-path section divider creating fluid diagonal page transitions.
+ * 
+ * @param {'top' | 'bottom'} position - Attachment position. Default is 'bottom'.
+ * @param {'left-to-right' | 'right-to-left'} direction - Slant angle direction. Default is 'left-to-right'.
+ * @param {string} height - Height of the diagonal incline in pixels. Default is '60px'.
+ * @param {string} fillColor - Fill color for the divider polygon. Default is '#050505'.
+ */
+interface Props {
+  position?: 'top' | 'bottom';
+  direction?: 'left-to-right' | 'right-to-left';
+  height?: string;
+  fillColor?: string;
+}
+
+const {
+  position = 'bottom',
+  direction = 'left-to-right',
+  height = '60px',
+  fillColor = '#050505',
+} = Astro.props;
+
+const isLtr = direction === 'left-to-right';
+const points = isLtr
+  ? position === 'bottom' ? '0,100 100,0 100,100' : '0,0 100,0 100,100'
+  : position === 'bottom' ? '0,0 0,100 100,100' : '0,0 100,0 0,100';
+---
+
+<div
+  class:list={['diagonal-divider', `diagonal-divider--${position}`]}
+  style={`--div-height: ${height}; --div-color: ${fillColor};`}
+  aria-hidden="true"
+>
+  <svg
+    viewBox="0 0 100 100"
+    preserveAspectRatio="none"
+    class="diagonal-divider__svg"
+  >
+    <polygon points={points} fill={fillColor} />
+  </svg>
+</div>
+
+<style>
+  .diagonal-divider {
+    position: relative;
+    width: 100%;
+    height: var(--div-height);
+    overflow: hidden;
+    line-height: 0;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .diagonal-divider--bottom {
+    margin-bottom: calc(-1 * var(--div-height));
+  }
+
+  .diagonal-divider--top {
+    margin-top: calc(-1 * var(--div-height));
+  }
+
+  .diagonal-divider__svg {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/src/components/lib/layout/FeatureHero.astro

@@ -39,6 +39,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-feature-hero-cq">
 <section class:list={['feature-hero', className]}>
   <div class="feature-hero__bg" aria-hidden="true">
     <div class="feature-hero__gradient" style={`--gradient-from: ${gradientFrom}; --gradient-to: ${gradientTo}`}></div>
@@ -52,8 +53,9 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-feature-hero-cq { container-type: inline-size; }
   .feature-hero {
     position: relative;
     padding: var(--sp-16) var(--sp-6);
@@ -142,7 +144,7 @@ const {
     }
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .feature-hero {
       padding: var(--sp-12) var(--sp-4);
     }

package/src/components/lib/layout/FooterCenteredMinimal.astro

@@ -21,6 +21,7 @@ interface Props {
 const { copyright = '© 2026 Built with Astro Components Kit.', className = '' } = Astro.props;
 ---
 
+<div class="cq-footer-centered-minimal-cq">
 <footer class:list={['footer-centered', className]}>
   <div class="footer-centered__inner">
     <div class="footer-centered__logo">
@@ -29,8 +30,9 @@ const { copyright = '© 2026 Built with Astro Components Kit.', className = '' }
     <p class="footer-centered__copy">{copyright}</p>
   </div>
 </footer>
-
+</div>
 <style>
+  .cq-footer-centered-minimal-cq { container-type: inline-size; }
   .footer-centered {
     border-top: 1px solid var(--c-border);
     padding: var(--sp-10) var(--sp-6);
@@ -54,7 +56,7 @@ const { copyright = '© 2026 Built with Astro Components Kit.', className = '' }
     margin: 0;
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .footer-centered {
       padding: var(--sp-8) var(--sp-4);
     }

package/src/components/lib/layout/FullBleedSection.astro

@@ -27,8 +27,8 @@ const { className = '' } = Astro.props;
     margin-left: -50vw;
     margin-right: -50vw;
     background: rgba(30, 41, 59, 0.4);
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
+    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
     padding: 3.5rem 1.5rem;
     box-sizing: border-box;
   }

package/src/components/lib/layout/GalleryGrid4.astro

@@ -28,8 +28,8 @@ const { className = '' } = Astro.props;
   .gal-grid :global(> *), .gal-item {
     aspect-ratio: 1;
     border-radius: 12px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     display: flex;
     align-items: center;
     justify-content: center;