Htmx/templates/components/inputs.html

{% extends "base.html" %}

{% block title %}Form Fields & Select - Design System Wiki{% endblock %}

{% block content %}
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
    
    <!-- Left Navigation Sidebar -->
    {% include "components/sidebar.html" %}

    <!-- Main Content -->
    <div class="flex-1 space-y-8">
        
        <!-- Header -->
        <div class="pb-6 border-b border-border">
            <span class="text-xs font-semibold text-indigo-400">Forms & Inputs</span>
            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Form Fields & Select</h1>
            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
                Standard text inputs, passwords, multi-line textareas, and custom styled select dropdown elements overdrawn by vector SVG chevron arrows.
            </p>
        </div>

        <!-- Section Fields -->
        <section class="space-y-4">
            <h2 class="text-lg font-bold text-slate-200">Form Inputs & Select Menu Showcase</h2>
            
            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
                <!-- Tab Headers -->
                <div class="flex border-b border-border/60 pb-1.5">
                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'input-sandbox')">Interactive Demo</button>
                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'input-code')">HTML Markup</button>
                </div>
                
                <!-- Demo Viewport -->
                <div id="input-sandbox" class="wiki-pane space-y-4 max-w-md py-2">
                    <!-- Text field -->
                    <div class="space-y-2">
                        <label class="block text-xs font-semibold text-muted-foreground">Username Input</label>
                        <input type="text" placeholder="e.g. dev_alice" class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200">
                    </div>
                    
                    <!-- Password field -->
                    <div class="space-y-2">
                        <label class="block text-xs font-semibold text-muted-foreground">Security Password</label>
                        <input type="password" placeholder="••••••••" class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200">
                    </div>

                    <!-- Textarea -->
                    <div class="space-y-2">
                        <label class="block text-xs font-semibold text-muted-foreground">Task Details</label>
                        <textarea rows="3" placeholder="Provide a detailed description of the task requirements..." class="block w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200 resize-none"></textarea>
                    </div>
                    
                    <!-- Custom Styled Select Dropdown -->
                    <div class="space-y-2">
                        <label class="block text-xs font-semibold text-muted-foreground">Developer Specialization</label>
                        <div class="custom-select relative inline-block w-full">
                            <input type="hidden" name="specialization" class="select-value" value="Senior Rust Engineer">
                            <button type="button" class="select-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200 hover:bg-secondary/50 transition focus:outline-none focus:ring-2 focus:ring-sky-500">
                                <span class="select-text">Senior Rust Engineer</span>
                                <svg class="h-4 w-4 text-slate-500 transition-transform duration-200 select-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <polyline points="6 9 12 15 18 9"/>
                                </svg>
                            </button>
                            <div class="select-popover absolute left-0 z-20 mt-2 w-full p-1 rounded-2xl border border-border bg-popover shadow-2xl hidden animate-in fade-in slide-in-from-top-2 duration-150">
                                <div class="max-h-60 overflow-y-auto p-0.5 space-y-0.5">
                                    <button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs bg-accent text-accent-foreground font-semibold focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Senior Rust Engineer">Senior Rust Engineer</button>
                                    <button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Frontend Architect">Frontend Architect</button>
                                    <button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="DevOps Lead">DevOps Lead</button>
                                    <button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Database Administrator">Database Administrator</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Code Snippet Area -->
                <div id="input-code" class="wiki-pane hidden">
                    <div class="relative group">
                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-muted-foreground/90 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                            Copy Code
                        </button>
                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Styled Text Input --&gt;
&lt;div class="space-y-2"&gt;
    &lt;label class="block text-xs font-semibold text-muted-foreground"&gt;Username Input&lt;/label&gt;
    &lt;input type="text" placeholder="e.g. dev_alice"
           class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200"&gt;
&lt;/div&gt;

&lt;!-- Styled Textarea --&gt;
&lt;div class="space-y-2"&gt;
    &lt;label class="block text-xs font-semibold text-muted-foreground"&gt;Task Details&lt;/label&gt;
    &lt;textarea rows="3" placeholder="Provide a detailed description..."
              class="block w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200 resize-none"&gt;&lt;/textarea&gt;
&lt;/div&gt;

&lt;!-- Custom Styled Select Dropdown (Chevron and Popover managed globally in components.js) --&gt;
&lt;div class="space-y-2"&gt;
    &lt;label class="block text-xs font-semibold text-muted-foreground"&gt;Developer Specialization&lt;/label&gt;
    &lt;div class="custom-select relative inline-block w-full"&gt;
        &lt;!-- Hidden input holds the actual value for form submissions --&gt;
        &lt;input type="hidden" name="specialization" class="select-value" value="Senior Rust Engineer"&gt;
        
        &lt;!-- Toggle trigger button --&gt;
        &lt;button type="button" class="select-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200"&gt;
            &lt;span class="select-text"&gt;Senior Rust Engineer&lt;/span&gt;
            &lt;svg class="h-4 w-4 text-slate-500 transition-transform duration-200 select-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;
                &lt;polyline points="6 9 12 15 18 9"/&gt;
            &lt;/svg&gt;
        &lt;/button&gt;
        
        &lt;!-- Options Popover --&gt;
        &lt;div class="select-popover absolute left-0 z-20 mt-2 w-full p-1 rounded-2xl border border-border bg-popover shadow-2xl hidden"&gt;
            &lt;div class="max-h-60 overflow-y-auto p-0.5 space-y-0.5"&gt;
                &lt;button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs bg-accent text-accent-foreground font-semibold text-slate-200 text-left" data-value="Senior Rust Engineer"&gt;Senior Rust Engineer&lt;/button&gt;
                &lt;button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground text-slate-200 text-left" data-value="Frontend Architect"&gt;Frontend Architect&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Global JS Bindings Documentation -->
        <section class="space-y-4 border-t border-border/60 pt-6">
            <h2 class="text-lg font-bold text-slate-200">How the Global Custom Select JS Works</h2>
            <p class="text-xs text-muted-foreground leading-relaxed">
                The global script <code>components.js</code> monitors specific class names to run the premium custom select elements. Ensure your markup uses these selectors to integrate selection, triggers, and keyboard arrow controls:
            </p>
            <div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
                <table class="w-full border-collapse text-left text-xs">
                    <thead>
                        <tr class="border-b border-border text-muted-foreground font-bold">
                            <th class="pb-2.5 w-1/4">Selector / Class</th>
                            <th class="pb-2.5 w-1/4">Type</th>
                            <th class="pb-2.5">Behavior & Purpose</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.custom-select</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                Outer wrapper for the entire select component. Scopes and isolates input values and popovers.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-value</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                Applied to the <code>&lt;input type="hidden"&gt;</code> that stores the raw value submitted to forms.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-trigger</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                The visible button that user clicks. Toggles popover visibility and chevron rotation on click.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-text</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                Inner text element inside trigger button that dynamically changes its text content to match the selected option.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-chevron</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                Arrow SVG icon. Rotates 180 degrees (adds <code>rotate-180</code>) when the menu opens.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-popover</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                Floating list container. Starts with the class <code>hidden</code>. Positioned absolutely.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.select-item</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                Applied to choices inside popover (usually buttons). Must have <code>data-value="..."</code> containing the raw option value.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
                <span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
                <p class="text-slate-400 leading-normal">
                    You can customize the button trigger layout (paddings, chevrons, fonts, sizing), borders, shadows, options listing alignment, and checkmark icons. Ensure you preserve the classes <code>.custom-select</code>, <code>.select-value</code>, <code>.select-trigger</code>, <code>.select-popover</code>, and <code>.select-item</code> with its <code>data-value</code> attribute so that mouse selections and keyboard arrows function correctly.
                </p>
            </div>
        </section>

    </div>
</div>

<script>
    function toggleWikiTabs(btn, paneId) {
        const card = btn.closest('.border-border');
        if (!card) return;
        card.querySelectorAll('button').forEach(b => {
            b.classList.remove('border-sky-500', 'text-sky-400');
            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
        });
        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
        btn.classList.add('border-sky-500', 'text-sky-400');
        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
        const target = card.querySelector('#' + paneId);
        if (target) target.classList.remove('hidden');
    }
</script>
{% endblock %}