@ncds/ui-admin 1.6.2 → 1.6.4

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

@@ -27,7 +27,7 @@ export interface ButtonGroupProps {
 }
 export declare const ButtonGroup: {
     ({ children, className, hasBorder, size, onlyIcon, disabled, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-    Item({ label, size, onlyIcon, icon, disabled, children, isCurrent, ...props }: ButtonGroupItemProps): React.DetailedReactHTMLElement<{
+    Item({ label, size, onlyIcon, icon, disabled, children, isCurrent, className, ...props }: ButtonGroupItemProps): React.DetailedReactHTMLElement<{
         ref?: React.LegacyRef<HTMLButtonElement> | undefined;
         key?: React.Key | null | undefined;
         form?: string | undefined;
@@ -46,7 +46,6 @@ export declare const ButtonGroup: {
         accessKey?: string | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | undefined;
         autoFocus?: boolean | undefined;
-        className: string;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
@@ -306,6 +305,7 @@ export declare const ButtonGroup: {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        className: string;
         disabled: boolean | undefined;
     }, HTMLButtonElement>;
 };

package/dist/types/src/components/checkbox/Checkbox.d.ts

@@ -1,9 +1,8 @@
-import { ChangeEvent, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { CheckboxInputProps } from './CheckboxInput';
 export interface CheckboxProps extends Omit<CheckboxInputProps, 'type'> {
     text?: ReactNode;
     supportText?: string;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/types/src/components/checkbox/CheckboxInput.d.ts

@@ -6,8 +6,5 @@ export interface CheckboxInputProps extends Omit<ComponentPropsWithRef<'input'>,
     destructive?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-/**
- * 현재 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
- */
 export declare const CheckboxInput: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=CheckboxInput.d.ts.map

package/dist/types/src/components/combobox/ComboBox.d.ts

@@ -1,10 +1,10 @@
 import type { Size } from '@ncds/ui/constant/size';
-import { type ComponentPropsWithRef, type PropsWithChildren } from 'react';
+import { type ComponentPropsWithRef, ReactNode } from 'react';
 import type { UseFormRegisterReturn } from 'react-hook-form';
 import type { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
 export declare const defaultMaxHeight = 275;
-type BaseComboBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'>;
-export interface ComboBoxProps extends PropsWithChildren<BaseComboBoxProps> {
+export interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> {
+    children?: ReactNode;
     placeholder?: string;
     hintText?: string;
     destructive?: boolean;
@@ -24,5 +24,4 @@ export interface ComboBoxProps extends PropsWithChildren<BaseComboBoxProps> {
     onEdit?: () => void;
 }
 export declare const ComboBox: import("react").ForwardRefExoticComponent<Omit<ComboBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export {};
 //# sourceMappingURL=ComboBox.d.ts.map

package/dist/types/src/components/dot/Dot.d.ts

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

package/dist/types/src/components/dropdown/Dropdown.d.ts

@@ -3,10 +3,6 @@ export type AvatarTrigger = {
     type: 'avatar';
     avatar: string;
 };
-export type TextTrigger = {
-    type: 'text';
-    title: string;
-};
 export type ButtonTrigger = {
     type: 'button';
     text: string;
@@ -44,7 +40,7 @@ export type TextHeader = {
 };
 export type DropdownHeaderType = AvatarHeader | TextHeader;
 export type DropdownProps = {
-    trigger: AvatarTrigger | TextTrigger | ButtonTrigger | IconTrigger | CustomTrigger;
+    trigger: AvatarTrigger | ButtonTrigger | IconTrigger | CustomTrigger;
     opened?: boolean;
     closeOnClickOutside?: boolean;
     closeOnClickItem?: boolean;

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

@@ -1,7 +1,7 @@
 import type React from 'react';
-import { type ElementType } from 'react';
 import { COLOR } from '../../../constant/color';
 import type { Size } from '../../../constant/size';
+import type { SlotIconComponent } from '../../types/side-slot';
 interface InputSideButtonSlot {
     type: 'button';
     label: string;
@@ -14,8 +14,8 @@ interface InputSideTextSlot {
 }
 interface InputSideIconSlot {
     type: 'icon';
-    icon: ElementType;
-    size?: number | string;
+    icon: SlotIconComponent;
+    size?: number;
     color?: keyof typeof COLOR;
     className?: string;
 }

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

@@ -3,7 +3,7 @@ type NumberInputProps = InputBaseProps & {
     minValue?: number;
     maxValue?: number;
     step?: number;
-    stepperPosition?: 'leading' | 'trailing';
+    stepperPosition: 'leading' | 'trailing';
 };
 export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -3,7 +3,7 @@ import type { SlotIconComponent } from '../../types/side-slot';
 import { FeaturedIconColor, FeaturedIconTheme } from '../featured-icon';
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type ModalHeaderAlign = 'left' | 'center' | 'horizontal';
-export type ModalAlign = 'center' | 'right' | 'stretch';
+export type ModalActionsAlign = 'left' | 'center' | 'right' | 'stretch';
 export type ModalActionsLayout = 'vertical' | 'horizontal' | 'checkbox';
 export type ModalProps = {
     isOpen: boolean;
@@ -72,7 +72,7 @@ export type ModalActionsProps = {
     children: ReactNode;
     layout?: ModalActionsLayout;
     showDivider?: boolean;
-    align?: 'left' | 'center' | 'right' | 'stretch';
+    align?: ModalActionsAlign;
     checkboxContent?: ReactNode;
 };
 //# sourceMappingURL=Modal.d.ts.map

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

@@ -1,4 +1,4 @@
-type PaginationProps = {
+type PaginationProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
     className?: string;
     totalCount: number;
     itemCountPerPage?: number;

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

@@ -1,7 +1,7 @@
 export type ProgressLabel = 'right' | 'bottom' | 'top-float' | 'bottom-float';
 export interface ProgressSegment {
     value: number;
-    color?: string;
+    color?: 'red' | 'green' | 'blue' | 'pink' | 'orange' | 'violet' | 'gray';
 }
 export interface ProcessedSegment extends ProgressSegment {
     width: number;

package/dist/types/src/components/radio/Radio.d.ts

@@ -1,9 +1,8 @@
-import { ChangeEvent, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { RadioInputProps } from './RadioInput';
 export interface RadioProps extends Omit<RadioInputProps, 'type'> {
     text?: ReactNode;
     supportText?: string;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Radio.d.ts.map

package/dist/types/src/components/select/Select.d.ts

@@ -1,9 +1,8 @@
 import { Size } from '@ncds/ui/constant/size';
-import { ComponentPropsWithRef, PropsWithChildren } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
 import { UseFormRegisterReturn } from 'react-hook-form';
 import { OptionType } from '../../types/dropdown';
-type BaseSelectProps = Omit<ComponentPropsWithRef<'select'>, 'size'>;
-export interface SelectProps extends PropsWithChildren<BaseSelectProps> {
+export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'size'> {
     placeholder?: string;
     disabledPlaceholder?: boolean;
     hintText?: string;
@@ -12,10 +11,7 @@ export interface SelectProps extends PropsWithChildren<BaseSelectProps> {
     optionItems?: OptionType[];
     register?: UseFormRegisterReturn;
     type?: 'default' | 'simple';
+    children?: ReactNode;
 }
-/**
- * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
- */
 export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
-export {};
 //# sourceMappingURL=Select.d.ts.map

package/dist/types/src/components/selectbox/SelectBox.d.ts

@@ -1,10 +1,10 @@
-import { type ComponentPropsWithRef, type PropsWithChildren } from 'react';
+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';
 export declare const DEFAULT_MAX_HEIGHT = 275;
-type BaseSelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'>;
-export type SelectBoxProps = PropsWithChildren<BaseSelectBoxProps> & {
+export type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> & {
+    children?: ReactNode;
     placeholder?: string;
     disabledPlaceholder?: boolean;
     hintText?: string;
@@ -23,5 +23,4 @@ export type SelectBoxProps = PropsWithChildren<BaseSelectBoxProps> & {
     align?: 'left' | 'right';
 };
 export declare const SelectBox: import("react").ForwardRefExoticComponent<Omit<SelectBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export {};
 //# sourceMappingURL=SelectBox.d.ts.map

package/dist/types/src/components/spinner/Spinner.d.ts

@@ -2,7 +2,7 @@ import { ElementType, ReactNode } from 'react';
 interface SpinnerProps {
     as?: ElementType;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    children: ReactNode;
+    children?: ReactNode;
     backdrop?: boolean;
 }
 export declare const Spinner: ({ as, size, children, backdrop }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,11 @@
-import { TabButtonProps, TabSize, TabType } from './TabButton';
+import { type TabButtonProps, type TabSize, type TabType } from './TabButton';
 export type HorizontalTabProps = {
     type?: Exclude<TabType, 'line-vertical'>;
     size?: TabSize;
     activeTab?: string;
     fullWidth?: boolean;
     menus?: Array<TabButtonProps>;
+    className?: string;
 };
-export declare const HorizontalTab: ({ type, size, activeTab, fullWidth, menus, }: HorizontalTabProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HorizontalTab: ({ type, size, activeTab, fullWidth, menus, className, }: HorizontalTabProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=HorizontalTab.d.ts.map

package/dist/types/src/components/tag/Tag.d.ts

@@ -11,7 +11,7 @@ interface TagProps {
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
     maxLength?: number;
 }
-export type CalculatedPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type CalculatedPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export declare const Tag: ({ size, icon, text, count, close, onButtonClick, maxLength }: TagProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Tag.d.ts.map

package/dist/ui-admin/assets/styles/style.css

@@ -1522,7 +1522,7 @@ button {
   color: var(--gray-300);
   background-color: inherit;
 }
-.ncua-input.is-disabled .ncua-input__destructive-ico {
+.ncua-input.is-disabled .ncua-input__destructive-icon {
   display: none;
 }
 .ncua-input.is-disabled .ncua-input__button {
@@ -2560,6 +2560,9 @@ button {
 .ncua-radio-input.destructive :where(input) {
   border-color: var(--primary-red-600);
 }
+.ncua-radio-input.destructive :where(input):not(:disabled):hover {
+  border-color: var(--primary-red-600);
+}
 .ncua-radio-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
   box-shadow: var(--shadow-xs-focused-4px-error-100);
@@ -2665,36 +2668,6 @@ button {
   z-index: 1000;
   pointer-events: none;
 }
-.ncua-tag__tooltip:not([class*="--top-"]):not([class*="--bottom-"]):not([class*="--left"]):not([class*="--right"]) {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: var(--spacing-md);
-}
-.ncua-tag__tooltip--top {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: var(--spacing-md);
-}
-.ncua-tag__tooltip--bottom {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: var(--spacing-md);
-}
-.ncua-tag__tooltip--left {
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-right: var(--spacing-md);
-}
-.ncua-tag__tooltip--right {
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: var(--spacing-md);
-}
 .ncua-tag__tooltip--top-left {
   bottom: 100%;
   right: 0;
@@ -2715,10 +2688,6 @@ button {
   left: 0;
   margin-top: var(--spacing-md);
 }
-.ncua-tag__tooltip--measuring {
-  opacity: 0;
-  visibility: hidden;
-}
 .ncua-tag__tooltip-content {
   display: block;
   padding: var(--spacing-md) var(--spacing-lg);
@@ -3821,47 +3790,57 @@ button {
   font-size: 11px;
 }
 .ncua-spinner--xs .ncua-spinner__content::before {
-  margin-block-end: 12px;
   width: 16px;
   height: 16px;
   border-width: 2px;
 }
+.ncua-spinner--xs .ncua-spinner__content:has(*)::before {
+  margin-block-end: 12px;
+}
 .ncua-spinner--sm {
   font-size: 14px;
 }
 .ncua-spinner--sm .ncua-spinner__content::before {
-  margin-block-end: 16px;
   width: 32px;
   height: 32px;
   border-width: 4px;
 }
+.ncua-spinner--sm .ncua-spinner__content:has(*)::before {
+  margin-block-end: 16px;
+}
 .ncua-spinner--md {
   font-size: 14px;
 }
 .ncua-spinner--md .ncua-spinner__content::before {
-  margin-block-end: 16px;
   width: 48px;
   height: 48px;
   border-width: 6px;
 }
+.ncua-spinner--md .ncua-spinner__content:has(*)::before {
+  margin-block-end: 16px;
+}
 .ncua-spinner--lg {
   font-size: 18px;
 }
 .ncua-spinner--lg .ncua-spinner__content::before {
-  margin-block-end: 16px;
   width: 56px;
   height: 56px;
   border-width: 6px;
 }
+.ncua-spinner--lg .ncua-spinner__content:has(*)::before {
+  margin-block-end: 16px;
+}
 .ncua-spinner--xl {
   font-size: 18px;
 }
 .ncua-spinner--xl .ncua-spinner__content::before {
-  margin-block-end: 20px;
   width: 64px;
   height: 64px;
   border-width: 8px;
 }
+.ncua-spinner--xl .ncua-spinner__content:has(*)::before {
+  margin-block-end: 20px;
+}
 .ncua-spinner--backdrop {
   content: "";
   position: fixed;
@@ -4895,6 +4874,9 @@ button {
 .ncua-horizontal-tab--fullWidth .ncua-horizontal-tab__item {
   width: 100% !important;
 }
+.ncua-horizontal-tab--fullWidth .swiper-wrapper {
+  width: auto;
+}
 .ncua-horizontal-tab--fullWidth .swiper-slide {
   flex-shrink: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",