@geoit/ui 0.0.2

package/ai/components/geo-alert.md

@@ -0,0 +1,56 @@
+# geo-alert
+
+> AI quick reference for **GeoAlertComponent**
+
+## Summary
+Inline alert banner (success/error/warning/info).
+
+## Import
+```ts
+import { GeoAlertComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoAlertComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-alert`
+
+## Category
+`feedback`
+
+## When to use
+Form-level or page-level status messages that stay in layout.
+
+## Do not use when
+Transient notifications — use geo-toast / GeoToastService.
+
+## 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 |
+| `visible` | See component TS / Storybook Controls |
+| `showIcon` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `closed` | EventEmitter |
+
+## Example
+```html
+<geo-alert type="success" title="Thành công" message="Đã lưu."></geo-alert>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-alert/geo-alert.component.ts`
+
+## Storybook
+GEO / related story for `geo-alert`
+
+## 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-back-button.md

@@ -0,0 +1,54 @@
+# geo-back-button
+
+> AI quick reference for **GeoBackButtonComponent**
+
+## Summary
+Back navigation control (history or custom click).
+
+## Import
+```ts
+import { GeoBackButtonComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoBackButtonComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-back-button`
+
+## Category
+`navigation`
+
+## When to use
+Detail/edit pages that return to a list.
+
+## Do not use when
+Primary CTA — use geo-button.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `ariaLabel` | See component TS / Storybook Controls |
+| `title` | See component TS / Storybook Controls |
+| `disabled` | See component TS / Storybook Controls |
+| `historyBack` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `clicked` | EventEmitter |
+
+## Example
+```html
+<geo-back-button (clicked)="goBack()"></geo-back-button>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-back-button/geo-back-button.component.ts`
+
+## Storybook
+GEO / related story for `geo-back-button`
+
+## 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-breadcrumb.md

@@ -0,0 +1,52 @@
+# geo-breadcrumb
+
+> AI quick reference for **GeoBreadcrumbComponent**
+
+## Summary
+Breadcrumb trail; last item active (primary).
+
+## Import
+```ts
+import { GeoBreadcrumbComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoBreadcrumbComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-breadcrumb`
+
+## Category
+`navigation`
+
+## When to use
+Page hierarchy under page title.
+
+## Do not use when
+Primary navigation / sidebar menus.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `items` | See component TS / Storybook Controls |
+
+## Outputs
+_None_
+
+## Example
+```html
+<geo-breadcrumb [items]="[
+  { label: 'Trang chủ', link: '/' },
+  { label: 'Chi tiết' }
+]"></geo-breadcrumb>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-breadcrumb/geo-breadcrumb.component.ts`
+
+## Storybook
+GEO / related story for `geo-breadcrumb`
+
+## 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-button.md

@@ -0,0 +1,63 @@
+# geo-button
+
+> AI quick reference for **GeoButtonComponent**
+
+## Summary
+Primary action button with brand/semantic colors and icons.
+
+## Import
+```ts
+import { GeoButtonComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoButtonComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-button`
+
+## Category
+`actions`
+
+## When to use
+All CTAs, form submit/cancel, toolbar actions.
+
+## Do not use when
+Do not use raw ant-btn or native button for branded UI.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `appearance` | See component TS / Storybook Controls |
+| `color` | See component TS / Storybook Controls |
+| `icon` | See component TS / Storybook Controls |
+| `iconTheme` | See component TS / Storybook Controls |
+| `iconPlacement` | See component TS / Storybook Controls |
+| `iconOnly` | See component TS / Storybook Controls |
+| `type` | See component TS / Storybook Controls |
+| `disabled` | See component TS / Storybook Controls |
+| `tooltip` | See component TS / Storybook Controls |
+| `tooltipPlacement` | See component TS / Storybook Controls |
+| `active` | See component TS / Storybook Controls |
+| `title` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `clicked` | EventEmitter |
+
+## Example
+```html
+<geo-button appearance="primary" color="brand" icon="plus">Thêm mới</geo-button>
+<geo-button appearance="primary" icon="right" iconPlacement="end">Tiếp theo</geo-button>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-button/geo-button.component.ts`
+
+## Storybook
+GEO / related story for `geo-button`
+
+## 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-checkbox.md

@@ -0,0 +1,54 @@
+# geo-checkbox
+
+> AI quick reference for **GeoCheckboxComponent**
+
+## Summary
+Checkbox with label; supports CVA / ngModel.
+
+## Import
+```ts
+import { GeoCheckboxComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoCheckboxComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-checkbox`
+
+## Category
+`forms`
+
+## When to use
+Boolean / multi-select options in forms.
+
+## Do not use when
+Single exclusive choice — use geo-radio.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `label` | See component TS / Storybook Controls |
+| `checked` | See component TS / Storybook Controls |
+| `disabled` | See component TS / Storybook Controls |
+| `indeterminate` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `checkedChange` | EventEmitter |
+
+## Example
+```html
+<geo-checkbox label="Tôi đồng ý" [(ngModel)]="agreed"></geo-checkbox>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-checkbox/geo-checkbox.component.ts`
+
+## Storybook
+GEO / related story for `geo-checkbox`
+
+## 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-column-picker.md

@@ -0,0 +1,54 @@
+# geo-column-picker
+
+> AI quick reference for **GeoColumnPickerComponent**
+
+## Summary
+Column visibility picker for tables (optional persistence).
+
+## Import
+```ts
+import { GeoColumnPickerComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoColumnPickerComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-column-picker`
+
+## Category
+`data`
+
+## When to use
+Let users show/hide table columns.
+
+## Do not use when
+Static tables with fixed columns.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `triggerLabel` | See component TS / Storybook Controls |
+| `hint` | See component TS / Storybook Controls |
+| `items` | See component TS / Storybook Controls |
+| `storageKey` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `apply` | EventEmitter |
+
+## Example
+```html
+<geo-column-picker [items]="cols" (apply)="onCols($event)"></geo-column-picker>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-table/geo-column-picker/geo-column-picker.component.ts`
+
+## Storybook
+GEO / related story for `geo-column-picker`
+
+## 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-confirm-modal.md

@@ -0,0 +1,70 @@
+# geo-confirm-modal
+
+> AI quick reference for **GeoConfirmModalComponent**
+
+## Summary
+Confirm / danger dialog (destroy actions).
+
+## Import
+```ts
+import { GeoConfirmModalComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoConfirmModalComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-confirm-modal`
+
+## Category
+`overlay`
+
+## When to use
+Delete, irreversible actions.
+
+## Do not use when
+Multi-field forms — use geo-form-modal.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `visible` | See component TS / Storybook Controls |
+| `title` | See component TS / Storybook Controls |
+| `message` | See component TS / Storybook Controls |
+| `highlight` | See component TS / Storybook Controls |
+| `description` | See component TS / Storybook Controls |
+| `cancelText` | See component TS / Storybook Controls |
+| `confirmText` | See component TS / Storybook Controls |
+| `confirmLoading` | See component TS / Storybook Controls |
+| `width` | See component TS / Storybook Controls |
+| `maskClosable` | See component TS / Storybook Controls |
+| `closable` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `visibleChange` | EventEmitter |
+| `confirm` | EventEmitter |
+| `cancel` | EventEmitter |
+
+## Example
+```html
+<geo-confirm-modal
+  [visible]="open"
+  title="Xóa hồ sơ?"
+  message="Hành động không thể hoàn tác."
+  confirmText="Xóa"
+  (confirm)="onDelete()"
+  (visibleChange)="open = $event"
+></geo-confirm-modal>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-confirm-modal/geo-confirm-modal.component.ts`
+
+## Storybook
+GEO / related story for `geo-confirm-modal`
+
+## 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-date-picker.md

@@ -0,0 +1,65 @@
+# geo-date-picker
+
+> AI quick reference for **GeoDatePickerComponent**
+
+## Summary
+Single date (optional time) picker.
+
+## Import
+```ts
+import { GeoDatePickerComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoDatePickerComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-date-picker`
+
+## Category
+`forms`
+
+## When to use
+One date field in forms.
+
+## Do not use when
+Date range — use geo-date-range-picker.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `label` | See component TS / Storybook Controls |
+| `placeholder` | See component TS / Storybook Controls |
+| `format` | See component TS / Storybook Controls |
+| `mode` | See component TS / Storybook Controls |
+| `size` | 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 |
+| `allowClear` | See component TS / Storybook Controls |
+| `showToday` | See component TS / Storybook Controls |
+| `showTime` | See component TS / Storybook Controls |
+| `block` | See component TS / Storybook Controls |
+| `width` | See component TS / Storybook Controls |
+| `disabledDate` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `valueChange` | EventEmitter |
+
+## Example
+```html
+<geo-date-picker label="Ngày tạo" [required]="true" [(ngModel)]="date" [block]="true"></geo-date-picker>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-date-picker/geo-date-picker.component.ts`
+
+## Storybook
+GEO / related story for `geo-date-picker`
+
+## 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-date-range-picker.md

@@ -0,0 +1,64 @@
+# geo-date-range-picker
+
+> AI quick reference for **GeoDateRangePickerComponent**
+
+## Summary
+Start–end date range picker.
+
+## Import
+```ts
+import { GeoDateRangePickerComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoDateRangePickerComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-date-range-picker`
+
+## Category
+`forms`
+
+## When to use
+Filters and period selection.
+
+## Do not use when
+Single date — use geo-date-picker.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `label` | See component TS / Storybook Controls |
+| `placeholder` | See component TS / Storybook Controls |
+| `format` | See component TS / Storybook Controls |
+| `size` | 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 |
+| `allowClear` | See component TS / Storybook Controls |
+| `showTime` | See component TS / Storybook Controls |
+| `block` | See component TS / Storybook Controls |
+| `width` | See component TS / Storybook Controls |
+| `disabledDate` | See component TS / Storybook Controls |
+| `separator` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `valueChange` | EventEmitter |
+
+## Example
+```html
+<geo-date-range-picker label="Khoảng thời gian" [(ngModel)]="range" [block]="true"></geo-date-range-picker>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-date-range-picker/geo-date-range-picker.component.ts`
+
+## Storybook
+GEO / related story for `geo-date-range-picker`
+
+## 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-file-picker.md

@@ -0,0 +1,62 @@
+# geo-file-picker
+
+> AI quick reference for **GeoFilePickerComponent**
+
+## Summary
+Compact file input for forms (button + filename).
+
+## Import
+```ts
+import { GeoFilePickerComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoFilePickerComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-file-picker`
+
+## Category
+`forms`
+
+## When to use
+Single/small file field inside a form row.
+
+## Do not use when
+Drag-drop multi upload with progress — use geo-upload.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `label` | See component TS / Storybook Controls |
+| `placeholder` | See component TS / Storybook Controls |
+| `buttonText` | See component TS / Storybook Controls |
+| `required` | See component TS / Storybook Controls |
+| `disabled` | See component TS / Storybook Controls |
+| `accept` | See component TS / Storybook Controls |
+| `multiple` | See component TS / Storybook Controls |
+| `error` | See component TS / Storybook Controls |
+| `errorMessage` | See component TS / Storybook Controls |
+| `block` | See component TS / Storybook Controls |
+| `width` | See component TS / Storybook Controls |
+| `selectedName` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `fileChange` | EventEmitter |
+
+## Example
+```html
+<geo-file-picker label="Đính kèm" accept=".pdf,.png" (fileChange)="onFile($event)" [block]="true"></geo-file-picker>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-file-picker/geo-file-picker.component.ts`
+
+## Storybook
+GEO / related story for `geo-file-picker`
+
+## 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-form-modal.md

@@ -0,0 +1,88 @@
+# geo-form-modal
+
+> AI quick reference for **GeoFormModalComponent**
+
+## Summary
+Form modal: fixed header/footer, scrollable body via ng-content.
+
+## Import
+```ts
+import { GeoFormModalComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoFormModalComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-form-modal`
+
+## Category
+`overlay`
+
+## When to use
+Create/edit dialogs; compose geo-stepper inside body for multi-step.
+
+## Do not use when
+Full-page wizards — use geo-step-form-layout.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `open` | See component TS / Storybook Controls |
+| `title` | See component TS / Storybook Controls |
+| `titleUppercase` | See component TS / Storybook Controls |
+| `okText` | See component TS / Storybook Controls |
+| `cancelText` | See component TS / Storybook Controls |
+| `cancelIcon` | See component TS / Storybook Controls |
+| `cancelIconPlacement` | See component TS / Storybook Controls |
+| `okIcon` | See component TS / Storybook Controls |
+| `okIconPlacement` | See component TS / Storybook Controls |
+| `secondaryOkText` | See component TS / Storybook Controls |
+| `confirmLoading` | See component TS / Storybook Controls |
+| `okDisabled` | See component TS / Storybook Controls |
+| `readonly` | See component TS / Storybook Controls |
+| `width` | See component TS / Storybook Controls |
+| `closable` | See component TS / Storybook Controls |
+| `mask` | See component TS / Storybook Controls |
+| `maskClosable` | See component TS / Storybook Controls |
+| `keyboard` | See component TS / Storybook Controls |
+| `centered` | See component TS / Storybook Controls |
+| `zIndex` | See component TS / Storybook Controls |
+| `className` | See component TS / Storybook Controls |
+| `wrapClassName` | See component TS / Storybook Controls |
+| `bodyScroll` | See component TS / Storybook Controls |
+| `bodyMaxHeight` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `openChange` | EventEmitter |
+| `ok` | EventEmitter |
+| `secondaryOk` | EventEmitter |
+| `cancel` | EventEmitter |
+| `afterOpen` | EventEmitter |
+| `afterClose` | EventEmitter |
+
+## Example
+```html
+<geo-form-modal
+  [open]="open"
+  title="Thêm mới"
+  cancelText="Hủy bỏ"
+  okText="Lưu"
+  (openChange)="open = $event"
+  (ok)="save()"
+>
+  <geo-input label="Tên" [required]="true" [block]="true" [(ngModel)]="name"></geo-input>
+</geo-form-modal>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-form-modal/geo-form-modal.component.ts`
+
+## Storybook
+GEO / related story for `geo-form-modal`
+
+## 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.