form-page-builder 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,534 @@
+import * as react from 'react';
+import * as lucide_react from 'lucide-react';
+
+declare const ICON_LIBRARY: {
+    Type: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Mail: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Phone: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Hash: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Lock: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    AlignLeft: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    ChevronDown: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Circle: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    CheckSquare: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    ListChecks: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    ToggleLeft: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Calendar: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Clock: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    User: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    MapPin: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Building2: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Globe: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    CreditCard: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    FileText: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Star: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Flag: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Home: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    Briefcase: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+};
+type IconKey = keyof typeof ICON_LIBRARY;
+
+type FieldType = "paragraph" | "image" | "input" | "textarea" | "select" | "radio" | "checkboxGroup" | "checkbox" | "toggle";
+
+declare const CHROME: {
+    en: {
+        contentBlocks: string;
+        formFields: string;
+        addingTo: string;
+        properties: string;
+        selectFieldHint: string;
+        label: string;
+        hideLabel: string;
+        inputType: string;
+        content: string;
+        headingStyle: string;
+        typography: string;
+        style: string;
+        align: string;
+        color: string;
+        imageUrl: string;
+        imageUrlHelper: string;
+        altText: string;
+        linkOptional: string;
+        shape: string;
+        placeholder: string;
+        maxLength: string;
+        noLimit: string;
+        minValue: string;
+        maxValue: string;
+        options: string;
+        addOption: string;
+        defaultValue: string;
+        defaultChecked: string;
+        checked: string;
+        unchecked: string;
+        none: string;
+        requiredField: string;
+        layout: string;
+        width: string;
+        full: string;
+        labelPosition: string;
+        above: string;
+        inline: string;
+        verticalAlign: string;
+        top: string;
+        middle: string;
+        bottom: string;
+        icon: string;
+        showIcon: string;
+        deleteField: string;
+        build: string;
+        preview: string;
+        newForm: string;
+        myForms: string;
+        save: string;
+        viewJson: string;
+        saving: string;
+        saved: string;
+        saveFailed: string;
+        startNewForm: string;
+        openSavedForm: string;
+        saveToLibraryTitle: string;
+        sectionTitlePlaceholder: (n: number) => string;
+        noFieldsInSection: string;
+        addSection: string;
+        moveUp: string;
+        moveDown: string;
+        duplicate: string;
+        delete: string;
+        deleteSection: string;
+        required: string;
+        formJson: string;
+        copy: string;
+        copied: string;
+        nothingSaved: string;
+        updated: string;
+        open: string;
+        saveForm: string;
+        formName: string;
+        saveToLibrary: string;
+        loadingDraft: string;
+        current: string;
+        customColor: string;
+        fieldsCount: (n: number) => string;
+        formSettings: string;
+        submitLabel: string;
+        submitMode: string;
+        combined: string;
+        perSection: string;
+        settings: string;
+        fieldTypeInput: string;
+        fieldTypeTextarea: string;
+        fieldTypeSelect: string;
+        fieldTypeRadio: string;
+        fieldTypeCheckboxGroup: string;
+        fieldTypeCheckbox: string;
+        fieldTypeToggle: string;
+        fieldTypeParagraph: string;
+        fieldTypeImage: string;
+        subtypeText: string;
+        subtypeEmail: string;
+        subtypePhone: string;
+        subtypeNumber: string;
+        subtypePassword: string;
+        subtypeDate: string;
+        subtypeTime: string;
+        shapeSquare: string;
+        shapeCircle: string;
+        shapeBanner: string;
+        tagBody: string;
+        tagCaption: string;
+        submitSectionTitle: string;
+        submitStyle: string;
+        buttonSize: string;
+        theme: string;
+        primaryColor: string;
+        pageBackground: string;
+        maxWidthPx: string;
+        reset: string;
+        deviceLaptop: string;
+        deviceTablet: string;
+        deviceMobile: string;
+        untitledField: string;
+        optionSeed: (n: number) => string;
+        spacing: string;
+        spacingPagePadding: string;
+        spacingCanvasPadding: string;
+        spacingSectionGap: string;
+        spacingFieldGap: string;
+        spacingToolbarPadding: string;
+        spacingPanelPadding: string;
+        spacingTicketPadding: string;
+    };
+    ja: {
+        contentBlocks: string;
+        formFields: string;
+        addingTo: string;
+        properties: string;
+        selectFieldHint: string;
+        label: string;
+        hideLabel: string;
+        inputType: string;
+        content: string;
+        headingStyle: string;
+        typography: string;
+        style: string;
+        align: string;
+        color: string;
+        imageUrl: string;
+        imageUrlHelper: string;
+        altText: string;
+        linkOptional: string;
+        shape: string;
+        placeholder: string;
+        maxLength: string;
+        noLimit: string;
+        minValue: string;
+        maxValue: string;
+        options: string;
+        addOption: string;
+        defaultValue: string;
+        defaultChecked: string;
+        checked: string;
+        unchecked: string;
+        none: string;
+        requiredField: string;
+        layout: string;
+        width: string;
+        full: string;
+        labelPosition: string;
+        above: string;
+        inline: string;
+        verticalAlign: string;
+        top: string;
+        middle: string;
+        bottom: string;
+        icon: string;
+        showIcon: string;
+        deleteField: string;
+        build: string;
+        preview: string;
+        newForm: string;
+        myForms: string;
+        save: string;
+        viewJson: string;
+        saving: string;
+        saved: string;
+        saveFailed: string;
+        startNewForm: string;
+        openSavedForm: string;
+        saveToLibraryTitle: string;
+        sectionTitlePlaceholder: (n: number) => string;
+        noFieldsInSection: string;
+        addSection: string;
+        moveUp: string;
+        moveDown: string;
+        duplicate: string;
+        delete: string;
+        deleteSection: string;
+        required: string;
+        formJson: string;
+        copy: string;
+        copied: string;
+        nothingSaved: string;
+        updated: string;
+        open: string;
+        saveForm: string;
+        formName: string;
+        saveToLibrary: string;
+        loadingDraft: string;
+        current: string;
+        customColor: string;
+        fieldsCount: (n: number) => string;
+        formSettings: string;
+        submitLabel: string;
+        submitMode: string;
+        combined: string;
+        perSection: string;
+        settings: string;
+        fieldTypeInput: string;
+        fieldTypeTextarea: string;
+        fieldTypeSelect: string;
+        fieldTypeRadio: string;
+        fieldTypeCheckboxGroup: string;
+        fieldTypeCheckbox: string;
+        fieldTypeToggle: string;
+        fieldTypeParagraph: string;
+        fieldTypeImage: string;
+        subtypeText: string;
+        subtypeEmail: string;
+        subtypePhone: string;
+        subtypeNumber: string;
+        subtypePassword: string;
+        subtypeDate: string;
+        subtypeTime: string;
+        shapeSquare: string;
+        shapeCircle: string;
+        shapeBanner: string;
+        tagBody: string;
+        tagCaption: string;
+        submitSectionTitle: string;
+        submitStyle: string;
+        buttonSize: string;
+        theme: string;
+        primaryColor: string;
+        pageBackground: string;
+        maxWidthPx: string;
+        reset: string;
+        deviceLaptop: string;
+        deviceTablet: string;
+        deviceMobile: string;
+        untitledField: string;
+        optionSeed: (n: number) => string;
+        spacing: string;
+        spacingPagePadding: string;
+        spacingCanvasPadding: string;
+        spacingSectionGap: string;
+        spacingFieldGap: string;
+        spacingToolbarPadding: string;
+        spacingPanelPadding: string;
+        spacingTicketPadding: string;
+    };
+};
+type ChromeShape = typeof CHROME.en;
+
+declare const DEFAULT_STRINGS: {
+    en: {
+        submit: string;
+        selectPlaceholder: string;
+        requiredError: string;
+        invalidEmail: string;
+        invalidPhone: string;
+        fixErrors: string;
+        submittedTitle: string;
+        submittedBody: string;
+        addFieldsHint: string;
+        close: string;
+        tooLong: (n: number) => string;
+        tooSmall: (n: number) => string;
+        tooLarge: (n: number) => string;
+    };
+    ja: {
+        submit: string;
+        selectPlaceholder: string;
+        requiredError: string;
+        invalidEmail: string;
+        invalidPhone: string;
+        fixErrors: string;
+        submittedTitle: string;
+        submittedBody: string;
+        addFieldsHint: string;
+        close: string;
+        tooLong: (n: number) => string;
+        tooSmall: (n: number) => string;
+        tooLarge: (n: number) => string;
+    };
+};
+type StringsShape = typeof DEFAULT_STRINGS.en;
+
+interface LanguageOption {
+    code: string;
+    label: string;
+}
+
+interface LocalizedString {
+    en: string;
+    [lang: string]: string | undefined;
+}
+interface Option {
+    label: LocalizedString;
+    value: string;
+}
+type WidthOption = "1/3" | "1/2" | "1/1";
+type VerticalAlign = "top" | "middle" | "bottom";
+type LabelPosition = "top" | "inline";
+interface BaseField {
+    id: string;
+    type: FieldType;
+    label: LocalizedString;
+    hideLabel: boolean;
+    width: WidthOption;
+    verticalAlign: VerticalAlign;
+    labelPosition: LabelPosition;
+    showIcon: boolean;
+    displayIcon: IconKey;
+    required?: boolean;
+}
+interface InputField extends BaseField {
+    type: "input";
+    inputType: "text" | "email" | "phone" | "number" | "password" | "date" | "time";
+    placeholder: LocalizedString;
+    maxLength?: number | null;
+    min?: number | null;
+    max?: number | null;
+    defaultValue: string;
+    required: boolean;
+}
+interface TextareaField extends BaseField {
+    type: "textarea";
+    placeholder: LocalizedString;
+    maxLength?: number | null;
+    defaultValue: string;
+    required: boolean;
+}
+interface SelectField extends BaseField {
+    type: "select";
+    options: Option[];
+    defaultValue: string;
+    required: boolean;
+}
+interface RadioField extends BaseField {
+    type: "radio";
+    options: Option[];
+    defaultValue: string;
+    required: boolean;
+}
+interface CheckboxGroupField extends BaseField {
+    type: "checkboxGroup";
+    options: Option[];
+    defaultValue: string[];
+    required: boolean;
+}
+interface CheckboxField extends BaseField {
+    type: "checkbox";
+    defaultValue: boolean;
+    required: boolean;
+}
+interface ToggleField extends BaseField {
+    type: "toggle";
+    defaultValue: boolean;
+    required: boolean;
+}
+interface ParagraphField extends BaseField {
+    type: "paragraph";
+    content: LocalizedString;
+    tag: "h1" | "h2" | "h3" | "p" | "caption";
+    fontSize: "sm" | "md" | "lg" | "xl";
+    fontWeight: "normal" | "bold";
+    fontStyle: "normal" | "italic";
+    textAlign: "left" | "center" | "right";
+    color: string;
+}
+interface ImageField extends BaseField {
+    type: "image";
+    src: string;
+    alt: LocalizedString;
+    link: string;
+    shape: "square" | "circle" | "banner";
+}
+type FormField = InputField | TextareaField | SelectField | RadioField | CheckboxGroupField | CheckboxField | ToggleField | ParagraphField | ImageField;
+/**
+ * Flat, fully-optional patch type for updateField/updateOption call sites.
+ * A strict `Partial<FormField>` doesn't typecheck for cross-type shallow
+ * merges (e.g. `defaultValue: string` vs `boolean` collapses to `never`),
+ * so mutation call sites use this instead of the discriminated union.
+ */
+interface FieldPatch {
+    label?: LocalizedString;
+    hideLabel?: boolean;
+    width?: WidthOption;
+    verticalAlign?: VerticalAlign;
+    labelPosition?: LabelPosition;
+    showIcon?: boolean;
+    displayIcon?: IconKey;
+    required?: boolean;
+    inputType?: InputField["inputType"];
+    placeholder?: LocalizedString;
+    maxLength?: number | null;
+    min?: number | null;
+    max?: number | null;
+    options?: Option[];
+    defaultValue?: string | boolean | string[];
+    content?: LocalizedString;
+    tag?: ParagraphField["tag"];
+    fontSize?: ParagraphField["fontSize"];
+    fontWeight?: ParagraphField["fontWeight"];
+    fontStyle?: ParagraphField["fontStyle"];
+    textAlign?: ParagraphField["textAlign"];
+    color?: string;
+    src?: string;
+    alt?: LocalizedString;
+    link?: string;
+    shape?: ImageField["shape"];
+}
+interface SubmitStyle {
+    color: string;
+    size: "sm" | "md" | "lg";
+}
+interface Section {
+    id: string;
+    title: LocalizedString;
+    background: string;
+    collapsed: boolean;
+    submitStyle: SubmitStyle | null;
+    fields: FormField[];
+}
+interface DocumentFields {
+    title: LocalizedString;
+    submitLabel: LocalizedString;
+    submitMode: "combined" | "perSection";
+    submitStyle: SubmitStyle;
+    themeOverrides: ThemeOverrides;
+    sections: Section[];
+}
+/** Shape used only for the "View JSON" export (stamped with a version). */
+interface FormDocument extends DocumentFields {
+    version: 4;
+}
+interface SavedFormMeta {
+    id: string;
+    title: string;
+    updatedAt: number;
+}
+interface ThemeLayout {
+    maxWidth: number;
+    pagePadding: number;
+    canvasPadding: number;
+    sectionGap: number;
+    fieldGap: number;
+    toolbarPadding: number;
+    panelPadding: number;
+    ticketPadding: number;
+}
+interface Theme {
+    primary: string;
+    primarySoft: string;
+    danger: string;
+    dangerSoft: string;
+    ink: string;
+    muted: string;
+    border: string;
+    surface: string;
+    canvas: string;
+    pageBackground: string;
+    layout: ThemeLayout;
+}
+type ThemeOverrides = Partial<Omit<Theme, "layout">> & {
+    layout?: Partial<ThemeLayout>;
+};
+interface StorageAdapter {
+    get(key: string): Promise<string | null>;
+    set(key: string, value: string): Promise<void>;
+    delete(key: string): Promise<void>;
+}
+interface FormBuilderProps {
+    theme?: Partial<Theme>;
+    language?: string;
+    languages?: LanguageOption[];
+    strings?: Record<string, Partial<StringsShape>>;
+    chrome?: Record<string, Partial<ChromeShape>>;
+    themeEditable?: boolean;
+    storage?: StorageAdapter;
+}
+
+declare function FormBuilder({ theme: themeOverrideProp, language: languageOverride, languages, strings: stringsOverride, chrome: chromeOverride, themeEditable, storage: storageProp, }?: FormBuilderProps): react.JSX.Element;
+
+/**
+ * Default StorageAdapter, backed by window.localStorage. Availability is
+ * checked inside each method (not once at module load) so the same module
+ * behaves correctly whether it runs during SSR (no window) or later on the
+ * client, within the same process.
+ */
+declare const localStorageAdapter: StorageAdapter;
+
+export { type CheckboxField, type CheckboxGroupField, type ChromeShape, type DocumentFields, type FieldPatch, type FieldType, FormBuilder, type FormBuilderProps, type FormDocument, type FormField, type ImageField, type InputField, type LanguageOption, type LocalizedString, type Option, type ParagraphField, type RadioField, type SavedFormMeta, type Section, type SelectField, type StorageAdapter, type StringsShape, type SubmitStyle, type TextareaField, type Theme, type ThemeLayout, type ThemeOverrides, type ToggleField, FormBuilder as default, localStorageAdapter };