sud-ui 1.5.2 → 1.5.3

package/dist/components/Div/Div.d.ts

@@ -0,0 +1,35 @@
+import type {
+  ReactNode,
+  CSSProperties,
+  MouseEvent,
+  FC,
+  HTMLAttributes
+} from "react";
+import type {
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType
+} from "../commonType";
+
+export interface DivProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  colorType?: defaultColorType;
+  background?: string;
+  color?: string;
+  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+  style?: CSSProperties;
+  className?: string;
+  /** 테두리 표시 여부 */
+  border?: boolean;
+  /** 테두리 색상 */
+  borderColor?: string;
+  /** 테두리 스타일 */
+  borderType?: borderType;
+  /** 테두리 두께 */
+  borderWeight?: number;
+  /** 그림자 효과 */
+  shadow?: shadowType;
+}
+
+export declare const Div: FC<DivProps>;

package/dist/components/commonType.d.ts

@@ -0,0 +1,74 @@
+export type defaultColorType = badgeColorType | tagColorType | "ghost" | "text";
+
+export type badgeColorType =
+  | "default"
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info";
+
+export type tagColorType =
+  | "default"
+  | "red"
+  | "rose"
+  | "coral"
+  | "orange"
+  | "volcano"
+  | "apricot"
+  | "yellow"
+  | "gold"
+  | "amber"
+  | "green"
+  | "lime"
+  | "mint"
+  | "blue"
+  | "sky"
+  | "cerulean"
+  | "indigo"
+  | "cobalt"
+  | "navy"
+  | "purple"
+  | "plum"
+  | "orchid"
+  | "forest"
+  | "sage"
+  | "warm-gray"
+  | "cool-gray"
+  | "neutral";
+
+export type shapeType = "square" | "circle" | "rounded" | "capsule";
+
+export type defaultSizeType = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type borderType =
+  | "solid"
+  | "dashed"
+  | "dotted"
+  | "double"
+  | "groove"
+  | "ridge"
+  | "inset"
+  | "outset"
+  | "none";
+
+export type shadowType = "none" | "sm" | "md" | "lg" | "xl";
+
+export type fontSizeType =
+  | "xs"
+  | "sm"
+  | "base"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl";
+
+export type fontWeightType =
+  | "light"
+  | "normal"
+  | "medium"
+  | "semibold"
+  | "bold";
+
+export type spacingType = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";

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

@@ -0,0 +1,43 @@
+import { ReactNode, CSSProperties, FC } from "react";
+import {
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType
+} from "../commonType";
+
+export interface AccordionItem {
+  key?: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  children?: AccordionItem[];
+  mode?: "group";
+  title?: ReactNode;
+  onClick?: () => void;
+}
+
+export interface AccordionProps {
+  items?: AccordionItem[];
+  selectedKey?: string;
+  defaultSelectedKey?: string;
+  onSelect?: (key: string) => void;
+  selectedColor?: string;
+  selectedTextColor?: string;
+  hoverColor?: string;
+  hoverTextColor?: string;
+  className?: string;
+  divider?: boolean;
+  colorType?: defaultColorType;
+  dividerColor?: string;
+  background?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  shape?: shapeType;
+  shadow?: shadowType;
+  style?: CSSProperties;
+}
+
+export declare const Accordion: FC<AccordionProps>;

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

@@ -0,0 +1,58 @@
+import type { ReactNode, KeyboardEvent, CSSProperties, FC } from "react";
+import type {
+  tagColorType,
+  defaultSizeType,
+  shapeType,
+  borderType,
+  shadowType
+} from "../commonType";
+
+export interface AvatarProps {
+  src?: string | ReactNode;
+  sample?: 1 | 2 | 3 | 4 | 5;
+  alt?: string;
+  children?: ReactNode;
+  size?: defaultSizeType | number;
+  shape?: shapeType;
+  colorType?: tagColorType;
+  background?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  shadow?: shadowType;
+  style?: CSSProperties;
+  className?: string;
+  onClick?: () => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
+  tabIndex?: number;
+}
+
+export interface AvatarGroupProps {
+  avatars?: Array<Partial<AvatarProps>>;
+  max?: number;
+  size?: defaultSizeType;
+  shape?: shapeType;
+  colorType?: tagColorType;
+  background?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  shadow?: shadowType;
+  style?: CSSProperties;
+  className?: string;
+  zIndexStart?: number;
+  gap?: number;
+  "aria-label"?: string;
+}
+
+export interface AvatarComponent extends FC<AvatarProps> {
+  Group: FC<AvatarGroupProps>;
+}
+
+declare const Avatar: AvatarComponent;
+
+export default Avatar;

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

@@ -0,0 +1,42 @@
+import type { ReactNode, CSSProperties, FC } from "react";
+import type {
+  tagColorType, // badgeColorType -> tagColorType으로 변경
+  defaultSizeType,
+  shapeType,
+  borderType,
+  shadowType
+} from "../commonType";
+
+export type BadgePosition =
+  | "top-right"
+  | "top-left"
+  | "bottom-right"
+  | "bottom-left";
+
+export type BadgeSize = defaultSizeType | number;
+
+export interface BadgeProps {
+  count?: ReactNode; // number -> ReactNode 로 변경
+  max?: number;
+  dot?: boolean;
+  showZero?: boolean;
+  position?: BadgePosition;
+  size?: BadgeSize;
+  offsetRatio?: number;
+  label?: boolean;
+  colorType?: tagColorType; // badgeColorType -> tagColorType으로 변경
+  background?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  shape?: "circle" | "square" | "rounded"; // 'rounded' 추가
+  shadow?: shadowType;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  "aria-label"?: string;
+}
+
+export declare const Badge: FC<BadgeProps>;

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

@@ -0,0 +1,44 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes, Key } from "react";
+import type { borderType, tagColorType } from "../commonType";
+
+export type CalendarSize = "sm" | "md" | "lg" | "miniView";
+export type CalendarView = "daily" | "month" | "year";
+
+export interface CalendarItem {
+  key?: Key;
+  date: string; // YYYY-MM-DD 형식
+  content: ReactNode;
+  colorType?: tagColorType;
+  itemProps?: HTMLAttributes<HTMLSpanElement>;
+}
+
+export interface CalendarProps extends HTMLAttributes<HTMLDivElement> {
+  value?: Date;
+  onChange?: (date: Date | { startDate: Date; endDate: Date | null }) => void;
+  items?: CalendarItem[];
+  view?: CalendarView;
+  viewControl?: boolean;
+  dateControl?: boolean;
+  headerRender?: ReactNode;
+  viewControlRender?: ReactNode;
+  dateControlRender?: ReactNode;
+  locale?: "en" | "ko" | object;
+  colorType?: tagColorType;
+  background?: string;
+  hoverBackground?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  width?: number | string;
+  height?: number | string;
+  range?: boolean;
+  startDate?: Date;
+  endDate?: Date;
+  size?: CalendarSize;
+  holidays?: string[];
+  holidaysStyle?: CSSProperties;
+}
+
+export declare const Calendar: FC<CalendarProps>;

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

@@ -0,0 +1,65 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType
+} from "../commonType";
+
+export type CardVariant =
+  | "card"
+  | "drawer"
+  | "modal"
+  | "notification"
+  | "toast";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  /** 카드 제목 */
+  title?: ReactNode;
+  /** 카드 내용 */
+  children?: ReactNode;
+  /** 카드 푸터 */
+  footer?: ReactNode;
+  /** 카드 썸네일 (이미지 URL 또는 ReactNode) */
+  thumb?: ReactNode;
+  /** 색상 타입 */
+  colorType?: defaultColorType;
+  /** 배경색 */
+  background?: string;
+  /** 텍스트 색상 */
+  color?: string;
+  /** 테두리 표시 여부 */
+  border?: boolean;
+  /** 테두리 색상 */
+  borderColor?: string;
+  /** 구분선 색상 */
+  dividerColor?: string;
+  /** 테두리 스타일 */
+  borderType?: borderType;
+  /** 테두리 두께 */
+  borderWeight?: number;
+  /** 카드 모양 */
+  shape?: shapeType;
+  /** 그림자 효과 */
+  shadow?: shadowType;
+  /** 카드 너비 */
+  width?: number | string;
+  /** 카드 높이 */
+  height?: number | string;
+  /** 썸네일 높이 */
+  thumbHeight?: number | string;
+  /** 추가 클래스명 */
+  className?: string;
+  /** 추가 스타일 */
+  style?: CSSProperties;
+  /** 카드 변형 (카드, 드로어, 모달 등) */
+  variant?: CardVariant;
+  /** 닫기 버튼 클릭 이벤트 핸들러 */
+  onClose?: () => void;
+  /** 구분선 표시 여부 */
+  divider?: boolean;
+  /** Drawer와 유사한 스타일을 적용할지 여부 */
+  isDrawer?: boolean;
+}
+
+export declare const Card: FC<CardProps>;

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

@@ -0,0 +1,25 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+
+export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+  items?: ReactNode[];
+  itemWidthRatio?: number;
+  itemCount?: number;
+  itemGap?: number;
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+  scaleRatio?: number;
+  opacityRatio?: number;
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+  style?: CSSProperties;
+  navBtn?: boolean;
+  leftBtnIcon?: ReactNode;
+  rightBtnIcon?: ReactNode;
+  effectType?: "overlap" | "fade" | "slide" | "scale" | "stack";
+  drag?: boolean;
+  onChange?: (index: number) => void;
+  currentIndex?: number;
+}
+
+export declare const Carousel: FC<CarouselProps>;

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

@@ -0,0 +1,40 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType
+} from "../commonType";
+
+export type CollapseSize = "sm" | "md" | "lg";
+
+export interface CollapseItem {
+  key: string;
+  label: ReactNode;
+  children: ReactNode;
+}
+
+export interface CollapseProps extends HTMLAttributes<HTMLDivElement> {
+  items?: CollapseItem[];
+  openKeys?: string[];
+  defaultOpenKeys?: string[];
+  onChange?: (openKeys: string[]) => void;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  headerColorType?: defaultColorType;
+  headerBackground?: string;
+  headerColor?: string;
+  contentColorType?: defaultColorType;
+  contentBackground?: string;
+  contentColor?: string;
+  shadow?: shadowType;
+  disabledKeys?: string[];
+  className?: string;
+  size?: CollapseSize;
+  shape?: shapeType;
+  style?: CSSProperties;
+}
+
+export declare const Collapse: FC<CollapseProps>;

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

@@ -0,0 +1,37 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType
+} from "../commonType";
+
+export type DrawerPlacement = "left" | "right" | "top" | "bottom";
+
+export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
+  onClose?: () => void;
+  title?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  colorType?: defaultColorType;
+  divider?: boolean;
+  dividerColor?: string;
+  background?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  shape?: shapeType;
+  shadow?: shadowType;
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+  placement?: DrawerPlacement;
+  style?: CSSProperties;
+  ariaLabel?: string;
+  ariaDescribedby?: string;
+}
+
+export declare const Drawer: FC<DrawerProps>;

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

@@ -0,0 +1,30 @@
+import type {
+  ReactNode,
+  CSSProperties,
+  FC,
+  HTMLAttributes,
+  MouseEvent
+} from "react";
+import type { shapeType, borderType, shadowType } from "../commonType";
+
+export interface ImageProps extends HTMLAttributes<HTMLDivElement> {
+  src: string;
+  alt?: string;
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+  style?: CSSProperties;
+  loading?: "lazy" | "eager";
+  mask?: ReactNode;
+  preview?: boolean;
+  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+  ratio?: string;
+  shape?: shapeType;
+  shadow?: shadowType;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number | string;
+  objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+}
+
+export declare const Image: FC<ImageProps>;

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

@@ -0,0 +1,20 @@
+import type { ReactNode, CSSProperties, HTMLAttributes } from "react";
+import type { PaginationProps } from "../navigation/Pagination";
+
+export interface ListProps<T = any> extends HTMLAttributes<HTMLDivElement> {
+  dataSource?: T[];
+  pagination?: boolean | PaginationProps;
+  gap?: number;
+  split?: boolean;
+  loading?: boolean;
+  emptyText?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  itemStyle?: CSSProperties;
+  listStyle?: CSSProperties;
+  virtualScroll?: boolean;
+  itemHeight?: number;
+  overscanCount?: number;
+}
+
+export declare const List: <T = any>(props: ListProps<T>) => React.ReactElement;

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

@@ -0,0 +1,36 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType
+} from "../commonType";
+
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
+  onClose?: () => void;
+  onEsc?: boolean;
+  title?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  colorType?: defaultColorType;
+  background?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  shape?: shapeType;
+  shadow?: shadowType;
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+  divider?: boolean;
+  dividerColor?: string;
+  style?: CSSProperties;
+  ariaLabel?: string;
+  ariaDescribedby?: string;
+  thumb?: ReactNode;
+}
+
+export declare const Modal: FC<ModalProps>;

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

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+import type { PopupBaseProps } from "../navigation/base/PopupBase";
+
+type PopoverBaseProps = Omit<PopupBaseProps, "variant">;
+
+export interface PopoverProps extends PopoverBaseProps {}
+
+export declare const Popover: FC<PopoverProps>;

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

@@ -0,0 +1,38 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType
+} from "../commonType";
+
+export type SegmentedSize = "sm" | "md" | "lg";
+
+export interface SegmentedOption {
+  value: string | number;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export interface SegmentedProps extends HTMLAttributes<HTMLDivElement> {
+  options?: (SegmentedOption | string | number)[];
+  value?: string | number;
+  onChange?: (value: string | number) => void;
+  disabled?: boolean;
+  size?: SegmentedSize;
+  block?: boolean;
+  colorType?: defaultColorType;
+  background?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  shadow?: shadowType;
+  shape?: shapeType;
+  style?: CSSProperties;
+  className?: string;
+  name?: string;
+}
+
+export declare const Segmented: FC<SegmentedProps>;

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

@@ -0,0 +1,56 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType
+} from "../commonType";
+import type { PaginationProps } from "../navigation/Pagination";
+
+export type TableSize = "sm" | "md" | "lg";
+
+export type TableSortOrder = "ascend" | "descend" | null;
+
+export interface TableColumn<T = any> {
+  key: string;
+  dataIndex?: string;
+  title: ReactNode;
+  width?: string | number;
+  col?: number;
+  sorter?: boolean | ((a: T, b: T) => number);
+  render?: (value: any, record: T, index: number) => ReactNode;
+  align?: "left" | "center" | "right";
+  className?: string;
+}
+
+export type TableSorter<T> = {
+  columnKey: keyof T;
+  order: TableSortOrder;
+} | null;
+
+export interface TableProps<T = any> extends HTMLAttributes<HTMLDivElement> {
+  columns: TableColumn<T>[];
+  dataSource: T[];
+  rowKey?: string | ((record: T) => string);
+  size?: TableSize;
+  colorType?: defaultColorType;
+  shape?: shapeType;
+  shadow?: shadowType;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  className?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  width?: string | number;
+  height?: string | number;
+  style?: CSSProperties;
+  pagination?: boolean | PaginationProps;
+  onChange?: (pagination: {}, filters: {}, sorter: TableSorter<T>) => void;
+  emptyText?: ReactNode;
+}
+
+export declare const Table: <T = any>(
+  props: TableProps<T>
+) => React.ReactElement;