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

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,263 @@
+{
+  "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": {
+    "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,
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"text\""
+        },
+        "text": {
+          "type": "string",
+          "required": false
+        },
+        "icon": {
+          "type": "function",
+          "required": false
+        },
+        "size": {
+          "type": "number",
+          "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"
+          ]
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "placement": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "inside",
+            "outside"
+          ]
+        }
+      }
+    },
+    "maxLength": {
+      "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"
+    },
+    "trailingElement": {
+      "type": "object",
+      "required": false,
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"icon\""
+        },
+        "icon": {
+          "type": "function",
+          "required": false
+        },
+        "size": {
+          "type": "number",
+          "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"
+          ]
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "placement": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "inside",
+            "outside"
+          ]
+        },
+        "label": {
+          "type": "string",
+          "required": false
+        },
+        "isSubmit": {
+          "type": "boolean",
+          "required": false
+        },
+        "onClick": {
+          "type": "function",
+          "required": false
+        }
+      }
+    },
+    "validation": {
+      "type": "boolean",
+      "required": false
+    }
+  },
+  "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 />",
+      "size:sm": "<PasswordInput size=\"sm\" />",
+      "size:xs": "<PasswordInput size=\"xs\" />"
+    }
+  }
+}

package/data/progress-bar.json

@@ -0,0 +1,109 @@
+{
+  "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": "object",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/progress-bar/types\").ProgressSegment[] | undefined",
+      "properties": {
+        "value": {
+          "type": "number",
+          "required": true
+        },
+        "color": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "blue",
+            "gray",
+            "green",
+            "orange",
+            "pink",
+            "red",
+            "violet"
+          ]
+        }
+      }
+    },
+    "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\" />"
+    }
+  }
+}