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

package/data/number-input.json

@@ -0,0 +1,141 @@
+{
+  "name": "number-input",
+  "exportName": "NumberInput",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "NumberInput은 숫자만 입력 가능한 전용 입력 컨트롤로, 직접 입력과 Spin Button(▲/▼) 조작을 모두 지원하며 Step 기능을 통해 값을 증감할 수 있습니다.",
+  "aliases": [
+    "숫자입력",
+    "NumberInput",
+    "스핀버튼",
+    "SpinButton",
+    "Stepper",
+    "수량",
+    "step",
+    "minValue",
+    "maxValue",
+    "trailing",
+    "leading",
+    "stepperPosition",
+    "numeric",
+    "키보드조작",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "NumberInput은 명확한 범위(min/max), 기본값, 증감 단위(Step)와 함께 제공되어야 하며, 사용자가 입력 가능한 범위와 단위를 입력 전에 인지할 수 있어야 한다"
+  ],
+  "forbiddenRules": [
+    "min / max 없이 사용 금지",
+    "Default Value 없이 사용 금지",
+    "Step 변경 후 안내 미제공 금지",
+    "숫자 외 문자 허용 금지",
+    "Leading/Trailing 혼합 사용 금지"
+  ],
+  "seeAlso": [
+    "input",
+    "slider",
+    "tooltip",
+    "label"
+  ],
+  "props": {
+    "clearText": {
+      "type": "boolean",
+      "required": false
+    },
+    "destructive": {
+      "type": "boolean",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false
+    },
+    "hintText": {
+      "type": "string",
+      "required": false
+    },
+    "label": {
+      "type": "string",
+      "required": false
+    },
+    "leadingElement": {
+      "type": "object",
+      "required": false
+    },
+    "maxLength": {
+      "type": "number",
+      "required": false
+    },
+    "maxValue": {
+      "type": "number",
+      "required": false
+    },
+    "minValue": {
+      "type": "number",
+      "required": false
+    },
+    "onClearText": {
+      "type": "function",
+      "required": false
+    },
+    "required": {
+      "type": "boolean",
+      "required": false
+    },
+    "showHelpIcon": {
+      "type": "boolean",
+      "required": false
+    },
+    "showTextCount": {
+      "type": "boolean",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm",
+        "xs"
+      ],
+      "default": "xs"
+    },
+    "step": {
+      "type": "number",
+      "required": false,
+      "default": 1
+    },
+    "stepperPosition": {
+      "type": "enum",
+      "required": true,
+      "values": [
+        "leading",
+        "trailing"
+      ]
+    },
+    "trailingElement": {
+      "type": "object",
+      "required": false
+    },
+    "validation": {
+      "type": "boolean",
+      "required": false
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-input__number",
+    "ncua-input__stepper-button-group"
+  ],
+  "usage": {
+    "import": "import { NumberInput } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<NumberInput stepperPosition=\"leading\" />",
+      "size:sm": "<NumberInput size=\"sm\" stepperPosition=\"leading\" />",
+      "size:xs": "<NumberInput size=\"xs\" stepperPosition=\"leading\" />",
+      "stepperPosition:leading": "<NumberInput stepperPosition=\"leading\" />",
+      "stepperPosition:trailing": "<NumberInput stepperPosition=\"trailing\" />"
+    }
+  }
+}

package/data/pagination.json

@@ -0,0 +1,101 @@
+{
+  "name": "pagination",
+  "exportName": "Pagination",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "navigation",
+  "description": "Pagination은 다수의 데이터가 페이지 형태로 분포될 때 순서별 콘텐츠를 수치적으로 접근할 수 있는 내비게이션 컴포넌트입니다.",
+  "aliases": [
+    "Pagination",
+    "페이지네이션",
+    "페이징",
+    "페이지",
+    "내비게이션",
+    "테이블",
+    "리스트",
+    "검색결과",
+    "점프버튼",
+    "pageCount",
+    "totalCount",
+    "breakPoint",
+    "반응형",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "대량 데이터를 페이지 단위로 분할하여 순차적으로 탐색",
+    "20개 이상 데이터가 누적될 가능성이 있는 경우 필수 적용",
+    "10페이지 단위 그룹 이동과 첫/마지막 페이지 점프 지원"
+  ],
+  "forbiddenRules": [
+    "10페이지 이하에서 이동 버튼 노출 금지",
+    "선택된 페이지 재클릭 허용 금지",
+    "10개 초과 건너뛰기 이동 금지",
+    "세로형 테이블에서 사용 금지"
+  ],
+  "seeAlso": [
+    "table"
+  ],
+  "htmlElement": "button",
+  "props": {
+    "breakPoint": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "mo",
+        "pc"
+      ],
+      "default": "pc"
+    },
+    "className": {
+      "type": "string",
+      "required": false,
+      "default": ""
+    },
+    "currentPage": {
+      "type": "number",
+      "required": true
+    },
+    "itemCountPerPage": {
+      "type": "number",
+      "required": false,
+      "default": 10
+    },
+    "onPageChange": {
+      "type": "function",
+      "required": false
+    },
+    "pageCount": {
+      "type": "number",
+      "required": false,
+      "default": 10
+    },
+    "totalCount": {
+      "type": "number",
+      "required": true
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-pagination",
+    "ncua-pagination--mo",
+    "ncua-pagination--pc",
+    "ncua-pagination__before",
+    "ncua-pagination__current-num",
+    "ncua-pagination__first",
+    "ncua-pagination__item",
+    "ncua-pagination__last",
+    "ncua-pagination__list",
+    "ncua-pagination__next",
+    "ncua-pagination__page-info",
+    "ncua-pagination__page-num"
+  ],
+  "usage": {
+    "import": "import { Pagination } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Pagination currentPage={0} totalCount={0} />",
+      "breakPoint:mo": "<Pagination breakPoint=\"mo\" currentPage={0} totalCount={0} />",
+      "breakPoint:pc": "<Pagination breakPoint=\"pc\" currentPage={0} totalCount={0} />"
+    }
+  }
+}

package/data/password-input.json

@@ -0,0 +1,45 @@
+{
+  "name": "password-input",
+  "exportName": "PasswordInput",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "비밀번호 전용 입력 필드로 마스킹 토글을 내장합니다",
+  "aliases": [
+    "비밀번호",
+    "비밀번호 입력",
+    "password",
+    "패스워드",
+    "PasswordInput",
+    "비밀번호 변경",
+    "비밀번호 확인"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "명확한 레이블과 입력 예시 Placeholder 및 유효성 안내 Helper Text와 함께 제공되어야 하는 경우",
+    "사용자가 입력 가능한 형식과 제한 조건을 입력 전에 인지할 수 있어야 하는 경우"
+  ],
+  "forbiddenRules": [
+    "Label 없는 단독 Input 사용 금지",
+    "Placeholder를 Label 대체로 사용 금지",
+    "50자 이상 필드에 Text Field 사용 금지",
+    "Max 초과 입력 허용 금지",
+    "Error 상태를 실시간 남용 금지"
+  ],
+  "seeAlso": [
+    "input"
+  ],
+  "props": {},
+  "html": {},
+  "bemClasses": [
+    "ncua-input__icon-wrap",
+    "ncua-input__password-icon",
+    "ncua-input__right-icon"
+  ],
+  "usage": {
+    "import": "import { PasswordInput } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<PasswordInput />"
+    }
+  }
+}

package/data/progress-bar.json

@@ -0,0 +1,90 @@
+{
+  "name": "progress-bar",
+  "exportName": "ProgressBar",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "feedback",
+  "description": "ProgressBar는 작업 진행률, 로딩 프로세스, 완료율 등을 시각적으로 표시하여 사용자에게 진행 중인 작업의 정도를 퍼센트(%)로 보여주는 컴포넌트입니다.",
+  "aliases": [
+    "ProgressBar",
+    "프로그레스바",
+    "진행률",
+    "진행바",
+    "로딩",
+    "완료율",
+    "퍼센트",
+    "segments",
+    "세그먼트",
+    "label",
+    "다중세그먼트",
+    "color",
+    "색상",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "진행 상태를 직관적인 막대 형태로 시각화",
+    "단일 값 표시뿐 아니라 다중 세그먼트를 통해 항목별 비율 분포도 표현"
+  ],
+  "forbiddenRules": [
+    "0-100 범위 이탈 금지",
+    "불확정 진행률에 사용 금지(Spinner 사용)",
+    "white/black 세그먼트 색상 금지",
+    "세그먼트 최대 3개 제한",
+    "장식 용도 금지"
+  ],
+  "seeAlso": [
+    "progress-circle",
+    "spinner"
+  ],
+  "props": {
+    "label": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "bottom",
+        "bottom-float",
+        "right",
+        "top-float"
+      ]
+    },
+    "segments": {
+      "type": "string",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/progress-bar/types\").ProgressSegment[] | undefined"
+    },
+    "showZeroLabel": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "value": {
+      "type": "number",
+      "required": false
+    },
+    "valueToPercent": {
+      "type": "boolean",
+      "required": false,
+      "default": true
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-progress-bar",
+    "ncua-progress-bar-",
+    "ncua-progress-bar__bar",
+    "ncua-progress-bar__bar--segments",
+    "ncua-progress-bar__content",
+    "ncua-progress-bar__fill"
+  ],
+  "usage": {
+    "import": "import { ProgressBar } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<ProgressBar />",
+      "label:bottom": "<ProgressBar label=\"bottom\" />",
+      "label:bottom-float": "<ProgressBar label=\"bottom-float\" />",
+      "label:right": "<ProgressBar label=\"right\" />",
+      "label:top-float": "<ProgressBar label=\"top-float\" />"
+    }
+  }
+}

package/data/progress-circle.json

@@ -0,0 +1,96 @@
+{
+  "name": "progress-circle",
+  "exportName": "ProgressCircle",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "feedback",
+  "description": "ProgressCircle은 작업 진행 상태를 원형의 수치(%)로 시각화하여 사용자에게 현재 진행 정도를 명확하게 전달하는 컴포넌트입니다.",
+  "aliases": [
+    "ProgressCircle",
+    "프로그레스써클",
+    "진행률",
+    "원형",
+    "로딩",
+    "퍼센트",
+    "circle",
+    "half-circle",
+    "overlay",
+    "취소",
+    "cancel",
+    "dim",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "시간 예측이 어려운 장시간 진행 작업의 진행률을 원형 그래프로 시각화",
+    "Overlay(Dim Layer)와 함께 사용되어 작업 중 사용자 인터랙션을 차단하고 이탈 불안감을 최소화"
+  ],
+  "forbiddenRules": [
+    "% 없는 진행 Circle 금지",
+    "100% 초과 값 표시 금지",
+    "값 점프형 급격 변화 지양",
+    "완료 즉시 사라짐 금지(0.5~1초 유지)",
+    "불확정 진행률에 사용 금지(Spinner 사용)",
+    "단순 대기(3초 이내)에 사용 금지"
+  ],
+  "seeAlso": [
+    "progress-bar",
+    "spinner"
+  ],
+  "props": {
+    "label": {
+      "type": "string",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": true,
+      "values": [
+        "lg",
+        "md",
+        "sm",
+        "xs",
+        "xxs"
+      ]
+    },
+    "theme": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "circle",
+        "half-circle"
+      ],
+      "default": "circle"
+    },
+    "value": {
+      "type": "number",
+      "required": true
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-progress-circle",
+    "ncua-progress-circle-",
+    "ncua-progress-circle__background",
+    "ncua-progress-circle__content",
+    "ncua-progress-circle__label",
+    "ncua-progress-circle__label-container",
+    "ncua-progress-circle__label-text",
+    "ncua-progress-circle__outside-label",
+    "ncua-progress-circle__progress",
+    "ncua-progress-circle__svg"
+  ],
+  "usage": {
+    "import": "import { ProgressCircle } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<ProgressCircle size=\"lg\" value={0} />",
+      "size:lg": "<ProgressCircle size=\"lg\" value={0} />",
+      "size:md": "<ProgressCircle size=\"md\" value={0} />",
+      "size:sm": "<ProgressCircle size=\"sm\" value={0} />",
+      "size:xs": "<ProgressCircle size=\"xs\" value={0} />",
+      "size:xxs": "<ProgressCircle size=\"xxs\" value={0} />",
+      "theme:circle": "<ProgressCircle theme=\"circle\" size=\"lg\" value={0} />",
+      "theme:half-circle": "<ProgressCircle theme=\"half-circle\" size=\"lg\" value={0} />"
+    }
+  }
+}

package/data/radio.json

@@ -0,0 +1,86 @@
+{
+  "name": "radio",
+  "exportName": "Radio",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "Radio는 여러 옵션 중 하나만 선택할 수 있는 단일 선택(Single Selection) 컨트롤로, 텍스트 라벨과 보조 설명을 함께 제공할 수 있습니다.",
+  "aliases": [
+    "라디오",
+    "Radio",
+    "RadioButton",
+    "단일선택",
+    "선택",
+    "checked",
+    "unchecked",
+    "supportText",
+    "라디오그룹",
+    "RadioGroup",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "Radio는 최소 2개 이상 그룹으로 사용하며, 단일 선택만 허용한다",
+    "복수 선택이 필요하면 Checkbox를, 옵션이 5개 이상이면 Select(Dropdown)를 사용한다"
+  ],
+  "forbiddenRules": [
+    "Radio 단독 사용 금지",
+    "기본 선택 없이 사용 지양",
+    "텍스트 라벨 없이 사용 지양",
+    "Checkbox와 혼동 금지",
+    "선택 해제 동작 구현 금지"
+  ],
+  "seeAlso": [
+    "checkbox",
+    "toggle",
+    "select",
+    "label"
+  ],
+  "htmlElement": "input",
+  "props": {
+    "destructive": {
+      "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-radio-field",
+    "ncua-radio-field--sm",
+    "ncua-radio-field--xs",
+    "ncua-radio-field__input",
+    "ncua-radio-field__support-text",
+    "ncua-radio-field__text",
+    "ncua-radio-input"
+  ],
+  "usage": {
+    "import": "import { Radio } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Radio />",
+      "size:sm": "<Radio size=\"sm\" />",
+      "size:xs": "<Radio size=\"xs\" />"
+    }
+  }
+}

package/data/range-date-picker-with-buttons.json

@@ -0,0 +1,101 @@
+{
+  "name": "range-date-picker-with-buttons",
+  "exportName": "RangeDatePickerWithButtons",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "기간 옵션 버튼이 내장된 RangeDatePicker 확장 컴포넌트로 빠른 기간 설정을 지원합니다",
+  "aliases": [
+    "기간 선택 버튼",
+    "빠른 기간",
+    "date range buttons",
+    "오늘",
+    "1주",
+    "1개월",
+    "RangeDatePickerWithButtons"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "시작일·종료일 동일 Format·동일 Size를 유지하며 기간 옵션 ButtonGroup으로 빠른 기간 설정이 필요한 경우",
+    "overlap/period 유효성 검증으로 잘못된 입력을 방지해야 하는 경우"
+  ],
+  "forbiddenRules": [
+    "시작일과 종료일의 Format 불일치 금지",
+    "기간 옵션 ButtonGroup 3개 이하 또는 8개 이상 구성 금지",
+    "시작일·종료일 DatePicker 사이즈 불일치 금지",
+    "종료일에 isEndDate 수동 false 설정 금지",
+    "조회 화면에서 Disabled Field 사용 금지",
+    "텍스트 입력 불가 UX 금지",
+    "ButtonGroup 없이 RangeDatePicker 단독 사용 시 기간 프리셋 누락 금지",
+    "구분자 ~ 외 다른 기호 사용 금지"
+  ],
+  "seeAlso": [
+    "range-date-picker",
+    "date-picker"
+  ],
+  "props": {
+    "currentButtonId": {
+      "type": "string",
+      "required": true,
+      "rawType": "keyof T & string"
+    },
+    "endDateOptions": {
+      "type": "string",
+      "required": true,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/date-picker/DatePicker\").DatePickerProps"
+    },
+    "onDateValidation": {
+      "type": "function",
+      "required": false
+    },
+    "periodItems": {
+      "type": "string",
+      "required": false,
+      "rawType": "T | undefined"
+    },
+    "periodKeys": {
+      "type": "string",
+      "required": true,
+      "rawType": "(keyof T & string)[]"
+    },
+    "setCurrentButtonId": {
+      "type": "function",
+      "required": true
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm",
+        "xs"
+      ],
+      "default": "xs"
+    },
+    "startDateOptions": {
+      "type": "string",
+      "required": true,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/date-picker/DatePicker\").DatePickerProps"
+    },
+    "useYesterdayAsEndDate": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "validationOption": {
+      "type": "object",
+      "required": false
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-range-date-picker-with-buttons"
+  ],
+  "usage": {
+    "import": "import { RangeDatePickerWithButtons } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<RangeDatePickerWithButtons currentButtonId=\"\" endDateOptions=\"\" periodKeys=\"\" setCurrentButtonId=\"\" startDateOptions=\"\" />",
+      "size:sm": "<RangeDatePickerWithButtons size=\"sm\" currentButtonId=\"\" endDateOptions=\"\" periodKeys=\"\" setCurrentButtonId=\"\" startDateOptions=\"\" />",
+      "size:xs": "<RangeDatePickerWithButtons size=\"xs\" currentButtonId=\"\" endDateOptions=\"\" periodKeys=\"\" setCurrentButtonId=\"\" startDateOptions=\"\" />"
+    }
+  }
+}