@superblocksteam/library 2.0.32 → 2.0.33-next.1

package/dist-types/lib/user-facing/components/icon/props.d.ts

@@ -0,0 +1,28 @@
+import { Dim } from "@superblocksteam/library-shared";
+import { Section, Prop } from "../../properties-panel/props-builder.js";
+import type { InternalProps } from "../../properties-panel/props-builder.js";
+export type IconProps = InternalProps<typeof propertiesDefinition>;
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any, undefined>> & {
+        icon: Prop<string, false, undefined>;
+    }>;
+    layout: Section<Record<string, Prop<any, any, undefined>> & {
+        size: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, true, undefined>;
+    } & {
+        margin: Prop<{
+            top: Dim<"px">;
+            bottom: Dim<"px">;
+            left: Dim<"px">;
+            right: Dim<"px">;
+        } | undefined, true, undefined>;
+    } & {
+        isVisible: Prop<boolean, true, undefined>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any, undefined>> & {
+        color: Prop<string, false, undefined>;
+        loading: Prop<boolean, true, undefined>;
+    }>;
+    events: Section<Record<string, Prop<any, any, undefined>> & {
+        onClick: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+};

package/dist-types/lib/user-facing/components/image/editor.d.ts

@@ -0,0 +1,5 @@
+import type { propertiesDefinition } from "./props.js";
+import type { EditorTemplate } from "../../../internal-details/sb-wrapper.jsx";
+import type { EditorConfig } from "@superblocksteam/library-shared/types";
+export declare const editorTemplate: EditorTemplate<typeof propertiesDefinition>;
+export declare const editorConfig: EditorConfig;

package/dist-types/lib/user-facing/components/image/image-component.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import type { ImageAlign } from "./props.js";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { DimModes } from "@superblocksteam/library-shared";
+import type { PerCornerBorderRadius, PerSideBorder } from "@superblocksteam/library-shared/types";
+declare class ImageComponent extends React.Component<ImageComponentProps, {
+    imageError: boolean;
+    imageHeight?: number;
+}> {
+    private imageRef;
+    private resizeObserver;
+    constructor(props: ImageComponentProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ImageComponentProps): void;
+    componentWillUnmount(): void;
+    observeContainer(): void;
+    disconnectObserver(): void;
+    handleResize: ResizeObserverCallback;
+    render(): React.JSX.Element;
+    onImageError: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onImageLoad: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+}
+interface ImageComponentProps {
+    imageUrl: string;
+    defaultImageUrl: string;
+    isLoading: boolean;
+    align?: ImageAlign;
+    borderRadius: PerCornerBorderRadius;
+    fillContainer: boolean;
+    height?: Dim<DimModes>;
+    maxHeight?: Dim<"px">;
+    width?: Dim<DimModes>;
+    maxWidth?: Dim<"px">;
+    roundHeightToGrid: boolean;
+    border?: PerSideBorder;
+    backgroundColor: string;
+    name?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+export default ImageComponent;

package/dist-types/lib/user-facing/components/image/index.d.ts

@@ -0,0 +1,65 @@
+export declare const Image: import("../../../internal-details/sb-wrapper.jsx").ChainableComponent<{
+    general: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        src: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        backgroundColor: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        border: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerSideBorder, false, undefined>;
+        borderRadius: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true, undefined>;
+        fillContainer: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        align: import("../../properties-panel/props-builder.js").Prop<import("./props.js").ImageAlign, true, undefined>;
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+    } & {
+        margin: import("../../properties-panel/props-builder.js").Prop<{
+            top: import("@superblocksteam/library-shared").Dim<"px">;
+            bottom: import("@superblocksteam/library-shared").Dim<"px">;
+            left: import("@superblocksteam/library-shared").Dim<"px">;
+            right: import("@superblocksteam/library-shared").Dim<"px">;
+        } | undefined, true, undefined>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onClick: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+}, import("../../properties-panel/props-builder.js").ExternalProps<{
+    general: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        src: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        backgroundColor: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        border: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerSideBorder, false, undefined>;
+        borderRadius: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true, undefined>;
+        fillContainer: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        align: import("../../properties-panel/props-builder.js").Prop<import("./props.js").ImageAlign, true, undefined>;
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+    } & {
+        margin: import("../../properties-panel/props-builder.js").Prop<{
+            top: import("@superblocksteam/library-shared").Dim<"px">;
+            bottom: import("@superblocksteam/library-shared").Dim<"px">;
+            left: import("@superblocksteam/library-shared").Dim<"px">;
+            right: import("@superblocksteam/library-shared").Dim<"px">;
+        } | undefined, true, undefined>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onClick: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+}>>;

package/dist-types/lib/user-facing/components/image/props.d.ts

@@ -0,0 +1,43 @@
+import { Dim } from "@superblocksteam/library-shared";
+import { Section } from "../../properties-panel/props-builder.js";
+import { Prop } from "../../properties-panel/props-builder.js";
+import type { DimModes } from "@superblocksteam/library-shared";
+export type ImageAlign = "left" | "center" | "right";
+export declare const borderDef: () => import("../../properties-panel/props-builder.js").CompositeProp<{
+    color: Prop<string, false, undefined>;
+    width: Prop<Dim<DimModes>, false, undefined>;
+    style: Prop<string, false, undefined>;
+}>;
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any, undefined>> & {
+        src: Prop<string, false, undefined>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any, undefined>> & {
+        backgroundColor: Prop<string, false, undefined>;
+        border: Prop<import("@superblocksteam/library-shared/types").PerSideBorder, false, undefined>;
+        borderRadius: Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true, undefined>;
+        fillContainer: Prop<boolean, true, undefined>;
+        align: Prop<ImageAlign, true, undefined>;
+        loading: Prop<boolean, true, undefined>;
+    }>;
+    layout: Section<Record<string, Prop<any, any, undefined>> & {
+        maxHeight?: Prop<Dim<DimModes>, false, undefined> | undefined;
+        minHeight?: Prop<Dim<DimModes>, false, undefined> | undefined;
+        maxWidth?: Prop<Dim<DimModes>, false, undefined> | undefined;
+        minWidth?: Prop<Dim<DimModes>, false, undefined> | undefined;
+        width: Prop<Dim<DimModes>, false, undefined>;
+        height: Prop<Dim<DimModes>, false, undefined>;
+    } & {
+        margin: Prop<{
+            top: Dim<"px">;
+            bottom: Dim<"px">;
+            left: Dim<"px">;
+            right: Dim<"px">;
+        } | undefined, true, undefined>;
+    } & {
+        isVisible: Prop<boolean, true, undefined>;
+    }>;
+    events: Section<Record<string, Prop<any, any, undefined>> & {
+        onClick: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+};

package/dist-types/lib/user-facing/components/input/constants.d.ts

@@ -0,0 +1,24 @@
+import type { CurrencyCodeDisplayType, InputType } from "./types.js";
+import type { PerSideBorder, UserAccessibleTheme } from "@superblocksteam/library-shared/types";
+export declare const InputTypes: {
+    [key: string]: string;
+};
+export declare const INPUT_TYPE_OPTIONS: {
+    label: string;
+    value: InputType;
+}[];
+export declare const CurrencyCodeDisplayTypes: {
+    readonly SYMBOL: "symbol";
+    readonly ISO_CODE: "iso_code";
+};
+export declare const CURRENCY_CODE_DISPLAY_OPTIONS: {
+    label: string;
+    value: CurrencyCodeDisplayType;
+}[];
+export declare const defaultInputBorderObject: (theme: UserAccessibleTheme) => PerSideBorder;
+export declare const CURRENCY_SYMBOL_MAP: Record<string, string>;
+export declare const INPUT_TYPES_WITH_MINMAX: string[];
+export declare const DATE_TYPES: {
+    value: string;
+    label: string;
+}[];

package/dist-types/lib/user-facing/components/input/derived-properties.d.ts

@@ -0,0 +1,4 @@
+import type { InputWidgetProps } from "./types.js";
+export declare function getValue(this: InputWidgetProps): string | number | null;
+export declare function getShowError(this: InputWidgetProps): boolean;
+export declare function getIsValid(this: InputWidgetProps): boolean;

package/dist-types/lib/user-facing/components/input/derived.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-types/lib/user-facing/components/input/editor.d.ts

@@ -0,0 +1,5 @@
+import type { propertiesDefinition } from "./props.js";
+import type { EditorTemplate } from "../../../internal-details/sb-wrapper.jsx";
+import type { EditorConfig } from "@superblocksteam/library-shared/types";
+export declare const editorTemplate: EditorTemplate<typeof propertiesDefinition>;
+export declare const editorConfig: EditorConfig;

package/dist-types/lib/user-facing/components/input/index.d.ts

@@ -0,0 +1,187 @@
+export declare const Input: import("../../../internal-details/sb-wrapper.jsx").ChainableComponent<{
+    general: import("../../properties-panel/props-builder.js").Section<(Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & ({
+        label: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    } & (Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    }, "inputType" | "currency" | "numberFormat" | "currencyCodeDisplay"> & ({
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        numberFormat: import("../../properties-panel/props-builder.js").Prop<"unformatted" | NonNullable<"compact" | "standard" | "scientific" | "engineering" | undefined>, true, undefined>;
+        currency?: undefined;
+        currencyCodeDisplay?: undefined;
+    } | {
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        numberFormat: import("../../properties-panel/props-builder.js").Prop<"unformatted" | NonNullable<"compact" | "standard" | "scientific" | "engineering" | undefined>, true, undefined>;
+        currency: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        currencyCodeDisplay: import("../../properties-panel/props-builder.js").Prop<import("./types.js").CurrencyCodeDisplayType, true, undefined>;
+    })))) & {
+        defaultValue: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        labelPosition: import("../../properties-panel/props-builder.js").Prop<"left" | "top", true, undefined>;
+        labelStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        placeholderText: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        textStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        backgroundColor: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        border: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true, undefined>;
+        borderRadius: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true, undefined>;
+        icon: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        iconPosition: import("../../properties-panel/props-builder.js").Prop<import("../../icons/constants.js").IconPosition, true, undefined>;
+    } & Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+    }, "inputType"> & {
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    } & {
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        padding: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").Spacing, true, undefined>;
+    } & {
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<"px" | "columns" | "rows" | "fill" | "%">, false, undefined>;
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+    } & {
+        margin: import("../../properties-panel/props-builder.js").Prop<{
+            top: import("@superblocksteam/library-shared").Dim<"px">;
+            bottom: import("@superblocksteam/library-shared").Dim<"px">;
+            left: import("@superblocksteam/library-shared").Dim<"px">;
+            right: import("@superblocksteam/library-shared").Dim<"px">;
+        } | undefined, true, undefined>;
+    } & {
+        labelWidth: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim, true, undefined>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+    }, "inputType" | "stepper" | "stepSize" | "minDecimals" | "maxDecimals"> & {
+        stepper: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        stepSize: import("../../properties-panel/props-builder.js").Prop<number, true, undefined>;
+        minDecimals: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        maxDecimals: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    } & Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+    }, "inputType" | "maxLength" | "minLength"> & {
+        minLength: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        maxLength: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    } & {
+        errorMessagePlacement: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true, undefined>;
+        customValidationRule: import("../../properties-panel/props-builder.js").Prop<any, false, undefined>;
+        customErrorMessage: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        isDisabled: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        required: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onTextChanged: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onSubmit: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onFocus: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onFocusOut: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+    meta: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        text: import("../../properties-panel/props-builder.js").Prop<string | undefined, false, undefined>;
+        isTouched: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    derived: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        value: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        validationErrors: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/utils/input-validation.js").ValidationErrors, true, undefined>;
+        isValid: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        showError: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+}, import("../../properties-panel/props-builder.js").ExternalProps<{
+    general: import("../../properties-panel/props-builder.js").Section<(Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & ({
+        label: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    } & (Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    }, "inputType" | "currency" | "numberFormat" | "currencyCodeDisplay"> & ({
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        numberFormat: import("../../properties-panel/props-builder.js").Prop<"unformatted" | NonNullable<"compact" | "standard" | "scientific" | "engineering" | undefined>, true, undefined>;
+        currency?: undefined;
+        currencyCodeDisplay?: undefined;
+    } | {
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        numberFormat: import("../../properties-panel/props-builder.js").Prop<"unformatted" | NonNullable<"compact" | "standard" | "scientific" | "engineering" | undefined>, true, undefined>;
+        currency: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        currencyCodeDisplay: import("../../properties-panel/props-builder.js").Prop<import("./types.js").CurrencyCodeDisplayType, true, undefined>;
+    })))) & {
+        defaultValue: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        labelPosition: import("../../properties-panel/props-builder.js").Prop<"left" | "top", true, undefined>;
+        labelStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        placeholderText: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        textStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        backgroundColor: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        border: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true, undefined>;
+        borderRadius: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true, undefined>;
+        icon: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        iconPosition: import("../../properties-panel/props-builder.js").Prop<import("../../icons/constants.js").IconPosition, true, undefined>;
+    } & Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+    }, "inputType"> & {
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    } & {
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        padding: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").Spacing, true, undefined>;
+    } & {
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<"px" | "columns" | "rows" | "fill" | "%">, false, undefined>;
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+    } & {
+        margin: import("../../properties-panel/props-builder.js").Prop<{
+            top: import("@superblocksteam/library-shared").Dim<"px">;
+            bottom: import("@superblocksteam/library-shared").Dim<"px">;
+            left: import("@superblocksteam/library-shared").Dim<"px">;
+            right: import("@superblocksteam/library-shared").Dim<"px">;
+        } | undefined, true, undefined>;
+    } & {
+        labelWidth: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim, true, undefined>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+    }, "inputType" | "stepper" | "stepSize" | "minDecimals" | "maxDecimals"> & {
+        stepper: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        stepSize: import("../../properties-panel/props-builder.js").Prop<number, true, undefined>;
+        minDecimals: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        maxDecimals: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    } & Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+    }, "inputType" | "maxLength" | "minLength"> & {
+        minLength: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        maxLength: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+    } & {
+        errorMessagePlacement: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true, undefined>;
+        customValidationRule: import("../../properties-panel/props-builder.js").Prop<any, false, undefined>;
+        customErrorMessage: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        isDisabled: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        required: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onTextChanged: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onSubmit: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onFocus: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onFocusOut: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+    meta: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        text: import("../../properties-panel/props-builder.js").Prop<string | undefined, false, undefined>;
+        isTouched: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    derived: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        value: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        validationErrors: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/utils/input-validation.js").ValidationErrors, true, undefined>;
+        isValid: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        showError: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+}>>;

package/dist-types/lib/user-facing/components/input/input-component.d.ts

@@ -0,0 +1,58 @@
+import { NumericInput } from "@blueprintjs/core";
+import React from "react";
+import type { InputComponentProps, InputType } from "./types.js";
+export declare const hasIconSupport: (inputType: InputType) => boolean;
+declare class InputComponent extends React.Component<InputComponentProps, InputComponentState> {
+    numericInputRef: React.RefObject<NumericInput>;
+    inputRef: React.RefObject<HTMLInputElement>;
+    groupWrapperRef: React.RefObject<HTMLDivElement>;
+    constructor(props: InputComponentProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<InputComponentProps>): void;
+    componentWillUnmount(): void;
+    shouldComponentUpdate(prevProps: Readonly<InputComponentProps>, prevState: Readonly<InputComponentState>): boolean;
+    private processAndSetValue;
+    onDebouncedValueChange: import("lodash").DebouncedFunc<(value: any) => void>;
+    getInputDomElement: () => HTMLInputElement | null | undefined;
+    ensureFocus: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    formatNumber: (value: string) => string;
+    valueWithPrecision: (value: string | number) => string;
+    onTextChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onNumberChange: (_: number, valueAsString: string) => void;
+    getIcon(inputType: InputType): "search" | "envelope" | "phone" | undefined;
+    getType(inputType: InputType): "text" | "search" | "email" | "password";
+    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleIncrementDecrement: (isIncrementing: boolean) => void;
+    private getClassNames;
+    private hasSuffix;
+    private hasPrefix;
+    private isInputGroupWithAddons;
+    /**
+     * Generates a style object for the input element and input group.
+     * We only use the style props for border radius, background color, text style and icon position styling.
+     * Border, border color, border width, and padding styling is handled by the CSS classes.
+     *
+     * @param inputGroupStylingProps - The input group styling properties.
+     * @param inputStyleOverride - The input style override properties.
+     * @returns styles for to be used either by an input element or an input group element.
+     */
+    private static generateStyleObject;
+    private static generateIconPositionStyleObject;
+    private getStyleObject;
+    private createCssVariablesForPadding;
+    private numericInputComponent;
+    private passwordIconComponent;
+    private textInputComponent;
+    private renderInputComponent;
+    private renderIcon;
+    render(): React.JSX.Element;
+}
+interface InputComponentState {
+    showPassword?: boolean;
+    localValue?: string;
+    displayValue?: string;
+    inputFocused?: boolean;
+}
+export default InputComponent;

package/dist-types/lib/user-facing/components/input/props.d.ts

@@ -0,0 +1,98 @@
+import { Section, Prop } from "../../properties-panel/props-builder.js";
+import type { CurrencyCodeDisplayType } from "./types.js";
+import type { ValidationErrors } from "../../component-base/utils/input-validation.js";
+import type { IconPosition } from "../../icons/constants.js";
+export declare const propertiesDefinition: {
+    general: Section<(Record<string, Prop<any, any, undefined>> & ({
+        label: Prop<string, true, undefined>;
+    } & (Omit<{
+        inputType: Prop<string, true, undefined>;
+    }, "inputType" | "currency" | "numberFormat" | "currencyCodeDisplay"> & ({
+        inputType: Prop<string, true, undefined>;
+        numberFormat: Prop<"unformatted" | NonNullable<"compact" | "standard" | "scientific" | "engineering" | undefined>, true, undefined>;
+        currency?: undefined;
+        currencyCodeDisplay?: undefined;
+    } | {
+        inputType: Prop<string, true, undefined>;
+        numberFormat: Prop<"unformatted" | NonNullable<"compact" | "standard" | "scientific" | "engineering" | undefined>, true, undefined>;
+        currency: Prop<string, true, undefined>;
+        currencyCodeDisplay: Prop<CurrencyCodeDisplayType, true, undefined>;
+    })))) & {
+        defaultValue: Prop<string, true, undefined>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any, undefined>> & {
+        labelPosition: Prop<"left" | "top", true, undefined>;
+        labelStyle: Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        placeholderText: Prop<string, true, undefined>;
+        textStyle: Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        backgroundColor: Prop<string, true, undefined>;
+        border: Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true, undefined>;
+        borderRadius: Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true, undefined>;
+        icon: Prop<string, false, undefined>;
+        iconPosition: Prop<IconPosition, true, undefined>;
+    } & Omit<{
+        inputType: Prop<string, false, undefined>;
+    }, "inputType"> & {
+        inputType: Prop<string, true, undefined>;
+    } & {
+        loading: Prop<boolean, true, undefined>;
+    }>;
+    layout: Section<Record<string, Prop<any, any, undefined>> & {
+        padding: Prop<import("@superblocksteam/library-shared/types").Spacing, true, undefined>;
+    } & {
+        width: Prop<import("@superblocksteam/library-shared").Dim<"px" | "columns" | "rows" | "fill" | "%">, false, undefined>;
+        maxHeight?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        height: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+    } & {
+        margin: Prop<{
+            top: import("@superblocksteam/library-shared").Dim<"px">;
+            bottom: import("@superblocksteam/library-shared").Dim<"px">;
+            left: import("@superblocksteam/library-shared").Dim<"px">;
+            right: import("@superblocksteam/library-shared").Dim<"px">;
+        } | undefined, true, undefined>;
+    } & {
+        labelWidth: Prop<import("@superblocksteam/library-shared").Dim, true, undefined>;
+    } & {
+        isVisible: Prop<boolean, true, undefined>;
+    }>;
+    interaction: Section<Record<string, Prop<any, any, undefined>> & Omit<{
+        inputType: Prop<string, false, undefined>;
+    }, "inputType" | "stepper" | "stepSize" | "minDecimals" | "maxDecimals"> & {
+        stepper: Prop<boolean, true, undefined>;
+        stepSize: Prop<number, true, undefined>;
+        minDecimals: Prop<number, false, undefined>;
+        maxDecimals: Prop<number, false, undefined>;
+        inputType: Prop<string, true, undefined>;
+    } & Omit<{
+        inputType: Prop<string, false, undefined>;
+    }, "inputType" | "maxLength" | "minLength"> & {
+        minLength: Prop<number, false, undefined>;
+        maxLength: Prop<number, false, undefined>;
+        inputType: Prop<string, true, undefined>;
+    } & {
+        errorMessagePlacement: Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true, undefined>;
+        customValidationRule: Prop<any, false, undefined>;
+        customErrorMessage: Prop<string, true, undefined>;
+        isDisabled: Prop<boolean, true, undefined>;
+        required: Prop<boolean, true, undefined>;
+    }>;
+    events: Section<Record<string, Prop<any, any, undefined>> & {
+        onTextChanged: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onSubmit: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onFocus: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onFocusOut: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+    meta: Section<Record<string, Prop<any, any, undefined>> & {
+        text: Prop<string | undefined, false, undefined>;
+        isTouched: Prop<boolean, true, undefined>;
+    }>;
+    derived: Section<Record<string, Prop<any, any, undefined>> & {
+        value: Prop<string, true, undefined>;
+        validationErrors: Prop<ValidationErrors, true, undefined>;
+        isValid: Prop<boolean, true, undefined>;
+        showError: Prop<boolean, true, undefined>;
+    }>;
+};

package/dist-types/lib/user-facing/components/input/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const NumericInputWrapperClass: string;
+export declare const ControlGroupClassName: string;
+export declare const STYLED_BORDERS_CLASS_NAME = "inputWithStyledBorders";
+export declare const SupportNestedStyledBorders: string;
+export declare const SupportNestedStyledPadding: string;
+export declare const InputGroupWithStyledBorders: string;