@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/input-group/README.md

@@ -0,0 +1,60 @@
+# Input Group
+
+A composable input group for combining inputs with addons, buttons, and text.
+
+## Components
+
+- `ScInputGroup` - Root container with border, focus, and invalid state styling
+- `ScInputGroupAddon` - Addon container with alignment variants
+- `ScInputGroupButton` - Button with size variants, ghost variant by default
+- `ScInputGroupText` - Text/icon wrapper with muted foreground styling
+- `ScInputGroupInput` - Input that strips borders for seamless group integration
+- `ScInputGroupTextarea` - Textarea that strips borders for seamless group integration
+
+## Usage
+
+```html
+<div sc-input-group>
+  <div sc-input-group-addon>
+    <span sc-input-group-text>
+      <svg si-mail-icon></svg>
+    </span>
+  </div>
+  <input sc-input-group-input placeholder="Email address" />
+</div>
+```
+
+## With Button
+
+```html
+<div sc-input-group>
+  <div sc-input-group-addon>
+    <span sc-input-group-text>
+      <svg si-search-icon></svg>
+    </span>
+  </div>
+  <input sc-input-group-input placeholder="Search..." />
+  <div sc-input-group-addon align="inline-end">
+    <button sc-input-group-button size="icon-xs">
+      <svg si-x-icon></svg>
+    </button>
+  </div>
+</div>
+```
+
+## Inputs
+
+### ScInputGroupAddon
+
+| Input   | Type                                                             | Default          | Description            |
+| ------- | ---------------------------------------------------------------- | ---------------- | ---------------------- |
+| `align` | `'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end'` | `'inline-start'` | Addon alignment        |
+| `class` | `string`                                                         | `''`             | Additional CSS classes |
+
+### ScInputGroupButton
+
+| Input     | Type                                       | Default   | Description            |
+| --------- | ------------------------------------------ | --------- | ---------------------- |
+| `variant` | `'default' \| 'ghost' \| 'outline' \| ...` | `'ghost'` | Button variant         |
+| `size`    | `'xs' \| 'sm' \| 'icon-xs' \| 'icon-sm'`   | `'xs'`    | Button size            |
+| `class`   | `string`                                   | `''`      | Additional CSS classes |

package/src/lib/components/input-group/index.ts

@@ -0,0 +1,6 @@
+export { ScInputGroup } from './input-group';
+export { ScInputGroupAddon } from './input-group-addon';
+export { ScInputGroupButton } from './input-group-button';
+export { ScInputGroupText } from './input-group-text';
+export { ScInputGroupInput } from './input-group-input';
+export { ScInputGroupTextarea } from './input-group-textarea';

package/src/lib/components/input-group/input-group-addon.ts

@@ -0,0 +1,46 @@
+import { computed, Directive, input } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@semantic-components/ui';
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        'inline-start':
+          'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
+        'inline-end':
+          'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
+        'block-start':
+          'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+        'block-end':
+          'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+);
+
+export type ScInputGroupAddonVariants = VariantProps<
+  typeof inputGroupAddonVariants
+>;
+
+@Directive({
+  selector: 'div[sc-input-group-addon]',
+  host: {
+    'data-slot': 'input-group-addon',
+    role: 'group',
+    '[attr.data-align]': 'align()',
+    '[class]': 'class()',
+  },
+})
+export class ScInputGroupAddon {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly align = input<ScInputGroupAddonVariants['align']>('inline-start');
+
+  protected readonly class = computed(() =>
+    cn(inputGroupAddonVariants({ align: this.align() }), this.classInput()),
+  );
+}

package/src/lib/components/input-group/input-group-button.ts

@@ -0,0 +1,49 @@
+import { computed, Directive, input } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@semantic-components/ui';
+import { buttonVariants, type ScButtonVariants } from '@semantic-components/ui';
+
+const inputGroupButtonVariants = cva(
+  'gap-2 text-sm shadow-none flex items-center',
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: '',
+        'icon-xs':
+          'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+      },
+    },
+    defaultVariants: {
+      size: 'xs',
+    },
+  },
+);
+
+export type ScInputGroupButtonVariants = VariantProps<
+  typeof inputGroupButtonVariants
+>;
+
+@Directive({
+  selector: 'button[sc-input-group-button]',
+  host: {
+    'data-slot': 'input-group-button',
+    type: 'button',
+    '[attr.data-size]': 'size()',
+    '[class]': 'class()',
+  },
+})
+export class ScInputGroupButton {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly variant = input<ScButtonVariants['variant']>('ghost');
+  readonly size = input<ScInputGroupButtonVariants['size']>('xs');
+
+  protected readonly class = computed(() =>
+    cn(
+      buttonVariants({ variant: this.variant(), size: null }),
+      inputGroupButtonVariants({ size: this.size() }),
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/input-group/input-group-input.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'input[sc-input-group-input]',
+  host: {
+    'data-slot': 'input-group-control',
+    '[class]': 'class()',
+  },
+})
+export class ScInputGroupInput {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 h-full px-2.5 text-base md:text-sm outline-none placeholder:text-muted-foreground min-w-0 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/input-group/input-group-text.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'span[sc-input-group-text]',
+  host: {
+    'data-slot': 'input-group-text',
+    '[class]': 'class()',
+  },
+})
+export class ScInputGroupText {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/input-group/input-group-textarea.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'textarea[sc-input-group-textarea]',
+  host: {
+    'data-slot': 'input-group-control',
+    '[class]': 'class()',
+  },
+})
+export class ScInputGroupTextarea {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none px-2.5 text-base md:text-sm outline-none placeholder:text-muted-foreground field-sizing-content min-h-16 min-w-0 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/input-group/input-group.ts

@@ -0,0 +1,21 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-input-group]',
+  host: {
+    'data-slot': 'input-group',
+    role: 'group',
+    '[class]': 'class()',
+  },
+})
+export class ScInputGroup {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/kanban-board/README.md

@@ -0,0 +1,238 @@
+# Kanban Board
+
+A drag-and-drop task board component for project management and workflow visualization.
+
+## Installation
+
+Import the components from the kanban-board module:
+
+```typescript
+import { ScKanbanBoard, ScKanbanColumn, ScKanbanCard } from '@/ui/kanban-board';
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<sc-kanban-board [(columns)]="columns" [(cards)]="cards" (cardMoved)="onCardMoved($event)" (cardAdded)="onCardAdded($event)" />
+```
+
+```typescript
+import { signal } from '@angular/core';
+import type { KanbanColumn, KanbanCard } from '@/ui/kanban-board';
+
+columns = signal<KanbanColumn[]>([
+  { id: 'todo', title: 'To Do', order: 0 },
+  { id: 'in-progress', title: 'In Progress', order: 1 },
+  { id: 'done', title: 'Done', order: 2 },
+]);
+
+cards = signal<KanbanCard[]>([
+  { id: '1', title: 'Task 1', columnId: 'todo', order: 0 },
+  { id: '2', title: 'Task 2', columnId: 'in-progress', order: 0 },
+]);
+```
+
+### With Column Colors and WIP Limits
+
+```typescript
+columns = signal<KanbanColumn[]>([
+  { id: 'backlog', title: 'Backlog', order: 0, color: '#6b7280' },
+  { id: 'todo', title: 'To Do', order: 1, color: '#3b82f6' },
+  { id: 'in-progress', title: 'In Progress', order: 2, color: '#f59e0b', limit: 3 },
+  { id: 'done', title: 'Done', order: 3, color: '#22c55e' },
+]);
+```
+
+### Cards with Full Details
+
+```typescript
+cards = signal<KanbanCard[]>([
+  {
+    id: '1',
+    title: 'Implement authentication',
+    description: 'Add login, registration, and password reset',
+    columnId: 'in-progress',
+    order: 0,
+    labels: [
+      { id: 'l1', text: 'Feature', color: '#8b5cf6' },
+      { id: 'l2', text: 'Security', color: '#ef4444' },
+    ],
+    assignee: {
+      id: 'u1',
+      name: 'Alice Johnson',
+      initials: 'AJ',
+    },
+    priority: 'high',
+    dueDate: new Date('2024-12-31'),
+  },
+]);
+```
+
+### Read-Only Board
+
+```html
+<sc-kanban-board [(columns)]="columns" [(cards)]="cards" [showAddCard]="false" [showDeleteCard]="false" [showAddColumn]="false" />
+```
+
+### Disabled Board
+
+```html
+<sc-kanban-board [(columns)]="columns" [(cards)]="cards" [disabled]="true" />
+```
+
+## API Reference
+
+### ScKanbanBoard
+
+The main container component that manages columns and cards.
+
+#### Inputs
+
+| Input            | Type             | Default | Description                                       |
+| ---------------- | ---------------- | ------- | ------------------------------------------------- |
+| `columns`        | `KanbanColumn[]` | `[]`    | Array of columns (two-way binding with `model()`) |
+| `cards`          | `KanbanCard[]`   | `[]`    | Array of cards (two-way binding with `model()`)   |
+| `disabled`       | `boolean`        | `false` | Disable all drag and drop interactions            |
+| `showAddCard`    | `boolean`        | `true`  | Show add card buttons in columns                  |
+| `showDeleteCard` | `boolean`        | `true`  | Show delete button on cards                       |
+| `showAddColumn`  | `boolean`        | `true`  | Show add column button                            |
+| `class`          | `string`         | `''`    | Additional CSS classes                            |
+
+#### Outputs
+
+| Output            | Type                                       | Description                                 |
+| ----------------- | ------------------------------------------ | ------------------------------------------- |
+| `cardMoved`       | `KanbanDragEvent`                          | Emitted when a card is moved                |
+| `cardAdded`       | `KanbanCardAddEvent`                       | Emitted when a card is added                |
+| `cardDeleted`     | `KanbanCardDeleteEvent`                    | Emitted when a card is deleted              |
+| `cardClick`       | `KanbanCard`                               | Emitted when a card is clicked              |
+| `columnAdded`     | `string`                                   | Emitted when a column is added (title)      |
+| `columnCollapsed` | `{ columnId: string; collapsed: boolean }` | Emitted when a column is collapsed/expanded |
+
+### ScKanbanColumn
+
+Individual column component (used internally by ScKanbanBoard).
+
+### ScKanbanCard
+
+Individual card component (used internally by ScKanbanColumn).
+
+## Type Definitions
+
+### KanbanColumn
+
+```typescript
+interface KanbanColumn {
+  id: string;
+  title: string;
+  order: number;
+  color?: string; // Header accent color (hex)
+  limit?: number; // WIP limit - shows warning when exceeded
+  collapsed?: boolean; // Collapsed state
+}
+```
+
+### KanbanCard
+
+```typescript
+interface KanbanCard {
+  id: string;
+  title: string;
+  description?: string;
+  columnId: string;
+  order: number;
+  labels?: KanbanLabel[];
+  assignee?: KanbanAssignee;
+  dueDate?: Date;
+  priority?: 'low' | 'medium' | 'high' | 'urgent';
+  metadata?: Record<string, unknown>;
+}
+```
+
+### KanbanLabel
+
+```typescript
+interface KanbanLabel {
+  id: string;
+  text: string;
+  color: string; // Hex color for label
+}
+```
+
+### KanbanAssignee
+
+```typescript
+interface KanbanAssignee {
+  id: string;
+  name: string;
+  avatar?: string; // URL to avatar image
+  initials?: string; // Fallback if no avatar
+}
+```
+
+### KanbanDragEvent
+
+```typescript
+interface KanbanDragEvent {
+  card: KanbanCard;
+  sourceColumnId: string;
+  targetColumnId: string;
+  sourceIndex: number;
+  targetIndex: number;
+}
+```
+
+### KanbanCardAddEvent
+
+```typescript
+interface KanbanCardAddEvent {
+  columnId: string;
+  title: string;
+}
+```
+
+### KanbanCardDeleteEvent
+
+```typescript
+interface KanbanCardDeleteEvent {
+  card: KanbanCard;
+  columnId: string;
+}
+```
+
+## Features
+
+- **Drag and Drop**: Move cards between columns and reorder within columns using native HTML5 drag and drop
+- **Visual Feedback**: Drop zones highlight during drag, cards show insertion indicators
+- **Column Management**: Add new columns, collapse/expand columns
+- **Card Management**: Add and delete cards with inline forms
+- **Labels**: Color-coded labels for categorization
+- **Priority Indicators**: Visual priority markers (low, medium, high, urgent)
+- **Due Dates**: Date display with overdue highlighting (red for past, orange for soon)
+- **Assignees**: Avatar or initials display with tooltip
+- **WIP Limits**: Column card limits with warning when exceeded
+- **Keyboard Accessible**: Cards are focusable and can be activated with Enter/Space
+- **Two-Way Binding**: Use `[(columns)]` and `[(cards)]` for automatic state sync
+
+## Accessibility
+
+- Cards have `role="listitem"` and are keyboard focusable
+- Columns have `role="list"` with descriptive labels
+- Collapse/expand buttons have proper ARIA attributes
+- Delete and add buttons have descriptive `aria-label` attributes
+- Focus indicators are visible for keyboard navigation
+
+## Styling
+
+The component uses Tailwind CSS classes and supports theming through CSS variables:
+
+- `--background` / `--foreground`: Base colors
+- `--card`: Card background
+- `--muted` / `--muted-foreground`: Secondary colors
+- `--primary` / `--primary-foreground`: Accent colors
+- `--destructive`: Delete action color
+- `--ring`: Focus ring color
+
+Custom styling can be applied via the `class` input on the board component.

package/src/lib/components/kanban-board/index.ts

@@ -0,0 +1,12 @@
+export { ScKanbanBoard } from './kanban-board';
+export { ScKanbanColumn } from './kanban-column';
+export { ScKanbanCard } from './kanban-card';
+export type {
+  KanbanCard,
+  KanbanColumn,
+  KanbanLabel,
+  KanbanAssignee,
+  KanbanDragEvent,
+  KanbanCardAddEvent,
+  KanbanCardDeleteEvent,
+} from './kanban-types';