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

package/data/carousel-number-group.json

@@ -0,0 +1,87 @@
+{
+  "name": "carousel-number-group",
+  "exportName": "CarouselNumberGroup",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "feedback",
+  "description": "CarouselNumberGroup은 캐러셀의 현재 페이지와 전체 페이지 수를 표시하는 컴포넌트입니다.",
+  "aliases": [
+    "CarouselNumberGroup",
+    "캐러셀",
+    "숫자그룹",
+    "페이지번호",
+    "현재페이지",
+    "전체페이지",
+    "슬래시",
+    "페이지인디케이터",
+    "Dark",
+    "Light",
+    "Framed",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "캐러셀 페이지 인디케이터 전용",
+    "슬래시(/)로 구분된 형태로 현재 페이지와 전체 페이지 수를 직관적으로 표시"
+  ],
+  "forbiddenRules": [
+    "캐러셀 외 용도 금지",
+    "currentPage/totalPage 누락 금지",
+    "currentPage가 totalPage 초과 금지",
+    "크기 임의 변경 금지",
+    "슬래시(/) 구분 형식 변경 금지"
+  ],
+  "seeAlso": [
+    "carousel-arrow"
+  ],
+  "props": {
+    "color": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "dark",
+        "light"
+      ],
+      "default": "light"
+    },
+    "currentPage": {
+      "type": "number",
+      "required": true
+    },
+    "framed": {
+      "type": "boolean",
+      "required": false,
+      "default": true
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm"
+      ],
+      "default": "sm"
+    },
+    "totalPage": {
+      "type": "number",
+      "required": true
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-carousel-number-group",
+    "ncua-carousel-number-group--dark",
+    "ncua-carousel-number-group--light",
+    "ncua-carousel-number-group--sm",
+    "ncua-carousel-number-group__number",
+    "ncua-carousel-number-group__total"
+  ],
+  "usage": {
+    "import": "import { CarouselNumberGroup } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<CarouselNumberGroup currentPage={0} totalPage={0} />",
+      "color:dark": "<CarouselNumberGroup color=\"dark\" currentPage={0} totalPage={0} />",
+      "color:light": "<CarouselNumberGroup color=\"light\" currentPage={0} totalPage={0} />",
+      "size:sm": "<CarouselNumberGroup size=\"sm\" currentPage={0} totalPage={0} />"
+    }
+  }
+}

package/data/checkbox.json

@@ -0,0 +1,99 @@
+{
+  "name": "checkbox",
+  "exportName": "Checkbox",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "체크박스는 사용자가 목록에서 하나 이상의 항목을 선택하거나 옵션을 활성화/비활성화할 때 사용하는 핵심 Selection 컴포넌트입니다.",
+  "aliases": [
+    "체크박스",
+    "Checkbox",
+    "컴포넌트",
+    "선택",
+    "다중선택",
+    "indeterminate",
+    "부분선택",
+    "checked",
+    "disabled",
+    "destructive",
+    "supportText",
+    "Focused",
+    "Hover",
+    "NCDS",
+    "폼",
+    "Form"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "체크박스는 다중 선택 전용 Selection 컴포넌트이며, 선택 상태(Checked/Unchecked/Indeterminate)와 인터랙션 상태가 시각적으로 즉시 구분되어야 한다"
+  ],
+  "forbiddenRules": [
+    "단일 선택 용도로 체크박스 사용",
+    "레이블 없이 체크박스만 단독 배치 (테이블 행 선택 제외)",
+    "레이블을 체크박스 좌측에 배치",
+    "체크박스로 즉시 실행 동작 트리거",
+    "Indeterminate 상태를 사용자 직접 조작으로 진입",
+    "NCDS 기준 외 임의 색상, radius, 크기 변경",
+    "Disabled 상태에서 시각적 강조나 인터랙션 하이라이트 추가",
+    "가로 정렬 시 5개 이상의 체크박스 나열",
+    "supportText를 에러 메시지 용도로 사용",
+    "on/off 토글 용도로 체크박스 사용"
+  ],
+  "seeAlso": [
+    "radio",
+    "toggle",
+    "button"
+  ],
+  "htmlElement": "input",
+  "props": {
+    "destructive": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "onChange": {
+      "type": "function",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm",
+        "xs"
+      ],
+      "default": "xs"
+    },
+    "supportText": {
+      "type": "string",
+      "required": false
+    },
+    "text": {
+      "type": "ReactNode",
+      "required": false
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-checkbox-field",
+    "ncua-checkbox-field--sm",
+    "ncua-checkbox-field--xs",
+    "ncua-checkbox-field__input",
+    "ncua-checkbox-field__support-text",
+    "ncua-checkbox-field__text",
+    "ncua-checkbox-input"
+  ],
+  "usage": {
+    "import": "import { Checkbox } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Checkbox />",
+      "size:sm": "<Checkbox size=\"sm\" />",
+      "size:xs": "<Checkbox size=\"xs\" />"
+    }
+  }
+}

package/data/combo-box.json

@@ -0,0 +1,157 @@
+{
+  "name": "combo-box",
+  "exportName": "ComboBox",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "input",
+  "description": "ComboBox는 여러 개의 데이터에서 검색(입력)하거나 리스트에서 옵션을 골라 빠르게 선택하는 복합 선택 컴포넌트입니다.",
+  "aliases": [
+    "콤보박스",
+    "ComboBox",
+    "컴포넌트",
+    "검색",
+    "선택",
+    "Single",
+    "Multi",
+    "Chip",
+    "Dropdown",
+    "Filter",
+    "Like검색",
+    "옵션",
+    "Placeholder",
+    "Filled",
+    "Focused",
+    "Open",
+    "Destructive",
+    "전체선택",
+    "선택완료",
+    "Clear",
+    "NCDS"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "ComboBox는 검색 입력 + 드롭다운 선택이 결합된 복합 선택 컴포넌트로, 5~500개 옵션 범위에서 사용하며, 멀티 선택 시 반드시 \"선택 완료\" 버튼으로 확정해야 합니다"
+  ],
+  "forbiddenRules": [
+    "5개 이하 옵션에서 Search ComboBox 남용 금지",
+    "500개 초과 옵션을 단일 레이어로 제공 금지",
+    "검색 결과 없음 메시지 미제공 금지",
+    "멀티 선택에서 자동 확정 UX 사용 금지",
+    "Clear 버튼 없이 입력 유지 강제 금지"
+  ],
+  "seeAlso": [
+    "selectbox",
+    "select"
+  ],
+  "htmlElement": "div",
+  "props": {
+    "children": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "destructive": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "hintText": {
+      "type": "string",
+      "required": false
+    },
+    "label": {
+      "type": "string",
+      "required": false
+    },
+    "maxHeight": {
+      "type": "number",
+      "required": false,
+      "default": "defaultMaxHeight"
+    },
+    "multiple": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "onChange": {
+      "type": "function",
+      "required": false
+    },
+    "onEdit": {
+      "type": "function",
+      "required": false
+    },
+    "onSearch": {
+      "type": "function",
+      "required": false
+    },
+    "optionItems": {
+      "type": "string",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/types/dropdown/option\").OptionType[] | undefined",
+      "default": "[]"
+    },
+    "placeholder": {
+      "type": "string",
+      "required": false,
+      "default": "검색하세요"
+    },
+    "register": {
+      "type": "object",
+      "required": false
+    },
+    "required": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "searchValue": {
+      "type": "string",
+      "required": false,
+      "default": ""
+    },
+    "showFooterButtons": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm",
+        "xs"
+      ],
+      "default": "xs"
+    },
+    "value": {
+      "type": "string",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/types/dropdown/option\").OptionValue | undefined"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-combobox",
+    "ncua-combobox--disabled",
+    "ncua-combobox--open",
+    "ncua-combobox--sm",
+    "ncua-combobox--xs",
+    "ncua-combobox__content",
+    "ncua-combobox__tags",
+    "ncua-input__icon-wrap ncua-input__right-icon",
+    "ncua-select-dropdown__no-results"
+  ],
+  "usage": {
+    "import": "import { ComboBox } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<ComboBox />",
+      "size:sm": "<ComboBox size=\"sm\" />",
+      "size:xs": "<ComboBox size=\"xs\" />"
+    }
+  }
+}

package/data/date-picker.json

@@ -0,0 +1,109 @@
+{
+  "name": "date-picker",
+  "exportName": "DatePicker",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "input",
+  "description": "DatePicker는 등록일, 노출일, 검색 기간 등 날짜 또는 시간 설정이 필요한 경우 사용하는 선택 위젯입니다.",
+  "aliases": [
+    "날짜선택위젯",
+    "DatePicker",
+    "컴포넌트",
+    "날짜",
+    "시간",
+    "캘린더",
+    "flatpickr",
+    "destructive",
+    "currentDate",
+    "isEndDate",
+    "datePickerOptions",
+    "enableTime",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "날짜/시간/날짜+시간 3가지 변형으로 제공하며 텍스트 직접 입력을 항상 허용",
+    "Variant별 고정 Width(날짜 138px / 날짜+시간 177px)를 유지"
+  ],
+  "forbiddenRules": [
+    "초 단위 불필요 영역에 노출 금지",
+    "같은 Variant 내 사이즈 불일치 금지",
+    "기간 옵션 3개 이하 또는 8개 이상 구성 금지",
+    "조회 화면에서 Disabled Field 사용 금지",
+    "텍스트 입력 불가 UX 금지",
+    "NCDS Icon 외 임의 아이콘/이미지 사용 금지"
+  ],
+  "seeAlso": [
+    "range-date-picker"
+  ],
+  "htmlElement": "input",
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "currentDate": {
+      "type": "string",
+      "required": true
+    },
+    "datePickerOptions": {
+      "type": "object",
+      "required": false
+    },
+    "destructive": {
+      "type": "string",
+      "required": false
+    },
+    "isEndDate": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "onChangeDate": {
+      "type": "function",
+      "required": true
+    },
+    "onValidationError": {
+      "type": "function",
+      "required": false
+    },
+    "placeholder": {
+      "type": "string",
+      "required": false
+    },
+    "shouldFocus": {
+      "type": "boolean",
+      "required": false,
+      "default": true
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm",
+        "xs"
+      ],
+      "default": "xs"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-date-picker",
+    "ncua-date-picker--destructive",
+    "ncua-date-picker--disabled",
+    "ncua-date-picker--has-time",
+    "ncua-date-picker--sm",
+    "ncua-date-picker--xs",
+    "ncua-date-picker__destructive",
+    "ncua-date-picker__ico",
+    "ncua-date-picker__input"
+  ],
+  "usage": {
+    "import": "import { DatePicker } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<DatePicker currentDate=\"\" onChangeDate=\"\" />",
+      "size:sm": "<DatePicker size=\"sm\" currentDate=\"\" onChangeDate=\"\" />",
+      "size:xs": "<DatePicker size=\"xs\" currentDate=\"\" onChangeDate=\"\" />"
+    }
+  }
+}

package/data/divider.json

@@ -0,0 +1,91 @@
+{
+  "name": "divider",
+  "exportName": "Divider",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "data-display",
+  "description": "콘텐츠 영역을 시각적으로 구분하는 수평 또는 수직 구분선 컴포넌트입니다.",
+  "aliases": [
+    "Divider",
+    "구분선",
+    "경계선",
+    "separator",
+    "hr",
+    "수평선",
+    "수직선",
+    "구분",
+    "경계",
+    "레이아웃구분"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "콘텐츠 영역 간 시각적 경계가 필요할 때"
+  ],
+  "forbiddenRules": [
+    "장식 목적으로 과도한 사용 금지",
+    "콘텐츠 없이 시각적 장식으로만 사용 금지",
+    "동일 영역에 과도한 반복 사용 금지"
+  ],
+  "seeAlso": [
+    "empty-state"
+  ],
+  "props": {
+    "children": {
+      "type": "ReactNode",
+      "required": true
+    },
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "style": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "background-fill",
+        "single-line"
+      ],
+      "default": "single-line"
+    },
+    "type": {
+      "type": "enum",
+      "required": true,
+      "values": [
+        "button",
+        "button-group",
+        "button-group-icon",
+        "button-icon",
+        "heading",
+        "text"
+      ]
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-divider",
+    "ncua-divider--background-fill",
+    "ncua-divider--button",
+    "ncua-divider--button-group",
+    "ncua-divider--button-group-icon",
+    "ncua-divider--button-icon",
+    "ncua-divider--heading",
+    "ncua-divider--single-line",
+    "ncua-divider--text",
+    "ncua-divider__content",
+    "ncua-divider__line"
+  ],
+  "usage": {
+    "import": "import { Divider } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Divider children=\"예시\" type=\"button\" />",
+      "style:background-fill": "<Divider style=\"background-fill\" children=\"예시\" type=\"button\" />",
+      "style:single-line": "<Divider style=\"single-line\" children=\"예시\" type=\"button\" />",
+      "type:button": "<Divider type=\"button\" children=\"예시\" />",
+      "type:button-group": "<Divider type=\"button-group\" children=\"예시\" />",
+      "type:button-group-icon": "<Divider type=\"button-group-icon\" children=\"예시\" />",
+      "type:button-icon": "<Divider type=\"button-icon\" children=\"예시\" />",
+      "type:heading": "<Divider type=\"heading\" children=\"예시\" />",
+      "type:text": "<Divider type=\"text\" children=\"예시\" />"
+    }
+  }
+}

package/data/dot.json

@@ -0,0 +1,103 @@
+{
+  "name": "dot",
+  "exportName": "Dot",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "icon",
+  "description": "Dot 컴포넌트는 상태나 알림을 시각적으로 표시하기 위한 작은 원형 표시기입니다",
+  "aliases": [
+    "Dot",
+    "닷",
+    "점",
+    "인디케이터",
+    "상태표시",
+    "베이스컴포넌트",
+    "neutral",
+    "error",
+    "warning",
+    "success",
+    "info",
+    "blue",
+    "pink",
+    "disabled",
+    "Badge",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "상태 뱃지 내 인디케이터",
+    "알림 뱃지 내 표시",
+    "항목 상태 분류"
+  ],
+  "forbiddenRules": [
+    "Dot 단독 사용 금지",
+    "일반 텍스트와 직접 조합 금지",
+    "커스텀 색상 사용 금지",
+    "의미와 맞지 않는 색상 사용 금지",
+    "같은 레벨 내 Size 혼용 금지"
+  ],
+  "seeAlso": [
+    "badge"
+  ],
+  "htmlElement": "span",
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "color": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "blue",
+        "disabled",
+        "error",
+        "neutral",
+        "pink",
+        "success",
+        "warning"
+      ],
+      "default": "success"
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "lg",
+        "md",
+        "sm"
+      ],
+      "default": "md"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-dot",
+    "ncua-dot--blue",
+    "ncua-dot--disabled",
+    "ncua-dot--error",
+    "ncua-dot--lg",
+    "ncua-dot--md",
+    "ncua-dot--neutral",
+    "ncua-dot--pink",
+    "ncua-dot--sm",
+    "ncua-dot--success",
+    "ncua-dot--warning"
+  ],
+  "usage": {
+    "import": "import { Dot } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Dot />",
+      "color:blue": "<Dot color=\"blue\" />",
+      "color:disabled": "<Dot color=\"disabled\" />",
+      "color:error": "<Dot color=\"error\" />",
+      "color:neutral": "<Dot color=\"neutral\" />",
+      "color:pink": "<Dot color=\"pink\" />",
+      "color:success": "<Dot color=\"success\" />",
+      "color:warning": "<Dot color=\"warning\" />",
+      "size:lg": "<Dot size=\"lg\" />",
+      "size:md": "<Dot size=\"md\" />",
+      "size:sm": "<Dot size=\"sm\" />"
+    }
+  }
+}