@ncds/ui-admin 1.8.2 → 1.8.3

package/dist/temp/src/components/{input-base → forms-and-input/input-base}/InputBase.d.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
-import { COLOR } from '../../../constant/color';
-import type { Size } from '../../../constant/size';
-import type { SlotIconComponent } from '../../types/side-slot';
+import { COLOR } from '../../../../constant/color';
+import type { Size } from '../../../../constant/size';
+import type { SlotIconComponent } from '../../../types/side-slot';
 interface InputSideButtonSlot {
     type: 'button';
     label: string;

package/dist/temp/src/components/{input-base → forms-and-input/input-base}/InputBase.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle, HelpCircle, InfoCircle, X } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
-import { HintText } from '../shared/hintText/HintText';
-import { Label } from '../shared/label/Label';
+import { COLOR } from '../../../../constant/color';
+import { HintText } from '../../shared/hintText/HintText';
+import { Label } from '../../shared/label/Label';
 const validationSvgSize = {
     xs: 14,
     sm: 16,

package/dist/temp/src/components/{number-input → forms-and-input/number-input}/NumberInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef } from 'react';
-import { useMergeRefs } from '../../hooks';
-import { ButtonStepper } from '../button';
+import { useMergeRefs } from '../../../hooks';
+import { ButtonStepper } from '../../action/button';
 import { InputBase } from '../input-base/InputBase';
 export const NumberInput = forwardRef(({ size = 'xs', minValue, maxValue, step = 1, stepperPosition, disabled, ...props }, ref) => {
     const inputRef = useRef(null);

package/dist/temp/src/components/{radio → forms-and-input/radio}/RadioInput.d.ts

@@ -1,5 +1,5 @@
 import { type ChangeEvent, type ComponentPropsWithRef } from 'react';
-import type { Size } from '../../../constant/size';
+import type { Size } from '../../../../constant/size';
 export interface RadioInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'ref'> {
     size?: Extract<Size, 'xs' | 'sm'>;
     destructive?: boolean;

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

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

package/dist/temp/src/components/{range-date-picker-with-buttons → forms-and-input/range-date-picker-with-buttons}/RangeDatePickerWithButtons.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { PERIOD_ITEM } from '../../constant/date-picker';
-import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
-import { ButtonGroup } from '../button-group';
+import { PERIOD_ITEM } from '../../../constant/date-picker';
+import { getDateFormat, getSubtractDate } from '../../../utils/date-picker';
+import { ButtonGroup } from '../../action/button-group';
 import { RangeDatePicker } from '../range-date-picker/RangeDatePicker';
 const RangeDatePickerWithButtons = ({ useYesterdayAsEndDate = false, size = 'xs', currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, periodItems, onDateValidation, }) => {
     const items = (periodItems ?? PERIOD_ITEM);

package/dist/temp/src/components/{select → forms-and-input/select}/Select.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type { UseFormRegisterReturn } from 'react-hook-form';
-import type { Size } from '../../../constant/size';
-import type { OptionType } from '../../types/dropdown';
+import type { Size } from '../../../../constant/size';
+import type { OptionType } from '../../../types/dropdown';
 export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'size'> {
     placeholder?: string;
     disabledPlaceholder?: boolean;

package/dist/temp/src/components/{select → forms-and-input/select}/Select.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-import { HintText } from '../shared/hintText/HintText';
+import { HintText } from '../../shared/hintText/HintText';
 export const Select = forwardRef(({ placeholder, disabledPlaceholder = false, id, className, hintText, children, size = 'xs', type = 'default', destructive = false, value, optionItems, register, disabled = false, ...props }, ref) => {
     return (_jsxs("span", { className: classNames('ncua-select', {
             destructive: destructive,

package/dist/temp/src/components/{select-box → forms-and-input/select-box}/SelectBox.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type { UseFormRegisterReturn } from 'react-hook-form';
-import type { Size } from '../../../constant/size';
-import type { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
+import type { Size } from '../../../../constant/size';
+import type { OptionChangeHandler, OptionType, OptionValue } from '../../../types/dropdown';
 declare const DEFAULT_MAX_HEIGHT = 275;
 type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> & {
     children?: ReactNode;

package/dist/temp/src/components/{select-box → forms-and-input/select-box}/SelectBox.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronDown } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { COLOR } from '../../../constant/color';
-import { useDropdown, useScrollLock } from '../../hooks/dropdown';
-import { useMultiSelect } from '../../utils/dropdown/multiSelect';
-import { SelectDropdown } from '../select-dropdown';
-import { HintText } from '../shared/hintText/HintText';
-import { Tag } from '../tag';
+import { COLOR } from '../../../../constant/color';
+import { useDropdown, useScrollLock } from '../../../hooks/dropdown';
+import { useMultiSelect } from '../../../utils/dropdown/multiSelect';
+import { Tag } from '../../feedback-and-status/tag';
+import { SelectDropdown } from '../../select-dropdown';
+import { HintText } from '../../shared/hintText/HintText';
 const ICON_SIZE_XS = 14;
 const ICON_SIZE_SM = 16;
 const DEFAULT_MAX_HEIGHT = 275;

package/dist/temp/src/components/{slider → forms-and-input/slider}/Slider.d.ts

@@ -1,4 +1,4 @@
-import { type SliderOptions } from '../../../assets/scripts/slider';
+import { type SliderOptions } from '../../../../assets/scripts/slider';
 export type SliderLabelPosition = SliderOptions['labelPosition'];
 export interface SliderProps {
     min?: number;

package/dist/temp/src/components/{slider → forms-and-input/slider}/Slider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { Slider as NcuaSlider } from '../../../assets/scripts/slider';
+import { Slider as NcuaSlider } from '../../../../assets/scripts/slider';
 export const Slider = ({ min = 0, max = 100, step = 1, value = 0, onChange, labelPosition, disabled = false, className, }) => {
     const containerRef = useRef(null);
     const sliderInstanceRef = useRef(null);

package/dist/{types/src/components → temp/src/components/forms-and-input}/switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode, type Ref } from 'react';
-import type { Size } from '../../../constant/size';
+import type { Size } from '../../../../constant/size';
 type SwitchOption = {
     label: ReactNode;
     value: string | boolean;

package/dist/{types/src/components → temp/src/components/forms-and-input}/textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithRef } from 'react';
-import type { Size } from '../../../constant/size';
+import type { Size } from '../../../../constant/size';
 interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
     className?: string;
     size?: Extract<Size, 'xs' | 'sm'>;

package/dist/temp/src/components/{textarea → forms-and-input/textarea}/Textarea.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { HintText } from '../shared/hintText/HintText';
-import { Label } from '../shared/label/Label';
+import { HintText } from '../../shared/hintText/HintText';
+import { Label } from '../../shared/label/Label';
 export const Textarea = forwardRef(({ className, size = 'xs', label, required, disabled, hintText, characterCount, destructive, ...props }, ref) => {
     const textareaRef = useRef(null);
     const [textCount, setTextCount] = useState(0);

package/dist/temp/src/components/{dot → image-and-icons/dot}/Dot.d.ts

@@ -1,6 +1,6 @@
 import { type HTMLAttributes } from 'react';
-import type { ColorTone } from '../../../constant/color';
-import type { Size } from '../../../constant/size';
+import type { ColorTone } from '../../../../constant/color';
+import type { Size } from '../../../../constant/size';
 type DotColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 type DotSize = Extract<Size, 'sm' | 'md' | 'lg'>;
 interface DotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {

package/dist/temp/src/components/{featured-icon → image-and-icons/featured-icon}/FeaturedIcon.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef } from 'react';
-import type { SlotIconComponent } from '../../types/side-slot';
+import type { SlotIconComponent } from '../../../types/side-slot';
 type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
 type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
 type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';

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

@@ -1,45 +1,45 @@
 export type { SideSlotType, SlotIconComponent } from '../types';
-export * from './badge';
-export * from './badge-group';
-export * from './bread-crumb';
-export * from './button';
-export * from './button-group';
-export * from './carousel-arrow';
-export * from './carousel-number-group';
-export * from './checkbox';
-export * from './combo-box';
-export * from './data-grid';
-export * from './date-picker';
-export * from './divider';
-export * from './dot';
-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-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 './action/button';
+export * from './action/button-group';
+export * from './data-display/data-grid';
+export * from './data-display/table';
+export * from './feedback-and-status/badge';
+export * from './feedback-and-status/badge-group';
+export * from './feedback-and-status/carousel-arrow';
+export * from './feedback-and-status/carousel-number-group';
+export * from './feedback-and-status/empty-state';
+export * from './feedback-and-status/progress-bar';
+export * from './feedback-and-status/progress-circle';
+export * from './feedback-and-status/spinner';
+export * from './feedback-and-status/tag';
+export * from './forms-and-input/checkbox';
+export * from './forms-and-input/combo-box';
+export * from './forms-and-input/date-picker';
+export * from './forms-and-input/file-input';
+export * from './forms-and-input/image-file-input';
+export * from './forms-and-input/input-base';
+export * from './forms-and-input/number-input';
+export * from './forms-and-input/password-input';
+export * from './forms-and-input/radio';
+export * from './forms-and-input/range-date-picker';
+export * from './forms-and-input/range-date-picker-with-buttons';
+export * from './forms-and-input/select';
+export * from './forms-and-input/select-box';
+export * from './forms-and-input/slider';
+export * from './forms-and-input/switch';
+export * from './forms-and-input/textarea';
+export * from './forms-and-input/toggle';
+export * from './image-and-icons/dot';
+export * from './image-and-icons/featured-icon';
+export * from './layout/divider';
+export * from './navigation/bread-crumb';
+export * from './navigation/horizontal-tab';
+export * from './navigation/pagination';
+export * from './navigation/vertical-tab';
+export * from './overlays/dropdown';
+export * from './overlays/modal';
+export * from './overlays/notification';
+export * from './overlays/tooltip';
 export * from './select-dropdown';
 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/temp/src/components/index.js

@@ -1,44 +1,53 @@
-export * from './badge';
-export * from './badge-group';
-export * from './bread-crumb';
-export * from './button';
-export * from './button-group';
-export * from './carousel-arrow';
-export * from './carousel-number-group';
-export * from './checkbox';
-export * from './combo-box';
-export * from './data-grid';
-export * from './date-picker';
-export * from './divider';
-export * from './dot';
-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-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';
+// Action
+export * from './action/button';
+export * from './action/button-group';
+// Data Display
+export * from './data-display/data-grid';
+export * from './data-display/table';
+// Feedback & Status
+export * from './feedback-and-status/badge';
+export * from './feedback-and-status/badge-group';
+export * from './feedback-and-status/carousel-arrow';
+export * from './feedback-and-status/carousel-number-group';
+export * from './feedback-and-status/empty-state';
+export * from './feedback-and-status/progress-bar';
+export * from './feedback-and-status/progress-circle';
+export * from './feedback-and-status/spinner';
+export * from './feedback-and-status/tag';
+// Forms and Input
+export * from './forms-and-input/checkbox';
+export * from './forms-and-input/combo-box';
+export * from './forms-and-input/date-picker';
+export * from './forms-and-input/file-input';
+export * from './forms-and-input/image-file-input';
+export * from './forms-and-input/input-base';
+export * from './forms-and-input/number-input';
+export * from './forms-and-input/password-input';
+export * from './forms-and-input/radio';
+export * from './forms-and-input/range-date-picker';
+export * from './forms-and-input/range-date-picker-with-buttons';
+export * from './forms-and-input/select';
+export * from './forms-and-input/select-box';
+export * from './forms-and-input/slider';
+export * from './forms-and-input/switch';
+export * from './forms-and-input/textarea';
+export * from './forms-and-input/toggle';
+// Image and Icons
+export * from './image-and-icons/dot';
+export * from './image-and-icons/featured-icon';
+// Layout
+export * from './layout/divider';
+// Navigation
+export * from './navigation/bread-crumb';
+export * from './navigation/horizontal-tab';
+export * from './navigation/pagination';
+export * from './navigation/vertical-tab';
+// Overlays
+export * from './overlays/dropdown';
+export * from './overlays/modal';
+export * from './overlays/notification';
+export * from './overlays/tooltip';
+// Shared
 export * from './select-dropdown';
 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/temp/src/components/{horizontal-tab → navigation/horizontal-tab}/HorizontalTab.d.ts

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

package/dist/temp/src/components/{horizontal-tab → navigation/horizontal-tab}/HorizontalTab.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { uniqueId } from 'lodash-es';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { TabButton } from '../tab/TabButton';
+import { TabButton } from '../../tab/TabButton';
 const UNDERLINE_GAP = 16;
 const DEFAULT_GAP = 8;
 const HorizontalTab = ({ type = 'button-primary', size = 'sm', activeTab, fullWidth = false, menus = [], className, }) => {

package/dist/temp/src/components/{pagination → navigation/pagination}/NavButton.d.ts

@@ -1,4 +1,4 @@
-import type { SlotIconComponent } from '../../types/side-slot';
+import type { SlotIconComponent } from '../../../types/side-slot';
 declare const NAV_BUTTON_CONFIG: {
     readonly first: {
         readonly label: "처음";

package/dist/temp/src/components/{pagination → navigation/pagination}/NavButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowLeft, ArrowRight, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble, } from '@ncds/ui-admin-icon';
-import { Button } from '../button';
+import { Button } from '../../action/button';
 const ICON_SIZE_PC = 16;
 const ICON_SIZE_MOBILE = 20;
 const NAV_BUTTON_CONFIG = {

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

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

package/dist/temp/src/components/{vertical-tab → navigation/vertical-tab}/VerticalTab.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { Select } from '../select/Select';
-import { TabButton } from '../tab/TabButton';
+import { Select } from '../../forms-and-input/select/Select';
+import { TabButton } from '../../tab/TabButton';
 export const VerticalTab = ({ type = 'button-primary', breakPoint = 'pc', activeTab, menus, onSelect, }) => {
     const handleSelectChange = (e) => {
         onSelect?.(e.target.value);

package/dist/temp/src/components/{dropdown → overlays/dropdown}/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import type { SlotIconComponent } from '../../types/side-slot';
+import type { SlotIconComponent } from '../../../types/side-slot';
 export type AvatarTrigger = {
     type: 'avatar';
     avatar: string;
@@ -24,9 +24,12 @@ export type DropdownItemType = {
     disabled?: boolean;
     type?: 'default' | 'danger';
     className?: string;
+    visible?: boolean;
+    required?: boolean;
 };
 export type DropdownGroup = {
     items: DropdownItemType[];
+    sortable?: boolean;
 };
 export type AvatarHeader = {
     type: 'avatar';
@@ -39,14 +42,24 @@ export type TextHeader = {
     title: string;
 };
 export type DropdownHeaderType = AvatarHeader | TextHeader;
-export type DropdownProps = {
+export type DropdownBaseProps = {
     trigger: AvatarTrigger | ButtonTrigger | IconTrigger | CustomTrigger;
+    align?: 'left' | 'right';
+    header?: DropdownHeaderType;
+    className?: string;
     opened?: boolean;
     closeOnClickOutside?: boolean;
+};
+export type ActionDropdownProps = DropdownBaseProps & {
+    variant?: 'action';
+    groups: DropdownGroup[];
     closeOnClickItem?: boolean;
-    align?: 'left' | 'right';
-    header?: DropdownHeaderType;
+};
+export type ConfigDropdownProps = DropdownBaseProps & {
+    variant: 'config';
     groups: DropdownGroup[];
-    className?: string;
+    onApply: (items: DropdownItemType[]) => void;
+    applyButtonText?: string;
 };
-export declare const Dropdown: ({ trigger, align, header, groups, className, opened, closeOnClickItem, closeOnClickOutside, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export type DropdownProps = ActionDropdownProps | ConfigDropdownProps;
+export declare const Dropdown: (props: DropdownProps) => import("react/jsx-runtime").JSX.Element;