@keyfunc/keybricks-ds 1.0.0

package/components/forms/DatePicker.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+import { IconButton } from "../buttons/IconButton.jsx";
+import { inputBase } from "./Input.jsx";
+
+const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const pad = (n) => String(n).padStart(2, "0");
+const iso = (d) => d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
+
+/** Date picker: input with calendar glyph opening a month-grid popover — chevron month nav, today outlined, selected day filled blue. value/onChange use "YYYY-MM-DD". */
+export function DatePicker({ value = "", placeholder = "Select date", disabled, error, width = 180, onChange, style }) {
+  const [open, setOpen] = React.useState(false);
+  const sel = value ? new Date(value + "T00:00:00") : null;
+  const [view, setView] = React.useState(() => { const d = sel || new Date(); return { y: d.getFullYear(), m: d.getMonth() }; });
+  const root = React.useRef(null);
+  React.useEffect(() => { const h = (e) => { if (root.current && !root.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []);
+  const first = new Date(view.y, view.m, 1);
+  const start = (first.getDay() + 6) % 7; // Monday-first
+  const days = new Date(view.y, view.m + 1, 0).getDate();
+  const todayIso = iso(new Date());
+  const nav = (d) => { let m = view.m + d, y = view.y; if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; } setView({ y, m }); };
+  const label = sel ? MONTHS[sel.getMonth()].slice(0, 3) + " " + sel.getDate() + ", " + sel.getFullYear() : "";
+  return (
+    <div ref={root} style={{ position: "relative", width, ...style }}>
+      <div onClick={() => !disabled && setOpen(!open)} style={{ ...inputBase, display: "flex", alignItems: "center", justifyContent: "space-between", cursor: disabled ? "not-allowed" : "pointer", borderColor: error ? "var(--danger)" : open ? "var(--focus-border)" : "var(--border-control)", boxShadow: open ? "0 0 0 2px var(--focus-ring)" : "none", opacity: disabled ? .5 : 1, color: label ? "var(--text-primary)" : "var(--text-muted)" }}>
+        {label || placeholder}<span style={{ color: "var(--text-muted)", display: "inline-flex" }}><Icon name="calendar" size={14} /></span>
+      </div>
+      {open && <div style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: "var(--z-menu)", width: 252, background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-menu)", padding: 12, boxSizing: "border-box" }}>
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingBottom: 8 }}>
+          <IconButton icon="chevron-left" size="sm" label="Previous month" onClick={() => nav(-1)} />
+          <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", color: "var(--text-heading)" }}>{MONTHS[view.m]} {view.y}</span>
+          <IconButton icon="chevron-right" size="sm" label="Next month" onClick={() => nav(1)} />
+        </div>
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 2 }}>
+          {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map(d => <span key={d} style={{ textAlign: "center", fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-2xs)", color: "var(--text-muted)", padding: "2px 0" }}>{d}</span>)}
+          {Array.from({ length: start }, (_, i) => <span key={"e" + i}></span>)}
+          {Array.from({ length: days }, (_, i) => {
+            const dIso = view.y + "-" + pad(view.m + 1) + "-" + pad(i + 1);
+            const isSel = value === dIso, isToday = todayIso === dIso;
+            return <button key={i} type="button" onClick={() => { onChange && onChange(dIso); setOpen(false); }}
+              style={{ height: 28, borderRadius: "var(--radius-sm)", border: isToday && !isSel ? "1px solid var(--action-primary)" : "1px solid transparent", cursor: "pointer", background: isSel ? "var(--action-primary)" : "transparent", color: isSel ? "var(--on-accent)" : "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", padding: 0, boxSizing: "border-box" }}
+              onMouseEnter={(e) => { if (!isSel) e.currentTarget.style.background = "var(--bg-hover)"; }} onMouseLeave={(e) => { if (!isSel) e.currentTarget.style.background = "transparent"; }}>{i + 1}</button>;
+          })}
+        </div>
+      </div>}
+    </div>
+  );
+}

package/components/forms/DatePicker.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import Icon from '../icons/Icon.vue'
+import IconButton from '../buttons/IconButton.vue'
+import { inputBase } from './Input.vue'
+// Date picker: input with calendar glyph opening a month-grid popover — Monday-first, today outlined, selected filled. v-model is "YYYY-MM-DD".
+const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December']
+const pad = (n) => String(n).padStart(2, '0')
+const props = defineProps({ modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Select date' }, disabled: Boolean, error: Boolean, width: { type: [Number, String], default: 180 }, style: Object })
+const emit = defineEmits(['update:modelValue'])
+const open = ref(false), root = ref(null)
+const sel = computed(() => props.modelValue ? new Date(props.modelValue + 'T00:00:00') : null)
+const d0 = sel.value || new Date()
+const view = ref({ y: d0.getFullYear(), m: d0.getMonth() })
+const start = computed(() => (new Date(view.value.y, view.value.m, 1).getDay() + 6) % 7)
+const days = computed(() => new Date(view.value.y, view.value.m + 1, 0).getDate())
+const todayIso = (() => { const d = new Date(); return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) })()
+const label = computed(() => sel.value ? MONTHS[sel.value.getMonth()].slice(0, 3) + ' ' + sel.value.getDate() + ', ' + sel.value.getFullYear() : '')
+function nav(d) { let m = view.value.m + d, y = view.value.y; if (m < 0) { m = 11; y-- } if (m > 11) { m = 0; y++ } view.value = { y, m } }
+function dayIso(i) { return view.value.y + '-' + pad(view.value.m + 1) + '-' + pad(i) }
+function pick(i) { emit('update:modelValue', dayIso(i)); open.value = false }
+function onDoc(e) { if (root.value && !root.value.contains(e.target)) open.value = false }
+onMounted(() => document.addEventListener('mousedown', onDoc))
+onUnmounted(() => document.removeEventListener('mousedown', onDoc))
+</script>
+<template>
+  <div ref="root" :style="{ position: 'relative', width: typeof width === 'number' ? width + 'px' : width, ...style }">
+    <div @click="!disabled && (open = !open)" :style="{ ...inputBase, display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: disabled ? 'not-allowed' : 'pointer', borderColor: error ? 'var(--danger)' : open ? 'var(--focus-border)' : 'var(--border-control)', boxShadow: open ? '0 0 0 2px var(--focus-ring)' : 'none', opacity: disabled ? .5 : 1, color: label ? 'var(--text-primary)' : 'var(--text-muted)' }">
+      {{ label || placeholder }}<span style="color:var(--text-muted);display:inline-flex"><Icon name="calendar" :size="14" /></span>
+    </div>
+    <div v-if="open" style="position:absolute;top:calc(100% + 4px);left:0;z-index:var(--z-menu);width:252px;background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-menu);padding:12px;box-sizing:border-box">
+      <div style="display:flex;align-items:center;justify-content:space-between;padding-bottom:8px">
+        <IconButton icon="chevron-left" size="sm" label="Previous month" @click="nav(-1)" />
+        <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-sm);color:var(--text-heading)">{{ MONTHS[view.m] }} {{ view.y }}</span>
+        <IconButton icon="chevron-right" size="sm" label="Next month" @click="nav(1)" />
+      </div>
+      <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:2px">
+        <span v-for="d in ['Mo','Tu','We','Th','Fr','Sa','Su']" :key="d" style="text-align:center;font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding:2px 0">{{ d }}</span>
+        <span v-for="i in start" :key="'e' + i" />
+        <button v-for="i in days" :key="i" type="button" @click="pick(i)" class="kb-dp-day"
+          :style="{ height: '28px', borderRadius: 'var(--radius-sm)', border: todayIso === dayIso(i) && modelValue !== dayIso(i) ? '1px solid var(--action-primary)' : '1px solid transparent', cursor: 'pointer', background: modelValue === dayIso(i) ? 'var(--action-primary)' : 'transparent', color: modelValue === dayIso(i) ? 'var(--on-accent)' : 'var(--text-body)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', padding: 0, boxSizing: 'border-box' }">{{ i }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>.kb-dp-day:hover{background:var(--bg-hover)!important}</style>

package/components/forms/Dropzone.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+/** Dashed 2px r10 file dropzone ("Upload Configuration File"). Real HTML5 drag-and-drop is wired in: dragging a file over shows a blue border + light-blue tint automatically. Pass `file` to render the uploaded state instead of the empty prompt. */
+export interface DropzoneProps {
+  title?: string;
+  hint?: string;
+  height?: number;
+  /** Red error message shown in place of `title`, with a red dashed border */
+  error?: string;
+  disabled?: boolean;
+  /** Force the blue drag-over look for demos (real drag-and-drop already triggers it automatically) */
+  dragOver?: boolean;
+  /** File name; when set, renders the filled/uploaded state with a Remove action */
+  file?: string;
+  onRemove?: () => void;
+  onClick?: () => void;
+  /** Fires with the dropped FileList when a real drag-and-drop completes */
+  onDropFiles?: (files: FileList) => void;
+  style?: React.CSSProperties;
+}
+export declare function Dropzone(props: DropzoneProps): JSX.Element;

package/components/forms/Dropzone.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+const toneColor = { default: "var(--dropzone-border)", hover: "var(--dropzone-border-hover)", error: "var(--danger)", drag: "var(--focus-border)" };
+
+/** Dashed upload dropzone (2px, r10). States: default/hover, real drag-and-drop (blue border + tint while a file is dragged over), error, disabled, and a filled "uploaded" state showing the file name + remove. */
+export function Dropzone({ title = "Click to upload or drag and drop", hint = "JSON files only", height = 185.5, error, disabled, dragOver, file, onRemove, onClick, onDropFiles, style }) {
+  const [hover, setHover] = React.useState(false);
+  const [dragging, setDragging] = React.useState(false);
+  const dragActive = dragOver || dragging;
+  if (file) {
+    return (
+      <div style={{ height, borderRadius: "var(--radius-lg)", border: "1px solid var(--border-control)", background: "var(--bg-inset)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, boxSizing: "border-box", ...style }}>
+        <span style={{ color: "var(--success-strong)" }}><Icon name="file-check" size={22} strokeWidth={1.5} /></span>
+        <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", color: "var(--text-heading)" }}>{file}</span>
+        <button type="button" onClick={onRemove} style={{ display: "flex", alignItems: "center", gap: 4, border: "none", background: "transparent", cursor: "pointer", color: "var(--danger)", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", padding: 0 }}>
+          <Icon name="trash-2" size={13} />Remove
+        </button>
+      </div>
+    );
+  }
+  const tone = disabled ? "default" : error ? "error" : dragActive ? "drag" : hover ? "hover" : "default";
+  const stop = (e) => { e.preventDefault(); e.stopPropagation(); };
+  return (
+    <div onClick={disabled ? undefined : onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
+      onDragEnter={disabled ? undefined : (e) => { stop(e); setDragging(true); }}
+      onDragOver={disabled ? undefined : stop}
+      onDragLeave={disabled ? undefined : (e) => { stop(e); setDragging(false); }}
+      onDrop={disabled ? undefined : (e) => { stop(e); setDragging(false); onDropFiles && onDropFiles(e.dataTransfer.files); }}
+      style={{ height, borderRadius: "var(--radius-lg)", border: `1px dashed ${toneColor[tone]}`, background: error ? "var(--danger-bg)" : dragActive ? "var(--soft-bg)" : "transparent", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 4, cursor: disabled ? "not-allowed" : "pointer", boxSizing: "border-box", opacity: disabled ? .5 : 1, transition: "var(--t-hover)", ...style }}>
+      <span style={{ color: error ? "var(--danger)" : dragActive ? "var(--action-primary)" : "var(--text-muted)", marginBottom: 6 }}><Icon name={error ? "triangle-alert" : "upload"} size={22} strokeWidth={1.5} /></span>
+      <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: error ? "var(--danger-text)" : dragActive ? "var(--action-primary)" : "var(--text-heading)" }}>{error || (dragActive ? "Drop file to upload" : title)}</span>
+      <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: dragActive ? "var(--action-primary)" : "var(--text-secondary)" }}>{hint}</span>
+    </div>
+  );
+}

package/components/forms/Dropzone.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ref, computed } from 'vue'
+import Icon from '../icons/Icon.vue'
+const toneColor = { default: 'var(--dropzone-border)', hover: 'var(--dropzone-border-hover)', error: 'var(--danger)', drag: 'var(--focus-border)' }
+// Dashed upload dropzone (2px, r10). States: default/hover, real drag-and-drop (blue border + tint while a file is dragged over), error, disabled, and a filled "uploaded" state.
+const props = defineProps({ title: { type: String, default: 'Click to upload or drag and drop' }, hint: { type: String, default: 'JSON files only' }, height: { type: [Number, String], default: 185.5 }, error: String, disabled: Boolean, dragOver: Boolean, file: String, style: Object })
+const emit = defineEmits(['remove', 'click', 'dropFiles'])
+const hover = ref(false), dragging = ref(false)
+const dragActive = computed(() => props.dragOver || dragging.value)
+const tone = computed(() => props.disabled ? 'default' : props.error ? 'error' : dragActive.value ? 'drag' : hover.value ? 'hover' : 'default')
+function stop(e) { e.preventDefault(); e.stopPropagation() }
+function onDrop(e) { stop(e); dragging.value = false; emit('dropFiles', e.dataTransfer.files) }
+</script>
+<template>
+  <div v-if="file" :style="{ height, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-control)', background: 'var(--bg-inset)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, boxSizing: 'border-box', ...style }">
+    <span style="color:var(--success-strong)"><Icon name="file-check" :size="22" :stroke-width="1.5" /></span>
+    <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);color:var(--text-heading)">{{ file }}</span>
+    <button type="button" @click="$emit('remove')" style="display:flex;align-items:center;gap:4px;border:none;background:transparent;cursor:pointer;color:var(--danger);font-family:var(--font-sans);font-size:var(--text-sm);padding:0"><Icon name="trash-2" :size="13" />Remove</button>
+  </div>
+  <div v-else @click="!disabled && $emit('click')" @mouseenter="hover = true" @mouseleave="hover = false"
+    @dragenter="!disabled && ((e) => { stop(e); dragging = true })($event)" @dragover="!disabled && stop($event)"
+    @dragleave="!disabled && ((e) => { stop(e); dragging = false })($event)" @drop="!disabled && onDrop($event)"
+    :style="{ height, borderRadius: 'var(--radius-lg)', border: `1px dashed ${toneColor[tone]}`, background: error ? 'var(--danger-bg)' : dragActive ? 'var(--soft-bg)' : 'transparent', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4, cursor: disabled ? 'not-allowed' : 'pointer', boxSizing: 'border-box', opacity: disabled ? .5 : 1, transition: 'var(--t-hover)', ...style }">
+    <span :style="{ color: error ? 'var(--danger)' : dragActive ? 'var(--action-primary)' : 'var(--text-muted)', marginBottom: 6 }"><Icon :name="error ? 'triangle-alert' : 'upload'" :size="22" :stroke-width="1.5" /></span>
+    <span :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', color: error ? 'var(--danger-text)' : dragActive ? 'var(--action-primary)' : 'var(--text-heading)' }">{{ error || (dragActive ? 'Drop file to upload' : title) }}</span>
+    <span :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: dragActive ? 'var(--action-primary)' : 'var(--text-secondary)' }">{{ hint }}</span>
+  </div>
+</template>

package/components/forms/Field.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+/** Label + control wrapper. Label 12px/500 #525252; required appends a red " *" after the label. */
+export interface FieldProps {
+  label: string;
+  required?: boolean;
+  /** Muted helper text below the control; hidden when `error` is set */
+  hint?: string;
+  /** Red error text below the control; also expected to drive the control's own error look */
+  error?: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function Field(props: FieldProps): JSX.Element;

package/components/forms/Field.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+/** Form field wrapper: 12px/500 label (red + * when required) above the control, optional hint/error below. */
+export function Field({ label, required, hint, error, children, style }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", ...style }}>
+      <label style={{ paddingBottom: 6, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}{required ? <span style={{ color: "var(--danger)" }}> *</span> : null}</label>
+      {children}
+      {error ? <span style={{ paddingTop: 5, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--danger)" }}>{error}</span>
+        : hint ? <span style={{ paddingTop: 5, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-muted)" }}>{hint}</span> : null}
+    </div>
+  );
+}

package/components/forms/Field.vue

@@ -0,0 +1,12 @@
+<script setup>
+// Form field wrapper: 12px/500 label (red + * when required) above the control, optional hint/error below.
+defineProps({ label: String, required: Boolean, hint: String, error: String, style: Object })
+</script>
+<template>
+  <div :style="{ display: 'flex', flexDirection: 'column', ...style }">
+    <label style="padding-bottom:6px;font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-body)">{{ label }}<span v-if="required" style="color:var(--danger)"> *</span></label>
+    <slot />
+    <span v-if="error" style="padding-top:5px;font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--danger)">{{ error }}</span>
+    <span v-else-if="hint" style="padding-top:5px;font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)">{{ hint }}</span>
+  </div>
+</template>

package/components/forms/Input.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+/** 36px r8 hairline text input; readOnly = #fafafa inset, disabled = 50% opacity, error = red border+ring. Extends native input props. */
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  readOnly?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Input(props: InputProps): JSX.Element;
+/** r8 hairline textarea (default 90px). showCount + maxLength renders a live "n/max" character counter that turns red past the limit. */
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: boolean;
+  disabled?: boolean;
+  showCount?: boolean;
+  maxLength?: number;
+  style?: React.CSSProperties;
+}
+export declare function Textarea(props: TextareaProps): JSX.Element;

package/components/forms/Input.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+export const inputBase = { height: "var(--h-input)", borderRadius: "var(--radius-md)", border: "1px solid var(--border-control)", background: "var(--bg-surface)", padding: "8px 12px", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-primary)", outline: "none", boxSizing: "border-box", width: "100%" };
+
+/** Text input, 36px r8. readOnly = #fafafa inset; disabled = 50% opacity; error = red border + ring. */
+export function Input({ readOnly, disabled, error, style, ...rest }) {
+  const [focus, setFocus] = React.useState(false);
+  return <input readOnly={readOnly} disabled={disabled} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
+    style={{ ...inputBase, ...(readOnly ? { background: "var(--bg-inset)", color: "var(--text-secondary)" } : null),
+      ...(error ? { borderColor: "var(--danger)" } : null),
+      ...(focus && !readOnly && !disabled ? { borderColor: error ? "var(--danger)" : "var(--focus-border)", boxShadow: `0 0 0 2px ${error ? "var(--danger-bg)" : "var(--focus-ring)"}` } : null),
+      ...(disabled ? { opacity: .5, cursor: "not-allowed", background: "var(--bg-inset)" } : null), ...style }} {...rest} />;
+}
+
+/** Multiline textarea, r8, default 90px tall. showCount + maxLength renders a bottom-right "n/max" counter (red past the limit). */
+export function Textarea({ style, rows = 4, error, disabled, showCount, maxLength, value, defaultValue, onChange, ...rest }) {
+  const [focus, setFocus] = React.useState(false);
+  const [inner, setInner] = React.useState(defaultValue || "");
+  const val = value != null ? value : inner;
+  const len = (val || "").length;
+  const over = maxLength != null && len > maxLength;
+  return (
+    <div style={{ position: "relative" }}>
+      <textarea rows={rows} disabled={disabled} maxLength={showCount ? undefined : maxLength}
+        value={value} defaultValue={value == null ? defaultValue : undefined}
+        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
+        onChange={(e) => { if (value == null) setInner(e.target.value); onChange && onChange(e); }}
+        style={{ ...inputBase, height: 90, resize: "vertical", paddingBottom: showCount ? 22 : 8,
+          ...(error || over ? { borderColor: "var(--danger)" } : null),
+          ...(focus && !disabled ? { borderColor: error || over ? "var(--danger)" : "var(--focus-border)", boxShadow: `0 0 0 2px ${error || over ? "var(--danger-bg)" : "var(--focus-ring)"}` } : null),
+          ...(disabled ? { opacity: .5, cursor: "not-allowed", background: "var(--bg-inset)" } : null), ...style }} {...rest} />
+      {showCount ? <span style={{ position: "absolute", right: 10, bottom: 7, fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: over ? "var(--danger)" : "var(--text-muted)" }}>{len}{maxLength != null ? `/${maxLength}` : ""}</span> : null}
+    </div>
+  );
+}

package/components/forms/Input.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { ref, computed } from 'vue'
+export const inputBase = { height: 'var(--h-input)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-control)', background: 'var(--bg-surface)', padding: '8px 12px', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: 'var(--text-primary)', outline: 'none', boxSizing: 'border-box', width: '100%' }
+// Text input, 36px r8. v-model. readonly = inset fill; disabled = 50% opacity; error = red border + ring.
+const props = defineProps({ modelValue: String, readonly: Boolean, disabled: Boolean, error: Boolean, style: Object })
+defineEmits(['update:modelValue'])
+const focus = ref(false)
+const s = computed(() => ({ ...inputBase, ...(props.readonly ? { background: 'var(--bg-inset)', color: 'var(--text-secondary)' } : null),
+  ...(props.error ? { borderColor: 'var(--danger)' } : null),
+  ...(focus.value && !props.readonly && !props.disabled ? { borderColor: props.error ? 'var(--danger)' : 'var(--focus-border)', boxShadow: `0 0 0 2px ${props.error ? 'var(--danger-bg)' : 'var(--focus-ring)'}` } : null),
+  ...(props.disabled ? { opacity: .5, cursor: 'not-allowed', background: 'var(--bg-inset)' } : null), ...props.style }))
+</script>
+<template>
+  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :readonly="readonly" :disabled="disabled" @focus="focus = true" @blur="focus = false" :style="s" />
+</template>
+
+<!-- Textarea — multiline textarea, r8, default 90px tall. showCount + maxLength renders a bottom-right "n/max" counter (red past the limit). -->
+<!--
+<script setup name="Textarea">
+import { ref, computed } from 'vue'
+import { inputBase } from './Input.vue'
+const props = defineProps({ modelValue: String, rows: { type: Number, default: 4 }, error: Boolean, disabled: Boolean, showCount: Boolean, maxLength: Number, style: Object })
+defineEmits(['update:modelValue'])
+const focus = ref(false)
+const len = computed(() => (props.modelValue || '').length)
+const over = computed(() => props.maxLength != null && len.value > props.maxLength)
+const s = computed(() => ({ ...inputBase, height: 90, resize: 'vertical', paddingBottom: props.showCount ? 22 : 8,
+  ...((props.error || over.value) ? { borderColor: 'var(--danger)' } : null),
+  ...(focus.value && !props.disabled ? { borderColor: (props.error || over.value) ? 'var(--danger)' : 'var(--focus-border)', boxShadow: `0 0 0 2px ${(props.error || over.value) ? 'var(--danger-bg)' : 'var(--focus-ring)'}` } : null),
+  ...(props.disabled ? { opacity: .5, cursor: 'not-allowed', background: 'var(--bg-inset)' } : null), ...props.style }))
+</script>
+<template>
+  <div style="position:relative">
+    <textarea :rows="rows" :disabled="disabled" :maxlength="showCount ? undefined : maxLength" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" @focus="focus = true" @blur="focus = false" :style="s" />
+    <span v-if="showCount" :style="{ position: 'absolute', right: 10, bottom: 7, fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: over ? 'var(--danger)' : 'var(--text-muted)' }">{{ len }}{{ maxLength != null ? `/${maxLength}` : '' }}</span>
+  </div>
+</template>
+-->

package/components/forms/MultiSelect.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+/** Multi-select dropdown with checkbox options; picks render as removable tags with "+n" overflow and a clear-all ×. */
+export interface MultiSelectProps {
+  options?: string[];
+  value?: string[];
+  placeholder?: string;
+  /** Tags shown before collapsing to "+n" (default 2) */
+  maxTags?: number;
+  disabled?: boolean;
+  width?: number | string;
+  onChange?: (value: string[]) => void;
+  style?: React.CSSProperties;
+}

package/components/forms/MultiSelect.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+import { Checkbox } from "./Checkbox.jsx";
+import { Tag } from "../display/Tag.jsx";
+
+/** Multi-select dropdown: checkbox option list, selected values render as removable tags in the field (overflow collapses to "+n"), clear-all ×. */
+export function MultiSelect({ options = [], value = [], placeholder = "Select...", maxTags = 2, disabled, width, onChange, style }) {
+  const [open, setOpen] = React.useState(false);
+  const root = React.useRef(null);
+  React.useEffect(() => { const h = (e) => { if (root.current && !root.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []);
+  const toggle = (o) => { const next = value.includes(o) ? value.filter(x => x !== o) : [...value, o]; onChange && onChange(next); };
+  const shown = value.slice(0, maxTags), extra = value.length - shown.length;
+  return (
+    <div ref={root} style={{ position: "relative", width, ...style }}>
+      <div onClick={() => !disabled && setOpen(!open)} style={{ minHeight: "var(--h-input)", borderRadius: "var(--radius-md)", border: `1px solid ${open ? "var(--focus-border)" : "var(--border-control)"}`, boxShadow: open ? "0 0 0 2px var(--focus-ring)" : "none", background: "var(--bg-surface)", padding: "5px 30px 5px 8px", boxSizing: "border-box", display: "flex", alignItems: "center", flexWrap: "wrap", gap: 4, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? .5 : 1, position: "relative" }}>
+        {value.length === 0 && <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-muted)", paddingLeft: 4 }}>{placeholder}</span>}
+        {shown.map(v => <Tag key={v} removable onRemove={() => toggle(v)}>{v}</Tag>)}
+        {extra > 0 && <Tag>+{extra}</Tag>}
+        <span style={{ position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 2, color: "var(--text-muted)" }}>
+          {value.length > 0 && <button type="button" onClick={(e) => { e.stopPropagation(); onChange && onChange([]); }} style={{ border: "none", background: "transparent", cursor: "pointer", color: "inherit", display: "flex", padding: 0 }}><Icon name="x" size={13} /></button>}
+          <span style={{ display: "inline-flex", transform: open ? "rotate(180deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}><Icon name="chevron-down" size={14} /></span>
+        </span>
+      </div>
+      {open && <div style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, right: 0, zIndex: "var(--z-menu)", background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-menu)", padding: 4, maxHeight: 208, overflowY: "auto" }}>
+        {options.map(o => <div key={o} role="option" aria-selected={value.includes(o)} tabIndex={0} onClick={() => toggle(o)} style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 10px", borderRadius: "var(--radius-sm)", cursor: "pointer", background: "transparent" }}
+          onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-hover)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
+          <Checkbox size="sm" checked={value.includes(o)} onChange={() => toggle(o)} />
+          <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-heading)" }}>{o}</span>
+        </div>)}
+      </div>}
+    </div>
+  );
+}

package/components/forms/MultiSelect.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import Icon from '../icons/Icon.vue'
+import Checkbox from './Checkbox.vue'
+import Tag from '../display/Tag.vue'
+// Multi-select dropdown: checkbox options; picks render as removable tags with "+n" overflow and clear-all ×.
+const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: { type: Array, default: () => [] }, placeholder: { type: String, default: 'Select...' }, maxTags: { type: Number, default: 2 }, disabled: Boolean, width: [Number, String], style: Object })
+const emit = defineEmits(['update:modelValue'])
+const open = ref(false), root = ref(null)
+function toggle(o) { emit('update:modelValue', props.modelValue.includes(o) ? props.modelValue.filter(x => x !== o) : [...props.modelValue, o]) }
+const shown = computed(() => props.modelValue.slice(0, props.maxTags))
+const extra = computed(() => props.modelValue.length - shown.value.length)
+function onDoc(e) { if (root.value && !root.value.contains(e.target)) open.value = false }
+onMounted(() => document.addEventListener('mousedown', onDoc))
+onUnmounted(() => document.removeEventListener('mousedown', onDoc))
+</script>
+<template>
+  <div ref="root" :style="{ position: 'relative', width: typeof width === 'number' ? width + 'px' : width, ...style }">
+    <div @click="!disabled && (open = !open)" :style="{ minHeight: 'var(--h-input)', borderRadius: 'var(--radius-md)', border: `1px solid ${open ? 'var(--focus-border)' : 'var(--border-control)'}`, boxShadow: open ? '0 0 0 2px var(--focus-ring)' : 'none', background: 'var(--bg-surface)', padding: '5px 30px 5px 8px', boxSizing: 'border-box', display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px', cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? .5 : 1, position: 'relative' }">
+      <span v-if="modelValue.length === 0" style="font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-muted);padding-left:4px">{{ placeholder }}</span>
+      <Tag v-for="v in shown" :key="v" removable @remove="toggle(v)">{{ v }}</Tag>
+      <Tag v-if="extra > 0">+{{ extra }}</Tag>
+      <span style="position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px;color:var(--text-muted)">
+        <button v-if="modelValue.length" type="button" @click.stop="emit('update:modelValue', [])" style="border:none;background:transparent;cursor:pointer;color:inherit;display:flex;padding:0"><Icon name="x" :size="13" /></button>
+        <span :style="{ display: 'inline-flex', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }"><Icon name="chevron-down" :size="14" /></span>
+      </span>
+    </div>
+    <div v-if="open" style="position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-menu);background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-menu);padding:4px;max-height:208px;overflow-y:auto">
+      <div v-for="o in options" :key="o" role="option" :aria-selected="modelValue.includes(o)" tabindex="0" @click="toggle(o)" class="kb-ms-row" style="display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);cursor:pointer">
+        <Checkbox size="sm" :checked="modelValue.includes(o)" @change="toggle(o)" />
+        <span style="font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-heading)">{{ o }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>.kb-ms-row:hover{background:var(--bg-hover)}</style>

package/components/forms/NumberStepper.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+/** Segmented −/value/+ number stepper (25.5px, r4) — "Preview rows" control. */
+export interface NumberStepperProps {
+  value?: number;
+  onChange?: (next: number) => void;
+  step?: number;
+  min?: number;
+  /** When set, the + button disables at the ceiling */
+  max?: number;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function NumberStepper(props: NumberStepperProps): JSX.Element;

package/components/forms/NumberStepper.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+/** Segmented − / value / + stepper, 25.5px tall, r4 ("Preview rows"). Buttons disable themselves at min/max. */
+export function NumberStepper({ value = 100, onChange, step = 10, min = 0, max, disabled, style }) {
+  const atMin = value <= min, atMax = max != null && value >= max;
+  const seg = (dis) => ({ width: 30, display: "flex", alignItems: "center", justifyContent: "center", cursor: dis ? "not-allowed" : "pointer", color: dis ? "var(--text-muted)" : "var(--text-body)", alignSelf: "stretch", background: "transparent", border: "none", padding: 0 });
+  return (
+    <div style={{ display: "inline-flex", alignItems: "center", height: 25.5, borderRadius: "var(--radius-sm)", border: "1px solid var(--border-control)", overflow: "hidden", background: "var(--bg-surface)", boxSizing: "border-box", opacity: disabled ? .5 : 1, ...style }}>
+      <button type="button" disabled={disabled || atMin} style={seg(disabled || atMin)} onClick={() => onChange && onChange(Math.max(min, value - step))}><Icon name="minus" size={12} /></button>
+      <span style={{ minWidth: 34, textAlign: "center", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-primary)", borderLeft: "1px solid var(--border-control)", borderRight: "1px solid var(--border-control)", alignSelf: "stretch", display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0 6px" }}>{value}</span>
+      <button type="button" disabled={disabled || atMax} style={seg(disabled || atMax)} onClick={() => onChange && onChange(max != null ? Math.min(max, value + step) : value + step)}><Icon name="plus" size={12} /></button>
+    </div>
+  );
+}

package/components/forms/NumberStepper.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { computed } from 'vue'
+import Icon from '../icons/Icon.vue'
+// Segmented − / value / + stepper, 25.5px tall, r4 ("Preview rows"). Buttons disable themselves at min/max.
+const props = defineProps({ modelValue: { type: Number, default: 100 }, step: { type: Number, default: 10 }, min: { type: Number, default: 0 }, max: Number, disabled: Boolean, style: Object })
+const emit = defineEmits(['update:modelValue'])
+const atMin = computed(() => props.modelValue <= props.min)
+const atMax = computed(() => props.max != null && props.modelValue >= props.max)
+function seg(dis) { return { width: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: dis ? 'not-allowed' : 'pointer', color: dis ? 'var(--text-muted)' : 'var(--text-body)', alignSelf: 'stretch', background: 'transparent', border: 'none', padding: 0 } }
+</script>
+<template>
+  <div :style="{ display: 'inline-flex', alignItems: 'center', height: 25.5, borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-control)', overflow: 'hidden', background: 'var(--bg-surface)', boxSizing: 'border-box', opacity: disabled ? .5 : 1, ...style }">
+    <button type="button" :disabled="disabled || atMin" :style="seg(disabled || atMin)" @click="emit('update:modelValue', Math.max(min, modelValue - step))"><Icon name="minus" :size="12" /></button>
+    <span style="min-width:34px;text-align:center;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-primary);border-left:1px solid var(--border-control);border-right:1px solid var(--border-control);align-self:stretch;display:inline-flex;align-items:center;justify-content:center;padding:0 6px">{{ modelValue }}</span>
+    <button type="button" :disabled="disabled || atMax" :style="seg(disabled || atMax)" @click="emit('update:modelValue', max != null ? Math.min(max, modelValue + step) : modelValue + step)"><Icon name="plus" :size="12" /></button>
+  </div>
+</template>

package/components/forms/Radio.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { computed } from 'vue'
+// Radio — 16px (sm: 13px) circle, 1.5px border, filled dot when selected.
+const dims = { sm: { box: 13, dot: 6 }, md: { box: 16, dot: 8 } }
+const props = defineProps({ checked: Boolean, label: String, size: { type: String, default: 'md' }, disabled: Boolean, style: Object })
+const emit = defineEmits(['change'])
+const d = computed(() => dims[props.size] || dims.md)
+</script>
+<template>
+  <label :style="{ display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', lineHeight: 'var(--leading-sm)', gap: 6, cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .5 : 1, ...style }" @click="!disabled && emit('change', true)">
+    <span :style="{ width: d.box + 'px', height: d.box + 'px', borderRadius: 'var(--radius-full)', boxSizing: 'border-box', border: `1.5px solid ${checked ? 'var(--action-primary)' : 'var(--checkbox-border)'}`, background: 'var(--bg-surface)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'var(--t-hover)' }">
+      <span v-if="checked" :style="{ width: d.dot + 'px', height: d.dot + 'px', borderRadius: 'var(--radius-full)', background: 'var(--action-primary)' }" />
+    </span>
+    <span v-if="label" :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: 'var(--text-body)' }">{{ label }}</span>
+  </label>
+</template>

package/components/forms/RadioGroup.vue

@@ -0,0 +1,11 @@
+<script setup>
+import Radio from './Radio.vue'
+// Vertical or horizontal group of Radios.
+defineProps({ options: { type: Array, default: () => [] }, modelValue: String, row: Boolean, size: { type: String, default: 'md' }, style: Object })
+const emit = defineEmits(['update:modelValue'])
+</script>
+<template>
+  <div :style="{ display: 'flex', flexDirection: row ? 'row' : 'column', gap: (row ? 16 : 10) + 'px', ...style }">
+    <Radio v-for="o in options" :key="o" :label="o" :size="size" :checked="modelValue === o" @change="emit('update:modelValue', o)" />
+  </div>
+</template>

package/components/forms/SearchInput.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/** Search field. Default: r10 hairline card filter. bare: borderless 13px top-bar flavor. Shows a clear (×) button once there's a value; uncontrolled if `value` is omitted. */
+export interface SearchInputProps {
+  placeholder?: string;
+  bare?: boolean;
+  value?: string;
+  /** Receives the new string value (consistent with Select / Combobox / MultiSelect) */
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function SearchInput(props: SearchInputProps): JSX.Element;

package/components/forms/SearchInput.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+/** Bordered search field (r10) with leading search glyph; bare=true renders the borderless top-bar flavor. Shows a clear (×) button once there's a value. */
+export function SearchInput({ placeholder = "Search...", bare, value, onChange, disabled, style }) {
+  const [inner, setInner] = React.useState("");
+  const val = value != null ? value : inner;
+  const set = (v) => { if (value == null) setInner(v); onChange && onChange(v); };
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: bare ? 12 : 8, opacity: disabled ? .5 : 1, ...(bare ? null : { border: "1px solid var(--border-control)", borderRadius: "var(--radius-lg)", padding: "6px 12px", background: "var(--bg-surface)" }), ...style }}>
+      <span style={{ color: "var(--text-muted)" }}><Icon name="search" size={bare ? 16 : 14} /></span>
+      <input value={val} disabled={disabled} onChange={(e) => set(e.target.value)} placeholder={placeholder}
+        style={{ border: "none", outline: "none", background: "transparent", flex: 1, minWidth: 0, fontFamily: "var(--font-sans)", fontSize: bare ? "var(--text-base)" : "var(--text-sm)", letterSpacing: bare ? "var(--tracking-base)" : 0, color: "var(--text-primary)", cursor: disabled ? "not-allowed" : "text" }} />
+      {val && !disabled ? <button type="button" onClick={() => set("")} style={{ border: "none", background: "transparent", cursor: "pointer", color: "var(--text-muted)", display: "flex", padding: 0 }}><Icon name="x" size={13} /></button> : null}
+    </div>
+  );
+}

package/components/forms/SearchInput.vue

@@ -0,0 +1,14 @@
+<script setup>
+import Icon from '../icons/Icon.vue'
+// Bordered search field (r10) with leading search glyph; bare=true renders the borderless top-bar flavor. Shows a clear (×) button once there's a value.
+defineProps({ modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Search...' }, bare: Boolean, disabled: Boolean, style: Object })
+const emit = defineEmits(['update:modelValue'])
+</script>
+<template>
+  <div :style="{ display: 'flex', alignItems: 'center', gap: bare ? 12 : 8, opacity: disabled ? .5 : 1, ...(bare ? null : { border: '1px solid var(--border-control)', borderRadius: 'var(--radius-lg)', padding: '6px 12px', background: 'var(--bg-surface)' }), ...style }">
+    <span style="color:var(--text-muted)"><Icon name="search" :size="bare ? 16 : 14" /></span>
+    <input :value="modelValue" :disabled="disabled" @input="emit('update:modelValue', $event.target.value)" :placeholder="placeholder"
+      :style="{ border: 'none', outline: 'none', background: 'transparent', flex: 1, minWidth: 0, fontFamily: 'var(--font-sans)', fontSize: bare ? 'var(--text-base)' : 'var(--text-sm)', letterSpacing: bare ? 'var(--tracking-base)' : 0, color: 'var(--text-primary)', cursor: disabled ? 'not-allowed' : 'text' }" />
+    <button v-if="modelValue && !disabled" type="button" @click="emit('update:modelValue', '')" style="border:none;background:transparent;cursor:pointer;color:var(--text-muted);display:flex;padding:0"><Icon name="x" :size="13" /></button>
+  </div>
+</template>

package/components/forms/Select.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+/** Hairline select. md 36/r8 for filters, sm 25/r4 inside table rows. disabled fills #fafafa inset like Input's readOnly. */
+export interface SelectProps {
+  options?: string[];
+  size?: "md" | "sm";
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  /** Shown as a disabled, muted-color first option when no value is set */
+  placeholder?: string;
+  disabled?: boolean;
+  error?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Select(props: SelectProps): JSX.Element;

package/components/forms/Select.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+/** Native select styled per Keybricks. size md 36/r8 · sm 25/r4 (table rows). disabled = #fafafa inset fill (matches Input readOnly), 50% opacity; error = red border. */
+export function Select({ options = [], size = "md", value, onChange, placeholder, disabled, error, style }) {
+  const sm = size === "sm";
+  return (
+    <div style={{ position: "relative", display: "inline-flex", ...style }}>
+      <select value={value} onChange={onChange} disabled={disabled}
+        style={{ appearance: "none", WebkitAppearance: "none", height: sm ? 25 : 36, borderRadius: sm ? "var(--radius-sm)" : "var(--radius-md)", border: `1px solid ${error ? "var(--danger)" : "var(--border-control)"}`, background: disabled ? "var(--bg-inset)" : "var(--bg-surface)", padding: sm ? "0 26px 0 10px" : "0 32px 0 12px", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: disabled ? "var(--text-secondary)" : value ? "var(--text-primary)" : "var(--text-muted)", outline: "none", cursor: disabled ? "not-allowed" : "pointer", width: "100%", opacity: disabled ? .5 : 1 }}>
+        {placeholder ? <option value="" disabled hidden>{placeholder}</option> : null}
+        {options.map((o) => <option key={o} value={o}>{o}</option>)}
+      </select>
+      <span style={{ position: "absolute", right: sm ? 8 : 10, top: "50%", transform: "translateY(-50%)", pointerEvents: "none", color: "var(--text-muted)" }}><Icon name="chevron-down" size={sm ? 12 : 14} /></span>
+    </div>
+  );
+}