@plaidev/karte-action-sdk 1.1.270-29177657.a375e44e → 1.1.270-29228770.05dce6ca

package/dist/components-flex/brand-kit.d.ts

@@ -9,6 +9,12 @@ export type BrandKit = {
 	color_info: string;
 	color_warning: string;
 	color_white: string;
+	color_form_field_placeholder: string;
+	color_form_field_border: string;
+	color_form_field_background: string;
+	color_form_field_focused_border?: string;
+	color_form_field_focused_background?: string;
+	color_form_field_accent?: string;
 };
 export declare const getBrandKit: (customBrandKit?: Partial<BrandKit>) => BrandKit;
 export declare const useBrandKit: () => {

package/dist/components-flex/embed/types.d.ts

@@ -0,0 +1,7 @@
+import type { CommonProps, AspectProps } from "../props.js";
+import type { Properties } from "csstype";
+export type EmbedProps = CommonProps & AspectProps & {
+	iframe?: string;
+	width?: Properties["width"];
+	height?: Properties["height"];
+};

package/dist/components-flex/form/styles.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonProps } from "src/components-flex/button/types";
+import type { PropStyles } from "../shared/types.js";
+import type { BrandKit } from "../brand-kit.js";
+import type { BrandableStyles } from "../styles.js";
+import { FormFieldProps } from "./types.js";
+export declare const getFormFieldLabelThemeStyles: (customBrandKit?: Partial<BrandKit>) => BrandableStyles<FormFieldProps>;
+export declare const FORM_FIELD_LABEL_SIZE_STYLES: PropStyles<ButtonProps, "size">;

package/dist/components-flex/form/types.d.ts

@@ -0,0 +1,116 @@
+import type { CommonProps } from "../props.js";
+import { Properties } from "csstype";
+export type FormProps = CommonProps & {
+	fields: FormField[];
+};
+export declare const FORM_FIELD_LABEL_SIZE: {
+	readonly small: "スモール";
+	readonly medium: "ミディアム";
+	readonly large: "ラージ";
+};
+export declare const FORM_FIELD_LABEL_THEME: {
+	readonly default: "デフォルト";
+	readonly gray: "グレー";
+	readonly brand: "ブランド";
+};
+export type FormFieldProps = CommonProps & {
+	fieldName?: string;
+	fieldType?: FormFieldType;
+	required?: boolean;
+	defaultValue?: string | string[];
+	// layout
+	direction?: "row" | "column";
+	gap?: Properties["rowGap"];
+	// label
+	showLabel?: boolean;
+	label?: string;
+	labelWidth?: Properties["width"];
+	labelSize?: keyof typeof FORM_FIELD_LABEL_SIZE | string;
+	labelTheme?: keyof typeof FORM_FIELD_LABEL_THEME | string;
+};
+export declare const FORM_FIELD_TYPE: {
+	readonly INPUT: "input";
+	readonly SELECT: "select";
+	readonly CHECKBOX: "checkbox";
+	readonly CHECKBOXES: "checkboxes";
+	readonly RADIOS: "radio";
+	readonly TEXTAREA: "textarea";
+};
+export type FormFieldType = (typeof FORM_FIELD_TYPE)[keyof typeof FORM_FIELD_TYPE];
+export type FormField = {
+	name: string;
+	type: FormFieldType;
+	required: boolean;
+	label: string;
+	defaultValue?: string | string[];
+};
+export declare const FORM_FIELD_VARIANT: {
+	readonly outlined: "アウトライン";
+	readonly underlined: "アンダーライン";
+	readonly filled: "塗りつぶし";
+};
+export declare const FORM_FIELD_VARIANT_FOR_CHECKER: {
+	readonly outlined: "アウトライン";
+	readonly filled: "塗りつぶし";
+};
+export type FormFieldVariant = keyof typeof FORM_FIELD_VARIANT;
+export type FormFieldVariantForChecker = keyof typeof FORM_FIELD_VARIANT_FOR_CHECKER;
+export declare const FORM_FIELD_SIZE: {
+	readonly small: "スモール";
+	readonly medium: "ミディアム";
+	readonly large: "ラージ";
+};
+export type FormFieldSize = keyof typeof FORM_FIELD_SIZE;
+export declare const FORM_INPUT_TYPE: {
+	readonly TEXT: "text";
+	readonly URL: "url";
+	readonly TEL: "tel";
+	readonly EMAIL: "email";
+};
+export type FormInputType = (typeof FORM_INPUT_TYPE)[keyof typeof FORM_INPUT_TYPE];
+export type FormInputCommonProps = {
+	placeholder?: string;
+	width?: Properties["width"];
+	variant?: FormFieldVariant;
+	size?: FormFieldSize;
+	backgroundColor?: string;
+	borderColor?: string;
+	focusedBorderColor?: string;
+	fontColor?: string;
+	placeholderColor?: string;
+};
+export type FormInputProps = FormFieldProps & FormInputCommonProps & {
+	variant?: FormFieldVariant;
+	inputType?: FormInputType;
+};
+export type FormTextareaProps = FormFieldProps & FormInputCommonProps & {
+	variant?: FormFieldVariant;
+	rows?: number;
+};
+export type FormOptionsProps = {
+	options?: {
+		label: string;
+		value: string;
+	}[];
+};
+export type FormSelectProps = FormFieldProps & FormInputCommonProps & FormOptionsProps & {
+	variant?: FormFieldVariant;
+};
+export type FormListCommonProps = FormOptionsProps & {
+	layout?: "vertical" | "horizontal" | "grid";
+	layoutGridCols?: number;
+	layoutGapY?: Properties["columnGap"];
+	layoutGapX?: Properties["rowGap"];
+	accentColor?: string;
+	borderColor?: string;
+	fontColor?: string;
+	backgroundColor?: string;
+};
+export type FormCheckboxesProps = FormFieldProps & FormListCommonProps & {
+	variant?: FormFieldVariantForChecker;
+	size?: FormFieldSize;
+};
+export type FormRadiosProps = FormFieldProps & FormListCommonProps & {
+	variant?: FormFieldVariantForChecker;
+	size?: FormFieldSize;
+};

package/dist/components-flex/form.d.ts

@@ -0,0 +1,85 @@
+import { Writable } from "svelte/store";
+import { FormFieldType } from "./form/types.js";
+export type FormStoreValue = string | string[];
+export type FormStoreState = {
+	isDirty: boolean;
+	isTouched: boolean;
+	isValid: boolean;
+	errorMessage: string | null;
+	value: FormStoreValue;
+};
+export type FormStoreValues = Record<string, FormStoreValue>;
+export type FormStoreErrorMessages = Record<string, FormStoreState["errorMessage"]>;
+export type FormStoreStates = Record<string, FormStoreState>;
+export type FormStoreSchemaInput = {
+	name: string;
+	type: FormFieldType;
+	defaultValue: string | string[];
+	required: boolean;
+};
+export type FormStoreSchema = FormStoreSchemaInput & {
+	statePath: string;
+};
+export type FormStore = {
+	schemas: FormStoreSchema[];
+	states: FormStoreStates;
+};
+/**
+* @internal
+*/
+export declare const formStore: Writable<FormStore>;
+export declare const formSubmittedValues: Writable<FormStoreValues>;
+/**
+* @public
+*/
+export declare const getFormFieldSchema: (name: string) => FormStoreSchema | undefined;
+/**
+* @public
+*/
+export declare const getFormFieldState: (name: string) => FormStoreState | undefined;
+/**
+* @public
+*/
+export declare const getFormFieldValue: (name: string) => FormStoreValue | undefined;
+/**
+* @public
+*/
+export declare const getFormValues: () => FormStoreValues;
+/**
+* @public
+*/
+export declare const getFormErrors: () => FormStoreErrorMessages;
+/**
+* @public
+*/
+export declare const setFormFieldValue: (name: string, value: any) => void;
+/**
+* @public
+*/
+export declare const setFormFieldError: (name: string, errorMessage: string | null) => void;
+/**
+* @public
+*/
+export declare const setFormFieldTouched: (name: string) => void;
+/**
+* @public
+*/
+export declare const registerFormField: (schemas: FormStoreSchemaInput | FormStoreSchemaInput[]) => void;
+/**
+* @public
+*/
+export declare const unregisterFormField: (fieldNames: string | string[]) => void;
+export declare const validateFormField: (schema: FormStoreSchema, value: FormStoreValue) => {
+	isValid: true;
+	error: undefined;
+} | {
+	isValid: false;
+	error: string;
+};
+/**
+* @public
+*/
+export declare function onSubmitForm(fn: (data: {
+	currentStateValues: any;
+	allValues: any;
+}) => void): void;

package/dist/components-flex/icon/types.d.ts

@@ -1,4 +1,5 @@
 import type { ClickableProps, CommonProps } from "../props.js";
+// @ts-ignore -- NOTE(kazupon): error TS2307: Cannot find module 'preact/src/jsx-csstype' or its corresponding type declarations
 import type { Properties } from "preact/src/jsx-csstype";
 export declare const ICON_SIZE: {
 	[key: string]: {

package/dist/components-flex/layout/types.d.ts

@@ -17,5 +17,6 @@ export type LayerLayoutProps = CommonProps & ClickableProps & OverflowProps & Bo
 	rowGap?: Properties["rowGap"];
 	columnGap?: Properties["columnGap"];
 	width?: Properties["width"];
+	maxWidth?: Properties["maxWidth"];
 	height?: Properties["height"];
 };

package/dist/components-flex/modal/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
-export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & {
+import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps, PaddingProps } from "../props.js";
+export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & PaddingProps & BackgroundProps & {
 	width?: Properties["width"];
 };

package/dist/components-flex/props.d.ts

@@ -21,13 +21,17 @@ export type CustomizeCssProps = {
 	isCustomizeCss?: boolean;
 	customizeCss?: string;
 };
+export type CustomizeAttributesProps = {
+	id?: string;
+	classNames?: string[];
+};
 export type BrandStyleProps = {
 	customBrandKit?: Partial<BrandKit>;
 };
 export type ActionTableProps = {
 	actionTableKey?: string;
 };
-export type CommonProps = MetaProps & PositionProps & CustomizeCssProps & BrandStyleProps;
+export type CommonProps = MetaProps & PositionProps & CustomizeAttributesProps & CustomizeCssProps & BrandStyleProps;
 export type ClickableProps = {
 	onClick?: OnClickOperation;
 	eventName?: string;

package/dist/components-flex/utils/obj-to-style.d.ts

@@ -1,2 +1,2 @@
 import type { Properties } from "csstype";
-export declare const objToStyle: (obj: Properties) => string;
+export declare const objToStyle: (obj: Properties | Record<string, any>) => string;

package/dist/functions.d.ts

@@ -13,6 +13,10 @@ export declare const runScript: (handlerName: string) => () => void;
 /** @internal */
 export declare const submitForm: (to: string) => () => void;
 /** @internal */
+export declare const submitFormProgress: (to: string) => () => void;
+/** @internal */
+export declare const submitFormFinal: (to: string) => () => void;
+/** @internal */
 export declare const bootChat: (hide_launcher: boolean, placement_pc: string, placement_mobile: string, horizontal_spacing_pc: number, horizontal_spacing_mobile: number, vertical_spacing_pc: number, vertical_spacing_mobile: number, theme_color: string, header_title: string, header_description: string, launcher_image: string) => () => void;
 /** @internal */
 export declare const execOnClickOperation: (onClickOperation: OnClickOperation) => void;

package/dist/hydrate/components-flex/brand-kit.d.ts

@@ -9,6 +9,12 @@ export type BrandKit = {
 	color_info: string;
 	color_warning: string;
 	color_white: string;
+	color_form_field_placeholder: string;
+	color_form_field_border: string;
+	color_form_field_background: string;
+	color_form_field_focused_border?: string;
+	color_form_field_focused_background?: string;
+	color_form_field_accent?: string;
 };
 export declare const getBrandKit: (customBrandKit?: Partial<BrandKit>) => BrandKit;
 export declare const useBrandKit: () => {

package/dist/hydrate/components-flex/embed/types.d.ts

@@ -0,0 +1,7 @@
+import type { CommonProps, AspectProps } from "../props.js";
+import type { Properties } from "csstype";
+export type EmbedProps = CommonProps & AspectProps & {
+	iframe?: string;
+	width?: Properties["width"];
+	height?: Properties["height"];
+};

package/dist/hydrate/components-flex/form/styles.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonProps } from "src/components-flex/button/types";
+import type { PropStyles } from "../shared/types.js";
+import type { BrandKit } from "../brand-kit.js";
+import type { BrandableStyles } from "../styles.js";
+import { FormFieldProps } from "./types.js";
+export declare const getFormFieldLabelThemeStyles: (customBrandKit?: Partial<BrandKit>) => BrandableStyles<FormFieldProps>;
+export declare const FORM_FIELD_LABEL_SIZE_STYLES: PropStyles<ButtonProps, "size">;

package/dist/hydrate/components-flex/form/types.d.ts

@@ -0,0 +1,116 @@
+import type { CommonProps } from "../props.js";
+import { Properties } from "csstype";
+export type FormProps = CommonProps & {
+	fields: FormField[];
+};
+export declare const FORM_FIELD_LABEL_SIZE: {
+	readonly small: "スモール";
+	readonly medium: "ミディアム";
+	readonly large: "ラージ";
+};
+export declare const FORM_FIELD_LABEL_THEME: {
+	readonly default: "デフォルト";
+	readonly gray: "グレー";
+	readonly brand: "ブランド";
+};
+export type FormFieldProps = CommonProps & {
+	fieldName?: string;
+	fieldType?: FormFieldType;
+	required?: boolean;
+	defaultValue?: string | string[];
+	// layout
+	direction?: "row" | "column";
+	gap?: Properties["rowGap"];
+	// label
+	showLabel?: boolean;
+	label?: string;
+	labelWidth?: Properties["width"];
+	labelSize?: keyof typeof FORM_FIELD_LABEL_SIZE | string;
+	labelTheme?: keyof typeof FORM_FIELD_LABEL_THEME | string;
+};
+export declare const FORM_FIELD_TYPE: {
+	readonly INPUT: "input";
+	readonly SELECT: "select";
+	readonly CHECKBOX: "checkbox";
+	readonly CHECKBOXES: "checkboxes";
+	readonly RADIOS: "radio";
+	readonly TEXTAREA: "textarea";
+};
+export type FormFieldType = (typeof FORM_FIELD_TYPE)[keyof typeof FORM_FIELD_TYPE];
+export type FormField = {
+	name: string;
+	type: FormFieldType;
+	required: boolean;
+	label: string;
+	defaultValue?: string | string[];
+};
+export declare const FORM_FIELD_VARIANT: {
+	readonly outlined: "アウトライン";
+	readonly underlined: "アンダーライン";
+	readonly filled: "塗りつぶし";
+};
+export declare const FORM_FIELD_VARIANT_FOR_CHECKER: {
+	readonly outlined: "アウトライン";
+	readonly filled: "塗りつぶし";
+};
+export type FormFieldVariant = keyof typeof FORM_FIELD_VARIANT;
+export type FormFieldVariantForChecker = keyof typeof FORM_FIELD_VARIANT_FOR_CHECKER;
+export declare const FORM_FIELD_SIZE: {
+	readonly small: "スモール";
+	readonly medium: "ミディアム";
+	readonly large: "ラージ";
+};
+export type FormFieldSize = keyof typeof FORM_FIELD_SIZE;
+export declare const FORM_INPUT_TYPE: {
+	readonly TEXT: "text";
+	readonly URL: "url";
+	readonly TEL: "tel";
+	readonly EMAIL: "email";
+};
+export type FormInputType = (typeof FORM_INPUT_TYPE)[keyof typeof FORM_INPUT_TYPE];
+export type FormInputCommonProps = {
+	placeholder?: string;
+	width?: Properties["width"];
+	variant?: FormFieldVariant;
+	size?: FormFieldSize;
+	backgroundColor?: string;
+	borderColor?: string;
+	focusedBorderColor?: string;
+	fontColor?: string;
+	placeholderColor?: string;
+};
+export type FormInputProps = FormFieldProps & FormInputCommonProps & {
+	variant?: FormFieldVariant;
+	inputType?: FormInputType;
+};
+export type FormTextareaProps = FormFieldProps & FormInputCommonProps & {
+	variant?: FormFieldVariant;
+	rows?: number;
+};
+export type FormOptionsProps = {
+	options?: {
+		label: string;
+		value: string;
+	}[];
+};
+export type FormSelectProps = FormFieldProps & FormInputCommonProps & FormOptionsProps & {
+	variant?: FormFieldVariant;
+};
+export type FormListCommonProps = FormOptionsProps & {
+	layout?: "vertical" | "horizontal" | "grid";
+	layoutGridCols?: number;
+	layoutGapY?: Properties["columnGap"];
+	layoutGapX?: Properties["rowGap"];
+	accentColor?: string;
+	borderColor?: string;
+	fontColor?: string;
+	backgroundColor?: string;
+};
+export type FormCheckboxesProps = FormFieldProps & FormListCommonProps & {
+	variant?: FormFieldVariantForChecker;
+	size?: FormFieldSize;
+};
+export type FormRadiosProps = FormFieldProps & FormListCommonProps & {
+	variant?: FormFieldVariantForChecker;
+	size?: FormFieldSize;
+};

package/dist/hydrate/components-flex/form.d.ts

@@ -0,0 +1,85 @@
+import { Writable } from "svelte/store";
+import { FormFieldType } from "./form/types.js";
+export type FormStoreValue = string | string[];
+export type FormStoreState = {
+	isDirty: boolean;
+	isTouched: boolean;
+	isValid: boolean;
+	errorMessage: string | null;
+	value: FormStoreValue;
+};
+export type FormStoreValues = Record<string, FormStoreValue>;
+export type FormStoreErrorMessages = Record<string, FormStoreState["errorMessage"]>;
+export type FormStoreStates = Record<string, FormStoreState>;
+export type FormStoreSchemaInput = {
+	name: string;
+	type: FormFieldType;
+	defaultValue: string | string[];
+	required: boolean;
+};
+export type FormStoreSchema = FormStoreSchemaInput & {
+	statePath: string;
+};
+export type FormStore = {
+	schemas: FormStoreSchema[];
+	states: FormStoreStates;
+};
+/**
+* @internal
+*/
+export declare const formStore: Writable<FormStore>;
+export declare const formSubmittedValues: Writable<FormStoreValues>;
+/**
+* @public
+*/
+export declare const getFormFieldSchema: (name: string) => FormStoreSchema | undefined;
+/**
+* @public
+*/
+export declare const getFormFieldState: (name: string) => FormStoreState | undefined;
+/**
+* @public
+*/
+export declare const getFormFieldValue: (name: string) => FormStoreValue | undefined;
+/**
+* @public
+*/
+export declare const getFormValues: () => FormStoreValues;
+/**
+* @public
+*/
+export declare const getFormErrors: () => FormStoreErrorMessages;
+/**
+* @public
+*/
+export declare const setFormFieldValue: (name: string, value: any) => void;
+/**
+* @public
+*/
+export declare const setFormFieldError: (name: string, errorMessage: string | null) => void;
+/**
+* @public
+*/
+export declare const setFormFieldTouched: (name: string) => void;
+/**
+* @public
+*/
+export declare const registerFormField: (schemas: FormStoreSchemaInput | FormStoreSchemaInput[]) => void;
+/**
+* @public
+*/
+export declare const unregisterFormField: (fieldNames: string | string[]) => void;
+export declare const validateFormField: (schema: FormStoreSchema, value: FormStoreValue) => {
+	isValid: true;
+	error: undefined;
+} | {
+	isValid: false;
+	error: string;
+};
+/**
+* @public
+*/
+export declare function onSubmitForm(fn: (data: {
+	currentStateValues: any;
+	allValues: any;
+}) => void): void;

package/dist/hydrate/components-flex/icon/types.d.ts

@@ -1,4 +1,5 @@
 import type { ClickableProps, CommonProps } from "../props.js";
+// @ts-ignore -- NOTE(kazupon): error TS2307: Cannot find module 'preact/src/jsx-csstype' or its corresponding type declarations
 import type { Properties } from "preact/src/jsx-csstype";
 export declare const ICON_SIZE: {
 	[key: string]: {

package/dist/hydrate/components-flex/layout/types.d.ts

@@ -17,5 +17,6 @@ export type LayerLayoutProps = CommonProps & ClickableProps & OverflowProps & Bo
 	rowGap?: Properties["rowGap"];
 	columnGap?: Properties["columnGap"];
 	width?: Properties["width"];
+	maxWidth?: Properties["maxWidth"];
 	height?: Properties["height"];
 };

package/dist/hydrate/components-flex/modal/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
-export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & {
+import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps, PaddingProps } from "../props.js";
+export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & PaddingProps & BackgroundProps & {
 	width?: Properties["width"];
 };

package/dist/hydrate/components-flex/props.d.ts

@@ -21,13 +21,17 @@ export type CustomizeCssProps = {
 	isCustomizeCss?: boolean;
 	customizeCss?: string;
 };
+export type CustomizeAttributesProps = {
+	id?: string;
+	classNames?: string[];
+};
 export type BrandStyleProps = {
 	customBrandKit?: Partial<BrandKit>;
 };
 export type ActionTableProps = {
 	actionTableKey?: string;
 };
-export type CommonProps = MetaProps & PositionProps & CustomizeCssProps & BrandStyleProps;
+export type CommonProps = MetaProps & PositionProps & CustomizeAttributesProps & CustomizeCssProps & BrandStyleProps;
 export type ClickableProps = {
 	onClick?: OnClickOperation;
 	eventName?: string;

package/dist/hydrate/components-flex/utils/obj-to-style.d.ts

@@ -1,2 +1,2 @@
 import type { Properties } from "csstype";
-export declare const objToStyle: (obj: Properties) => string;
+export declare const objToStyle: (obj: Properties | Record<string, any>) => string;

package/dist/hydrate/functions.d.ts

@@ -13,6 +13,10 @@ export declare const runScript: (handlerName: string) => () => void;
 /** @internal */
 export declare const submitForm: (to: string) => () => void;
 /** @internal */
+export declare const submitFormProgress: (to: string) => () => void;
+/** @internal */
+export declare const submitFormFinal: (to: string) => () => void;
+/** @internal */
 export declare const bootChat: (hide_launcher: boolean, placement_pc: string, placement_mobile: string, horizontal_spacing_pc: number, horizontal_spacing_mobile: number, vertical_spacing_pc: number, vertical_spacing_mobile: number, theme_color: string, header_title: string, header_description: string, launcher_image: string) => () => void;
 /** @internal */
 export declare const execOnClickOperation: (onClickOperation: OnClickOperation) => void;

package/dist/hydrate/index.d.ts

@@ -103,6 +103,9 @@ export { default as FlexCountDownValue } from "./components-flex/count-down/Coun
 export * from "./components-flex/count-down/types.js";
 export { default as FlexClipCopy } from "./components-flex/clip-copy/ClipCopy.svelte.js";
 export * from "./components-flex/clip-copy/types.js";
+export { default as FlexForm } from "./components-flex/form/Form.svelte.js";
+export { default as FlexFormField } from "./components-flex/form/FormField.svelte.js";
+export * from "./components-flex/form/types.js";
 export { default as ThumbnailPreview } from "./components-flex/ThumbnailPreview.svelte.js";
 export * from "./components-flex/code/types.js";
 export * from "./components-flex/brand-kit.js";