@superblocksteam/library 2.0.3-next.71

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

@@ -0,0 +1,106 @@
+import type { IconPosition } from "../../icons/constants.js";
+import type { ButtonVariant } from "../button/props.js";
+import type { TagDisplayConfig } from "../table/types.js";
+import type { ImageSize } from "../table/types.js";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { DimModes } from "@superblocksteam/library-shared";
+import type { WidgetLabelPosition } from "@superblocksteam/library-shared/props";
+import type { TextStyleWithVariant, UserAccessibleTheme } from "@superblocksteam/library-shared/types";
+import type { ColoredDimensionStyle, Padding, PerCornerBorderRadius, PerSideBorder } from "@superblocksteam/library-shared/types";
+type BaseProperty = {
+    id: string;
+    key: string;
+    displayedKey?: string;
+    type: string;
+    displayedValue?: unknown;
+    isVisible: boolean;
+    keyProps?: {
+        icon?: string;
+        iconPosition?: IconPosition;
+    };
+    valueProps?: {
+        icon?: string;
+        iconPosition?: IconPosition;
+    };
+    typeSpecificProps?: {
+        buttonLabel?: string;
+        isDisabled?: boolean;
+        buttonStyle?: ButtonVariant;
+        buttonLabelColor?: string;
+        onClick?: () => Promise<void>;
+        buttonBorderColor?: string;
+        buttonBackgroundColor?: string;
+        currency?: string;
+        notation?: Intl.NumberFormatOptions["notation"] | "unformatted";
+        minimumFractionDigits?: number;
+        maximumFractionDigits?: number;
+        linkLabel?: string;
+        openInNewTab?: boolean;
+        openImageUrl?: boolean;
+        imageSize?: ImageSize;
+        imageBorderRadius?: Dim<DimModes>;
+        dateInputFormat?: string;
+        dateOutputFormat?: string;
+        manageTimezone?: boolean;
+        timezone?: string;
+        displayTimezone?: string;
+        textWrap?: boolean;
+        tagDisplayConfig?: Record<string, TagDisplayConfig>;
+        booleanStyleFalse?: string;
+    };
+};
+type DerivedProperty = BaseProperty & {
+    computedValue: unknown;
+    isDerived: true;
+};
+type PrimaryProperty = BaseProperty & {
+    isDerived: false;
+};
+export type KeyValueProperty = PrimaryProperty | DerivedProperty;
+interface StyleProps {
+    border?: PerSideBorder;
+    borderRadius?: PerCornerBorderRadius;
+    backgroundColor?: string;
+    padding?: Padding;
+    spacing: Dim<DimModes>;
+    divider?: ColoredDimensionStyle;
+}
+export declare enum KeyValuePropertyType {
+    TEXT = "text",
+    NUMBER = "number",
+    CURRENCY = "currency",
+    PERCENTAGE = "percentage",
+    IMAGE = "image",
+    VIDEO = "video",
+    DATE = "date",
+    BUTTON = "button",
+    LINK = "link",
+    BOOLEAN = "boolean",
+    TAGS = "tags",
+    EMAIL = "email"
+}
+export interface KeyValueComponentProps {
+    theme: UserAccessibleTheme;
+    widgetId: string;
+    properties: Record<string, KeyValueProperty>;
+    cachedProperties?: Record<string, KeyValueProperty>;
+    propertiesOrder: string[];
+    isVisible?: boolean;
+    styleProps: StyleProps;
+    keyProps?: {
+        textStyle?: TextStyleWithVariant;
+        position?: WidgetLabelPosition;
+        width?: Dim<DimModes>;
+        textWrap?: boolean;
+    };
+    valueProps?: {
+        textStyle?: TextStyleWithVariant;
+        position?: WidgetLabelPosition;
+        textWrap?: boolean;
+    };
+    width?: Dim<DimModes>;
+    height?: Dim<DimModes>;
+    isLoading?: boolean;
+    sourceData?: Record<string, unknown>;
+}
+export {};

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

@@ -0,0 +1,11 @@
+import type { KeyValueProperty } from "./types.js";
+import type { TagsColorAssignment } from "../table/types.js";
+export declare const getStringValue: (text: unknown) => undefined | string;
+export declare const toNumericValue: (text: string) => string | number;
+export declare const getValueByType: (property: KeyValueProperty, data: Record<string, unknown>) => string | boolean;
+export declare const toReadableKey: (key: string) => string;
+export declare const getProperties: (data: Record<string, unknown>, currentProperties?: Record<string, KeyValueProperty>, cachedProperties?: Record<string, KeyValueProperty>) => Record<string, KeyValueProperty>;
+export declare const getPropertiesOrder: (properties: Record<string, KeyValueProperty>, propertiesOrder: string[]) => string[];
+export declare const getDefaultProperty: (key: string) => KeyValueProperty;
+export declare const isDefaultProperty: (property: KeyValueProperty) => boolean;
+export declare const getTagsColorAssignment: (tagValues: string[]) => TagsColorAssignment;

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

@@ -0,0 +1,8 @@
+export type ModalSize = "EXTRA_SMALL" | "SMALL" | "MEDIUM" | "LARGE" | "FULLSCREEN";
+export declare const MODAL_COLUMNS = 96;
+export declare const MODAL_ROW_HEIGHT = 12;
+export declare const MODAL_PERIMETER_GAP = 16;
+export declare const MODAL_LEGACY_COLUMNS = 40;
+export declare const MODAL_BORDER_RADIUS = 4;
+export declare const MODAL_WIDTH_PRESETS: Record<ModalSize, number>;
+export declare const MODAL_ROWS_PRESETS: Record<ModalSize, number>;

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

@@ -0,0 +1,49 @@
+import { Dim } from "@superblocksteam/library-shared";
+import type { ContainerLayout } from "../../component-base/constants.js";
+/**
+ * TODO:
+ * - close all other modal when current modal is opened
+ */
+export declare const SbModal: import("react").FC<import("../../properties-panel/props-builder.js").ExternalProps<{
+    layout: import("../../properties-panel/props-builder.js").Section<((Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & ((Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<ContainerLayout, true>;
+    }, "layout" | "rows" | "columns" | "rowSize"> & {
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"freeform", true>;
+        readonly columns: import("../../properties-panel/props-builder.js").Prop<number, true>;
+        readonly rows: import("../../properties-panel/props-builder.js").Prop<number, false>;
+        readonly rowSize: import("../../properties-panel/props-builder.js").Prop<number, false>;
+    }) | (Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<ContainerLayout, true>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/constants.js").VerticalAlignment, true>;
+        readonly horizontalAlign: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/constants.js").HorizontalAlignment, true>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"vertical", true>;
+    }) | (Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<ContainerLayout, true>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/constants.js").VerticalAlignment, true>;
+        readonly horizontalAlign: import("../../properties-panel/props-builder.js").Prop<import("../../component-base/constants.js").HorizontalAlignment, true>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"horizontal", true>;
+    }))) & {
+        spacing: import("../../properties-panel/props-builder.js").Prop<Dim<"px">, true>;
+    }) & {
+        padding: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").Spacing, true>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        backgroundColor: import("../../properties-panel/props-builder.js").Prop<string, false>;
+        border: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerSideBorder, false>;
+        borderRadius: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, false>;
+        hasBackdrop: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        widthPreset: import("../../properties-panel/props-builder.js").Prop<import("./constants.js").ModalSize, true>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        canOutsideClickClose: 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>> & {
+        onOpen: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onClose: 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>> & {
+        isOpen: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+    }>;
+}>>;

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

@@ -0,0 +1,36 @@
+import { Dim } from "@superblocksteam/library-shared";
+import React from "react";
+import type { ModalSize } from "./constants.js";
+import type { ContainerLayout, VerticalAlignment, HorizontalAlignment } from "../../component-base/constants.js";
+import type { ComputeStyleProps } from "../../themes/generatedStyles/generate-component-styles.js";
+import type { SbElement, SbInstance } from "@superblocksteam/library-shared/types";
+import type { ReactNode } from "react";
+type ModalComponentProps = {
+    name?: string;
+    isOpen: boolean;
+    onCancel: (e: any) => void;
+    children: ReactNode;
+    className?: string;
+    canOutsideClickClose: boolean;
+    hasBackdrop: boolean;
+    widthPreset?: ModalSize;
+    heightPreset?: ModalSize;
+    modalStyle?: React.CSSProperties;
+    styleProps: ComputeStyleProps;
+    width?: Dim<"px">;
+    height?: Dim<"px">;
+    sourceId: SbElement;
+    instanceId: SbInstance;
+    isEditing: boolean;
+    layout: ContainerLayout;
+    horizontalAlign?: HorizontalAlignment;
+    verticalAlign?: VerticalAlignment;
+    spacing: Dim<"px">;
+    columns?: number;
+    rows?: number;
+    rowSize?: number;
+};
+/** the modal is open/close by setting isOpen to true/false
+ **/
+declare const ModalComponent: (props: ModalComponentProps) => React.JSX.Element;
+export default ModalComponent;

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

@@ -0,0 +1,46 @@
+import { Prop, Section } from "../../properties-panel/props-builder.js";
+import type { ModalSize } from "./constants.js";
+import type { PerCornerBorderRadius, PerSideBorder } from "@superblocksteam/library-shared/types";
+export declare const propertiesDefinition: {
+    layout: Section<((Record<string, Prop<any, any>> & ((Omit<{
+        layout: Prop<import("../../component-base/constants.js").ContainerLayout, true>;
+    }, "layout" | "rows" | "columns" | "rowSize"> & {
+        readonly layout: Prop<"freeform", true>;
+        readonly columns: Prop<number, true>;
+        readonly rows: Prop<number, false>;
+        readonly rowSize: Prop<number, false>;
+    }) | (Omit<{
+        layout: Prop<import("../../component-base/constants.js").ContainerLayout, true>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: Prop<import("../../component-base/constants.js").VerticalAlignment, true>;
+        readonly horizontalAlign: Prop<import("../../component-base/constants.js").HorizontalAlignment, true>;
+        readonly layout: Prop<"vertical", true>;
+    }) | (Omit<{
+        layout: Prop<import("../../component-base/constants.js").ContainerLayout, true>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: Prop<import("../../component-base/constants.js").VerticalAlignment, true>;
+        readonly horizontalAlign: Prop<import("../../component-base/constants.js").HorizontalAlignment, true>;
+        readonly layout: Prop<"horizontal", true>;
+    }))) & {
+        spacing: Prop<import("@superblocksteam/library-shared").Dim<"px">, true>;
+    }) & {
+        padding: Prop<import("@superblocksteam/library-shared/types").Spacing, true>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        backgroundColor: Prop<string, false>;
+        border: Prop<PerSideBorder, false>;
+        borderRadius: Prop<PerCornerBorderRadius, false>;
+        hasBackdrop: Prop<boolean, true>;
+        widthPreset: Prop<ModalSize, true>;
+    }>;
+    interaction: Section<Record<string, Prop<any, any>> & {
+        canOutsideClickClose: Prop<boolean, true>;
+    }>;
+    events: Section<Record<string, Prop<any, any>> & {
+        onOpen: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onClose: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+    meta: Section<Record<string, Prop<any, any>> & {
+        isOpen: Prop<boolean, true>;
+    }>;
+};

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

@@ -0,0 +1,18 @@
+export declare const SbPage: import("react").FC<import("../../properties-panel/props-builder.js").ExternalProps<{
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        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>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        collapseWhenInvisible: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        onLoad: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+}>>;

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

@@ -0,0 +1,19 @@
+import { Prop, Section } from "../../properties-panel/props-builder.js";
+export declare const propertiesDefinition: {
+    layout: Section<Record<string, Prop<any, any>> & {
+        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>;
+    } & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+    }>;
+    events: Section<Record<string, Prop<any, any>> & {
+        onLoad: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+};

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

@@ -0,0 +1,2 @@
+import type { SbScopeInstance } from "../../state/types.js";
+export declare function registerPage<T>(Component: React.FC<T>, scope: SbScopeInstance<any>): import("react").FC<import("react").JSX.IntrinsicAttributes & T>;

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

@@ -0,0 +1,19 @@
+export declare const SbSection: import("react").FC<import("../../properties-panel/props-builder.js").ExternalProps<{
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        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>;
+    } & {
+        sticky: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        collapseWhenInvisible: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        backgroundColor: import("../../properties-panel/props-builder.js").Prop<string, false>;
+        border: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true>;
+    }>;
+}>>;

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

@@ -0,0 +1,22 @@
+import { Dim } from "@superblocksteam/library-shared";
+import { Prop } from "../../properties-panel/props-builder.js";
+import { Section } from "../../properties-panel/props-builder.js";
+export declare const propertiesDefinition: {
+    layout: Section<Record<string, Prop<any, any>> & {
+        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>;
+    } & {
+        sticky: Prop<boolean, true>;
+    } & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        backgroundColor: Prop<string, false>;
+        border: Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true>;
+    }>;
+};

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

@@ -0,0 +1,15 @@
+export declare const SbSlideout: import("react").FC<import("../../properties-panel/props-builder.js").ExternalProps<{
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        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>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        collapseWhenInvisible: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+    }>;
+}>>;

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

@@ -0,0 +1,15 @@
+export declare const propertiesDefinition: {
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        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>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        collapseWhenInvisible: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+    }>;
+};

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

@@ -0,0 +1,60 @@
+import { Dim } from "@superblocksteam/library-shared";
+import React from "react";
+import { Prop, Section } from "../../properties-panel/props-builder.js";
+import type { HorizontalAlignment, VerticalAlignment } from "../../component-base/constants.js";
+import type { InternalPropsWithOptional } from "../../properties-panel/props-builder.js";
+import type { DimModes } from "@superblocksteam/library-shared";
+declare const _propertiesDefinitionVStack: {
+    layout: Section<Record<string, Prop<any, any>> & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+        shouldScrollContents: Prop<boolean, true>;
+        margin: Prop<unknown, true>;
+        maxHeight?: Prop<Dim<DimModes>, false> | undefined;
+        minHeight?: Prop<Dim<DimModes>, false> | undefined;
+        maxWidth?: Prop<Dim<DimModes>, false> | undefined;
+        minWidth?: Prop<Dim<DimModes>, false> | undefined;
+        width: Prop<Dim<DimModes>, false>;
+        height: Prop<Dim<DimModes>, false>;
+        padding: Prop<import("@superblocksteam/library-shared/types").Spacing, true>;
+        spacing: Prop<Dim<"px">, true>;
+        verticalAlign: Prop<VerticalAlignment, true>;
+        horizontalAlign: Prop<HorizontalAlignment, true>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        backgroundColor: Prop<string, false>;
+        border: Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true>;
+        borderRadius: Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true>;
+    }>;
+};
+declare const _propertiesDefinitionHStack: {
+    layout: Section<Record<string, Prop<any, any>> & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+        shouldScrollContents: Prop<boolean, true>;
+        margin: Prop<unknown, true>;
+        maxHeight?: Prop<Dim<DimModes>, false> | undefined;
+        minHeight?: Prop<Dim<DimModes>, false> | undefined;
+        maxWidth?: Prop<Dim<DimModes>, false> | undefined;
+        minWidth?: Prop<Dim<DimModes>, false> | undefined;
+        width: Prop<Dim<DimModes>, false>;
+        height: Prop<Dim<DimModes>, false>;
+        padding: Prop<import("@superblocksteam/library-shared/types").Spacing, true>;
+        spacing: Prop<Dim<"px">, true>;
+        verticalAlign: Prop<VerticalAlignment, true>;
+        horizontalAlign: Prop<HorizontalAlignment, true>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        backgroundColor: Prop<string, false>;
+        border: Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true>;
+        borderRadius: Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true>;
+    }>;
+};
+type OptionalProps = "verticalAlign" | "horizontalAlign" | "margin" | "padding" | "spacing" | "backgroundColor" | "border" | "borderRadius" | "shouldScrollContents";
+type InternalVStackProps = InternalPropsWithOptional<typeof _propertiesDefinitionVStack, OptionalProps>;
+type InternalHStackProps = InternalPropsWithOptional<typeof _propertiesDefinitionHStack, OptionalProps> & {
+    [key: string]: any;
+};
+export declare const InternalVStack: (props: InternalVStackProps) => React.JSX.Element;
+export declare const InternalHStack: (props: InternalHStackProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+import type { Typographies } from "@superblocksteam/shared";
+export declare const DEFAULT_SWITCH_WIDGET_LABEL_TEXT_STYLE_VARIANT: keyof Typographies;
+export declare const SWITCH_LABEL_GAP = 8;

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

@@ -0,0 +1,44 @@
+export declare const SbSwitch: 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>;
+        defaultChecked: import("../../properties-panel/props-builder.js").Prop<boolean, 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" | "right", true>;
+        labelStyle: import("../../properties-panel/props-builder.js").Prop<any, false>;
+        loadingAnimation: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        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>;
+    } & {
+        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>> & {
+        customValidationRule: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        customErrorMessage: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        isRequired: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+        isDisabled: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        errorMessagePlacement: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        onSwitchChange: 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>> & {
+        isTouched: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        isChecked: 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<boolean, 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/switch/props.d.ts

@@ -0,0 +1,45 @@
+import { Prop, Section } from "../../properties-panel/props-builder.js";
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any>> & {
+        label: Prop<string, true>;
+        defaultChecked: Prop<boolean, true>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        labelPosition: Prop<"left" | "right", true>;
+        labelStyle: Prop<any, false>;
+        loadingAnimation: Prop<boolean, false>;
+    }>;
+    layout: Section<Record<string, Prop<any, any>> & {
+        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>;
+    } & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+    }>;
+    interaction: Section<Record<string, Prop<any, any>> & {
+        customValidationRule: Prop<string, true>;
+        customErrorMessage: Prop<string, true>;
+        isRequired: Prop<boolean, false>;
+        isDisabled: Prop<boolean, true>;
+        errorMessagePlacement: Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true>;
+    }>;
+    events: Section<Record<string, Prop<any, any>> & {
+        onSwitchChange: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+    meta: Section<Record<string, Prop<any, any>> & {
+        isTouched: Prop<boolean, true>;
+        isChecked: Prop<boolean, true>;
+    }>;
+    derived: Section<Record<string, Prop<any, any>> & {
+        value: Prop<boolean, true>;
+        validationErrors: Prop<any, true>;
+        isValid: Prop<boolean, true>;
+        showError: Prop<boolean, true>;
+    }>;
+};

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { SwitchComponentProps } from "./types.js";
+declare const SwitchComponent: React.MemoExoticComponent<({ label, labelPosition, isChecked, isDisabled, isRequired, onSwitchChange, isLoading, labelProps, errorMessagePlacement, errorMessages, labelWidth, showError, isFitContentHeight, }: SwitchComponentProps) => React.JSX.Element>;
+export default SwitchComponent;

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

@@ -0,0 +1,19 @@
+import type { TypographyProps } from "../../themes/typeography/use-typography-styling.js";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { ErrorMessagePlacement, WidgetLabelPosition } from "@superblocksteam/library-shared/props";
+export interface SwitchComponentProps {
+    label: string;
+    labelPosition: WidgetLabelPosition;
+    labelWidth?: Dim<"fit" | "fill">;
+    isChecked: boolean;
+    isDisabled: boolean;
+    isRequired: boolean;
+    onSwitchChange: (isChecked: boolean) => void;
+    isLoading: boolean;
+    labelProps: TypographyProps;
+    validationErrors?: Record<string, string>;
+    errorMessagePlacement: ErrorMessagePlacement;
+    showError?: boolean;
+    errorMessages: string[];
+    isFitContentHeight?: boolean;
+}