@bestow-ui/react 0.3.0 → 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: {
@@ -240,6 +240,7 @@ type IntentName = 'primary' | 'neutral' | 'danger' | 'success';
  * 대표색 하나로 intent(primary 등)의 라이트·다크 색 세트를 만든다. 결과는 createTheme 에 넘긴다.
  * - solid 는 넘긴 색을 그대로 쓴다 (다크모드에서 너무 어두우면 조금 밝힌다).
  * - text 와 contrast(solid 위 글자색)는 WCAG AA 대비 4.5:1 을 만족하도록 계산한다.
+ * - intent 가 'primary' 면 포커스 링 색(border.focus)도 함께 바꾼다.
  *
  * @example createTheme(createIntentColors('primary', '#7c3aed'))
  */
@@ -359,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;
@@ -367,7 +406,7 @@ interface SelectOption {
 interface SelectProps {
     /** 선택지 목록 */
     options: SelectOption[];
-    /** 선택된 값 (제어 모드) */
+    /** 선택된 값 (제어 모드). undefined 를 넘기면 선택 없음(placeholder)으로 표시한다 */
     value?: string;
     /** 처음 선택된 값 (비제어 모드) */
     defaultValue?: string;
@@ -413,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;
@@ -488,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: {
@@ -240,6 +240,7 @@ type IntentName = 'primary' | 'neutral' | 'danger' | 'success';
  * 대표색 하나로 intent(primary 등)의 라이트·다크 색 세트를 만든다. 결과는 createTheme 에 넘긴다.
  * - solid 는 넘긴 색을 그대로 쓴다 (다크모드에서 너무 어두우면 조금 밝힌다).
  * - text 와 contrast(solid 위 글자색)는 WCAG AA 대비 4.5:1 을 만족하도록 계산한다.
+ * - intent 가 'primary' 면 포커스 링 색(border.focus)도 함께 바꾼다.
  *
  * @example createTheme(createIntentColors('primary', '#7c3aed'))
  */
@@ -359,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;
@@ -367,7 +406,7 @@ interface SelectOption {
 interface SelectProps {
     /** 선택지 목록 */
     options: SelectOption[];
-    /** 선택된 값 (제어 모드) */
+    /** 선택된 값 (제어 모드). undefined 를 넘기면 선택 없음(placeholder)으로 표시한다 */
     value?: string;
     /** 처음 선택된 값 (비제어 모드) */
     defaultValue?: string;
@@ -413,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;
@@ -488,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 };