@valentinkolb/cloud 0.1.0

package/src/ui/input/PinInput.tsx

@@ -0,0 +1,169 @@
+import { For, onMount } from "solid-js";
+import { InputWrapper, createInputA11y } from "./util";
+
+type PinInputProps = {
+  label?: string;
+  description?: string;
+  length?: number;
+  value?: () => string;
+  onChange?: (value: string) => void;
+  error?: () => string | undefined;
+  disabled?: boolean;
+  stretch?: boolean;
+  required?: boolean;
+};
+
+/**
+ * PIN input component with individual digit fields
+ * @param label - Optional label text
+ * @param description - Optional description text
+ * @param length - Number of PIN digits (default: 6)
+ * @param value - Reactive string value getter
+ * @param onChange - Called when PIN value changes
+ * @param error - Reactive error message getter
+ * @param disabled - Disable all input fields
+ * @param stretch - Make input fields stretch to full width
+ * @param required - Show required asterisk after label
+ */
+const PinInput = ({
+  label,
+  description,
+  length = 6,
+  value,
+  onChange,
+  error,
+  disabled = false,
+  stretch = false,
+  required = false,
+}: PinInputProps) => {
+  let inputRefs: HTMLInputElement[] = [];
+  const a11y = createInputA11y({ description, error });
+
+  const handleChange = (index: number, newValue: string) => {
+    if (disabled) return;
+
+    // Only allow single digits
+    const digit = newValue.slice(-1).replace(/[^0-9]/g, "");
+
+    const currentValue = value?.() || "";
+    const before = currentValue.slice(0, index);
+    const after = currentValue.slice(index + 1);
+
+    onChange?.(before + digit + after);
+
+    // Auto-focus next field
+    if (digit && index < length - 1) {
+      inputRefs[index + 1]?.focus();
+      inputRefs[index + 1]?.select();
+    }
+  };
+
+  const handleKeyDown = (index: number, e: KeyboardEvent) => {
+    if (disabled) return;
+
+    switch (e.key) {
+      case "Backspace":
+        const val = value?.() || "";
+        if (!val[index] && index > 0) {
+          e.preventDefault();
+          // Move to previous field and delete its content
+          const currentValue = val;
+          const before = currentValue.slice(0, index - 1);
+          const after = currentValue.slice(index);
+          onChange?.(before + after);
+          inputRefs[index - 1]?.focus();
+        }
+        break;
+
+      case "ArrowLeft":
+        e.preventDefault();
+        if (index > 0) {
+          inputRefs[index - 1]?.focus();
+          inputRefs[index - 1]?.select();
+        }
+        break;
+
+      case "ArrowRight":
+        e.preventDefault();
+        if (index < length - 1) {
+          inputRefs[index + 1]?.focus();
+          inputRefs[index + 1]?.select();
+        }
+        break;
+    }
+  };
+
+  const handlePaste = (e: ClipboardEvent) => {
+    e.preventDefault();
+    if (disabled) return;
+
+    const pastedData = e.clipboardData?.getData("text") || "";
+    const pastedDigits = pastedData.replace(/[^0-9]/g, "");
+
+    if (pastedDigits.length > 0) {
+      const startIndex = inputRefs.findIndex((ref) => ref === document.activeElement);
+      const index = startIndex >= 0 ? startIndex : 0;
+
+      const currentValue = value?.() || "";
+      const before = currentValue.slice(0, index);
+      const pasted = pastedDigits.slice(0, length - index);
+      const after = currentValue.slice(index + pasted.length);
+
+      onChange?.(before + pasted + after);
+
+      // Focus appropriate next field
+      const nextIndex = Math.min(index + pasted.length, length - 1);
+      inputRefs[nextIndex]?.focus();
+      inputRefs[nextIndex]?.select();
+    }
+  };
+
+  // Add paste listener on mount
+  onMount(() => {
+    const container = inputRefs[0]?.parentElement?.parentElement;
+    if (container) {
+      container.addEventListener("paste", handlePaste as any);
+      return () => container.removeEventListener("paste", handlePaste as any);
+    }
+  });
+
+  return (
+    <InputWrapper
+      label={label}
+      description={description}
+      error={error?.()}
+      required={required}
+      inputId={a11y.inputId}
+      descriptionId={a11y.descriptionId}
+      errorId={a11y.errorId}
+    >
+      <div class="flex gap-1 md:gap-2" role="group" aria-labelledby={a11y.inputId} aria-describedby={a11y.ariaDescribedBy()}>
+          <For each={new Array(length).fill(0)}>
+            {(_, index) => (
+              <input
+                ref={(el) => (inputRefs[index()] = el)}
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]"
+                maxLength={1}
+                class={`input ${stretch ? "w-full" : "w-10"} text-center font-mono font-semibold transition-all ${
+                  (value?.() || "")[index()] ? "bg-zinc-50 dark:bg-zinc-800 " : ""
+                } ${disabled ? "cursor-not-allowed opacity-50" : ""} ${error?.() ? "!border-red-500" : ""}`}
+                value={(value?.() || "")[index()] || ""}
+                onInput={(e) => handleChange(index(), e.currentTarget.value)}
+                onKeyDown={(e) => handleKeyDown(index(), e)}
+                onFocus={(e) => e.currentTarget.select()}
+                disabled={disabled}
+                aria-label={`PIN digit ${index() + 1} of ${length}`}
+                aria-invalid={!!error?.()}
+                aria-required={index() === 0 ? required : undefined}
+                autocomplete="off"
+              />
+            )}
+          </For>
+      </div>
+    </InputWrapper>
+  );
+};
+
+export default PinInput;

package/src/ui/input/SegmentedControl.tsx

@@ -0,0 +1,99 @@
+import { For } from "solid-js";
+
+export type SegmentOption<T extends string> = {
+  value: T;
+  label: string;
+  icon?: string;
+};
+
+type SegmentedControlProps<T extends string> = {
+  options: SegmentOption<T>[];
+  value: () => T;
+  onChange: (value: T) => void;
+  disabled?: boolean;
+  ariaLabel?: string;
+};
+
+/**
+ * Segmented control for switching between options.
+ * Similar to iOS segmented control or radio button group.
+ */
+function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+  disabled = false,
+  ariaLabel = "Options",
+}: SegmentedControlProps<T>) {
+  const selectRelative = (currentIndex: number, direction: -1 | 1) => {
+    const nextIndex = (currentIndex + direction + options.length) % options.length;
+    const next = options[nextIndex];
+    if (next) onChange(next.value);
+  };
+
+  const onSegmentKeyDown = (event: KeyboardEvent, currentIndex: number) => {
+    if (disabled) return;
+
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      selectRelative(currentIndex, 1);
+      return;
+    }
+
+    if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      selectRelative(currentIndex, -1);
+      return;
+    }
+
+    if (event.key === "Home") {
+      event.preventDefault();
+      const first = options[0];
+      if (first) onChange(first.value);
+      return;
+    }
+
+    if (event.key === "End") {
+      event.preventDefault();
+      const last = options[options.length - 1];
+      if (last) onChange(last.value);
+    }
+  };
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      class="inline-flex w-full items-stretch rounded-xl border border-zinc-300/50 bg-zinc-100/55 p-0.5 dark:border-zinc-700/50 dark:bg-zinc-900/50"
+      classList={{ "opacity-50 pointer-events-none": disabled }}
+    >
+      <For each={options}>
+        {(option, index) => (
+          <button
+            type="button"
+            role="radio"
+            aria-checked={value() === option.value}
+            tabIndex={value() === option.value ? 0 : -1}
+            class="relative z-0 flex-1 min-w-0 rounded-lg px-2 py-1 text-xs leading-4 flex items-center justify-center gap-1 transition-[background-color,color,box-shadow] duration-150 outline-none"
+            classList={{
+              "z-10 rounded-[0.95rem] bg-zinc-200/80 dark:bg-zinc-800/95 text-zinc-900 dark:text-zinc-100":
+                value() === option.value,
+              "text-zinc-700 dark:text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300 hover:bg-zinc-50/65 dark:hover:bg-zinc-800/35":
+                value() !== option.value,
+              "after:absolute after:right-0 after:top-1 after:bottom-1 after:w-px after:bg-zinc-300/75 dark:after:bg-zinc-700/75":
+                index() < options.length - 1 && value() !== option.value && value() !== options[index() + 1]?.value,
+            }}
+            onClick={() => onChange(option.value)}
+            onKeyDown={(event) => onSegmentKeyDown(event, index())}
+            disabled={disabled}
+          >
+            {option.icon && <i class={option.icon} />}
+            {option.label}
+          </button>
+        )}
+      </For>
+    </div>
+  );
+}
+
+export default SegmentedControl;

package/src/ui/input/Select.tsx

@@ -0,0 +1,288 @@
+import { createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+import { InputWrapper, createInputA11y } from "./util";
+
+type SelectOption =
+  | string
+  | {
+      id: string;
+      label?: string;
+      description?: string;
+      icon?: string;
+    };
+
+type SelectInputProps = {
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  icon?: string;
+  activeIcon?: string;
+  value?: () => string | undefined;
+  onChange?: (value: string) => void;
+  error?: () => string | undefined;
+  options: SelectOption[];
+  required?: boolean;
+  clearable?: boolean;
+  disabled?: boolean;
+};
+
+const SelectInput = (props: SelectInputProps) => {
+  const placeholder = () => props.placeholder ?? "Select...";
+  const icon = () => props.icon ?? "ti ti-chevron-down";
+  const activeIcon = () => props.activeIcon ?? "ti ti-chevron-up";
+  const disabled = () => props.disabled ?? false;
+  const clearable = () => props.clearable ?? false;
+
+  const options = () =>
+    props.options.map((option) =>
+      typeof option === "object" ? { ...option, label: option.label || option.id } : { id: option, label: option },
+    );
+
+  const [isOpen, setIsOpen] = createSignal(false);
+  const [focusedIndex, setFocusedIndex] = createSignal(-1);
+  const [isDarkTheme, setIsDarkTheme] = createSignal(false);
+  const a11y = createInputA11y({ description: props.description, error: props.error });
+
+  let triggerRef: HTMLDivElement | undefined;
+  let dialogRef: HTMLDialogElement | undefined;
+  let optionRefs: HTMLDivElement[] = [];
+
+  const selectedOption = createMemo(() => options().find((option) => option.id === props.value?.()));
+
+  const syncTheme = () => {
+    if (typeof document === "undefined") return;
+    setIsDarkTheme(document.documentElement.classList.contains("dark") || document.body.classList.contains("dark"));
+  };
+
+  const focusOption = (index: number) => {
+    setFocusedIndex(index);
+    optionRefs[index]?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  };
+
+  const navigateOptions = (direction: "next" | "previous") => {
+    const count = options().length;
+    if (!count) return;
+
+    let nextIndex = focusedIndex();
+    if (direction === "next") {
+      nextIndex = nextIndex < count - 1 ? nextIndex + 1 : 0;
+    } else {
+      nextIndex = nextIndex > 0 ? nextIndex - 1 : count - 1;
+    }
+
+    focusOption(nextIndex);
+  };
+
+  const toggleDropdown = (open: boolean) => {
+    if (disabled()) return;
+
+    syncTheme();
+    setIsOpen(open);
+    if (!open) {
+      dialogRef?.close();
+      setFocusedIndex(-1);
+      return;
+    }
+
+    const currentIndex = options().findIndex((option) => option.id === props.value?.());
+    setFocusedIndex(currentIndex >= 0 ? currentIndex : 0);
+
+    if (dialogRef && triggerRef) {
+      const rect = triggerRef.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const dropdownMaxHeight = 260; // max-h-60 = 15rem ~ 240px + padding
+
+      dialogRef.style.left = `${rect.left}px`;
+      dialogRef.style.width = `${rect.width}px`;
+
+      if (spaceBelow < dropdownMaxHeight && spaceAbove > spaceBelow) {
+        // Open above
+        dialogRef.style.top = "auto";
+        dialogRef.style.bottom = `${window.innerHeight - rect.top + 8}px`;
+      } else {
+        // Open below (default)
+        dialogRef.style.top = `${rect.bottom + 8}px`;
+        dialogRef.style.bottom = "auto";
+      }
+
+      dialogRef.showModal();
+    }
+  };
+
+  const selectOption = (option: { id: string; label: string }) => {
+    props.onChange?.(option.id);
+    toggleDropdown(false);
+    triggerRef?.focus();
+  };
+
+  const clearValue = (event: MouseEvent) => {
+    event.stopPropagation();
+    props.onChange?.("");
+    triggerRef?.focus();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    const open = isOpen();
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          toggleDropdown(true);
+        } else {
+          navigateOptions("next");
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (open) {
+          navigateOptions("previous");
+        }
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (open && focusedIndex() >= 0) {
+          const option = options()[focusedIndex()];
+          if (option) selectOption(option);
+        } else if (!open) {
+          toggleDropdown(true);
+        }
+        break;
+      case "Escape":
+        if (open) {
+          event.preventDefault();
+          toggleDropdown(false);
+        }
+        break;
+      case "Tab":
+        if (open) {
+          toggleDropdown(false);
+        }
+        break;
+    }
+  };
+
+  const handleDialogClick = (event: MouseEvent) => {
+    if (event.target === dialogRef) {
+      toggleDropdown(false);
+    }
+  };
+
+  onCleanup(() => dialogRef?.close());
+
+  return (
+    <InputWrapper
+      label={props.label}
+      description={props.description}
+      error={props.error?.()}
+      required={props.required}
+      inputId={a11y.inputId}
+      descriptionId={a11y.descriptionId}
+      errorId={a11y.errorId}
+    >
+      <div class="relative">
+          <div class="group relative flex-1">
+            <div class="pointer-events-none absolute inset-y-0 left-2 z-10 flex items-center text-zinc-500">
+              <i class={`${selectedOption()?.icon || (isOpen() ? activeIcon() : icon())} ${isOpen() ? "text-blue-500" : ""}`} />
+            </div>
+
+            <div
+              ref={triggerRef}
+              id={a11y.inputId}
+              class={`input w-full pl-9 pr-8 ${
+                isOpen() ? "!border-blue-500 !bg-white dark:!border-blue-400 dark:!bg-zinc-900" : ""
+              } ${disabled() ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}
+              onClick={() => toggleDropdown(!isOpen())}
+              onKeyDown={handleKeyDown}
+              tabIndex={disabled() ? -1 : 0}
+              role="combobox"
+              aria-expanded={isOpen()}
+              aria-haspopup="listbox"
+              aria-label={!props.label ? "Select an option" : undefined}
+              aria-describedby={a11y.ariaDescribedBy()}
+              aria-invalid={!!props.error?.()}
+              aria-required={props.required}
+              aria-disabled={disabled()}
+            >
+              <Show when={selectedOption()} fallback={<span class="text-zinc-400 dark:text-zinc-500">{placeholder()}</span>}>
+                <span class="text-zinc-700 dark:text-zinc-300">{selectedOption()!.label}</span>
+              </Show>
+            </div>
+
+            <Show when={clearable() && selectedOption() && !disabled()}>
+              <button
+                type="button"
+                class="absolute inset-y-0 right-2 flex items-center px-1 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
+                onClick={clearValue}
+                tabIndex={-1}
+                aria-label="Clear selection"
+              >
+                <i class="ti ti-x text-sm" />
+              </button>
+            </Show>
+          </div>
+
+          <dialog
+            ref={dialogRef}
+            class="popup border border-zinc-200 p-1 backdrop:bg-transparent dark:border-zinc-700"
+            classList={{ dark: isDarkTheme() }}
+            onKeyDown={handleKeyDown}
+            onClick={handleDialogClick}
+            aria-label="Options"
+          >
+            <div class="flex max-h-60 flex-col gap-1 overflow-y-auto" role="listbox" aria-label={props.label || "Options"}>
+              <For each={options()} fallback={<div class="px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400">No options available</div>}>
+                {(option, index) => {
+                  const isSelected = () => option.id === props.value?.();
+                  const isFocused = () => index() === focusedIndex();
+
+                  return (
+                    <div
+                      ref={(el) => (optionRefs[index()] = el)}
+                      class="group flex cursor-pointer select-none items-center px-3 py-2 text-sm transition-all"
+                      onClick={() => selectOption(option)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          selectOption(option);
+                        }
+                      }}
+                      onMouseEnter={() => setFocusedIndex(index())}
+                      role="option"
+                      aria-label={option.label}
+                      aria-selected={isSelected()}
+                      tabIndex={-1}
+                    >
+                      <Show when={option.icon}>
+                        <i class={`${option.icon} mr-3 text-zinc-500`} />
+                      </Show>
+
+                      <div class="min-w-0 flex-1">
+                        <span
+                          class={`truncate text-zinc-700 dark:text-zinc-300 ${
+                            isFocused()
+                              ? "text-primary underline underline-offset-2"
+                              : "group-hover:underline group-hover:underline-offset-2"
+                          }`}
+                        >
+                          {option.label}
+                        </span>
+                        <Show when={option.description}>
+                          <div class="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">{option.description}</div>
+                        </Show>
+                      </div>
+                    </div>
+                  );
+                }}
+              </For>
+            </div>
+          </dialog>
+      </div>
+    </InputWrapper>
+  );
+};
+
+export { SelectInput };
+export const Select = SelectInput;
+export default SelectInput;

package/src/ui/input/SelectChip.tsx

@@ -0,0 +1,61 @@
+import { For, Show } from "solid-js";
+import Dropdown from "../misc/Dropdown";
+import type { DropdownItem } from "../misc/Dropdown";
+
+export type SelectChipOption<T extends string | number = string> = {
+  value: T;
+  label: string;
+};
+
+type SelectChipProps<T extends string | number = string> = {
+  /** Current value */
+  value: T;
+  /** Options list */
+  options: SelectChipOption<T>[];
+  /** Change handler */
+  onChange: (value: T) => void;
+  /** Optional icon */
+  icon?: string;
+  /** Dropdown position */
+  position?: "bottom-left" | "bottom-right";
+};
+
+/**
+ * Minimal single-select chip using Dropdown.
+ * Displays current selection inline, opens dropdown on click.
+ */
+export default function SelectChip<T extends string | number = string>(props: SelectChipProps<T>) {
+  const selectedLabel = () => props.options.find((o) => o.value === props.value)?.label ?? "";
+
+  const dropdownElements = (): DropdownItem[] =>
+    props.options.map((option) => ({
+      element: (
+        <button
+          type="button"
+          class="flex w-full items-center justify-between gap-3 px-3 py-1.5 text-sm text-zinc-700 dark:text-zinc-300 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            props.onChange(option.value);
+          }}
+        >
+          <span class="truncate">{option.label}</span>
+          <Show when={option.value === props.value}>
+            <i class="ti ti-check text-blue-500 text-xs" />
+          </Show>
+        </button>
+      ),
+    }));
+
+  const trigger = (
+    <div class="btn-input btn-input-sm">
+      <Show when={props.icon}>
+        <i class={`${props.icon} text-zinc-500 dark:text-zinc-400`} />
+      </Show>
+      <span class="truncate">{selectedLabel()}</span>
+      <i class="ti ti-chevron-down text-zinc-500 dark:text-zinc-400 text-[10px]" />
+    </div>
+  );
+
+  return <Dropdown trigger={trigger} elements={dropdownElements()} position={props.position ?? "bottom-right"} width="w-40" />;
+}