@ncds/ui-admin 1.7.0 → 1.8.1

package/dist/types/src/components/data-grid/DataGrid.types.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { TableType } from '../table';
+export type DataGridVariant = 'search-result' | 'horizontal';
+export type ActionBarPosition = 'top' | 'bottom';
+export type ActionBarAlign = 'left' | 'right' | 'space-between';
+export type DataGridProps = Omit<ComponentProps<'div'>, 'ref'> & {
+    variant?: DataGridVariant;
+    children: ReactNode;
+};
+export type DataGridSearchFilterProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};
+export type DataGridSummaryProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};
+export type DataGridFilterBarProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};
+export type DataGridActionBarProps = Omit<ComponentProps<'div'>, 'ref'> & {
+    children: ReactNode;
+    position?: ActionBarPosition;
+    align?: ActionBarAlign;
+};
+export type DataGridTableProps = {
+    children: ReactNode;
+    className?: string;
+    type?: TableType;
+    fixedHeader?: boolean;
+    maxHeight?: string | number;
+    hoverable?: boolean;
+    selectable?: boolean;
+};
+export type DataGridPaginationProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};

package/dist/types/src/components/data-grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataGrid';
+export * from './DataGrid.types';

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

@@ -1,7 +1,7 @@
-import type { Options } from 'flatpickr/dist/types/options';
+import type { DateOption, Options } from 'flatpickr/dist/types/options';
 import { type DateTimePickerHandle, type DateTimePickerProps } from 'react-flatpickr';
 import type { Size } from '../../../constant/size';
-type DatePickerProps = {
+export type DatePickerProps = {
     size?: Extract<Size, 'xs' | 'sm'>;
     shouldFocus?: boolean;
     currentDate: string;
@@ -10,15 +10,19 @@ type DatePickerProps = {
     placeholder?: string;
     isEndDate?: boolean;
     className?: string;
+    /**
+     * 캘린더를 body에 포탈 마운트합니다.
+     * overflow: auto/scroll/hidden이 적용된 스크롤 컨테이너 안에서
+     * 캘린더가 잘리는 문제를 해결합니다.
+     */
+    portal?: boolean;
     onChangeDate: (date: string) => void;
     onValidationError?: (error: {
         date: Date;
-        minDate?: any;
-        maxDate?: any;
+        minDate?: DateOption;
+        maxDate?: DateOption;
         violations: Array<'minDate' | 'maxDate'>;
         previousDate?: Date;
     }) => void;
 } & Omit<DateTimePickerProps, 'size' | 'options' | 'value'>;
-declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;
-export { DatePicker };
-export type { DatePickerProps };
+export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;

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

@@ -1,4 +1,2 @@
 export * from './DatePicker';
-export * from './RangeDatePicker';
-export * from './RangeDatePickerWithButtons';
 export * from './utils';

package/dist/types/src/components/file-input/FileInput.d.ts

@@ -1,4 +1,4 @@
-import type { InputBaseProps } from '../input/InputBase';
+import type { InputBaseProps } from '../input-base/InputBase';
 export declare enum FileInputErrorType {
     ALREADY_UPLOADED = "ALREADY_UPLOADED",
     EXCEED_MAX_FILE_SIZE = "EXCEED_MAX_FILE_SIZE",

package/dist/{temp/src/components/tab → types/src/components/horizontal-tab}/HorizontalTab.d.ts

@@ -1,4 +1,4 @@
-import { type TabButtonProps, type TabSize, type TabType } from './TabButton';
+import { type TabButtonProps, type TabSize, type TabType } from '../tab/TabButton';
 type HorizontalTabProps = {
     type?: Exclude<TabType, 'line-vertical'>;
     size?: TabSize;

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

@@ -0,0 +1 @@
+export * from './HorizontalTab';

package/dist/types/src/components/image-file-input/ImageFileInput.d.ts

@@ -1,5 +1,5 @@
 import { type InvalidFile } from '../file-input/FileInput';
-import type { InputBaseProps } from '../input/InputBase';
+import type { InputBaseProps } from '../input-base/InputBase';
 export interface ImageFileInputProps extends Omit<InputBaseProps, 'clearText' | 'onClearText' | 'hintText' | 'value' | 'onChange'> {
     /**
      * Accepted file types

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

@@ -1,10 +1,14 @@
 export type { SideSlotType, SlotIconComponent } from '../types';
 export * from './badge';
-export * from './breadcrumb';
+export * from './badge-group';
+export * from './bread-crumb';
 export * from './button';
-export * from './carousel';
+export * from './button-group';
+export * from './carousel-arrow';
+export * from './carousel-number-group';
 export * from './checkbox';
-export * from './combobox';
+export * from './combo-box';
+export * from './data-grid';
 export * from './date-picker';
 export * from './divider';
 export * from './dot';
@@ -12,22 +16,30 @@ export * from './dropdown';
 export * from './empty-state';
 export * from './featured-icon';
 export * from './file-input';
+export * from './horizontal-tab';
 export * from './image-file-input';
-export * from './input';
+export * from './input-base';
 export * from './modal';
 export * from './notification';
+export * from './number-input';
 export * from './pagination';
+export * from './password-input';
 export * from './progress-bar';
 export * from './progress-circle';
 export * from './radio';
+export * from './range-date-picker';
+export * from './range-date-picker-with-buttons';
 export * from './select';
+export * from './select-box';
 export * from './select-dropdown';
-export * from './selectbox';
 export * from './shared';
 export * from './slider';
 export * from './spinner';
 export * from './switch';
 export * from './tab';
+export * from './table';
 export * from './tag';
+export * from './textarea';
 export * from './toggle';
 export * from './tooltip';
+export * from './vertical-tab';

package/dist/types/src/components/{input → input-base}/InputBase.d.ts

@@ -32,6 +32,7 @@ interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     hintText?: string;
     size?: Extract<Size, 'xs' | 'sm'>;
     disabled?: boolean;
+    fullWidth?: boolean;
     validation?: boolean;
     destructive?: boolean;
     leadingElement?: InputLeadingSlotType;

package/dist/types/src/components/input-base/index.d.ts

@@ -0,0 +1 @@
+export * from './InputBase';

package/dist/{temp/src/components/input → types/src/components/number-input}/NumberInput.d.ts

@@ -1,4 +1,4 @@
-import { type InputBaseProps } from './InputBase';
+import { type InputBaseProps } from '../input-base/InputBase';
 type NumberInputProps = InputBaseProps & {
     minValue?: number;
     maxValue?: number;

package/dist/types/src/components/number-input/index.d.ts

@@ -0,0 +1 @@
+export * from './NumberInput';

package/dist/types/src/components/{input → password-input}/PasswordInput.d.ts

@@ -1,2 +1,2 @@
-import { type InputBaseProps } from './InputBase';
+import { type InputBaseProps } from '../input-base/InputBase';
 export declare const PasswordInput: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/src/components/password-input/index.d.ts

@@ -0,0 +1 @@
+export * from './PasswordInput';

package/dist/{temp/src/components/date-picker → types/src/components/range-date-picker}/RangeDatePicker.d.ts

@@ -1,5 +1,5 @@
 import { type unitOfTime } from 'moment';
-import { type DatePickerProps } from './DatePicker';
+import { type DatePickerProps } from '../date-picker/DatePicker';
 type RangeDatePickerProps = {
     startDateOptions: DatePickerProps;
     endDateOptions: DatePickerProps;

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

@@ -0,0 +1 @@
+export * from './RangeDatePicker';

package/dist/{temp/src/components/date-picker → types/src/components/range-date-picker-with-buttons}/RangeDatePickerWithButtons.d.ts

@@ -1,6 +1,6 @@
 import { type Dispatch, type SetStateAction } from 'react';
 import { PERIOD_ITEM, type PeriodItemMap } from '../../constant/date-picker';
-import { type RangeDatePickerProps } from './RangeDatePicker';
+import { type RangeDatePickerProps } from '../range-date-picker/RangeDatePicker';
 type PeriodKeyType = keyof typeof PERIOD_ITEM;
 type RangeDatePickerWithButtonsProps<T extends PeriodItemMap = typeof PERIOD_ITEM> = {
     useYesterdayAsEndDate?: boolean;

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

@@ -0,0 +1 @@
+export * from './RangeDatePickerWithButtons';

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

@@ -1,3 +1 @@
-export * from './HorizontalTab';
 export * from './TabButton';
-export * from './VerticalTab';

package/dist/types/src/components/table/Table.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import type { SortDirection, TableBodyProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
+export declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    type?: import("./types").TableType | undefined;
+    fixedHeader?: boolean | undefined;
+    maxHeight?: string | number | undefined;
+    hoverable?: boolean | undefined;
+    selectable?: boolean | undefined;
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Header: {
+        ({ children, className }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, className }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Row: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+        selected?: boolean | undefined;
+        status?: import("./types").RowStatus | undefined;
+    } & import("react").RefAttributes<HTMLTableRowElement>>;
+    HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
+        sortDirection?: SortDirection | undefined;
+        onSort?: (() => void) | undefined;
+        width?: string | number | undefined;
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
+    Cell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+        isHeader?: boolean | undefined;
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
+    Footer: {
+        ({ children, className }: TableFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Pagination: {
+        ({ children, className }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ColGroup: {
+        ({ widths }: TableColGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Empty: {
+        ({ colSpan, children }: TableEmptyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type { RowStatus, SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowProps, TableType, } from './types';

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

@@ -0,0 +1 @@
+export * from './Table';

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

@@ -0,0 +1,47 @@
+import type { ComponentProps, ReactNode } from 'react';
+export type TableType = 'horizontal' | 'vertical';
+export type SortDirection = 'asc' | 'desc' | 'none';
+export type RowStatus = 'warning' | 'error';
+export type TableProps = Omit<ComponentProps<'div'>, 'ref'> & {
+    type?: TableType;
+    fixedHeader?: boolean;
+    maxHeight?: string | number;
+    hoverable?: boolean;
+    selectable?: boolean;
+    children: ReactNode;
+};
+export type TableHeaderProps = {
+    children: ReactNode;
+    className?: string;
+};
+export type TableBodyProps = {
+    children: ReactNode;
+    className?: string;
+};
+export type TableRowProps = Omit<ComponentProps<'tr'>, 'ref'> & {
+    selected?: boolean;
+    status?: RowStatus;
+};
+export type TableHeaderCellProps = Omit<ComponentProps<'th'>, 'ref'> & {
+    sortDirection?: SortDirection;
+    onSort?: () => void;
+    width?: string | number;
+};
+export type TableCellProps = Omit<ComponentProps<'td'>, 'ref'> & {
+    isHeader?: boolean;
+};
+export type TableFooterProps = {
+    children: ReactNode;
+    className?: string;
+};
+export type TablePaginationProps = {
+    children: ReactNode;
+    className?: string;
+};
+export type TableColGroupProps = {
+    widths: (string | number)[];
+};
+export type TableEmptyProps = {
+    colSpan: number;
+    children?: ReactNode;
+};

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

@@ -0,0 +1 @@
+export * from './Textarea';

package/dist/types/src/components/{tab → vertical-tab}/VerticalTab.d.ts

@@ -1,4 +1,4 @@
-import { type TabButtonProps } from './TabButton';
+import { type TabButtonProps } from '../tab/TabButton';
 export type VerticalTabProps = {
     type?: 'button-primary' | 'button-white' | 'line-vertical';
     breakPoint?: 'mobile' | 'pc';

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

@@ -0,0 +1 @@
+export * from './VerticalTab';