@geoit/ui 0.0.2

package/ai/components/geo-icon.md

@@ -0,0 +1,53 @@
+# geo-icon
+
+> AI quick reference for **GeoIconComponent**
+
+## Summary
+Ant Design icon wrapper with GEO size/color tokens.
+
+## Import
+```ts
+import { GeoIconComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoIconComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-icon`
+
+## Category
+`display`
+
+## When to use
+Standalone icons; buttons usually use geo-button [icon].
+
+## Do not use when
+Do not hardcode icon hex colors — use color token names.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `type` | See component TS / Storybook Controls |
+| `theme` | See component TS / Storybook Controls |
+| `spin` | See component TS / Storybook Controls |
+| `size` | See component TS / Storybook Controls |
+| `color` | See component TS / Storybook Controls |
+
+## Outputs
+_None_
+
+## Example
+```html
+<geo-icon type="search" size="md" color="primary"></geo-icon>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-icon/geo-icon.component.ts`
+
+## Storybook
+GEO / related story for `geo-icon`
+
+## 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-input.md

@@ -0,0 +1,65 @@
+# geo-input
+
+> AI quick reference for **GeoInputComponent**
+
+## Summary
+Text input with label, validation, icons; CVA/ngModel.
+
+## Import
+```ts
+import { GeoInputComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoInputComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-input`
+
+## Category
+`forms`
+
+## When to use
+Default text fields in forms.
+
+## Do not use when
+Long text — use geo-textarea; select options — use geo-select.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `label` | See component TS / Storybook Controls |
+| `placeholder` | See component TS / Storybook Controls |
+| `type` | See component TS / Storybook Controls |
+| `disabled` | See component TS / Storybook Controls |
+| `readonly` | 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 |
+| `prefixIcon` | See component TS / Storybook Controls |
+| `suffixIcon` | See component TS / Storybook Controls |
+| `allowClear` | See component TS / Storybook Controls |
+| `block` | See component TS / Storybook Controls |
+| `width` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `valueChange` | EventEmitter |
+| `enterPressed` | EventEmitter |
+
+## Example
+```html
+<geo-input label="Họ tên" [required]="true" [block]="true" [(ngModel)]="name"></geo-input>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-input/geo-input.component.ts`
+
+## Storybook
+GEO / related story for `geo-input`
+
+## 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-page-title.md

@@ -0,0 +1,53 @@
+# geo-page-title
+
+> AI quick reference for **GeoPageTitleComponent**
+
+## Summary
+Page title (uppercase) with short primary accent underline; uses geo-typography.
+
+## Import
+```ts
+import { GeoPageTitleComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoPageTitleComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-page-title`
+
+## Category
+`display`
+
+## When to use
+Top of detail/list pages, often under breadcrumb.
+
+## Do not use when
+Modal titles — geo-form-modal has its own title.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `title` | See component TS / Storybook Controls |
+| `uppercase` | See component TS / Storybook Controls |
+| `accentWidth` | See component TS / Storybook Controls |
+| `accentHeight` | See component TS / Storybook Controls |
+| `level` | See component TS / Storybook Controls |
+
+## Outputs
+_None_
+
+## Example
+```html
+<geo-page-title title="Thông tin chi tiết hồ sơ" [level]="3"></geo-page-title>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-page-title/geo-page-title.component.ts`
+
+## Storybook
+GEO / related story for `geo-page-title`
+
+## 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-pagination.md

@@ -0,0 +1,59 @@
+# geo-pagination
+
+> AI quick reference for **GeoPaginationComponent**
+
+## Summary
+Standalone pagination control.
+
+## Import
+```ts
+import { GeoPaginationComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoPaginationComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-pagination`
+
+## Category
+`navigation`
+
+## When to use
+Paging outside geo-table.
+
+## Do not use when
+Inside tables prefer geo-table / geo-table-pagination.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `pageIndex` | See component TS / Storybook Controls |
+| `pageSize` | See component TS / Storybook Controls |
+| `total` | See component TS / Storybook Controls |
+| `size` | See component TS / Storybook Controls |
+| `simple` | See component TS / Storybook Controls |
+| `hideOnSinglePage` | See component TS / Storybook Controls |
+| `showSizeChanger` | See component TS / Storybook Controls |
+| `pageSizeOptions` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `pageIndexChange` | EventEmitter |
+| `pageSizeChange` | EventEmitter |
+
+## Example
+```html
+<geo-pagination [pageIndex]="1" [pageSize]="10" [total]="100" (pageIndexChange)="onPage($event)"></geo-pagination>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-pagination/geo-pagination.component.ts`
+
+## Storybook
+GEO / related story for `geo-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-radio.md

@@ -0,0 +1,67 @@
+# geo-radio
+
+> AI quick reference for **GeoRadioComponent**
+
+## Summary
+Radio group (horizontal/vertical or button style).
+
+## Import
+```ts
+import { GeoRadioComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoRadioComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-radio`
+
+## Category
+`forms`
+
+## When to use
+Exclusive choice among few options.
+
+## Do not use when
+Many options — use geo-select.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `options` | See component TS / Storybook Controls |
+| `label` | See component TS / Storybook Controls |
+| `size` | See component TS / Storybook Controls |
+| `layout` | See component TS / Storybook Controls |
+| `buttonStyle` | See component TS / Storybook Controls |
+| `buttonAppearance` | 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 |
+| `block` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `valueChange` | EventEmitter |
+
+## Example
+```html
+<geo-radio
+  label="Loại yêu cầu"
+  layout="vertical"
+  [options]="[{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }]"
+  [(ngModel)]="type"
+  [block]="true"
+></geo-radio>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-radio/geo-radio.component.ts`
+
+## Storybook
+GEO / related story for `geo-radio`
+
+## 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-row-actions.md

@@ -0,0 +1,54 @@
+# geo-row-actions
+
+> AI quick reference for **GeoRowActionsComponent**
+
+## Summary
+Row action icons/menu (edit, more, custom).
+
+## Import
+```ts
+import { GeoRowActionsComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoRowActionsComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-row-actions`
+
+## Category
+`data`
+
+## When to use
+Actions column inside geo-table.
+
+## Do not use when
+Page-level CTAs — use geo-button.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `actions` | See component TS / Storybook Controls |
+| `primaryActionKey` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `actionClick` | EventEmitter |
+| `edit` | EventEmitter |
+| `more` | EventEmitter |
+
+## Example
+```html
+<geo-row-actions [actions]="actions" (actionClick)="onAction($event)"></geo-row-actions>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-table/geo-row-actions/geo-row-actions.component.ts`
+
+## Storybook
+GEO / related story for `geo-row-actions`
+
+## 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-select.md

@@ -0,0 +1,68 @@
+# geo-select
+
+> AI quick reference for **GeoSelectComponent**
+
+## Summary
+Select / multi-select dropdown.
+
+## Import
+```ts
+import { GeoSelectComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoSelectComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-select`
+
+## Category
+`forms`
+
+## When to use
+Choosing from a list of options.
+
+## Do not use when
+2–3 exclusive options may use geo-radio instead.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `options` | See component TS / Storybook Controls |
+| `label` | See component TS / Storybook Controls |
+| `placeholder` | See component TS / Storybook Controls |
+| `size` | See component TS / Storybook Controls |
+| `mode` | 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 |
+| `showSearch` | See component TS / Storybook Controls |
+| `block` | See component TS / Storybook Controls |
+| `width` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `valueChange` | EventEmitter |
+
+## Example
+```html
+<geo-select
+  label="Trạng thái"
+  [options]="[{ label: 'Active', value: 1 }, { label: 'Inactive', value: 0 }]"
+  [(ngModel)]="status"
+  [block]="true"
+></geo-select>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-select/geo-select.component.ts`
+
+## Storybook
+GEO / related story for `geo-select`
+
+## 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-slider.md

@@ -0,0 +1,56 @@
+# geo-slider
+
+> AI quick reference for **GeoSliderComponent**
+
+## Summary
+Numeric range slider.
+
+## Import
+```ts
+import { GeoSliderComponent } from '@geoit/ui';
+```
+
+Standalone component — add to `imports: [GeoSliderComponent]` of the consuming standalone component/module.
+
+## Selector
+`geo-slider`
+
+## Category
+`forms`
+
+## When to use
+Continuous numeric value in a range.
+
+## Do not use when
+Discrete small sets — use select/radio.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `value` | See component TS / Storybook Controls |
+| `min` | See component TS / Storybook Controls |
+| `max` | See component TS / Storybook Controls |
+| `step` | See component TS / Storybook Controls |
+| `disabled` | See component TS / Storybook Controls |
+| `tipFormatter` | See component TS / Storybook Controls |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `valueChange` | EventEmitter |
+
+## Example
+```html
+<geo-slider [min]="0" [max]="100" [(ngModel)]="percent"></geo-slider>
+```
+
+## Source
+`projects/geo-ui/src/lib/figma/geo-slider/geo-slider.component.ts`
+
+## Storybook
+GEO / related story for `geo-slider`
+
+## 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-status-tag.md

@@ -0,0 +1,51 @@
+# geo-status-tag
+
+> AI quick reference for **GeoStatusTagComponent**
+
+## 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.
+
+## Selector
+`geo-status-tag`
+
+## Category
+`display`
+
+## When to use
+Status in tables, cards, lists.
+
+## Do not use when
+Clickable filters — use button/tabs.
+
+## Inputs
+| Input | Notes |
+|-------|-------|
+| `status` | See component TS / Storybook Controls |
+| `label` | See component TS / Storybook Controls |
+| `showDot` | See component TS / Storybook Controls |
+
+## Outputs
+_None_
+
+## Example
+```html
+<geo-status-tag status="success" label="Hoạt động"></geo-status-tag>
+```
+
+## 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.
+- 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-step-form-layout.md

@@ -0,0 +1,81 @@
+# geo-step-form-layout
+
+> AI quick reference for **GeoStepFormLayoutComponent**
+
+## 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.
+
+## Selector
+`geo-step-form-layout`
+
+## Category
+`layout`
+
+## When to use
+Long registration / create wizards as a page.
+
+## Do not use when
+Dialogs — use geo-form-modal + geo-stepper.
+
+## 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 |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `activeIndexChange` | EventEmitter |
+| `stepSelect` | EventEmitter |
+| `cancel` | EventEmitter |
+| `previous` | EventEmitter |
+| `save` | EventEmitter |
+| `next` | EventEmitter |
+
+## Example
+```html
+<geo-step-form-layout
+  title="Thêm mới"
+  [steps]="steps"
+  [activeIndex]="i"
+  (next)="goNext()"
+  (previous)="goPrev()"
+  (cancel)="cancel()"
+>
+  <!-- step content -->
+</geo-step-form-layout>
+```
+
+## 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.
+- 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-stepper.md

@@ -0,0 +1,63 @@
+# geo-stepper
+
+> AI quick reference for **GeoStepperComponent**
+
+## 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.
+
+## Selector
+`geo-stepper`
+
+## Category
+`navigation`
+
+## When to use
+Multi-step flows; place inside geo-form-modal body or pages.
+
+## Do not use when
+Tabs for peer sections — use geo-tabs.
+
+## 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 |
+
+## Outputs
+| Output | Notes |
+|--------|-------|
+| `activeIndexChange` | EventEmitter |
+| `stepSelect` | EventEmitter |
+
+## Example
+```html
+<geo-stepper
+  [steps]="[
+    { key: 'a', label: '1. Thông tin' },
+    { key: 'b', label: '2. Xác nhận' }
+  ]"
+  [activeIndex]="0"
+  orientation="horizontal"
+  [clickable]="false"
+></geo-stepper>
+```
+
+## 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.
+- Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
+- Match props to Storybook Controls / this doc; do not invent unsupported inputs.