@valentinkolb/cloud 0.4.0 → 0.5.0

package/src/ui/input/TextInput.tsx

@@ -1,5 +1,6 @@
-import { createSignal } from "solid-js";
+import { createSignal, Show, type JSX } from "solid-js";
 import { InputWrapper, createInputA11y } from "./util";
+import MarkdownEditor, { type Completion } from "./markdown/MarkdownEditor";
 
 type TextInputProps = {
   name?: string;
@@ -18,6 +19,8 @@ type TextInputProps = {
   clearLabel?: string;
   error?: () => string | undefined;
   multiline?: boolean;
+  /** Use a monospace font. Intended for code-like text such as queries. */
+  monospace?: boolean;
   required?: boolean;
   disabled?: boolean;
   password?: boolean;
@@ -27,12 +30,66 @@ type TextInputProps = {
    */
   markdown?: boolean;
   /**
-   * Called when Enter is pressed (without Shift/Cmd) in multiline mode.
-   * Useful for submitting forms with Enter while keeping Shift+Enter for newlines.
+   * Called when the user submits the field. The trigger differs by mode:
+   *
+   *   - `multiline` (plain textarea): bare Enter fires onSubmit;
+   *     Shift+Enter inserts a newline.
+   *   - `markdown`: Cmd/Ctrl+Enter fires onSubmit. Bare Enter is reserved
+   *     for newlines and smart list continuation — submitting on bare
+   *     Enter would be hostile in a prose / multi-paragraph editor.
+   *   - Single-line: not fired (the form's own Enter handling applies).
    */
   onSubmit?: () => void;
   /** Approximate visible lines for multiline mode. Overrides default height. */
   lines?: number;
+  /**
+   * AutoText dictionary for markdown mode — convenience shortcut for
+   * the most common shape: a `{ short: long }` map. Typing a key
+   * followed by a word boundary replaces the key with its value
+   * (case-insensitive, exact-case preferred). Ignored outside
+   * `markdown={true}`. For richer behaviour (triggered completions,
+   * live search, ghost preview) use `completions` instead.
+   */
+  abbreviations?: Record<string, string>;
+  /**
+   * Full completion definitions for markdown mode. Each completion
+   * provides ghost-previewable suggestions (zinc-400 + → arrow at the
+   * caret) and optionally a `trigger` char (`#`, `@`, `:`). Tab
+   * inserts the active ghost. Sync suggestions also drive the blue
+   * dotted-underline highlight for recognised labels in the body.
+   * Combine with `abbreviations` if you want both — they're merged
+   * automatically.
+   */
+  completions?: Completion[];
+  /**
+   * Mobile keyboard hint. Pass-through to the underlying `<input>`.
+   * Use "numeric" for digits-only inputs, "decimal" for floats,
+   * "email"/"url"/"tel"/"search" mirror the platform hints. Doesn't
+   * change the rendered keyboard on desktop.
+   */
+  inputMode?: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url" | "none";
+  /** Hard cap on input length. Pass-through to the underlying `<input>` / `<textarea>`. */
+  maxLength?: number;
+  /** Browser autocomplete hint, e.g. "email", "current-password", "off". */
+  autocomplete?: string;
+  /** Browser spellcheck. Defaults to the platform behaviour. */
+  spellcheck?: boolean;
+  /** Browser autocapitalization hint. Use "off" for code-like inputs. */
+  autocapitalize?: JSX.HTMLAutocapitalize;
+  /**
+   * JSX slot rendered between the (optional) left icon and the input.
+   * Use for short inline labels like a currency symbol or a unit
+   * prefix that shouldn't take the icon slot. Caller is responsible
+   * for keeping it short; long content crowds the input.
+   */
+  prefix?: JSX.Element;
+  /**
+   * JSX slot rendered between the input and the right-edge buttons
+   * (clear / password reveal). Use for unit suffixes ("kg", "/min").
+   * When `clearable` triggers the ✕ button, the suffix slides left
+   * to make room.
+   */
+  suffix?: JSX.Element;
 };
 
 /**
@@ -57,6 +114,7 @@ const TextInput = (props: TextInputProps) => {
   const activeIcon = () => props.activeIcon ?? "ti ti-pencil";
   const multiline = () => props.multiline ?? markdown(); // markdown implies multiline
   const disabled = () => props.disabled ?? false;
+  const monospaceClass = () => (props.monospace ? "font-mono text-sm leading-6" : "");
   const canClear = () => props.clearable && !multiline() && !props.password && !disabled();
   const currentValue = () => props.value?.() ?? "";
   const hasValue = () => currentValue().length > 0;
@@ -72,6 +130,42 @@ const TextInput = (props: TextInputProps) => {
     props.onChange?.("");
   };
 
+  // Markdown editor takes over entirely — no icon overlay, no clear
+  // button, no prefix/suffix. The editor owns its own toolbar + chrome.
+  if (markdown()) {
+    return (
+      <InputWrapper
+        label={props.label}
+        description={props.description}
+        error={props.error?.()}
+        required={props.required}
+        inputId={a11y.inputId}
+        descriptionId={a11y.descriptionId}
+        errorId={a11y.errorId}
+      >
+        <MarkdownEditor
+          id={a11y.inputId}
+          name={props.name}
+          value={() => props.value?.() ?? ""}
+          onInput={props.onInput}
+          onChange={props.onChange}
+          onSubmit={props.onSubmit}
+          placeholder={props.placeholder}
+          disabled={disabled()}
+          lines={props.lines}
+          maxLength={props.maxLength}
+          abbreviations={props.abbreviations}
+          completions={props.completions}
+          error={!!props.error?.()}
+          ariaLabel={!props.label ? (props.ariaLabel ?? props.placeholder) : undefined}
+          ariaDescribedBy={a11y.ariaDescribedBy()}
+          ariaInvalid={!!props.error?.()}
+          ariaRequired={props.required}
+        />
+      </InputWrapper>
+    );
+  }
+
   return (
     <InputWrapper
       label={props.label}
@@ -91,11 +185,23 @@ const TextInput = (props: TextInputProps) => {
           <i class={`${icon()} group-focus-within:hidden`} />
           <i class={`${activeIcon()} hidden text-blue-500 group-focus-within:block`} />
         </div>
+        {/* Prefix slot — rendered after the icon, before the input.
+            Adds left padding via the input's pl-12 (icon+prefix) or
+            pl-9 (prefix-only, no icon). Suffix slot mirrors this on
+            the right edge, sliding left when a clear / password
+            button takes the right-3 anchor. */}
+        <Show when={props.prefix}>
+          <span
+            class="absolute z-10 flex items-center pointer-events-none text-sm text-zinc-500 dark:text-zinc-400 inset-y-0 left-9"
+          >
+            {props.prefix}
+          </span>
+        </Show>
         {multiline() ? (
           <textarea
             id={a11y.inputId}
             name={props.name}
-            class={`input w-full pl-9 ${disabled() ? "cursor-not-allowed opacity-50" : ""}`}
+            class={`input w-full pl-9 ${monospaceClass()} ${disabled() ? "cursor-not-allowed opacity-50" : ""}`}
             style={props.lines ? `min-height: ${props.lines * 1.5}em; max-height: ${Math.max(props.lines * 1.5, 20)}em` : "min-height: 3.75rem; height: 5rem; max-height: 12.5rem"}
             placeholder={props.placeholder}
             value={props.value?.() ?? ""}
@@ -108,6 +214,10 @@ const TextInput = (props: TextInputProps) => {
               }
             }}
             disabled={disabled()}
+            maxLength={props.maxLength}
+            spellcheck={props.spellcheck}
+            autocapitalize={props.autocapitalize}
+            autocomplete={props.autocomplete}
             aria-label={!props.label ? (props.ariaLabel ?? props.placeholder) : undefined}
             aria-describedby={a11y.ariaDescribedBy()}
             aria-invalid={!!props.error?.()}
@@ -119,12 +229,17 @@ const TextInput = (props: TextInputProps) => {
             id={a11y.inputId}
             name={props.name}
             type={props.password && !showPassword() ? "password" : (props.type ?? "text")}
-            class={`input w-full pl-9 ${props.password || canClear() ? "pr-9" : ""} ${disabled() ? "cursor-not-allowed opacity-50" : ""}`}
+            class={`input w-full ${props.prefix ? "pl-12" : "pl-9"} ${props.password || canClear() || props.suffix ? "pr-9" : ""} ${monospaceClass()} ${disabled() ? "cursor-not-allowed opacity-50" : ""}`}
             placeholder={props.placeholder}
             value={currentValue()}
             onChange={(e) => props.onChange?.(e.target.value)}
             onInput={(e) => props.onInput?.(e.target.value)}
             disabled={disabled()}
+            inputMode={props.inputMode}
+            maxLength={props.maxLength}
+            autocomplete={props.autocomplete}
+            spellcheck={props.spellcheck}
+            autocapitalize={props.autocapitalize}
             aria-label={!props.label ? (props.ariaLabel ?? props.placeholder) : undefined}
             aria-describedby={a11y.ariaDescribedBy()}
             aria-invalid={!!props.error?.()}
@@ -132,15 +247,31 @@ const TextInput = (props: TextInputProps) => {
             aria-disabled={disabled()}
           />
         )}
+        {/* Right-edge stack — order: suffix → clear → password.
+            Each takes the right-3 anchor exclusively; siblings shift
+            left to right-9 (and right-15 for the rare triple) so
+            nothing overlaps. */}
+        <Show when={props.suffix && !canClear() && !props.password}>
+          <span class="absolute inset-y-0 right-3 z-10 flex items-center pointer-events-none text-sm text-zinc-500 dark:text-zinc-400">
+            {props.suffix}
+          </span>
+        </Show>
         {canClear() && hasValue() && (
-          <button
-            type="button"
-            class="absolute inset-y-0 right-3 flex items-center text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300"
-            onClick={handleClear}
-            aria-label={props.clearLabel ?? "Clear input"}
-          >
-            <i class="ti ti-x" />
-          </button>
+          <>
+            <Show when={props.suffix}>
+              <span class="absolute inset-y-0 right-9 z-10 flex items-center pointer-events-none text-sm text-zinc-500 dark:text-zinc-400">
+                {props.suffix}
+              </span>
+            </Show>
+            <button
+              type="button"
+              class="absolute inset-y-0 right-3 flex items-center text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300"
+              onClick={handleClear}
+              aria-label={props.clearLabel ?? "Clear input"}
+            >
+              <i class="ti ti-x" />
+            </button>
+          </>
         )}
         {props.password && !multiline() && (
           <button

package/src/ui/input/index.ts

@@ -1,13 +1,58 @@
-export { default as TextInput } from "./TextInput";
-export { default as NumberInput } from "./NumberInput";
+export {
+  abbreviations,
+  type Completion,
+  type SuggestContext,
+  type Suggestion,
+} from "../completion";
+export {
+  type AutocompleteEditorProps,
+  default as AutocompleteEditor,
+} from "./AutocompleteEditor";
 export { Checkbox, CheckboxInput } from "./Checkbox";
+export { CheckboxCard, type CheckboxCardProps, default as CheckboxCardInput } from "./CheckboxCard";
+export { default as ColorInput } from "./ColorInput";
+export type { ComboboxOption, ComboboxProps } from "./Combobox";
+export { default as Combobox } from "./Combobox";
+export {
+  DatePicker,
+  type DatePickerProps,
+  type DatePreset,
+  DateRangePicker,
+  type DateRangePickerProps,
+  type DateRangeValue,
+  DateTimePicker,
+  type DateTimePickerProps,
+  type DurationPreset,
+} from "./DatePicker";
+export { default as DateTimeInput } from "./DateTimeInput";
+export { default as FileDropzone, type FileDropzoneProps } from "./FileDropzone";
+export { default as IconInput } from "./IconInput";
+export { default as ImageInput } from "./ImageInput";
+export {
+  default as MultiSelectInput,
+  type MultiSelectFetchDataFn,
+  MultiSelectInput as MultiSelect,
+  type MultiSelectInputProps,
+  type MultiSelectOption,
+} from "./MultiSelectInput";
+export { default as MarkdownEditor, type MarkdownEditorProps } from "./markdown/MarkdownEditor";
+export { default as NumberInput } from "./NumberInput";
+export { default as PinInput } from "./PinInput";
+export { default as SegmentedControl } from "./SegmentedControl";
 export { Select, SelectInput } from "./Select";
 export { default as SelectChip } from "./SelectChip";
+export { default as Slider } from "./Slider";
 export { Switch, SwitchInput } from "./Switch";
-export { default as DateTimeInput } from "./DateTimeInput";
-export { default as SegmentedControl } from "./SegmentedControl";
-export { default as ColorInput } from "./ColorInput";
 export { default as TagsInput } from "./TagsInput";
-export { default as PinInput } from "./PinInput";
-export { default as ImageInput } from "./ImageInput";
-export { default as Slider } from "./Slider";
+export {
+  createTemplateEditorPanesValue,
+  default as TemplateEditor,
+  type TemplateEditorProps,
+  TemplatePreview,
+  type TemplatePreviewProps,
+  TemplateSampleData,
+  type TemplateSampleDataProps,
+  type TemplateVariable,
+  type TemplateVariableKind,
+} from "./TemplateEditor";
+export { default as TextInput } from "./TextInput";