@ncds/ui-admin 0.0.22 → 0.0.24

package/dist/types/index.d.ts

@@ -1,10 +1,8 @@
 export * from './src/components/badge';
-export * from './src/components/breadcrumb';
 export * from './src/components/button';
 export * from './src/components/carousel';
 export * from './src/components/checkbox';
 export * from './src/components/date-picker';
-export * from './src/components/dropdown';
 export * from './src/components/input';
 export * from './src/components/pagination';
 export * from './src/components/radio';
@@ -13,7 +11,6 @@ export * from './src/components/shared/hintText';
 export * from './src/components/shared/label';
 export * from './src/components/shared';
 export * from './src/components/spinner';
-export * from './src/components/tag';
 export * from './src/components/toggle';
 export * from './src/components/tooltip';
 export * from './src/components';

package/dist/types/src/components/button/Button.d.ts

@@ -14,7 +14,7 @@ export type CustomSlotType = {
     children: ReactNode;
 };
 export type SideSlotType = IconSlotType | CustomSlotType;
-export type ButtonSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
+export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentProps<T>, 'ref'> & {
     label: string;
     className?: string;
@@ -38,6 +38,7 @@ type AnchorElementProps = CommonButtonProps<'a'> & {
 };
 export type ButtonProps = ButtonElementProps | AnchorElementProps;
 export declare const svgSize: Record<ButtonSize, number>;
+export declare const iconOnlySvgSize: Record<ButtonSize, number>;
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/dist/types/src/components/button/ButtonGroup.d.ts

@@ -1,14 +1,15 @@
 import { IconName } from '@ncds/ui-admin-icon';
 import React, { ComponentProps } from 'react';
 import { ColorKeyType } from '../../../constant/color';
-import { ButtonSize } from './Button';
+import { Size } from '../../../constant/size';
+type ButtonGroupSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
 interface SideCommon {
     position?: 'leading' | 'trailing';
 }
 interface SideIcon {
     type: 'icon';
-    name: IconName;
-    size?: ButtonSize;
+    icon: IconName;
+    size?: ButtonGroupSize;
     color?: ColorKeyType;
 }
 interface SideCustom {
@@ -24,7 +25,7 @@ interface ButtonGroupItemCommonProps {
     disabled?: boolean;
 }
 interface ButtonGroupItemButtonProps extends ButtonGroupItemCommonProps, ComponentProps<'button'> {
-    as: 'button';
+    as?: 'button';
 }
 interface ButtonGroupItemAnchorProps extends ButtonGroupItemCommonProps, ComponentProps<'a'> {
     as: 'a';
@@ -33,7 +34,7 @@ interface ButtonGroupItemAnchorProps extends ButtonGroupItemCommonProps, Compone
 type ButtonGroupItemProps = ButtonGroupItemButtonProps | ButtonGroupItemAnchorProps;
 interface ButtonGroupProps {
     className?: string;
-    size?: ButtonSize;
+    size?: ButtonGroupSize;
     children: React.ReactNode;
     hasBorder?: boolean;
     onlyIcon?: boolean;

package/dist/types/src/components/date-picker/index.d.ts

@@ -1,4 +1,3 @@
 export * from './DatePicker';
 export * from './RangeDatePicker';
-export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/divider/Divider.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type DividerType = 'text' | 'heading' | 'button' | 'button-group' | 'button-icon' | 'button-group-icon';
+export type DividerStyle = 'single-line' | 'background-fill';
+export interface DividerProps {
+    className?: string;
+    type: DividerType;
+    style?: DividerStyle;
+    children: ReactNode;
+}
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/types/src/components/divider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Divider';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,14 @@
+import { ButtonProps } from '../button/Button';
+export interface ButtonOptions extends Pick<ButtonProps, 'hierarchy' | 'size' | 'leadingIcon' | 'trailingIcon'> {
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+interface EmptyStateProps {
+    title: string;
+    description: string;
+    buttons?: ButtonOptions | ButtonOptions[];
+}
+export declare const EmptyState: ({ title, description, buttons }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/types/src/components/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+export * from './EmptyState';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/featured-icon/FeaturedIcon.d.ts

@@ -0,0 +1,14 @@
+import { IconName } from '@ncds/ui-admin-icon';
+import { ComponentPropsWithoutRef } from 'react';
+export type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
+export type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
+export type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface FeaturedIconProps extends Omit<ComponentPropsWithoutRef<'div'>, 'color'> {
+    name: IconName;
+    theme?: FeaturedIconTheme;
+    color?: FeaturedIconColor;
+    size?: FeaturedIconSize;
+    className?: string;
+}
+export declare const FeaturedIcon: import("react").ForwardRefExoticComponent<FeaturedIconProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FeaturedIcon.d.ts.map

package/dist/types/src/components/featured-icon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FeaturedIcon';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts

@@ -4,13 +4,20 @@ export * from './button';
 export * from './carousel';
 export * from './checkbox';
 export * from './date-picker';
-export * from './dropdown';
+export * from './featured-icon';
+export * from './divider';
+export * from './empty-state';
 export * from './input';
+export * from './modal';
+export * from './notification';
 export * from './pagination';
+export * from './progress-bar';
+export * from './progress-circle';
 export * from './radio';
 export * from './select';
 export * from './shared';
 export * from './spinner';
+export * from './tab';
 export * from './tag';
 export * from './toggle';
 export * from './tooltip';

package/dist/types/src/components/input/InputBase.d.ts

@@ -14,6 +14,7 @@ interface InputSideTextSlot {
 interface InputSideIconSlot {
     type: 'icon';
     icon: IconName;
+    size?: number | string;
     color?: keyof typeof COLOR;
     className?: string;
 }
@@ -34,6 +35,7 @@ interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     destructive?: boolean;
     leadingElement?: InputLeadingSlotType;
     trailingElement?: InputTrailingSlotType;
+    showHelpIcon?: boolean;
 }
 interface NoneClearableInputBaseProps extends InputBaseCommonProps {
     clearText?: never;

package/dist/types/src/components/modal/Modal.d.ts

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react';
+import { FeaturedIconColor, FeaturedIconTheme } from '../featured-icon';
+import { IconName } from '@ncds/ui-admin-icon';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ModalHeaderAlign = 'left' | 'center' | 'horizontal';
+export type ModalAlign = 'center' | 'right' | 'stretch';
+export type ModalActionsLayout = 'vertical' | 'horizontal' | 'checkbox';
+export type ModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    size?: ModalSize;
+    children: ReactNode;
+    closeOnBackdropClick?: boolean;
+    closeOnEsc?: boolean;
+    className?: string;
+};
+export declare const Modal: {
+    ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, className, ...restProps }: ModalProps): import("react").ReactPortal | null;
+    Header({ children, onClose, featuredIcon, title, subtitle, align, showDivider, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+    Content({ children }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Modal.Actions - The actions area of the modal
+     *
+     * Examples:
+     *
+     * 1. Vertical layout (buttons stacked):
+     * <Modal.Actions layout="vertical" align="stretch">
+     *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     * </Modal.Actions>
+     *
+     * 2. Horizontal layout (buttons side by side):
+     * <Modal.Actions layout="horizontal" align="stretch">
+     *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     * </Modal.Actions>
+     *
+     * 3. Checkbox layout (checkbox on left, buttons on right):
+     * <Modal.Actions layout="checkbox" align="stretch" checkboxContent={
+     *   <>
+     *     <Checkbox text="Never show again" />
+     *     <a href="#">Settings</a>
+     *   </>
+     * }>
+     *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     * </Modal.Actions>
+     */
+    Actions({ children, layout, showDivider, align, checkboxContent, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
+};
+export type ModalHeaderProps = {
+    children?: ReactNode;
+    onClose: () => void;
+    featuredIcon?: {
+        name: IconName;
+        color: FeaturedIconColor;
+        theme: FeaturedIconTheme;
+    };
+    align?: ModalHeaderAlign;
+    title?: string;
+    subtitle?: string;
+    showDivider?: boolean;
+    hideCloseButton?: boolean;
+};
+export type ModalContentProps = {
+    children: ReactNode;
+};
+export type ModalActionsProps = {
+    children: ReactNode;
+    layout?: ModalActionsLayout;
+    showDivider?: boolean;
+    align?: 'left' | 'center' | 'right' | 'stretch';
+    checkboxContent?: ReactNode;
+};
+//# sourceMappingURL=Modal.d.ts.map

package/dist/types/src/components/modal/index.d.ts

@@ -0,0 +1,3 @@
+export { Modal } from './Modal';
+export type { ModalProps, ModalSize } from './Modal';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/notification/FloatingNotification.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type FloatingNotificationVariant = 'neutral' | 'error' | 'warning' | 'success';
+export type FloatingNotificationSize = 'desktop' | 'mobile';
+export interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    variant?: FloatingNotificationVariant;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 버튼 영역 (선택사항)
+     */
+    actions?: ReactNode;
+}
+export declare const FloatingNotification: import("react").ForwardRefExoticComponent<FloatingNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FloatingNotification.d.ts.map

package/dist/types/src/components/notification/FullWidthNotification.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type FullWidthNotificationVariant = 'neutral' | 'error' | 'warning' | 'success';
+export type FullWidthNotificationSize = 'desktop' | 'mobile';
+export interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    variant?: FullWidthNotificationVariant;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 버튼 영역 (선택사항)
+     */
+    actions?: ReactNode;
+}
+export declare const FullWidthNotification: import("react").ForwardRefExoticComponent<FullWidthNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FullWidthNotification.d.ts.map

package/dist/types/src/components/notification/Notification.d.ts

@@ -0,0 +1,59 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { IconName } from '@ncds/ui-admin-icon';
+import { ButtonTheme } from '../button';
+export type NotificationType = 'floating' | 'full-width';
+export type NotificationVariant = 'neutral' | 'error' | 'warning' | 'success';
+export type NotificationSize = 'desktop' | 'mobile';
+export interface NotificationAction {
+    /**
+     * 액션 버튼 텍스트
+     */
+    label: string;
+    /**
+     * 액션 버튼 클릭 이벤트 핸들러
+     */
+    onClick?: () => void;
+    /**
+     * 액션 버튼 색상 (3가지만 지원)
+     */
+    hierarchy?: Extract<ButtonTheme, 'secondary-gray' | 'link-gray' | 'link'>;
+}
+export interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 유형 (floating: 측면에 표시되는 알림, full-width: 전체 너비 알림)
+     * @default 'floating'
+     */
+    type?: NotificationType;
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 아이콘 이름 (지정하지 않으면 variant에 따라 기본 아이콘 사용)
+     */
+    icon?: IconName;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    variant?: NotificationVariant;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 액션 버튼 영역 (선택사항)
+     * NotificationAction[]
+     */
+    actions?: NotificationAction[];
+}
+export declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Notification.d.ts.map

package/dist/types/src/components/notification/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Notification';
+export * from './FloatingNotification';
+export * from './FullWidthNotification';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/pagination/NavButton.d.ts

@@ -20,10 +20,10 @@ declare const NAV_BUTTON_CONFIG: {
         readonly getIcon: (isPC: boolean) => string;
     };
 };
-export declare const NavButton: ({ type, as, isPC, noPrev, noNext, href, target, onClick, }: {
+export declare const NavButton: ({ type, as, breakPoint, noPrev, noNext, href, target, onClick, }: {
     type: keyof typeof NAV_BUTTON_CONFIG;
     as: 'button' | 'a';
-    isPC: boolean;
+    breakPoint: 'pc' | 'mo';
     noPrev: boolean;
     noNext: boolean;
     href: string;

package/dist/types/src/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,7 @@
+export type ProgressLabel = 'right' | 'bottom' | 'top-float' | 'bottom-float';
+export interface ProgressBarProps {
+    label?: ProgressLabel;
+    value: number;
+}
+export declare const ProgressBar: ({ label, value }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/types/src/components/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ProgressBar';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/progress-circle/ProgressCircle.d.ts

@@ -0,0 +1,8 @@
+export interface ProgressCircleProps {
+    size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+    label?: string;
+    value: number;
+    theme?: 'circle' | 'half-circle';
+}
+export declare const ProgressCircle: ({ size, label, value, theme }: ProgressCircleProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressCircle.d.ts.map

package/dist/types/src/components/progress-circle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ProgressCircle';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/slider/Slider.d.ts

@@ -0,0 +1,15 @@
+import { SliderOptions } from '../../../assets/scripts/slider';
+export type SliderLabelPosition = SliderOptions['labelPosition'];
+export interface SliderProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number | [number, number];
+    onChange?: (value: number | [number, number]) => void;
+    labelPosition?: SliderLabelPosition;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const Slider: ({ min, max, step, value, onChange, labelPosition, disabled, className, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export default Slider;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/types/src/components/slider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Slider';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/tab/HorizontalTab.d.ts

@@ -0,0 +1,12 @@
+import 'swiper/css';
+import { TabButtonProps, TabType } from './TabButton';
+export type HorizontalTabProps = {
+    type?: TabType;
+    size?: 'xs' | 'sm' | 'md';
+    activeTab?: string;
+    fullWidth?: boolean;
+    menus?: Array<TabButtonProps>;
+    onClick?: (id: string) => void;
+};
+export declare const HorizontalTab: ({ type, size, activeTab, onClick, fullWidth, menus, }: HorizontalTabProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HorizontalTab.d.ts.map

package/dist/types/src/components/tab/TabButton.d.ts

@@ -0,0 +1,26 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { BadgeProps } from '../badge/Badge';
+export type TabSize = 'xs' | 'sm' | 'md';
+export type TabType = 'button-primary' | 'button-white' | 'underline' | 'underline-fill' | 'line-vertical';
+interface CommonProps {
+    id?: string;
+    label: string;
+    size?: TabSize;
+    tabButtonType?: TabType;
+    isActive?: boolean;
+    badgeInfo?: BadgeProps;
+    className?: string;
+    children?: ReactNode;
+    onClick?: () => void;
+}
+export type TabButtonAsButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
+export type TabButtonAsLinkProps = CommonProps & {
+    href: string;
+    target?: '_self' | '_blank';
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'>;
+export type TabButtonProps = (TabButtonAsButtonProps & {
+    href?: never;
+}) | TabButtonAsLinkProps;
+export declare const TabButton: ({ label, size, tabButtonType, type, isActive, badgeInfo, className, children, ...props }: TabButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TabButton.d.ts.map

package/dist/types/src/components/tab/VerticalTab.d.ts

@@ -0,0 +1,10 @@
+import { TabButtonProps } from './TabButton';
+export type VerticalTabProps = {
+    type?: 'button-primary' | 'button-white' | 'line-vertical';
+    breakPoint?: 'mobile' | 'pc';
+    activeTab?: string;
+    menus?: Array<TabButtonProps>;
+    onClick?: (id: string) => void;
+};
+export declare const VerticalTab: ({ type, breakPoint, activeTab, menus, onClick, }: VerticalTabProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VerticalTab.d.ts.map

package/dist/types/src/components/tab/index.d.ts

@@ -0,0 +1,4 @@
+export * from './HorizontalTab';
+export * from './TabButton';
+export * from './VerticalTab';
+//# sourceMappingURL=index.d.ts.map