sud-ui 1.5.4 → 1.9.1

package/README.md

@@ -4,7 +4,7 @@
   </a>
 </p>
 
-# Soon UI Design Library [![npm version](https://img.shields.io/badge/npm-1.1.6-blue)](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.
 
@@ -16,11 +16,11 @@
 
 ## ✨ Features
 
-- 🎨 Consistent design system with Tailwind-like syntax
+- 🎨 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
-- 🌀 Utility-first class support (e.g., `pd-10`, `mg-4`)
+- 🧪 Local demo page for visual QA before publishing
 
 ## 📦 Installation
 
@@ -54,7 +54,7 @@ export default function App() {
       borderWeight={2}
       borderColor="red"
       style={{
-        width: "100%",
+        width: "100%"
       }}
     >
       <div className="flex gap-10">
@@ -100,9 +100,15 @@ 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
-
-SUD provides full theming support via `SoonUIDesign`.
+## 🎨 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`.
 
 ```jsx
 import { SoonUIDesign, defaultTheme, darkTheme } from "sud-ui";
@@ -120,18 +126,18 @@ const customTheme = {
       7: "#007abf",
       8: "#005f99",
       9: "#004473",
-      10: "#00294d",
-    },
+      10: "#00294d"
+    }
   },
   components: {
     button: {
       primary: {
         bg: "ocean-6",
         txt: "white-10",
-        border: "ocean-7",
-      },
-    },
-  },
+        border: "ocean-7"
+      }
+    }
+  }
 };
 
 export default function App() {

package/dist/components/SoonUIDesign.d.ts

@@ -0,0 +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>;

package/dist/components/commonType.d.ts

@@ -52,9 +52,16 @@ export type borderType =
   | "outset"
   | "none";
 
-export type shadowType = "none" | "sm" | "md" | "lg" | "xl";
-
-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/Card.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
-  defaultColorType,
-  shapeType,
-  borderType,
-  shadowType
-} from "../commonType";
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export type CardVariant =
   | "card"
@@ -40,9 +41,11 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   borderWeight?: number;
   /** 카드 모양 */
   shape?: shapeType;
-  /** 그림자 효과 */
-  shadow?: shadowType;
-  /** 카드 너비 */
+  /** 그림자 효과 */
+  shadow?: shadowType;
+  /** 기본 surface 프리셋 */
+  surface?: surfaceType;
+  /** 카드 너비 */
   width?: number | string;
   /** 카드 높이 */
   height?: number | string;

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

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

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

@@ -1,10 +1,11 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
-  defaultColorType,
-  shapeType,
-  borderType,
-  shadowType
-} from "../commonType";
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export type DrawerPlacement = "left" | "right" | "top" | "bottom";
 
@@ -23,9 +24,10 @@ export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
   borderColor?: string;
   borderType?: borderType;
   borderWeight?: number;
-  shape?: shapeType;
-  shadow?: shadowType;
-  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,10 +1,11 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
-  defaultColorType,
-  shapeType,
-  borderType,
-  shadowType
-} from "../commonType";
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
   open?: boolean;
@@ -20,9 +21,10 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
   borderColor?: string;
   borderType?: borderType;
   borderWeight?: number;
-  shape?: shapeType;
-  shadow?: shadowType;
-  width?: number | string;
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  width?: number | string;
   height?: number | string;
   className?: string;
   divider?: boolean;

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

@@ -7,7 +7,12 @@ import type {
   KeyboardEvent,
   ChangeEvent
 } from "react";
-import type { shapeType, borderType, shadowType } from "../commonType";
+import type {
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export type InputSize = "sm" | "md" | "lg";
 
@@ -68,6 +73,7 @@ export interface InputProps
   onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
   shape?: shapeType;
   shadow?: shadowType;
+  surface?: surfaceType;
   size?: InputSize;
   id?: string;
   name?: string;
@@ -120,9 +126,12 @@ export interface OTPProps
   length?: number;
 }
 
-declare const Input: FC<InputProps> & {
-  Textarea: FC<TextareaProps>;
-  OTP: FC<OTPProps>;
+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/Rate.d.ts

@@ -20,6 +20,4 @@ export interface RateProps extends HTMLAttributes<HTMLDivElement> {
   icon?: RateIcon;
 }
 
-declare const Rate: FC<RateProps>;
-
-export default Rate;
+export declare const Rate: FC<RateProps>;

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

@@ -1,11 +1,12 @@
 import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
 import type {
   defaultColorType,
-  shapeType,
-  borderType,
-  shadowType,
-  tagColorType
-} from "../commonType";
+  shapeType,
+  borderType,
+  shadowType,
+  tagColorType,
+  surfaceType
+} from "../commonType";
 
 export type SelectSize = "sm" | "md" | "lg";
 
@@ -29,9 +30,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;
-  size?: SelectSize;
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  size?: SelectSize;
   id?: string;
   tagColorType?: tagColorType;
   colorType?: defaultColorType;

package/dist/components/feedback/Progress.d.ts

@@ -4,12 +4,20 @@ import type { tagColorType } from "../commonType";
 export type ProgressType = "bar" | "circle" | "dashboard";
 export type ProgressSize = "sm" | "md" | "lg";
 
-export type ProgressValuePosition =
-  | "inside-start"
-  | "inside-center"
-  | "inside-end"
-  | "outside-left"
-  | "outside-right";
+export type ProgressValuePosition =
+  | "inside-start"
+  | "inside-center"
+  | "inside-end"
+  | "outside-left"
+  | "outside-right";
+
+export type ProgressShadow =
+  | boolean
+  | "none"
+  | {
+      gauge?: boolean | string;
+      track?: boolean | string;
+    };
 
 export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
   type?: ProgressType;
@@ -22,10 +30,11 @@ export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
   colorType?: tagColorType;
   backgroundColor?: string;
   color?: string;
-  valuePosition?: ProgressValuePosition;
-  size?: ProgressSize;
-  fontSize?: number;
-  className?: string;
+  valuePosition?: ProgressValuePosition;
+  size?: ProgressSize;
+  fontSize?: number;
+  shadow?: ProgressShadow;
+  className?: string;
   style?: CSSProperties;
 }
 

package/dist/components/layout/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Layout } from "./Layout/index.d";
+export * from "./Layout/index.d";
+export { default as Header } from "./Header/index.d";
+export * from "./Header/index.d";
+export { default as Sider } from "./Sider/index.d";
+export * from "./Sider/index.d";
+export { default as Content } from "./Content/index.d";
+export * from "./Content/index.d";
+export { default as Footer } from "./Footer/index.d";
+export * from "./Footer/index.d";

package/dist/components/navigation/Dropdown.d.ts

@@ -3,10 +3,11 @@ import type { MenuItem } from "./Menu";
 import type { PopupPlacement, PopupTrigger } from "./base/PopupBase";
 import type {
   defaultColorType,
-  shapeType,
-  borderType,
-  shadowType
-} from "../commonType";
+  shapeType,
+  borderType,
+  shadowType,
+  surfaceType
+} from "../commonType";
 
 export interface DropdownProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "style"> {
@@ -26,9 +27,10 @@ export interface DropdownProps
   borderColor?: string;
   borderType?: borderType;
   borderWeight?: number;
-  shape?: shapeType;
-  shadow?: shadowType;
-  expandType?: "accordion" | "popover";
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  expandType?: "accordion" | "popover";
   popupPlacement?: PopupPlacement;
   placement?: [PopupPlacement, PopupPlacement];
   colorType?: defaultColorType;

package/dist/components/navigation/base/PopupBase.d.ts

@@ -6,11 +6,12 @@ import type {
   RefObject
 } from "react";
 import type {
-  defaultColorType,
-  borderType,
-  shadowType,
-  shapeType
-} from "../../commonType";
+  defaultColorType,
+  borderType,
+  shadowType,
+  shapeType,
+  surfaceType
+} from "../../commonType";
 
 export type PopupTrigger = "click" | "hover" | "contextMenu";
 
@@ -56,9 +57,10 @@ export interface PopupBaseProps
   borderColor?: string;
   borderType?: borderType;
   borderWeight?: number;
-  shape?: shapeType;
-  shadow?: shadowType;
-  colorType?: defaultColorType;
+  shape?: shapeType;
+  shadow?: shadowType;
+  surface?: surfaceType;
+  colorType?: defaultColorType;
   style?: CSSProperties;
   wrapperStyle?: CSSProperties;
   followTrigger?: boolean;