@teamsparta/stack-chip/dist/ChipGroup.d.mts

stack chip

import * as react from 'react';
import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
import { Responsive } from '@teamsparta/stack-core';
import { FlexProps } from '@teamsparta/stack-flex';
import { ChipSize } from './type.mjs';

type RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;
interface ChipGroupSingleProps extends FlexProps<"div"> {
    /**
     * 선택된 값
     */
    value?: string;
    /**
     * 기본 선택 값
     */
    defaultValue?: string;
    /**
     * 선택된 값이 변경될 때 호출되는 함수
     */
    onValueChange?: (value: string) => void;
    /**
     * 다중 선택 가능 여부
     * @default false
     */
    multiple?: false;
    /**
     * 비활성화 여부
     * @default false
     */
    disabled?: boolean;
    /**
     * 읽는 방향
     * @default "ltr"
     */
    dir?: RovingFocusGroupProps["dir"];
    /**
     * 정렬 방향
     * @description horizontal의 경우 left, right 방향키로 이동하고, vertical의 경우 up, down 방향키로 이동합니다.
     */
    orientation?: RovingFocusGroupProps["orientation"];
    /**
     * 반복 여부
     * @description 키보드로 이동할 때 마지막 요소에서 첫 번째 요소로 이동할지 여부를 결정합니다.
     * @default true
     */
    loop?: boolean;
    /**
     * 칩의 사이즈
     * @description 하위 요소의 칩 버튼 사이즈를 일괄 적용합니다.
     */
    size?: Responsive<ChipSize>;
}
interface ChipGroupMultipleProps extends FlexProps<"div"> {
    /**
     * 선택된 값
     */
    value?: string[];
    /**
     * 기본 선택 값
     */
    defaultValue?: string[];
    /**
     * 선택된 값이 변경될 때 호출되는 함수
     */
    onValueChange?: (value: string[]) => void;
    /**
     * 다중 선택 가능 여부
     * @default false
     */
    multiple: true;
    /**
     * 비활성화 여부
     * @default false
     */
    disabled?: boolean;
    /**
     * 읽는 방향
     * @default "ltr"
     */
    dir?: RovingFocusGroupProps["dir"];
    /**
     * 정렬 방향
     * @description horizontal의 경우 left, right 방향키로 이동하고, vertical의 경우 up, down 방향키로 이동합니다.
     */
    orientation?: RovingFocusGroupProps["orientation"];
    /**
     * 반복 여부
     * @description 키보드로 이동할 때 마지막 요소에서 첫 번째 요소로 이동할지 여부를 결정합니다.
     * @default true
     */
    loop?: boolean;
    /**
     * 칩의 사이즈
     * @description 하위 요소의 칩 버튼 사이즈를 일괄 적용합니다.
     */
    size?: Responsive<ChipSize>;
}
type ChipGroupProps = ChipGroupSingleProps | ChipGroupMultipleProps;
declare const ChipGroup: react.ForwardRefExoticComponent<(Omit<ChipGroupSingleProps, "ref"> | Omit<ChipGroupMultipleProps, "ref">) & react.RefAttributes<HTMLDivElement>>;

export { ChipGroup, type ChipGroupMultipleProps, type ChipGroupProps, type ChipGroupSingleProps };