@geoit/ui 0.0.2

package/ai/components/geo-table-filter.md

@@ -0,0 +1,65 @@
+# geo-table-filter
+
+> AI quick reference for **GeoTableFilterComponent**
+
+## Summary
+Table filter bar with search + advanced filters.
+
+## Import
+```ts
+import { GeoTableFilterComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoTableFilterComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-table-filter`
+
+## Category
+`data`
+
+## When to use
+Above geo-table for query/filter UX.
+
+## Do not use when
+Standalone forms unrelated to tables.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `columns` | See component TS / Storybook Controls |
+| `responsiveColumns` | See component TS / Storybook Controls |
+| `responsiveCollapse` | See component TS / Storybook Controls |
+| `mobileBreakpoint` | See component TS / Storybook Controls |
+| `gap` | See component TS / Storybook Controls |
+| `searchLabel` | See component TS / Storybook Controls |
+| `searchLoading` | See component TS / Storybook Controls |
+| `showAdvancedToggle` | See component TS / Storybook Controls |
+| `showReset` | See component TS / Storybook Controls |
+| `advancedExpanded` | See component TS / Storybook Controls |
+| `advancedFilterCount` | See component TS / Storybook Controls |
+| `filterToggleTitle` | See component TS / Storybook Controls |
+| `resetTitle` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `search` | EventEmitter |
+| `reset` | EventEmitter |
+| `advancedExpandedChange` | EventEmitter |
+
+## Example
+```html
+<geo-table-filter (search)="onSearch()" (reset)="onReset()"></geo-table-filter>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-table/geo-table-filter/geo-table-filter.component.ts`
+
+## Storybook
+GEO / related story for `geo-table-filter`
+
+## Rules for AI
+- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props to Storybook Controls / this doc; do not invent unsupported inputs.

package/ai/components/geo-table-pagination.md

@@ -0,0 +1,59 @@
+# geo-table-pagination
+
+> AI quick reference for **GeoTablePaginationComponent**
+
+## Summary
+Table-specific pagination footer (range label + size).
+
+## Import
+```ts
+import { GeoTablePaginationComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoTablePaginationComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-table-pagination`
+
+## Category
+`data`
+
+## When to use
+Custom table footers; geo-table has built-in paging too.
+
+## Do not use when
+Non-table paging — use geo-pagination.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `pageIndex` | See component TS / Storybook Controls |
+| `pageSize` | See component TS / Storybook Controls |
+| `total` | See component TS / Storybook Controls |
+| `pageSizeOptions` | See component TS / Storybook Controls |
+| `showSizeChanger` | See component TS / Storybook Controls |
+| `hideOnSinglePage` | See component TS / Storybook Controls |
+| `showTotalRange` | See component TS / Storybook Controls |
+| `sizeLabel` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `pageIndexChange` | EventEmitter |
+| `pageSizeChange` | EventEmitter |
+
+## Example
+```html
+<geo-table-pagination [pageIndex]="1" [pageSize]="10" [total]="200"></geo-table-pagination>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-table/geo-table-pagination/geo-table-pagination.component.ts`
+
+## Storybook
+GEO / related story for `geo-table-pagination`
+
+## Rules for AI
+- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props to Storybook Controls / this doc; do not invent unsupported inputs.

package/ai/components/geo-table-toolbar.md

@@ -0,0 +1,64 @@
+# geo-table-toolbar
+
+> AI quick reference for **GeoTableToolbarComponent**
+
+## Summary
+Table toolbar: result count, delete/export/add, column toggle.
+
+## Import
+```ts
+import { GeoTableToolbarComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoTableToolbarComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-table-toolbar`
+
+## Category
+`data`
+
+## When to use
+Above geo-table for bulk actions.
+
+## Do not use when
+Page header actions unrelated to table.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `resultLabel` | See component TS / Storybook Controls |
+| `resultCount` | See component TS / Storybook Controls |
+| `selectedCount` | See component TS / Storybook Controls |
+| `showDelete` | See component TS / Storybook Controls |
+| `showExport` | See component TS / Storybook Controls |
+| `showColumnToggle` | See component TS / Storybook Controls |
+| `showAdd` | See component TS / Storybook Controls |
+| `addLabel` | See component TS / Storybook Controls |
+| `columnItems` | See component TS / Storybook Controls |
+| `columnStorageKey` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `deleteClick` | EventEmitter |
+| `exportClick` | EventEmitter |
+| `toggleColumns` | EventEmitter |
+| `columnApply` | EventEmitter |
+| `addClick` | EventEmitter |
+
+## Example
+```html
+<geo-table-toolbar [resultCount]="20" [showAdd]="true" (addClick)="add()"></geo-table-toolbar>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-table/geo-table-toolbar/geo-table-toolbar.component.ts`
+
+## Storybook
+GEO / related story for `geo-table-toolbar`
+
+## Rules for AI
+- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props to Storybook Controls / this doc; do not invent unsupported inputs.

package/ai/components/geo-table.md

@@ -0,0 +1,98 @@
+# geo-table
+
+> AI quick reference for **GeoTableComponent**
+
+## Summary
+Data table with pagination, selection, row actions, mobile card mode.
+
+## Import
+```ts
+import { GeoTableComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoTableComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-table`
+
+## Category
+`data`
+
+## When to use
+List/index screens with structured rows.
+
+## Do not use when
+Simple key-value detail — use typography/grid.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `columns` | See component TS / Storybook Controls |
+| `data` | See component TS / Storybook Controls |
+| `loading` | See component TS / Storybook Controls |
+| `bordered` | See component TS / Storybook Controls |
+| `outerBordered` | See component TS / Storybook Controls |
+| `size` | See component TS / Storybook Controls |
+| `striped` | See component TS / Storybook Controls |
+| `clickable` | See component TS / Storybook Controls |
+| `tableLayout` | See component TS / Storybook Controls |
+| `showPagination` | See component TS / Storybook Controls |
+| `frontPagination` | See component TS / Storybook Controls |
+| `pageIndex` | See component TS / Storybook Controls |
+| `pageSize` | See component TS / Storybook Controls |
+| `total` | See component TS / Storybook Controls |
+| `pageSizeOptions` | See component TS / Storybook Controls |
+| `showSizeChanger` | See component TS / Storybook Controls |
+| `showQuickJumper` | See component TS / Storybook Controls |
+| `hideOnSinglePage` | See component TS / Storybook Controls |
+| `simplePagination` | See component TS / Storybook Controls |
+| `paginationPosition` | See component TS / Storybook Controls |
+| `scroll` | See component TS / Storybook Controls |
+| `scrollY` | See component TS / Storybook Controls |
+| `autoScroll` | See component TS / Storybook Controls |
+| `tableTitle` | See component TS / Storybook Controls |
+| `footer` | See component TS / Storybook Controls |
+| `emptyText` | See component TS / Storybook Controls |
+| `showTotalRange` | See component TS / Storybook Controls |
+| `selectable` | See component TS / Storybook Controls |
+| `rowKey` | See component TS / Storybook Controls |
+| `selectedKeys` | See component TS / Storybook Controls |
+| `mobileTitleKey` | See component TS / Storybook Controls |
+| `mobileCardView` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `rowClick` | EventEmitter |
+| `rowEdit` | EventEmitter |
+| `rowMore` | EventEmitter |
+| `rowAction` | EventEmitter |
+| `pageIndexChange` | EventEmitter |
+| `pageSizeChange` | EventEmitter |
+| `queryParams` | EventEmitter |
+| `currentPageDataChange` | EventEmitter |
+| `selectedKeysChange` | EventEmitter |
+| `selectionChange` | EventEmitter |
+
+## Example
+```html
+<geo-table
+  [columns]="columns"
+  [data]="rows"
+  [total]="total"
+  [pageIndex]="page"
+  [pageSize]="10"
+  (pageIndexChange)="onPage($event)"
+></geo-table>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-table/geo-table.component.ts`
+
+## Storybook
+GEO / related story for `geo-table`
+
+## Rules for AI
+- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props to Storybook Controls / this doc; do not invent unsupported inputs.

package/ai/components/geo-tabs.md

@@ -0,0 +1,62 @@
+# geo-tabs
+
+> AI quick reference for **GeoTabsComponent**
+
+## Summary
+Tab set with brand ink bar; content via ng-template uiTab.
+
+## Import
+```ts
+import { GeoTabsComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoTabsComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-tabs`
+
+## Category
+`navigation`
+
+## When to use
+Peer sections on one page (info / history / files).
+
+## Do not use when
+Ordered wizard steps — use geo-stepper.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `items` | See component TS / Storybook Controls |
+| `type` | See component TS / Storybook Controls |
+| `size` | See component TS / Storybook Controls |
+| `selectedIndex` | See component TS / Storybook Controls |
+| `selectedKey` | See component TS / Storybook Controls |
+| `centered` | See component TS / Storybook Controls |
+| `animated` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `selectedIndexChange` | EventEmitter |
+| `selectedKeyChange` | EventEmitter |
+| `tabChange` | EventEmitter |
+
+## Example
+```html
+<geo-tabs [items]="[{ key: 'a', title: 'Tab A' }, { key: 'b', title: 'Tab B' }]" [(selectedIndex)]="i">
+  <ng-template uiTab="a">Content A</ng-template>
+  <ng-template uiTab="b">Content B</ng-template>
+</geo-tabs>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-tabs/geo-tabs.component.ts`
+
+## Storybook
+GEO / related story for `geo-tabs`
+
+## Rules for AI
+- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props to Storybook Controls / this doc; do not invent unsupported inputs.

package/ai/components/geo-textarea.md

@@ -0,0 +1,59 @@
+# geo-textarea
+
+> AI quick reference for **GeoTextareaComponent**
+
+## Summary
+Multi-line text field with label/validation.
+
+## Import
+```ts
+import { GeoTextareaComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoTextareaComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-textarea`
+
+## Category
+`forms`
+
+## When to use
+Notes, descriptions, long text.
+
+## Do not use when
+Single-line — use geo-input.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `label` | See component TS / Storybook Controls |
+| `placeholder` | See component TS / Storybook Controls |
+| `rows` | See component TS / Storybook Controls |
+| `disabled` | See component TS / Storybook Controls |
+| `required` | See component TS / Storybook Controls |
+| `error` | See component TS / Storybook Controls |
+| `errorMessage` | See component TS / Storybook Controls |
+| `maxlength` | See component TS / Storybook Controls |
+| `block` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `valueChange` | EventEmitter |
+
+## Example
+```html
+<geo-textarea label="Ghi chú" [rows]="4" [block]="true" [(ngModel)]="note"></geo-textarea>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-textarea/geo-textarea.component.ts`
+
+## Storybook
+GEO / related story for `geo-textarea`
+
+## Rules for AI
+- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props to Storybook Controls / this doc; do not invent unsupported inputs.

package/ai/components/geo-toast.md

@@ -0,0 +1,61 @@
+# geo-toast
+
+> AI quick reference for **GeoToastComponent**
+
+## Summary
+Toast UI; prefer GeoToastService for app-wide notifications.
+
+## Import
+```ts
+import { GeoToastComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoToastComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-toast`
+
+## Category
+`feedback`
+
+## When to use
+Transient success/error after actions.
+
+## Do not use when
+Persistent inline messages — use geo-alert.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `type` | See component TS / Storybook Controls |
+| `title` | See component TS / Storybook Controls |
+| `message` | See component TS / Storybook Controls |
+| `closable` | See component TS / Storybook Controls |
+| `showIcon` | See component TS / Storybook Controls |
+| `visible` | See component TS / Storybook Controls |
+| `icon` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `closed` | EventEmitter |
+
+## Example
+```html
+// Preferred
+this.toast.success('Thành công!', 'Đã lưu hồ sơ.');
+
+// Or static
+<geo-toast type="success" title="Thành công!" message="Đã lưu."></geo-toast>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-toast/geo-toast.component.ts`
+
+## Storybook
+GEO / related story for `geo-toast`
+
+## Rules for AI
+- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props to Storybook Controls / this doc; do not invent unsupported inputs.

package/ai/components/geo-tree.md

@@ -0,0 +1,58 @@
+# geo-tree
+
+> AI quick reference for **GeoTreeComponent**
+
+## Summary
+Tree view with checkable / expandable nodes.
+
+## Import
+```ts
+import { GeoTreeComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoTreeComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-tree`
+
+## Category
+`data`
+
+## When to use
+Hierarchy selection (org, folder, category).
+
+## Do not use when
+Flat lists — use geo-table or select.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `nodes` | See component TS / Storybook Controls |
+| `checkable` | See component TS / Storybook Controls |
+| `checkedKeys` | See component TS / Storybook Controls |
+| `expandedKeys` | See component TS / Storybook Controls |
+| `showLine` | See component TS / Storybook Controls |
+| `blockNode` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `checkedKeysChange` | EventEmitter |
+| `expandedKeysChange` | EventEmitter |
+| `nodeClick` | EventEmitter |
+
+## Example
+```html
+<geo-tree [nodes]="nodes" [checkable]="true" [(checkedKeys)]="checked"></geo-tree>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-tree/geo-tree.component.ts`
+
+## Storybook
+GEO / related story for `geo-tree`
+
+## Rules for AI
+- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props to Storybook Controls / this doc; do not invent unsupported inputs.

package/ai/components/geo-typography.md

@@ -0,0 +1,57 @@
+# geo-typography
+
+> AI quick reference for **GeoTypographyComponent**
+
+## Summary
+Text with GEO type scale (h1–tiny) and semantic colors.
+
+## Import
+```ts
+import { GeoTypographyComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoTypographyComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-typography`
+
+## Category
+`display`
+
+## When to use
+All readable text; prefer over raw h1/p with custom CSS.
+
+## Do not use when
+Do not hardcode font-size/color — use variant/color props.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `variant` | See component TS / Storybook Controls |
+| `color` | See component TS / Storybook Controls |
+| `strong` | See component TS / Storybook Controls |
+| `underline` | See component TS / Storybook Controls |
+| `delete` | See component TS / Storybook Controls |
+| `mark` | See component TS / Storybook Controls |
+| `code` | See component TS / Storybook Controls |
+| `disabled` | See component TS / Storybook Controls |
+
+## Outputs
+_None_
+
+## Example
+```html
+<geo-typography variant="h3">Tiêu đề</geo-typography>
+<geo-typography variant="body" color="secondary">Mô tả phụ</geo-typography>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-typography/geo-typography.component.ts`
+
+## Storybook
+GEO / related story for `geo-typography`
+
+## Rules for AI
+- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props to Storybook Controls / this doc; do not invent unsupported inputs.

package/ai/components/geo-upload.md

@@ -0,0 +1,78 @@
+# geo-upload
+
+> AI quick reference for **GeoUploadComponent**
+
+## Summary
+Drag-drop upload zone with progress list.
+
+## Import
+```ts
+import { GeoUploadComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoUploadComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-upload`
+
+## Category
+`forms`
+
+## When to use
+Multi-file upload with progress UI.
+
+## Do not use when
+Simple one-file form field — use geo-file-picker.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `action` | See component TS / Storybook Controls |
+| `accept` | See component TS / Storybook Controls |
+| `maxSize` | See component TS / Storybook Controls |
+| `multiple` | See component TS / Storybook Controls |
+| `disabled` | See component TS / Storybook Controls |
+| `error` | See component TS / Storybook Controls |
+| `errorMessage` | See component TS / Storybook Controls |
+| `hint` | See component TS / Storybook Controls |
+| `titlePrefix` | See component TS / Storybook Controls |
+| `selectText` | See component TS / Storybook Controls |
+| `titleSuffix` | See component TS / Storybook Controls |
+| `listTitle` | See component TS / Storybook Controls |
+| `showListTitle` | See component TS / Storybook Controls |
+| `fileList` | See component TS / Storybook Controls |
+| `headers` | See component TS / Storybook Controls |
+| `data` | See component TS / Storybook Controls |
+| `name` | See component TS / Storybook Controls |
+| `withCredentials` | See component TS / Storybook Controls |
+| `directory` | See component TS / Storybook Controls |
+| `customRequest` | See component TS / Storybook Controls |
+| `beforeUpload` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `fileListChange` | EventEmitter |
+| `change` | EventEmitter |
+| `remove` | EventEmitter |
+| `reject` | EventEmitter |
+
+## Example
+```html
+<geo-upload
+  accept=".png,.jpg"
+  [maxSize]="1048576"
+  [(fileList)]="files"
+></geo-upload>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-upload/geo-upload.component.ts`
+
+## Storybook
+GEO / related story for `geo-upload`
+
+## Rules for AI
+- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props to Storybook Controls / this doc; do not invent unsupported inputs.