@superblocksteam/library 2.0.33 → 2.0.34-next.1

package/dist-types/lib/user-facing/component-base/error/error-utils.d.ts

@@ -0,0 +1,13 @@
+export declare const useErrorMessages: (messages: string | string[] | undefined) => string | string[];
+export declare const getErrorMessagesList: (errors?: Record<string, string>, showError?: boolean) => string[];
+export declare const getDerivedPropertiesWithErrors: ({ value, validationErrors, ...other }: {
+    value?: string;
+    validationErrors: string;
+} & {
+    [key: string]: string;
+}) => {
+    showError: string;
+    isValid: string;
+    value?: string | undefined;
+    validationErrors: string;
+};

package/dist-types/lib/user-facing/component-base/error/widget-errors-wrapper.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { Props as ErrorInlineMessageProps } from "./error-inline-message.jsx";
+import type { ErrorMessagePlacement } from "@superblocksteam/library-shared/props";
+interface Props {
+    messages?: string | string[];
+    children: (inlineError: React.ReactNode, onTargetMouseOver?: () => void, onTargetMouseLeave?: () => void) => JSX.Element[] | JSX.Element;
+    errorMessagePlacement: ErrorMessagePlacement;
+    sourceId: string;
+    showError: boolean;
+    customTarget?: boolean;
+    inlineErrorProps?: Partial<ErrorInlineMessageProps>;
+    isFocused?: boolean;
+}
+declare const WidgetErrorsWrapper: (props: Props) => JSX.Element;
+export default WidgetErrorsWrapper;

package/dist-types/lib/user-facing/component-base/error-boundary.d.ts

@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import type { ErrorInfo, ReactNode } from "react";
+interface Props {
+    children: ReactNode;
+    header?: string;
+}
+interface State {
+    hasError: boolean;
+    error?: Error;
+}
+declare class ErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(e: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    reset(): void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+}
+export default ErrorBoundary;

package/dist-types/lib/user-facing/component-base/sb-component.d.ts

@@ -0,0 +1,21 @@
+import type { Dim } from "@superblocksteam/library-shared";
+import type { SbElement, SbInstance, WithBindingIdentifier } from "@superblocksteam/library-shared/types";
+export type SbComponentProps<El = HTMLElement> = {
+    name?: string;
+    bind?: WithBindingIdentifier;
+    width?: Dim;
+    height?: Dim;
+    minWidth?: Dim;
+    minHeight?: Dim;
+    maxWidth?: Dim;
+    maxHeight?: Dim;
+    sourceId?: SbElement;
+    marginLeft?: Dim<"columns">;
+    marginTop?: Dim<"rows">;
+    constraintTop?: string | string[];
+    /**
+     * undefined means auto, true means always loading, false means never loading
+     */
+    loading?: boolean;
+    reportInstanceId?: (instanceId: SbInstance) => void;
+} & Omit<React.HTMLAttributes<El>, "height" | "width" | "marginLeft" | "marginTop">;

package/dist-types/lib/user-facing/component-base/styles/button-styles.d.ts

@@ -0,0 +1,8 @@
+import type { UserAccessibleTheme, PerSideBorder } from "@superblocksteam/library-shared/types";
+export type ButtonStyle = "primary" | "secondary" | "tertiary" | "success" | "danger";
+export type ButtonLikeLinkStyle = ButtonStyle | "LINK";
+export declare const getButtonThemeDefaultTextColor: (theme: UserAccessibleTheme, buttonStyle?: ButtonStyle) => string;
+export declare const getButtonThemeDefaultBackgroundColor: (theme: UserAccessibleTheme, buttonStyle?: ButtonStyle) => string;
+export declare const PRIMARY_BUTTON_BORDER_OBJECT: (this: any) => PerSideBorder;
+export declare const SECONDARY_BUTTON_BORDER_OBJECT: (this: any) => PerSideBorder;
+export declare const getDefaultBorderObject: (this: any) => PerSideBorder;

package/dist-types/lib/user-facing/component-base/styles/hover-styles.d.ts

@@ -0,0 +1,10 @@
+export declare const getHoverCss: (disabledSelector: string) => string;
+export declare const generateHoverVariableAssignmentStyleObject: ({ borderStyleObject, backgroundColor, fallbackBackgroundColor, textColor, fallbackTextColor, }: {
+    borderStyleObject: React.CSSProperties;
+    backgroundColor?: string;
+    fallbackBackgroundColor?: string;
+    textColor?: string;
+    fallbackTextColor?: string;
+}) => {
+    [key: `--${string}`]: string;
+};

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

@@ -0,0 +1,2 @@
+import type { UserAccessibleTheme, PerSideBorder } from "@superblocksteam/library-shared/types";
+export declare const generateInputBorderOnHoverColor: (border: PerSideBorder | undefined, defaultColor: string, themeColors: UserAccessibleTheme["colors"]) => string;

package/dist-types/lib/user-facing/component-base/use-passthrough-props.d.ts

@@ -0,0 +1,6 @@
+import { type CSSProperties } from "react";
+type PassthroughProps = Record<string, unknown> & {
+    style?: CSSProperties;
+};
+declare const usePassthroughProps: (props: Record<string, unknown>) => PassthroughProps;
+export default usePassthroughProps;

package/dist-types/lib/user-facing/component-base/utils/format-utils.d.ts

@@ -0,0 +1,37 @@
+import moment from "moment-timezone";
+export declare const CurrencyList: string[];
+export declare const ISO_DATE_FORMAT = "YYYY-MM-DDTHH:mm:ss.SSSSZ";
+export declare const backwardsCompatibleMomentFormatter: (format?: string, fallback?: string) => string;
+export type NumberFormatOption = {
+    label: string;
+    value: Intl.NumberFormatOptions["notation"] | "unformatted";
+};
+export declare const NUMBER_FORMATTING_OPTIONS: NumberFormatOption[];
+export declare const DATE_INPUT_FORMATS: ({
+    label: string;
+    value: undefined;
+} | {
+    label: string;
+    value: string;
+})[];
+export declare const DEFAULT_DATE_OUTPUT_FORMAT = "MM-DD-YYYY HH:mm";
+export declare const DATE_OUTPUT_FORMATS: Array<{
+    label: string;
+    value: string | undefined;
+    valueDatePart: string | undefined;
+}>;
+export declare const TIMEZONE_OPTIONS: Array<{
+    label: string;
+    value: undefined | string;
+}>;
+export declare function datePartOfOutputFormat(outputFormat: string | undefined): string | undefined;
+export declare function parseDateStr(value: string, inputFormat: string | undefined, ignoreInvalid?: boolean): moment.Moment | undefined;
+export declare function formatMoment(date: moment.Moment | undefined, outputFormat?: string, _inputFormat?: string): string;
+export declare const formatIncludesTimezone: (dateFormat: string) => boolean;
+export declare const formatDate: (value: unknown, inputFormat?: string, outputFormat?: string, inputTimezone?: string, outputTimezone?: string) => string;
+export declare const formatNumber: (value?: string | number | null, notation?: Intl.NumberFormatOptions["notation"] | "unformatted", minimumFractionDigits?: number | string, maximumFractionDigits?: number | string) => string;
+export declare const formatPercentage: (value?: string | number | null, minimumFractionDigits?: number | string, maximumFractionDigits?: number | string) => string;
+export declare const formatCurrency: (value?: string | number | null, currency?: string, notation?: Intl.NumberFormatOptions["notation"] | "unformatted", minimumFractionDigits?: number, maximumFractionDigits?: number) => string;
+export declare function parseImageURLValue(value: any): string[] | undefined;
+export declare const isValidUrl: (urlString: string) => boolean;
+export declare const isRelativeURL: (url: string) => boolean;

package/dist-types/lib/user-facing/component-base/utils/format-utils.test.d.ts

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

package/dist-types/lib/user-facing/component-base/utils/input-validation.d.ts

@@ -0,0 +1,20 @@
+export type ValidationErrors = {
+    required?: string;
+    minMax?: string;
+    customRule?: string;
+    email?: string;
+    number?: string;
+    url?: string;
+};
+export declare const getInputValidationErrors: (props: {
+    text?: string;
+    inputType?: string;
+    required?: boolean;
+    customValidationRule?: string;
+    customErrorMessage?: string;
+    maxLength?: number;
+    minLength?: number;
+    emailRegex?: RegExp;
+}) => ValidationErrors;
+export declare const getErrorMessages: (errors: ValidationErrors) => string[];
+export declare const hasErrors: (errors: ValidationErrors) => boolean;

package/dist-types/lib/user-facing/component-base/utils/input-validation.test.d.ts

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

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

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

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

@@ -0,0 +1,81 @@
+export declare const Button: 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, false, 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>;
+    } & {
+        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>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        variant: import("../../properties-panel/props-builder.js").Prop<import("./props.js").ButtonVariant, 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>;
+        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>;
+        horizontalAlign: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").HorizontalAlign, true, undefined>;
+        loading: 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>> & {
+        isDisabled: 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>> & {
+        label: import("../../properties-panel/props-builder.js").Prop<string, false, 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>;
+    } & {
+        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>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        variant: import("../../properties-panel/props-builder.js").Prop<import("./props.js").ButtonVariant, 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>;
+        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>;
+        horizontalAlign: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").HorizontalAlign, true, undefined>;
+        loading: 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>> & {
+        isDisabled: 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/button/props.d.ts

@@ -0,0 +1,46 @@
+import { Dim } from "@superblocksteam/library-shared";
+import { Section, Prop } from "../../properties-panel/props-builder.js";
+import type { IconPosition } from "../../icons/constants.js";
+import type { HorizontalAlign } from "@superblocksteam/library-shared/props";
+export type ButtonVariant = "primary" | "secondary" | "tertiary";
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any, undefined>> & {
+        label: Prop<string, false, undefined>;
+    }>;
+    layout: Section<Record<string, Prop<any, any, undefined>> & {
+        padding: Prop<import("@superblocksteam/library-shared/types").Spacing, true, undefined>;
+    } & {
+        maxHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        width: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+        height: Prop<Dim<import("@superblocksteam/library-shared").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>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any, undefined>> & {
+        variant: Prop<ButtonVariant, true, undefined>;
+        icon: Prop<string, false, undefined>;
+        iconPosition: Prop<IconPosition, 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>;
+        horizontalAlign: Prop<HorizontalAlign, true, undefined>;
+        loading: Prop<boolean, true, undefined>;
+    }>;
+    interaction: Section<Record<string, Prop<any, any, undefined>> & {
+        isDisabled: 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/checkbox/checkbox-component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { CheckboxComponentProps } from "./types.js";
+declare class CheckboxComponent extends React.PureComponent<CheckboxComponentProps> {
+    containerRef: React.RefObject<HTMLDivElement>;
+    getLabelClass(textStyleVariant: string | undefined): string;
+    handleCheckChange: () => void;
+    render(): React.JSX.Element;
+}
+export default CheckboxComponent;

package/dist-types/lib/user-facing/components/checkbox/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/checkbox/index.d.ts

@@ -0,0 +1,93 @@
+export declare const Checkbox: 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>;
+        defaultChecked: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        labelStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, 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>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        customValidationRule: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        customErrorMessage: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        required: import("../../properties-panel/props-builder.js").Prop<boolean, false, undefined>;
+        isDisabled: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        errorMessagePlacement: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onCheckChange: 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>> & {
+        isTouched: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        isChecked: 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<boolean, true, undefined>;
+        validationErrors: import("../../properties-panel/props-builder.js").Prop<any, 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>;
+        defaultChecked: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        labelStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, 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>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        customValidationRule: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        customErrorMessage: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        required: import("../../properties-panel/props-builder.js").Prop<boolean, false, undefined>;
+        isDisabled: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        errorMessagePlacement: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onCheckChange: 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>> & {
+        isTouched: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        isChecked: 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<boolean, true, undefined>;
+        validationErrors: import("../../properties-panel/props-builder.js").Prop<any, 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/checkbox/props.d.ts

@@ -0,0 +1,49 @@
+import { Dim } from "@superblocksteam/library-shared";
+import { Prop, Section } from "../../properties-panel/props-builder.js";
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any, undefined>> & {
+        label: Prop<string, true, undefined>;
+        defaultChecked: Prop<boolean, true, undefined>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any, undefined>> & {
+        labelStyle: Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        loading: Prop<boolean, true, undefined>;
+    }>;
+    layout: Section<Record<string, Prop<any, any, undefined>> & {
+        maxHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        width: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+        height: Prop<Dim<import("@superblocksteam/library-shared").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>;
+    }>;
+    interaction: Section<Record<string, Prop<any, any, undefined>> & {
+        customValidationRule: Prop<string, true, undefined>;
+        customErrorMessage: Prop<string, true, undefined>;
+        required: Prop<boolean, false, undefined>;
+        isDisabled: Prop<boolean, true, undefined>;
+        errorMessagePlacement: Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true, undefined>;
+    }>;
+    events: Section<Record<string, Prop<any, any, undefined>> & {
+        onCheckChange: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+    meta: Section<Record<string, Prop<any, any, undefined>> & {
+        isTouched: Prop<boolean, true, undefined>;
+        isChecked: Prop<boolean, true, undefined>;
+    }>;
+    derived: Section<Record<string, Prop<any, any, undefined>> & {
+        value: Prop<boolean, true, undefined>;
+        validationErrors: Prop<any, true, undefined>;
+        isValid: Prop<boolean, true, undefined>;
+        showError: Prop<boolean, true, undefined>;
+    }>;
+};

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

@@ -0,0 +1,19 @@
+import type { TypographyProps } from "../../themes/typeography/use-typography-styling.js";
+import type { ErrorMessagePlacement } from "@superblocksteam/library-shared/props";
+export interface CheckboxComponentProps {
+    name: string;
+    label: string;
+    isChecked: boolean;
+    onCheckChange: (isChecked: boolean) => void;
+    isLoading: boolean;
+    isDisabled?: boolean;
+    isValid?: boolean;
+    required?: boolean;
+    labelProps?: TypographyProps;
+    minHeight?: number;
+    errorMessages?: string[];
+    errorMessagePlacement: ErrorMessagePlacement;
+    showError: boolean;
+    isFitContentWidth?: boolean;
+    isFitContentHeight?: boolean;
+}

package/dist-types/lib/user-facing/components/column/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/column/index.d.ts

@@ -0,0 +1,73 @@
+import { Dim } from "@superblocksteam/library-shared";
+/**
+ * TODO:
+ * - disable setting height related props in prop panel and code
+ * - add column resizer
+ *
+ */
+export declare const getDefaultSectionChildren: () => never[];
+export declare const Column: import("../../../internal-details/sb-wrapper.jsx").ChainableComponent<{
+    contents: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        children: import("../../properties-panel/props-builder.js").Prop<any, false, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<((Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & ((Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/constants.js").ContainerLayout, true, undefined>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "space-around" | "space-between" | "bottom" | "top", true, undefined>;
+        readonly horizontalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "left" | "right", true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"vertical", true, undefined>;
+    }) | (Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/constants.js").ContainerLayout, true, undefined>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "bottom" | "top", true, undefined>;
+        readonly horizontalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "space-around" | "space-between" | "left" | "right", true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"horizontal", true, undefined>;
+    }) | (Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/constants.js").ContainerLayout, true, undefined>;
+    }, "columns" | "layout" | "rowHeight"> & {
+        readonly columns: import("../../properties-panel/props-builder.js").Prop<number, true, undefined>;
+        readonly rowHeight: import("../../properties-panel/props-builder.js").Prop<Dim<"px">, true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"freeform", true, undefined>;
+    }))) & {
+        shouldScrollContents: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }) & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true, 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>;
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+}, import("../../properties-panel/props-builder.js").ExternalProps<{
+    contents: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        children: import("../../properties-panel/props-builder.js").Prop<any, false, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<((Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & ((Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/constants.js").ContainerLayout, true, undefined>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "space-around" | "space-between" | "bottom" | "top", true, undefined>;
+        readonly horizontalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "left" | "right", true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"vertical", true, undefined>;
+    }) | (Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/constants.js").ContainerLayout, true, undefined>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "bottom" | "top", true, undefined>;
+        readonly horizontalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "space-around" | "space-between" | "left" | "right", true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"horizontal", true, undefined>;
+    }) | (Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/constants.js").ContainerLayout, true, undefined>;
+    }, "columns" | "layout" | "rowHeight"> & {
+        readonly columns: import("../../properties-panel/props-builder.js").Prop<number, true, undefined>;
+        readonly rowHeight: import("../../properties-panel/props-builder.js").Prop<Dim<"px">, true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"freeform", true, undefined>;
+    }))) & {
+        shouldScrollContents: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }) & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true, 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>;
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+}>>;