sud-ui 1.9.1 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 SeeUSoon93
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,31 +1,19 @@
-<p align="center">
-  <a href="https://sud.co.kr" target="_blank">
-    <img src="https://www.sud.co.kr/sud-logo.svg" alt="Sud UI 로고" width="400"/>
-  </a>
-</p>
+# Soon UI Design Library [![npm version](https://img.shields.io/npm/v/sud-ui.svg)](https://www.npmjs.com/package/sud-ui)
 
-# Soon UI Design Library [![npm version](https://img.shields.io/badge/npm-1.9.0-blue)](https://www.npmjs.com/package/sud-ui)
-
-**Soon UI Design (SUD)** is a React UI library that helps you quickly build responsive and polished interfaces using reusable components and customizable design tokens.
-
-<p align="center">
-  <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbtRhyi%2FbtsOO8VbNm1%2FAAAAAAAAAAAAAAAAAAAAAJQ7ZrjHvQP0ibh2VnYpFA9AYuvUPgkFpFKfLMAVyY-z%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DlwvrqCVV70OtiZXnxprySVHTBiI%253D" alt="Sud UI Components Preview"/>
-</p>
-
----
+## **Soon UI Design (SUD)** is a React UI library that helps you quickly build responsive and polished interfaces using reusable components and customizable design tokens.
 
 ## ✨ Features
 
-- 🎨 Tailwind CSS utilities with SUD-specific animations and design tokens
+- 🎨 Tailwind CSS utilities with SUD-specific animations and design tokens
 - 🧩 50+ reusable components (Button, Modal, Table, etc.)
 - 🌗 Light/Dark theme support
 - ⚙️ Fully customizable theme and styles
-- 🧪 Local demo page for visual QA before publishing
+- 🧪 Local demo page for visual QA before publishing
 
 ## 📦 Installation
 
 ```bash
-npm install sud-ui
+npm install sud-ui sud-icons
 ```
 
 ## 🧪 Examples Built with Soon UI
@@ -42,9 +30,10 @@ Check out real projects built using the SUD component library:
 ## 🚀 Quick Start
 
 ```jsx
-import React from "react";
-import { Card, Typography, Avatar, Tag } from "sud-ui";
-import { LogoGithub } from "sud-icons";
+import React from "react";
+import { Card, Typography, Avatar, Tag } from "sud-ui";
+import { LogoGithub } from "sud-icons";
+import "sud-ui/dist/index.css";
 
 export default function App() {
   return (
@@ -100,18 +89,20 @@ Sud UI provides a comprehensive suite of ready-to-use components:
 
 📘 [See full list and API →](https://www.sud.co.kr/component/component-overview)
 
-## 🎨 Theme & Customization
-
-Surface defaults are intentionally conservative: content/form components use a
-border by default, floating overlays use a shadow by default, and action
-components stay flat unless `shadow` is explicitly enabled. See
-[`docs/surface-guidelines.md`](./docs/surface-guidelines.md) for the release
-checklist and surface rules.
-
-SUD provides full theming support via `SoonUIDesign`.
+## 🎨 Theme & Customization
 
-```jsx
-import { SoonUIDesign, defaultTheme, darkTheme } from "sud-ui";
+Surface defaults are intentionally conservative: content/form components use a
+border by default, floating overlays use a shadow by default, and action
+components stay flat unless `shadow` is explicitly enabled. See
+[`docs/surface-guidelines.md`](./docs/surface-guidelines.md) for the release
+checklist and surface rules.
+
+SUD provides full theming support via `SoonUIDesign`.
+
+```jsx
+import { useState } from "react";
+import { Button, SoonUIDesign, defaultTheme, darkTheme } from "sud-ui";
+import "sud-ui/dist/index.css";
 
 const customTheme = {
   ...defaultTheme,
@@ -155,7 +146,22 @@ export default function App() {
     </SoonUIDesign>
   );
 }
-```
+```
+
+## 2.0 stability changes
+
+- `Button` now forwards native button attributes and refs, and defaults to
+  `type="button"`.
+- `Checkbox`, `Radio`, and `Switch` now use native form controls for keyboard and
+  form support.
+- `Modal` and `Drawer` now trap and restore focus, close with Escape, and lock
+  background scrolling.
+- `Image` preview is keyboard accessible, and library motion respects the
+  reduced-motion preference.
+- Controlled `Calendar` values and ranges can be cleared with `null`.
+- Notification `onClose` callbacks now run for manual and automatic dismissal.
+
+See [`CHANGELOG.md`](./CHANGELOG.md) for migration details.
 
 ## 📚 Documentation
 

package/dist/components/SoonUIDesign.d.ts

@@ -1,11 +1,11 @@
-import type { FC, ReactNode } from "react";
-import type { SUDTheme } from "../theme";
-
-export interface SoonUIDesignProps {
-  children?: ReactNode;
-  theme?: SUDTheme;
-  darkTheme?: SUDTheme;
-  isDarkMode?: boolean;
-}
-
-export declare const SoonUIDesign: FC<SoonUIDesignProps>;
+import type { FC, ReactNode } from "react";
+import type { SUDTheme } from "../theme";
+
+export interface SoonUIDesignProps {
+  children?: ReactNode;
+  theme?: SUDTheme;
+  darkTheme?: SUDTheme;
+  isDarkMode?: boolean;
+}
+
+export declare const SoonUIDesign: FC<SoonUIDesignProps>;

package/dist/components/commonType.d.ts

@@ -52,16 +52,16 @@ export type borderType =
   | "outset"
   | "none";
 
-export type shadowType = "none" | "sm" | "md" | "lg" | "xl";
-
-export type surfaceType =
-  | "bare"
-  | "outlined"
-  | "elevated"
-  | "floating"
-  | "overlay";
-
-export type fontSizeType =
+export type shadowType = "none" | "sm" | "md" | "lg" | "xl";
+
+export type surfaceType =
+  | "bare"
+  | "outlined"
+  | "elevated"
+  | "floating"
+  | "overlay";
+
+export type fontSizeType =
   | "xs"
   | "sm"
   | "base"

package/dist/components/dataDisplay/Calendar.d.ts

@@ -12,8 +12,9 @@ export interface CalendarItem {
   itemProps?: HTMLAttributes<HTMLSpanElement>;
 }
 
-export interface CalendarProps extends HTMLAttributes<HTMLDivElement> {
-  value?: Date;
+export interface CalendarProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value?: Date | null;
   onChange?: (date: Date | { startDate: Date; endDate: Date | null }) => void;
   items?: CalendarItem[];
   view?: CalendarView;
@@ -34,11 +35,11 @@ export interface CalendarProps extends HTMLAttributes<HTMLDivElement> {
   width?: number | string;
   height?: number | string;
   range?: boolean;
-  startDate?: Date;
-  endDate?: Date;
-  size?: CalendarSize;
-  holidays?: string[];
-  holidaysStyle?: CSSProperties;
-}
+  startDate?: Date | null;
+  endDate?: Date | null;
+  size?: CalendarSize;
+  holidays?: string[];
+  holidaysStyle?: CSSProperties;
+}
 
 export declare const Calendar: FC<CalendarProps>;

package/dist/components/dataDisplay/Card.d.ts

@@ -1,11 +1,17 @@
-import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  ReactNode,
+  CSSProperties,
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes
+} from "react";
 import type {
-  defaultColorType,
-  shapeType,
-  borderType,
-  shadowType,
-  surfaceType
-} from "../commonType";
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export type CardVariant =
   | "card"
@@ -14,7 +20,8 @@ export type CardVariant =
   | "notification"
   | "toast";
 
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
   /** 카드 제목 */
   title?: ReactNode;
   /** 카드 내용 */
@@ -41,11 +48,11 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   borderWeight?: number;
   /** 카드 모양 */
   shape?: shapeType;
-  /** 그림자 효과 */
-  shadow?: shadowType;
-  /** 기본 surface 프리셋 */
-  surface?: surfaceType;
-  /** 카드 너비 */
+  /** 그림자 효과 */
+  shadow?: shadowType;
+  /** 기본 surface 프리셋 */
+  surface?: surfaceType;
+  /** 카드 너비 */
   width?: number | string;
   /** 카드 높이 */
   height?: number | string;
@@ -65,4 +72,6 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   isDrawer?: boolean;
 }
 
-export declare const Card: FC<CardProps>;
+export declare const Card: ForwardRefExoticComponent<
+  CardProps & RefAttributes<HTMLDivElement>
+>;

package/dist/components/dataDisplay/Carousel.d.ts

@@ -1,10 +1,12 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 
-export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+export interface CarouselProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   items?: ReactNode[];
   itemWidthRatio?: number;
   itemCount?: number;
   itemGap?: number;
+  overlapOffsetRatio?: number;
   autoPlay?: boolean;
   autoPlayInterval?: number;
   scaleRatio?: number;

package/dist/components/dataDisplay/Collapse.d.ts

@@ -1,11 +1,11 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
-  defaultColorType,
-  shapeType,
-  borderType,
-  shadowType,
-  surfaceType
-} from "../commonType";
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export type CollapseSize = "sm" | "md" | "lg";
 
@@ -15,7 +15,8 @@ export interface CollapseItem {
   children: ReactNode;
 }
 
-export interface CollapseProps extends HTMLAttributes<HTMLDivElement> {
+export interface CollapseProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   items?: CollapseItem[];
   openKeys?: string[];
   defaultOpenKeys?: string[];
@@ -29,10 +30,10 @@ export interface CollapseProps extends HTMLAttributes<HTMLDivElement> {
   headerColor?: string;
   contentColorType?: defaultColorType;
   contentBackground?: string;
-  contentColor?: string;
-  shadow?: shadowType;
-  surface?: surfaceType;
-  disabledKeys?: string[];
+  contentColor?: string;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  disabledKeys?: string[];
   className?: string;
   size?: CollapseSize;
   shape?: shapeType;

package/dist/components/dataDisplay/Drawer.d.ts

@@ -1,17 +1,19 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
-  defaultColorType,
-  shapeType,
-  borderType,
-  shadowType,
-  surfaceType
-} from "../commonType";
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export type DrawerPlacement = "left" | "right" | "top" | "bottom";
 
-export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
-  open?: boolean;
-  onClose?: () => void;
+export interface DrawerProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  open?: boolean;
+  onClose?: () => void;
+  onEsc?: boolean;
   title?: ReactNode;
   children?: ReactNode;
   footer?: ReactNode;
@@ -24,10 +26,10 @@ export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
   borderColor?: string;
   borderType?: borderType;
   borderWeight?: number;
-  shape?: shapeType;
-  shadow?: shadowType;
-  surface?: surfaceType;
-  width?: number | string;
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  width?: number | string;
   height?: number | string;
   className?: string;
   placement?: DrawerPlacement;

package/dist/components/dataDisplay/Modal.d.ts

@@ -1,13 +1,14 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
-  defaultColorType,
-  shapeType,
-  borderType,
-  shadowType,
-  surfaceType
-} from "../commonType";
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
-export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+export interface ModalProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
   open?: boolean;
   onClose?: () => void;
   onEsc?: boolean;
@@ -21,10 +22,10 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
   borderColor?: string;
   borderType?: borderType;
   borderWeight?: number;
-  shape?: shapeType;
-  shadow?: shadowType;
-  surface?: surfaceType;
-  width?: number | string;
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  width?: number | string;
   height?: number | string;
   className?: string;
   divider?: boolean;

package/dist/components/dataDisplay/Segmented.d.ts

@@ -14,7 +14,8 @@ export interface SegmentedOption {
   disabled?: boolean;
 }
 
-export interface SegmentedProps extends HTMLAttributes<HTMLDivElement> {
+export interface SegmentedProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   options?: (SegmentedOption | string | number)[];
   value?: string | number;
   onChange?: (value: string | number) => void;

package/dist/components/dataDisplay/Table.d.ts

@@ -28,7 +28,8 @@ export type TableSorter<T> = {
   order: TableSortOrder;
 } | null;
 
-export interface TableProps<T = any> extends HTMLAttributes<HTMLDivElement> {
+export interface TableProps<T = any>
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   columns: TableColumn<T>[];
   dataSource: T[];
   rowKey?: string | ((record: T) => string);

package/dist/components/dataDisplay/Tabs.d.ts

@@ -21,7 +21,8 @@ export interface TabPaneProps {
   children?: ReactNode;
 }
 
-export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+export interface TabsProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "onChange"> {
   value?: string;
   defaultValue?: string;
   onChange?: (key: string) => void;

package/dist/components/dataEntry/Checkbox.d.ts

@@ -1,4 +1,11 @@
-import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  ReactNode,
+  CSSProperties,
+  FC,
+  ForwardRefExoticComponent,
+  InputHTMLAttributes,
+  RefAttributes
+} from "react";
 import type { defaultColorType } from "../commonType";
 
 export type CheckboxLabelPosition = "left" | "right" | "top" | "bottom";
@@ -10,8 +17,17 @@ export interface CheckboxOption {
   disabled?: boolean;
 }
 
-export interface CheckboxProps
-  extends Omit<HTMLAttributes<HTMLLabelElement>, "onChange"> {
+export interface CheckboxProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    | "type"
+    | "onChange"
+    | "checked"
+    | "defaultChecked"
+    | "color"
+    | "style"
+    | "className"
+  > {
   checked?: boolean;
   defaultChecked?: boolean;
   onChange?: (checked: boolean) => void;
@@ -49,7 +65,9 @@ export interface CheckboxGroupProps {
   className?: string;
 }
 
-declare const Checkbox: FC<CheckboxProps> & {
+declare const Checkbox: ForwardRefExoticComponent<
+  CheckboxProps & RefAttributes<HTMLInputElement>
+> & {
   Group: FC<CheckboxGroupProps>;
 };
 

package/dist/components/dataEntry/ColorPicker.d.ts

@@ -19,7 +19,8 @@ export interface ColorPickerColor {
   rgba: string;
 }
 
-export interface ColorPickerProps extends HTMLAttributes<HTMLDivElement> {
+export interface ColorPickerProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   color?: string;
   onChange?: (color: ColorPickerColor) => void;
   open?: boolean;

package/dist/components/dataEntry/Input.d.ts

@@ -44,7 +44,7 @@ export type InputType =
 export interface InputProps
   extends Omit<
     HTMLAttributes<HTMLInputElement>,
-    "onChange" | "onClick" | "onKeyDown"
+    "onChange" | "onClick" | "onKeyDown" | "prefix"
   > {
   background?: string;
   color?: string;
@@ -126,12 +126,12 @@ export interface OTPProps
   length?: number;
 }
 
-export declare const Textarea: FC<TextareaProps>;
-export declare const OTP: FC<OTPProps>;
-
-export declare const Input: FC<InputProps> & {
-  Textarea: typeof Textarea;
-  OTP: typeof OTP;
-};
-
-export default Input;
+export declare const Textarea: FC<TextareaProps>;
+export declare const OTP: FC<OTPProps>;
+
+export declare const Input: FC<InputProps> & {
+  Textarea: typeof Textarea;
+  OTP: typeof OTP;
+};
+
+export default Input;

package/dist/components/dataEntry/Radio.d.ts

@@ -1,4 +1,11 @@
-import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  ReactNode,
+  CSSProperties,
+  FC,
+  ForwardRefExoticComponent,
+  InputHTMLAttributes,
+  RefAttributes
+} from "react";
 import type { defaultColorType } from "../commonType";
 
 export type RadioLabelPosition = "left" | "right" | "top" | "bottom";
@@ -10,8 +17,17 @@ export interface RadioOption {
   disabled?: boolean;
 }
 
-export interface RadioProps
-  extends Omit<HTMLAttributes<HTMLLabelElement>, "onChange"> {
+export interface RadioProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    | "type"
+    | "onChange"
+    | "checked"
+    | "defaultChecked"
+    | "color"
+    | "style"
+    | "className"
+  > {
   checked?: boolean;
   defaultChecked?: boolean;
   onChange?: (checked: boolean) => void;
@@ -47,7 +63,9 @@ export interface RadioGroupProps {
   className?: string;
 }
 
-declare const Radio: FC<RadioProps> & {
+declare const Radio: ForwardRefExoticComponent<
+  RadioProps & RefAttributes<HTMLInputElement>
+> & {
   Group: FC<RadioGroupProps>;
 };
 

package/dist/components/dataEntry/Rate.d.ts

@@ -2,7 +2,8 @@ import type { ReactElement, CSSProperties, FC, HTMLAttributes } from "react";
 
 export type RateIcon = "star" | "heart" | ReactElement;
 
-export interface RateProps extends HTMLAttributes<HTMLDivElement> {
+export interface RateProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   count?: number;
   allowHalf?: boolean;
   defaultValue?: number;
@@ -20,4 +21,4 @@ export interface RateProps extends HTMLAttributes<HTMLDivElement> {
   icon?: RateIcon;
 }
 
-export declare const Rate: FC<RateProps>;
+export declare const Rate: FC<RateProps>;

package/dist/components/dataEntry/Select.d.ts

@@ -1,22 +1,23 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
   defaultColorType,
-  shapeType,
-  borderType,
-  shadowType,
-  tagColorType,
-  surfaceType
-} from "../commonType";
+  shapeType,
+  borderType,
+  shadowType,
+  tagColorType,
+  surfaceType
+} from "../commonType";
 
 export type SelectSize = "sm" | "md" | "lg";
 
-export interface SelectOption {
-  value: string | number;
-  label: ReactNode;
-  content?: ReactNode;
-}
+export interface SelectOption {
+  value: string | number;
+  label: ReactNode;
+  content?: ReactNode;
+}
 
-export interface SelectProps extends HTMLAttributes<HTMLDivElement> {
+export interface SelectProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   background?: string;
   color?: string;
   border?: boolean;
@@ -30,10 +31,10 @@ export interface SelectProps extends HTMLAttributes<HTMLDivElement> {
   style?: CSSProperties;
   value?: string | number | (string | number)[];
   onChange?: (value: string | number | (string | number)[]) => void;
-  shape?: shapeType;
-  shadow?: shadowType;
-  surface?: surfaceType;
-  size?: SelectSize;
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  size?: SelectSize;
   id?: string;
   tagColorType?: tagColorType;
   colorType?: defaultColorType;

package/dist/components/dataEntry/Slider.d.ts

@@ -4,7 +4,8 @@ import type { defaultColorType, borderType, shadowType } from "../commonType";
 
 export type SliderSize = "sm" | "md" | "lg";
 
-export interface SliderProps extends HTMLAttributes<HTMLDivElement> {
+export interface SliderProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   min?: number;
   max?: number;
   value?: number;