astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/feedback/ToastNotificationGroup.astro

@@ -0,0 +1,173 @@
+---
+/**
+ * ToastNotificationGroup — Stackable notification banner with auto-timed progress bar, icon, and dismiss action.
+ * 
+ * @param {'success' | 'warning' | 'error' | 'info'} type - Alert status variant. Default is 'success'.
+ * @param {string} title - Notification title headline. Default is 'Changes Saved'.
+ * @param {string} message - Explanatory message text.
+ * @param {string} actionText - Optional action link text (e.g. 'Undo').
+ */
+interface Props {
+  type?: 'success' | 'warning' | 'error' | 'info';
+  title?: string;
+  message?: string;
+  actionText?: string;
+}
+
+const {
+  type = 'success',
+  title = 'Changes Saved',
+  message = 'Your project settings were synchronized with production.',
+  actionText = 'Undo',
+} = Astro.props;
+
+const icons = {
+  success: '✓',
+  warning: '!',
+  error: '✕',
+  info: 'ℹ',
+};
+---
+
+<div class:list={['toast-item', `toast-item--${type}`]} role="alert" data-toast-item>
+  <div class="toast-item__body">
+    <span class="toast-item__icon" aria-hidden="true">{icons[type]}</span>
+    <div class="toast-item__content">
+      <h5 class="toast-item__title">{title}</h5>
+      <p class="toast-item__msg">{message}</p>
+    </div>
+    {actionText && (
+      <button type="button" class="toast-item__action">
+        {actionText}
+      </button>
+    )}
+    <button type="button" class="toast-item__close" aria-label="Dismiss alert" data-toast-close>
+      ✕
+    </button>
+  </div>
+  <div class="toast-item__progress" aria-hidden="true"></div>
+</div>
+
+<style>
+  .toast-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 380px;
+    background: rgba(14, 14, 18, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--r-md, 14px);
+    overflow: hidden;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    font-family: var(--font-sans, system-ui, sans-serif);
+    transition: transform 0.25s ease, opacity 0.25s ease;
+  }
+
+  .toast-item--success { --toast-accent: #10b981; }
+  .toast-item--warning { --toast-accent: #f59e0b; }
+  .toast-item--error   { --toast-accent: #ef4444; }
+  .toast-item--info    { --toast-accent: #38bdf8; }
+
+  .toast-item__body {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 1rem 1.15rem;
+  }
+
+  .toast-item__icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--toast-accent);
+    color: var(--toast-accent);
+    display: grid;
+    place-items: center;
+    font-size: 0.75rem;
+    font-weight: 900;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  .toast-item__content {
+    flex: 1;
+  }
+
+  .toast-item__title {
+    font-size: 0.88rem;
+    font-weight: 700;
+    color: var(--c-text-1, #ffffff);
+    margin: 0 0 2px 0;
+  }
+
+  .toast-item__msg {
+    font-size: 0.78rem;
+    color: var(--c-text-2, #a3a3a3);
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  .toast-item__action {
+    background: transparent;
+    border: none;
+    color: var(--toast-accent);
+    font-size: 0.78rem;
+    font-weight: 700;
+    cursor: pointer;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    transition: background 0.2s;
+  }
+
+  .toast-item__action:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .toast-item__close {
+    background: transparent;
+    border: none;
+    color: var(--c-text-3, #737373);
+    font-size: 0.85rem;
+    cursor: pointer;
+    padding: 0.2rem;
+    line-height: 1;
+    transition: color 0.2s;
+  }
+
+  .toast-item__close:hover {
+    color: var(--c-text-1, #ffffff);
+  }
+
+  .toast-item__progress {
+    height: 3px;
+    background: var(--toast-accent);
+    width: 100%;
+    animation: toast-timer 5s linear forwards;
+  }
+
+  @keyframes toast-timer {
+    from { width: 100%; }
+    to { width: 0%; }
+  }
+</style>
+
+<script>
+  function setupToasts() {
+    document.querySelectorAll('[data-toast-item]').forEach((toast) => {
+      const closeBtn = toast.querySelector('[data-toast-close]');
+      if (closeBtn) {
+        closeBtn.addEventListener('click', () => {
+          (toast as HTMLElement).style.opacity = '0';
+          (toast as HTMLElement).style.transform = 'translateY(10px) scale(0.95)';
+          setTimeout(() => toast.remove(), 250);
+        });
+      }
+    });
+  }
+
+  setupToasts();
+  document.addEventListener('astro:page-load', setupToasts);
+</script>

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

@@ -21,3 +21,5 @@ export { default as Spotlight } from './Spotlight.astro';
 export { default as StepProgress } from './StepProgress.astro';
 export { default as ToastNotif } from './ToastNotif.astro';
 export { default as TypingIndicator } from './TypingIndicator.astro';
+export { default as ProgressRingCounter } from './ProgressRingCounter.astro';
+export { default as ToastNotificationGroup } from './ToastNotificationGroup.astro';

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

@@ -8,6 +8,7 @@
  * @param {string} placeholder - Passed placeholder. Default is ' '. (Space is needed for CSS :placeholder-shown to work).
  * @param {boolean} required - HTML required attribute parameter. Default is false.
  * @param {string} name - HTML input name binding.
+ * @param {string} autocomplete - HTML autocomplete hint (e.g. 'email', 'given-name'). Default is 'off'.
  */
 interface Props { 
   label: string; 
@@ -16,13 +17,14 @@ interface Props {
   placeholder?: string; 
   required?: boolean; 
   name?: string; 
+  autocomplete?: string; 
 }
 
-const { label, id, type = 'text', placeholder = ' ', required = false, name } = Astro.props;
+const { label, id, type = 'text', placeholder = ' ', required = false, name, autocomplete = 'off' } = Astro.props;
 ---
 
 <div class="anim-input-wrap">
-  <input {id} {name} {type} {placeholder} {required} class="anim-input" autocomplete="off" />
+  <input {id} {name} {type} {placeholder} {required} class="anim-input" autocomplete={autocomplete} />
   <label for={id} class="anim-input-label">{label}</label>
 </div>
 

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

@@ -39,7 +39,9 @@ const { label, name, options = [], horizontal = false } = Astro.props;
   
   .radio-item { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; color: var(--c-text-2, #94a3b8); transition: 0.2s; user-select: none; }
   
-  .radio-item input { appearance: none; display: none; }
+  .radio-item input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
+  .radio-item { position: relative; }
+  .radio-item input:focus-visible + .radio-circle { outline: 2px solid var(--c-primary-light, #818cf8); outline-offset: 2px; }
   
   .radio-circle { 
     width: 20px; height: 20px; 

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

@@ -0,0 +1,161 @@
+---
+/**
+ * GlassInlineToggleGroup — Segmented glassmorphism pill toggle for multi-option selection.
+ * 
+ * @param {string} name - HTML radio group name.
+ * @param {Array<{label: string, value: string, icon?: string}>} options - Selectable options list.
+ * @param {string} defaultValue - Value of the active option.
+ * @param {'sm' | 'md' | 'lg'} size - Pill size scale. Default is 'md'.
+ */
+interface Props {
+  name: string;
+  options?: Array<{ label: string; value: string; icon?: string }>;
+  defaultValue?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const {
+  name = 'toggle-options',
+  options = [
+    { label: 'Weekly', value: 'week' },
+    { label: 'Monthly', value: 'month' },
+    { label: 'Yearly', value: 'year' },
+  ],
+  defaultValue = 'month',
+  size = 'md',
+} = Astro.props;
+---
+
+<div class:list={['glass-toggle-group', `glass-toggle-group--${size}`]} role="radiogroup" data-toggle-group>
+  <div class="glass-toggle-group__slider" data-toggle-slider aria-hidden="true"></div>
+  {options.map((opt) => {
+    const isChecked = opt.value === defaultValue;
+    return (
+      <label class="glass-toggle-group__item">
+        <input
+          type="radio"
+          name={name}
+          value={opt.value}
+          checked={isChecked}
+          class="glass-toggle-group__radio"
+          data-toggle-radio
+        />
+        <span class="glass-toggle-group__label">
+          {opt.icon && <span class="glass-toggle-group__icon" set:html={opt.icon} />}
+          {opt.label}
+        </span>
+      </label>
+    );
+  })}
+</div>
+
+<style>
+  .glass-toggle-group {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-full, 9999px);
+    padding: 4px;
+    user-select: none;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  .glass-toggle-group--sm {
+    padding: 3px;
+  }
+  .glass-toggle-group--sm .glass-toggle-group__label {
+    padding: 0.35rem 0.8rem;
+    font-size: 0.78rem;
+  }
+
+  .glass-toggle-group--md .glass-toggle-group__label {
+    padding: 0.5rem 1.15rem;
+    font-size: 0.88rem;
+  }
+
+  .glass-toggle-group--lg .glass-toggle-group__label {
+    padding: 0.7rem 1.6rem;
+    font-size: 1rem;
+  }
+
+  .glass-toggle-group__item {
+    position: relative;
+    z-index: 2;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .glass-toggle-group__radio {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .glass-toggle-group__label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--font-sans, system-ui, sans-serif);
+    font-weight: 600;
+    color: var(--c-text-2, #a3a3a3);
+    border-radius: var(--r-full, 9999px);
+    transition: color 0.25s ease;
+  }
+
+  .glass-toggle-group__item:hover .glass-toggle-group__label {
+    color: var(--c-text-1, #ffffff);
+  }
+
+  .glass-toggle-group__radio:checked + .glass-toggle-group__label {
+    color: #050505;
+  }
+
+  /* Sliding backdrop element */
+  .glass-toggle-group__slider {
+    position: absolute;
+    top: 4px;
+    bottom: 4px;
+    left: 4px;
+    border-radius: var(--r-full, 9999px);
+    background: linear-gradient(135deg, #d4a017, #b8860b);
+    box-shadow: 0 4px 16px rgba(184, 134, 11, 0.4);
+    z-index: 1;
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    pointer-events: none;
+  }
+</style>
+
+<script>
+  function setupGlassToggleGroups() {
+    document.querySelectorAll('[data-toggle-group]').forEach((group) => {
+      const slider = group.querySelector('[data-toggle-slider]') as HTMLElement;
+      const radios = group.querySelectorAll('[data-toggle-radio]') as NodeListOf<HTMLInputElement>;
+      if (!slider || radios.length === 0) return;
+
+      function updateSlider() {
+        const checked = group.querySelector('[data-toggle-radio]:checked') as HTMLInputElement;
+        if (!checked) return;
+        const label = checked.closest('.glass-toggle-group__item') as HTMLElement;
+        if (!label) return;
+
+        const groupRect = group.getBoundingClientRect();
+        const labelRect = label.getBoundingClientRect();
+
+        const offsetLeft = labelRect.left - groupRect.left;
+        slider.style.width = `${labelRect.width}px`;
+        slider.style.transform = `translateX(${offsetLeft - 4}px)`;
+      }
+
+      radios.forEach((r) => r.addEventListener('change', updateSlider));
+      updateSlider();
+      window.addEventListener('resize', updateSlider);
+    });
+  }
+
+  setupGlassToggleGroups();
+  document.addEventListener('astro:page-load', setupGlassToggleGroups);
+</script>

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

@@ -0,0 +1,242 @@
+---
+/**
+ * PasswordStrengthInput — Secure password input field with visual strength estimator bar and eye toggle.
+ * 
+ * @param {string} id - HTML ID for the password input.
+ * @param {string} label - Input label text. Default is 'Password'.
+ * @param {string} name - Form field name. Default is 'password'.
+ * @param {string} placeholder - Placeholder text. Default is 'Enter secure password'.
+ * @param {boolean} required - HTML required field attribute.
+ */
+interface Props {
+  id: string;
+  label?: string;
+  name?: string;
+  placeholder?: string;
+  required?: boolean;
+}
+
+const {
+  id = 'password-input',
+  label = 'Password',
+  name = 'password',
+  placeholder = 'Enter secure password',
+  required = false,
+} = Astro.props;
+---
+
+<div class="pwd-group" data-pwd-group>
+  <div class="pwd-group__header">
+    <label for={id} class="pwd-group__label">{label}</label>
+    <span class="pwd-group__status" data-pwd-status>Too weak</span>
+  </div>
+
+  <div class="pwd-group__field">
+    <input
+      type="password"
+      id={id}
+      name={name}
+      placeholder={placeholder}
+      required={required}
+      class="pwd-group__input"
+      data-pwd-input
+      autocomplete="new-password"
+    />
+    <button
+      type="button"
+      class="pwd-group__toggle"
+      aria-label="Toggle password visibility"
+      data-pwd-toggle
+    >
+      <svg class="eye-open" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+      <svg class="eye-closed" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;">
+        <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+        <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
+        <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
+        <line x1="2" x2="22" y1="2" y2="22" />
+      </svg>
+    </button>
+  </div>
+
+  <!-- 4-segment strength meter -->
+  <div class="pwd-group__meter" aria-hidden="true">
+    <div class="pwd-group__segment" data-seg="1"></div>
+    <div class="pwd-group__segment" data-seg="2"></div>
+    <div class="pwd-group__segment" data-seg="3"></div>
+    <div class="pwd-group__segment" data-seg="4"></div>
+  </div>
+</div>
+
+<style>
+  .pwd-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-2, 0.5rem);
+    width: 100%;
+    max-width: 360px;
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+
+  .pwd-group__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.2rem;
+  }
+
+  .pwd-group__label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--c-text-1, #ffffff);
+  }
+
+  .pwd-group__status {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #ef4444;
+    transition: color 0.3s ease;
+  }
+
+  .pwd-group__field {
+    position: relative;
+    width: 100%;
+  }
+
+  .pwd-group__input {
+    width: 100%;
+    padding: 0.75rem 2.8rem 0.75rem 1rem;
+    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);
+    color: var(--c-text-1, #ffffff);
+    font-size: 0.92rem;
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .pwd-group__input:focus {
+    border-color: rgba(184, 134, 11, 0.5);
+    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
+  }
+
+  .pwd-group__input::placeholder {
+    color: rgba(255, 255, 255, 0.3);
+  }
+
+  .pwd-group__toggle {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--c-text-3, #737373);
+    cursor: pointer;
+    padding: 0.3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--r-sm, 6px);
+    transition: color 0.2s ease;
+  }
+
+  .pwd-group__toggle:hover {
+    color: var(--c-text-1, #ffffff);
+  }
+
+  .pwd-group__meter {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 6px;
+    height: 4px;
+    margin-top: 4px;
+  }
+
+  .pwd-group__segment {
+    height: 100%;
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.08);
+    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  /* Dynamic levels */
+  .pwd-group[data-level="1"] .pwd-group__segment[data-seg="1"] {
+    background: #ef4444;
+  }
+  .pwd-group[data-level="1"] .pwd-group__status {
+    color: #ef4444;
+  }
+
+  .pwd-group[data-level="2"] .pwd-group__segment[data-seg="1"],
+  .pwd-group[data-level="2"] .pwd-group__segment[data-seg="2"] {
+    background: #f59e0b;
+  }
+  .pwd-group[data-level="2"] .pwd-group__status {
+    color: #f59e0b;
+  }
+
+  .pwd-group[data-level="3"] .pwd-group__segment[data-seg="1"],
+  .pwd-group[data-level="3"] .pwd-group__segment[data-seg="2"],
+  .pwd-group[data-level="3"] .pwd-group__segment[data-seg="3"] {
+    background: #3b82f6;
+  }
+  .pwd-group[data-level="3"] .pwd-group__status {
+    color: #3b82f6;
+  }
+
+  .pwd-group[data-level="4"] .pwd-group__segment {
+    background: #10b981;
+    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
+  }
+  .pwd-group[data-level="4"] .pwd-group__status {
+    color: #10b981;
+  }
+</style>
+
+<script>
+  function initPasswordGroups() {
+    document.querySelectorAll('[data-pwd-group]').forEach((group) => {
+      const input = group.querySelector('[data-pwd-input]') as HTMLInputElement;
+      const toggle = group.querySelector('[data-pwd-toggle]') as HTMLButtonElement;
+      const status = group.querySelector('[data-pwd-status]') as HTMLElement;
+      if (!input || !toggle) return;
+
+      const eyeOpen = toggle.querySelector('.eye-open') as HTMLElement;
+      const eyeClosed = toggle.querySelector('.eye-closed') as HTMLElement;
+
+      toggle.addEventListener('click', () => {
+        const isPassword = input.type === 'password';
+        input.type = isPassword ? 'text' : 'password';
+        if (eyeOpen && eyeClosed) {
+          eyeOpen.style.display = isPassword ? 'none' : 'block';
+          eyeClosed.style.display = isPassword ? 'block' : 'none';
+        }
+      });
+
+      input.addEventListener('input', () => {
+        const val = input.value;
+        let score = 0;
+        if (val.length >= 6) score++;
+        if (val.length >= 10) score++;
+        if (/[A-Z]/.test(val) && /[0-9]/.test(val)) score++;
+        if (/[^A-Za-z0-9]/.test(val)) score++;
+
+        group.setAttribute('data-level', String(score));
+
+        const labels = ['Too weak', 'Weak', 'Fair', 'Strong', 'Secure & Robust'];
+        if (status) {
+          status.textContent = labels[score] || 'Too weak';
+        }
+      });
+    });
+  }
+
+  initPasswordGroups();
+  document.addEventListener('astro:page-load', initPasswordGroups);
+</script>