@edsis/ui 0.0.2

package/input-otp/README.md

@@ -0,0 +1,273 @@
+# Input OTP
+
+Accessible one-time password input with grouped slots, copy-paste distribution, roving focus, signal-friendly control, and reactive-form support.
+
+Use Input OTP for verification codes, step-up authentication, banking PIN entry, and short recovery codes where each character should be visually separated without losing keyboard or paste ergonomics.
+
+## Import
+
+```ts
+import {
+  InputOtpComponent,
+  InputOtpGroupComponent,
+  InputOtpSeparatorComponent,
+  InputOtpSlotComponent,
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_DIGITS_AND_CHARS,
+} from '@edsis/ui/input-otp';
+```
+
+When the code input belongs to a richer field layout, pair it with the existing form primitives:
+
+```ts
+import { FormDescriptionComponent, FormFieldComponent, FormLabelComponent, FormMessageComponent } from '@edsis/ui/form';
+```
+
+## Composition
+
+The Angular structure follows the shadcn Input OTP information architecture while translating it to standalone selectors.
+
+```text
+ui-input-otp
+├── ui-input-otp-group
+│   ├── ui-input-otp-slot
+│   ├── ui-input-otp-slot
+│   └── ui-input-otp-slot
+├── ui-input-otp-separator
+└── ui-input-otp-group
+    ├── ui-input-otp-slot
+    ├── ui-input-otp-slot
+    └── ui-input-otp-slot
+```
+
+## Basic Usage
+
+Use the root component for value flow and the projected parts for layout.
+
+```ts
+protected readonly code = signal('');
+protected readonly digitsPattern = REGEXP_ONLY_DIGITS;
+```
+
+```html
+<ui-form-field>
+  <ui-form-label>Verification code</ui-form-label>
+  <ui-input-otp [maxLength]="6" [pattern]="digitsPattern" [value]="code()" (valueChange)="code.set($event)">
+    <ui-input-otp-group>
+      <ui-input-otp-slot [index]="0" />
+      <ui-input-otp-slot [index]="1" />
+      <ui-input-otp-slot [index]="2" />
+      <ui-input-otp-slot [index]="3" />
+      <ui-input-otp-slot [index]="4" />
+      <ui-input-otp-slot [index]="5" />
+    </ui-input-otp-group>
+  </ui-input-otp>
+  <ui-form-description>Paste the code from your email or authenticator app.</ui-form-description>
+</ui-form-field>
+```
+
+## Common Patterns
+
+### Separator groups
+
+Split longer codes into smaller clusters when the verification flow benefits from visual chunking.
+
+```html
+<ui-input-otp [maxLength]="6" [pattern]="digitsPattern" [value]="code()" (valueChange)="code.set($event)">
+  <ui-input-otp-group>
+    <ui-input-otp-slot [index]="0" />
+    <ui-input-otp-slot [index]="1" />
+  </ui-input-otp-group>
+  <ui-input-otp-separator />
+  <ui-input-otp-group>
+    <ui-input-otp-slot [index]="2" />
+    <ui-input-otp-slot [index]="3" />
+  </ui-input-otp-group>
+  <ui-input-otp-separator />
+  <ui-input-otp-group>
+    <ui-input-otp-slot [index]="4" />
+    <ui-input-otp-slot [index]="5" />
+  </ui-input-otp-group>
+</ui-input-otp>
+```
+
+### Reactive forms
+
+The root component implements `ControlValueAccessor` and also integrates directly with `ui-form-field`, so labels, descriptions, and invalid-state wiring work without `uiFormControl`.
+
+```ts
+readonly verificationForm = new FormGroup({
+  code: new FormControl('', {
+    nonNullable: true,
+    validators: [Validators.required, Validators.minLength(6)],
+  }),
+});
+```
+
+```html
+<ui-form-field>
+  <ui-form-label>Verification code</ui-form-label>
+  <ui-input-otp formControlName="code" [maxLength]="6" [pattern]="digitsPattern">
+    <ui-input-otp-group
+      class="*:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+      <ui-input-otp-slot [index]="0" />
+      <ui-input-otp-slot [index]="1" />
+      <ui-input-otp-slot [index]="2" />
+    </ui-input-otp-group>
+    <ui-input-otp-separator class="mx-2" />
+    <ui-input-otp-group
+      class="*:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+      <ui-input-otp-slot [index]="3" />
+      <ui-input-otp-slot [index]="4" />
+      <ui-input-otp-slot [index]="5" />
+    </ui-input-otp-group>
+  </ui-input-otp>
+  <ui-form-description>Enter the 6-digit code sent to m@example.com.</ui-form-description>
+  <ui-form-message />
+</ui-form-field>
+```
+
+### Disabled and invalid states
+
+Use the native `disabled` input when the code should remain visible but unavailable, and forward `aria-invalid="true"` when an expired or rejected code needs the destructive treatment.
+
+```html
+<ui-input-otp [maxLength]="6" [pattern]="digitsPattern" value="123456" disabled>
+  <ui-input-otp-group>
+    <ui-input-otp-slot [index]="0" />
+    <ui-input-otp-slot [index]="1" />
+    <ui-input-otp-slot [index]="2" />
+  </ui-input-otp-group>
+  <ui-input-otp-separator />
+  <ui-input-otp-group>
+    <ui-input-otp-slot [index]="3" />
+    <ui-input-otp-slot [index]="4" />
+    <ui-input-otp-slot [index]="5" />
+  </ui-input-otp-group>
+</ui-input-otp>
+```
+
+```html
+<ui-input-otp
+  aria-invalid="true"
+  [maxLength]="6"
+  [pattern]="digitsPattern"
+  [value]="invalidCode()"
+  (valueChange)="invalidCode.set($event)">
+  <ui-input-otp-group>
+    <ui-input-otp-slot [index]="0" />
+    <ui-input-otp-slot [index]="1" />
+    <ui-input-otp-slot [index]="2" />
+  </ui-input-otp-group>
+  <ui-input-otp-separator />
+  <ui-input-otp-group>
+    <ui-input-otp-slot [index]="3" />
+    <ui-input-otp-slot [index]="4" />
+    <ui-input-otp-slot [index]="5" />
+  </ui-input-otp-group>
+</ui-input-otp>
+```
+
+### Four digits and alphanumeric codes
+
+Use `REGEXP_ONLY_DIGITS` for numeric OTPs and `REGEXP_ONLY_DIGITS_AND_CHARS` for mixed recovery codes.
+
+```html
+<ui-input-otp [maxLength]="4" [pattern]="digitsPattern" [inputmode]="'numeric'">
+  <ui-input-otp-group>
+    <ui-input-otp-slot [index]="0" />
+    <ui-input-otp-slot [index]="1" />
+    <ui-input-otp-slot [index]="2" />
+    <ui-input-otp-slot [index]="3" />
+  </ui-input-otp-group>
+</ui-input-otp>
+```
+
+```html
+<ui-input-otp [maxLength]="6" [pattern]="digitsAndCharsPattern" [inputmode]="'text'">
+  <ui-input-otp-group>
+    <ui-input-otp-slot [index]="0" />
+    <ui-input-otp-slot [index]="1" />
+    <ui-input-otp-slot [index]="2" />
+  </ui-input-otp-group>
+  <ui-input-otp-separator />
+  <ui-input-otp-group>
+    <ui-input-otp-slot [index]="3" />
+    <ui-input-otp-slot [index]="4" />
+    <ui-input-otp-slot [index]="5" />
+  </ui-input-otp-group>
+</ui-input-otp>
+```
+
+## API Reference
+
+### `InputOtpComponent`
+
+| Input              | Type                       | Default           |
+| ------------------ | -------------------------- | ----------------- |
+| `maxLength`        | `number`                   | `6`               |
+| `value`            | `string`                   | `undefined`       |
+| `pattern`          | `RegExp \| string \| null` | `null`            |
+| `required`         | `boolean`                  | `false`           |
+| `disabled`         | `boolean`                  | `false`           |
+| `inputmode`        | `string \| null`           | `'numeric'`       |
+| `autocomplete`     | `string \| null`           | `'one-time-code'` |
+| `aria-label`       | `string \| null`           | `null`            |
+| `aria-labelledby`  | `string \| null`           | `null`            |
+| `aria-describedby` | `string \| null`           | `null`            |
+| `class`            | `string`                   | `''`              |
+
+### Output
+
+| Output        | Type     |
+| ------------- | -------- |
+| `valueChange` | `string` |
+
+### Parts
+
+| Part                         | Selector                 | Notes                                                         |
+| ---------------------------- | ------------------------ | ------------------------------------------------------------- |
+| `InputOtpGroupComponent`     | `ui-input-otp-group`     | Groups adjacent slots into one bordered cluster.              |
+| `InputOtpSlotComponent`      | `ui-input-otp-slot`      | Requires an `index` and renders the focusable character slot. |
+| `InputOtpSeparatorComponent` | `ui-input-otp-separator` | Inserts an optional visual separator between groups.          |
+
+Convenience exports: `REGEXP_ONLY_DIGITS` and `REGEXP_ONLY_DIGITS_AND_CHARS`.
+
+## Styling and Theming
+
+The component exposes shadcn-style `data-slot` hooks on the root, group, separator, and slot hosts. Use `*:data-[slot=input-otp-slot]` utilities on `ui-input-otp-group` when a layout needs taller or wider cells, for example:
+
+```html
+<ui-input-otp-group
+  class="*:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+  ...
+</ui-input-otp-group>
+```
+
+The default styles use the shared border, ring, destructive, foreground, and muted-foreground tokens from the library theme.
+
+## Accessibility
+
+- Each slot is a real input with an accessible name that includes its position in the sequence.
+- `ui-form-field` labels and descriptions wire to the component automatically when the OTP lives inside the field wrapper.
+- `aria-invalid="true"` on the root forwards the destructive treatment across the slot set.
+- Keep the surrounding label and helper text descriptive. Users should understand where the code came from and how many characters are expected.
+
+## Keyboard Interactions
+
+- Typing a character replaces the current slot and advances focus.
+- Paste distributes accepted characters from the current slot onward.
+- Arrow keys move across slots and flip direction under RTL layouts.
+- `Backspace` removes the current or previous slot and shifts the remaining value left.
+- `Delete` removes the current slot and shifts the remaining value left.
+
+## Angular Notes
+
+- Use `[value]` plus `(valueChange)` for signal-backed local state.
+- Use `formControlName`, `[formControl]`, or `[(ngModel)]` for form-driven flows.
+- There is no separate `defaultValue` input; seed the initial code with the bound signal or form control value.
+- Unlike native inputs, this component does not need `uiFormControl`; it integrates with the form-field context directly.
+
+## Source Parity
+
+This Angular slice keeps the shadcn composition, grouped separators, pattern filtering, paste handling, and verification-form examples. The deliberate Angular deviation is the runtime implementation: each slot is a visible input coordinated by the root CVA instead of the upstream single hidden-input package. Browser one-time-code autofill works best through the first slot with the default `autocomplete="one-time-code"` behavior.

package/item/README.md

@@ -0,0 +1,247 @@
+# Item
+
+Displays a flexible content row with optional media, title, description, actions, header, and footer.
+
+Use Item when you need to present content such as profile summaries, settings rows, list links, media rows, or menu-like entries without introducing form-field semantics.
+
+## Import
+
+```ts
+import {
+  ItemActionsComponent,
+  ItemComponent,
+  ItemContentComponent,
+  ItemDescriptionComponent,
+  ItemFooterComponent,
+  ItemGroupComponent,
+  ItemHeaderComponent,
+  ItemMediaComponent,
+  ItemSeparatorComponent,
+  ItemTitleComponent,
+} from '@edsis/ui/item';
+```
+
+## Usage
+
+Use `<ui-item>` for the default host element. When the row should behave like a native link or button, apply `[ui-item]` directly to the semantic host instead of relying on React-style `asChild` composition.
+
+```html
+<ui-item variant="outline">
+  <ui-item-media variant="icon">
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M12 5v14" />
+      <path d="M5 12h14" />
+    </svg>
+  </ui-item-media>
+
+  <ui-item-content>
+    <ui-item-title>Security alert</ui-item-title>
+    <ui-item-description>New login detected from an unknown device.</ui-item-description>
+  </ui-item-content>
+
+  <ui-item-actions>
+    <button ui-button variant="outline" size="sm" type="button">Review</button>
+  </ui-item-actions>
+</ui-item>
+```
+
+## Composition
+
+The Angular structure follows the shadcn Item information architecture while translating React-specific patterns to Angular selectors and semantic hosts.
+
+```text
+ItemGroup
+└── Item
+    ├── ItemHeader
+    ├── ItemMedia
+    ├── ItemContent
+    │   ├── ItemTitle
+    │   └── ItemDescription
+    ├── ItemActions
+    └── ItemFooter
+```
+
+## Common patterns
+
+### Variants
+
+Use `variant="outline"` for bordered rows, `variant="muted"` for low-emphasis containers, and the default variant when the item should blend into the surrounding surface.
+
+```html
+<div class="flex max-w-md flex-col gap-4">
+  <ui-item class="px-4 py-3">
+    <ui-item-content>
+      <ui-item-title>Default item</ui-item-title>
+      <ui-item-description>Transparent background with no border.</ui-item-description>
+    </ui-item-content>
+  </ui-item>
+
+  <ui-item variant="outline">
+    <ui-item-content>
+      <ui-item-title>Outline item</ui-item-title>
+      <ui-item-description>Bordered treatment for cards and settings rows.</ui-item-description>
+    </ui-item-content>
+  </ui-item>
+
+  <ui-item variant="muted">
+    <ui-item-content>
+      <ui-item-title>Muted item</ui-item-title>
+      <ui-item-description>Soft background for secondary content.</ui-item-description>
+    </ui-item-content>
+  </ui-item>
+</div>
+```
+
+### Media modes
+
+`ui-item-media` supports three common shadcn-style treatments.
+
+- Default media for avatars or custom projected content.
+- `variant="icon"` for compact icon chips.
+- `variant="image"` for fixed-size artwork or thumbnails.
+
+```html
+<ui-item variant="outline">
+  <ui-item-media>
+    <ui-avatar>
+      <ui-avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
+      <ui-avatar-fallback>CN</ui-avatar-fallback>
+    </ui-avatar>
+  </ui-item-media>
+
+  <ui-item-content>
+    <ui-item-title>shadcn</ui-item-title>
+    <ui-item-description>Example avatar content</ui-item-description>
+  </ui-item-content>
+</ui-item>
+```
+
+### Size
+
+Set `size` on the root item to scale title and description typography plus the icon and image media wrappers.
+
+```html
+<ui-item variant="outline" size="default">...</ui-item>
+<ui-item variant="outline" size="sm">...</ui-item>
+<ui-item variant="outline" size="xs">...</ui-item>
+```
+
+### Group with separators
+
+Use `ui-item-group` with `ui-item-separator` when you need a vertically stacked list of related rows.
+
+```html
+<ui-item-group class="max-w-sm gap-0 rounded-xl border border-border">
+  <ui-item class="px-4 py-3">
+    <ui-item-content>
+      <ui-item-title>shadcn</ui-item-title>
+      <ui-item-description>shadcn@vercel.com</ui-item-description>
+    </ui-item-content>
+  </ui-item>
+  <ui-item-separator />
+  <ui-item class="px-4 py-3">
+    <ui-item-content>
+      <ui-item-title>evilrabbit</ui-item-title>
+      <ui-item-description>evilrabbit@vercel.com</ui-item-description>
+    </ui-item-content>
+  </ui-item>
+</ui-item-group>
+```
+
+### Link host
+
+shadcn React uses `asChild` for anchors. In Angular, put `[ui-item]` on the anchor directly.
+
+```html
+<a ui-item href="/dashboard" variant="outline">
+  <ui-item-content>
+    <ui-item-title>Dashboard</ui-item-title>
+    <ui-item-description>Overview of your account and activity.</ui-item-description>
+  </ui-item-content>
+  <ui-item-actions>
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4">
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  </ui-item-actions>
+</a>
+```
+
+### Dropdown composition
+
+The shadcn Item dropdown example maps cleanly to the local menu primitives. Render `ui-item` inside a `ui-menu-item` when you want denser menu rows.
+
+```html
+<button ui-button variant="outline" [uiMenuTrigger]="peopleMenu">Select person</button>
+
+<ng-template uiMenuContent #peopleMenu="uiMenuContent">
+  <ui-menu-surface class="w-64">
+    <ui-menu-label>People</ui-menu-label>
+    <ui-menu-separator />
+
+    <button ui-menu-item class="p-0">
+      <ui-item size="xs" class="w-full p-2">
+        <ui-item-content>
+          <ui-item-title>shadcn</ui-item-title>
+          <ui-item-description>shadcn@vercel.com</ui-item-description>
+        </ui-item-content>
+      </ui-item>
+    </button>
+  </ui-menu-surface>
+</ng-template>
+```
+
+## API reference
+
+### `ItemComponent`
+
+| Input     | Type                                | Default     |
+| --------- | ----------------------------------- | ----------- |
+| `variant` | `'default' \| 'outline' \| 'muted'` | `'default'` |
+| `size`    | `'default' \| 'sm' \| 'xs'`         | `'default'` |
+| `class`   | `string`                            | `''`        |
+
+### `ItemMediaComponent`
+
+| Input     | Type                             | Default     |
+| --------- | -------------------------------- | ----------- |
+| `variant` | `'default' \| 'icon' \| 'image'` | `'default'` |
+| `class`   | `string`                         | `''`        |
+
+### Parts
+
+- `ui-item-group` arranges related items in a vertical stack.
+- `ui-item-separator` renders a full-width divider line between grouped rows.
+- `ui-item-header` and `ui-item-footer` span the full width of the item.
+- `ui-item-actions` stays aligned to the trailing edge with logical spacing, so RTL layouts remain correct.
+
+## Styling and theming
+
+The outline variant uses `border-border` instead of inheriting border color from text, which keeps dividers and item shells consistent with the rest of the library theme.
+
+Pass `class` to the root or individual parts to tune spacing, borders, width, image treatment, or flex behavior. `ui-item-content` can be reused for secondary metadata by overriding it with classes such as `flex-none basis-auto items-end text-right`.
+
+Powered by `class-variance-authority`. Re-exports: `itemVariants`, `itemMediaVariants`, `ItemVariant`, `ItemSize`, `ItemMediaVariant`.
+
+## Accessibility
+
+- Use a semantic anchor or button host when the row is interactive.
+- Keep decorative icons and artwork `aria-hidden` or use empty `alt` text when nearby text already names the content.
+- Do not place nested interactive controls inside an interactive anchor host. When the row contains independent actions, keep the host non-interactive and place buttons inside `ui-item-actions`.
+
+## Keyboard interactions
+
+- Non-interactive items are not focusable.
+- Anchor and button hosts keep native Tab, Enter, and Space behavior.
+- Embedded controls inside `ui-item-actions` follow the natural DOM tab order.
+- When composed inside `ui-menu-item`, keyboard behavior comes from the menu primitives.
+
+## Angular notes
+
+- There is no `asChild` input in Angular. Use semantic hosts such as `<a ui-item>` or `<button ui-item>` directly.
+- `size` and `variant` are Angular `input()` values on the root item.
+- `ui-item-media` reads the parent item size automatically so icon and image wrappers stay in sync.
+- Use `Field` or the local form primitives when the row contains an actual form control such as a checkbox, radio, input, or select.
+
+## Source parity
+
+This Angular implementation follows the shadcn Item information architecture and examples while translating React `asChild` composition to semantic hosts and mapping the dropdown example to the existing Angular menu primitives.

package/kanban/README.md

@@ -0,0 +1,81 @@
+# Kanban
+
+Composable kanban board primitives inspired by Flux Kanban and implemented with local shadcn-style Angular patterns.
+
+## Import
+
+```ts
+import {
+  KanbanCardComponent,
+  KanbanCardFooterComponent,
+  KanbanCardHeaderComponent,
+  KanbanColumnActionsComponent,
+  KanbanColumnCardsComponent,
+  KanbanColumnComponent,
+  KanbanColumnFooterComponent,
+  KanbanColumnHeaderComponent,
+  KanbanComponent,
+} from '@edsis/ui/kanban';
+```
+
+## Usage
+
+```html
+<ui-kanban>
+  <ui-kanban-column>
+    <ui-kanban-column-header heading="Planned" count="4" />
+    <ui-kanban-column-cards>
+      <ui-kanban-card heading="Update privacy policy in app" />
+      <button ui-kanban-card type="button" heading="Search suggestions are broken"></button>
+    </ui-kanban-column-cards>
+  </ui-kanban-column>
+</ui-kanban>
+```
+
+## Composition
+
+- `ui-kanban` owns horizontal board layout and column width variables.
+- `ui-kanban-column` frames one workflow stage.
+- `ui-kanban-column-header` accepts `heading`, `subheading`, `count`, and `badge` inputs.
+- `ui-kanban-column-actions` projects action buttons into the column header.
+- `ui-kanban-column-cards` contains cards and handles vertical scrolling.
+- `ui-kanban-column-footer` is for add-card forms or secondary actions.
+- `ui-kanban-card` renders a static card; use `button[ui-kanban-card]` or `a[ui-kanban-card]` for clickable cards.
+- `ui-kanban-card-header` and `ui-kanban-card-footer` project tags, metadata, avatars, or actions into a card.
+
+## Inputs
+
+### KanbanComponent
+
+| Input         | Type                        | Default     | Description                               |
+| ------------- | --------------------------- | ----------- | ----------------------------------------- |
+| `columnWidth` | `'sm' \| 'default' \| 'lg'` | `'default'` | Sets the board column width CSS variable. |
+| `dense`       | `boolean`                   | `false`     | Reduces column and card gaps.             |
+| `class`       | `string`                    | `''`        | Additional host classes.                  |
+
+### KanbanColumnHeaderComponent
+
+| Input        | Type                       | Default | Description                                   |
+| ------------ | -------------------------- | ------- | --------------------------------------------- |
+| `heading`    | `string`                   | `''`    | Primary column title.                         |
+| `subheading` | `string`                   | `''`    | Secondary column text.                        |
+| `count`      | `string \| number \| null` | `null`  | Optional card count shown beside the heading. |
+| `badge`      | `string`                   | `''`    | Optional badge text shown beside the heading. |
+| `class`      | `string`                   | `''`    | Additional host classes.                      |
+
+### KanbanCardComponent
+
+| Input      | Type      | Default | Description                                        |
+| ---------- | --------- | ------- | -------------------------------------------------- |
+| `heading`  | `string`  | `''`    | Default card title when no custom body is needed.  |
+| `selected` | `boolean` | `false` | Marks a card as selected/current.                  |
+| `disabled` | `boolean` | `false` | Disables interaction and applies disabled styling. |
+| `class`    | `string`  | `''`    | Additional host classes.                           |
+
+## Accessibility
+
+- Use `button[ui-kanban-card]` for cards that trigger an action.
+- Provide `type="button"` on button cards inside forms.
+- Keep card titles visible and descriptive.
+- Give icon-only column actions an `aria-label`.
+- Preserve DOM order to match the workflow order announced to assistive technology.