@superblocksteam/library 1.99.99-next.2

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,37 @@
+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;
+    dropTargetRef?: React.RefObject<HTMLElement | null>;
+};
+/** 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,13 @@
+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>;
+    }>;
+    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,15 @@
+import { Dim } from "@superblocksteam/library-shared";
+import { Prop, 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>;
+    }>;
+    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,22 @@
+export declare const SbSection: import("react").FC<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>> & {
+        columns: import("../../properties-panel/props-builder.js").Prop<string[], 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>;
+    } & {
+        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,25 @@
+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: {
+    contents: Section<Record<string, Prop<any, any>> & {
+        columns: Prop<string[], false>;
+    }>;
+    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 @@
+export {};

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/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<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
+        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<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
+        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,5 @@
+import React from "react";
+import type { SwitchComponentProps } from "./types.js";
+export declare const SWITCH_LABEL_GAP = 8;
+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;
+}