@serendie/ui/dist/components/Select/Select.d.ts

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { SelectRootProps } from '@ark-ui/react';
import { RecipeVariantProps } from '../../../styled-system/css';
export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "content" | "root" | "valueText" | "iconBox" | "trigger", {
    size: {
        medium: {
            root: {
                textStyle: {
                    base: "sd.system.typography.body.medium_compact";
                    expanded: "sd.system.typography.body.medium_expanded";
                };
            };
            valueText: {
                textStyle: {
                    base: "sd.system.typography.body.medium_compact";
                    expanded: "sd.system.typography.body.medium_expanded";
                };
            };
            trigger: {
                height: number;
            };
            item: {};
        };
        small: {
            root: {
                "@layer components": {
                    width: "min(100%, 150px)";
                };
                textStyle: {
                    base: "sd.system.typography.body.small_compact";
                };
            };
            valueText: {
                textStyle: {
                    base: "sd.system.typography.body.small_compact";
                    expanded: "sd.system.typography.body.small_expanded";
                };
            };
            trigger: {
                height: number;
                paddingTop: "sd.system.dimension.spacing.twoExtraSmall";
                paddingRight: "sd.system.dimension.spacing.extraSmall";
                paddingBottom: "sd.system.dimension.spacing.twoExtraSmall";
                paddingLeft: "sd.system.dimension.spacing.extraSmall";
                borderRadius: "sd.system.dimension.radius.small";
            };
            content: {
                borderRadius: "sd.system.dimension.radius.small";
            };
            item: {};
        };
    };
}>;
type Props = {
    placeholder?: string;
    label?: string;
    required?: boolean;
    requiredLabel?: string;
    invalidMessage?: string;
    items?: selectItem[];
    collection?: SelectRootProps<selectItem>["collection"];
    /**
     * Portalを使用するかどうか
     * - `true` (デフォルト): body直下にポータルする。ModalDialog/Drawer内にある場合は自動的にそのコンテンツ内にポータルされる
     * - `false`: ポータルを使用せず、その場にレンダリングする
     * @default true
     */
    portalled?: boolean;
};
type selectItem = {
    label: string;
    value: string;
};
type SelectStyleProps = Props & Omit<SelectRootProps<selectItem>, "collection"> & RecipeVariantProps<typeof SelectStyle>;
export declare const Select: React.FC<SelectStyleProps>;
export {};