@bigtablet/design-system 1.17.3 → 1.18.0

package/dist/index.css

@@ -310,6 +310,9 @@
 .button_variant_danger:active:not(:disabled) {
   transform: scale(0.98);
 }
+.button_full_width {
+  width: 100%;
+}
 
 /* src/ui/form/checkbox/style.scss */
 .checkbox {
@@ -999,13 +1002,13 @@
     gap: 0.25rem;
   }
 }
-.date_picker_full {
+.date_picker_full_width {
   width: 100%;
 }
-.date_picker_full .date_picker_fields {
+.date_picker_full_width .date_picker_fields {
   width: 100%;
 }
-.date_picker_full select {
+.date_picker_full_width select {
   flex: 1;
   min-width: 0;
 }

package/dist/index.d.ts

@@ -33,8 +33,10 @@ declare const AlertProvider: React.FC<{
 
 interface SpinnerProps {
     size?: number;
+    /** Accessible label for the spinner (default: "Loading") */
+    ariaLabel?: string;
 }
-declare const Spinner: ({ size }: SpinnerProps) => react_jsx_runtime.JSX.Element;
+declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => react_jsx_runtime.JSX.Element;
 
 interface TopLoadingProps {
     /** 진행률 (0-100). undefined면 indeterminate 모드 */
@@ -45,8 +47,10 @@ interface TopLoadingProps {
     height?: number;
     /** 표시 여부 */
     isLoading?: boolean;
+    /** 프로그레스 바의 접근성 레이블 (기본값: "Page loading") */
+    ariaLabel?: string;
 }
-declare const TopLoading: ({ progress, color, height, isLoading, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
+declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
 interface ToastProviderProps {
     containerId?: string;
@@ -64,16 +68,22 @@ declare const useToast: (containerId?: string) => {
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "ghost" | "danger";
     size?: "sm" | "md" | "lg";
+    /** Whether the button should take the full width of its container */
+    fullWidth?: boolean;
+    /**
+     * Custom width for the button
+     * @deprecated Use `fullWidth` prop or CSS instead
+     */
     width?: string;
 }
-declare const Button: ({ variant, size, width, className, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ variant, size, fullWidth, width, className, style, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     label?: React.ReactNode;
     size?: "sm" | "md" | "lg";
     indeterminate?: boolean;
 }
-declare const Checkbox: ({ label, size, indeterminate, className, ...props }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
 interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
@@ -85,7 +95,7 @@ interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     label?: React.ReactNode;
     size?: "sm" | "md" | "lg";
 }
-declare const Radio: ({ label, size, className, ...props }: RadioProps) => react_jsx_runtime.JSX.Element;
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 
 type SelectSize = "sm" | "md" | "lg";
 type SelectVariant = "outline" | "filled" | "ghost";
@@ -117,8 +127,10 @@ interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     onChange?: (checked: boolean) => void;
     size?: "sm" | "md" | "lg";
     disabled?: boolean;
+    /** Accessible label for the switch (for screen readers) */
+    ariaLabel: string;
 }
-declare const Switch: ({ checked, defaultChecked, onChange, size, disabled, className, ...props }: SwitchProps) => react_jsx_runtime.JSX.Element;
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
 
 type TextFieldVariant = "outline" | "filled" | "ghost";
 type TextFieldSize = "sm" | "md" | "lg";
@@ -151,9 +163,15 @@ interface DatePickerProps {
     minDate?: string;
     selectableRange?: SelectableRange;
     disabled?: boolean;
+    /** Whether the date picker should take the full width of its container */
+    fullWidth?: boolean;
+    /**
+     * Custom width for the date picker
+     * @deprecated Use `fullWidth` prop or CSS instead
+     */
     width?: number | string;
 }
-declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, width, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     page: number;
@@ -168,7 +186,9 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
     closeOnOverlay?: boolean;
     width?: number | string;
     title?: React.ReactNode;
+    /** Accessible label for the modal (default uses title or "Dialog") */
+    ariaLabel?: string;
 }
-declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
+declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ariaLabel, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
 
 export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, type SelectOption, Spinner, Switch, TextField, ToastProvider, TopLoading, useAlert, useToast };