@ncds/ui-admin 0.0.26 → 0.0.28

package/dist/esm/src/components/modal/Modal.js

@@ -83,12 +83,15 @@ Modal.Header = function (_a) {
     hideCloseButton = _d === void 0 ? false : _d;
   return _jsxs(_Fragment, {
     children: [_jsxs("header", __assign({
-      className: classnames('ncua-modal__header', "ncua-modal__header--".concat(align))
+      className: classnames('ncua-modal__header', "ncua-modal__header--".concat(align), {
+        'ncua-modal__header--close-button': !hideCloseButton
+      })
     }, {
       children: [featuredIcon && _jsx(FeaturedIcon, {
         name: featuredIcon.name,
         color: featuredIcon.color,
-        theme: featuredIcon.theme
+        theme: featuredIcon.theme,
+        size: "sm"
       }), _jsxs("div", __assign({
         className: "ncua-modal__title"
       }, {
@@ -129,14 +132,14 @@ Modal.Content = function (_a) {
  *
  * 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" />
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" 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" />
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
  * </Modal.Actions>
  *
  * 3. Checkbox layout (checkbox on left, buttons on right):
@@ -146,8 +149,8 @@ Modal.Content = function (_a) {
  *     <a href="#">Settings</a>
  *   </>
  * }>
- *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
- *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
  * </Modal.Actions>
  */
 Modal.Actions = function (_a) {

package/dist/esm/src/components/select/Select.js

@@ -22,7 +22,7 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { HintText } from '../shared/hintText/HintText';
 /**
- * 현재 icon과 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
  */
 export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
   var icon = _a.icon,
@@ -80,14 +80,6 @@ export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
             children: item.label
           }), "option-".concat(index));
         }), children]
-      })), destructive && _jsx("div", __assign({
-        className: "ncua-select__destructive-icon"
-      }, {
-        children: _jsx(Icon, {
-          name: "info-circle",
-          width: 14,
-          height: 14
-        })
       }))]
     })), hintText && _jsx(HintText, __assign({
       destructive: destructive,

package/dist/esm/src/components/tag/Tag.js

@@ -12,6 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot';
 export var Tag = function (_a) {
   var _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
@@ -24,17 +25,28 @@ export var Tag = function (_a) {
     sm: 14,
     md: 16
   };
+  var sideSlotRender = function (slot) {
+    var _a;
+    if (slot.type === 'icon') {
+      return _jsx(Icon, {
+        name: slot.icon,
+        width: iconSize[size],
+        height: iconSize[size],
+        color: slot.color
+      });
+    }
+    if (slot.type === 'dot') {
+      return _jsx(Dot, {
+        color: slot.color,
+        size: (_a = slot.size) !== null && _a !== void 0 ? _a : 'sm'
+      });
+    }
+    return slot.children;
+  };
   return _jsxs("span", __assign({
-    className: classNames('ncua-tag', "ncua-tag--".concat(size), {
-      'ncua-tag--dot': (icon === null || icon === void 0 ? void 0 : icon.name) === 'dot'
-    })
+    className: classNames('ncua-tag', "ncua-tag--".concat(size))
   }, {
-    children: [icon && icon.name !== 'dot' && _jsx(Icon, {
-      name: icon.name,
-      width: iconSize[size],
-      height: iconSize[size],
-      color: icon.color
-    }), _jsx("span", __assign({
+    children: [icon && sideSlotRender(icon), _jsx("span", __assign({
       className: "ncua-tag__text"
     }, {
       children: text

package/dist/types/constant/color.d.ts

@@ -31,4 +31,5 @@ export declare const COLOR: {
     'secondary-gray-blue-700': string;
 };
 export type ColorKeyType = keyof typeof COLOR;
+export type ColorTone = 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'violet' | 'disabled';
 //# sourceMappingURL=color.d.ts.map

package/dist/types/src/components/badge/Badge.d.ts

@@ -1,7 +1,8 @@
-import { SideSlotType } from '../button';
+import { ColorTone } from '../../../constant/color';
 import { Size } from '../../../constant/size';
+import { SideSlotType } from '../../types/side-slot';
 export type BadgeType = 'pill-outline' | 'pill-dark-color';
-export type BadgeColor = 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled';
+export type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 export type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
 export type BadgeProps = {
     label: string;

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

@@ -1,19 +1,8 @@
 import { ComponentProps, ReactNode } from 'react';
-import { COLOR } from '../../../constant/color';
 import { Size } from '../../../constant/size';
-import { IconName } from '@ncds/ui-admin-icon';
+import { SideSlotType } from '../../types/side-slot';
+import { DotProps } from '../dot';
 export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'link' | 'destructive';
-export type IconSlotType = {
-    type: 'icon';
-    icon: IconName;
-    color?: keyof typeof COLOR;
-    size?: number | string;
-};
-export type CustomSlotType = {
-    type: 'custom';
-    children: ReactNode;
-};
-export type SideSlotType = IconSlotType | CustomSlotType;
 export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentProps<T>, 'ref'> & {
     label: string;
@@ -39,6 +28,7 @@ type AnchorElementProps = CommonButtonProps<'a'> & {
 export type ButtonProps = ButtonElementProps | AnchorElementProps;
 export declare const svgSize: Record<ButtonSize, number>;
 export declare const iconOnlySvgSize: Record<ButtonSize, number>;
+export declare const dotSize: Record<ButtonSize, DotProps['size']>;
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1,26 +1,15 @@
-import { IconName } from '@ncds/ui-admin-icon';
 import React, { ComponentProps } from 'react';
-import { ColorKeyType } from '../../../constant/color';
 import { Size } from '../../../constant/size';
-type ButtonGroupSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
+import { SideSlotType } from 'ui-admin/src/types/side-slot';
+export type ButtonGroupSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
 interface SideCommon {
     position?: 'leading' | 'trailing';
 }
-interface SideIcon {
-    type: 'icon';
-    icon: IconName;
-    size?: number;
-    color?: ColorKeyType;
-}
-interface SideCustom {
-    type: 'custom';
-    children: React.ReactNode;
-}
-type SideSlotType = SideCommon & (SideIcon | SideCustom);
+type SideSlot = SideCommon & SideSlotType;
 interface ButtonGroupItemCommonProps {
     label?: string;
     size?: ButtonGroupSize;
-    icon?: SideSlotType;
+    icon?: SideSlot;
     children?: React.ReactNode;
     onlyIcon?: boolean;
     disabled?: boolean;
@@ -54,7 +43,7 @@ export declare const ButtonGroup: {
         formNoValidate?: boolean | undefined;
         formTarget?: string | undefined;
         name?: string | undefined;
-        type?: "button" | "submit" | "reset" | undefined;
+        type: string | undefined;
         value?: string | number | readonly string[] | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -68,7 +57,7 @@ export declare const ButtonGroup: {
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
-        enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -103,13 +92,13 @@ export declare const ButtonGroup: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
-        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
         part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+        "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -119,17 +108,17 @@ export declare const ButtonGroup: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
+        "aria-current"?: boolean | "true" | "false" | "time" | "step" | "date" | "page" | "location" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "link" | "move" | "none" | "copy" | "execute" | "popup" | undefined;
+        "aria-dropeffect"?: "none" | "link" | "move" | "copy" | "execute" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+        "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
@@ -333,7 +322,7 @@ export declare const ButtonGroup: {
         media?: string | undefined;
         ping?: string | undefined;
         target?: React.HTMLAttributeAnchorTarget | undefined;
-        type?: string | undefined;
+        type: string | undefined;
         referrerPolicy?: React.HTMLAttributeReferrerPolicy | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -347,7 +336,7 @@ export declare const ButtonGroup: {
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
-        enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -382,13 +371,13 @@ export declare const ButtonGroup: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
-        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
         part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+        "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -398,17 +387,17 @@ export declare const ButtonGroup: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
+        "aria-current"?: boolean | "true" | "false" | "time" | "step" | "date" | "page" | "location" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "link" | "move" | "none" | "copy" | "execute" | "popup" | undefined;
+        "aria-dropeffect"?: "none" | "link" | "move" | "copy" | "execute" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+        "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;

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

@@ -1,12 +1,14 @@
 import { Dispatch, SetStateAction } from 'react';
 import { RangeDatePickerProps } from './RangeDatePicker';
+import { ButtonGroupSize } from '../button';
 import { PERIOD_ITEM } from '../../constant/date-picker';
 export type PeriodKeyType = keyof typeof PERIOD_ITEM;
 type RangeDatePickerWithButtonsProps = {
+    buttonGroupSize?: ButtonGroupSize;
     currentButtonId: PeriodKeyType;
     setCurrentButtonId: Dispatch<SetStateAction<PeriodKeyType>>;
     periodKeys: PeriodKeyType[];
 } & RangeDatePickerProps;
-export declare const RangeDatePickerWithButtons: ({ currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeDatePickerWithButtons: ({ buttonGroupSize, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RangeDatePickerWithButtons.d.ts.map

package/dist/types/src/components/divider/Divider.d.ts

@@ -7,5 +7,10 @@ export interface DividerProps {
     style?: DividerStyle;
     children: ReactNode;
 }
+/**
+ * @param {DividerProps} props
+ * @param {ReactNode} props.children Button 컴포넌트는 xs로 ButtonGroup은 sm 사이즈로 추가하는 것이 권장됩니다.
+ * @returns {ReactNode}
+ */
 export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Divider.d.ts.map

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

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { Size } from '../../../constant/size';
+import { ColorTone } from '../../../constant/color';
+export type DotColor = ColorTone;
+export type DotSize = Extract<Size, 'sm' | 'md' | 'lg'>;
+export interface DotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /**
+     * The color of the dot
+     * @default 'success'
+     */
+    color?: DotColor;
+    /**
+     * The size of the dot
+     * @default 'md'
+     */
+    size?: DotSize;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+export declare const Dot: import("react").ForwardRefExoticComponent<DotProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Dot.d.ts.map

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

@@ -0,0 +1,2 @@
+export * from './Dot';
+//# sourceMappingURL=index.d.ts.map

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

@@ -5,6 +5,7 @@ export * from './carousel';
 export * from './checkbox';
 export * from './date-picker';
 export * from './divider';
+export * from './dot';
 export * from './dropdown';
 export * from './empty-state';
 export * from './featured-icon';

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

@@ -25,14 +25,14 @@ export declare const Modal: {
      *
      * 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" />
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button size="sm" 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" />
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
      * </Modal.Actions>
      *
      * 3. Checkbox layout (checkbox on left, buttons on right):
@@ -42,8 +42,8 @@ export declare const Modal: {
      *     <a href="#">Settings</a>
      *   </>
      * }>
-     *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
-     *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
      * </Modal.Actions>
      */
     Actions({ children, layout, showDivider, align, checkboxContent, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -25,7 +25,7 @@ export interface SelectProps extends PropsWithChildren<BaseSelectProps> {
     type?: 'default' | 'simple';
 }
 /**
- * 현재 icon과 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
  */
 export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 export {};

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

@@ -1,19 +1,15 @@
-import { IconName } from '@ncds/ui-admin-icon';
-import { FC, MouseEventHandler } from 'react';
-import { COLOR } from '../../../constant/color';
+import { MouseEventHandler } from 'react';
 import { Size } from '../../../constant/size';
-type TagIcon = {
-    name: IconName | 'dot';
-    color?: keyof typeof COLOR;
-};
+import { SideSlotType } from '../../types/side-slot';
 interface TagProps {
     size?: Extract<Size, 'sm' | 'md'>;
-    icon?: TagIcon;
+    icon?: SideSlotType;
     text: string;
     count?: string;
     close?: boolean;
+    children?: React.ReactNode;
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
 }
-export declare const Tag: FC<TagProps>;
+export declare const Tag: ({ size, icon, text, count, close, onButtonClick }: TagProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Tag.d.ts.map