astro-component-kit 0.3.1 → 0.4.0

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/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/HolyGrailGrid.astro

@@ -0,0 +1,125 @@
+---
+/**
+ * HolyGrailGrid — Production-grade CSS grid layout container with sticky header, dual sidebars, fluid content, and footer.
+ * 
+ * @param {string} leftWidth - Left sidebar width. Default is '240px'.
+ * @param {string} rightWidth - Right sidebar width. Default is '220px'.
+ * @param {string} gap - Spacing gap between grid regions. Default is '1.5rem'.
+ * @param {string} className - Optional CSS class.
+ */
+interface Props {
+  leftWidth?: string;
+  rightWidth?: string;
+  gap?: string;
+  className?: string;
+}
+
+const {
+  leftWidth = '240px',
+  rightWidth = '220px',
+  gap = '1.5rem',
+  className = '',
+} = Astro.props;
+---
+
+<div
+  class:list={['holy-grail', className]}
+  style={`--hg-left: ${leftWidth}; --hg-right: ${rightWidth}; --hg-gap: ${gap};`}
+>
+  <header class="holy-grail__header">
+    <slot name="header" />
+  </header>
+
+  <div class="holy-grail__middle">
+    <aside class="holy-grail__left">
+      <slot name="left" />
+    </aside>
+
+    <main class="holy-grail__main">
+      <slot />
+    </main>
+
+    <aside class="holy-grail__right">
+      <slot name="right" />
+    </aside>
+  </div>
+
+  <footer class="holy-grail__footer">
+    <slot name="footer" />
+  </footer>
+</div>
+
+<style>
+  .holy-grail {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    width: 100%;
+    color: var(--c-text-1, #ffffff);
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+
+  .holy-grail__header {
+    width: 100%;
+    padding: var(--sp-4, 1rem) var(--sp-6, 1.5rem);
+    background: rgba(10, 10, 14, 0.8);
+    backdrop-filter: blur(16px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .holy-grail__middle {
+    display: grid;
+    grid-template-columns: var(--hg-left) 1fr var(--hg-right);
+    gap: var(--hg-gap);
+    flex: 1;
+    max-width: 1440px;
+    margin: 0 auto;
+    width: 100%;
+    padding: var(--sp-6, 1.5rem);
+  }
+
+  .holy-grail__left,
+  .holy-grail__right {
+    padding: var(--sp-4, 1rem);
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: var(--r-lg, 16px);
+    height: fit-content;
+    position: sticky;
+    top: 2rem;
+  }
+
+  .holy-grail__main {
+    padding: var(--sp-6, 1.5rem);
+    background: rgba(255, 255, 255, 0.015);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: var(--r-lg, 16px);
+    min-height: 400px;
+  }
+
+  .holy-grail__footer {
+    width: 100%;
+    padding: var(--sp-6, 1.5rem);
+    background: rgba(10, 10, 14, 0.9);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    margin-top: auto;
+  }
+
+  @media (max-width: 1024px) {
+    .holy-grail__middle {
+      grid-template-columns: var(--hg-left) 1fr;
+    }
+    .holy-grail__right {
+      display: none;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .holy-grail__middle {
+      grid-template-columns: 1fr;
+    }
+    .holy-grail__left {
+      position: static;
+    }
+  }
+</style>

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

@@ -20,4 +20,6 @@ export { default as CenterFixedBox } from './CenterFixedBox.astro';
 export { default as GalleryGrid4 } from './GalleryGrid4.astro';
 export { default as StepLayoutVertical } from './StepLayoutVertical.astro';
 export { default as LandingSectionSplit } from './LandingSectionSplit.astro';
-export { default as FooterCenteredMinimal } from './FooterCenteredMinimal.astro';
+export { default as FooterCenteredMinimal } from './FooterCenteredMinimal.astro';
+export { default as HolyGrailGrid } from './HolyGrailGrid.astro';
+export { default as DiagonalSectionDivider } from './DiagonalSectionDivider.astro';