@sonny-ui/core 0.1.0-alpha.2 → 0.1.0-alpha.20

package/src/lib/tabs/tabs.directives.spec.ts

@@ -0,0 +1,136 @@
+import { Component, signal, viewChild } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import {
+  SnyTabsDirective,
+  SnyTabsListDirective,
+  SnyTabsTriggerDirective,
+  SnyTabsContentDirective,
+} from './tabs.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTabsContentDirective],
+  template: `
+    <div snyTabs [(value)]="activeTab">
+      <div snyTabsList>
+        <button snyTabsTrigger value="tab1">Tab 1</button>
+        <button snyTabsTrigger value="tab2">Tab 2</button>
+      </div>
+      <div snyTabsContent value="tab1">Content 1</div>
+      <div snyTabsContent value="tab2">Content 2</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  activeTab = signal('tab1');
+}
+
+describe('Tabs Directives', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should show active tab content', () => {
+    const contents = fixture.nativeElement.querySelectorAll('[role="tabpanel"]');
+    expect(contents[0].style.display).not.toBe('none');
+    expect(contents[1].style.display).toBe('none');
+  });
+
+  it('should set aria-selected on active trigger', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(triggers[0].getAttribute('aria-selected')).toBe('true');
+    expect(triggers[1].getAttribute('aria-selected')).toBe('false');
+  });
+
+  it('should switch tabs on click', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    triggers[1].click();
+    fixture.detectChanges();
+    const contents = fixture.nativeElement.querySelectorAll('[role="tabpanel"]');
+    expect(contents[0].style.display).toBe('none');
+    expect(contents[1].style.display).not.toBe('none');
+  });
+
+  it('should have tablist role', () => {
+    const list = fixture.nativeElement.querySelector('[role="tablist"]');
+    expect(list).toBeTruthy();
+    expect(list.className).toContain('bg-muted');
+  });
+
+  it('should implement roving tabindex on triggers', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(triggers[0].getAttribute('tabindex')).toBe('0');
+    expect(triggers[1].getAttribute('tabindex')).toBe('-1');
+  });
+
+  it('should move focus with ArrowRight', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    (triggers[0] as HTMLElement).focus();
+    triggers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    fixture.detectChanges();
+    const updatedTriggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(document.activeElement).toBe(updatedTriggers[1]);
+  });
+
+  it('should move focus with ArrowLeft', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    (triggers[1] as HTMLElement).focus();
+    triggers[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    fixture.detectChanges();
+    const updatedTriggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(document.activeElement).toBe(updatedTriggers[0]);
+  });
+
+  it('should move focus to first with Home', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    (triggers[1] as HTMLElement).focus();
+    triggers[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    fixture.detectChanges();
+    const updatedTriggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(document.activeElement).toBe(updatedTriggers[0]);
+  });
+
+  it('should move focus to last with End', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    (triggers[0] as HTMLElement).focus();
+    triggers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+    fixture.detectChanges();
+    const updatedTriggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(document.activeElement).toBe(updatedTriggers[1]);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTabsContentDirective],
+  template: `
+    <div snyTabs #t="snyTabs" [(value)]="activeTab">
+      <div snyTabsList>
+        <button snyTabsTrigger value="tab1">Tab 1</button>
+      </div>
+      <div snyTabsContent value="tab1">Content 1</div>
+    </div>
+  `,
+})
+class ExportAsHost {
+  activeTab = signal('tab1');
+  tabs = viewChild<SnyTabsDirective>('t');
+}
+
+describe('Tabs exportAs', () => {
+  it('should expose snyTabs via template ref', async () => {
+    await TestBed.configureTestingModule({ imports: [ExportAsHost] }).compileComponents();
+    const fixture = TestBed.createComponent(ExportAsHost);
+    fixture.detectChanges();
+    const ref = fixture.componentInstance.tabs();
+    expect(ref).toBeTruthy();
+    expect(ref!.value()).toBe('tab1');
+  });
+});

package/src/lib/tabs/tabs.directives.ts

@@ -0,0 +1,126 @@
+import { Directive, ElementRef, computed, inject, input, model, InjectionToken } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_TABS = new InjectionToken<SnyTabsDirective>('SnyTabs');
+
+@Directive({
+  selector: '[snyTabs]',
+  exportAs: 'snyTabs',
+  providers: [{ provide: SNY_TABS, useExisting: SnyTabsDirective }],
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTabsDirective {
+  readonly value = model<string>('');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('', this.class())
+  );
+
+  select(value: string): void {
+    this.value.set(value);
+  }
+}
+
+@Directive({
+  selector: '[snyTabsList]',
+  host: {
+    role: 'tablist',
+    '[class]': 'computedClass()',
+    '(keydown)': 'onKeydown($event)',
+  },
+})
+export class SnyTabsListDirective {
+  readonly class = input<string>('');
+  private readonly elRef = inject(ElementRef);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'inline-flex h-10 items-center justify-center rounded-sm bg-muted p-1 text-muted-foreground',
+      this.class()
+    )
+  );
+
+  onKeydown(event: KeyboardEvent): void {
+    const triggers = Array.from(
+      (this.elRef.nativeElement as HTMLElement).querySelectorAll<HTMLElement>('[role="tab"]')
+    );
+    if (triggers.length === 0) return;
+
+    const currentIndex = triggers.indexOf(document.activeElement as HTMLElement);
+    if (currentIndex === -1) return;
+
+    let nextIndex: number | null = null;
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % triggers.length;
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        event.preventDefault();
+        nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+        break;
+      case 'Home':
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case 'End':
+        event.preventDefault();
+        nextIndex = triggers.length - 1;
+        break;
+    }
+    if (nextIndex !== null) {
+      triggers[nextIndex].focus();
+    }
+  }
+}
+
+@Directive({
+  selector: '[snyTabsTrigger]',
+  host: {
+    role: 'tab',
+    '[class]': 'computedClass()',
+    '[attr.aria-selected]': 'isActive()',
+    '[attr.tabindex]': 'isActive() ? 0 : -1',
+    '(click)': 'tabs.select(value())',
+  },
+})
+export class SnyTabsTriggerDirective {
+  readonly value = input.required<string>();
+  readonly class = input<string>('');
+  readonly tabs = inject(SNY_TABS);
+
+  readonly isActive = computed(() => this.tabs.value() === this.value());
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer',
+      this.isActive()
+        ? 'bg-background text-foreground shadow-sm'
+        : 'hover:bg-background/50',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyTabsContent]',
+  host: {
+    role: 'tabpanel',
+    '[class]': 'computedClass()',
+    '[style.display]': 'isActive() ? null : "none"',
+  },
+})
+export class SnyTabsContentDirective {
+  readonly value = input.required<string>();
+  readonly class = input<string>('');
+  private readonly tabs = inject(SNY_TABS);
+
+  readonly isActive = computed(() => this.tabs.value() === this.value());
+
+  protected readonly computedClass = computed(() =>
+    cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', this.class())
+  );
+}

package/src/lib/tabs/tabs.variants.ts

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority';
+
+export const tabsListVariants = cva(
+  'inline-flex h-10 items-center justify-center rounded-sm bg-muted p-1 text-muted-foreground',
+  {
+    variants: {},
+    defaultVariants: {},
+  }
+);
+
+export const tabsTriggerVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {},
+    defaultVariants: {},
+  }
+);

package/src/lib/tag-input/index.ts

@@ -0,0 +1,2 @@
+export { SnyTagInputComponent } from './tag-input.component';
+export { tagInputContainerVariants, tagVariants, type TagInputSize } from './tag-input.variants';

package/src/lib/tag-input/tag-input.component.spec.ts

@@ -0,0 +1,190 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyTagInputComponent } from './tag-input.component';
+
+@Component({
+  standalone: true,
+  imports: [SnyTagInputComponent],
+  template: `
+    <sny-tag-input
+      [(value)]="tags"
+      [maxTags]="maxTags()"
+      [allowDuplicates]="allowDuplicates()"
+      [disabled]="disabled()"
+      [validate]="validateFn()"
+      (tagAdded)="lastAdded = $event"
+      (tagRemoved)="lastRemoved = $event"
+    />
+  `,
+})
+class TestHost {
+  tags = signal<string[]>([]);
+  maxTags = signal<number | null>(null);
+  allowDuplicates = signal(false);
+  disabled = signal(false);
+  validateFn = signal<((t: string) => boolean) | null>(null);
+  lastAdded: string | null = null;
+  lastRemoved: string | null = null;
+}
+
+describe('SnyTagInputComponent', () => {
+  let fixture: ComponentFixture<TestHost>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHost] }).compileComponents();
+    fixture = TestBed.createComponent(TestHost);
+    fixture.detectChanges();
+    el = fixture.nativeElement;
+  });
+
+  function getInput(): HTMLInputElement {
+    return el.querySelector('input') as HTMLInputElement;
+  }
+
+  function getTags(): string[] {
+    return Array.from(el.querySelectorAll('span')).map((s) => s.textContent?.trim().replace('×', '').trim() ?? '');
+  }
+
+  function typeAndEnter(text: string): void {
+    const input = getInput();
+    input.value = text;
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    fixture.detectChanges();
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    fixture.detectChanges();
+  }
+
+  it('should render empty with placeholder', () => {
+    expect(getInput().placeholder).toBe('Add tag...');
+  });
+
+  it('should add tag on Enter', () => {
+    typeAndEnter('Angular');
+    expect(fixture.componentInstance.tags()).toContain('Angular');
+    expect(fixture.componentInstance.lastAdded).toBe('Angular');
+  });
+
+  it('should add tag on comma', () => {
+    const input = getInput();
+    input.value = 'React,';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags()).toContain('React');
+  });
+
+  it('should reject duplicates when allowDuplicates=false', () => {
+    typeAndEnter('Angular');
+    typeAndEnter('Angular');
+    expect(fixture.componentInstance.tags().filter((t) => t === 'Angular').length).toBe(1);
+  });
+
+  it('should allow duplicates when allowDuplicates=true', () => {
+    fixture.componentInstance.allowDuplicates.set(true);
+    fixture.detectChanges();
+    typeAndEnter('Angular');
+    typeAndEnter('Angular');
+    expect(fixture.componentInstance.tags().filter((t) => t === 'Angular').length).toBe(2);
+  });
+
+  it('should respect maxTags', () => {
+    fixture.componentInstance.maxTags.set(2);
+    fixture.detectChanges();
+    typeAndEnter('A');
+    typeAndEnter('B');
+    // Input should be hidden now (atMax), so we can't type more
+    const input = el.querySelector('input');
+    expect(input).toBeNull(); // hidden when at max
+    expect(fixture.componentInstance.tags().length).toBe(2);
+  });
+
+  it('should validate with custom function', () => {
+    fixture.componentInstance.validateFn.set((t: string) => t.length >= 3);
+    fixture.detectChanges();
+    typeAndEnter('AB');
+    expect(fixture.componentInstance.tags().length).toBe(0);
+    typeAndEnter('ABC');
+    expect(fixture.componentInstance.tags()).toContain('ABC');
+  });
+
+  it('should remove tag on X click', () => {
+    typeAndEnter('Angular');
+    fixture.detectChanges();
+    const removeBtn = el.querySelector('[aria-label="Remove Angular"]') as HTMLButtonElement;
+    removeBtn.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags().length).toBe(0);
+    expect(fixture.componentInstance.lastRemoved).toBe('Angular');
+  });
+
+  it('should remove last tag on Backspace with empty input', () => {
+    typeAndEnter('A');
+    typeAndEnter('B');
+    const input = getInput();
+    input.value = '';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags()).toEqual(['A']);
+  });
+
+  it('should add tag on blur when addOnBlur=true', () => {
+    const input = getInput();
+    input.value = 'BlurTag';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('blur', { bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags()).toContain('BlurTag');
+  });
+
+  it('should disable when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(getInput().disabled).toBe(true);
+  });
+
+  it('should emit tagAdded and tagRemoved', () => {
+    typeAndEnter('Test');
+    expect(fixture.componentInstance.lastAdded).toBe('Test');
+    const removeBtn = el.querySelector('[aria-label="Remove Test"]') as HTMLButtonElement;
+    removeBtn.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.lastRemoved).toBe('Test');
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyTagInputComponent],
+  template: `<sny-tag-input [formControl]="ctrl" />`,
+})
+class ReactiveHost {
+  ctrl = new FormControl<string[]>([]);
+}
+
+describe('SnyTagInputComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveHost>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [ReactiveHost] }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveHost);
+    fixture.detectChanges();
+  });
+
+  it('should populate tags from FormControl', () => {
+    fixture.componentInstance.ctrl.setValue(['A', 'B', 'C']);
+    fixture.detectChanges();
+    const tags = fixture.nativeElement.querySelectorAll('span');
+    expect(tags.length).toBe(3);
+  });
+
+  it('should update FormControl when tag added', () => {
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.value = 'New';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toContain('New');
+  });
+});

package/src/lib/tag-input/tag-input.component.ts

@@ -0,0 +1,172 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { tagInputContainerVariants, tagVariants, type TagInputSize } from './tag-input.variants';
+
+@Component({
+  selector: 'sny-tag-input',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyTagInputComponent), multi: true },
+  ],
+  template: `
+    <div [class]="containerClass()" (click)="focusInput()">
+      @for (tag of value(); track tag; let i = $index) {
+        <span [class]="tagClass()">
+          {{ tag }}
+          @if (removable() && !isDisabled()) {
+            <button
+              type="button"
+              class="hover:text-destructive transition-colors leading-none"
+              (click)="removeTag(i); $event.stopPropagation()"
+              [attr.aria-label]="'Remove ' + tag"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            </button>
+          }
+        </span>
+      }
+      @if (!atMax()) {
+        <input
+          #inputEl
+          type="text"
+          class="flex-1 min-w-[80px] outline-none bg-transparent"
+          [placeholder]="value().length === 0 ? placeholder() : ''"
+          [disabled]="isDisabled()"
+          [value]="inputValue()"
+          (input)="onInput($event)"
+          (keydown)="onKeydown($event)"
+          (blur)="onBlur()"
+          [attr.aria-label]="'Add tag'"
+        />
+      }
+    </div>
+  `,
+})
+export class SnyTagInputComponent implements ControlValueAccessor {
+  readonly value = model<string[]>([]);
+  readonly placeholder = input('Add tag...');
+  readonly maxTags = input<number | null>(null);
+  readonly allowDuplicates = input(false);
+  readonly removable = input(true);
+  readonly addOnBlur = input(true);
+  readonly separators = input<string[]>(['Enter', ',']);
+  readonly validate = input<((tag: string) => boolean) | null>(null);
+  readonly disabled = input(false);
+  readonly size = input<TagInputSize>('md');
+  readonly class = input<string>('');
+
+  readonly tagAdded = output<string>();
+  readonly tagRemoved = output<string>();
+
+  readonly inputValue = signal('');
+  private readonly _disabledByCva = signal(false);
+  readonly isDisabled = computed(() => this.disabled() || this._disabledByCva());
+  readonly atMax = computed(() => this.maxTags() !== null && this.value().length >= this.maxTags()!);
+
+  readonly containerClass = computed(() =>
+    cn(tagInputContainerVariants({ size: this.size() }), this.isDisabled() && 'opacity-50 cursor-not-allowed', this.class())
+  );
+
+  readonly tagClass = computed(() =>
+    cn(tagVariants({ size: this.size() }), 'bg-secondary text-secondary-foreground')
+  );
+
+  private readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('inputEl');
+
+  private _onChange: (value: string[]) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  writeValue(val: string[]): void {
+    this.value.set(val ?? []);
+  }
+
+  registerOnChange(fn: (value: string[]) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  focusInput(): void {
+    this.inputRef()?.nativeElement.focus();
+  }
+
+  onInput(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    // Check if separator character was typed (e.g. comma)
+    const seps = this.separators().filter((s) => s.length === 1);
+    for (const sep of seps) {
+      if (val.includes(sep)) {
+        const parts = val.split(sep);
+        for (const part of parts) {
+          this.addTag(part);
+        }
+        this.inputValue.set('');
+        return;
+      }
+    }
+    this.inputValue.set(val);
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (this.separators().includes(event.key) && event.key !== ',') {
+      event.preventDefault();
+      this.addTag(this.inputValue());
+      this.inputValue.set('');
+      return;
+    }
+
+    if (event.key === 'Backspace' && this.inputValue() === '') {
+      const tags = this.value();
+      if (tags.length > 0) {
+        this.removeTag(tags.length - 1);
+      }
+    }
+  }
+
+  onBlur(): void {
+    if (this.addOnBlur() && this.inputValue().trim()) {
+      this.addTag(this.inputValue());
+      this.inputValue.set('');
+    }
+    this._onTouched();
+  }
+
+  addTag(raw: string): void {
+    const tag = raw.trim();
+    if (!tag) return;
+    if (this.atMax()) return;
+    if (!this.allowDuplicates() && this.value().includes(tag)) return;
+
+    const validateFn = this.validate();
+    if (validateFn && !validateFn(tag)) return;
+
+    this.value.update((tags) => [...tags, tag]);
+    this._onChange(this.value());
+    this.tagAdded.emit(tag);
+  }
+
+  removeTag(index: number): void {
+    const removed = this.value()[index];
+    this.value.update((tags) => tags.filter((_, i) => i !== index));
+    this._onChange(this.value());
+    this.tagRemoved.emit(removed);
+  }
+}

package/src/lib/tag-input/tag-input.variants.ts

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+export const tagInputContainerVariants = cva(
+  'flex flex-wrap gap-1.5 border border-border rounded-md bg-background px-2 cursor-text transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
+  {
+    variants: {
+      size: {
+        sm: 'min-h-[36px] py-1 text-xs',
+        md: 'min-h-[40px] py-1.5 text-sm',
+        lg: 'min-h-[44px] py-2 text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+);
+
+export const tagVariants = cva(
+  'inline-flex items-center gap-1 rounded-md font-medium',
+  {
+    variants: {
+      size: {
+        sm: 'px-1.5 py-0.5 text-xs',
+        md: 'px-2 py-0.5 text-sm',
+        lg: 'px-2.5 py-1 text-sm',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+);
+
+export type TagInputSize = 'sm' | 'md' | 'lg';

package/src/lib/textarea/index.ts

@@ -0,0 +1,7 @@
+export { SnyTextareaDirective } from './textarea.directive';
+export {
+  textareaVariants,
+  type TextareaVariant,
+  type TextareaSize,
+  type TextareaResize,
+} from './textarea.variants';