@bestow-ui/react 0.3.1 → 0.4.0

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as _bestow_ui_tokens from '@bestow-ui/tokens';
 import { space } from '@bestow-ui/tokens';
 import * as react from 'react';
-import { HTMLAttributes, CSSProperties, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, ElementType, ReactElement } from 'react';
+import { HTMLAttributes, CSSProperties, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, ElementType, TextareaHTMLAttributes, ReactElement } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 
 declare const lightTokens: {
@@ -360,6 +360,44 @@ declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, descri
  */
 declare const ModalClose: react.ForwardRefExoticComponent<Dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface RadioOption {
+    value: string;
+    label: ReactNode;
+    /** 레이블 아래 보조 설명 */
+    description?: ReactNode;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    /** 선택지 목록 */
+    options: RadioOption[];
+    /** 선택된 값 (제어 모드). undefined 를 넘기면 아무것도 선택하지 않은 상태 */
+    value?: string;
+    /** 처음 선택된 값 (비제어 모드) */
+    defaultValue?: string;
+    /** 값이 바뀔 때 호출된다 */
+    onValueChange?: (value: string) => void;
+    /** 그룹 위에 표시할 레이블 */
+    label?: ReactNode;
+    /** 그룹 아래에 표시할 도움말. error 일 때는 에러 메시지로 표시된다 */
+    helperText?: ReactNode;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 배치 방향 */
+    orientation?: 'vertical' | 'horizontal';
+    /** 크기 */
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    required?: boolean;
+    /** form 제출 시 사용할 이름 */
+    name?: string;
+    id?: string;
+    /** label 이 없을 때 스크린리더용 이름 */
+    'aria-label'?: string;
+    /** 바깥 래퍼 className */
+    className?: string;
+}
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+
 interface SelectOption {
     value: string;
     label: ReactNode;
@@ -414,6 +452,51 @@ interface StackProps extends HTMLAttributes<HTMLElement> {
 }
 declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLElement>>;
 
+interface SwitchProps {
+    /** 스위치 옆에 표시할 레이블 */
+    label?: ReactNode;
+    /** 크기 */
+    size?: 'sm' | 'md';
+    /** 켜짐 상태 (제어 모드) */
+    checked?: boolean;
+    /** 처음 켜짐 상태 (비제어 모드) */
+    defaultChecked?: boolean;
+    /** 켜짐 상태가 바뀔 때 호출된다 */
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    required?: boolean;
+    /** form 제출 시 사용할 이름 */
+    name?: string;
+    /** form 제출 시 켜져 있을 때의 값 (기본 "on") */
+    value?: string;
+    id?: string;
+    /** label 이 없을 때 스크린리더용 이름 */
+    'aria-label'?: string;
+    /** 바깥 래퍼 className */
+    className?: string;
+}
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    /** 입력창 위에 표시할 레이블 */
+    label?: ReactNode;
+    /** 입력창 아래에 표시할 도움말. error 일 때는 에러 메시지로 표시된다 */
+    helperText?: ReactNode;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 크기 (안쪽 여백과 글자 크기) */
+    size?: 'sm' | 'md' | 'lg';
+    /** 부모 너비를 꽉 채운다 */
+    fullWidth?: boolean;
+    /** 사용자가 크기를 조절할 수 있는 방향. autoResize 이면 무시된다 */
+    resize?: 'none' | 'vertical' | 'both';
+    /** 내용에 맞춰 높이가 자동으로 늘어난다. 최대 높이는 style 의 maxHeight 로 제한한다 */
+    autoResize?: boolean;
+    /** 글자 수를 표시한다. maxLength 가 있으면 "12/200" 형태 */
+    showCount?: boolean;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
 interface ToastOptions {
     /** 제목 */
     title: ReactNode;
@@ -489,4 +572,4 @@ interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
 }
 declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
 
-export { type BestowTheme, Button, type ButtonProps, Checkbox, type CheckboxProps, type DeepPartial, Input, type InputProps, type IntentName, Modal, ModalClose, type ModalProps, Select, type SelectOption, type SelectProps, Stack, type StackProps, TextField, type TextFieldProps, type ThemeInput, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ThemeTokens, type ToastOptions, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, contrastRatio, createIntentColors, createTheme, themeClass, usePortalClassName, usePortalProps, useTheme, useToast, vars };
+export { type BestowTheme, Button, type ButtonProps, Checkbox, type CheckboxProps, type DeepPartial, Input, type InputProps, type IntentName, Modal, ModalClose, type ModalProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Stack, type StackProps, Switch, type SwitchProps, TextField, type TextFieldProps, Textarea, type TextareaProps, type ThemeInput, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ThemeTokens, type ToastOptions, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, contrastRatio, createIntentColors, createTheme, themeClass, usePortalClassName, usePortalProps, useTheme, useToast, vars };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _bestow_ui_tokens from '@bestow-ui/tokens';
 import { space } from '@bestow-ui/tokens';
 import * as react from 'react';
-import { HTMLAttributes, CSSProperties, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, ElementType, ReactElement } from 'react';
+import { HTMLAttributes, CSSProperties, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, ElementType, TextareaHTMLAttributes, ReactElement } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 
 declare const lightTokens: {
@@ -360,6 +360,44 @@ declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, descri
  */
 declare const ModalClose: react.ForwardRefExoticComponent<Dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface RadioOption {
+    value: string;
+    label: ReactNode;
+    /** 레이블 아래 보조 설명 */
+    description?: ReactNode;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    /** 선택지 목록 */
+    options: RadioOption[];
+    /** 선택된 값 (제어 모드). undefined 를 넘기면 아무것도 선택하지 않은 상태 */
+    value?: string;
+    /** 처음 선택된 값 (비제어 모드) */
+    defaultValue?: string;
+    /** 값이 바뀔 때 호출된다 */
+    onValueChange?: (value: string) => void;
+    /** 그룹 위에 표시할 레이블 */
+    label?: ReactNode;
+    /** 그룹 아래에 표시할 도움말. error 일 때는 에러 메시지로 표시된다 */
+    helperText?: ReactNode;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 배치 방향 */
+    orientation?: 'vertical' | 'horizontal';
+    /** 크기 */
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    required?: boolean;
+    /** form 제출 시 사용할 이름 */
+    name?: string;
+    id?: string;
+    /** label 이 없을 때 스크린리더용 이름 */
+    'aria-label'?: string;
+    /** 바깥 래퍼 className */
+    className?: string;
+}
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+
 interface SelectOption {
     value: string;
     label: ReactNode;
@@ -414,6 +452,51 @@ interface StackProps extends HTMLAttributes<HTMLElement> {
 }
 declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLElement>>;
 
+interface SwitchProps {
+    /** 스위치 옆에 표시할 레이블 */
+    label?: ReactNode;
+    /** 크기 */
+    size?: 'sm' | 'md';
+    /** 켜짐 상태 (제어 모드) */
+    checked?: boolean;
+    /** 처음 켜짐 상태 (비제어 모드) */
+    defaultChecked?: boolean;
+    /** 켜짐 상태가 바뀔 때 호출된다 */
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    required?: boolean;
+    /** form 제출 시 사용할 이름 */
+    name?: string;
+    /** form 제출 시 켜져 있을 때의 값 (기본 "on") */
+    value?: string;
+    id?: string;
+    /** label 이 없을 때 스크린리더용 이름 */
+    'aria-label'?: string;
+    /** 바깥 래퍼 className */
+    className?: string;
+}
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    /** 입력창 위에 표시할 레이블 */
+    label?: ReactNode;
+    /** 입력창 아래에 표시할 도움말. error 일 때는 에러 메시지로 표시된다 */
+    helperText?: ReactNode;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 크기 (안쪽 여백과 글자 크기) */
+    size?: 'sm' | 'md' | 'lg';
+    /** 부모 너비를 꽉 채운다 */
+    fullWidth?: boolean;
+    /** 사용자가 크기를 조절할 수 있는 방향. autoResize 이면 무시된다 */
+    resize?: 'none' | 'vertical' | 'both';
+    /** 내용에 맞춰 높이가 자동으로 늘어난다. 최대 높이는 style 의 maxHeight 로 제한한다 */
+    autoResize?: boolean;
+    /** 글자 수를 표시한다. maxLength 가 있으면 "12/200" 형태 */
+    showCount?: boolean;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
 interface ToastOptions {
     /** 제목 */
     title: ReactNode;
@@ -489,4 +572,4 @@ interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
 }
 declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
 
-export { type BestowTheme, Button, type ButtonProps, Checkbox, type CheckboxProps, type DeepPartial, Input, type InputProps, type IntentName, Modal, ModalClose, type ModalProps, Select, type SelectOption, type SelectProps, Stack, type StackProps, TextField, type TextFieldProps, type ThemeInput, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ThemeTokens, type ToastOptions, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, contrastRatio, createIntentColors, createTheme, themeClass, usePortalClassName, usePortalProps, useTheme, useToast, vars };
+export { type BestowTheme, Button, type ButtonProps, Checkbox, type CheckboxProps, type DeepPartial, Input, type InputProps, type IntentName, Modal, ModalClose, type ModalProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Stack, type StackProps, Switch, type SwitchProps, TextField, type TextFieldProps, Textarea, type TextareaProps, type ThemeInput, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ThemeTokens, type ToastOptions, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, contrastRatio, createIntentColors, createTheme, themeClass, usePortalClassName, usePortalProps, useTheme, useToast, vars };