@ncds/ui-admin-mcp 1.0.0-alpha.10

package/data/tag.json

@@ -0,0 +1,159 @@
+{
+  "name": "tag",
+  "exportName": "Tag",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "feedback",
+  "description": "Tag 컴포넌트는 정보를 분류하고 필터링하기 위한 시각적 표시를 제공합니다. 레이블, 카테고리, 필터 등을 나타내는 데 사용되며, 아이콘, 닫기 버튼, 체크박스, 카운트 등의 기능을 포함할 수 있습니다.",
+  "aliases": [
+    "Tag",
+    "태그",
+    "레이블",
+    "카테고리",
+    "필터",
+    "분류",
+    "icon",
+    "dot",
+    "country",
+    "checkbox",
+    "close",
+    "count",
+    "maxLength",
+    "truncation",
+    "NCDS"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "정보 분류와 필터링을 위한 시각적 라벨",
+    "사용자가 콘텐츠를 빠르게 분류/식별/필터링할 수 있도록 지원"
+  ],
+  "forbiddenRules": [
+    "disabled 태그에 액션 제공 금지",
+    "과도한 태그 나열 금지",
+    "텍스트 없는 태그 사용 금지"
+  ],
+  "seeAlso": [
+    "badge",
+    "badge-group",
+    "checkbox",
+    "dot"
+  ],
+  "props": {
+    "children": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "close": {
+      "type": "boolean",
+      "required": false
+    },
+    "count": {
+      "type": "string",
+      "required": false
+    },
+    "icon": {
+      "type": "object",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"icon\""
+        },
+        "icon": {
+          "type": "function",
+          "required": false
+        },
+        "color": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "black",
+            "blue500",
+            "blue600",
+            "currentColor",
+            "gray100",
+            "gray200",
+            "gray300",
+            "gray400",
+            "gray500",
+            "gray600",
+            "gray700",
+            "green500",
+            "green600",
+            "orange500",
+            "orange600",
+            "pink100",
+            "pink600",
+            "red500",
+            "red600",
+            "secondary-gray-blue-100",
+            "secondary-gray-blue-200",
+            "secondary-gray-blue-300",
+            "secondary-gray-blue-400",
+            "secondary-gray-blue-450",
+            "secondary-gray-blue-50",
+            "secondary-gray-blue-500",
+            "secondary-gray-blue-600",
+            "secondary-gray-blue-700",
+            "violet300",
+            "violet600",
+            "white",
+            "yellow600"
+          ]
+        },
+        "size": {
+          "type": "number",
+          "required": false
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": false
+        }
+      }
+    },
+    "maxLength": {
+      "type": "number",
+      "required": false,
+      "default": 20
+    },
+    "onButtonClick": {
+      "type": "function",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "md",
+        "sm"
+      ],
+      "default": "sm"
+    },
+    "text": {
+      "type": "string",
+      "required": true
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-tag",
+    "ncua-tag--md",
+    "ncua-tag--sm",
+    "ncua-tag--truncated",
+    "ncua-tag__close",
+    "ncua-tag__count",
+    "ncua-tag__text",
+    "ncua-tag__tooltip",
+    "ncua-tag__tooltip-content"
+  ],
+  "usage": {
+    "import": "import { Tag } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Tag text=\"\" />",
+      "size:md": "<Tag size=\"md\" text=\"\" />",
+      "size:sm": "<Tag size=\"sm\" text=\"\" />"
+    }
+  }
+}

package/data/textarea.json

@@ -0,0 +1,96 @@
+{
+  "name": "textarea",
+  "exportName": "Textarea",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "Textarea(멀티라인 인풋)는 여러 줄의 사용형 텍스트 입력을 위한 컴포넌트입니다.",
+  "aliases": [
+    "Textarea",
+    "멀티라인",
+    "다중입력",
+    "TextArea",
+    "텍스트영역",
+    "Placeholder",
+    "CharacterCount",
+    "글자수",
+    "Resize",
+    "Helper Text",
+    "Destructive",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "Textarea는 50자 이상 다중 줄 입력에 사용하며, 반드시 외부 Label과 maxLength를 함께 정의한다",
+    "Width는 고정, Height만 Resize 허용"
+  ],
+  "forbiddenRules": [
+    "30자 이하 입력 항목에 Textarea 사용 금지",
+    "Label 없이 단독 사용 금지",
+    "Placeholder를 설명 텍스트 대체로 사용 금지",
+    "Max 정의 없이 무제한 입력 허용 금지",
+    "Width 자유 Resize 허용 금지"
+  ],
+  "seeAlso": [
+    "input",
+    "editor"
+  ],
+  "htmlElement": "textarea",
+  "props": {
+    "characterCount": {
+      "type": "boolean",
+      "required": false
+    },
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "destructive": {
+      "type": "boolean",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false
+    },
+    "hintText": {
+      "type": "string",
+      "required": false
+    },
+    "label": {
+      "type": "string",
+      "required": false
+    },
+    "required": {
+      "type": "boolean",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm",
+        "xs"
+      ],
+      "default": "xs"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-input",
+    "ncua-input--textarea",
+    "ncua-input__text-count",
+    "ncua-input__text-count-text",
+    "ncua-input__text-count-text-count",
+    "ncua-input__text-count-wrap",
+    "ncua-input__textarea"
+  ],
+  "usage": {
+    "import": "import { Textarea } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Textarea />",
+      "size:sm": "<Textarea size=\"sm\" />",
+      "size:xs": "<Textarea size=\"xs\" />"
+    }
+  }
+}

package/data/toggle.json

@@ -0,0 +1,102 @@
+{
+  "name": "toggle",
+  "exportName": "Toggle",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "Toggle은 단일 기능의 활성/비활성 상태를 즉시 전환하는 컨트롤입니다. 설정 값의 ON/OFF, 수신 여부, 사용 여부 등 즉각 반영되는 상태 전환 UI에 사용합니다.",
+  "aliases": [
+    "Toggle",
+    "토글",
+    "Switch",
+    "스위치",
+    "ON",
+    "OFF",
+    "활성",
+    "비활성",
+    "사용",
+    "미사용",
+    "노출",
+    "미노출",
+    "Checked",
+    "Disabled",
+    "Thumb",
+    "Track",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "즉시 반영되는 이진 상태(ON/OFF) 전환에만 사용",
+    "저장 후 반영, 3개 이상 옵션, 2차 부가 옵션이 있는 경우 Toggle을 사용하지 않는다"
+  ],
+  "forbiddenRules": [
+    "3개 이상 옵션에 Toggle 사용 금지",
+    "저장 후 반영되는 설정에 Toggle 사용 금지",
+    "2차 부가 옵션이 있는 경우 사용 금지",
+    "다중 선택 개념에 사용 금지",
+    "조건 선택 개념에 사용 금지",
+    "동일 화면 내 Size 혼용 금지"
+  ],
+  "seeAlso": [
+    "checkbox",
+    "radio",
+    "switch",
+    "select"
+  ],
+  "htmlElement": "input",
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "onChange": {
+      "type": "function",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "md",
+        "sm"
+      ],
+      "default": "md"
+    },
+    "supportText": {
+      "type": "string",
+      "required": false,
+      "default": ""
+    },
+    "text": {
+      "type": "string",
+      "required": false,
+      "default": ""
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-toggle",
+    "ncua-toggle--disabled",
+    "ncua-toggle--md",
+    "ncua-toggle--sm",
+    "ncua-toggle__input",
+    "ncua-toggle__slider",
+    "ncua-toggle__support-text",
+    "ncua-toggle__switch",
+    "ncua-toggle__text",
+    "ncua-toggle__text-wrapper"
+  ],
+  "usage": {
+    "import": "import { Toggle } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Toggle />",
+      "size:md": "<Toggle size=\"md\" />",
+      "size:sm": "<Toggle size=\"sm\" />"
+    }
+  }
+}

package/data/tooltip.json

@@ -0,0 +1,185 @@
+{
+  "name": "tooltip",
+  "exportName": "Tooltip",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "overlay",
+  "description": "Tooltip은 항목, 데이터, 기능 등에 대해 추가 설명이 필요한 경우 보조 정보를 제공하는 말풍선 내 UI 컴포넌트입니다.",
+  "aliases": [
+    "Tooltip",
+    "툴팁",
+    "Short Form",
+    "Long Form",
+    "Hover",
+    "보조설명",
+    "치환코드",
+    "aria-describedby",
+    "position",
+    "iconType",
+    "tooltipType",
+    "hideArrow",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "기본 화면의 흐름을 방해하지 않으면서 필요한 보조 정보를 즉시 제공해야 합니다",
+    "과도한 사용이나 긴 내용은 사용자 경험을 저해합니다"
+  ],
+  "forbiddenRules": [
+    "Short Form에 텍스트 링크 사용 금지",
+    "Short Form에 버튼 포함 금지",
+    "Short Form 80자 초과 금지",
+    "Short Form에 상호작용 요소 포함 금지",
+    "Long Form Modal 중앙 정렬 금지",
+    "Long Form Dim 처리 금지",
+    "Long Form 300자 초과 금지",
+    "치환코드 복사 시 Tooltip 자동 닫힘 금지",
+    "치환코드 Tooltip Modal 전환 금지",
+    "치환코드 Tooltip에 Confirm Alert 사용 금지"
+  ],
+  "seeAlso": [
+    "icon",
+    "notification"
+  ],
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "content": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "hideArrow": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "iconColor": {
+      "type": "string",
+      "required": false,
+      "default": "var(--gray-300)"
+    },
+    "iconStyle": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "alert-circle",
+        "help-circle"
+      ],
+      "default": "help-circle"
+    },
+    "iconType": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "fill",
+        "stroke"
+      ],
+      "default": "stroke"
+    },
+    "position": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "auto",
+        "bottom",
+        "bottom-left",
+        "bottom-right",
+        "left",
+        "right",
+        "top",
+        "top-left",
+        "top-right"
+      ],
+      "default": "auto"
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "md",
+        "sm"
+      ],
+      "default": "sm"
+    },
+    "title": {
+      "type": "string",
+      "required": false
+    },
+    "tooltipType": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "black",
+        "white"
+      ],
+      "default": "black"
+    },
+    "type": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "long",
+        "short"
+      ],
+      "default": "short"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-tooltip",
+    "ncua-tooltip--alert-circle",
+    "ncua-tooltip--auto",
+    "ncua-tooltip--black",
+    "ncua-tooltip--bottom",
+    "ncua-tooltip--bottom-left",
+    "ncua-tooltip--bottom-right",
+    "ncua-tooltip--fill",
+    "ncua-tooltip--help-circle",
+    "ncua-tooltip--hidden-arrow",
+    "ncua-tooltip--left",
+    "ncua-tooltip--long",
+    "ncua-tooltip--md",
+    "ncua-tooltip--right",
+    "ncua-tooltip--short",
+    "ncua-tooltip--sm",
+    "ncua-tooltip--stroke",
+    "ncua-tooltip--top",
+    "ncua-tooltip--top-left",
+    "ncua-tooltip--top-right",
+    "ncua-tooltip--white",
+    "ncua-tooltip__bg",
+    "ncua-tooltip__bg--force-hidden",
+    "ncua-tooltip__bg--measuring",
+    "ncua-tooltip__bg--visible",
+    "ncua-tooltip__close-button",
+    "ncua-tooltip__content",
+    "ncua-tooltip__title"
+  ],
+  "usage": {
+    "import": "import { Tooltip } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Tooltip />",
+      "iconStyle:alert-circle": "<Tooltip iconStyle=\"alert-circle\" />",
+      "iconStyle:help-circle": "<Tooltip iconStyle=\"help-circle\" />",
+      "iconType:fill": "<Tooltip iconType=\"fill\" />",
+      "iconType:stroke": "<Tooltip iconType=\"stroke\" />",
+      "position:auto": "<Tooltip position=\"auto\" />",
+      "position:bottom": "<Tooltip position=\"bottom\" />",
+      "position:bottom-left": "<Tooltip position=\"bottom-left\" />",
+      "position:bottom-right": "<Tooltip position=\"bottom-right\" />",
+      "position:left": "<Tooltip position=\"left\" />",
+      "position:right": "<Tooltip position=\"right\" />",
+      "position:top": "<Tooltip position=\"top\" />",
+      "position:top-left": "<Tooltip position=\"top-left\" />",
+      "position:top-right": "<Tooltip position=\"top-right\" />",
+      "size:md": "<Tooltip size=\"md\" />",
+      "size:sm": "<Tooltip size=\"sm\" />",
+      "tooltipType:black": "<Tooltip tooltipType=\"black\" />",
+      "tooltipType:white": "<Tooltip tooltipType=\"white\" />",
+      "type:long": "<Tooltip type=\"long\" />",
+      "type:short": "<Tooltip type=\"short\" />"
+    }
+  }
+}