@geoit/ui 0.0.2 → 0.0.5

package/ai/components/geo-stat-card.md

@@ -0,0 +1,98 @@
+# geo-stat-card
+
+> Complete usage reference for **GeoStatCardComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
+
+## Summary
+GeoStatCardComponent
+
+## Import
+
+```ts
+import { GeoStatCardComponent } from '@geoit/ui';
+```
+
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoStatCardComponent]
+```
+
+## Selector
+`geo-stat-card`
+
+## Category
+`other`
+
+## When to use
+—
+
+## Do not use when
+—
+
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
+## Inputs
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `label` | `string` | `''` | — |
+| `value` | `string \| number` | `''` | — |
+| `unit` | `string` | `''` | — |
+| `icon` | `string` | `'bar-chart'` | — |
+| `hint` | `string` | `''` | — |
+| `clickable` | `boolean` | `false` | — |
+| `animate` | `boolean` | `true` | Count-up number animation. Honors `prefers-reduced-motion`. |
+| `animationDuration` | `number` | `1000` | Count-up duration in ms. |
+| `animationDelay` | `number` | `0` | Stagger delay before count-up starts (ms). |
+| `item` | `GeoStatCardItem \| null` | `null` | Convenience: bind a whole item object. |
+
+## Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `clicked` | `OutputEmitterRef<void>` | — |
+
+## Related types
+
+From `figma/geo-stat-card/geo-stat-card.types.ts`:
+
+```ts
+export interface GeoStatCardItem {
+  id?: string;
+  label: string;
+  value: string | number;
+  /** Optional unit shown after value (e.g. m², thửa). */
+  unit?: string;
+  /** Ant Design icon name. */
+  icon?: string;
+  /** Optional helper / trend text. */
+  hint?: string;
+}
+```
+
+## Examples
+
+### Example
+
+```html
+<geo-stat-card></geo-stat-card>
+```
+
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-stat-card.md`
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-stat-card/geo-stat-card.component.ts`
+
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-status-tag.md

@@ -1,16 +1,23 @@
 # geo-status-tag
 
-> AI quick reference for **GeoStatusTagComponent**
+> Complete usage reference for **GeoStatusTagComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Pill status tag with optional dot (success/error/warning/info/teal/…).
 
 ## Import
+
 ```ts
 import { GeoStatusTagComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoStatusTagComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoStatusTagComponent]
+```
 
 ## Selector
 `geo-status-tag`
@@ -24,28 +31,73 @@ Status in tables, cards, lists.
 ## Do not use when
 Clickable filters — use button/tabs.
 
+## How to use
+
+Tag trạng thái (dot + label). status preset success|primary|error|warning|info|teal|neutral (hoặc legacy completed|cancelled|…); [label] ghi đè text.
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `status` | See component TS / Storybook Controls |
-| `label` | See component TS / Storybook Controls |
-| `showDot` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `status` | `GeoStatusPreset \| string` | `'success'` | Status preset or free-form string. Semantic: success \| primary \| error \| warning \| info \| teal \| neutral Legacy: completed \| cancelled \| in_progress \| adjusting |
+| `label` | `string \| undefined` | `undefined` | Override label text. |
+| `showDot` | `boolean` | `true` | Show leading status dot (design default). |
 
 ## Outputs
+
 _None_
 
-## Example
+## Related types
+
+From `figma/geo-status-tag/geo-status-tag.types.ts`:
+
+```ts
+export type GeoStatusColor = 'success' | 'primary' | 'error' | 'warning' | 'info' | 'teal' | 'neutral';
+
+export type GeoStatusPreset = GeoStatusColor | 'completed' | 'cancelled' | 'in_progress' | 'adjusting';
+
+export const UI_STATUS_LABELS = GEO_STATUS_LABELS;
+```
+
+## Examples
+
+### Basic
+
+```html
+<geo-status-tag status="success" label="Đã duyệt"></geo-status-tag>
+```
+
+### Full options
+
 ```html
-<geo-status-tag status="success" label="Hoạt động"></geo-status-tag>
+<geo-status-tag status="warning" label="Chờ xử lý" [showDot]="true"></geo-status-tag>
+<geo-status-tag status="error" label="Từ chối"></geo-status-tag>
+<geo-status-tag status="in_progress" label="Đang xử lý"></geo-status-tag>
 ```
 
+## Tips
+
+- Trong bảng dùng cột renderAs: 'status'.
+- Không dùng làm filter clickable.
+- showDot mặc định true.
+## Related components
+
+- [`geo-table`](./geo-table.md)
+- [`geo-typography`](./geo-typography.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-status-tag.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-status-tag/geo-status-tag.component.ts`
 
-## Storybook
-GEO / related story for `geo-status-tag`
-
-## Rules for AI
-- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML 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.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-step-form-layout.md

@@ -1,16 +1,23 @@
 # geo-step-form-layout
 
-> AI quick reference for **GeoStepFormLayoutComponent**
+> Complete usage reference for **GeoStepFormLayoutComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Full-page multi-step form: vertical stepper + content card + footer actions.
 
 ## Import
+
 ```ts
 import { GeoStepFormLayoutComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoStepFormLayoutComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoStepFormLayoutComponent]
+```
 
 ## Selector
 `geo-step-form-layout`
@@ -24,38 +31,66 @@ Long registration / create wizards as a page.
 ## Do not use when
 Dialogs — use geo-form-modal + geo-stepper.
 
+## How to use
+
+Wizard full-page: stepper dọc + card nội dung + footer Hủy/Trở lại/Lưu/Tiếp theo. [steps] + [activeIndex]; (next)/(previous)/(save)/(cancel).
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `steps` | See component TS / Storybook Controls |
-| `activeIndex` | See component TS / Storybook Controls |
-| `title` | See component TS / Storybook Controls |
-| `clickableSteps` | See component TS / Storybook Controls |
-| `showScrollButtons` | See component TS / Storybook Controls |
-| `showCancel` | See component TS / Storybook Controls |
-| `showPrevious` | See component TS / Storybook Controls |
-| `showSave` | See component TS / Storybook Controls |
-| `showNext` | See component TS / Storybook Controls |
-| `cancelLabel` | See component TS / Storybook Controls |
-| `previousLabel` | See component TS / Storybook Controls |
-| `saveLabel` | See component TS / Storybook Controls |
-| `nextLabel` | See component TS / Storybook Controls |
-| `finishLabel` | See component TS / Storybook Controls |
-| `saveLoading` | See component TS / Storybook Controls |
-| `nextLoading` | See component TS / Storybook Controls |
-| `hideDefaultFooter` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `steps` | `GeoStepperStep[]` | `[]` | — |
+| `activeIndex` | `number` | `0` | Two-way `model()` (supports banana binding). |
+| `title` | `string` | `''` | — |
+| `clickableSteps` | `boolean` | `true` | — |
+| `showScrollButtons` | `boolean` | `true` | Hiện nút ↑/↓ góc phải card (chuyển bước). Mặc định `true`. |
+| `showCancel` | `boolean` | `true` | — |
+| `showPrevious` | `boolean` | `true` | — |
+| `showSave` | `boolean` | `true` | — |
+| `showNext` | `boolean` | `true` | — |
+| `cancelLabel` | `string` | `'Hủy'` | — |
+| `previousLabel` | `string` | `'Trở lại'` | — |
+| `saveLabel` | `string` | `'Lưu'` | — |
+| `nextLabel` | `string` | `'Tiếp theo'` | — |
+| `finishLabel` | `string` | `'Hoàn thành'` | — |
+| `saveLoading` | `boolean` | `false` | — |
+| `nextLoading` | `boolean` | `false` | — |
+| `hideDefaultFooter` | `boolean` | `false` | Ẩn footer actions (dùng slot `[footer]` hoặc không cần nút). |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `activeIndexChange` | EventEmitter |
-| `stepSelect` | EventEmitter |
-| `cancel` | EventEmitter |
-| `previous` | EventEmitter |
-| `save` | EventEmitter |
-| `next` | EventEmitter |
-
-## Example
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `stepSelect` | `OutputEmitterRef<{ index: number; step: GeoStepperStep }>` | — |
+| `cancel` | `OutputEmitterRef<void>` | — |
+| `previous` | `OutputEmitterRef<void>` | — |
+| `save` | `OutputEmitterRef<void>` | — |
+| `next` | `OutputEmitterRef<void>` | — |
+
+## Related types
+
+From `figma/geo-step-form-layout/geo-step-form-layout.types.ts`:
+
+```ts
+export interface GeoStepFormLayoutLabels {
+  back?: string;
+  cancel?: string;
+  save?: string;
+  next?: string;
+  finish?: string;
+}
+```
+
+## Examples
+
+### Basic
+
 ```html
 <geo-step-form-layout
   title="Thêm mới"
@@ -65,17 +100,65 @@ Dialogs — use geo-form-modal + geo-stepper.
   (previous)="goPrev()"
   (cancel)="cancel()"
 >
-  <!-- step content -->
+  <!-- nội dung bước -->
+</geo-step-form-layout>
+```
+
+### Full options
+
+```html
+<geo-step-form-layout
+  title="Đăng ký khai thác"
+  [steps]="[
+    { key: 'info', label: '1. Thông tin' },
+    { key: 'files', label: '2. Tài liệu' },
+    { key: 'confirm', label: '3. Xác nhận' }
+  ]"
+  [activeIndex]="activeIndex"
+  [clickableSteps]="true"
+  [showScrollButtons]="true"
+  [showCancel]="true"
+  [showPrevious]="true"
+  [showSave]="true"
+  [showNext]="true"
+  cancelLabel="Hủy"
+  previousLabel="Trở lại"
+  saveLabel="Lưu"
+  nextLabel="Tiếp theo"
+  finishLabel="Hoàn thành"
+  [saveLoading]="saving"
+  [nextLoading]="validating"
+  (activeIndexChange)="activeIndex = $event"
+  (stepSelect)="onStep($event)"
+  (cancel)="onCancel()"
+  (previous)="goPrev()"
+  (save)="onSave()"
+  (next)="goNext()"
+>
+  @if (activeIndex === 0) {
+    <geo-input label="Tên hồ sơ" [block]="true" [(ngModel)]="name"></geo-input>
+  }
 </geo-step-form-layout>
 ```
 
+## Tips
+
+- Dialog multi-step → geo-form-modal + geo-stepper.
+- finishLabel hiện khi bước cuối (thay nextLabel).
+- hideDefaultFooter nếu tự render footer.
+## Related components
+
+- [`geo-stepper`](./geo-stepper.md)
+- [`geo-form-modal`](./geo-form-modal.md)
+- [`geo-button`](./geo-button.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-step-form-layout.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-step-form-layout/geo-step-form-layout.component.ts`
 
-## Storybook
-GEO / related story for `geo-step-form-layout`
-
-## Rules for AI
-- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML 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.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-stepper.md

@@ -1,16 +1,23 @@
 # geo-stepper
 
-> AI quick reference for **GeoStepperComponent**
+> Complete usage reference for **GeoStepperComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Steps indicator (horizontal default). Active=primary, completed=success+check.
 
 ## Import
+
 ```ts
 import { GeoStepperComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoStepperComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoStepperComponent]
+```
 
 ## Selector
 `geo-stepper`
@@ -24,21 +31,52 @@ Multi-step flows; place inside geo-form-modal body or pages.
 ## Do not use when
 Tabs for peer sections — use geo-tabs.
 
+## How to use
+
+Chỉ báo bước. [steps] {key,label}[]; [activeIndex]; orientation horizontal|vertical. Active=primary, completed=success+check.
+
+## Binding
+
+Standalone component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `steps` | See component TS / Storybook Controls |
-| `activeIndex` | See component TS / Storybook Controls |
-| `orientation` | See component TS / Storybook Controls |
-| `clickable` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `steps` | `GeoStepperStep[]` | `[]` | — |
+| `activeIndex` | `number` | `0` | Two-way `model()` (supports banana binding). |
+| `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | Mặc định horizontal theo design form modal. |
+| `clickable` | `boolean` | `true` | Cho phép click để đổi bước. |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `activeIndexChange` | EventEmitter |
-| `stepSelect` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `stepSelect` | `OutputEmitterRef<{ index: number; step: GeoStepperStep }>` | — |
+
+## Related types
+
+From `figma/geo-stepper/geo-stepper.types.ts`:
+
+```ts
+export interface GeoStepperStep {
+  /** Unique key (optional). */
+  key?: string;
+  /** Label hiển thị bên cạnh số bước. */
+  label: string;
+  /** Disable click chọn bước. */
+  disabled?: boolean;
+}
+
+export type GeoStepperOrientation = 'vertical' | 'horizontal';
+```
+
+## Examples
+
+### Basic
+
 ```html
 <geo-stepper
   [steps]="[
@@ -51,13 +89,37 @@ Tabs for peer sections — use geo-tabs.
 ></geo-stepper>
 ```
 
+### Full options
+
+```html
+<geo-stepper
+  [steps]="steps"
+  [activeIndex]="activeIndex"
+  orientation="vertical"
+  [clickable]="true"
+  (activeIndexChange)="activeIndex = $event"
+  (stepSelect)="onStepSelect($event)"
+></geo-stepper>
+```
+
+## Tips
+
+- Trong dialog: đặt trong geo-form-modal body.
+- Wizard trang: dùng geo-step-form-layout.
+- clickable=false khi bắt buộc đi tuần tự.
+## Related components
+
+- [`geo-form-modal`](./geo-form-modal.md)
+- [`geo-step-form-layout`](./geo-step-form-layout.md)
+- [`geo-tabs`](./geo-tabs.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-stepper.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-stepper/geo-stepper.component.ts`
 
-## Storybook
-GEO / related story for `geo-stepper`
-
-## Rules for AI
-- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML 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.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.