@ncds/ui-admin 0.0.22 → 0.0.23

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