@superblocksteam/library 1.99.99-next.2

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

@@ -0,0 +1,46 @@
+import React from "react";
+import type { IconPosition } from "../../icons/constants.js";
+import type { ButtonLikeLinkStyle, ButtonStyle } from "../styles/button-styles.js";
+import type { TextAlign } from "@superblocksteam/library-shared/props";
+import type { PerSideBorder, UserAccessibleTheme, Padding, PerCornerBorderRadius } from "@superblocksteam/library-shared/types";
+import type { ReactElement } from "react";
+export interface SharedButtonProps {
+    textColor?: string;
+    backgroundColor?: string;
+    text?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    disabled?: boolean;
+    isLoadingAnimated?: boolean;
+    isLoading: boolean;
+    style?: React.CSSProperties;
+    useDynamicContrast?: boolean;
+    icon?: ReactElement | null;
+    iconPosition?: IconPosition;
+    systemIcon?: ReactElement;
+    textAlignment?: TextAlign;
+    width?: "100%" | "auto";
+    height?: "100%" | "auto";
+    maxWidth?: number;
+    minWidth?: number;
+    textProps?: {
+        textStyleVariant?: string;
+        style?: React.CSSProperties;
+    };
+    border?: PerSideBorder;
+    borderRadius?: PerCornerBorderRadius;
+    padding?: Padding;
+    theme: UserAccessibleTheme;
+    ["data-test"]?: string;
+}
+export interface ButtonProps extends SharedButtonProps {
+    buttonStyle?: ButtonStyle;
+    version?: "v1" | "v2";
+}
+export interface ButtonLikeLinkProps extends SharedButtonProps {
+    linkStyle?: ButtonLikeLinkStyle;
+    url?: string;
+    openInNewTab?: boolean;
+}
+export declare const FIT_CONTENT_PADDING = 9;
+export declare const Button: (props: ButtonProps) => React.JSX.Element;
+export declare const ButtonLikeLink: (props: ButtonLikeLinkProps) => React.JSX.Element;

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

@@ -0,0 +1,12 @@
+import React from "react";
+export declare const CheckboxInput: ({ isChecked, isDisabled, ariaLabel, isValid, onClick, isIndeterminate, id, onMouseOver, onMouseOut, }: {
+    isChecked: boolean;
+    isDisabled: boolean;
+    ariaLabel?: string;
+    isValid: boolean;
+    isIndeterminate?: boolean;
+    onClick?: (isChecked: boolean, shiftKey?: boolean) => void;
+    id?: string;
+    onMouseOver?: () => void;
+    onMouseOut?: () => void;
+}) => React.JSX.Element;

package/dist-types/lib/user-facing/component-base/components/dropdown-select.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { SelectProps } from "antd";
+declare const DropdownSelect: (props: SelectProps) => React.JSX.Element;
+export default DropdownSelect;

package/dist-types/lib/user-facing/component-base/components/dynamic-svg.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare function DynamicSVG({ iconName, color, fill, loadingAnimation, size, sizeWithUnits, disablePointerEvents, }: {
+    iconName?: string;
+    size?: number;
+    sizeWithUnits?: string;
+    color?: string;
+    fill?: boolean;
+    loadingAnimation?: boolean;
+    disablePointerEvents?: boolean;
+}): React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import React from "react";
+declare const ExpandButton: ({ isExpanded, style, onClick, disabled, }: {
+    isExpanded?: boolean;
+    onClick?: React.SVGProps<SVGSVGElement>["onClick"];
+    style?: React.SVGProps<SVGSVGElement>["style"];
+    disabled?: boolean;
+}) => React.JSX.Element;
+export default ExpandButton;

package/dist-types/lib/user-facing/component-base/components/loading-animator.d.ts

@@ -0,0 +1,4 @@
+export declare const LoadingAnimator: import("styled-components").StyledComponent<"div", any, {
+    $width: number;
+    bgColor: string;
+}, never>;

package/dist-types/lib/user-facing/component-base/components/plain-link.d.ts

@@ -0,0 +1 @@
+export declare const PlainLink: import("styled-components").StyledComponent<"a", any, {}, never>;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import type { Instance, Options, Placement, VirtualElement } from "@popperjs/core";
+export type PopperProps = {
+    zIndex: number;
+    isOpen: boolean;
+    targetNode?: Element | VirtualElement;
+    children: JSX.Element;
+    placement: Placement;
+    allowedAutoPlacements?: Placement[];
+    modifiers?: Options["modifiers"];
+    useDefaultModifiers?: boolean;
+    extraSuperblocksAttr?: string;
+    onCreate?: (instance: Instance) => void;
+    mountingNode?: Element;
+    dependencies?: any[];
+    wrapperClassName?: string;
+    dataTest?: string;
+};
+declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
+export default Popper;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import type { TextStyleWithVariant, UserAccessibleTheme, PerCornerBorderRadius, PerSideBorder } from "@superblocksteam/library-shared/types";
+interface SearchComponentProps {
+    onSearch: (value: any) => void;
+    placeholder: string;
+    value: string;
+    compact?: boolean;
+    noMargin?: boolean;
+    width?: string;
+    flexGrow?: string;
+    dataTest?: string;
+    textStyle?: TextStyleWithVariant;
+    border?: PerSideBorder;
+    borderRadius?: PerCornerBorderRadius;
+    backgroundColor?: string;
+    theme: UserAccessibleTheme;
+}
+declare const SearchComponent: (props: SearchComponentProps) => React.JSX.Element;
+export default SearchComponent;

package/dist-types/lib/user-facing/component-base/components/span-trunc-middle.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface SpanTruncMiddleProps {
+    text: string;
+}
+/** A span variant that truncates its text content in the middle (with ellipsis), if it would have otherwise overflown.
+ * The width is determined by the width of the parent element.
+ */
+export declare const SpanTruncMiddle: (props: SpanTruncMiddleProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+export declare const SwitchInput: ({ isValid, onClick, isChecked, isDisabled, }: {
+    isValid: boolean;
+    onClick?: () => void;
+    isChecked: boolean;
+    isDisabled: boolean;
+}) => import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+export type ContainerLayout = "freeform" | "vertical" | "horizontal";
+export type ContainerVariant = "none" | "card";
+export type VerticalAlignment = "top" | "center" | "bottom" | "space-between" | "space-around";
+export type HorizontalAlignment = "left" | "center" | "right" | "space-between" | "space-around";
+export declare const VERTICAL_ALIGNMENT_MAP: Record<VerticalAlignment, string>;
+export declare const HORIZONTAL_ALIGNMENT_MAP: Record<HorizontalAlignment, string>;
+export declare const GridDefaults: {
+    DEFAULT_GRID_COLUMNS: number;
+    SLIDEOUT_DEFAULT_GRID_COLUMNS: number;
+    DEFAULT_GRID_ROW_HEIGHT: number;
+    DEFAULT_GRID_COLUMN_WIDTH: number;
+    CANVAS_EXTENSION_OFFSET: number;
+    CANVAS_EXTENSION_INITIAL_LIMIT: number;
+    FILL_PARENT_DEFAULT_MIN_HEIGHT: number;
+    FILL_PARENT_DEFAULT_MIN_WIDTH_PX: number;
+    EMPTY_CONTAINER_EDIT_MODE_HEIGHT: number;
+    EMPTY_CONTAINER_EDIT_MODE_WIDTH_PX: number;
+};

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

@@ -0,0 +1,36 @@
+export declare const INLINE_ERROR_MESSAGE_HEIGHT = 18;
+export declare const GAP_BETWEEN_INPUT_AND_INLINE_ERROR_MESSAGE = 2;
+/**
+ * TODO(code-mode):
+ * - add appMode
+ * - check widget selected state and show placeholder error message
+ */
+export interface Props {
+    sourceId: string;
+    isInvalid?: boolean;
+    errorMessages?: string | string[];
+    isFocused?: boolean;
+    isTouched?: boolean;
+    isFitContentWidth?: boolean;
+    isFitContentHeight?: boolean;
+    style?: React.CSSProperties;
+    showError?: boolean;
+}
+export declare const ErrorInlineMessage: (props: Props) => import("react").JSX.Element;
+/**
+ * How to use:
+ * Wrap the input (Input, Dropdown, etc.) with InlineErrorMessage.
+ * Apply this style to the combined wrapper.
+ * Style vs Class: style is necessary when the component uses ControlGroup to override Blueprint's default styling.
+ */
+export declare const FormInputWithErrorWrapperStyle: React.CSSProperties;
+/**
+ * Use when the input grows in height to fill the parent.
+ *
+ * How to use:
+ * Wrap the input (Input, Dropdown, etc).
+ * Apply this style to the input wrapper.
+ *
+ * You might need to set the input to `height: 100%;`
+ */
+export declare const FormInputWithHeightGrowStyle: React.CSSProperties;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import type { Placement } from "@popperjs/core";
+interface Props {
+    isOpen: boolean;
+    messages: string | string[];
+    wrapperClassName?: string;
+    attachTo: Element | null | undefined;
+    placement?: Placement;
+}
+declare const ErrorTooltip: (props: Props) => React.JSX.Element | null;
+export default ErrorTooltip;

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 | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+}
+export default ErrorBoundary;

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

@@ -0,0 +1,18 @@
+import type { WithBindingIdentifier } from "../state/types";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { SbElement, SbInstance } 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;
+    reportInstanceId?: (instanceId: SbInstance) => void;
+    marginLeft?: Dim<"columns">;
+    marginTop?: Dim<"rows">;
+    constraintTop?: string | string[];
+} & Omit<React.HTMLAttributes<El>, "height" | "width" | "marginLeft" | "marginTop">;

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

@@ -0,0 +1,16 @@
+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 getButtonThemeDefaultHoverBackgroundColor: (theme: UserAccessibleTheme, buttonStyle?: ButtonStyle) => string | undefined;
+export declare const getButtonThemeDefaultHoverTextColor: (theme: UserAccessibleTheme, buttonStyle?: ButtonStyle) => string | undefined;
+export declare const getFallbackBorderColor: (buttonStyle: ButtonStyle | undefined, backgroundColor: string, themeColor: string) => string;
+export declare const getButtonBorderStyleObjectV1: ({ border, isLoadingColor, buttonStyle, isLoading, fallbackBorderColor, backgroundColorIfSet, }: {
+    border: PerSideBorder | undefined;
+    isLoadingColor: string;
+    fallbackBorderColor: string;
+    buttonStyle: ButtonStyle | undefined;
+    isLoading: boolean;
+    backgroundColorIfSet: string | undefined;
+}) => import("react").CSSProperties;

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/input-validation.d.ts

@@ -0,0 +1,17 @@
+export declare const getInputValidationErrors: (props: {
+    text: string;
+    inputType: string;
+    isRequired: boolean;
+    customValidationRule?: string;
+    customErrorMessage?: string;
+    maxLength?: number;
+    minLength?: number;
+    emailRegex?: RegExp;
+}) => {
+    required?: string;
+    minMax?: string;
+    customRule?: string;
+    email?: string;
+    number?: string;
+    url?: string;
+};

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

@@ -0,0 +1,37 @@
+export declare const SbButton: 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, false>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        padding: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").Spacing, true>;
+    } & {
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    } & {
+        margin: import("../../properties-panel/props-builder.js").Prop<unknown, true>;
+    } & {
+        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>> & {
+        variant: import("../../properties-panel/props-builder.js").Prop<import("./props.js").ButtonVariant, true>;
+        icon: import("../../properties-panel/props-builder.js").Prop<string, false>;
+        iconPosition: import("../../properties-panel/props-builder.js").Prop<import("../../icons/constants.js").IconPosition, true>;
+        textStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
+        backgroundColor: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        border: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true>;
+        borderRadius: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true>;
+        labelAlignment: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").TextAlign, true>;
+        loadingAnimation: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        isDisabled: 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>> & {
+        onClick: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+}>>;

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

@@ -0,0 +1,48 @@
+import { Dim } from "@superblocksteam/library-shared";
+import { Section, Prop } from "../../properties-panel/props-builder.js";
+import type { IconPosition } from "../../icons/constants.js";
+import type { TextAlign } from "@superblocksteam/library-shared/props";
+import type { PerSideBorder } from "@superblocksteam/library-shared/types";
+export type ButtonVariant = "primary" | "secondary" | "tertiary";
+export declare const PerSideBorderDef: () => import("../../properties-panel/props-builder.js").CompositeProp<{
+    color: Prop<string, false>;
+    width: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    style: Prop<string, false>;
+}>;
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any>> & {
+        label: Prop<string, false>;
+    }>;
+    layout: Section<Record<string, Prop<any, any>> & {
+        padding: Prop<import("@superblocksteam/library-shared/types").Spacing, true>;
+    } & {
+        maxHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        maxWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        width: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+        height: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    } & {
+        margin: Prop<unknown, true>;
+    } & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        variant: Prop<ButtonVariant, true>;
+        icon: Prop<string, false>;
+        iconPosition: Prop<IconPosition, true>;
+        textStyle: Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
+        backgroundColor: Prop<string, true>;
+        border: Prop<PerSideBorder, true>;
+        borderRadius: Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true>;
+        labelAlignment: Prop<TextAlign, true>;
+        loadingAnimation: Prop<boolean, true>;
+    }>;
+    interaction: Section<Record<string, Prop<any, any>> & {
+        isDisabled: Prop<boolean, true>;
+    }>;
+    events: Section<Record<string, Prop<any, any>> & {
+        onClick: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+};

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/index.d.ts

@@ -0,0 +1,43 @@
+export declare const SbCheckbox: 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>> & {
+        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>> & {
+        onCheckChange: 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/checkbox/props.d.ts

@@ -0,0 +1,44 @@
+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>> & {
+        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>> & {
+        onCheckChange: 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/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;
+    isRequired?: boolean;
+    labelProps?: TypographyProps;
+    minHeight?: number;
+    errorMessages?: string[];
+    errorMessagePlacement: ErrorMessagePlacement;
+    showError: boolean;
+    isFitContentWidth?: boolean;
+    isFitContentHeight?: boolean;
+}