@k2b/ui 0.17.0 → 0.19.0

package/dist/types/inputs/ChoiceGroups.d.ts

@@ -2,12 +2,21 @@ import { type JSX } from "solid-js";
 type ChoiceGroup = {
     value: string | null;
     label: string;
+    icon?: string;
 };
+/**
+ * A single-choice row of chips that scrolls sideways instead of wrapping, so its height never changes. Select and
+ * MultiSelect use it for their filters; `ChoiceChips` is the public field around it.
+ */
 export declare function ChoiceGroups(props: {
     choices: readonly ChoiceGroup[];
     value: string | null;
     onValueChange: (value: string | null) => void;
-    ariaLabel: string;
-    controls: string;
+    ariaLabel?: string;
+    /** The field label that names the group; replaces `ariaLabel`. */
+    labelledBy?: string;
+    describedBy?: string;
+    controls?: string;
+    disabled?: boolean;
 }): JSX.Element;
 export {};

package/dist/types/inputs/FileDropTarget.d.ts

@@ -0,0 +1,23 @@
+import { type JSX } from "solid-js";
+import { type FileDropOptions } from "./file-drop";
+export type { FileDropDetails, FileDropOptions, FileDropRejection } from "./file-drop";
+export type FileDropTargetProps = FileDropOptions & {
+    /**
+     * The area that takes the files. Defaults to the nearest dialog, `AppWorkspace.Detail`, or `AppWorkspace.Main`
+     * around the component, and to the whole window outside of them.
+     */
+    for?: Element;
+};
+/**
+ * Turns an area into a drop target while files from outside the page are dragged over the window. A calm overlay
+ * covers the area without moving anything and says what dropping does; a more specific target inside it, such as a
+ * folder row or a `FileDropzone`, takes the drop and its sentence while the pointer is over it. Text, links, and
+ * elements dragged within the page never show it. Keep a visible upload button for keyboard and touch users.
+ */
+export declare function FileDropTarget(props: FileDropTargetProps): JSX.Element;
+/**
+ * Makes one element a specific drop target, such as a folder row inside a `FileDropTarget` area: pass the result as
+ * the element's `ref`. It wins over the area around it while the pointer is over it, and the area's overlay shows its
+ * sentence. Calling the ref again with new options replaces them.
+ */
+export declare function fileDropTarget(options: FileDropOptions): (element: Element) => void;

package/dist/types/inputs/FileInputs.d.ts

@@ -10,6 +10,14 @@ export type FileDropzoneProps = FieldProps & {
     title?: JSX.Element;
     subtitle?: JSX.Element;
     hint?: JSX.Element;
+    /** One sentence that says what dropping does, shown while files are over the zone. Defaults to "Drop to upload". */
+    dropLabel?: string;
+    /**
+     * Chooses files when the zone is clicked, instead of the device's file dialog, for example to offer other sources as
+     * well. Called within the click, so it may still open the device's dialog; resolve `[]` when the user cancels. A
+     * rejection shows its message as the field's error.
+     */
+    choose?: () => Promise<readonly File[]>;
     onDrop: (files: File[]) => void | Promise<void>;
 };
 export declare function FileDropzone(props: FileDropzoneProps): JSX.Element;

package/dist/types/inputs/SignatureInput.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+import { type SignatureValue } from "./signature";
+export type SignatureInputProps = ValueFieldProps<SignatureValue | null> & {
+    /** Submits the value as JSON in a hidden input of this name. */
+    name?: string;
+    /** Shows the signature without allowing changes. */
+    readOnly?: boolean;
+    /**
+     * Offers typing the name instead of drawing. Defaults to `true`: typing is the
+     * keyboard and screen-reader path and helps people who cannot draw. Without
+     * it, a typed value is still shown and can be cleared, but not edited.
+     */
+    allowTyped?: boolean;
+};
+/**
+ * A signature field: draw with a finger, pen, or mouse, or type the name. The
+ * value is an SVG document plus how it was given; `signatureToPng` turns it
+ * into a bitmap. Legal evidence such as timestamps or hashes stays with the app.
+ */
+export declare function SignatureInput(props: SignatureInputProps): JSX.Element;
+export default SignatureInput;

package/dist/types/inputs/emoji/EmojiPicker.d.ts

@@ -0,0 +1,42 @@
+import { type JSX } from "solid-js";
+import { type EmojiSkinTone } from "./emoji-index";
+export type EmojiPickerProps = {
+    /** Called with the chosen emoji, in the chosen skin tone where it has one. */
+    onPick: (emoji: string) => void;
+    /** Recently used emoji, most recent first, shown as the first group. The application stores them; see `rememberEmoji`. */
+    recent?: readonly string[];
+    /** The skin tone for emoji that have one. Defaults to `0`, the default yellow. */
+    skinTone?: EmojiSkinTone;
+    /** Shows the skin-tone choice. The application stores the tone and passes it back as `skinTone`. */
+    onSkinToneChange?: (tone: EmojiSkinTone) => void;
+    /** Escape in an empty search field asks to close the surface the picker sits in. */
+    onClose?: () => void;
+    /** Moves focus into the search field once the picker is shown. */
+    autofocus?: boolean;
+    /** The picker's accessible name. Defaults to "Emoji". */
+    label?: string;
+    class?: string;
+};
+/** Where `index` moves for an arrow key in rows of `COLUMNS`, where every section starts a new row. */
+export declare const nextEmojiIndex: (sizes: readonly number[], index: number, key: "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown") => number;
+/**
+ * A search field, the groups, and a grid of emoji. Search finds English and German names, keywords and GitHub
+ * shortcodes. The focus stays in the search field: arrow keys move through the grid, Enter picks.
+ */
+declare function EmojiPickerPanel(props: EmojiPickerProps): JSX.Element;
+export type EmojiPickerPopoverProps = Omit<EmojiPickerProps, "onClose" | "autofocus"> & {
+    /** The control the picker opens next to. The picker is open while this is set. */
+    anchor: HTMLElement | null | undefined;
+    /** Called after a pick, on Escape, on a click outside, and on another press of the anchor. */
+    onClose: () => void;
+};
+/**
+ * The picker next to a control, such as the composer's emoji button or a message's "Add reaction". It opens above the
+ * control where there is room and below it otherwise, closes after a pick, and returns the focus to where it was.
+ */
+declare function EmojiPickerPopover(props: EmojiPickerPopoverProps): JSX.Element;
+/** The emoji picker. `EmojiPicker.Popover` opens it next to a control. */
+export declare const EmojiPicker: typeof EmojiPickerPanel & {
+    Popover: typeof EmojiPickerPopover;
+};
+export {};