@plaidev/karte-action-sdk 1.1.270-29291355.57078a51c → 1.1.270-29364900.6ab45349e

package/dist/modal.svelte5.d.ts

@@ -102,7 +102,7 @@ export declare function getCssVariables(data: {
 *
 * @public
 */
-export declare function getActionRoot(): ShadowRoot | null;
+export declare function getActionRoot(): HTMLElement | ShadowRoot | null;
 /** @internal */
 export declare function createModal<
 	Props extends ModalProps,

package/dist/prop.d.ts

@@ -62,6 +62,8 @@ type OperationArgumentTypes = {
 	BooleanKeyword: boolean;
 	NumberKeyword: number;
 	TransitState: string;
+	SliderId: string;
+	SliderSlideTarget: string;
 	Url: string;
 	Color: string;
 	Handler: string;
@@ -116,6 +118,25 @@ export declare const OnClickOperationOptions: readonly [{
 		readonly type: "TransitState";
 		readonly default: "/";
 	}];
+}, {
+	readonly operation: "slideTo";
+	readonly args: readonly [{
+		readonly name: "name";
+		readonly type: "SliderId";
+		readonly default: "";
+	}, {
+		readonly name: "target";
+		readonly type: "SliderSlideTarget";
+		readonly default: "next";
+	}, {
+		readonly name: "slideNumber";
+		readonly type: "NumberKeyword";
+		readonly default: 1;
+	}, {
+		readonly name: "hiddenIsDisabled";
+		readonly type: "BooleanKeyword";
+		readonly default: false;
+	}];
 }, {
 	readonly operation: "callNativeFunction";
 	readonly args: readonly [{
@@ -213,6 +234,8 @@ export type LongText = string;
 /** @internal */
 export type Url = string;
 /** @internal */
+export type SliderTarget = "next" | "prev" | "first" | "end" | "number";
+/** @internal */
 export type RegExpProp = {
 	pattern: string;
 	flags: string;

package/dist/stores.d.ts

@@ -121,13 +121,20 @@ export declare function getState(): string;
 */
 export declare const states: Store<string[]>;
 /**
+* Store to handle all state names
+*
+* @internal
+*/
+export declare const stateNames: Store<string[]>;
+/**
 * {@link getStates} function to add new state ID to list of state IDs.
 *
 * @param stateId - New state ID
+* @param stateName - New state Name
 *
 * @internal
 */
-export declare function addState(stateId: string): void;
+export declare function addState(stateId: string, stateName?: string): void;
 /**
 * ステートID一覧を取得する
 *
@@ -140,6 +147,17 @@ export declare function addState(stateId: string): void;
 */
 export declare function getStates(): string[];
 /**
+* ステート名一覧を取得する
+*
+* @remarks
+* アクションが表示されて設定されるため、{@link onShow} フック関数で利用できます。
+*
+* @returns すべてのステート名
+*
+* @public
+*/
+export declare function getStateNames(): string[];
+/**
 * Store to handle visibility of action
 *
 * @internal
@@ -386,3 +404,12 @@ export interface FormFieldSchema {
 * @internal
 */
 export declare const formFields: Writable_<FormData>;
+/** @internal */
+export interface SliderData {
+	[name: string]: {
+		currentIndex: number;
+		slides: number;
+		loop: boolean;
+	};
+}
+export declare const sliderStates: Writable_<SliderData>;

package/dist/svelte5/actionEvent.d.ts

@@ -12,11 +12,20 @@ export declare const ACTION_CHANGE_STATE_EVENT: string;
 /** @internal */
 export declare const send_event: (event_name: string, values?: any) => void;
 /** @internal */
+export declare const toStateChangedData: (newState: string, oldState: string) => {
+	newState: string;
+	oldState: string;
+	newVal: number;
+	oldVal: number;
+};
+/** @internal */
 export declare const publish_edge: (topic: string, values?: any) => void;
 /** @internal */
 export declare const initialize: (setting?: ActionSetting) => () => void;
 /** @internal */
 export declare const finalize: () => void;
+/** @internal */
+export declare function dispatchActionEvent(eventName: string, data?: object): void;
 /**
 * Dispatch the event to destroy KARTE action
 *

package/dist/svelte5/components-flex/avatar/Avatar.css.d.ts

@@ -0,0 +1,3 @@
+import { AvatarProps } from "./types.js";
+declare const _default: (layerId: string, props: AvatarProps) => string;
+export default _default;

package/dist/svelte5/components-flex/avatar/types.d.ts

@@ -1,5 +1,5 @@
-import type { BorderProps, ClickableProps, CommonProps, PaddingProps } from "../props.js";
-import type { Properties } from "csstype";
+import type { BorderProps, ClickableProps, CommonProps, FlexComponentProps, PaddingProps } from "../props.js";
+import { Properties } from "csstype";
 export declare const AVATAR_SIZE: {
 	readonly extra_small: "XS（48 x 48）";
 	readonly small: "S（64 x 64）";
@@ -12,7 +12,7 @@ export declare const AVATAR_SHAPE: {
 	readonly square: "スクエア";
 	readonly rounded: "ラウンド";
 };
-export type AvatarProps = CommonProps & ClickableProps & PaddingProps & BorderProps & {
+export type AvatarProps = FlexComponentProps<CommonProps & ClickableProps & PaddingProps & BorderProps & {
 	size?: keyof typeof AVATAR_SIZE | number;
 	width?: Properties["width"];
 	height?: Properties["height"];
@@ -20,5 +20,4 @@ export type AvatarProps = CommonProps & ClickableProps & PaddingProps & BorderPr
 	image?: string;
 	caption?: string;
 	alt?: string;
-};
-export declare const avatarPropsDefault: AvatarProps;
+}>;

package/dist/svelte5/components-flex/button/Button.css.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from "./types.js";
+import { BrandKit } from "../brand-kit.js";
+declare const _default: (layerId: string, props: ButtonProps, brandKit?: BrandKit) => string;
+export default _default;

package/dist/svelte5/components-flex/button/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { BorderProps, ClickableProps, CommonProps, LinkProps, ShadowProps, WithIconProps, RadiusProps } from "../props.js";
+import type { BorderProps, ClickableProps, CommonProps, LinkProps, ShadowProps, WithIconProps, RadiusProps, FlexComponentProps } from "../props.js";
 export declare const BUTTON_SIZE: {
 	readonly extra_small: "エクストラ スモール";
 	readonly small: "スモール";
@@ -37,7 +37,7 @@ export declare const BUTTON_ICON_ANGLE: {
 	readonly row: "左側";
 	readonly "row-reverse": "右側";
 };
-export type ButtonProps = CommonProps & ClickableProps & ShadowProps & LinkProps & WithIconProps & RadiusProps & BorderProps & {
+export type ButtonProps = FlexComponentProps<CommonProps & ClickableProps & ShadowProps & LinkProps & WithIconProps & RadiusProps & BorderProps & {
 	label?: string;
 	size?: keyof typeof BUTTON_SIZE | string;
 	height?: Properties["height"];
@@ -53,5 +53,5 @@ export type ButtonProps = CommonProps & ClickableProps & ShadowProps & LinkProps
 	round?: keyof typeof BUTTON_ROUND;
 	width?: Properties["width"];
 	wrap?: "wrap" | "nowrap";
-};
+}>;
 export declare const buttonPropsDefault: ButtonProps;

package/dist/svelte5/components-flex/button-outlined/types.d.ts

@@ -1,7 +1,7 @@
 import type { Properties } from "csstype";
-import type { BorderProps, ClickableProps, CommonProps, LinkProps, ShadowProps, WithIconProps } from "../props.js";
+import type { BorderProps, ClickableProps, CommonProps, LinkProps, ShadowProps, WithIconProps, FlexComponentProps } from "../props.js";
 import type { BUTTON_THEME, BUTTON_ROUND, BUTTON_SIZE } from "../button/types.js";
-export type ButtonOutlinedProps = CommonProps & ClickableProps & ShadowProps & WithIconProps & LinkProps & BorderProps & {
+export type ButtonOutlinedProps = FlexComponentProps<CommonProps & ClickableProps & ShadowProps & WithIconProps & LinkProps & BorderProps & {
 	label?: string;
 	size?: keyof typeof BUTTON_SIZE;
 	height?: Properties["height"];
@@ -16,5 +16,5 @@ export type ButtonOutlinedProps = CommonProps & ClickableProps & ShadowProps & W
 	round?: keyof typeof BUTTON_ROUND;
 	fontWeight?: Properties["fontWeight"];
 	wrap?: "wrap" | "nowrap";
-};
+}>;
 export declare const buttonOutlinedPropsDefault: ButtonOutlinedProps;

package/dist/svelte5/components-flex/button-text/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { ClickableProps, CommonProps, LinkProps, WithIconProps } from "../props.js";
+import type { ClickableProps, CommonProps, LinkProps, WithIconProps, FlexComponentProps } from "../props.js";
 import type { BUTTON_ROUND } from "../button/types.js";
 export declare const BUTTON_TEXT_SIZE: {
 	readonly small: "Small";
@@ -16,7 +16,7 @@ export declare const BUTTON_TEXT_THEME: {
 	readonly info: "Info";
 	readonly white: "White";
 };
-export type ButtonTextProps = CommonProps & ClickableProps & LinkProps & WithIconProps & {
+export type ButtonTextProps = FlexComponentProps<CommonProps & ClickableProps & LinkProps & WithIconProps & {
 	label?: string;
 	size?: keyof typeof BUTTON_TEXT_SIZE;
 	height?: Properties["height"];
@@ -30,4 +30,4 @@ export type ButtonTextProps = CommonProps & ClickableProps & LinkProps & WithIco
 	width?: Properties["width"];
 	round?: keyof typeof BUTTON_ROUND;
 	wrap?: "wrap" | "nowrap";
-};
+}>;

package/dist/svelte5/components-flex/clip-copy/ClipCopy.css.d.ts

@@ -0,0 +1,3 @@
+import { ClipboardProps } from "./types.js";
+declare const _default: (layerId: string, _props: ClipboardProps) => string;
+export default _default;

package/dist/svelte5/components-flex/clip-copy/types.d.ts

@@ -1,6 +1,6 @@
-import type { CommonProps } from "../props.js";
-export type ClipboardProps = CommonProps & {
+import type { CommonProps, FlexComponentProps } from "../props.js";
+export type ClipboardProps = FlexComponentProps<CommonProps & {
 	content?: string;
 	copiedEventName?: string;
 	noneTooltip?: boolean;
-};
+}>;

package/dist/svelte5/components-flex/close-button/types.d.ts

@@ -1,4 +1,4 @@
-import type { BorderProps, ClickableProps, CommonProps, BackgroundColorProps, ColorProps, PaddingProps } from "../props.js";
+import type { BorderProps, ClickableProps, CommonProps, BackgroundColorProps, ColorProps, PaddingProps, FlexComponentProps } from "../props.js";
 import type { Properties } from "csstype";
 import type { TEXT_THEME } from "../text/types.js";
 export declare const CLOSE_BUTTON_PLACEMENT: {
@@ -16,7 +16,7 @@ export declare const CLOSE_BUTTON_LABEL_PLACEMENT: {
 	readonly right: "right";
 	readonly left: "left";
 };
-export type CloseButtonProps = CommonProps & BackgroundColorProps & ClickableProps & ColorProps & PaddingProps & BorderProps & {
+export type CloseButtonProps = FlexComponentProps<CommonProps & BackgroundColorProps & ClickableProps & ColorProps & PaddingProps & BorderProps & {
 	size?: number;
 	placement?: keyof typeof CLOSE_BUTTON_PLACEMENT;
 	round?: keyof typeof CLOSE_BUTTON_ROUND;
@@ -29,4 +29,4 @@ export type CloseButtonProps = CommonProps & BackgroundColorProps & ClickablePro
 	right?: Properties["right"];
 	left?: Properties["left"];
 	bottom?: Properties["bottom"];
-};
+}>;

package/dist/svelte5/components-flex/code/types.d.ts

@@ -1,6 +1,6 @@
-import type { CommonProps } from "../props.js";
-export type CodeProps = CommonProps & {
+import type { CommonProps, FlexComponentProps } from "../props.js";
+export type CodeProps = FlexComponentProps<CommonProps & {
 	rawHtml?: string;
 	rawCss?: string;
 	rawScript?: string;
-};
+}>;

package/dist/svelte5/components-flex/count-down/types.d.ts

@@ -1,14 +1,14 @@
-import type { CommonProps } from "../props.js";
+import type { CommonProps, FlexComponentProps } from "../props.js";
 import type { OnClickOperation } from "../../prop.js";
 import type { LayerTextProps } from "../text/types.js";
-export type CountDownProps = CommonProps & {
+export type CountDownProps = FlexComponentProps<CommonProps & {
 	timeLimit?: string;
 	onEnd?: OnClickOperation;
-};
+}>;
 export type CountDownValueType = "day" | "hour" | "minute" | "second";
-export type CountDownValueProps = LayerTextProps & {
+export type CountDownValueProps = FlexComponentProps<LayerTextProps & {
 	type: CountDownValueType;
-};
+}>;
 export type CountDownValues = {
 	day: number;
 	hour: number;

package/dist/svelte5/components-flex/css.d.ts

@@ -0,0 +1,5 @@
+import { Properties } from "csstype";
+import { ResponsiveSetting } from "./responsive.js";
+export declare function createComponentRawCss(layerId: string, define: (style: (selector: string, styles: Properties) => string) => string[]): string;
+export declare function toResponsiveSelector(responsiveSetting: ResponsiveSetting<any>, body: string): string;
+export declare function toStyleTag(css: string): string;

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

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

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

@@ -1,9 +1,6 @@
-import type { CommonProps } from "../props.js";
+import type { CommonProps, FlexComponentProps } from "../props.js";
 import { Properties } from "csstype";
 import { FormStoreValidation } from "../form.js";
-export type FormProps = CommonProps & {
-	fields: FormField[];
-};
 export declare const FORM_FIELD_LABEL_SIZE: {
 	readonly small: "スモール";
 	readonly medium: "ミディアム";
@@ -23,29 +20,7 @@ export declare const FORM_IDENTIFY_FIELD_TYPE: {
 	readonly last_name: "名前（姓）";
 	readonly address: "住所";
 };
-type FieldProps = CommonProps & {
-	required?: boolean;
-	defaultValue?: string | string[];
-	validations?: FormStoreValidation[];
-	direction?: "row" | "column";
-	gap?: Properties["rowGap"];
-	showLabel?: boolean;
-	label?: string;
-	labelWidth?: Properties["width"];
-	labelSize?: keyof typeof FORM_FIELD_LABEL_SIZE | string;
-	labelTheme?: keyof typeof FORM_FIELD_LABEL_THEME | string;
-};
-export type FormFieldProps = CommonProps & FieldProps & {
-	fieldName?: string;
-	fieldType?: FormFieldType;
-	isIdentify?: boolean;
-};
 export type FormIdentifyFieldType = keyof typeof FORM_IDENTIFY_FIELD_TYPE;
-export type FormIdentifyFieldProps = CommonProps & FieldProps & {
-	identifyType: FormIdentifyFieldType;
-	inputProps?: FormInputStyleProps;
-	checkerProps?: FormCheckerStyleProps & FormOptionsProps;
-};
 export declare const FORM_FIELD_TYPE: {
 	readonly INPUT: "input";
 	readonly SELECT: "select";
@@ -98,21 +73,46 @@ export type FormInputStyleProps = {
 	fontColor?: string;
 	placeholderColor?: string;
 };
-export type FormInputProps = FormFieldProps & FormInputStyleProps & {
-	inputType?: FormInputType;
+export type FormProps = FlexComponentProps<CommonProps & {
+	fields: FormField[];
+}>;
+type FieldProps = CommonProps & {
+	required?: boolean;
+	defaultValue?: string | string[];
+	validations?: FormStoreValidation[];
+	direction?: "row" | "column";
+	gap?: Properties["rowGap"];
+	showLabel?: boolean;
+	label?: string;
+	labelWidth?: Properties["width"];
+	labelSize?: keyof typeof FORM_FIELD_LABEL_SIZE | string;
+	labelTheme?: keyof typeof FORM_FIELD_LABEL_THEME | string;
 };
-export type FormTextareaProps = FormFieldProps & FormInputStyleProps & {
+export type FormFieldProps = FlexComponentProps<CommonProps & FieldProps & {
+	fieldName?: string;
+	fieldType?: FormFieldType;
+	isIdentify?: boolean;
+}>;
+export type FormIdentifyFieldProps = FlexComponentProps<CommonProps & FieldProps & {
+	identifyType: FormIdentifyFieldType;
+	inputProps?: FormInputStyleProps;
+	checkerProps?: FormCheckerStyleProps & FormOptionsProps;
+}>;
+export type FormInputProps = FlexComponentProps<FormFieldProps & FormInputStyleProps & {
+	inputType?: FormInputType;
+}>;
+export type FormTextareaProps = FlexComponentProps<FormFieldProps & FormInputStyleProps & {
 	rows?: number;
-};
+}>;
 export type FormOptionsProps = {
 	options?: {
 		label: string;
 		value: string;
 	}[];
 };
-export type FormSelectProps = FormFieldProps & FormInputStyleProps & FormOptionsProps & {
+export type FormSelectProps = FlexComponentProps<FormFieldProps & FormInputStyleProps & FormOptionsProps & {
 	variant?: FormFieldVariant;
-};
+}>;
 export type FormCheckerStyleProps = {
 	variant?: FormFieldVariantForChecker;
 	layout?: "vertical" | "horizontal" | "grid";
@@ -125,7 +125,7 @@ export type FormCheckerStyleProps = {
 	backgroundColor?: string;
 	size?: FormFieldSize;
 };
-export type FormCheckboxesProps = FormFieldProps & FormOptionsProps & FormCheckerStyleProps;
-export type FormRadiosProps = FormFieldProps & FormOptionsProps & FormCheckerStyleProps;
-export type FormBooleanProps = FormFieldProps & FormOptionsProps & FormCheckerStyleProps;
+export type FormCheckboxesProps = FlexComponentProps<FormFieldProps & FormOptionsProps & FormCheckerStyleProps>;
+export type FormRadiosProps = FlexComponentProps<FormFieldProps & FormOptionsProps & FormCheckerStyleProps>;
+export type FormBooleanProps = FlexComponentProps<FormFieldProps & FormOptionsProps & FormCheckerStyleProps>;
 export {};

package/dist/svelte5/components-flex/icon/Icon.css.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from "./types.js";
+import { BrandKit } from "../brand-kit.js";
+declare const _default: (layerId: string, props: IconProps, _brandKit?: BrandKit) => string;
+export default _default;

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

@@ -1,4 +1,4 @@
-import type { ClickableProps, CommonProps } from "../props.js";
+import type { ClickableProps, CommonProps, FlexComponentProps } from "../props.js";
 import type { Properties } from "preact/src/jsx-csstype";
 export declare const ICON_SIZE: {
 	[key: string]: {
@@ -9,10 +9,10 @@ export declare const ICON_SIZE: {
 export declare const ICON_VARIANTS: {
 	[key: string]: any;
 };
-export type IconProps = CommonProps & ClickableProps & {
-	variant: string;
+export type IconProps = FlexComponentProps<CommonProps & ClickableProps & {
+	variant?: string;
 	size?: keyof typeof ICON_SIZE;
 	color?: Properties["color"];
 	width?: Properties["width"];
 	height?: Properties["height"];
-};
+}>;

package/dist/svelte5/components-flex/image/types.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { CommonProps, BorderProps, ClickableProps, AspectProps, RadiusProps, PaddingProps } from "../props.js";
+import type { CommonProps, BorderProps, ClickableProps, AspectProps, RadiusProps, PaddingProps, FlexComponentProps } from "../props.js";
 export declare const IMAGE_ROUND_SHAPE: {
 	readonly circle: "ラウンド / ミディアム";
 	readonly rounded: "ラウンド / スモール";
@@ -17,10 +17,10 @@ export declare const IMAGE_ASPECT_VARIANTS: {
 	"3/4": string;
 	"9/16": string;
 };
-export type ImageProps = CommonProps & ClickableProps & AspectProps & RadiusProps & PaddingProps & BorderProps & {
+export type ImageProps = FlexComponentProps<CommonProps & ClickableProps & AspectProps & RadiusProps & PaddingProps & BorderProps & {
 	image?: string;
 	width?: Properties["width"];
 	height?: Properties["height"];
 	alt?: string;
 	shape?: keyof typeof IMAGE_ROUND_SHAPE;
-};
+}>;

package/dist/svelte5/components-flex/layout/Layout.css.d.ts

@@ -0,0 +1,4 @@
+import { LayerLayoutProps } from "./types.js";
+import { BrandKit } from "../brand-kit.js";
+declare const _default: (layerId: string, props: LayerLayoutProps, brandKit?: BrandKit) => string;
+export default _default;

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

@@ -1,5 +1,5 @@
 import type { Properties } from "csstype";
-import type { BorderProps, ClickableProps, CommonProps, OverflowProps, PaddingProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
+import type { BorderProps, ClickableProps, CommonProps, OverflowProps, PaddingProps, RadiusProps, ShadowProps, BackgroundProps, FlexComponentProps } from "../props.js";
 export declare const LAYOUT_DISPLAY_TYPE: readonly ["inline-flex", "flex", "block"];
 export type LayoutDisplayType = (typeof LAYOUT_DISPLAY_TYPE)[number];
 export declare const LAYOUT_DIRECTION: readonly ["column", "column-reverse", "row", "row-reverse"];
@@ -8,7 +8,7 @@ export declare const LAYOUT_ALIGN: readonly ["flex-start", "center", "flex-end",
 export type LayoutFlexAlign = (typeof LAYOUT_ALIGN)[number];
 export declare const LAYOUT_JUSTIFY: readonly ["flex-start", "center", "flex-end", "space-between"];
 export type LayoutFlexJustify = (typeof LAYOUT_JUSTIFY)[number];
-export type LayerLayoutProps = CommonProps & ClickableProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & PaddingProps & {
+export type LayerLayoutProps = FlexComponentProps<CommonProps & ClickableProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & PaddingProps & {
 	display?: LayoutDisplayType;
 	direction?: LayoutFlexDirection;
 	align?: LayoutFlexAlign;
@@ -19,4 +19,4 @@ export type LayerLayoutProps = CommonProps & ClickableProps & OverflowProps & Bo
 	width?: Properties["width"];
 	maxWidth?: Properties["maxWidth"];
 	height?: Properties["height"];
-};
+}>;

package/dist/svelte5/components-flex/list/types.d.ts

@@ -1,6 +1,6 @@
 import type { Properties } from "csstype";
-import type { CommonProps, ClickableProps, ActionTableProps, BorderSingleProps } from "../props.js";
-export type ListProps = CommonProps & BorderSingleProps & ActionTableProps & {
+import type { CommonProps, ClickableProps, ActionTableProps, BorderSingleProps, FlexComponentProps } from "../props.js";
+export type ListProps = FlexComponentProps<CommonProps & BorderSingleProps & ActionTableProps & {
 	gap?: Properties["gap"];
 	width?: Properties["width"];
 	itemPaddingTop?: Properties["paddingTop"];
@@ -9,10 +9,10 @@ export type ListProps = CommonProps & BorderSingleProps & ActionTableProps & {
 	itemPaddingBottom?: Properties["paddingBottom"];
 	itemHeight?: Properties["height"];
 	itemGap?: Properties["gap"];
-};
-export type ListItemProps = CommonProps & ClickableProps & {
+}>;
+export type ListItemProps = FlexComponentProps<CommonProps & ClickableProps & {
 	gap?: number;
-};
+}>;
 export declare const LIST_ITEM_CONTEXT_KEY = "ListItemContext";
 export type ListItemContext = {
 	paddingTop?: Properties["paddingTop"];

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

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

package/dist/svelte5/components-flex/multi-column/types.d.ts

@@ -1,6 +1,6 @@
 import type { Properties } from "csstype";
-import type { CommonProps, ClickableProps, BorderSingleProps } from "../props.js";
-export type MultiColumnProps = CommonProps & BorderSingleProps & {
+import type { CommonProps, ClickableProps, BorderSingleProps, FlexComponentProps } from "../props.js";
+export type MultiColumnProps = FlexComponentProps<CommonProps & BorderSingleProps & {
 	gap?: Properties["columnGap"];
 	width?: Properties["width"];
 	itemPaddingTop?: Properties["paddingTop"];
@@ -9,10 +9,10 @@ export type MultiColumnProps = CommonProps & BorderSingleProps & {
 	itemPaddingBottom?: Properties["paddingBottom"];
 	itemHeight?: Properties["height"];
 	itemGap?: Properties["gap"];
-};
-export type MultiColumnItemProps = CommonProps & ClickableProps & {
+}>;
+export type MultiColumnItemProps = FlexComponentProps<CommonProps & ClickableProps & {
 	gap?: number;
-};
+}>;
 export declare const MULTI_COLUMN_ITEM_CONTEXT_KEY = "MultiColumnItemContext";
 export type MultiColumnItemContext = {
 	paddingTop?: Properties["paddingTop"];

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

@@ -4,6 +4,10 @@ import type { BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET } from "./button/types.js";
 import type { BrandKit } from "./brand-kit.js";
 import type { AspectVariantCode, FontFamilyVariantCode, ShadowVariantCode, BackgroundColorVariantCode } from "./variants.js";
 import type { TEXT_THEME } from "./text/types.js";
+import { type ResponsiveSetting } from "./responsive.js";
+export type FlexComponentProps<T extends object> = T & {
+	responsiveSettings?: ResponsiveSetting<T>[];
+};
 type PositionPlaceProps = {
 	top?: Properties["top"];
 	left?: Properties["left"];
@@ -31,7 +35,10 @@ export type BrandStyleProps = {
 export type ActionTableProps = {
 	actionTableKey?: string;
 };
-export type CommonProps = MetaProps & PositionProps & CustomizeAttributesProps & CustomizeCssProps & BrandStyleProps;
+export type VisibilityProps = {
+	hidden?: boolean;
+};
+export type CommonProps = MetaProps & VisibilityProps & PositionProps & CustomizeAttributesProps & CustomizeCssProps & BrandStyleProps;
 export type ClickableProps = {
 	onClick?: OnClickOperation;
 	eventName?: string;

package/dist/svelte5/components-flex/responsive.d.ts

@@ -0,0 +1,26 @@
+import { FlexComponentProps } from "./props.js";
+import { Readable } from "svelte/store";
+export declare const USER_AGENT_VARIANT: Record<string, {
+	regex: RegExp;
+}>;
+export type MediaQueryCondition = {
+	range?: {
+		min?: number;
+		max?: number;
+	};
+	raw?: string;
+	orientation?: "portrait" | "landscape";
+};
+export type UserAgentVariant = keyof typeof USER_AGENT_VARIANT;
+export type UserAgentCondition = {
+	variants?: UserAgentVariant[];
+	regex?: string;
+};
+export type ResponsiveSetting<T extends object> = {
+	id: string;
+	label: string;
+	mediaQueryCondition?: MediaQueryCondition;
+	userAgentCondition?: UserAgentCondition;
+	props: Partial<T>;
+};
+export declare function useResponsiveProps<T extends object>(props: FlexComponentProps<T>): Readable<T>;

package/dist/svelte5/components-flex/slider/types.d.ts

@@ -1,10 +1,11 @@
-import type { CommonProps, ClickableProps } from "../props.js";
-export type SliderProps = CommonProps & {
+import type { CommonProps, ClickableProps, FlexComponentProps } from "../props.js";
+export type SliderProps = FlexComponentProps<CommonProps & {
+	name?: string;
 	gap: number;
 	itemWidthPercentage: number;
 	auto?: boolean;
 	loop?: boolean;
 	hideIndicator?: boolean;
 	interval?: number;
-};
-export type SliderItemProps = CommonProps & ClickableProps;
+}>;
+export type SliderItemProps = FlexComponentProps<CommonProps & ClickableProps>;

package/dist/svelte5/components-flex/text/Text.css.d.ts

@@ -0,0 +1,4 @@
+import { LayerTextProps } from "./types.js";
+import { BrandKit } from "../brand-kit.js";
+declare const _default: (layerId: string, props: LayerTextProps, brandKit?: BrandKit) => string;
+export default _default;