@ncds/ui-admin 1.6.1 → 1.6.3

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/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/types/src/types/side-slot.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { COLOR } from '../../constant/color';
+import type { DotProps } from '../components';
+export type SlotIconComponent = ComponentType<{
+    height?: number;
+    width?: number;
+    color?: string;
+    className?: string;
+}>;
+export type IconSlotType = {
+    type: 'icon';
+    icon: SlotIconComponent;
+    color?: keyof typeof COLOR;
+    size?: number;
+};
+export type DotSlotType = {
+    type: 'dot';
+    color: DotProps['color'];
+    size: DotProps['size'];
+};
+export type CustomSlotType = {
+    type: 'custom';
+    children: ReactNode;
+};
+export type SideSlotType = IconSlotType | DotSlotType | CustomSlotType;
+//# sourceMappingURL=side-slot.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;
@@ -3991,6 +3970,9 @@ button {
 .ncua-toggle--disabled .ncua-toggle__switch {
   background-color: var(--gray-100);
 }
+.ncua-toggle--disabled .ncua-toggle__input:checked + .ncua-toggle__switch {
+  background-color: var(--gray-100);
+}
 .ncua-toggle--disabled .ncua-toggle__slider {
   background-color: var(--gray-50);
 }

package/package.json

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