astro-component-kit 0.0.1 → 0.1.1

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

@@ -1,14 +1,101 @@
 ---
+/**
+ * StepProgress — A multi-stage stepper indicating flow through several discrete points.
+ * 
+ * @param {Array<{label: string}>} steps - List of steps to represent.
+ * @param {number} activeIndex - The index (0-based) of the current step. Default is 0.
+ */
+interface Props {
+  steps?: Array<{ label: string }>;
+  activeIndex?: number;
+}
+
+const { 
+  steps = [
+    { label: 'Details' }, 
+    { label: 'Payment' }, 
+    { label: 'Finish' }
+  ], 
+  activeIndex = 0 
+} = Astro.props;
 ---
-<div class="steps">
-  <div class="step active">1<span>Details</span></div>
-  <div class="step">2<span>Payment</span></div>
-  <div class="step">3<span>Finish</span></div>
+
+<div class="steps-container">
+  <div class="steps-line" aria-hidden="true" style={`--progress: ${(activeIndex / (steps.length - 1)) * 100}%`}></div>
+  <div class="steps-list">
+    {steps.map((step, i) => (
+      <div 
+        class:list={['step-item', { 'step-item--active': i === activeIndex, 'step-item--complete': i < activeIndex }]}
+        aria-current={i === activeIndex ? "step" : undefined}
+      >
+        <div class="step-circle">{i + 1}</div>
+        <span class="step-label">{step.label}</span>
+      </div>
+    ))}
+  </div>
 </div>
+
 <style>
-  .steps { display: flex; justify-content: space-between; position: relative; margin-bottom: 2rem; }
-  .steps::before { content: ""; position: absolute; top: 15px; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.05); z-index: -1; }
-  .step { width: 32px; height: 32px; border-radius: 50%; background: #1e293b; color: #64748b; border: 2px solid rgba(255,255,255,0.1); display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; position: relative; }
-  .step.active { background: #6366f1; border-color: #6366f1; color: #fff; box-shadow: 0 0 15px rgba(99,102,241,0.4); }
-  .step span { position: absolute; top: 100%; margin-top: 8px; font-size: 0.65rem; white-space: nowrap; color: inherit; }
+  .steps-container { position: relative; margin-bottom: var(--sp-8, 2rem); width: 100%; padding: 0 var(--sp-4, 1rem); box-sizing: border-box; }
+  
+  .steps-line { 
+    position: absolute; 
+    top: 16px; left: 0; right: 0; 
+    height: 3px; 
+    background: var(--c-bg-elev, rgba(255,255,255,0.05)); 
+    z-index: 0; 
+  }
+  
+  .steps-line::after {
+    content: "";
+    position: absolute;
+    left: 0; top: 0;
+    height: 100%;
+    width: var(--progress);
+    background: var(--c-primary, #6366f1);
+    transition: width 0.4s ease-in-out;
+    box-shadow: 0 0 10px rgba(99,102,241,0.3);
+  }
+
+  .steps-list { display: flex; justify-content: space-between; position: relative; z-index: 1; }
+  
+  .step-circle { 
+    width: 32px; height: 32px; 
+    border-radius: var(--r-full, 50%); 
+    background: var(--c-bg, #1e293b); 
+    color: var(--c-text-2, #64748b); 
+    border: 2px solid var(--c-border, rgba(255,255,255,0.1)); 
+    display: grid; place-items: center; 
+    font-size: 0.85rem; font-weight: 800; 
+    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .step-item--active .step-circle { 
+    background: var(--c-primary, #6366f1); 
+    border-color: var(--c-primary, #6366f1); 
+    color: #fff; 
+    box-shadow: 0 0 20px rgba(99,102,241,0.5); 
+    transform: scale(1.1);
+  }
+
+  .step-item--complete .step-circle {
+    background: var(--c-primary, #6366f1);
+    border-color: var(--c-primary, #6366f1);
+    color: #fff;
+  }
+  
+  .step-label { 
+    position: absolute; 
+    top: 100%; left: 50%;
+    transform: translateX(-50%);
+    margin-top: 8px; 
+    font-size: 0.7rem; 
+    font-weight: 700;
+    white-space: nowrap; 
+    color: var(--c-text-2, #64748b); 
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  
+  .step-item--active .step-label, .step-item--complete .step-label { color: var(--c-text-1, #fff); }
 </style>

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

@@ -1,11 +1,65 @@
 ---
+/**
+ * ToastNotif — A transient snackbar notification that appears at the corner of the screen.
+ * 
+ * @param {string} message - The notification content.
+ * @param {string} icon - Emoji or SVG icon. Default is '✅'.
+ * @param {'success'|'info'|'error'} variant - Theme of the toast. Default is 'success'.
+ * @param {boolean} show - Initial visibility. Default is true.
+ */
+interface Props {
+  message: string;
+  icon?: string;
+  variant?: 'success' | 'info' | 'error';
+  show?: boolean;
+}
+
+const { 
+  message, 
+  icon = "✅", 
+  variant = 'success',
+  show = true 
+} = Astro.props;
 ---
-<div class="toast show">
-  <span class="icon">✅</span>
-  <span>Settings saved successfully!</span>
+
+<div class:list={['toast', `toast--${variant}`, { 'toast--show': show }]} role="status">
+  <div class="toast__icon" aria-hidden="true">{icon}</div>
+  <span class="toast__msg">{message}</span>
 </div>
+
 <style>
-  .toast { position: fixed; bottom: 2rem; right: 2rem; background: #111; color: #fff; padding: 1rem 1.5rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 0.8rem; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transform: translateY(100px); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1000; }
-  .toast.show { transform: translateY(0); }
-  .icon { background: rgba(52,211,153,0.1); padding: 4px; border-radius: 6px; }
+  .toast { 
+    position: fixed; 
+    bottom: 2rem; 
+    right: 2rem; 
+    background: var(--c-bg-elev, #0f172a); 
+    color: var(--c-text-1, #fff); 
+    padding: var(--sp-4, 1rem) var(--sp-6, 1.5rem); 
+    border-radius: var(--r-md, 14px); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    display: flex; 
+    align-items: center; 
+    gap: var(--sp-3, 0.8rem); 
+    box-shadow: 0 15px 45px rgba(0,0,0,0.4); 
+    transform: translateY(150%) scale(0.9); 
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
+    z-index: 10000; 
+  }
+  
+  .toast--show { transform: translateY(0) scale(1); }
+  
+  .toast--success { border-left: 4px solid #10b981; }
+  .toast--info { border-left: 4px solid var(--c-primary, #6366f1); }
+  .toast--error { border-left: 4px solid #ef4444; }
+  
+  .toast__icon { 
+    background: rgba(255,255,255,0.05); 
+    width: 28px; height: 28px;
+    display: grid; place-items: center;
+    border-radius: var(--r-sm, 6px); 
+    font-size: 1rem;
+    flex-shrink: 0;
+  }
+  
+  .toast__msg { font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
 </style>

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

@@ -1,12 +1,57 @@
 ---
+/**
+ * TypingIndicator — A classic three-dot animation indicating a message is being composed.
+ * 
+ * @param {string} dotColor - CSS color for the dots. Default is 'var(--c-primary)'.
+ * @param {string} label - Accessible ARIA label. Default is "Typing...".
+ */
+interface Props {
+  dotColor?: string;
+  label?: string;
+}
+
+const { 
+  dotColor = 'var(--c-primary, #6366f1)', 
+  label = "Someone is typing..." 
+} = Astro.props;
 ---
-<div class="typing">
-  <span></span><span></span><span></span>
+
+<div class="typing-wrap" role="status" aria-label={label}>
+  <div class="typing-dots" style={`--dot-color: ${dotColor};`}>
+    <span></span>
+    <span></span>
+    <span></span>
+  </div>
 </div>
+
 <style>
-  .typing { display: flex; gap: 4px; padding: 10px 15px; background: rgba(255,255,255,0.05); border-radius: 15px; width: fit-content; }
-  .typing span { width: 6px; height: 6px; background: #64748b; border-radius: 50%; animation: type 1s infinite alternate; }
-  .typing span:nth-child(2) { animation-delay: 0.2s; }
-  .typing span:nth-child(3) { animation-delay: 0.4s; }
-  @keyframes type { to { transform: translateY(-5px); background: #6366f1; } }
+  .typing-wrap { 
+    display: flex; 
+    padding: var(--sp-3, 0.75rem) var(--sp-5, 1.25rem); 
+    background: var(--c-bg-elev, rgba(255,255,255,0.05)); 
+    border-radius: var(--r-xl, 20px); 
+    width: fit-content; 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1));
+  }
+  
+  .typing-dots { display: flex; gap: var(--sp-1, 4px); }
+  
+  .typing-dots span { 
+    width: 6px; 
+    height: 6px; 
+    background: var(--c-text-muted, #64748b); 
+    border-radius: var(--r-full, 50%); 
+    animation: typing-bounce 0.8s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); 
+  }
+  
+  .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+  .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
+  
+  @keyframes typing-bounce { 
+    to { 
+      transform: translateY(-4px); 
+      background: var(--dot-color); 
+      filter: drop-shadow(0 0 2px var(--dot-color));
+    } 
+  }
 </style>

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

@@ -1,16 +1,58 @@
 ---
-interface Props { label: string; id: string; type?: string; placeholder?: string; required?: boolean; name?: string; }
+/**
+ * AnimatedInput — A form input with a floating label animation and focus glow effect.
+ * 
+ * @param {string} label - The visible indicator for the input field.
+ * @param {string} id - The HTML id and for attribute linkage.
+ * @param {string} type - Input element type. Default is 'text'.
+ * @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.
+ */
+interface Props { 
+  label: string; 
+  id: string; 
+  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'; 
+  placeholder?: string; 
+  required?: boolean; 
+  name?: string; 
+}
+
 const { label, id, type = 'text', placeholder = ' ', required = false, name } = Astro.props;
 ---
+
 <div class="anim-input-wrap">
   <input {id} {name} {type} {placeholder} {required} class="anim-input" autocomplete="off" />
   <label for={id} class="anim-input-label">{label}</label>
 </div>
+
 <style>
   .anim-input-wrap { position: relative; width: 100%; }
-  .anim-input { width: 100%; padding: 1.1rem 1rem 0.5rem; font-family: inherit; font-size: 0.95rem; color: #e2e8f0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; outline: none; box-sizing: border-box; transition: border-color 0.25s ease, background 0.25s ease; }
+  .anim-input { 
+    width: 100%; 
+    padding: 1.1rem 1rem 0.5rem; 
+    font-family: inherit; font-size: 0.95rem; 
+    color: var(--c-text-1, #e2e8f0); 
+    background: var(--c-bg-elev, rgba(255, 255, 255, 0.04)); 
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.1)); 
+    border-radius: var(--r-md, 12px); box-sizing: border-box; 
+    outline: none; transition: border-color 0.25s ease, background 0.25s ease; 
+  }
   .anim-input::placeholder { color: transparent; }
-  .anim-input:focus { background: rgba(99, 102, 241, 0.06); border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
-  .anim-input-label { position: absolute; top: 0.9rem; left: 1rem; font-size: 0.9rem; color: #64748b; pointer-events: none; transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease; }
-  .anim-input:focus ~ .anim-input-label, .anim-input:not(:placeholder-shown) ~ .anim-input-label { top: 0.28rem; font-size: 0.68rem; color: #818cf8; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
+  .anim-input:focus { 
+    background: rgba(99, 102, 241, 0.06); 
+    border-color: rgba(99, 102, 241, 0.5); 
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); 
+  }
+  .anim-input-label { 
+    position: absolute; top: 0.9rem; left: 1rem; 
+    font-size: 0.9rem; color: var(--c-text-2, #64748b); 
+    pointer-events: none; transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease; 
+  }
+  .anim-input:focus ~ .anim-input-label, 
+  .anim-input:not(:placeholder-shown) ~ .anim-input-label { 
+    top: 0.28rem; font-size: 0.68rem; 
+    color: var(--c-primary-light, #818cf8); 
+    font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; 
+  }
 </style>

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

@@ -1,13 +1,121 @@
 ---
+/**
+ * ChipInput — An interactive input for managing a list of tags or chips.
+ * 
+ * @param {string} label - Input labeling title.
+ * @param {string[]} initialChips - Optional array of strings to pre-populate.
+ * @param {string} name - HTML name for form submission.
+ * @param {string} placeholder - Placeholder text for the input area.
+ */
+interface Props {
+  label?: string;
+  initialChips?: string[];
+  name?: string;
+  placeholder?: string;
+}
+
+const { label, initialChips = [], name, placeholder = "Add tag..." } = Astro.props;
 ---
-<div class="chip-input">
-  <span class="chip">Astro <button>×</button></span>
-  <span class="chip">UI <button>×</button></span>
-  <input type="text" placeholder="Add tag..." />
+
+<div class="chip-input-container">
+  {label && <label class="chip-input-label">{label}</label>}
+  <div class="chip-input" data-chip-input>
+    <div class="chip-input__list" data-chip-list>
+      {initialChips.map(chip => (
+        <span class="chip">
+          {chip}
+          <button type="button" aria-label={`Remove ${chip}`} data-remove-chip>×</button>
+          <input type="hidden" name={`${name}[]`} value={chip} />
+        </span>
+      ))}
+    </div>
+    <input 
+      type="text" 
+      class="chip-input__field" 
+      placeholder={initialChips.length > 0 ? "" : placeholder} 
+      data-chip-field
+    />
+  </div>
 </div>
+
 <style>
-  .chip-input { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; background: rgba(0,0,0,0.1); border: 1px solid var(--c-border); border-radius: 10px; }
-  .chip { background: #6366f1; color: #fff; padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.8rem; display: flex; align-items: center; gap: 0.4rem; }
-  .chip button { background: none; border: none; color: #fff; cursor: pointer; font-size: 1rem; }
-  .chip-input input { background: none; border: none; outline: none; color: #fff; flex: 1; padding: 0.2rem; }
+  .chip-input-container { display: flex; flex-direction: column; gap: var(--sp-2, 0.5rem); width: 100%; }
+  .chip-input-label { font-size: 0.85rem; font-weight: 600; color: var(--c-text-2, #94a3b8); margin-left: 0.5rem; }
+  
+  .chip-input { 
+    display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; 
+    background: var(--c-bg-elev, rgba(0,0,0,0.1)); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-md, 10px); 
+    transition: border-color 0.2s;
+  }
+  .chip-input:focus-within { border-color: var(--c-primary, #6366f1); }
+  
+  .chip-input__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+  
+  .chip { 
+    background: var(--c-primary, #6366f1); 
+    color: #fff; 
+    padding: 0.2rem 0.6rem; 
+    border-radius: var(--r-sm, 6px); 
+    font-size: 0.8rem; 
+    display: flex; align-items: center; gap: 0.4rem; 
+  }
+  .chip button { 
+    background: none; border: none; color: #fff; cursor: pointer; 
+    font-size: 1.1rem; line-height: 1; padding: 0; 
+    opacity: 0.8; transition: opacity 0.2s;
+  }
+  .chip button:hover { opacity: 1; }
+  
+  .chip-input__field { 
+    background: none; border: none; outline: none; 
+    color: var(--c-text-1, #fff); flex: 1; min-width: 100px;
+    padding: 0.2rem; font-family: inherit; font-size: 0.9rem;
+  }
 </style>
+
+<script>
+  // Simplified client-side logic for adding/removing chips
+  document.querySelectorAll('[data-chip-input]').forEach(container => {
+    const list = container.querySelector('[data-chip-list]');
+    const input = container.querySelector('[data-chip-field]') as HTMLInputElement;
+    const name = "tags"; // Should ideally be passed from props but hidden inputs solve this for now
+
+    const addChip = (value: string) => {
+      if (!value.trim() || !list) return;
+      const chip = document.createElement('span');
+      chip.className = 'chip';
+      chip.innerHTML = `${value}<button type="button" aria-label="Remove ${value}" data-remove-chip>×</button>`;
+      
+      const hidden = document.createElement('input');
+      hidden.type = 'hidden';
+      hidden.name = 'chips[]';
+      hidden.value = value;
+      chip.appendChild(hidden);
+      
+      list.appendChild(chip);
+      input.value = '';
+      input.placeholder = '';
+    };
+
+    input?.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        addChip(input.value);
+      }
+      if (e.key === 'Backspace' && !input.value && list?.lastElementChild) {
+        list.removeChild(list.lastElementChild);
+        if (list.children.length === 0) input.placeholder = "Add tag...";
+      }
+    });
+
+    container.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement;
+      if (target.hasAttribute('data-remove-chip')) {
+        target.closest('.chip')?.remove();
+        if (list?.children.length === 0) input.placeholder = "Add tag...";
+      }
+    });
+  });
+</script>

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

@@ -1,13 +1,60 @@
 ---
+/**
+ * ColorPickerInput — A specialized input for selecting hex colors with a circular preview.
+ * 
+ * @param {string} label - Input labeling title.
+ * @param {string} id - HTML ID for the picker.
+ * @param {string} value - Default starting color value (hex). Default is '#6366f1'.
+ * @param {string} name - HTML name binding.
+ */
+interface Props {
+  label: string;
+  id: string;
+  value?: string;
+  name?: string;
+}
+
+const { label, id, value = "#6366f1", name } = Astro.props;
 ---
+
 <div class="color-picker-wrap">
-  <input type="color" class="color-input" id="picker" value="#6366f1" />
-  <label for="picker">Primary Accent</label>
+  <div class="color-input-container">
+    <input type="color" class="color-input" {id} {name} {value} />
+    <label for={id} class="color-label">{label}</label>
+  </div>
+  <span class="color-value" data-color-value>{value}</span>
 </div>
+
 <style>
-  .color-picker-wrap { display: flex; align-items: center; gap: 1rem; }
-  .color-input { -webkit-appearance: none; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; background: transparent; }
+  .color-picker-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--c-bg-elev, rgba(255,255,255,0.03)); padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem); border-radius: var(--r-md, 12px); border: 1px solid var(--c-border, rgba(255,255,255,0.1)); }
+  .color-input-container { display: flex; align-items: center; gap: 1rem; }
+  
+  .color-input { 
+    -webkit-appearance: none; 
+    border: none; 
+    width: 38px; height: 38px; 
+    border-radius: var(--r-full, 50%); 
+    cursor: pointer; 
+    background: transparent;
+    padding: 0;
+  }
   .color-input::-webkit-color-swatch-wrapper { padding: 0; }
-  .color-input::-webkit-color-swatch { border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; }
-  label { font-size: 0.9rem; color: #e2e8f0; font-weight: 500; }
+  .color-input::-webkit-color-swatch { 
+    border: 2px solid rgba(255,255,255,0.2); 
+    border-radius: 50%; 
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  }
+  
+  .color-label { font-size: 0.9rem; color: var(--c-text-1, #e2e8f0); font-weight: 500; cursor: pointer; }
+  .color-value { font-size: 0.8rem; color: var(--c-text-2, #64748b); font-family: monospace; text-transform: uppercase; letter-spacing: 0.05em; }
 </style>
+
+<script>
+  document.querySelectorAll('.color-input').forEach(input => {
+    const parent = input.closest('.color-picker-wrap');
+    const display = parent?.querySelector('[data-color-value]');
+    input.addEventListener('input', (e) => {
+      if (display) display.textContent = (e.target as HTMLInputElement).value;
+    });
+  });
+</script>

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

@@ -1,11 +1,64 @@
 ---
+/**
+ * CurrencyInput — A numeric input prefixed with a currency symbol for financial data entry.
+ * 
+ * @param {string} label - Input labeling title.
+ * @param {string} id - HTML ID for attribution.
+ * @param {string} symbol - Currency symbol to display (e.g. "$", "€"). Default is "$".
+ * @param {number} value - Pre-filled numeric value.
+ * @param {string} name - HTML name binding.
+ * @param {number} step - Numeric increment. Default is 0.01.
+ */
+interface Props {
+  label: string;
+  id: string;
+  symbol?: string;
+  value?: number;
+  name?: string;
+  step?: number;
+}
+
+const { label, id, symbol = "$", value = 0.00, name, step = 0.01 } = Astro.props;
 ---
-<div class="curr-wrap">
-  <span class="symbol">$</span>
-  <input type="number" step="0.01" value="0.00" />
+
+<div class="curr-input-container">
+  <label for={id} class="curr-label">{label}</label>
+  <div class="curr-wrap">
+    <span class="curr-symbol">{symbol}</span>
+    <input type="number" {id} {name} {step} value={value.toFixed(2)} class="curr-field" />
+  </div>
 </div>
+
 <style>
-  .curr-wrap { display: flex; align-items: center; background: rgba(255,255,255,0.05); border-radius: 10px; border: 1px solid var(--c-border); overflow: hidden; }
-  .symbol { padding: 0.8rem; background: rgba(255,255,255,0.05); color: #94a3b8; font-weight: 700; }
-  .curr-wrap input { background: none; border: none; padding: 0.8rem; color: #fff; font-size: 1.1rem; width: 100%; outline: none; }
+  .curr-input-container { display: flex; flex-direction: column; gap: var(--sp-2, 0.5rem); width: 100%; }
+  .curr-label { font-size: 0.85rem; font-weight: 600; color: var(--c-text-2, #94a3b8); margin-left: 0.5rem; }
+  
+  .curr-wrap { 
+    display: flex; align-items: center; 
+    background: var(--c-bg-elev, rgba(255,255,255,0.05)); 
+    border-radius: var(--r-md, 12px); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    overflow: hidden; 
+    transition: border-color 0.2s;
+  }
+  .curr-wrap:focus-within { border-color: var(--c-primary, #6366f1); }
+  
+  .curr-symbol { 
+    padding: 0.8rem 1rem; 
+    background: rgba(255,255,255,0.05); 
+    color: var(--c-text-2, #94a3b8); 
+    font-weight: 700; border-right: 1px solid var(--c-border, rgba(255,255,255,0.1));
+  }
+  
+  .curr-field { 
+    background: none; border: none; 
+    padding: 0.8rem 1rem; 
+    color: var(--c-text-1, #fff); 
+    font-size: 1.1rem; width: 100%; outline: none; 
+    font-family: inherit; font-weight: 600;
+  }
+  
+  /* Remove number spins */
+  .curr-field::-webkit-inner-spin-button, 
+  .curr-field::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
 </style>

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

@@ -1,13 +1,65 @@
 ---
+/**
+ * CustomRadioGroup — A group of styled radio buttons for vertical or horizontal options.
+ * 
+ * @param {string} label - Optional title for the fieldset.
+ * @param {string} name - Common HTML name for the radio group.
+ * @param {Array<{label: string, value: string, checked?: boolean}>} options - List of choices.
+ * @param {boolean} horizontal - Layout orientation. Default is false (vertical).
+ */
+interface Props {
+  label?: string;
+  name: string;
+  options: Array<{ label: string; value: string; checked?: boolean }>;
+  horizontal?: boolean;
+}
+
+const { label, name, options = [], horizontal = false } = Astro.props;
 ---
-<div class="radio-group">
-  <label class="radio-item"><input type="radio" name="opt" checked /><span>Option A</span></label>
-  <label class="radio-item"><input type="radio" name="opt" /><span>Option B</span></label>
-</div>
+
+<fieldset class:list={["radio-group", { "radio-group--horizontal": horizontal }]}>
+  {label && <legend class="radio-group-legend">{label}</legend>}
+  <div class="radio-items">
+    {options.map((opt, i) => (
+      <label class="radio-item">
+        <input type="radio" name={name} value={opt.value} checked={opt.checked} />
+        <span class="radio-circle" aria-hidden="true"></span>
+        <span class="radio-label">{opt.label}</span>
+      </label>
+    ))}
+  </div>
+</fieldset>
+
 <style>
-  .radio-group { display: flex; flex-direction: column; gap: 0.8rem; }
-  .radio-item { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; color: #94a3b8; }
-  .radio-item input { appearance: none; width: 20px; height: 20px; border: 2px solid #6366f1; border-radius: 50%; position: relative; cursor: pointer; }
-  .radio-item input:checked::after { content: ''; position: absolute; inset: 4px; background: #6366f1; border-radius: 50%; }
-  .radio-item input:checked + span { color: #fff; font-weight: 600; }
+  .radio-group { border: none; padding: 0; margin: 0; width: 100%; }
+  .radio-group-legend { font-size: 0.85rem; font-weight: 600; color: var(--c-text-2, #94a3b8); margin-bottom: var(--sp-3, 0.75rem); margin-left: 0.5rem; }
+  
+  .radio-items { display: flex; flex-direction: column; gap: var(--sp-3, 0.8rem); }
+  .radio-group--horizontal .radio-items { flex-direction: row; flex-wrap: wrap; gap: var(--sp-6, 1.5rem); }
+  
+  .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-circle { 
+    width: 20px; height: 20px; 
+    border: 2px solid var(--c-border, #334155); 
+    border-radius: var(--r-full, 50%); 
+    position: relative; cursor: pointer; transition: 0.2s;
+    background: var(--c-bg-elev, rgba(255,255,255,0.02));
+  }
+  
+  .radio-item:hover .radio-circle { border-color: var(--c-primary-light, #818cf8); }
+  
+  .radio-circle::after { 
+    content: ''; position: absolute; inset: 4px; 
+    background: var(--c-primary, #6366f1); 
+    border-radius: 50%; opacity: 0; transform: scale(0.5); transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  
+  .radio-item input:checked + .radio-circle { border-color: var(--c-primary, #6366f1); box-shadow: 0 0 10px rgba(99, 102, 241, 0.2); }
+  .radio-item input:checked + .radio-circle::after { opacity: 1; transform: scale(1); }
+  
+  .radio-label { font-size: 0.95rem; }
+  .radio-item input:checked ~ .radio-label { color: var(--c-text-1, #fff); font-weight: 600; }
 </style>