astro-component-kit 0.0.1 → 0.1.0

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

@@ -1,55 +1,83 @@
 ---
+/**
+ * NeumorphicSwitch — A soft-UI checkbox toggle with realistic inset and outset shadow states.
+ * 
+ * @param {string} label - Optional descriptive text suffix.
+ * @param {string} id - HTML ID for input linkage.
+ * @param {string} name - HTML name binding.
+ * @param {boolean} checked - Initial toggle state. Default is false.
+ */
+interface Props {
+  label?: string;
+  id: string;
+  name?: string;
+  checked?: boolean;
+}
+
+const { label, id, name, checked = false } = Astro.props;
 ---
-<label class="neu-switch">
-  <input type="checkbox" />
-  <span class="slider"></span>
-</label>
+
+<div class="neu-switch-wrapper">
+  <label class="neu-switch">
+    <input type="checkbox" {id} {name} {checked} />
+    <span class="slider"></span>
+  </label>
+  {label && <label for={id} class="neu-label">{label}</label>}
+</div>
+
 <style>
+  .neu-switch-wrapper { display: flex; align-items: center; gap: var(--sp-3, 0.75rem); }
+  
   .neu-switch {
     position: relative;
     display: inline-block;
-    width: 56px;
-    height: 30px;
+    width: 60px;
+    height: 32px;
+    flex-shrink: 0;
   }
+  
+  .neu-label { font-size: 0.9rem; color: var(--c-text-2, #94a3b8); cursor: pointer; }
+  
   .neu-switch input {
     opacity: 0;
     width: 0;
     height: 0;
   }
+  
   .slider {
     position: absolute;
     cursor: pointer;
     inset: 0;
-    background: #1a1f2e;
-    transition: 0.4s;
+    background: var(--c-bg, #1a1f2e);
+    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: 34px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.05));
     box-shadow:
-      inset 2px 2px 4px rgba(0, 0, 0, 0.4),
-      inset -2px -2px 4px rgba(255, 255, 255, 0.03);
+      inset 2px 2px 5px rgba(0, 0, 0, 0.5),
+      inset -2px -2px 5px rgba(255, 255, 255, 0.04);
   }
+  
   .slider:before {
     position: absolute;
     content: "";
-    height: 22px;
-    width: 22px;
-    left: 3px;
-    top: 3px;
-    background: #4b5563;
-    transition: 0.4s;
+    height: 24px;
+    width: 24px;
+    left: 4px;
+    bottom: 3px;
+    background: #374151;
+    transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
     border-radius: 50%;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
   }
+  
   input:checked + .slider {
-    background: #1e2433;
-    box-shadow:
-      inset 2px 2px 4px rgba(0, 0, 0, 0.5),
-      inset -2px -2px 4px rgba(255, 255, 255, 0.02);
+    background: rgba(99, 102, 241, 0.1);
+    border-color: rgba(99, 102, 241, 0.2);
   }
+  
   input:checked + .slider:before {
-    transform: translateX(26px);
-    background: #818cf8;
-    box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
+    transform: translateX(28px);
+    background: var(--c-primary, #818cf8);
+    box-shadow: 0 0 15px rgba(129, 140, 248, 0.5);
   }
 </style>
-

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

@@ -1,22 +1,94 @@
 ---
+/**
+ * OTPInput — A specialized input group for One-Time Password verification codes.
+ * 
+ * @param {string} label - Optional grouping label title.
+ * @param {string} id - Base HTML ID for the inputs.
+ * @param {number} length - Number of OTP digits. Default is 4.
+ * @param {string} name - Base name for form submission (will be indexed).
+ */
+interface Props {
+  label?: string;
+  id: string;
+  length?: number;
+  name?: string;
+}
+
+const { label, id, length = 4, name = "otp" } = Astro.props;
 ---
-<div class="otp-wrap">
-  <input type="text" maxlength="1" />
-  <input type="text" maxlength="1" />
-  <input type="text" maxlength="1" />
-  <input type="text" maxlength="1" />
+
+<div class="otp-container">
+  {label && <label class="otp-label">{label}</label>}
+  <div class="otp-wrap" data-otp-group>
+    {Array.from({ length }).map((_, i) => (
+      <input 
+        type="text" 
+        inputmode="numeric"
+        maxlength="1" 
+        pattern="[0-9]*"
+        autocomplete="one-time-code"
+        id={`${id}-${i}`}
+        name={`${name}[]`}
+        class="otp-field"
+        data-otp-index={i}
+      />
+    ))}
+  </div>
 </div>
+
 <style>
+  .otp-container { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4, 1rem); }
+  .otp-label { font-size: 0.9rem; font-weight: 600; color: var(--c-text-2, #94a3b8); }
+  
   .otp-wrap { display: flex; gap: 0.75rem; justify-content: center; }
-  .otp-wrap input { width: 45px; height: 55px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; text-align: center; color: #fff; font-size: 1.5rem; font-weight: 700; outline: none; transition: 0.2s; }
-  .otp-wrap input:focus { border-color: #6366f1; background: rgba(99, 102, 241, 0.1); box-shadow: 0 0 15px rgba(99, 102, 241, 0.3); }
+  
+  .otp-field { 
+    width: 50px; height: 60px; 
+    background: var(--c-bg-elev, rgba(255,255,255,0.05)); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-md, 12px); 
+    text-align: center; color: var(--c-text-1, #fff); 
+    font-size: 1.75rem; font-weight: 800; 
+    outline: none; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
+  }
+  
+  .otp-field:focus { 
+    border-color: var(--c-primary, #6366f1); 
+    background: rgba(99, 102, 241, 0.1); 
+    box-shadow: 0 0 15px rgba(99, 102, 241, 0.3), 0 0 0 3px rgba(99, 102, 241, 0.15); 
+    transform: translateY(-2px);
+  }
 </style>
+
 <script>
-  document.querySelectorAll('.otp-wrap input').forEach((input, idx, inputs) => {
-    input.addEventListener('input', () => { 
-      if ((input as HTMLInputElement).value && idx < inputs.length - 1) {
-        (inputs[idx+1] as HTMLInputElement).focus(); 
-      }
+  document.querySelectorAll('[data-otp-group]').forEach(group => {
+    const inputs = group.querySelectorAll('input') as NodeListOf<HTMLInputElement>;
+    
+    inputs.forEach((input, idx) => {
+      // Auto-advance
+      input.addEventListener('input', (e) => {
+        const val = (e.target as HTMLInputElement).value;
+        if (val && idx < inputs.length - 1) {
+          inputs[idx + 1].focus();
+        }
+      });
+
+      // Backspace logic
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Backspace' && !input.value && idx > 0) {
+          inputs[idx - 1].focus();
+        }
+      });
+
+      // Paste logic
+      input.addEventListener('paste', (e) => {
+        e.preventDefault();
+        const data = e.clipboardData?.getData('text').slice(0, inputs.length).split('') || [];
+        data.forEach((val, i) => {
+          if (inputs[i]) inputs[i].value = val;
+        });
+        if (inputs[data.length - 1]) inputs[data.length - 1].focus();
+      });
     });
   });
 </script>

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

@@ -1,15 +1,71 @@
 ---
+/**
+ * RatingStars — A classic star-rating input for user reviews and feedback.
+ * 
+ * @param {string} name - HTML name for form submission. Default is "rating".
+ * @param {number} maxRating - Maximum number of stars. Default is 5.
+ * @param {string} idPrefix - Prefix used to generate unique IDs for radio buttons.
+ * @param {number} initialValue - Currently selected rating.
+ */
+interface Props {
+  name?: string;
+  maxRating?: number;
+  idPrefix?: string;
+  initialValue?: number;
+}
+
+const { name = "rating", maxRating = 5, idPrefix = "star", initialValue = 0 } = Astro.props;
 ---
-<div class="rating">
-  <input type="radio" name="star" id="star5" /><label for="star5"></label>
-  <input type="radio" name="star" id="star4" /><label for="star4"></label>
-  <input type="radio" name="star" id="star3" /><label for="star3"></label>
-  <input type="radio" name="star" id="star2" /><label for="star2"></label>
-  <input type="radio" name="star" id="star1" /><label for="star1"></label>
+
+<div class="rating-stars" data-rating-group>
+  {Array.from({ length: maxRating }).map((_, i) => {
+    const val = maxRating - i;
+    return (
+      <>
+        <input 
+          type="radio" 
+          name={name} 
+          id={`${idPrefix}-${val}`} 
+          value={val} 
+          checked={initialValue === val}
+          class="rating-stars__input"
+        />
+        <label for={`${idPrefix}-${val}`} class="rating-stars__star" aria-label={`${val} stars`}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+          </svg>
+        </label>
+      </>
+    );
+  })}
 </div>
+
 <style>
-  .rating { display: flex; flex-direction: row-reverse; gap: 5px; }
-  .rating input { display: none; }
-  .rating label { width: 24px; height: 24px; background: #334155; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); cursor: pointer; transition: 0.2s; }
-  .rating label:hover, .rating label:hover ~ label, .rating input:checked ~ label { background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }
+  .rating-stars { display: flex; flex-direction: row-reverse; gap: 4px; width: fit-content; }
+  
+  .rating-stars__input { display: none; }
+  
+  .rating-stars__star { 
+    width: 32px; height: 32px; 
+    cursor: pointer; transition: all 0.2s ease; 
+    color: var(--c-border, #334155);
+  }
+  
+  .rating-stars__star svg { width: 100%; height: 100%; fill: transparent; transition: all 0.2s; }
+  
+  /* Hover and check logic using sibling selectors (requires row-reverse) */
+  .rating-stars__star:hover, 
+  .rating-stars__star:hover ~ .rating-stars__star,
+  .rating-stars__input:checked ~ .rating-stars__star { 
+    color: #fbbf24; 
+  }
+  
+  .rating-stars__star:hover svg, 
+  .rating-stars__star:hover ~ .rating-stars__star svg,
+  .rating-stars__input:checked ~ .rating-stars__star svg { 
+    fill: #fbbf24;
+    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.4));
+  }
+  
+  .rating-stars__star:active { transform: scale(0.9); }
 </style>

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

@@ -1,13 +1,51 @@
 ---
+/**
+ * SearchReveal — A dynamic minimal search pod that expands smoothly into a full input field on hover or focus.
+ * 
+ * @param {string} id - Standard HTML ID property.
+ * @param {string} placeholder - Default placeholder ("Search...").
+ * @param {string} name - Standard HTML name grouping.
+ */
+interface Props {
+  id: string;
+  placeholder?: string;
+  name?: string;
+}
+
+const { id, placeholder = "Search...", name } = Astro.props;
 ---
+
 <div class="search-box">
-  <input type="text" placeholder="Search..." />
-  <button>🔍</button>
+  <input type="search" {id} {name} {placeholder} class="search-input" aria-label="Search content" />
+  <button type="button" aria-label="Submit search" class="search-btn">
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="11" cy="11" r="8"></circle>
+      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+    </svg>
+  </button>
 </div>
+
 <style>
-  .search-box { position: relative; width: 40px; height: 40px; transition: 0.4s; }
+  .search-box { position: relative; width: 44px; height: 44px; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
   .search-box:hover, .search-box:focus-within { width: 250px; }
-  .search-box input { width: 100%; height: 100%; background: #1e293b; border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; padding: 0 45px 0 20px; color: #fff; outline: none; opacity: 0; transition: 0.3s; }
-  .search-box:hover input, .search-box:focus-within input { opacity: 1; }
-  .search-box button { position: absolute; right: 0; width: 40px; height: 40px; background: #6366f1; border: none; border-radius: 50%; color: #fff; cursor: pointer; }
+  .search-input { 
+    width: 100%; height: 100%; box-sizing: border-box;
+    background: var(--c-bg-elev, #1e293b); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-full, 100px); 
+    padding: 0 45px 0 20px; 
+    color: var(--c-text-1, #fff); outline: none; opacity: 0; transition: 0.3s; 
+  }
+  .search-box:hover .search-input, .search-box:focus-within .search-input { opacity: 1; }
+  .search-input::placeholder { color: var(--c-text-muted, #64748b); }
+  
+  .search-btn { 
+    position: absolute; right: 0; top: 0;
+    width: 44px; height: 44px; 
+    background: var(--c-primary, #6366f1); border: none; 
+    border-radius: 50%; color: #fff; cursor: pointer; 
+    display: flex; align-items: center; justify-content: center;
+    transition: background 0.2s;
+  }
+  .search-btn:hover { background: var(--c-primary-light, #818cf8); }
 </style>

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

@@ -1,13 +1,67 @@
 ---
+/**
+ * SegmentedControl — A horizontal group of button-like radio choices for switching views or modes.
+ * 
+ * @param {string} name - Shared HTML name for the internal radio inputs.
+ * @param {Array<{label: string, value: string, checked?: boolean}>} options - Selectable segments.
+ * @param {string} idPrefix - Prefix for auto-generating input IDs.
+ */
+interface Props {
+  name: string;
+  options: Array<{ label: string; value: string; checked?: boolean }>;
+  idPrefix?: string;
+}
+
+const { name, options = [], idPrefix = "seg" } = Astro.props;
 ---
+
 <div class="segmented">
-  <input type="radio" name="seg" id="seg1" checked /><label for="seg1">Daily</label>
-  <input type="radio" name="seg" id="seg2" /><label for="seg2">Weekly</label>
-  <input type="radio" name="seg" id="seg3" /><label for="seg3">Monthly</label>
+  {options.map((opt, i) => (
+    <div class="segmented-item">
+      <input 
+        type="radio" 
+        name={name} 
+        id={`${idPrefix}-${i}`} 
+        value={opt.value} 
+        checked={opt.checked} 
+        class="segmented-input"
+      />
+      <label for={`${idPrefix}-${i}`} class="segmented-label">{opt.label}</label>
+    </div>
+  ))}
 </div>
+
 <style>
-  .segmented { display: flex; position: relative; background: rgba(255,255,255,0.05); padding: 4px; border-radius: 10px; width: fit-content; }
-  .segmented label { padding: 0.4rem 1.2rem; cursor: pointer; z-index: 1; font-size: 0.85rem; transition: 0.3s; color: #94a3b8; }
-  .segmented input { display: none; }
-  .segmented input:checked + label { color: #fff; font-weight: 600; background: rgba(99, 102, 241, 0.2); border-radius: 6px; }
+  .segmented { 
+    display: flex; position: relative; 
+    background: var(--c-bg-elev, rgba(255,255,255,0.05)); 
+    padding: 4px; border-radius: var(--r-md, 12px); 
+    width: fit-content; border: 1px solid var(--c-border, rgba(255,255,255,0.05));
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+  }
+  
+  .segmented-item { display: flex; }
+  
+  .segmented-label { 
+    padding: 0.5rem 1.4rem; cursor: pointer; z-index: 1; 
+    font-size: 0.85rem; transition: all 0.25s ease; 
+    color: var(--c-text-2, #94a3b8); 
+    border-radius: var(--r-sm, 8px);
+    font-weight: 500;
+    user-select: none;
+  }
+  
+  .segmented-input { display: none; }
+  
+  .segmented-input:checked + .segmented-label { 
+    color: var(--c-text-1, #fff); 
+    font-weight: 700; 
+    background: var(--c-primary, #6366f1); 
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+  }
+  
+  .segmented-label:hover:not(.segmented-input:checked + .segmented-label) {
+    color: var(--c-text-1);
+    background: rgba(255,255,255,0.03);
+  }
 </style>

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

@@ -1,11 +1,62 @@
 ---
+/**
+ * SimpleFileInput — A minimalist file upload button that masks the native browser input.
+ * 
+ * @param {string} label - The text displayed on the button. Default is "Choose File".
+ * @param {string} id - HTML ID for the file input.
+ * @param {string} name - HTML name binding.
+ * @param {string} accept - Allowed file formats.
+ */
+interface Props {
+  label?: string;
+  id: string;
+  name?: string;
+  accept?: string;
+}
+
+const { label = "Choose File", id, name, accept } = Astro.props;
 ---
-<label class="file-btn">
-  <input type="file" />
-  <span>Upload Logo</span>
+
+<label class="file-btn" for={id}>
+  <input type="file" {id} {name} {accept} class="file-btn__input" />
+  <span class="file-btn__label">{label}</span>
 </label>
+
 <style>
-  .file-btn { position: relative; overflow: hidden; display: inline-block; cursor: pointer; }
-  .file-btn input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; cursor: pointer; }
-  .file-btn span { background: #6366f1; color: #fff; padding: 0.7rem 1.5rem; border-radius: 8px; font-weight: 600; display: inline-block; }
+  .file-btn { 
+    position: relative; 
+    overflow: hidden; 
+    display: inline-block; 
+    cursor: pointer; 
+  }
+  
+  .file-btn__input { 
+    position: absolute; 
+    left: 0; top: 0; 
+    width: 100%; height: 100%;
+    opacity: 0; cursor: pointer; 
+    font-size: 0;
+  }
+  
+  .file-btn__label { 
+    background: var(--c-primary, #6366f1); 
+    color: #fff; 
+    padding: 0.8rem 1.6rem; 
+    border-radius: var(--r-md, 10px); 
+    font-weight: 700; 
+    display: inline-block; 
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
+    font-size: 0.95rem;
+  }
+  
+  .file-btn:hover .file-btn__label { 
+    filter: brightness(1.1);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
+  }
+  
+  .file-btn:active .file-btn__label {
+    transform: translateY(0);
+  }
 </style>

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

@@ -1,14 +1,106 @@
 ---
+/**
+ * StepperInput — A numeric input with increment and decrement buttons for precise control.
+ * 
+ * @param {string} label - Optional input label.
+ * @param {string} id - HTML ID for the number input.
+ * @param {string} name - HTML name binding.
+ * @param {number} value - Initial default value. Default is 1.
+ * @param {number} min - Minimum allowed value.
+ * @param {number} max - Maximum allowed value.
+ * @param {number} step - Numeric increment step. Default is 1.
+ */
+interface Props {
+  label?: string;
+  id: string;
+  name?: string;
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+const { label, id, name, value = 1, min, max, step = 1 } = Astro.props;
 ---
-<div class="stepper">
-  <button>-</button>
-  <input type="number" value="1" />
-  <button>+</button>
+
+<div class="stepper-container">
+  {label && <label class="stepper-label" for={id}>{label}</label>}
+  <div class="stepper" data-stepper>
+    <button type="button" class="stepper-btn stepper-btn--minus" data-step-minus aria-label="Decrease value">−</button>
+    <input 
+      type="number" 
+      {id} 
+      {name} 
+      {min} 
+      {max} 
+      {step} 
+      value={value} 
+      class="stepper-input"
+      data-step-input
+    />
+    <button type="button" class="stepper-btn stepper-btn--plus" data-step-plus aria-label="Increase value">+</button>
+  </div>
 </div>
+
 <style>
-  .stepper { display: flex; align-items: center; gap: 2px; }
-  .stepper button { width: 35px; height: 35px; background: #6366f1; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; transition: 0.2s; }
-  .stepper button:hover { background: #4f46e5; }
-  .stepper input { width: 50px; height: 35px; background: rgba(255,255,255,0.05); border: none; text-align: center; color: #fff; outline: none; -moz-appearance: textfield; }
-  .stepper input::-webkit-inner-spin-button { display: none; }
+  .stepper-container { display: flex; flex-direction: column; gap: var(--sp-2, 0.5rem); }
+  .stepper-label { font-size: 0.85rem; font-weight: 600; color: var(--c-text-2, #94a3b8); margin-left: 0.5rem; }
+  
+  .stepper { 
+    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; 
+    width: fit-content;
+  }
+  
+  .stepper-btn { 
+    width: 40px; height: 40px; 
+    background: var(--c-primary, #6366f1); 
+    border: none; color: #fff; 
+    font-size: 1.25rem; font-weight: 600; 
+    cursor: pointer; transition: all 0.2s; 
+    display: grid; place-items: center;
+  }
+  
+  .stepper-btn:hover { background: var(--c-primary-light, #818cf8); }
+  .stepper-btn:active { transform: scale(0.95); }
+  
+  .stepper-input { 
+    width: 60px; height: 40px; 
+    background: transparent; 
+    border: none; text-align: center; 
+    color: var(--c-text-1, #fff); 
+    font-size: 1rem; font-weight: 700;
+    outline: none; -moz-appearance: textfield; 
+    font-family: inherit;
+  }
+  
+  .stepper-input::-webkit-inner-spin-button,
+  .stepper-input::-webkit-outer-spin-button { display: none; }
 </style>
+
+<script>
+  document.querySelectorAll('[data-stepper]').forEach(wrapper => {
+    const input = wrapper.querySelector('[data-step-input]') as HTMLInputElement;
+    const minus = wrapper.querySelector('[data-step-minus]');
+    const plus = wrapper.querySelector('[data-step-plus]');
+    
+    if (!input || !minus || !plus) return;
+
+    const step = parseFloat(input.step) || 1;
+    const min = input.min !== "" ? parseFloat(input.min) : -Infinity;
+    const max = input.max !== "" ? parseFloat(input.max) : Infinity;
+
+    minus.addEventListener('click', () => {
+      const current = parseFloat(input.value) || 0;
+      if (current - step >= min) input.value = (current - step).toString();
+    });
+
+    plus.addEventListener('click', () => {
+      const current = parseFloat(input.value) || 0;
+      if (current + step <= max) input.value = (current + step).toString();
+    });
+  });
+</script>