astro-component-kit 0.0.1 → 0.1.0

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

@@ -1,15 +1,71 @@
 ---
+/**
+ * CyberpunkCheckbox — A bold, neon-themed checkbox with angular borders and glitch-toggle effect.
+ * 
+ * @param {string} label - Text label displayed alongside the checkbox.
+ * @param {string} id - HTML ID for the checkbox.
+ * @param {string} name - HTML name binding.
+ * @param {boolean} checked - Initial toggle state.
+ */
+interface Props {
+  label: string;
+  id: string;
+  name?: string;
+  checked?: boolean;
+}
+
+const { label, id, name, checked = false } = Astro.props;
 ---
-<label class="cyber-check">
-  <input type="checkbox" />
-  <span class="checkmark"></span>
-  <slot />
+
+<label class="cyber-check" for={id}>
+  <input type="checkbox" {id} {name} {checked} />
+  <span class="checkmark" aria-hidden="true"></span>
+  <span class="cyber-text">{label}</span>
 </label>
+
 <style>
-  .cyber-check { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; color: #00e0ff; font-family: monospace; font-weight: 700; text-transform: uppercase; }
+  .cyber-check { 
+    display: flex; align-items: center; gap: var(--sp-4, 1rem); 
+    cursor: pointer; 
+    color: var(--c-primary-light, #00e0ff); 
+    font-family: 'Courier New', Courier, monospace; 
+    font-weight: 800; 
+    text-transform: uppercase;
+    user-select: none;
+    padding: var(--sp-2, 0.5rem);
+    transition: 0.2s;
+  }
+  
+  .cyber-check:hover .checkmark { border-color: var(--c-primary-light); }
+  
   .cyber-check input { display: none; }
-  .checkmark { width: 18px; height: 18px; border: 2px solid #ff003c; position: relative; transition: 0.2s; }
-  .cyber-check input:checked + .checkmark { background: #ff003c; box-shadow: 0 0 10px #ff003c; }
-  .checkmark::after { content: ''; position: absolute; display: none; left: 5px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
+  
+  .checkmark { 
+    width: 20px; height: 20px; 
+    border: 2px solid var(--c-primary, #ff003c); 
+    position: relative; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
+    flex-shrink: 0;
+    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
+  }
+  
+  .cyber-check input:checked + .checkmark { 
+    background: var(--c-primary, #ff003c); 
+    box-shadow: 0 0 15px var(--c-primary, #ff003c); 
+    transform: rotate(5deg) scale(1.1);
+  }
+  
+  .checkmark::after { 
+    content: ''; position: absolute; display: none; 
+    left: 7px; top: 2px; width: 4px; height: 10px; 
+    border: solid #fff; border-width: 0 3px 3px 0; 
+    transform: rotate(45deg); 
+  }
+  
   .cyber-check input:checked + .checkmark::after { display: block; }
+  
+  .cyber-text { letter-spacing: 0.05em; font-size: 0.9rem; }
+  
+  .cyber-check input:checked ~ .cyber-text {
+    text-shadow: 0 0 8px var(--c-primary-light);
+  }
 </style>

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

@@ -1,12 +1,92 @@
 ---
+/**
+ * DragDropUpload — A prominent file upload zone with drag-and-drop support and visual feedback.
+ * 
+ * @param {string} label - Primary instruction text. Default is "Drag files here or browse".
+ * @param {string} id - HTML ID for the file input.
+ * @param {string} name - HTML name binding.
+ * @param {string} accept - Allowed file types (e.g. "image/*").
+ * @param {boolean} multiple - Enable multiple file selection.
+ */
+interface Props {
+  label?: string;
+  id: string;
+  name?: string;
+  accept?: string;
+  multiple?: boolean;
+}
+
+const { label = "Drag files here or browse", id, name, accept, multiple = false } = Astro.props;
 ---
-<div class="upload-zone">
-  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-  <p>Drag files here or <span>browse</span></p>
-  <input type="file" hidden />
+
+<div class="upload-zone" data-upload-zone>
+  <div class="upload-zone__icon" aria-hidden="true">
+    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+      <polyline points="17 8 12 3 7 8"/>
+      <line x1="12" y1="3" x2="12" y2="15"/>
+    </svg>
+  </div>
+  <p class="upload-zone__text">
+    {label.split('browse').map((part, i) => (
+      i === 0 ? <span>{part} <span class="upload-zone__link">browse</span></span> : part
+    ))}
+  </p>
+  <input type="file" {id} {name} {accept} {multiple} hidden class="upload-zone__input" data-upload-input />
 </div>
+
 <style>
-  .upload-zone { border: 2px dashed rgba(255,255,255,0.1); border-radius: 20px; padding: 3rem; text-align: center; background: rgba(255,255,255,0.02); cursor: pointer; transition: 0.3s; color: #94a3b8; }
-  .upload-zone:hover { border-color: #6366f1; background: rgba(99, 102, 241, 0.05); color: #fff; }
-  .upload-zone span { color: #6366f1; font-weight: 600; text-decoration: underline; }
+  .upload-zone { 
+    border: 2px dashed var(--c-border, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-xl, 20px); 
+    padding: var(--sp-12, 3rem); 
+    text-align: center; 
+    background: var(--c-bg-elev, rgba(255,255,255,0.02)); 
+    cursor: pointer; 
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
+    color: var(--c-text-2, #94a3b8); 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--sp-4, 1rem);
+  }
+  
+  .upload-zone:hover, .upload-zone--dragging { 
+    border-color: var(--c-primary, #6366f1); 
+    background: rgba(99, 102, 241, 0.05); 
+    color: var(--c-text-1, #fff); 
+    transform: translateY(-2px);
+  }
+  
+  .upload-zone__icon { color: var(--c-primary, #6366f1); transition: transform 0.3s; }
+  .upload-zone:hover .upload-zone__icon { transform: translateY(-5px); }
+  
+  .upload-zone__text { font-size: 1rem; margin: 0; }
+  .upload-zone__link { color: var(--c-primary, #6366f1); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
 </style>
+
+<script>
+  document.querySelectorAll('[data-upload-zone]').forEach(zone => {
+    const input = zone.querySelector('[data-upload-input]') as HTMLInputElement;
+
+    zone.addEventListener('click', () => input.click());
+
+    zone.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      zone.classList.add('upload-zone--dragging');
+    });
+
+    ['dragleave', 'drop'].forEach(evt => {
+      zone.addEventListener(evt, () => zone.classList.remove('upload-zone--dragging'));
+    });
+
+    zone.addEventListener('drop', (e) => {
+      e.preventDefault();
+      if ((e as DragEvent).dataTransfer?.files) {
+        input.files = (e as DragEvent).dataTransfer!.files;
+        // Trigger change
+        input.dispatchEvent(new Event('change'));
+      }
+    });
+  });
+</script>

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

@@ -1,11 +1,38 @@
 ---
+/**
+ * ErrorInput — A styled input strictly formatted to demonstrate error or invalid validation states.
+ * 
+ * @param {string} id - The ID for the input form element.
+ * @param {string} errorMessage - The message text presented below the input field.
+ * @param {string} value - Default starting value mimicking failed data.
+ * @param {string} placeholder - Optional standard placeholder.
+ * @param {string} name - HTML name binding.
+ */
+interface Props {
+  id: string;
+  errorMessage: string;
+  value?: string;
+  placeholder?: string;
+  name?: string;
+}
+
+const { id, errorMessage, value = '', placeholder, name } = Astro.props;
 ---
+
 <div class="error-wrap">
-  <input type="text" class="input-error" value="invalid-email" />
-  <span class="error-msg">Please enter a valid email address</span>
+  <input type="text" {id} {name} {value} {placeholder} class="input-error" aria-invalid="true" aria-describedby={`${id}-error`} />
+  <span id={`${id}-error`} class="error-msg" aria-live="polite">{errorMessage}</span>
 </div>
+
 <style>
-  .error-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
-  .input-error { border: 1px solid #ef4444 !important; background: rgba(239, 68, 68, 0.05) !important; padding: 0.8rem; color: #fff; border-radius: 10px; outline: none; }
+  .error-wrap { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; box-sizing: border-box; }
+  .input-error { 
+    border: 1px solid var(--c-error, #ef4444) !important; 
+    background: rgba(239, 68, 68, 0.05) !important; 
+    padding: var(--sp-3, 0.8rem); 
+    color: var(--c-text-1, #fff); 
+    border-radius: var(--r-sm, 10px); outline: none; 
+    font-family: inherit; font-size: 0.95rem; box-sizing: border-box;
+  }
   .error-msg { font-size: 0.75rem; color: #f87171; font-weight: 500; }
 </style>

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

@@ -1,20 +1,58 @@
 ---
+/**
+ * FloatingPassword — A password input field featuring a reveal/hide toggle inside the frame.
+ * 
+ * @param {string} id - Unique identifier linking toggle state securely.
+ * @param {string} placeholder - Default text visible when empty. Default is "Password".
+ * @param {string} name - HTML name binding.
+ * @param {boolean} required - HTML required indicator.
+ */
+interface Props {
+  id: string;
+  placeholder?: string;
+  name?: string;
+  required?: boolean;
+}
+
+const { id, placeholder = "Password", name, required = false } = Astro.props;
 ---
+
 <div class="pass-wrap">
-  <input type="password" id="pass" placeholder="Password" />
-  <button type="button" id="toggle-pass">👁️</button>
+  <input type="password" {id} {name} {placeholder} {required} class="pass-input" data-pwd-input />
+  <button type="button" class="toggle-pass" aria-label="Toggle password visibility" data-pwd-toggle>👁️</button>
 </div>
+
 <style>
   .pass-wrap { position: relative; width: 100%; }
-  .pass-wrap input { width: 100%; padding: 0.8rem 3rem 0.8rem 1rem; background: rgba(0,0,0,0.2); border: 1px solid var(--c-border); border-radius: 10px; color: #fff; outline: none; }
-  #toggle-pass { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; opacity: 0.5; }
+  .pass-input { 
+    width: 100%; box-sizing: border-box;
+    padding: 0.8rem 3rem 0.8rem 1rem; 
+    background: var(--c-bg-elev, rgba(0,0,0,0.2)); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-sm, 10px); 
+    color: var(--c-text-1, #fff); outline: none; 
+    font-family: inherit; transition: 0.2s;
+  }
+  .pass-input:focus { border-color: var(--c-primary, #6366f1); }
+  .toggle-pass { 
+    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); 
+    background: none; border: none; cursor: pointer; opacity: 0.5; transition: 0.2s;
+  }
+  .toggle-pass:hover { opacity: 1; }
 </style>
+
 <script>
-  const btn = document.getElementById('toggle-pass');
-  const pass = document.getElementById('pass') as HTMLInputElement;
-  btn?.addEventListener('click', () => {
-    const isPass = pass.type === 'password';
-    pass.type = isPass ? 'text' : 'password';
-    btn.textContent = isPass ? '🙈' : '👁️';
+  // Setup functional toggle without polluting global namespaces or clashing IDs
+  document.querySelectorAll('.pass-wrap').forEach(wrap => {
+    const btn = wrap.querySelector('[data-pwd-toggle]');
+    const pass = wrap.querySelector('[data-pwd-input]') as HTMLInputElement;
+    
+    if (btn && pass) {
+      btn.addEventListener('click', () => {
+        const isPass = pass.type === 'password';
+        pass.type = isPass ? 'text' : 'password';
+        btn.textContent = isPass ? '🙈' : '👁️';
+      });
+    }
   });
 </script>

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

@@ -1,14 +1,68 @@
 ---
+/**
+ * FormGroupVertical — A structural wrapper component for grouping an input with its label and validation messaging.
+ * 
+ * @param {string} label - The descriptive title for the field.
+ * @param {string} forId - The target ID of the child input (for label association).
+ * @param {string} helpText - Optional secondary guidance text below the input.
+ * @param {string} error - Optional error message that applies error styling.
+ * @param {boolean} required - Displays a required indicator if true.
+ */
+interface Props {
+  label: string;
+  forId: string;
+  helpText?: string;
+  error?: string;
+  required?: boolean;
+}
+
+const { label, forId, helpText, error, required = false } = Astro.props;
 ---
-<div class="form-group">
-  <label>Company Name</label>
-  <input type="text" placeholder="e.g. Acme Corp" />
-  <p class="help-text">Visible on your public profile.</p>
+
+<div class:list={["form-group", { "form-group--error": error }]}>
+  <div class="form-group__header">
+    <label for={forId} class="form-group__label">
+      {label}
+      {required && <span class="form-group__req" aria-hidden="true">*</span>}
+    </label>
+  </div>
+  
+  <div class="form-group__content">
+    <slot />
+  </div>
+  
+  {error ? (
+    <p class="form-group__error" id={`${forId}-error`} role="alert">{error}</p>
+  ) : helpText ? (
+    <p class="form-group__help" id={`${forId}-help`}>{helpText}</p>
+  ) : null}
 </div>
+
 <style>
-  .form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
-  label { font-size: 0.82rem; font-weight: 700; color: #e2e8f0; text-transform: uppercase; letter-spacing: 0.05em; }
-  input { background: #0f172a; border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 0.8rem; border-radius: 8px; outline: none; }
-  input:focus { border-color: #6366f1; }
-  .help-text { font-size: 0.75rem; color: #64748b; }
+  .form-group { display: flex; flex-direction: column; gap: var(--sp-2, 0.5rem); width: 100%; margin-bottom: var(--sp-4, 1rem); }
+  
+  .form-group__label { 
+    font-size: 0.8rem; font-weight: 700; 
+    color: var(--c-text-1, #e2e8f0); 
+    text-transform: uppercase; 
+    letter-spacing: 0.05em; 
+    margin-left: 0.5rem;
+    cursor: pointer;
+  }
+  
+  .form-group__req { color: var(--c-error, #f87171); margin-left: 2px; }
+  
+  .form-group__content { width: 100%; }
+  
+  .form-group__help { font-size: 0.75rem; color: var(--c-text-2, #64748b); margin: 0 0 0 0.5rem; }
+  
+  .form-group__error { font-size: 0.75rem; color: var(--c-error, #f87171); font-weight: 600; margin: 0 0 0 0.5rem; }
+  
+  /* Deep selector to style any input nested inside the group content if it's in an error state */
+  .form-group--error :global(input), 
+  .form-group--error :global(textarea), 
+  .form-group--error :global(select) { 
+    border-color: var(--c-error, #ef4444) !important; 
+    background-color: rgba(239, 68, 68, 0.03) !important;
+  }
 </style>

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

@@ -1,7 +1,88 @@
 ---
+/**
+ * GlassSlider — A translucent range slider with a glowing thumb and backdrop-blur track.
+ * 
+ * @param {string} label - Optional descriptive text title.
+ * @param {string} id - HTML ID for the range input.
+ * @param {string} name - HTML name binding.
+ * @param {number} min - Minimum value. Default is 0.
+ * @param {number} max - Maximum value. Default is 100.
+ * @param {number} value - Initial starting value. Default is 50.
+ * @param {number} step - Step increment. Default is 1.
+ */
+interface Props {
+  label?: string;
+  id: string;
+  name?: string;
+  min?: number;
+  max?: number;
+  value?: number;
+  step?: number;
+}
+
+const { label, id, name, min = 0, max = 100, value = 50, step = 1 } = Astro.props;
 ---
-<input type="range" class="glass-slider" min="0" max="100" />
+
+<div class="slider-container">
+  {label && <div class="slider-header"><label for={id}>{label}</label> <span data-slider-value>{value}</span></div>}
+  <input 
+    type="range" 
+    class="glass-slider" 
+    {id} 
+    {name} 
+    {min} 
+    {max} 
+    {step} 
+    {value}
+    data-slider-input
+  />
+</div>
+
 <style>
-  .glass-slider { -webkit-appearance: none; width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 5px; outline: none; backdrop-filter: blur(5px); }
-  .glass-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #6366f1; cursor: pointer; border: 2px solid rgba(255,255,255,0.5); box-shadow: 0 0 10px rgba(99,102,241,0.5); }
+  .slider-container { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3, 0.75rem); }
+  .slider-header { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: var(--c-text-2, #94a3b8); padding: 0 0.5rem; }
+  
+  .glass-slider { 
+    -webkit-appearance: none; 
+    width: 100%; height: 8px; 
+    background: var(--c-bg-elev, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-full, 10px); 
+    outline: none; 
+    backdrop-filter: blur(5px); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.05));
+    cursor: pointer;
+  }
+  
+  /* Thumb Styling - Webkit */
+  .glass-slider::-webkit-slider-thumb { 
+    -webkit-appearance: none; 
+    width: 22px; height: 22px; 
+    border-radius: 50%; 
+    background: var(--c-primary, #6366f1); 
+    cursor: pointer; 
+    border: 3px solid rgba(255,255,255,0.6); 
+    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); 
+    transition: transform 0.2s;
+  }
+  
+  .glass-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
+  
+  /* Thumb Styling - Firefox */
+  .glass-slider::-moz-range-thumb { 
+    width: 18px; height: 18px; 
+    border-radius: 50%; 
+    background: var(--c-primary, #6366f1); 
+    cursor: pointer; 
+    border: 3px solid rgba(255,255,255,0.6); 
+    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); 
+  }
 </style>
+
+<script>
+  document.querySelectorAll('[data-slider-input]').forEach(slider => {
+    const display = slider.closest('.slider-container')?.querySelector('[data-slider-value]');
+    slider.addEventListener('input', (e) => {
+      if (display) display.textContent = (e.target as HTMLInputElement).value;
+    });
+  });
+</script>

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

@@ -1,14 +1,47 @@
 ---
-interface Props { label: string; id: string; rows?: number; }
-const { label, id, rows = 4 } = Astro.props;
+/**
+ * GlassTextarea — A multiline text input with glassmorphism surface styling.
+ * 
+ * @param {string} label - Input grouping label title.
+ * @param {string} id - The ID mapping the label to the textbox.
+ * @param {number} rows - Starting HTML rows count height. Default is 4.
+ * @param {string} placeholder - Displayed placeholder within the box when empty.
+ * @param {string} name - Form data extraction name binding.
+ * @param {boolean} required - HTML required indicator.
+ */
+interface Props { 
+  label: string; 
+  id: string; 
+  rows?: number;
+  placeholder?: string;
+  name?: string;
+  required?: boolean;
+}
+
+const { label, id, rows = 4, placeholder = "Start typing...", name, required = false } = Astro.props;
 ---
+
 <div class="glass-textarea-wrap">
   <label for={id} class="glass-label">{label}</label>
-  <textarea {id} {rows} class="glass-textarea" placeholder="Start typing..."></textarea>
+  <textarea {id} {name} {rows} {placeholder} {required} class="glass-textarea"></textarea>
 </div>
+
 <style>
   .glass-textarea-wrap { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
-  .glass-label { font-size: 0.85rem; font-weight: 600; color: #94a3b8; margin-left: 0.5rem; }
-  .glass-textarea { width: 100%; padding: 1rem; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; color: #fff; font-family: inherit; font-size: 0.9rem; outline: none; transition: 0.3s; resize: vertical; }
-  .glass-textarea:focus { border-color: rgba(99, 102, 241, 0.4); background: rgba(255, 255, 255, 0.06); }
+  .glass-label { font-size: 0.85rem; font-weight: 600; color: var(--c-text-2, #94a3b8); margin-left: 0.5rem; }
+  .glass-textarea { 
+    width: 100%; padding: var(--sp-4, 1rem); 
+    background: var(--c-bg-elev, rgba(255, 255, 255, 0.03)); 
+    backdrop-filter: blur(10px); 
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.1)); 
+    border-radius: var(--r-md, 16px); 
+    color: var(--c-text-1, #fff); 
+    font-family: inherit; font-size: 0.9rem; 
+    outline: none; transition: 0.3s; resize: vertical; 
+  }
+  .glass-textarea:focus { 
+    border-color: rgba(99, 102, 241, 0.4); 
+    background: rgba(255, 255, 255, 0.06); 
+  }
+  .glass-textarea::placeholder { color: var(--c-text-muted, #475569); }
 </style>

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

@@ -1,16 +1,72 @@
 ---
+/**
+ * ModernSelect — A styled dropdown selector with a custom arrow and glassmorphism styling.
+ * 
+ * @param {string} label - Input labeling title.
+ * @param {string} id - HTML ID for the select element.
+ * @param {string} name - HTML name binding.
+ * @param {Array<{label: string, value: string, disabled?: boolean}>} options - List of select options.
+ * @param {boolean} required - HTML required attribute.
+ */
+interface Props {
+  label: string;
+  id: string;
+  name?: string;
+  options: Array<{ label: string; value: string; disabled?: boolean }>;
+  required?: boolean;
+}
+
+const { label, id, name, options = [], required = false } = Astro.props;
 ---
-<div class="select-wrap">
-  <select class="custom-select">
-    <option>Select Option</option>
-    <option>Product Design</option>
-    <option>Web Development</option>
-    <option>Mobile Apps</option>
-  </select>
-  <div class="select-arrow"></div>
+
+<div class="select-container">
+  <label for={id} class="select-label">{label}</label>
+  <div class="select-wrap">
+    <select class="custom-select" {id} {name} {required}>
+      {options.map(opt => (
+        <option value={opt.value} disabled={opt.disabled}>{opt.label}</option>
+      ))}
+    </select>
+    <div class="select-arrow" aria-hidden="true">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M6 9l6 6 6-6"/>
+      </svg>
+    </div>
+  </div>
 </div>
+
 <style>
+  .select-container { display: flex; flex-direction: column; gap: var(--sp-2, 0.5rem); width: 100%; }
+  .select-label { font-size: 0.85rem; font-weight: 600; color: var(--c-text-2, #94a3b8); margin-left: 0.5rem; }
+  
   .select-wrap { position: relative; width: 100%; }
-  .custom-select { width: 100%; padding: 0.8rem 1rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; color: #fff; appearance: none; cursor: pointer; outline: none; }
-  .select-arrow { position: absolute; top: 18px; right: 15px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #64748b; pointer-events: none; }
+  
+  .custom-select { 
+    width: 100%; 
+    padding: 0.8rem 2.5rem 0.8rem 1rem; 
+    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); 
+    color: var(--c-text-1, #fff); 
+    appearance: none; cursor: pointer; outline: none; 
+    font-family: inherit; font-size: 0.95rem;
+    transition: border-color 0.2s, background 0.2s;
+  }
+  
+  .custom-select:focus { 
+    border-color: var(--c-primary, #6366f1); 
+    background: rgba(255,255,255,0.06);
+  }
+  
+  .select-arrow { 
+    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); 
+    color: var(--c-text-2, #64748b); 
+    pointer-events: none; transition: transform 0.2s;
+    display: flex; align-items: center; justify-content: center;
+  }
+  
+  .custom-select:focus + .select-arrow { 
+    transform: translateY(-50%) rotate(180deg); 
+    color: var(--c-primary, #6366f1); 
+  }
 </style>