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

package/data/button-group.json

@@ -0,0 +1,94 @@
+{
+  "name": "button-group",
+  "exportName": "ButtonGroup",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "action",
+  "description": "ButtonGroup은 관련된 버튼을 하나의 그룹으로 묶어 통합된 UI 구조를 제공하는 컴포넌트입니다",
+  "aliases": [
+    "버튼그룹",
+    "ButtonGroup",
+    "컴포넌트",
+    "Toolset",
+    "Default",
+    "선택형",
+    "도구형",
+    "isCurrent",
+    "hasBorder",
+    "onlyIcon",
+    "그룹",
+    "NCDS"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "그룹의 성격(도구형 vs 선택형)에 따라 타입이 결정되는 상황",
+    "사용자가 그룹의 인터랙션 패턴과 현재 상태를 즉시 이해해야 하는 상황"
+  ],
+  "forbiddenRules": [
+    "그룹 내 혼합 사이즈 사용",
+    "Toolset(v1)에서 선택 상태 유지 사용",
+    "Default(v2)에서 다중 선택 허용",
+    "의미적으로 관련 없는 버튼 그룹화 (최대 6개 이내 권장)",
+    "그룹 내 서로 다른 콘텐츠 구성(Text/Icon) 혼용",
+    "NCDS 기준 외 임의 스타일 변경"
+  ],
+  "seeAlso": [
+    "button"
+  ],
+  "htmlElement": "button",
+  "props": {
+    "children": {
+      "type": "ReactNode",
+      "required": true
+    },
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "hasBorder": {
+      "type": "boolean",
+      "required": false,
+      "default": true
+    },
+    "onlyIcon": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "md",
+        "sm",
+        "xs",
+        "xxs"
+      ],
+      "default": "xs"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-button-group",
+    "ncua-button-group--md",
+    "ncua-button-group--sm",
+    "ncua-button-group--xs",
+    "ncua-button-group--xxs",
+    "ncua-button-group__item"
+  ],
+  "usage": {
+    "import": "import { ButtonGroup } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<ButtonGroup children=\"예시\" />",
+      "size:md": "<ButtonGroup size=\"md\" children=\"예시\" />",
+      "size:sm": "<ButtonGroup size=\"sm\" children=\"예시\" />",
+      "size:xs": "<ButtonGroup size=\"xs\" children=\"예시\" />",
+      "size:xxs": "<ButtonGroup size=\"xxs\" children=\"예시\" />"
+    }
+  }
+}

package/data/button.json

@@ -0,0 +1,259 @@
+{
+  "name": "button",
+  "exportName": "Button",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "action",
+  "description": "버튼은 사용자의 명시적 실행 의도를 수행하는 핵심 Action 컴포넌트입니다",
+  "aliases": [
+    "버튼",
+    "Button",
+    "컴포넌트",
+    "hierarchy",
+    "Primary",
+    "Secondary",
+    "Destructive",
+    "Text버튼",
+    "사이즈",
+    "아이콘",
+    "disabled",
+    "Loading",
+    "Focused",
+    "Hover",
+    "Confirm",
+    "NCDS",
+    "액션"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "역할과 중요도에 따라 계층(hierarchy)이 결정되는 상황",
+    "페이지 내 시각적 우선순위를 명확히 전달해야 하는 상황"
+  ],
+  "forbiddenRules": [
+    "Primary 버튼 복수 사용 (페이지당 1개)",
+    "버튼 사이즈 혼용 (같은 영역 내)",
+    "네비게이션 용도로 버튼 사용",
+    "NCDS 기준 외 임의 색상, radius, padding, 인터랙션 변경",
+    "Disabled 상태에서 시각적 강조나 인터랙션 하이라이트 추가",
+    "아이콘을 꾸밈 요소로만 사용",
+    "Destructive 외 Variant에서 Red 600/700 계열 색상 사용"
+  ],
+  "seeAlso": [
+    "button-group"
+  ],
+  "htmlElement": "button",
+  "props": {
+    "children": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false
+    },
+    "hierarchy": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "destructive",
+        "primary",
+        "secondary",
+        "secondary-gray",
+        "tertiary",
+        "tertiary-gray",
+        "text",
+        "text-gray",
+        "text-red"
+      ]
+    },
+    "label": {
+      "type": "ReactNode",
+      "required": true
+    },
+    "leadingIcon": {
+      "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
+        }
+      }
+    },
+    "onlyIcon": {
+      "type": "boolean",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "md",
+        "sm",
+        "xs",
+        "xxs"
+      ]
+    },
+    "trailingIcon": {
+      "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
+        }
+      }
+    },
+    "underline": {
+      "type": "boolean",
+      "required": false
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-btn",
+    "ncua-btn--destructive",
+    "ncua-btn--md",
+    "ncua-btn--primary",
+    "ncua-btn--secondary",
+    "ncua-btn--secondary-gray",
+    "ncua-btn--sm",
+    "ncua-btn--tertiary",
+    "ncua-btn--tertiary-gray",
+    "ncua-btn--text",
+    "ncua-btn--text-gray",
+    "ncua-btn--text-red",
+    "ncua-btn--xs",
+    "ncua-btn--xxs",
+    "ncua-btn__label",
+    "ncua-button-close-x",
+    "ncua-button-stepper"
+  ],
+  "usage": {
+    "import": "import { Button } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Button label=\"예시\" />",
+      "hierarchy:destructive": "<Button hierarchy=\"destructive\" label=\"예시\" />",
+      "hierarchy:primary": "<Button hierarchy=\"primary\" label=\"예시\" />",
+      "hierarchy:secondary": "<Button hierarchy=\"secondary\" label=\"예시\" />",
+      "hierarchy:secondary-gray": "<Button hierarchy=\"secondary-gray\" label=\"예시\" />",
+      "hierarchy:tertiary": "<Button hierarchy=\"tertiary\" label=\"예시\" />",
+      "hierarchy:tertiary-gray": "<Button hierarchy=\"tertiary-gray\" label=\"예시\" />",
+      "hierarchy:text": "<Button hierarchy=\"text\" label=\"예시\" />",
+      "hierarchy:text-gray": "<Button hierarchy=\"text-gray\" label=\"예시\" />",
+      "hierarchy:text-red": "<Button hierarchy=\"text-red\" label=\"예시\" />",
+      "size:md": "<Button size=\"md\" label=\"예시\" />",
+      "size:sm": "<Button size=\"sm\" label=\"예시\" />",
+      "size:xs": "<Button size=\"xs\" label=\"예시\" />",
+      "size:xxs": "<Button size=\"xxs\" label=\"예시\" />"
+    }
+  }
+}

package/data/carousel-arrow.json

@@ -0,0 +1,87 @@
+{
+  "name": "carousel-arrow",
+  "exportName": "CarouselArrow",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "feedback",
+  "description": "CarouselArrow는 캐러셀의 이전/다음 페이지로 이동할 수 있는 화살표 버튼 컴포넌트입니다.",
+  "aliases": [
+    "CarouselArrow",
+    "캐러셀",
+    "화살표",
+    "캐러셀화살표",
+    "chevron",
+    "이전",
+    "다음",
+    "페이지이동",
+    "Default",
+    "Line",
+    "네비게이션",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "캐러셀 내비게이션 전용 버튼",
+    "좌/우 방향 화살표를 통해 콘텐츠 페이지 간 이동을 직관적으로 유도"
+  ],
+  "forbiddenRules": [
+    "단일 방향만 사용 금지(left/right 쌍 필수)",
+    "캐러셀 외 용도 금지",
+    "커스텀 아이콘 금지",
+    "크기 임의 변경 금지"
+  ],
+  "seeAlso": [
+    "carousel-number-group"
+  ],
+  "props": {
+    "chevron": {
+      "type": "enum",
+      "required": true,
+      "values": [
+        "left",
+        "right"
+      ]
+    },
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "onClick": {
+      "type": "function",
+      "required": false
+    },
+    "size": {
+      "type": "string",
+      "required": true,
+      "rawType": "\"md\""
+    },
+    "type": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "default",
+        "line"
+      ],
+      "default": "default"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-carousel-arrow",
+    "ncua-carousel-arrow--default",
+    "ncua-carousel-arrow--left",
+    "ncua-carousel-arrow--line",
+    "ncua-carousel-arrow--right",
+    "ncua-carousel-arrow__icon"
+  ],
+  "usage": {
+    "import": "import { CarouselArrow } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<CarouselArrow chevron=\"left\" size=\"\" />",
+      "chevron:left": "<CarouselArrow chevron=\"left\" size=\"\" />",
+      "chevron:right": "<CarouselArrow chevron=\"right\" size=\"\" />",
+      "type:default": "<CarouselArrow type=\"default\" chevron=\"left\" size=\"\" />",
+      "type:line": "<CarouselArrow type=\"line\" chevron=\"left\" size=\"\" />"
+    }
+  }
+}

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\" />"
+    }
+  }
+}