@k2b/ui 0.1.0-rc.0 → 0.1.1

package/dist/types/feedback/Tooltip.d.ts

@@ -0,0 +1,18 @@
+import { type JSX } from "solid-js";
+import { type TooltipPlacement } from "./tooltip-position";
+export type TooltipProps = {
+    content: JSX.Element;
+    target: () => HTMLElement | undefined;
+    placement?: TooltipPlacement;
+    delay?: number;
+    disabled?: boolean;
+};
+export type TooltipAnchorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "content"> & Omit<TooltipProps, "target">;
+export type TooltipTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "content"> & Omit<TooltipProps, "target">;
+type TooltipComponent = ((props: TooltipProps) => JSX.Element) & {
+    Anchor: (props: TooltipAnchorProps) => JSX.Element;
+    Trigger: (props: TooltipTriggerProps) => JSX.Element;
+};
+export declare const Tooltip: TooltipComponent;
+export type { TooltipPlacement } from "./tooltip-position";
+export default Tooltip;

package/dist/types/feedback/dialog-core.d.ts

@@ -0,0 +1,19 @@
+import type { JSX } from "solid-js";
+export type DialogClose<T> = (result?: T) => void;
+export type OpenDialogOptions = {
+    panelClassName?: string;
+    contentClassName?: string;
+    initialFocus?: "first-input" | "none" | ((dialog: HTMLDialogElement) => HTMLElement | null);
+    cancelBehavior?: "resolve-undefined" | "ignore";
+    ariaLabel?: string;
+};
+export type DialogRender<T> = (close: DialogClose<T>, context: {
+    dialog: HTMLDialogElement;
+}) => JSX.Element;
+export type DialogCore = {
+    open: <T>(view: DialogRender<T>, options?: OpenDialogOptions) => Promise<T | undefined>;
+    close: (result?: unknown) => void;
+    isOpen: () => boolean;
+};
+export declare const createDialogCore: () => DialogCore;
+export declare const dialogCore: DialogCore;

package/dist/types/feedback/index.d.ts

@@ -0,0 +1,10 @@
+export type { DialogClose, DialogCore, DialogRender, OpenDialogOptions } from "./dialog-core";
+export { dialogCore } from "./dialog-core";
+export type { InlineGuidanceProps } from "./InlineGuidance";
+export { default as InlineGuidance } from "./InlineGuidance";
+export type { ConfirmOptions, DialogOptions, FieldSchema, PromptFieldBase, PromptSearchInput, PromptSearchItem, PromptSearchOptions, } from "./prompts";
+export { createFormState, DialogHeader, prompts } from "./prompts";
+export type { TooltipAnchorProps, TooltipPlacement, TooltipProps, TooltipTriggerProps } from "./Tooltip";
+export { Tooltip } from "./Tooltip";
+export type { ToastAction, ToastFn, ToastHandle, ToastOptions, ToastVariant } from "./toast";
+export { isPointInsideToast, toast } from "./toast";

package/dist/types/feedback/prompts.d.ts

@@ -0,0 +1,164 @@
+import { type JSX } from "solid-js";
+import { type OpenDialogOptions } from "./dialog-core";
+export interface DialogOptions {
+    title?: string;
+    ariaLabel?: string;
+    icon?: string;
+    confirmText?: string;
+    cancelText?: string | false;
+    variant?: "danger" | "primary" | "success";
+    size?: "small" | "medium" | "large" | "wide";
+    surface?: "default" | "bare";
+    header?: false;
+    cancelBehavior?: OpenDialogOptions["cancelBehavior"];
+}
+export interface ConfirmOptions extends DialogOptions {
+    confirmationPhrase?: string;
+}
+type PromptContent = string | HTMLElement | JSX.Element;
+export type PromptSearchItem<T = unknown> = {
+    label: string;
+    desc?: string;
+    icon?: string;
+    previewUrl?: string;
+    value?: T;
+};
+export type PromptSearchInput = {
+    query: string;
+    abortSignal: AbortSignal;
+};
+export type PromptSearchOptions = DialogOptions & {
+    placeholder?: string;
+    icon?: string;
+    initialQuery?: string;
+    minQueryLength?: number;
+    debounceMs?: number;
+    emptyText?: string;
+    noResultsText?: string;
+};
+export type PromptFieldBase<T = any> = {
+    label?: string | false;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    default?: T;
+    validate?: (value: T | undefined) => string | null;
+};
+export type FieldSchema = (PromptFieldBase<string> & {
+    type: "text";
+    multiline?: boolean;
+    lines?: number;
+    maxLength?: number;
+    minLength?: number;
+    icon?: string;
+    activeIcon?: string;
+    password?: boolean;
+    markdown?: boolean;
+}) | (PromptFieldBase<number> & {
+    type: "number";
+    min?: number;
+    max?: number;
+    step?: number;
+}) | (PromptFieldBase<string> & {
+    type: "image";
+    round?: boolean;
+    ariaLabel?: string;
+    accept?: string;
+}) | (PromptFieldBase<string> & {
+    type: "pin";
+    length?: number;
+    stretch?: boolean;
+}) | (PromptFieldBase<string> & {
+    type: "select";
+    options: string[] | {
+        id: string;
+        label?: string;
+        description?: string;
+        icon?: string;
+    }[];
+    icon?: string;
+    activeIcon?: string;
+    clearable?: boolean;
+}) | (PromptFieldBase<string[]> & {
+    type: "tags";
+    maxTags?: number;
+    minTags?: number;
+    icon?: string;
+    activeIcon?: string;
+}) | (PromptFieldBase<boolean> & {
+    type: "boolean";
+}) | (PromptFieldBase<string> & {
+    type: "datetime";
+    dateOnly?: boolean;
+}) | {
+    type: "info";
+    content: string | JSX.Element | (() => JSX.Element);
+};
+type InferFieldType<T extends FieldSchema> = T extends {
+    type: "text";
+} ? string : T extends {
+    type: "number";
+} ? number : T extends {
+    type: "image";
+} ? string : T extends {
+    type: "pin";
+} ? string : T extends {
+    type: "select";
+} ? string : T extends {
+    type: "tags";
+} ? string[] : T extends {
+    type: "boolean";
+} ? boolean : T extends {
+    type: "datetime";
+} ? string : T extends {
+    type: "currency";
+} ? number : T extends {
+    type: "info";
+} ? never : never;
+type InferFormValues<T extends Record<string, FieldSchema>> = {
+    [K in keyof T as T[K] extends {
+        type: "info";
+    } ? never : K]: T[K] extends {
+        required: true;
+    } ? InferFieldType<T[K]> : InferFieldType<T[K]> | undefined;
+};
+type PromptFormValue = string | number | boolean | string[] | undefined;
+type PromptFormOptions<T extends Record<string, FieldSchema>> = {
+    title?: string;
+    ariaLabel?: string;
+    icon?: string;
+    fields: T;
+    confirmText?: string;
+    cancelText?: string | false;
+    variant?: "danger" | "primary" | "success";
+    size?: DialogOptions["size"];
+    cancelBehavior?: DialogOptions["cancelBehavior"];
+};
+export declare const createFormState: <T extends Record<string, FieldSchema>>(schema: T) => {
+    values: Record<string, PromptFormValue>;
+    errors: Record<string, string | undefined>;
+    updateField: (key: string, value: PromptFormValue) => void;
+    validateAll: () => boolean;
+    reset: () => void;
+};
+export declare const DialogHeader: (props: {
+    close: () => void;
+    title?: string;
+    icon?: string;
+}) => JSX.Element;
+type CloudSearchResolver<T> = (input: PromptSearchInput) => Promise<PromptSearchItem<T>[]> | PromptSearchItem<T>[];
+export declare const prompts: {
+    alert: (content: PromptContent, options?: DialogOptions) => Promise<void | undefined>;
+    success: (content: PromptContent, options?: Omit<DialogOptions, "variant">) => Promise<void | undefined>;
+    confirm: (content: PromptContent, options?: ConfirmOptions) => Promise<boolean | undefined>;
+    prompt: (content: string, defaultValue?: string, options?: DialogOptions) => Promise<string | null>;
+    promptNumber: (content: string, defaultValue?: number, options?: DialogOptions & {
+        min?: number;
+        max?: number;
+    }) => Promise<number | null>;
+    form: <T extends Record<string, FieldSchema>>(config: PromptFormOptions<T>) => Promise<InferFormValues<T> | null>;
+    dialog: <T = unknown>(component: (close: (result?: T) => void) => JSX.Element, options?: DialogOptions) => Promise<T | undefined>;
+    search: <T = unknown>(resolver: CloudSearchResolver<T>, options?: PromptSearchOptions) => Promise<PromptSearchItem<T> | undefined>;
+    error: (content: string | HTMLElement, options?: DialogOptions) => Promise<unknown>;
+};
+export {};

package/dist/types/feedback/toast.d.ts

@@ -0,0 +1,25 @@
+export type ToastVariant = "default" | "success" | "error";
+export type ToastAction = {
+    label: string;
+    href: string;
+};
+export type ToastOptions = {
+    variant?: ToastVariant;
+    duration?: number;
+    iconClass?: string;
+    title?: string;
+    action?: ToastAction | null;
+};
+export type ToastHandle = {
+    dismiss: () => void;
+    update: (description: string, options?: ToastOptions) => void;
+};
+export interface ToastFn {
+    (description: string, options?: ToastOptions): ToastHandle;
+    success: (description: string, options?: Omit<ToastOptions, "variant">) => ToastHandle;
+    error: (description: string, options?: Omit<ToastOptions, "variant">) => ToastHandle;
+    dismissAll: () => void;
+}
+export declare const K2B_TOAST_CONTAINER_ID = "k2b-ui-toast-container";
+export declare const isPointInsideToast: (x: number, y: number) => boolean;
+export declare const toast: ToastFn;

package/dist/types/feedback/tooltip-position.d.ts

@@ -0,0 +1,2 @@
+export type TooltipPlacement = "top" | "bottom";
+export declare const positionTooltipSurface: (tooltip: HTMLElement, target: HTMLElement, placement?: TooltipPlacement) => void;

package/dist/types/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./actions";
+export * from "./chat";
+export * from "./content";
+export * from "./feedback";
+export * from "./inputs";
+export * from "./intl";
+export * from "./layout";
+export type { AccentColor, IntentTone } from "./semantics";
+export * from "./surfaces";
+export * from "./widgets";

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

@@ -0,0 +1,21 @@
+import { type JSX } from "solid-js";
+import { type Completion } from "./completion";
+import type { ValueFieldProps } from "./field-contract";
+export type AutocompleteEditorProps = ValueFieldProps<string> & {
+    onSubmit?: () => void;
+    completions?: readonly Completion[];
+    restoreExpansionOnBackspace?: boolean;
+    highlight?: (text: string) => string;
+    singleLine?: boolean;
+    lines?: number;
+    fill?: boolean;
+    placeholder?: string;
+    spellcheck?: boolean;
+    name?: string;
+    maxLength?: number;
+    textareaRef?: (element: HTMLTextAreaElement) => void;
+    variant?: "default" | "paper";
+};
+export declare function AutocompleteEditor(props: AutocompleteEditorProps): JSX.Element;
+export type { Completion, SuggestContext, Suggestion } from "./completion";
+export { abbreviations } from "./completion";

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

@@ -0,0 +1,30 @@
+import { type JSX } from "solid-js";
+import { type ChoiceOption } from "./choice";
+import type { ValueFieldProps } from "./field-contract";
+import type { SelectGroup } from "./Select";
+export type AutocompleteSelectOption = ChoiceOption<string>;
+export type AutocompleteSelectSearchResult = {
+    /** Ranked suggestions shown in the popup. */
+    options: readonly AutocompleteSelectOption[];
+    /** The authoritative option that Tab or blur may accept automatically. */
+    match?: AutocompleteSelectOption;
+};
+export type AutocompleteSelectProps = ValueFieldProps<string | null> & {
+    search: (query: string, signal: AbortSignal, group: string | null) => Promise<AutocompleteSelectSearchResult>;
+    selectedOption?: AutocompleteSelectOption;
+    formatValue?: (option: AutocompleteSelectOption) => string;
+    groups?: readonly SelectGroup[];
+    defaultGroup?: string;
+    groupsAriaLabel?: string;
+    allGroupLabel?: string;
+    placeholder?: string;
+    debounceMs?: number;
+    clearable?: boolean;
+    name?: string;
+    autofocus?: boolean;
+    noMatchText?: string;
+    checkingText?: string;
+    noOptionsText?: string;
+};
+export declare function AutocompleteSelect(props: AutocompleteSelectProps): JSX.Element;
+export default AutocompleteSelect;

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

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+export type CheckboxProps = ValueFieldProps<boolean> & {
+    /** Visual and accessible mixed state for partial bulk selections. */
+    indeterminate?: boolean;
+    name?: string;
+};
+export declare function Checkbox(props: CheckboxProps): JSX.Element;
+export default Checkbox;

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

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+export type CheckboxCardProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "checked" | "onChange" | "type" | "value" | keyof ValueFieldProps<boolean>> & ValueFieldProps<boolean> & {
+    icon?: string;
+    color?: string;
+    variant?: "card" | "input";
+};
+export declare function CheckboxCard(props: CheckboxCardProps): JSX.Element;
+export default CheckboxCard;

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

@@ -0,0 +1,13 @@
+import { type JSX } from "solid-js";
+type ChoiceGroup = {
+    value: string | null;
+    label: string;
+};
+export declare function ChoiceGroups(props: {
+    choices: readonly ChoiceGroup[];
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+    ariaLabel: string;
+    controls: string;
+}): JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+import { type JSX } from "solid-js";
+import type { FieldProps, MaybeAccessor, ValueFieldProps } from "./field-contract";
+export type PinInputProps = ValueFieldProps<string> & {
+    length?: number;
+    name?: string;
+    stretch?: boolean;
+};
+export declare function PinInput(props: PinInputProps): JSX.Element;
+export type SliderProps = FieldProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onInput" | "onChange" | keyof FieldProps> & ValueFieldProps<number> & {
+    value: MaybeAccessor<number>;
+    formatValue?: (value: number) => string;
+    showValue?: boolean;
+    center?: boolean;
+    defaultValue?: number;
+};
+export declare function Slider(props: SliderProps): JSX.Element;
+export type ColorInputProps = ValueFieldProps<string> & {
+    name?: string;
+    compact?: boolean;
+    transparent?: boolean;
+    transparentValue?: MaybeAccessor<boolean>;
+    onTransparentValueChange?: (value: boolean) => void;
+};
+export declare function ColorInput(props: ColorInputProps): JSX.Element;

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

@@ -0,0 +1,18 @@
+import { type JSX } from "solid-js";
+import type { FieldProps, MaybeAccessor } from "./field-contract";
+export type ComboboxOption = {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+};
+export type ComboboxProps = FieldProps & {
+    query?: MaybeAccessor<string>;
+    onQueryChange?: (query: string) => void;
+    placeholder?: string;
+    fetchData: (query: string, signal: AbortSignal) => Promise<ComboboxOption[]>;
+    onSelect: (option: ComboboxOption) => void;
+    debounceMs?: number;
+};
+export declare function Combobox(props: ComboboxProps): JSX.Element;
+export default Combobox;

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

@@ -0,0 +1,31 @@
+import { type DateContext } from "@k2b/stdlib";
+import { type JSX } from "solid-js";
+import { type DateRangeValue } from "./date-picker";
+import type { MaybeAccessor, ValueFieldProps } from "./field-contract";
+export type { DateRangeValue } from "./date-picker";
+export type DatePreset<T> = {
+    label: string;
+    value: T;
+};
+export type DurationPreset = {
+    label: string;
+    minutes: number;
+};
+export type DatePickerBaseProps<T> = Omit<ValueFieldProps<T>, "value"> & {
+    placeholder?: string;
+    value: MaybeAccessor<T>;
+    presets?: readonly DatePreset<T>[];
+    dateConfig?: DateContext;
+    clearable?: boolean;
+};
+export type DatePickerProps = DatePickerBaseProps<string | null>;
+export type DateTimePickerProps = DatePickerBaseProps<string | null>;
+export type DateRangePickerProps = DatePickerBaseProps<DateRangeValue> & {
+    withTime?: boolean;
+    datePresets?: readonly DatePreset<string | null>[];
+    durationPresets?: readonly DurationPreset[];
+};
+export declare const placeDatePopover: (trigger: HTMLElement, popover: HTMLElement, wide: boolean) => void;
+export declare function DatePicker(props: DatePickerProps): JSX.Element;
+export declare function DateTimePicker(props: DateTimePickerProps): JSX.Element;
+export declare function DateRangePicker(props: DateRangePickerProps): JSX.Element;

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

@@ -0,0 +1,31 @@
+import { type JSX } from "solid-js";
+import type { FieldProps, ValueFieldProps } from "./field-contract";
+import { type ImageCropAspect, type ImageCropSource, type ImageCropState } from "./image-crop";
+export type FileDropzoneProps = FieldProps & {
+    accept?: string;
+    multiple?: boolean;
+    busy?: boolean;
+    icon?: string;
+    title?: JSX.Element;
+    subtitle?: JSX.Element;
+    hint?: JSX.Element;
+    onDrop: (files: File[]) => void | Promise<void>;
+};
+export declare function FileDropzone(props: FileDropzoneProps): JSX.Element;
+export type ImageInputProps = ValueFieldProps<string | null> & {
+    round?: boolean;
+    variant?: "default" | "small";
+    transform?: (file: File) => Promise<string>;
+    accept?: string;
+    fallbackMarker?: string;
+};
+export declare function ImageInput(props: ImageInputProps): JSX.Element;
+export type ImageCropperProps = {
+    source: ImageCropSource;
+    aspect?: ImageCropAspect;
+    previewShape?: "rect" | "circle";
+    disabled?: boolean;
+    onValueChange?: (state: ImageCropState | null) => void;
+    class?: string;
+};
+export declare function ImageCropper(props: ImageCropperProps): JSX.Element;

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

@@ -0,0 +1,41 @@
+import { type JSX } from "solid-js";
+import { type ChoiceOption } from "./choice";
+import type { ValueFieldProps } from "./field-contract";
+import type { SelectGroup } from "./Select";
+export type MultiSelectOption = string | {
+    id: string;
+    label?: string;
+    description?: string;
+    icon?: string;
+    color?: string;
+    groups?: readonly string[];
+} | ChoiceOption<string>;
+export type MultiSelectFetchDataFn = (query: string, signal: AbortSignal, group: string | null) => Promise<MultiSelectOption[]>;
+export type MultiSelectInputProps = ValueFieldProps<string[]> & {
+    options?: MultiSelectOption[];
+    fetchData?: MultiSelectFetchDataFn;
+    selectedOptions?: () => MultiSelectOption[];
+    placeholder?: string;
+    icon?: string;
+    activeIcon?: string;
+    fetchDebounceMs?: number;
+    debounceMs?: number;
+    loadOptions?: (query: string, signal: AbortSignal, group: string | null) => Promise<readonly ChoiceOption<string>[]>;
+    groups?: readonly SelectGroup[];
+    defaultGroup?: string;
+    groupsAriaLabel?: string;
+    allGroupLabel?: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    name?: string;
+    renderOption?: (option: ChoiceOption<string>) => JSX.Element;
+    renderValue?: (option: ChoiceOption<string>) => JSX.Element;
+    searchPlaceholder?: string;
+    loadingLabel?: string;
+    noResultsLabel?: string;
+    emptyLabel?: string;
+    retryLabel?: string;
+    clearLabel?: string;
+};
+export declare function MultiSelectInput(props: MultiSelectInputProps): JSX.Element;
+export default MultiSelectInput;

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

@@ -0,0 +1,24 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+export type NumberInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "max" | "min" | "onChange" | "onInput" | "prefix" | "step" | "type" | "value" | keyof ValueFieldProps<number | null>> & ValueFieldProps<number | null> & {
+    max?: number;
+    min?: number;
+    step?: number;
+    decimalPlaces?: number;
+    allowNegative?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
+    clearLabel?: string;
+    increaseLabel?: string;
+    decreaseLabel?: string;
+    /** Explicit locale for the decimal separator; defaults to the inherited render locale. */
+    locale?: string;
+    showSteppers?: boolean;
+    disableSteppers?: boolean;
+    icon?: string;
+    activeIcon?: string;
+    prefix?: JSX.Element;
+    suffix?: JSX.Element;
+};
+export declare function NumberInput(props: NumberInputProps): JSX.Element;
+export default NumberInput;

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

@@ -0,0 +1,50 @@
+import { type JSX } from "solid-js";
+import { type ChoiceOption } from "./choice";
+import type { ValueFieldProps } from "./field-contract";
+export type SelectOption = ChoiceOption<string>;
+export type SelectGroup = {
+    value: string;
+    label: string;
+};
+export type SelectView = "list" | "grid";
+export type SelectGridSize = "sm" | "md" | "lg";
+export type SelectSourceOption = string | {
+    id: string;
+    label?: string;
+    description?: string;
+    icon?: string;
+    color?: string;
+    groups?: readonly string[];
+} | SelectOption;
+export type SelectProps = ValueFieldProps<string | null> & {
+    placeholder?: string;
+    icon?: string;
+    activeIcon?: string;
+    options?: SelectSourceOption[];
+    fetchData?: (query: string, signal: AbortSignal, group: string | null) => Promise<SelectSourceOption[]>;
+    loadOptions?: (query: string, signal: AbortSignal, group: string | null) => Promise<readonly ChoiceOption<string>[]>;
+    selectedOption?: ChoiceOption<string>;
+    selectedLabel?: () => string | undefined;
+    fetchDebounceMs?: number;
+    debounceMs?: number;
+    searchable?: boolean;
+    /** Optional synchronous filter for static options. */
+    filterOptions?: (options: readonly SelectOption[], query: string) => readonly SelectOption[];
+    /** Optional filters. An option may belong to more than one group. */
+    groups?: readonly SelectGroup[];
+    /** Group selected when the component is created. Omit to start with all options. */
+    defaultGroup?: string;
+    groupsAriaLabel?: string;
+    allGroupLabel?: string;
+    /** Show a local list/grid layout toggle in the dropdown. */
+    viewToggle?: boolean;
+    /** Initial dropdown layout when `viewToggle` is enabled. */
+    defaultView?: SelectView;
+    /** Tile density for the grid layout. */
+    gridSize?: SelectGridSize;
+    searchPlaceholder?: string;
+    clearable?: boolean;
+    name?: string;
+};
+export declare function Select(props: SelectProps): JSX.Element;
+export default Select;

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

@@ -0,0 +1,25 @@
+import { type JSX } from "solid-js";
+import type { ButtonSize } from "../actions/Button";
+import { type DropdownPosition } from "../actions/Dropdown";
+import type { MaybeAccessor, ValueFieldProps } from "./field-contract";
+export type SelectChipOption<T extends string | number = string> = {
+    value: T;
+    label: string;
+    description?: string;
+    icon?: string;
+    image?: string;
+    disabled?: boolean;
+};
+export type SelectChipProps<T extends string | number = string> = ValueFieldProps<T> & {
+    value: MaybeAccessor<T>;
+    options: SelectChipOption<T>[];
+    icon?: string;
+    iconOnly?: boolean;
+    size?: ButtonSize;
+    placeholder?: string;
+    position?: DropdownPosition;
+    menuWidth?: string;
+    name?: string;
+};
+export declare function SelectChip<T extends string | number = string>(props: SelectChipProps<T>): JSX.Element;
+export default SelectChip;

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

@@ -0,0 +1,21 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+import { type SelectGridSize, type SelectGroup, type SelectOption, type SelectView } from "./Select";
+export type IconOption = SelectOption & {
+    keywords?: readonly string[];
+};
+export type IconInputProps = ValueFieldProps<string | null> & {
+    options?: readonly IconOption[];
+    placeholder?: string;
+    clearable?: boolean;
+    searchLimit?: number;
+    groups?: readonly SelectGroup[];
+    defaultGroup?: string;
+    groupsAriaLabel?: string;
+    allGroupLabel?: string;
+    viewToggle?: boolean;
+    defaultView?: SelectView;
+    gridSize?: SelectGridSize;
+    name?: string;
+};
+export declare function IconInput(props: IconInputProps): JSX.Element;

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

@@ -0,0 +1,7 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+export type SwitchProps = ValueFieldProps<boolean> & {
+    name?: string;
+};
+export declare function Switch(props: SwitchProps): JSX.Element;
+export default Switch;

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

@@ -0,0 +1,35 @@
+import { type JSX } from "solid-js";
+export type TagEditorItem = {
+    id: string;
+    name: string;
+    color?: string | null;
+};
+export type TagEditorValue = {
+    name: string;
+    color: string;
+};
+export type TagEditorLabels = {
+    create: string;
+    empty: string;
+    name: string;
+    namePlaceholder: string;
+    color: string;
+    save: string;
+    cancel: string;
+    edit: string;
+    remove: string;
+};
+export type TagEditorProps<T extends TagEditorItem = TagEditorItem> = {
+    items: readonly T[];
+    onCreate?: (value: TagEditorValue) => void | Promise<void>;
+    onUpdate?: (item: T, value: TagEditorValue) => void | Promise<void>;
+    onDelete?: (item: T) => void | Promise<void>;
+    labels?: Partial<TagEditorLabels>;
+    defaultColor?: string;
+    disabled?: boolean;
+    onDirtyChange?: (dirty: boolean) => void;
+    class?: string;
+};
+/** Controlled tag manager. Persistence, authorization, confirmation, and toasts stay with the consumer. */
+export declare function TagEditor<T extends TagEditorItem = TagEditorItem>(props: TagEditorProps<T>): JSX.Element;
+export default TagEditor;