@superblocksteam/library 2.0.3-next.71

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 } 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 DEFAULT_INPUT_BORDER_OBJECT: 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,5 @@
+import type { InputWidgetProps } from "./types.js";
+export declare function getValue(this: InputWidgetProps): string | number | null | undefined;
+export declare function getValidationErrors(this: InputWidgetProps): Record<"number" | "url" | "required" | "email" | "minMax" | "customRule", string | undefined>;
+export declare function getShowError(this: InputWidgetProps): boolean;
+export declare function getIsValid(this: InputWidgetProps): boolean;

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

@@ -0,0 +1,97 @@
+export declare const SbInput: import("react").FC<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>> & ({
+        label: import("../../properties-panel/props-builder.js").Prop<string, true>;
+    } & (Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true>;
+    }, "inputType" | "currency" | "numberFormatting" | "currencyCodeDisplay"> & ({
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        numberFormatting: import("../../properties-panel/props-builder.js").Prop<"unformatted" | NonNullable<"compact" | "standard" | "scientific" | "engineering" | undefined>, true>;
+        currency?: undefined;
+        currencyCodeDisplay?: undefined;
+    } | {
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        numberFormatting: import("../../properties-panel/props-builder.js").Prop<"unformatted" | NonNullable<"compact" | "standard" | "scientific" | "engineering" | undefined>, true>;
+        currency: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        currencyCodeDisplay: import("../../properties-panel/props-builder.js").Prop<import("./types.js").CurrencyCodeDisplayType, true>;
+    })))) & {
+        defaultValue: import("../../properties-panel/props-builder.js").Prop<string, true>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        labelPosition: import("../../properties-panel/props-builder.js").Prop<"left" | "top", true>;
+        labelStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
+        placeholderText: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        textStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
+        backgroundColor: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        border: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true>;
+        borderRadius: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true>;
+        icon: import("../../properties-panel/props-builder.js").Prop<string, false>;
+        iconPosition: import("../../properties-panel/props-builder.js").Prop<import("../../icons/constants.js").IconPosition, true>;
+    } & Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, false>;
+    }, "inputType" | "multiline"> & {
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        multiline: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+    } & {
+        loadingAnimation: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<(Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        padding: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").Spacing, true>;
+    } & ({
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    } & ({
+        margin: import("../../properties-panel/props-builder.js").Prop<unknown, true>;
+    } & (Omit<{
+        labelPosition: import("../../properties-panel/props-builder.js").Prop<"left" | "top", false>;
+    }, "labelPosition" | "labelWidth"> & ({
+        labelPosition: import("../../properties-panel/props-builder.js").Prop<"left", true>;
+        labelWidth: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim, true>;
+    } | {
+        labelPosition: import("../../properties-panel/props-builder.js").Prop<"top", true>;
+        labelWidth?: undefined;
+    }))))) & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        collapseWhenInvisible: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, false>;
+    }, "inputType" | "minimumFractionDigits" | "maximumFractionDigits" | "stepper" | "stepSize"> & {
+        stepper: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        stepSize: import("../../properties-panel/props-builder.js").Prop<number, true>;
+        minimumFractionDigits: import("../../properties-panel/props-builder.js").Prop<number, true>;
+        maximumFractionDigits: import("../../properties-panel/props-builder.js").Prop<number, true>;
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true>;
+    } & Omit<{
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, false>;
+    }, "maxLength" | "minLength" | "inputType"> & {
+        minLength: import("../../properties-panel/props-builder.js").Prop<number, false>;
+        maxLength: import("../../properties-panel/props-builder.js").Prop<number, false>;
+        inputType: import("../../properties-panel/props-builder.js").Prop<string, true>;
+    } & {
+        errorMessagePlacement: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true>;
+        customValidationRule: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        customErrorMessage: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        isDisabled: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        isRequired: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        onTextChanged: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onSubmit: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onFocus: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onFocusOut: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+    meta: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        text: import("../../properties-panel/props-builder.js").Prop<string | undefined, false>;
+        isTouched: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+    }>;
+    derived: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        value: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        validationErrors: import("../../properties-panel/props-builder.js").Prop<any, true>;
+        isValid: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        showError: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+    }>;
+}>>;

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

@@ -0,0 +1,60 @@
+import { NumericInput, TextArea } 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> {
+    textareaRef: React.RefObject<TextArea>;
+    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;
+    onDebouncedValueChange: import("lodash").DebouncedFunc<(value: any) => void>;
+    getInputDomElement: () => HTMLInputElement | HTMLTextAreaElement | null | undefined;
+    ensureFocus: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    formatNumber: (value: string) => string;
+    valueWithPrecision: (value: string | number) => string;
+    onTextChange: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onNumberChange: (_: number, valueAsString: string) => void;
+    getIcon(inputType: InputType): "search" | "envelope" | "phone" | undefined;
+    getType(inputType: InputType): "text" | "search" | "email" | "password";
+    onKeyDownTextArea: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    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 textAreaInputComponent;
+    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,101 @@
+import { Section, Prop } from "../../properties-panel/props-builder.js";
+import type { CurrencyCodeDisplayType } from "./types.js";
+import type { IconPosition } from "../../icons/constants.js";
+import type { TextStyleWithVariant } from "@superblocksteam/library-shared/types";
+export declare const propertiesDefinition: {
+    general: Section<(Record<string, Prop<any, any>> & ({
+        label: Prop<string, true>;
+    } & (Omit<{
+        inputType: Prop<string, true>;
+    }, "inputType" | "currency" | "numberFormatting" | "currencyCodeDisplay"> & ({
+        inputType: Prop<string, true>;
+        numberFormatting: Prop<"unformatted" | NonNullable<"compact" | "standard" | "scientific" | "engineering" | undefined>, true>;
+        currency?: undefined;
+        currencyCodeDisplay?: undefined;
+    } | {
+        inputType: Prop<string, true>;
+        numberFormatting: Prop<"unformatted" | NonNullable<"compact" | "standard" | "scientific" | "engineering" | undefined>, true>;
+        currency: Prop<string, true>;
+        currencyCodeDisplay: Prop<CurrencyCodeDisplayType, true>;
+    })))) & {
+        defaultValue: Prop<string, true>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        labelPosition: Prop<"left" | "top", true>;
+        labelStyle: Prop<TextStyleWithVariant, true>;
+        placeholderText: Prop<string, true>;
+        textStyle: Prop<TextStyleWithVariant, true>;
+        backgroundColor: Prop<string, true>;
+        border: Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true>;
+        borderRadius: Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true>;
+        icon: Prop<string, false>;
+        iconPosition: Prop<IconPosition, true>;
+    } & Omit<{
+        inputType: Prop<string, false>;
+    }, "inputType" | "multiline"> & {
+        inputType: Prop<string, true>;
+        multiline: Prop<boolean, true>;
+    } & {
+        loadingAnimation: Prop<boolean, true>;
+    }>;
+    layout: Section<(Record<string, Prop<any, any>> & {
+        padding: Prop<import("@superblocksteam/library-shared/types").Spacing, true>;
+    } & ({
+        maxHeight?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minHeight?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        maxWidth?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minWidth?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        width: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+        height: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    } & ({
+        margin: Prop<unknown, true>;
+    } & (Omit<{
+        labelPosition: Prop<"left" | "top", false>;
+    }, "labelPosition" | "labelWidth"> & ({
+        labelPosition: Prop<"left", true>;
+        labelWidth: Prop<import("@superblocksteam/library-shared").Dim, true>;
+    } | {
+        labelPosition: Prop<"top", true>;
+        labelWidth?: undefined;
+    }))))) & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+    }>;
+    interaction: Section<Record<string, Prop<any, any>> & Omit<{
+        inputType: Prop<string, false>;
+    }, "inputType" | "minimumFractionDigits" | "maximumFractionDigits" | "stepper" | "stepSize"> & {
+        stepper: Prop<boolean, true>;
+        stepSize: Prop<number, true>;
+        minimumFractionDigits: Prop<number, true>;
+        maximumFractionDigits: Prop<number, true>;
+        inputType: Prop<string, true>;
+    } & Omit<{
+        inputType: Prop<string, false>;
+    }, "maxLength" | "minLength" | "inputType"> & {
+        minLength: Prop<number, false>;
+        maxLength: Prop<number, false>;
+        inputType: Prop<string, true>;
+    } & {
+        errorMessagePlacement: Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true>;
+        customValidationRule: Prop<string, true>;
+        customErrorMessage: Prop<string, true>;
+        isDisabled: Prop<boolean, true>;
+        isRequired: Prop<boolean, true>;
+    }>;
+    events: Section<Record<string, Prop<any, any>> & {
+        onTextChanged: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onSubmit: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onFocus: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onFocusOut: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+    meta: Section<Record<string, Prop<any, any>> & {
+        text: Prop<string | undefined, false>;
+        isTouched: Prop<boolean, true>;
+    }>;
+    derived: Section<Record<string, Prop<any, any>> & {
+        value: Prop<string, true>;
+        validationErrors: Prop<any, true>;
+        isValid: Prop<boolean, true>;
+        showError: Prop<boolean, true>;
+    }>;
+};

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;

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

@@ -0,0 +1,45 @@
+import type { InputTypes, CurrencyCodeDisplayTypes } from "./constants.js";
+import type { propertiesDefinition } from "./props.js";
+import type { InternalProps } from "../../properties-panel/props-builder.js";
+import type { IconName, Intent } from "@blueprintjs/core";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { Padding, PerSideBorder, PerCornerBorderRadius } from "@superblocksteam/library-shared/types";
+export type InputWidgetProps = InternalProps<typeof propertiesDefinition>;
+export interface InputGroupStylingProps {
+    border?: PerSideBorder;
+    fallbackBorderColor: string;
+    borderRadius?: PerCornerBorderRadius;
+    fallbackBorderRadius: Dim<"px" | "%">;
+    borderColorOnHover: string;
+    defaultBorderWidth: Dim<"px">;
+    padding?: Padding;
+}
+export type InputComponentProps = Pick<InputWidgetProps, "inputType" | "numberFormatting" | "isDisabled" | "backgroundColor" | "border" | "labelWidth" | "multiline" | "label" | "stepper" | "stepSize" | "onSubmit" | "isTouched" | "onFocusOut" | "onFocus" | "isValid" | "minimumFractionDigits" | "maximumFractionDigits" | "preventFormattingWhileTyping" | "defaultValue" | "isInvalid" | "isLoading" | "icon" | "iconPosition" | "currency" | "currencyCodeDisplay" | "minLength" | "maxLength" | "errorMessagePlacement" | "showError" | "isFocused" | "isRequired"> & {
+    placeholder: string;
+    value: string;
+    inputGroupStylingProps: InputGroupStylingProps;
+    disableDebounce?: boolean;
+    autoFocus?: boolean;
+    widgetType: string;
+    disableNewLineOnPressEnterKey?: boolean;
+    inputClassName?: string;
+    showStepper?: boolean;
+    inputStyleOverride?: React.CSSProperties;
+    iconTop?: number;
+    vertical?: boolean;
+    iconSize?: number;
+    errorMessages?: string[];
+    labelClassName: string;
+    labelStyleOverride?: React.CSSProperties;
+    intent?: Intent;
+    leftIcon?: IconName;
+    sourceId: string;
+    growVertically?: boolean;
+    numLines?: number;
+    labelRef?: React.RefObject<HTMLLabelElement>;
+    onValueChange: (value: string) => void;
+    onFocusChange: (focusState: boolean) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+};
+export type InputType = (typeof InputTypes)[keyof typeof InputTypes];
+export type CurrencyCodeDisplayType = (typeof CurrencyCodeDisplayTypes)[keyof typeof CurrencyCodeDisplayTypes];

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

@@ -0,0 +1,15 @@
+import type { InputGroupStylingProps, InputType, InputWidgetProps } from "./types.js";
+import type { TextStyleWithVariant } from "@superblocksteam/library-shared/types";
+export declare const useStyles: (props: InputWidgetProps, text: string) => any;
+export declare const useLabelClassName: ({ labelStyle, isLoading, isDisabled, }: InputWidgetProps) => string;
+export declare const isNumericInput: (inputType: InputType) => boolean;
+export declare const useInputClassNames: ({ isInvalid, isDisabled, isLoading, inputType, textStyle, withStyledBorders, }: Pick<InputWidgetProps, "isInvalid" | "isDisabled" | "isLoading" | "inputType" | "textStyle"> & {
+    withStyledBorders?: boolean;
+}) => string;
+export declare const sanitizeNumericInputValue: (value: number | string, isPercentInput: boolean) => string;
+export declare const useIconTop: ({ border, padding, textStyle, multiline, backgroundColor, iconHeight, inputHeight, }: Pick<InputWidgetProps, "border" | "padding" | "textStyle" | "multiline" | "backgroundColor" | "iconHeight" | "inputHeight">) => number;
+export declare const useInputIconSize: ({ textStyle, }: {
+    textStyle?: TextStyleWithVariant;
+}) => number;
+export declare const useInputGroupStylingProps: (props: InputWidgetProps) => InputGroupStylingProps;
+export declare const useConditionalProps: (props: InputWidgetProps) => Partial<InputWidgetProps>;

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

@@ -0,0 +1,3 @@
+import type { KeyValueComponentProps } from "../types.js";
+export declare const PropertyKeyWrapperClass: string;
+export declare const useKeyClassNames: (keyProps?: KeyValueComponentProps["keyProps"]) => string;

package/dist-types/lib/user-facing/components/key-value/components/property-key.d.ts

@@ -0,0 +1,7 @@
+import type { KeyValueComponentProps, KeyValueProperty } from "../types.js";
+export declare const KeyValuePropertyKey: ({ property, style, keyProps, iconSize, }: {
+    property: KeyValueProperty;
+    style?: React.CSSProperties;
+    keyProps?: KeyValueComponentProps["keyProps"];
+    iconSize?: number;
+}) => import("react").JSX.Element;

package/dist-types/lib/user-facing/components/key-value/components/property-value.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { TypographyProps } from "../../../themes/typeography/use-typography-styling.js";
+import type { KeyValueComponentProps, KeyValueProperty } from "../types.js";
+import type { UserAccessibleTheme } from "@superblocksteam/library-shared/types";
+export declare const KeyValuePropertyValue: (props: {
+    property: KeyValueProperty;
+    data: Record<string, unknown>;
+    iconSize?: number;
+    valueStyles?: TypographyProps;
+    linkStyles?: TypographyProps;
+    theme: UserAccessibleTheme;
+} & Pick<KeyValueComponentProps, "valueProps" | "width" | "height">) => React.JSX.Element;

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

@@ -0,0 +1,6 @@
+import type { KeyValueComponentProps } from "../types.js";
+export declare const ValueContentWrapperClass: string;
+export declare const ValueWrapperClass: string;
+export declare const ImageWrapperClass: string;
+export declare const TagCellWrapperClass: string;
+export declare const useValueClassNames: (valueProps: KeyValueComponentProps["valueProps"]) => string;

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

@@ -0,0 +1,7 @@
+import { KeyValuePropertyType } from "./types.js";
+import type { PerSideBorder } from "@superblocksteam/shared";
+export declare const KEY_VALUE_WIDGET_PROPERTY_TYPES: {
+    label: string;
+    value: KeyValuePropertyType;
+}[];
+export declare const DEFAULT_BORDER_OBJECT: PerSideBorder;

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

@@ -0,0 +1 @@
+export declare function getData(props: any): Record<string, unknown>;

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

@@ -0,0 +1,39 @@
+/**
+ * TODO:
+ * Add possibility to add arguments to component inputs
+ * Add default values based on current property values
+ */
+export declare const SbKeyValue: import("react").FC<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>> & {
+        sourceData: import("../../properties-panel/props-builder.js").Prop<Record<string, unknown>, false>;
+        properties: import("../../properties-panel/props-builder.js").Prop<Record<string, import("./types.js").KeyValueProperty>, true>;
+        propertiesOrder: import("../../properties-panel/props-builder.js").Prop<string[], true>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        "keyProps.position": import("../../properties-panel/props-builder.js").Prop<"left" | "top", true>;
+        "keyProps.keyStyle": import("../../properties-panel/props-builder.js").Prop<any, false>;
+        "keyProps.textWrap": import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        "valueProps.valueStyle": import("../../properties-panel/props-builder.js").Prop<any, false>;
+        "valueProps.textWrap": import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        "styleProps.backgroundColor": import("../../properties-panel/props-builder.js").Prop<string, false>;
+        "styleProps.border": import("../../properties-panel/props-builder.js").Prop<any, false>;
+        "styleProps.borderRadius": import("../../properties-panel/props-builder.js").Prop<any, false>;
+        "styleProps.divider": import("../../properties-panel/props-builder.js").Prop<any, true>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        collapseWhenInvisible: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+        keyProps: import("../../properties-panel/props-builder.js").Prop<any, true>;
+        "keyProps.width": import("../../properties-panel/props-builder.js").Prop<any, false>;
+        "valueProps.position": import("../../properties-panel/props-builder.js").Prop<"left" | "right", true>;
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    }>;
+    derived: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        data: import("../../properties-panel/props-builder.js").Prop<Record<string, unknown>, true>;
+    }>;
+}>>;

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

@@ -0,0 +1,2 @@
+import type { KeyValueComponentProps } from "./types.js";
+export declare const KeyValueComponent: (props: KeyValueComponentProps) => import("react").JSX.Element;

package/dist-types/lib/user-facing/components/key-value/properties-props.d.ts

@@ -0,0 +1,45 @@
+import { Prop, Section } from "../../properties-panel/props-builder.js";
+import { KeyValuePropertyType } from "./types.js";
+import type { IconPosition } from "../../icons/constants.js";
+import type { UnionVariant } from "../../properties-panel/props-builder.js";
+export declare const keyValuePropertiesDefinition: {
+    general: Section<((((Record<string, Prop<any, any>> & ({
+        id: Prop<string, true>;
+    } & (Omit<{
+        isDerived: Prop<boolean, true>;
+    }, "key" | "isDerived"> & ({
+        isDerived: Prop<true, true>;
+        key: Prop<string, true>;
+    } | {
+        isDerived: Prop<false, true>;
+        key: Prop<string, true>;
+    })))) & {
+        displayedKey: Prop<string, true>;
+    }) & Omit<{
+        isDerived: Prop<boolean, true>;
+    }, "isDerived" | "computedValue"> & {
+        isDerived: Prop<true, true>;
+        computedValue: Prop<string, true>;
+    }) & Omit<{
+        type: Prop<KeyValuePropertyType, true>;
+    }, "type"> & UnionVariant<{
+        type: Prop<KeyValuePropertyType, false>;
+    }>) & {
+        isVisible: Prop<boolean, true>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        "keyProps.icon": Prop<string, true>;
+        "keyProps.iconPosition": Prop<IconPosition, true>;
+        "valueProps.icon": Prop<string, true>;
+        "valueProps.iconPosition": Prop<IconPosition, true>;
+    } & Omit<{
+        type: Prop<KeyValuePropertyType, false>;
+    }, "type"> & UnionVariant<{
+        type: Prop<KeyValuePropertyType, false>;
+    }>>;
+    eventHandlers: Section<Record<string, Prop<any, any>> & Omit<{
+        type: Prop<KeyValuePropertyType, false>;
+    }, "type"> & UnionVariant<{
+        type: Prop<KeyValuePropertyType, false>;
+    }>>;
+};

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

@@ -0,0 +1,38 @@
+import { Dim } from "@superblocksteam/library-shared";
+import { Prop } from "../../properties-panel/props-builder.js";
+import { Section } from "../../properties-panel/props-builder.js";
+import type { KeyValueProperty } from "./types.js";
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any>> & {
+        sourceData: Prop<Record<string, unknown>, false>;
+        properties: Prop<Record<string, KeyValueProperty>, true>;
+        propertiesOrder: Prop<string[], true>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        "keyProps.position": Prop<"left" | "top", true>;
+        "keyProps.keyStyle": Prop<any, false>;
+        "keyProps.textWrap": Prop<boolean, true>;
+        "valueProps.valueStyle": Prop<any, false>;
+        "valueProps.textWrap": Prop<boolean, true>;
+        "styleProps.backgroundColor": Prop<string, false>;
+        "styleProps.border": Prop<any, false>;
+        "styleProps.borderRadius": Prop<any, false>;
+        "styleProps.divider": Prop<any, true>;
+    }>;
+    layout: Section<Record<string, Prop<any, any>> & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+        keyProps: Prop<any, true>;
+        "keyProps.width": Prop<any, false>;
+        "valueProps.position": Prop<"left" | "right", true>;
+        maxHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        maxWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        width: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+        height: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    }>;
+    derived: Section<Record<string, Prop<any, any>> & {
+        data: Prop<Record<string, unknown>, true>;
+    }>;
+};

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

@@ -0,0 +1,22 @@
+import { Dim } from "@superblocksteam/library-shared";
+import type { KeyValueComponentProps } from "./types.js";
+import type { DimModes } from "@superblocksteam/library-shared";
+import type { UserAccessibleTheme } from "@superblocksteam/library-shared/types";
+import type { Typographies } from "@superblocksteam/library-shared/types";
+import type React from "react";
+export declare const DEFAULT_KEY_VALUE_WIDGET_KEY_STYLE_VARIANT: keyof Typographies;
+export declare const DEFAULT_KEY_VALUE_WIDGET_VALUE_STYLE_VARIANT: keyof Typographies;
+export declare const createCssVariables: ({ theme, styleProps, keyWidth, }: {
+    theme: UserAccessibleTheme;
+    styleProps: KeyValueComponentProps["styleProps"];
+    keyWidth?: Dim<DimModes>;
+}) => React.CSSProperties & {
+    [key: `--${string}`]: string;
+};
+export declare const CanvasSpacingClass: string;
+export declare const KeyValueComponentClass: string;
+export declare const KeyValueEntryClass: string;
+export declare const useLabelStyles: (keyProps: KeyValueComponentProps["keyProps"], theme: UserAccessibleTheme) => import("../../themes/typeography/use-typography-styling.js").TypographyProps;
+export declare const useInputStyles: (valueProps: KeyValueComponentProps["valueProps"], theme: UserAccessibleTheme) => import("../../themes/typeography/use-typography-styling.js").TypographyProps;
+export declare const useLinkStyles: (valueProps: KeyValueComponentProps["valueProps"], theme: UserAccessibleTheme) => import("../../themes/typeography/use-typography-styling.js").TypographyProps;
+export declare const useEntryClassNames: (keyProps: KeyValueComponentProps["keyProps"]) => string;