@smartsoft001/pro-claude-plugins 0.2.0

package/plugins/smart-pro/skills/angular-components-paging/SKILL.md

@@ -0,0 +1,86 @@
+---
+name: angular-components-paging
+description: Paging variants for @smartsoft001/pro-angular — 3 Tailwind UI templates pluggable into the fork's <smartpro-paging> via PAGING_STANDARD_COMPONENT_TOKEN
+user-invocable: false
+---
+
+# Paging Variants (pro)
+
+This package provides three standalone paging variants derived from Tailwind UI. Each variant extends `PagingBaseComponent` from `@smartsoft001/angular` and is meant to replace the fork's default `PagingStandardComponent` by providing `PAGING_STANDARD_COMPONENT_TOKEN`.
+
+## When to Use This Skill
+
+- Developer wants a specific paging look → pick the matching variant and register it via the DI token
+- Developer asks which paging variants exist → list the 3 components below
+- Developer wants to see all variants → open the `Components / Paging` Storybook entry (4 stories: one per variant + `All Variants`, dark/light toggle via global theme toolbar)
+
+## Available Variants
+
+| Component                   | Selector                      | When to pick it                                                               |
+| --------------------------- | ----------------------------- | ----------------------------------------------------------------------------- |
+| `PagingCardFooterComponent` | `smartpro-paging-card-footer` | Card footer with page buttons (desktop) + simple prev/next on mobile          |
+| `PagingCenteredComponent`   | `smartpro-paging-centered`    | Border-top nav with centered page numbers, arrows for prev/next               |
+| `PagingSimpleComponent`     | `smartpro-paging-simple`      | Simple card footer with "Showing X to Y of Z" text and prev/next buttons only |
+
+## Registration
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { PAGING_STANDARD_COMPONENT_TOKEN } from '@smartsoft001/angular';
+import { PagingCardFooterComponent } from '@smartsoft001/pro-angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    {
+      provide: PAGING_STANDARD_COMPONENT_TOKEN,
+      useValue: PagingCardFooterComponent,
+    },
+  ],
+};
+```
+
+The fork's `<smartpro-paging>` wrapper reads the token and renders the provided variant. Inputs (`currentPage`, `totalPages`, `pageSize`, `totalItems`, `class`) are forwarded and the `(pageChange)` output bubbles up through the wrapper.
+
+## Consumer API (inherited from `PagingBaseComponent`)
+
+| Input         | Type            | Default         | Description                   |
+| ------------- | --------------- | --------------- | ----------------------------- |
+| `currentPage` | `number`        | `1`             | Current active page           |
+| `totalPages`  | `number`        | `1`             | Total number of pages         |
+| `pageSize`    | `number`        | `10`            | Items per page                |
+| `totalItems`  | `number`        | `0`             | Total number of items         |
+| `variant`     | `PagingVariant` | `'card-footer'` | Informational hint            |
+| `class`       | `string`        | `''`            | Extra CSS classes on the root |
+
+| Output       | Type     | Description                   |
+| ------------ | -------- | ----------------------------- |
+| `pageChange` | `number` | Emits the requested page num. |
+
+## Dark/Light Mode
+
+Every variant uses the `smart:` Tailwind prefix with paired `smart:dark:*` classes. Storybook exposes a global theme toolbar (`light` / `dark`) defined in `.storybook/preview.ts` — stories render in whichever mode the toolbar is set to.
+
+## i18n Keys
+
+Variants use `TranslatePipe` for the following keys — provide translations in the consuming app:
+
+| Key              | Fallback context       |
+| ---------------- | ---------------------- |
+| `prev`           | "Previous" button text |
+| `next`           | "Next" button text     |
+| `paging.showing` | "Showing"              |
+| `paging.to`      | "to"                   |
+| `paging.of`      | "of"                   |
+| `paging.results` | "results"              |
+
+## File Locations
+
+- Variants: `packages/shared/angular/src/lib/components/paging/<variant>/`
+- Barrel: `packages/shared/angular/src/lib/components/paging/index.ts` — exports all 3 components
+- Stories: `packages/shared/angular/src/lib/components/paging/paging.component.stories.ts` (4 stories + First/Last/Few extras)
+- Module registration: `packages/shared/angular/src/lib/components/components.module.ts`
+- Base class + `PAGING_STANDARD_COMPONENT_TOKEN`: re-exported from `@smartsoft001/angular`
+
+## Tailwind Classes
+
+All classes use `smart:` prefix. Card Footer variant is the richest with numeric page buttons + ellipsis; Centered uses border-top and flat nav; Simple shows only a count line and prev/next buttons. Switching variants by provider requires no template change in the consuming component.

package/plugins/smart-pro/skills/angular-components-progress-bars/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: angular-components-progress-bars
+description: Progress bars component for @smartsoft001/pro-angular. Four layouts (bar, bullets, circles, panels). The bar layout auto-detects between numeric (`options.value`) and step-based rendering; bullets/circles accept `withText?`; panels accepts `bordered?`.
+user-invocable: false
+---
+
+# Progress Bars Component (Pro)
+
+Use `<smartpro-progress-bars>` and pick a layout via `options.layout`. The component reads `IProgressBarsOptionsPro` and renders one of four visualizations. Step-based layouts iterate `options.steps` (with statuses `'complete' | 'current' | 'upcoming'`); the numeric `bar` layout reads `options.value` (0-100).
+
+## Layouts
+
+| `layout` (default `'bar'`) | Selector                         | Description                                                                                                                                                                                                                                                |
+| -------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'bar'`                    | `smartpro-progress-bars-bar`     | Auto-adapts. When `options.value` is set, renders a numeric percentage bar with optional `options.columns` labels; otherwise renders a step-bar (steps as colored vertical/horizontal borders with index + name).                                          |
+| `'bullets'`                | `smartpro-progress-bars-bullets` | Compact dots showing progress. Default places them inline next to a "Step X of Y" label. `options.withText: true` switches to a vertical list with each step's name next to its bullet.                                                                    |
+| `'circles'`                | `smartpro-progress-bars-circles` | Numbered circles connected by lines. Default is a horizontal bar; `options.withText: true` switches to a vertical list with each step's name and description next to the circle.                                                                           |
+| `'panels'`                 | `smartpro-progress-bars-panels`  | Large numbered panels with status colors. Default has dividers between panels (`md:flex` + chevron arrows). `options.bordered: true` switches to the side-bar bordered panel layout (`lg:flex` + side stripe + path arrows; wraps in `mx-auto max-w-7xl`). |
+
+## API
+
+### IProgressBarsOptionsPro (`progress-bars.types.ts`)
+
+```typescript
+type SmartProgressBarsLayoutPro = 'bar' | 'bullets' | 'circles' | 'panels';
+
+interface IProgressBarsOptionsPro {
+  layout?: SmartProgressBarsLayoutPro;
+  steps?: IProgressStep[];
+  value?: number; // 0–100, used by bar layout
+  columns?: IProgressBarColumn[]; // bar layout only
+  title?: string;
+  ariaLabel?: string;
+  srOnlyTitle?: string;
+  withText?: boolean; // bullets / circles only
+  bordered?: boolean; // panels only
+}
+
+interface IProgressStep {
+  id: string;
+  name: string;
+  description?: string;
+  status: 'complete' | 'current' | 'upcoming';
+  index?: string;
+  href?: string;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                   | Default     | Description           |
+| --------- | -------------------------------------- | ----------- | --------------------- |
+| `options` | `IProgressBarsOptionsPro \| undefined` | `undefined` | Layout + steps/value. |
+| `class`   | `string`                               | `''`        | Extra CSS classes.    |
+
+Output: `stepClick: IProgressStepClick` (`{ stepId }`).
+
+## Usage Example
+
+```html
+<!-- Numeric bar with column labels -->
+<smartpro-progress-bars
+  [options]="{
+    title: 'Migrating database…',
+    value: 38,
+    columns: [
+      { label: 'Copying files', active: true },
+      { label: 'Migrating database', active: true },
+      { label: 'Compiling assets' },
+      { label: 'Deployed' }
+    ]
+  }"
+></smartpro-progress-bars>
+
+<!-- Step-based bar -->
+<smartpro-progress-bars [options]="{ steps }"></smartpro-progress-bars>
+
+<!-- Vertical bullets with labels -->
+<smartpro-progress-bars
+  [options]="{ steps, layout: 'bullets', withText: true }"
+></smartpro-progress-bars>
+
+<!-- Bordered panels -->
+<smartpro-progress-bars
+  [options]="{ steps, layout: 'panels', bordered: true }"
+></smartpro-progress-bars>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/progress-bars/progress-bars.component.ts`
+- Types: `packages/shared/angular/src/lib/components/progress-bars/progress-bars.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/progress-bars/{bar,bullets,circles,panels}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/progress-bars/progress-bars.component.stories.ts`

package/plugins/smart-pro/skills/angular-components-searchbar/SKILL.md

@@ -0,0 +1,113 @@
+---
+name: angular-components-searchbar
+description: Searchbar component with grid-based trailing-icon variant, dark/light mode, and optional label for @smartsoft001/pro-angular
+user-invocable: false
+---
+
+# Searchbar Component (Pro)
+
+One variant (`trailing-icon`) that extends `SearchbarBaseComponent` from `@smartsoft001/angular` and renders the Tailwind Plus "Input with trailing icon" template faithfully. Supports dark/light mode and an optional label rendered above the input. Registered as a `SEARCHBAR_STANDARD_COMPONENT_TOKEN` provider via `SmartProComponentsModule`, so the fork's `<smartpro-searchbar>` wrapper picks this variant up automatically when the module is imported.
+
+## Variants
+
+| Component                        | Selector                           | Description                                                      |
+| -------------------------------- | ---------------------------------- | ---------------------------------------------------------------- |
+| `SearchbarTrailingIconComponent` | `smartpro-searchbar-trailing-icon` | Grid-based input with trailing magnifier icon and optional label |
+
+## Token Registration
+
+`SmartProComponentsModule` already registers `SEARCHBAR_STANDARD_COMPONENT_TOKEN → SearchbarTrailingIconComponent`. Consumers importing `SmartProComponentsModule` automatically get this variant when using the fork's `<smartpro-searchbar>` wrapper — no additional provider wiring required.
+
+```typescript
+import { SmartProComponentsModule } from '@smartsoft001/pro-angular';
+
+@NgModule({
+  imports: [SmartProComponentsModule],
+})
+export class AppModule {}
+```
+
+For cherry-picking, the token can also be provided manually:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { SEARCHBAR_STANDARD_COMPONENT_TOKEN } from '@smartsoft001/angular';
+import { SearchbarTrailingIconComponent } from '@smartsoft001/pro-angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    {
+      provide: SEARCHBAR_STANDARD_COMPONENT_TOKEN,
+      useValue: SearchbarTrailingIconComponent,
+    },
+  ],
+};
+```
+
+## API
+
+### ISearchbarOptions (re-exported from `@smartsoft001/angular`)
+
+```typescript
+interface ISearchbarOptions {
+  placeholder?: string; // translation key, defaults to 'search'
+  label?: string; // translation key rendered above the input (skipped when absent)
+  debounceTime?: number; // ms, default 1000
+  showToggleButton?: boolean; // render magnifier toggle when show=false
+  size?: SmartSize;
+  color?: SmartColor;
+}
+```
+
+### Inputs
+
+| Input     | Type                | Default    | Description                                               |
+| --------- | ------------------- | ---------- | --------------------------------------------------------- |
+| `options` | `ISearchbarOptions` | -          | Searchbar configuration (placeholder/label keys, etc.)    |
+| `show`    | `model<boolean>`    | `true`     | Whether the input is visible (two-way bindable)           |
+| `text`    | `model<string>`     | _required_ | Current input text (two-way bindable, debounced emission) |
+| `class`   | `string`            | `''`       | External CSS classes forwarded to the input element       |
+
+Both `show` and `text` are `ModelSignal`s — use `[(show)]` / `[(text)]` for two-way binding.
+
+## Usage Examples
+
+```html
+<!-- Basic usage via fork wrapper (auto-picks pro variant) -->
+<smartpro-searchbar [(text)]="searchText"></smartpro-searchbar>
+
+<!-- With label and custom placeholder -->
+<smartpro-searchbar
+  [(text)]="searchText"
+  [options]="{ label: 'account.number', placeholder: '000-00-0000' }"
+></smartpro-searchbar>
+
+<!-- Hidden with toggle button -->
+<smartpro-searchbar
+  [(show)]="isShown"
+  [(text)]="searchText"
+  [options]="{ showToggleButton: true }"
+></smartpro-searchbar>
+
+<!-- With external CSS class -->
+<smartpro-searchbar
+  [(text)]="searchText"
+  class="smart:max-w-md"
+></smartpro-searchbar>
+
+<!-- Direct pro variant (bypasses the fork wrapper) -->
+<smartpro-searchbar-trailing-icon
+  [(show)]="isShown"
+  [(text)]="searchText"
+  [options]="{ label: 'Account number', placeholder: 'search' }"
+></smartpro-searchbar-trailing-icon>
+```
+
+## File Locations
+
+- Variant: `packages/shared/angular/src/lib/components/searchbar/trailing-icon/trailing-icon.component.ts`
+- Template: `packages/shared/angular/src/lib/components/searchbar/trailing-icon/trailing-icon.component.html`
+- Spec: `packages/shared/angular/src/lib/components/searchbar/trailing-icon/trailing-icon.component.spec.ts`
+- Barrel: `packages/shared/angular/src/lib/components/searchbar/index.ts`
+- Module registration: `packages/shared/angular/src/lib/components/components.module.ts` (`SEARCHBAR_COMPONENTS`, `SEARCHBAR_STANDARD_COMPONENT_TOKEN` provider)
+- Stories: `packages/shared/angular/src/lib/components/searchbar/searchbar.component.stories.ts`

package/plugins/smart-pro/skills/angular-components-section-heading/SKILL.md

@@ -0,0 +1,156 @@
+---
+name: angular-components-section-heading
+description: Section heading component for @smartsoft001/pro-angular. One default variant whose layout adapts to provided slots (description, label, actions, badge, input-group); separate with-tabs variant for tabbed section headings. Auto-detects which to render from `options.tabsTpl`.
+user-invocable: false
+---
+
+# Section Heading Component (Pro)
+
+Use `<smartpro-section-heading>`. The wrapper picks one of two child layouts:
+
+- **`default`** — used when `options.tabsTpl` is not set. The default variant adapts its inner DOM based on which slots are provided.
+- **`with-tabs`** — used when `options.tabsTpl` is set. The tabs layout adapts based on `options.actionsTpl` and `options.inline`.
+
+Pass `variant: 'default' | 'with-tabs'` explicitly to override the auto-detection.
+
+## Default variant — layout adapts from slots
+
+| Provided options                                                | Resulting layout                                                                 |
+| --------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| `title` only                                                    | Bordered header — just the title.                                                |
+| `title` + `description` (no actions/label/badge)                | Title + description stacked.                                                     |
+| `title` + `actionsTpl` and/or `inputGroupTpl`                   | Title + slot row (`sm:flex sm:items-center sm:justify-between`).                 |
+| `title` + `label`                                               | Wrapped flex row, title + label aligned to baseline.                             |
+| `title` + `badgeTpl` (with optional `description`/`actionsTpl`) | Two-column row: title (+ description) on the left, badge + actions on the right. |
+
+## With-tabs variant — tabs placement
+
+| Provided options           | Resulting layout                                                                         |
+| -------------------------- | ---------------------------------------------------------------------------------------- |
+| `tabsTpl` (default)        | Title above; tabs render below the title row, with `pb-5 sm:pb-0` outer.                 |
+| `tabsTpl` + `actionsTpl`   | Title row with absolute-positioned actions on the right at `md:` breakpoint; tabs below. |
+| `tabsTpl` + `inline: true` | Single row: title and tabs side-by-side, baseline-aligned.                               |
+
+`CUSTOM_ELEMENTS_SCHEMA` is set on both variants so consumers can drop `el-dropdown` / `el-menu` from `@tailwindplus/elements` directly into action templates.
+
+## API
+
+### ISectionHeadingOptionsPro (`section-heading.types.ts`, extends `ISectionHeadingOptions`)
+
+```typescript
+type SmartSectionHeadingLayoutPro = 'default' | 'with-tabs';
+
+interface ISectionHeadingOptionsPro {
+  title?: string;
+  description?: string;
+  label?: string;
+  actionsTpl?: TemplateRef<unknown>;
+  tabsTpl?: TemplateRef<unknown>;
+  inputGroupTpl?: TemplateRef<unknown>;
+  badgeTpl?: TemplateRef<unknown>;
+  /** With-tabs only — when true, render tabs inline beside the title. */
+  inline?: boolean;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                     | Default     | Description                                                           |
+| --------- | ---------------------------------------- | ----------- | --------------------------------------------------------------------- |
+| `variant` | `'default' \| 'with-tabs' \| undefined`  | `undefined` | Optional override; auto-detected from `options.tabsTpl` when omitted. |
+| `options` | `ISectionHeadingOptionsPro \| undefined` | `undefined` | Title, description, label, slot template refs, `inline`.              |
+| `class`   | `string`                                 | `''`        | Extra CSS classes appended to the outer container.                    |
+
+## Usage Examples
+
+```html
+<ng-template #actions>
+  <button
+    class="smart:rounded-md smart:bg-indigo-600 smart:px-3 smart:py-2 smart:text-white"
+  >
+    Create
+  </button>
+</ng-template>
+<ng-template #inputGroup>
+  <input
+    class="smart:rounded-md smart:border smart:px-3 smart:py-2"
+    placeholder="Search"
+  />
+</ng-template>
+<ng-template #badge>
+  <span
+    class="smart:inline-flex smart:items-center smart:rounded-full smart:bg-green-100 smart:px-3 smart:py-0.5 smart:text-sm smart:text-green-800"
+    >Badge</span
+  >
+</ng-template>
+<ng-template #tabs>
+  <nav class="smart:-mb-px smart:flex smart:space-x-8">…tabs…</nav>
+</ng-template>
+
+<!-- Just a title -->
+<smartpro-section-heading [options]="{ title: 'Job Postings' }" />
+
+<!-- Title + description -->
+<smartpro-section-heading
+  [options]="{
+    title: 'Job Postings',
+    description: 'Lorem ipsum...'
+  }"
+/>
+
+<!-- Title + actions -->
+<smartpro-section-heading
+  [options]="{ title: 'Job Postings', actionsTpl: actions }"
+/>
+
+<!-- Title + input group -->
+<smartpro-section-heading
+  [options]="{ title: 'Job Postings', inputGroupTpl: inputGroup }"
+/>
+
+<!-- Title + label (baseline-aligned wrap) -->
+<smartpro-section-heading
+  [options]="{ title: 'Job Postings', label: 'in Engineering' }"
+/>
+
+<!-- Title + description + badge + actions -->
+<smartpro-section-heading
+  [options]="{
+    title: 'Job Postings',
+    description: 'Lorem ipsum...',
+    badgeTpl: badge,
+    actionsTpl: actions
+  }"
+/>
+
+<!-- Tabs below the title -->
+<smartpro-section-heading
+  [options]="{ title: 'Job Postings', tabsTpl: tabs }"
+/>
+
+<!-- Tabs below + actions on the right -->
+<smartpro-section-heading
+  [options]="{
+    title: 'Job Postings',
+    tabsTpl: tabs,
+    actionsTpl: actions
+  }"
+/>
+
+<!-- Tabs inline next to the title -->
+<smartpro-section-heading
+  [options]="{
+    title: 'Job Postings',
+    tabsTpl: tabs,
+    inline: true
+  }"
+/>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/section-heading/section-heading.component.ts`
+- Types: `packages/shared/angular/src/lib/components/section-heading/section-heading.types.ts`
+- Layouts: `packages/shared/angular/src/lib/components/section-heading/{default,tabs}/<name>.component.ts`
+- Shared class utilities: `packages/shared/angular/src/lib/components/section-heading/section-heading-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/section-heading/section-heading.component.stories.ts`

package/plugins/smart-pro/skills/angular-components-select-menu/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: angular-components-select-menu
+description: Select menu component for @smartsoft001/pro-angular. Two variants — `simple-native` (HTML `<select>`) and `custom` (`<el-select>`-driven listbox with composable flags for secondary text, avatars, status dots, check indicators, branded styling).
+user-invocable: false
+---
+
+# Select Menu Component (Pro)
+
+Use `<smartpro-select-menu>` and pick a variant via `variant`. The component reads `ISelectMenuOptionsPro` for items, placeholder, and a set of decoration flags that compose on the custom dropdown. Two-way `[(value)]` binding selects items.
+
+## Variants
+
+| `variant` (default `'simple-native'`) | Selector                             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'simple-native'`                     | `smartpro-select-menu-simple-native` | Native HTML `<select>`. Best a11y and form-integration story.                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `'custom'`                            | `smartpro-select-menu-custom`        | `<el-select>` (Tailwind Plus Elements) listbox with composable flags. `branded: true` switches the trigger to an indigo button and renders multi-line items with `item.secondary` below the label. `avatar: true` renders `item.avatarUrl` next to labels. `statusIndicator: true` renders a colored dot from `item.status` (`'online' \| 'busy' \| …`). `checkPosition: 'left'` puts a check on the selected item. `secondaryText: true` renders inline secondary. |
+
+## API
+
+### ISelectMenuOptionsPro (`select-menu.types.ts`, extends `ISelectMenuOptions`)
+
+```typescript
+type SmartSelectMenuVariantPro = 'simple-native' | 'custom';
+
+interface ISelectMenuOptionsPro {
+  items?: ISelectMenuItem[];
+  placeholder?: string;
+  secondaryText?: boolean;
+  avatar?: boolean;
+  statusIndicator?: boolean;
+  checkPosition?: 'left' | 'right';
+  branded?: boolean;
+}
+
+interface ISelectMenuItem {
+  value: string | number;
+  label?: string;
+  secondary?: string;
+  avatarUrl?: string;
+  status?: 'online' | 'busy' | 'offline' | string;
+}
+```
+
+### Wrapper Inputs
+
+| Input      | Type                                 | Default           | Description          |
+| ---------- | ------------------------------------ | ----------------- | -------------------- |
+| `variant`  | `'simple-native' \| 'custom'`        | `'simple-native'` | Variant family.      |
+| `value`    | `SelectMenuValue` (model)            | `null`            | Two-way bound value. |
+| `disabled` | `boolean`                            | `false`           | Disable the select.  |
+| `options`  | `ISelectMenuOptionsPro \| undefined` | `undefined`       | Items + flags.       |
+| `class`    | `string`                             | `''`              | Extra CSS classes.   |
+
+## Tailwind Plus Elements
+
+The `custom` variant relies on `<el-select>` / `<el-options>` / `<el-option>` from [`@tailwindplus/elements`](https://www.npmjs.com/package/@tailwindplus/elements). End-user apps must load the package once.
+
+## Usage Example
+
+```html
+<!-- Native -->
+<smartpro-select-menu
+  [options]="{ items, placeholder: 'Select…' }"
+  [(value)]="selected"
+></smartpro-select-menu>
+
+<!-- Custom dropdown -->
+<smartpro-select-menu
+  variant="custom"
+  [options]="{ items, placeholder: 'Select…' }"
+  [(value)]="selected"
+></smartpro-select-menu>
+
+<!-- Custom with avatars -->
+<smartpro-select-menu
+  variant="custom"
+  [options]="{ items, avatar: true }"
+  [(value)]="selected"
+></smartpro-select-menu>
+
+<!-- Custom with check on left -->
+<smartpro-select-menu
+  variant="custom"
+  [options]="{ items, checkPosition: 'left' }"
+  [(value)]="selected"
+></smartpro-select-menu>
+
+<!-- Branded multi-line -->
+<smartpro-select-menu
+  variant="custom"
+  [options]="{ items, branded: true }"
+  [(value)]="selected"
+></smartpro-select-menu>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/select-menu/select-menu.component.ts`
+- Types: `packages/shared/angular/src/lib/components/select-menu/select-menu.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/select-menu/{simple-native,custom}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/select-menu/select-menu.component.stories.ts`