affora 0.1.0

package/src/components/combobox.tsx

@@ -0,0 +1,279 @@
+import type React from 'react';
+import { useId, useState } from 'react';
+
+/**
+ * Combobox — a searchable select for choosing a JavaScript framework.
+ *
+ * Substrate is deliberately plain and agent-legible:
+ *   <label> + real <input list> + <datalist> of real <option>s.
+ * The options live in the DOM, the chosen value is the input's visible value,
+ * and an agent can simply type a value or read the listed options. Every
+ * stylistic decision is a var(--token) so the ONE authored component expresses
+ * all five theme archetypes without baking in a single look.
+ */
+
+type Framework = {
+  value: string;
+  hint: string; // short editorial descriptor shown as inline documentation
+};
+
+const FRAMEWORKS: Framework[] = [
+  { value: 'React', hint: 'Component UI · virtual DOM' },
+  { value: 'Vue', hint: 'Progressive · template-first' },
+  { value: 'Svelte', hint: 'Compiler · no runtime' },
+  { value: 'Angular', hint: 'Batteries-included platform' },
+  { value: 'Solid', hint: 'Fine-grained reactivity' },
+  { value: 'Qwik', hint: 'Resumable · zero-hydration' },
+];
+
+const VALID = new Set(FRAMEWORKS.map((f) => f.value.toLowerCase()));
+
+export const Combobox: React.FC<{ onCommit?: (v: string) => void; initialValue?: string }> = ({ onCommit, initialValue = '' }) => {
+  const inputId = useId();
+  const listId = useId();
+  const statusId = useId();
+  const [value, setValue] = useState(initialValue);
+
+  const trimmed = value.trim();
+  const matched = trimmed !== '' && VALID.has(trimmed.toLowerCase());
+
+  const commit = (raw: string) => {
+    const v = raw.trim();
+    setValue(v);
+    if (v !== '') onCommit?.(v);
+  };
+
+  return (
+    <div className="cbx-scope">
+      <style>{css}</style>
+
+      <div className="cbx-field">
+        <label className="cbx-label" htmlFor={inputId}>
+          Framework
+        </label>
+        <p className="cbx-help" id={`${inputId}-help`}>
+          Type or pick the JavaScript framework for this project.
+        </p>
+
+        <div className="cbx-control" data-matched={matched ? 'true' : 'false'}>
+          <FrameworkGlyph />
+          <input
+            id={inputId}
+            className="cbx-input"
+            type="text"
+            list={listId}
+            role="combobox"
+            aria-expanded="true"
+            aria-controls={listId}
+            aria-describedby={`${inputId}-help ${statusId}`}
+            autoComplete="off"
+            spellCheck={false}
+            placeholder="Search frameworks…"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onInput={(e) => {
+              // datalist selection fires input with the full option value
+              const v = (e.target as HTMLInputElement).value;
+              if (VALID.has(v.trim().toLowerCase())) commit(v);
+            }}
+            onBlur={(e) => {
+              if (e.target.value.trim() !== '') commit(e.target.value);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                commit((e.target as HTMLInputElement).value);
+              }
+            }}
+          />
+          <ChevronGlyph />
+        </div>
+
+        <datalist id={listId}>
+          {FRAMEWORKS.map((f) => (
+            <option key={f.value} value={f.value}>
+              {f.hint}
+            </option>
+          ))}
+        </datalist>
+
+        <p className="cbx-status" id={statusId} role="status" aria-live="polite">
+          {matched ? (
+            <>
+              <CheckGlyph />
+              <span>
+                <strong className="cbx-status-value">{trimmed}</strong> selected
+              </span>
+            </>
+          ) : (
+            <span className="cbx-status-idle">
+              {FRAMEWORKS.length} frameworks available
+            </span>
+          )}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+/* ---- inline SVG glyphs (currentColor only, no external assets) ---- */
+
+const FrameworkGlyph: React.FC = () => (
+  <svg className="cbx-lead" width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path
+      d="M12 3 3 7.5 12 12l9-4.5L12 3Z"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3 12l9 4.5L21 12M3 16.5 12 21l9-4.5"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinejoin="round"
+      opacity="0.55"
+    />
+  </svg>
+);
+
+const ChevronGlyph: React.FC = () => (
+  <svg className="cbx-chevron" width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="m6 9 6 6 6-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const CheckGlyph: React.FC = () => (
+  <svg className="cbx-check" width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="m5 12.5 4.2 4.5L19 7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const css = `
+.cbx-scope {
+  color: var(--fg);
+  font-family: var(--font);
+  font-size: var(--text-base);
+  line-height: var(--leading);
+  -webkit-font-smoothing: antialiased;
+}
+.cbx-scope * { box-sizing: border-box; }
+
+.cbx-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  width: 100%;
+  max-width: 380px;
+  padding: var(--pad-loose);
+  background: var(--glass-bg, var(--surface));
+  backdrop-filter: var(--glass-blur, none);
+  -webkit-backdrop-filter: var(--glass-blur, none);
+  border: 1px solid var(--glass-border, var(--border));
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.cbx-label {
+  font-family: var(--font-display);
+  font-size: calc(var(--text-base) * 1.15);
+  font-weight: var(--weight-display);
+  letter-spacing: var(--tracking-tight);
+  line-height: 1.2;
+}
+.cbx-help {
+  margin: calc(var(--gap) * -0.5) 0 0;
+  color: var(--fg-muted);
+  font-size: calc(var(--text-base) * 0.92);
+}
+
+.cbx-control {
+  display: flex;
+  align-items: center;
+  gap: var(--pad-tight);
+  padding: 0 var(--pad);
+  min-height: calc(var(--text-base) * 3.2);
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  transition:
+    border-color var(--dur) var(--ease),
+    box-shadow var(--dur) var(--ease),
+    background var(--dur) var(--ease);
+}
+.cbx-control:hover {
+  border-color: var(--accent);
+}
+.cbx-control:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--ring);
+  background: var(--surface);
+}
+.cbx-control[data-matched='true'] {
+  border-color: var(--accent);
+  background: var(--accent-weak);
+}
+.cbx-control[data-matched='true']:focus-within {
+  background: var(--surface);
+}
+
+.cbx-lead {
+  flex: none;
+  color: var(--accent);
+}
+
+.cbx-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  appearance: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--fg);
+  font-family: var(--font);
+  font-size: var(--text-base);
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-tight);
+  padding: var(--pad-tight) 0;
+}
+.cbx-input::placeholder {
+  color: var(--fg-subtle);
+  font-weight: var(--weight-normal);
+}
+/* keep the native datalist affordance from doubling our custom chevron */
+.cbx-input::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  width: 0;
+  margin: 0;
+}
+
+.cbx-chevron {
+  flex: none;
+  color: var(--fg-subtle);
+  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-emphasis);
+}
+.cbx-control:focus-within .cbx-chevron {
+  color: var(--accent);
+  transform: rotate(180deg);
+}
+
+.cbx-status {
+  display: flex;
+  align-items: center;
+  gap: var(--pad-tight);
+  margin: 0;
+  min-height: calc(var(--text-base) * 1.3);
+  font-size: calc(var(--text-base) * 0.92);
+  color: var(--fg-muted);
+}
+.cbx-status-idle { color: var(--fg-subtle); }
+.cbx-status-value {
+  color: var(--fg);
+  font-weight: var(--weight-bold);
+}
+.cbx-check {
+  flex: none;
+  color: var(--success);
+}
+`;
+
+export default Combobox;