@geoit/ui 0.0.2

package/ai/catalog.json

@@ -0,0 +1,882 @@
+{
+  "package": "@geoit/ui",
+  "import": "@geoit/ui",
+  "version": "0.0.1",
+  "generatedAt": "2026-07-27T01:27:04.549Z",
+  "styles": [
+    "projects/geo-ui/src/lib/styles/design-tokens.scss",
+    "projects/geo-ui/src/lib/styles/theme.scss"
+  ],
+  "tokens": {
+    "radius": "var(--geo-radius) /* 6px */",
+    "primary": "var(--geo-color-primary-default)",
+    "docs": "projects/geo-ui/src/lib/styles/design-tokens.scss"
+  },
+  "rules": [
+    "Always use geo-* components from @geoit/ui for UI.",
+    "Never hardcode hex colors or border-radius; use CSS variables.",
+    "Compose geo-form-modal + geo-stepper for multi-step dialogs.",
+    "Read ai/components/<selector>.md before implementing a component.",
+    "Import from @geoit/ui (scoped package)."
+  ],
+  "components": [
+    {
+      "name": "GeoAlertComponent",
+      "selector": "geo-alert",
+      "category": "feedback",
+      "summary": "Inline alert banner (success/error/warning/info).",
+      "whenToUse": "Form-level or page-level status messages that stay in layout.",
+      "doNotUseWhen": "Transient notifications — use geo-toast / GeoToastService.",
+      "path": "projects/geo-ui/src/lib/figma/geo-alert/geo-alert.component.ts",
+      "doc": "ai/components/geo-alert.md",
+      "inputs": [
+        "type",
+        "title",
+        "message",
+        "closable",
+        "visible",
+        "showIcon"
+      ],
+      "outputs": [
+        "closed"
+      ],
+      "example": "<geo-alert type=\"success\" title=\"Thành công\" message=\"Đã lưu.\"></geo-alert>"
+    },
+    {
+      "name": "GeoBackButtonComponent",
+      "selector": "geo-back-button",
+      "category": "navigation",
+      "summary": "Back navigation control (history or custom click).",
+      "whenToUse": "Detail/edit pages that return to a list.",
+      "doNotUseWhen": "Primary CTA — use geo-button.",
+      "path": "projects/geo-ui/src/lib/figma/geo-back-button/geo-back-button.component.ts",
+      "doc": "ai/components/geo-back-button.md",
+      "inputs": [
+        "ariaLabel",
+        "title",
+        "disabled",
+        "historyBack"
+      ],
+      "outputs": [
+        "clicked"
+      ],
+      "example": "<geo-back-button (clicked)=\"goBack()\"></geo-back-button>"
+    },
+    {
+      "name": "GeoBreadcrumbComponent",
+      "selector": "geo-breadcrumb",
+      "category": "navigation",
+      "summary": "Breadcrumb trail; last item active (primary).",
+      "whenToUse": "Page hierarchy under page title.",
+      "doNotUseWhen": "Primary navigation / sidebar menus.",
+      "path": "projects/geo-ui/src/lib/figma/geo-breadcrumb/geo-breadcrumb.component.ts",
+      "doc": "ai/components/geo-breadcrumb.md",
+      "inputs": [
+        "items"
+      ],
+      "outputs": [],
+      "example": "<geo-breadcrumb [items]=\"[\n  { label: 'Trang chủ', link: '/' },\n  { label: 'Chi tiết' }\n]\"></geo-breadcrumb>"
+    },
+    {
+      "name": "GeoButtonComponent",
+      "selector": "geo-button",
+      "category": "actions",
+      "summary": "Primary action button with brand/semantic colors and icons.",
+      "whenToUse": "All CTAs, form submit/cancel, toolbar actions.",
+      "doNotUseWhen": "Do not use raw ant-btn or native button for branded UI.",
+      "path": "projects/geo-ui/src/lib/figma/geo-button/geo-button.component.ts",
+      "doc": "ai/components/geo-button.md",
+      "inputs": [
+        "appearance",
+        "color",
+        "icon",
+        "iconTheme",
+        "iconPlacement",
+        "iconOnly",
+        "type",
+        "disabled",
+        "tooltip",
+        "tooltipPlacement",
+        "active",
+        "title"
+      ],
+      "outputs": [
+        "clicked"
+      ],
+      "example": "<geo-button appearance=\"primary\" color=\"brand\" icon=\"plus\">Thêm mới</geo-button>\n<geo-button appearance=\"primary\" icon=\"right\" iconPlacement=\"end\">Tiếp theo</geo-button>"
+    },
+    {
+      "name": "GeoCheckboxComponent",
+      "selector": "geo-checkbox",
+      "category": "forms",
+      "summary": "Checkbox with label; supports CVA / ngModel.",
+      "whenToUse": "Boolean / multi-select options in forms.",
+      "doNotUseWhen": "Single exclusive choice — use geo-radio.",
+      "path": "projects/geo-ui/src/lib/figma/geo-checkbox/geo-checkbox.component.ts",
+      "doc": "ai/components/geo-checkbox.md",
+      "inputs": [
+        "label",
+        "checked",
+        "disabled",
+        "indeterminate"
+      ],
+      "outputs": [
+        "checkedChange"
+      ],
+      "example": "<geo-checkbox label=\"Tôi đồng ý\" [(ngModel)]=\"agreed\"></geo-checkbox>"
+    },
+    {
+      "name": "GeoColumnPickerComponent",
+      "selector": "geo-column-picker",
+      "category": "data",
+      "summary": "Column visibility picker for tables (optional persistence).",
+      "whenToUse": "Let users show/hide table columns.",
+      "doNotUseWhen": "Static tables with fixed columns.",
+      "path": "projects/geo-ui/src/lib/figma/geo-table/geo-column-picker/geo-column-picker.component.ts",
+      "doc": "ai/components/geo-column-picker.md",
+      "inputs": [
+        "triggerLabel",
+        "hint",
+        "items",
+        "storageKey"
+      ],
+      "outputs": [
+        "apply"
+      ],
+      "example": "<geo-column-picker [items]=\"cols\" (apply)=\"onCols($event)\"></geo-column-picker>"
+    },
+    {
+      "name": "GeoConfirmModalComponent",
+      "selector": "geo-confirm-modal",
+      "category": "overlay",
+      "summary": "Confirm / danger dialog (destroy actions).",
+      "whenToUse": "Delete, irreversible actions.",
+      "doNotUseWhen": "Multi-field forms — use geo-form-modal.",
+      "path": "projects/geo-ui/src/lib/figma/geo-confirm-modal/geo-confirm-modal.component.ts",
+      "doc": "ai/components/geo-confirm-modal.md",
+      "inputs": [
+        "visible",
+        "title",
+        "message",
+        "highlight",
+        "description",
+        "cancelText",
+        "confirmText",
+        "confirmLoading",
+        "width",
+        "maskClosable",
+        "closable"
+      ],
+      "outputs": [
+        "visibleChange",
+        "confirm",
+        "cancel"
+      ],
+      "example": "<geo-confirm-modal\n  [visible]=\"open\"\n  title=\"Xóa hồ sơ?\"\n  message=\"Hành động không thể hoàn tác.\"\n  confirmText=\"Xóa\"\n  (confirm)=\"onDelete()\"\n  (visibleChange)=\"open = $event\"\n></geo-confirm-modal>"
+    },
+    {
+      "name": "GeoDatePickerComponent",
+      "selector": "geo-date-picker",
+      "category": "forms",
+      "summary": "Single date (optional time) picker.",
+      "whenToUse": "One date field in forms.",
+      "doNotUseWhen": "Date range — use geo-date-range-picker.",
+      "path": "projects/geo-ui/src/lib/figma/geo-date-picker/geo-date-picker.component.ts",
+      "doc": "ai/components/geo-date-picker.md",
+      "inputs": [
+        "label",
+        "placeholder",
+        "format",
+        "mode",
+        "size",
+        "disabled",
+        "required",
+        "error",
+        "errorMessage",
+        "allowClear",
+        "showToday",
+        "showTime",
+        "block",
+        "width",
+        "disabledDate"
+      ],
+      "outputs": [
+        "valueChange"
+      ],
+      "example": "<geo-date-picker label=\"Ngày tạo\" [required]=\"true\" [(ngModel)]=\"date\" [block]=\"true\"></geo-date-picker>"
+    },
+    {
+      "name": "GeoDateRangePickerComponent",
+      "selector": "geo-date-range-picker",
+      "category": "forms",
+      "summary": "Start–end date range picker.",
+      "whenToUse": "Filters and period selection.",
+      "doNotUseWhen": "Single date — use geo-date-picker.",
+      "path": "projects/geo-ui/src/lib/figma/geo-date-range-picker/geo-date-range-picker.component.ts",
+      "doc": "ai/components/geo-date-range-picker.md",
+      "inputs": [
+        "label",
+        "placeholder",
+        "format",
+        "size",
+        "disabled",
+        "required",
+        "error",
+        "errorMessage",
+        "allowClear",
+        "showTime",
+        "block",
+        "width",
+        "disabledDate",
+        "separator"
+      ],
+      "outputs": [
+        "valueChange"
+      ],
+      "example": "<geo-date-range-picker label=\"Khoảng thời gian\" [(ngModel)]=\"range\" [block]=\"true\"></geo-date-range-picker>"
+    },
+    {
+      "name": "GeoFilePickerComponent",
+      "selector": "geo-file-picker",
+      "category": "forms",
+      "summary": "Compact file input for forms (button + filename).",
+      "whenToUse": "Single/small file field inside a form row.",
+      "doNotUseWhen": "Drag-drop multi upload with progress — use geo-upload.",
+      "path": "projects/geo-ui/src/lib/figma/geo-file-picker/geo-file-picker.component.ts",
+      "doc": "ai/components/geo-file-picker.md",
+      "inputs": [
+        "label",
+        "placeholder",
+        "buttonText",
+        "required",
+        "disabled",
+        "accept",
+        "multiple",
+        "error",
+        "errorMessage",
+        "block",
+        "width",
+        "selectedName"
+      ],
+      "outputs": [
+        "fileChange"
+      ],
+      "example": "<geo-file-picker label=\"Đính kèm\" accept=\".pdf,.png\" (fileChange)=\"onFile($event)\" [block]=\"true\"></geo-file-picker>"
+    },
+    {
+      "name": "GeoFormModalComponent",
+      "selector": "geo-form-modal",
+      "category": "overlay",
+      "summary": "Form modal: fixed header/footer, scrollable body via ng-content.",
+      "whenToUse": "Create/edit dialogs; compose geo-stepper inside body for multi-step.",
+      "doNotUseWhen": "Full-page wizards — use geo-step-form-layout.",
+      "path": "projects/geo-ui/src/lib/figma/geo-form-modal/geo-form-modal.component.ts",
+      "doc": "ai/components/geo-form-modal.md",
+      "inputs": [
+        "open",
+        "title",
+        "titleUppercase",
+        "okText",
+        "cancelText",
+        "cancelIcon",
+        "cancelIconPlacement",
+        "okIcon",
+        "okIconPlacement",
+        "secondaryOkText",
+        "confirmLoading",
+        "okDisabled",
+        "readonly",
+        "width",
+        "closable",
+        "mask",
+        "maskClosable",
+        "keyboard",
+        "centered",
+        "zIndex",
+        "className",
+        "wrapClassName",
+        "bodyScroll",
+        "bodyMaxHeight"
+      ],
+      "outputs": [
+        "openChange",
+        "ok",
+        "secondaryOk",
+        "cancel",
+        "afterOpen",
+        "afterClose"
+      ],
+      "example": "<geo-form-modal\n  [open]=\"open\"\n  title=\"Thêm mới\"\n  cancelText=\"Hủy bỏ\"\n  okText=\"Lưu\"\n  (openChange)=\"open = $event\"\n  (ok)=\"save()\"\n>\n  <geo-input label=\"Tên\" [required]=\"true\" [block]=\"true\" [(ngModel)]=\"name\"></geo-input>\n</geo-form-modal>"
+    },
+    {
+      "name": "GeoIconComponent",
+      "selector": "geo-icon",
+      "category": "display",
+      "summary": "Ant Design icon wrapper with GEO size/color tokens.",
+      "whenToUse": "Standalone icons; buttons usually use geo-button [icon].",
+      "doNotUseWhen": "Do not hardcode icon hex colors — use color token names.",
+      "path": "projects/geo-ui/src/lib/figma/geo-icon/geo-icon.component.ts",
+      "doc": "ai/components/geo-icon.md",
+      "inputs": [
+        "type",
+        "theme",
+        "spin",
+        "size",
+        "color"
+      ],
+      "outputs": [],
+      "example": "<geo-icon type=\"search\" size=\"md\" color=\"primary\"></geo-icon>"
+    },
+    {
+      "name": "GeoInputComponent",
+      "selector": "geo-input",
+      "category": "forms",
+      "summary": "Text input with label, validation, icons; CVA/ngModel.",
+      "whenToUse": "Default text fields in forms.",
+      "doNotUseWhen": "Long text — use geo-textarea; select options — use geo-select.",
+      "path": "projects/geo-ui/src/lib/figma/geo-input/geo-input.component.ts",
+      "doc": "ai/components/geo-input.md",
+      "inputs": [
+        "label",
+        "placeholder",
+        "type",
+        "disabled",
+        "readonly",
+        "required",
+        "error",
+        "errorMessage",
+        "maxlength",
+        "prefixIcon",
+        "suffixIcon",
+        "allowClear",
+        "block",
+        "width"
+      ],
+      "outputs": [
+        "valueChange",
+        "enterPressed"
+      ],
+      "example": "<geo-input label=\"Họ tên\" [required]=\"true\" [block]=\"true\" [(ngModel)]=\"name\"></geo-input>"
+    },
+    {
+      "name": "GeoPageTitleComponent",
+      "selector": "geo-page-title",
+      "category": "display",
+      "summary": "Page title (uppercase) with short primary accent underline; uses geo-typography.",
+      "whenToUse": "Top of detail/list pages, often under breadcrumb.",
+      "doNotUseWhen": "Modal titles — geo-form-modal has its own title.",
+      "path": "projects/geo-ui/src/lib/figma/geo-page-title/geo-page-title.component.ts",
+      "doc": "ai/components/geo-page-title.md",
+      "inputs": [
+        "title",
+        "uppercase",
+        "accentWidth",
+        "accentHeight",
+        "level"
+      ],
+      "outputs": [],
+      "example": "<geo-page-title title=\"Thông tin chi tiết hồ sơ\" [level]=\"3\"></geo-page-title>"
+    },
+    {
+      "name": "GeoPaginationComponent",
+      "selector": "geo-pagination",
+      "category": "navigation",
+      "summary": "Standalone pagination control.",
+      "whenToUse": "Paging outside geo-table.",
+      "doNotUseWhen": "Inside tables prefer geo-table / geo-table-pagination.",
+      "path": "projects/geo-ui/src/lib/figma/geo-pagination/geo-pagination.component.ts",
+      "doc": "ai/components/geo-pagination.md",
+      "inputs": [
+        "pageIndex",
+        "pageSize",
+        "total",
+        "size",
+        "simple",
+        "hideOnSinglePage",
+        "showSizeChanger",
+        "pageSizeOptions"
+      ],
+      "outputs": [
+        "pageIndexChange",
+        "pageSizeChange"
+      ],
+      "example": "<geo-pagination [pageIndex]=\"1\" [pageSize]=\"10\" [total]=\"100\" (pageIndexChange)=\"onPage($event)\"></geo-pagination>"
+    },
+    {
+      "name": "GeoRadioComponent",
+      "selector": "geo-radio",
+      "category": "forms",
+      "summary": "Radio group (horizontal/vertical or button style).",
+      "whenToUse": "Exclusive choice among few options.",
+      "doNotUseWhen": "Many options — use geo-select.",
+      "path": "projects/geo-ui/src/lib/figma/geo-radio/geo-radio.component.ts",
+      "doc": "ai/components/geo-radio.md",
+      "inputs": [
+        "options",
+        "label",
+        "size",
+        "layout",
+        "buttonStyle",
+        "buttonAppearance",
+        "disabled",
+        "required",
+        "error",
+        "errorMessage",
+        "block"
+      ],
+      "outputs": [
+        "valueChange"
+      ],
+      "example": "<geo-radio\n  label=\"Loại yêu cầu\"\n  layout=\"vertical\"\n  [options]=\"[{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }]\"\n  [(ngModel)]=\"type\"\n  [block]=\"true\"\n></geo-radio>"
+    },
+    {
+      "name": "GeoRowActionsComponent",
+      "selector": "geo-row-actions",
+      "category": "data",
+      "summary": "Row action icons/menu (edit, more, custom).",
+      "whenToUse": "Actions column inside geo-table.",
+      "doNotUseWhen": "Page-level CTAs — use geo-button.",
+      "path": "projects/geo-ui/src/lib/figma/geo-table/geo-row-actions/geo-row-actions.component.ts",
+      "doc": "ai/components/geo-row-actions.md",
+      "inputs": [
+        "actions",
+        "primaryActionKey"
+      ],
+      "outputs": [
+        "actionClick",
+        "edit",
+        "more"
+      ],
+      "example": "<geo-row-actions [actions]=\"actions\" (actionClick)=\"onAction($event)\"></geo-row-actions>"
+    },
+    {
+      "name": "GeoSelectComponent",
+      "selector": "geo-select",
+      "category": "forms",
+      "summary": "Select / multi-select dropdown.",
+      "whenToUse": "Choosing from a list of options.",
+      "doNotUseWhen": "2–3 exclusive options may use geo-radio instead.",
+      "path": "projects/geo-ui/src/lib/figma/geo-select/geo-select.component.ts",
+      "doc": "ai/components/geo-select.md",
+      "inputs": [
+        "options",
+        "label",
+        "placeholder",
+        "size",
+        "mode",
+        "disabled",
+        "required",
+        "error",
+        "errorMessage",
+        "allowClear",
+        "showSearch",
+        "block",
+        "width"
+      ],
+      "outputs": [
+        "valueChange"
+      ],
+      "example": "<geo-select\n  label=\"Trạng thái\"\n  [options]=\"[{ label: 'Active', value: 1 }, { label: 'Inactive', value: 0 }]\"\n  [(ngModel)]=\"status\"\n  [block]=\"true\"\n></geo-select>"
+    },
+    {
+      "name": "GeoSliderComponent",
+      "selector": "geo-slider",
+      "category": "forms",
+      "summary": "Numeric range slider.",
+      "whenToUse": "Continuous numeric value in a range.",
+      "doNotUseWhen": "Discrete small sets — use select/radio.",
+      "path": "projects/geo-ui/src/lib/figma/geo-slider/geo-slider.component.ts",
+      "doc": "ai/components/geo-slider.md",
+      "inputs": [
+        "value",
+        "min",
+        "max",
+        "step",
+        "disabled",
+        "tipFormatter"
+      ],
+      "outputs": [
+        "valueChange"
+      ],
+      "example": "<geo-slider [min]=\"0\" [max]=\"100\" [(ngModel)]=\"percent\"></geo-slider>"
+    },
+    {
+      "name": "GeoStatusTagComponent",
+      "selector": "geo-status-tag",
+      "category": "display",
+      "summary": "Pill status tag with optional dot (success/error/warning/info/teal/…).",
+      "whenToUse": "Status in tables, cards, lists.",
+      "doNotUseWhen": "Clickable filters — use button/tabs.",
+      "path": "projects/geo-ui/src/lib/figma/geo-status-tag/geo-status-tag.component.ts",
+      "doc": "ai/components/geo-status-tag.md",
+      "inputs": [
+        "status",
+        "label",
+        "showDot"
+      ],
+      "outputs": [],
+      "example": "<geo-status-tag status=\"success\" label=\"Hoạt động\"></geo-status-tag>"
+    },
+    {
+      "name": "GeoStepFormLayoutComponent",
+      "selector": "geo-step-form-layout",
+      "category": "layout",
+      "summary": "Full-page multi-step form: vertical stepper + content card + footer actions.",
+      "whenToUse": "Long registration / create wizards as a page.",
+      "doNotUseWhen": "Dialogs — use geo-form-modal + geo-stepper.",
+      "path": "projects/geo-ui/src/lib/figma/geo-step-form-layout/geo-step-form-layout.component.ts",
+      "doc": "ai/components/geo-step-form-layout.md",
+      "inputs": [
+        "steps",
+        "activeIndex",
+        "title",
+        "clickableSteps",
+        "showScrollButtons",
+        "showCancel",
+        "showPrevious",
+        "showSave",
+        "showNext",
+        "cancelLabel",
+        "previousLabel",
+        "saveLabel",
+        "nextLabel",
+        "finishLabel",
+        "saveLoading",
+        "nextLoading",
+        "hideDefaultFooter"
+      ],
+      "outputs": [
+        "activeIndexChange",
+        "stepSelect",
+        "cancel",
+        "previous",
+        "save",
+        "next"
+      ],
+      "example": "<geo-step-form-layout\n  title=\"Thêm mới\"\n  [steps]=\"steps\"\n  [activeIndex]=\"i\"\n  (next)=\"goNext()\"\n  (previous)=\"goPrev()\"\n  (cancel)=\"cancel()\"\n>\n  <!-- step content -->\n</geo-step-form-layout>"
+    },
+    {
+      "name": "GeoStepperComponent",
+      "selector": "geo-stepper",
+      "category": "navigation",
+      "summary": "Steps indicator (horizontal default). Active=primary, completed=success+check.",
+      "whenToUse": "Multi-step flows; place inside geo-form-modal body or pages.",
+      "doNotUseWhen": "Tabs for peer sections — use geo-tabs.",
+      "path": "projects/geo-ui/src/lib/figma/geo-stepper/geo-stepper.component.ts",
+      "doc": "ai/components/geo-stepper.md",
+      "inputs": [
+        "steps",
+        "activeIndex",
+        "orientation",
+        "clickable"
+      ],
+      "outputs": [
+        "activeIndexChange",
+        "stepSelect"
+      ],
+      "example": "<geo-stepper\n  [steps]=\"[\n    { key: 'a', label: '1. Thông tin' },\n    { key: 'b', label: '2. Xác nhận' }\n  ]\"\n  [activeIndex]=\"0\"\n  orientation=\"horizontal\"\n  [clickable]=\"false\"\n></geo-stepper>"
+    },
+    {
+      "name": "GeoTableComponent",
+      "selector": "geo-table",
+      "category": "data",
+      "summary": "Data table with pagination, selection, row actions, mobile card mode.",
+      "whenToUse": "List/index screens with structured rows.",
+      "doNotUseWhen": "Simple key-value detail — use typography/grid.",
+      "path": "projects/geo-ui/src/lib/figma/geo-table/geo-table.component.ts",
+      "doc": "ai/components/geo-table.md",
+      "inputs": [
+        "columns",
+        "data",
+        "loading",
+        "bordered",
+        "outerBordered",
+        "size",
+        "striped",
+        "clickable",
+        "tableLayout",
+        "showPagination",
+        "frontPagination",
+        "pageIndex",
+        "pageSize",
+        "total",
+        "pageSizeOptions",
+        "showSizeChanger",
+        "showQuickJumper",
+        "hideOnSinglePage",
+        "simplePagination",
+        "paginationPosition",
+        "scroll",
+        "scrollY",
+        "autoScroll",
+        "tableTitle",
+        "footer",
+        "emptyText",
+        "showTotalRange",
+        "selectable",
+        "rowKey",
+        "selectedKeys",
+        "mobileTitleKey",
+        "mobileCardView"
+      ],
+      "outputs": [
+        "rowClick",
+        "rowEdit",
+        "rowMore",
+        "rowAction",
+        "pageIndexChange",
+        "pageSizeChange",
+        "queryParams",
+        "currentPageDataChange",
+        "selectedKeysChange",
+        "selectionChange"
+      ],
+      "example": "<geo-table\n  [columns]=\"columns\"\n  [data]=\"rows\"\n  [total]=\"total\"\n  [pageIndex]=\"page\"\n  [pageSize]=\"10\"\n  (pageIndexChange)=\"onPage($event)\"\n></geo-table>"
+    },
+    {
+      "name": "GeoTableFilterComponent",
+      "selector": "geo-table-filter",
+      "category": "data",
+      "summary": "Table filter bar with search + advanced filters.",
+      "whenToUse": "Above geo-table for query/filter UX.",
+      "doNotUseWhen": "Standalone forms unrelated to tables.",
+      "path": "projects/geo-ui/src/lib/figma/geo-table/geo-table-filter/geo-table-filter.component.ts",
+      "doc": "ai/components/geo-table-filter.md",
+      "inputs": [
+        "columns",
+        "responsiveColumns",
+        "responsiveCollapse",
+        "mobileBreakpoint",
+        "gap",
+        "searchLabel",
+        "searchLoading",
+        "showAdvancedToggle",
+        "showReset",
+        "advancedExpanded",
+        "advancedFilterCount",
+        "filterToggleTitle",
+        "resetTitle"
+      ],
+      "outputs": [
+        "search",
+        "reset",
+        "advancedExpandedChange"
+      ],
+      "example": "<geo-table-filter (search)=\"onSearch()\" (reset)=\"onReset()\"></geo-table-filter>"
+    },
+    {
+      "name": "GeoTablePaginationComponent",
+      "selector": "geo-table-pagination",
+      "category": "data",
+      "summary": "Table-specific pagination footer (range label + size).",
+      "whenToUse": "Custom table footers; geo-table has built-in paging too.",
+      "doNotUseWhen": "Non-table paging — use geo-pagination.",
+      "path": "projects/geo-ui/src/lib/figma/geo-table/geo-table-pagination/geo-table-pagination.component.ts",
+      "doc": "ai/components/geo-table-pagination.md",
+      "inputs": [
+        "pageIndex",
+        "pageSize",
+        "total",
+        "pageSizeOptions",
+        "showSizeChanger",
+        "hideOnSinglePage",
+        "showTotalRange",
+        "sizeLabel"
+      ],
+      "outputs": [
+        "pageIndexChange",
+        "pageSizeChange"
+      ],
+      "example": "<geo-table-pagination [pageIndex]=\"1\" [pageSize]=\"10\" [total]=\"200\"></geo-table-pagination>"
+    },
+    {
+      "name": "GeoTableToolbarComponent",
+      "selector": "geo-table-toolbar",
+      "category": "data",
+      "summary": "Table toolbar: result count, delete/export/add, column toggle.",
+      "whenToUse": "Above geo-table for bulk actions.",
+      "doNotUseWhen": "Page header actions unrelated to table.",
+      "path": "projects/geo-ui/src/lib/figma/geo-table/geo-table-toolbar/geo-table-toolbar.component.ts",
+      "doc": "ai/components/geo-table-toolbar.md",
+      "inputs": [
+        "resultLabel",
+        "resultCount",
+        "selectedCount",
+        "showDelete",
+        "showExport",
+        "showColumnToggle",
+        "showAdd",
+        "addLabel",
+        "columnItems",
+        "columnStorageKey"
+      ],
+      "outputs": [
+        "deleteClick",
+        "exportClick",
+        "toggleColumns",
+        "columnApply",
+        "addClick"
+      ],
+      "example": "<geo-table-toolbar [resultCount]=\"20\" [showAdd]=\"true\" (addClick)=\"add()\"></geo-table-toolbar>"
+    },
+    {
+      "name": "GeoTabsComponent",
+      "selector": "geo-tabs",
+      "category": "navigation",
+      "summary": "Tab set with brand ink bar; content via ng-template uiTab.",
+      "whenToUse": "Peer sections on one page (info / history / files).",
+      "doNotUseWhen": "Ordered wizard steps — use geo-stepper.",
+      "path": "projects/geo-ui/src/lib/figma/geo-tabs/geo-tabs.component.ts",
+      "doc": "ai/components/geo-tabs.md",
+      "inputs": [
+        "items",
+        "type",
+        "size",
+        "selectedIndex",
+        "selectedKey",
+        "centered",
+        "animated"
+      ],
+      "outputs": [
+        "selectedIndexChange",
+        "selectedKeyChange",
+        "tabChange"
+      ],
+      "example": "<geo-tabs [items]=\"[{ key: 'a', title: 'Tab A' }, { key: 'b', title: 'Tab B' }]\" [(selectedIndex)]=\"i\">\n  <ng-template uiTab=\"a\">Content A</ng-template>\n  <ng-template uiTab=\"b\">Content B</ng-template>\n</geo-tabs>"
+    },
+    {
+      "name": "GeoTextareaComponent",
+      "selector": "geo-textarea",
+      "category": "forms",
+      "summary": "Multi-line text field with label/validation.",
+      "whenToUse": "Notes, descriptions, long text.",
+      "doNotUseWhen": "Single-line — use geo-input.",
+      "path": "projects/geo-ui/src/lib/figma/geo-textarea/geo-textarea.component.ts",
+      "doc": "ai/components/geo-textarea.md",
+      "inputs": [
+        "label",
+        "placeholder",
+        "rows",
+        "disabled",
+        "required",
+        "error",
+        "errorMessage",
+        "maxlength",
+        "block"
+      ],
+      "outputs": [
+        "valueChange"
+      ],
+      "example": "<geo-textarea label=\"Ghi chú\" [rows]=\"4\" [block]=\"true\" [(ngModel)]=\"note\"></geo-textarea>"
+    },
+    {
+      "name": "GeoToastComponent",
+      "selector": "geo-toast",
+      "category": "feedback",
+      "summary": "Toast UI; prefer GeoToastService for app-wide notifications.",
+      "whenToUse": "Transient success/error after actions.",
+      "doNotUseWhen": "Persistent inline messages — use geo-alert.",
+      "path": "projects/geo-ui/src/lib/figma/geo-toast/geo-toast.component.ts",
+      "doc": "ai/components/geo-toast.md",
+      "inputs": [
+        "type",
+        "title",
+        "message",
+        "closable",
+        "showIcon",
+        "visible",
+        "icon"
+      ],
+      "outputs": [
+        "closed"
+      ],
+      "example": "// Preferred\nthis.toast.success('Thành công!', 'Đã lưu hồ sơ.');\n\n// Or static\n<geo-toast type=\"success\" title=\"Thành công!\" message=\"Đã lưu.\"></geo-toast>"
+    },
+    {
+      "name": "GeoTreeComponent",
+      "selector": "geo-tree",
+      "category": "data",
+      "summary": "Tree view with checkable / expandable nodes.",
+      "whenToUse": "Hierarchy selection (org, folder, category).",
+      "doNotUseWhen": "Flat lists — use geo-table or select.",
+      "path": "projects/geo-ui/src/lib/figma/geo-tree/geo-tree.component.ts",
+      "doc": "ai/components/geo-tree.md",
+      "inputs": [
+        "nodes",
+        "checkable",
+        "checkedKeys",
+        "expandedKeys",
+        "showLine",
+        "blockNode"
+      ],
+      "outputs": [
+        "checkedKeysChange",
+        "expandedKeysChange",
+        "nodeClick"
+      ],
+      "example": "<geo-tree [nodes]=\"nodes\" [checkable]=\"true\" [(checkedKeys)]=\"checked\"></geo-tree>"
+    },
+    {
+      "name": "GeoTypographyComponent",
+      "selector": "geo-typography",
+      "category": "display",
+      "summary": "Text with GEO type scale (h1–tiny) and semantic colors.",
+      "whenToUse": "All readable text; prefer over raw h1/p with custom CSS.",
+      "doNotUseWhen": "Do not hardcode font-size/color — use variant/color props.",
+      "path": "projects/geo-ui/src/lib/figma/geo-typography/geo-typography.component.ts",
+      "doc": "ai/components/geo-typography.md",
+      "inputs": [
+        "variant",
+        "color",
+        "strong",
+        "underline",
+        "delete",
+        "mark",
+        "code",
+        "disabled"
+      ],
+      "outputs": [],
+      "example": "<geo-typography variant=\"h3\">Tiêu đề</geo-typography>\n<geo-typography variant=\"body\" color=\"secondary\">Mô tả phụ</geo-typography>"
+    },
+    {
+      "name": "GeoUploadComponent",
+      "selector": "geo-upload",
+      "category": "forms",
+      "summary": "Drag-drop upload zone with progress list.",
+      "whenToUse": "Multi-file upload with progress UI.",
+      "doNotUseWhen": "Simple one-file form field — use geo-file-picker.",
+      "path": "projects/geo-ui/src/lib/figma/geo-upload/geo-upload.component.ts",
+      "doc": "ai/components/geo-upload.md",
+      "inputs": [
+        "action",
+        "accept",
+        "maxSize",
+        "multiple",
+        "disabled",
+        "error",
+        "errorMessage",
+        "hint",
+        "titlePrefix",
+        "selectText",
+        "titleSuffix",
+        "listTitle",
+        "showListTitle",
+        "fileList",
+        "headers",
+        "data",
+        "name",
+        "withCredentials",
+        "directory",
+        "customRequest",
+        "beforeUpload"
+      ],
+      "outputs": [
+        "fileListChange",
+        "change",
+        "remove",
+        "reject"
+      ],
+      "example": "<geo-upload\n  accept=\".png,.jpg\"\n  [maxSize]=\"1048576\"\n  [(fileList)]=\"files\"\n></geo-upload>"
+    }
+  ]
+}