@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,60 +0,0 @@
-# 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

@@ -1,6 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,238 +0,0 @@
-# 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

@@ -1,12 +0,0 @@
-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';