@ng-cn/core 1.0.18 → 1.0.20

package/src/app/lib/components/ui/item/item-media.component.ts

@@ -0,0 +1,63 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * ItemMedia variants using class-variance-authority.
+ * Matches shadcn/ui React item-media exactly.
+ */
+export const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;
+export type ItemMediaVariant = 'default' | 'icon' | 'image';
+
+/**
+ * ItemMedia component - leading media (icon, image or avatar) for an Item.
+ *
+ * @example
+ * <!-- Icon -->
+ * <ItemMedia variant="icon">
+ *   <lucide-icon [img]="Music" />
+ * </ItemMedia>
+ *
+ * <!-- Image -->
+ * <ItemMedia variant="image">
+ *   <img src="..." alt="..." />
+ * </ItemMedia>
+ */
+@Component({
+  selector: 'ItemMedia',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-media"',
+    '[attr.data-variant]': 'variant()',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemMedia {
+  /** The visual style variant of the media container */
+  readonly variant = input<ItemMediaVariant>('default');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles, variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(itemMediaVariants({ variant: this.variant() }), this.class()),
+  );
+}

package/src/app/lib/components/ui/item/item-separator.component.ts

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemSeparator component - horizontal divider between items in an ItemGroup.
+ *
+ * @example
+ * <ItemGroup>
+ *   <Item>...</Item>
+ *   <ItemSeparator />
+ *   <Item>...</Item>
+ * </ItemGroup>
+ */
+@Component({
+  selector: 'ItemSeparator',
+  template: ``,
+  host: {
+    'attr.data-slot': '"item-separator"',
+    role: 'none',
+    'attr.data-orientation': '"horizontal"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemSeparator {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('bg-border shrink-0 h-px w-full my-0', this.class()),
+  );
+}

package/src/app/lib/components/ui/item/item-title.component.ts

@@ -0,0 +1,27 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemTitle component - title text for an Item.
+ *
+ * @example
+ * <ItemTitle>Basic Item</ItemTitle>
+ */
+@Component({
+  selector: 'ItemTitle',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-title"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemTitle {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', this.class()),
+  );
+}

package/src/app/lib/components/ui/item/item.component.ts

@@ -0,0 +1,77 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Item variants using class-variance-authority.
+ * Matches shadcn/ui React item exactly.
+ */
+export const itemVariants = cva(
+  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50',
+      },
+      size: {
+        default: 'p-4 gap-4',
+        sm: 'py-3 px-4 gap-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ItemVariants = VariantProps<typeof itemVariants>;
+export type ItemVariant = 'default' | 'outline' | 'muted';
+export type ItemSize = 'default' | 'sm';
+
+/**
+ * Item component - a flexible row for displaying content with
+ * media, title, description and actions.
+ *
+ * @example
+ * <Item variant="outline">
+ *   <ItemMedia variant="icon">
+ *     <lucide-icon [img]="User" />
+ *   </ItemMedia>
+ *   <ItemContent>
+ *     <ItemTitle>Profile</ItemTitle>
+ *     <ItemDescription>Manage your profile settings.</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions>
+ *     <Button size="sm">Edit</Button>
+ *   </ItemActions>
+ * </Item>
+ */
+@Component({
+  selector: 'Item',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item"',
+    '[attr.data-variant]': 'variant()',
+    '[attr.data-size]': 'size()',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Item {
+  /** The visual style variant of the item */
+  readonly variant = input<ItemVariant>('default');
+
+  /** The size of the item */
+  readonly size = input<ItemSize>('default');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles, variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(itemVariants({ variant: this.variant(), size: this.size() }), this.class()),
+  );
+}

package/src/app/lib/components/ui/phone-input/index.ts

@@ -0,0 +1 @@
+export { PhoneInput } from './phone-input.component';

package/src/app/lib/components/ui/phone-input/phone-input.component.ts

@@ -0,0 +1,169 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  signal,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CountrySelector } from '../country-selector/country-selector.component';
+import { COUNTRIES, type Country, getCountryByCode } from '../country-selector/country-data';
+
+/**
+ * PhoneInput component
+ *
+ * Combines a CountrySelector (dial code) with a number input.
+ * Implements ControlValueAccessor — value is the full phone string (e.g. "+1 555-123-4567").
+ *
+ * @example
+ * ```html
+ * <PhoneInput [(ngModel)]="phone" placeholder="Enter phone number" />
+ * ```
+ */
+@Component({
+  selector: 'PhoneInput',
+  imports: [CountrySelector],
+  template: `
+    <div [class]="containerClass()">
+      <CountrySelector
+        [disabled]="isDisabled()"
+        [class]="'rounded-r-none border-r-0 shrink-0 w-auto min-w-[120px]'"
+        [placeholder]="'Country'"
+        [value]="selectedCountryCode()"
+        (countryChange)="onCountryChange($event)"
+      />
+      <input
+        type="tel"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [value]="localNumber()"
+        (input)="onNumberInput($event)"
+        (blur)="onTouched()"
+        [class]="inputClass()"
+      />
+    </div>
+  `,
+  host: {
+    'attr.data-slot': '"phone-input"',
+    '[class]': 'hostClass()',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => PhoneInput),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PhoneInput implements ControlValueAccessor {
+  /** Placeholder for the number input */
+  readonly placeholder = input<string>('Phone number');
+  /** Whether the input is disabled */
+  readonly disabled = input<boolean>(false);
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Internal country code (ISO 2-letter) */
+  protected readonly selectedCountryCode = signal<string>('US');
+  /** Internal local number (without dial code) */
+  protected readonly localNumber = signal<string>('');
+  /** Internal disabled state from CVA */
+  private readonly _isDisabledFromCVA = signal<boolean>(false);
+
+  protected readonly isDisabled = computed(() => this.disabled() || this._isDisabledFromCVA());
+
+  protected readonly hostClass = computed(() => cn('block', this.class()));
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      'flex items-stretch w-full',
+      this.isDisabled() && 'pointer-events-none opacity-50',
+    ),
+  );
+
+  protected readonly inputClass = computed(() =>
+    cn(
+      'flex-1 min-w-0 h-10 rounded-xl rounded-l-none border px-3 py-2 text-sm',
+      'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-300 dark:border-zinc-700/50',
+      'text-zinc-900 dark:text-zinc-50 placeholder:text-zinc-500',
+      'shadow-xs transition-[color,box-shadow] outline-none',
+      'focus-visible:border-primary/30 dark:focus-visible:border-white/30 focus-visible:ring-primary/20 dark:focus-visible:ring-white/20 focus-visible:ring-2',
+      'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    ),
+  );
+
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: string) => void = () => {};
+  protected onTouched: () => void = () => {};
+
+  writeValue(value: string): void {
+    if (!value) {
+      this.localNumber.set('');
+      return;
+    }
+    // Parse: if value starts with a known dial code, split it
+    const country = getCountryByCode(this.selectedCountryCode());
+    const dialCode = country?.dialCode ?? '';
+    if (dialCode && value.startsWith(dialCode)) {
+      this.localNumber.set(value.slice(dialCode.length).trimStart());
+    } else if (value.startsWith('+')) {
+      // Try to find a matching dial code
+      const matched = this.findCountryByDialCode(value);
+      if (matched) {
+        this.selectedCountryCode.set(matched.code);
+        this.localNumber.set(value.slice(matched.dialCode.length).trimStart());
+      } else {
+        this.localNumber.set(value);
+      }
+    } else {
+      this.localNumber.set(value);
+    }
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._isDisabledFromCVA.set(isDisabled);
+  }
+
+  protected onCountryChange(country: Country): void {
+    this.selectedCountryCode.set(country.code);
+    this.emitValue();
+    this.onTouched();
+  }
+
+  protected onNumberInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.localNumber.set(target.value);
+    this.emitValue();
+  }
+
+  private emitValue(): void {
+    const country = getCountryByCode(this.selectedCountryCode());
+    const dialCode = country?.dialCode ?? '';
+    const number = this.localNumber().trim();
+    const fullValue = number ? `${dialCode} ${number}` : dialCode;
+    this.onChange(fullValue);
+  }
+
+  private findCountryByDialCode(phone: string): Country | undefined {
+    let best: Country | undefined;
+    let bestLen = 0;
+    for (const c of COUNTRIES) {
+      if (phone.startsWith(c.dialCode) && c.dialCode.length > bestLen) {
+        best = c;
+        bestLen = c.dialCode.length;
+      }
+    }
+    return best;
+  }
+}

package/src/app/lib/components/ui/resizable/resizable-handle.component.ts

@@ -165,7 +165,7 @@ export class ResizableHandle {
       if (!this.isDragging()) return;
 
       const currentPosition = this.context.direction() === 'horizontal' ? e.clientX : e.clientY;
-      const delta = ((currentPosition - this.startPosition) / window.innerWidth) * 100;
+      const delta = ((currentPosition - this.startPosition) / (typeof window !== 'undefined' ? window.innerWidth : 1000)) * 100;
       this.context.onResize(delta);
       this.startPosition = currentPosition;
     };
@@ -194,7 +194,7 @@ export class ResizableHandle {
       const currentTouch = e.touches[0];
       const currentPosition =
         this.context.direction() === 'horizontal' ? currentTouch.clientX : currentTouch.clientY;
-      const delta = ((currentPosition - this.startPosition) / window.innerWidth) * 100;
+      const delta = ((currentPosition - this.startPosition) / (typeof window !== 'undefined' ? window.innerWidth : 1000)) * 100;
       this.context.onResize(delta);
       this.startPosition = currentPosition;
     };

package/src/app/lib/components/ui/sheet/sheet-content.component.ts

@@ -139,7 +139,7 @@ export class SheetContent implements OnDestroy {
   }
 
   private lockBodyScroll(): void {
-    if (typeof document !== 'undefined') {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
       const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
       this.previousBodyOverflow = document.body.style.overflow;
       this.previousBodyPaddingRight = document.body.style.paddingRight;

package/src/app/lib/components/ui/tabs/tabs-list.component.ts

@@ -187,6 +187,7 @@ export class TabsList {
 
     if (handled) {
       event.preventDefault();
+      if (typeof document === 'undefined') return;
 
       // Skip disabled tabs — scan in the movement direction
       const direction =
@@ -212,7 +213,7 @@ export class TabsList {
     let index = startIndex;
     for (let i = 0; i < length; i++) {
       const tabId = this.tabs.getTabId(tabValues[index]);
-      const el = document.getElementById(tabId);
+      const el = typeof document !== 'undefined' ? document.getElementById(tabId) : null;
       if (!el?.hasAttribute('data-disabled')) return index;
       index = ((index + direction) + length) % length;
     }
@@ -220,6 +221,7 @@ export class TabsList {
   }
 
   private updateIndicator(): void {
+    if (typeof document === 'undefined') return;
     const activeValue = this.tabs.value();
     if (!activeValue) return;
 

package/src/app/lib/components/ui/textarea/textarea.component.ts

@@ -1,31 +1,91 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
  * Textarea component that applies shadcn textarea styles.
+ * Implements ControlValueAccessor for Angular Forms integration.
+ * Applied as an attribute on a native <textarea> element.
  *
  * @example
  * <!-- Basic textarea -->
- * <Textarea placeholder="Enter your message"></Textarea>
- *
- * <!-- With rows -->
- * <Textarea rows="5" placeholder="Description"></Textarea>
+ * <textarea Textarea placeholder="Type your message here."></textarea>
  *
  * <!-- Disabled -->
- * <Textarea disabled placeholder="Disabled"></Textarea>
+ * <textarea Textarea disabled placeholder="Disabled"></textarea>
+ *
+ * <!-- Auto-resize -->
+ * <textarea Textarea [autoResize]="true" placeholder="Grows as you type..."></textarea>
+ *
+ * <!-- With reactive forms -->
+ * <textarea Textarea formControlName="message" placeholder="Enter message"></textarea>
  */
 @Component({
-  selector: 'Textarea',
-  template: `<ng-content />`,
+  selector: 'textarea[Textarea]',
+  template: '',
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'textarea',
+    '[disabled]': 'isDisabled()',
+    '[id]': 'id()',
+    '[name]': 'name()',
+    '[placeholder]': 'placeholder()',
+    '[rows]': 'rows()',
+    '[attr.data-slot]': '"textarea"',
+    '[attr.data-auto-resize]': 'autoResize() || null',
+    '[attr.aria-invalid]': 'ariaInvalid() || null',
+    '[attr.aria-describedby]': 'ariaDescribedBy() || null',
+    '(input)': 'onInput($event)',
+    '(blur)': 'onTouched()',
   },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Textarea),
+      multi: true,
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class Textarea {
+export class Textarea implements ControlValueAccessor, AfterViewInit {
+  /** Placeholder text */
+  readonly placeholder = input<string>('');
+  /** Textarea id attribute */
+  readonly id = input<string>('');
+  /** Textarea name attribute */
+  readonly name = input<string>('');
+  /** Number of visible text rows */
+  readonly rows = input<number>(3);
+  /** Whether the textarea is disabled */
+  readonly disabled = input(false, {
+    transform: (value: boolean | string) => value === '' || value === true || value === 'true',
+  });
+  /** Aria-invalid state for error display */
+  readonly ariaInvalid = input<boolean | undefined>(undefined, { alias: 'aria-invalid' });
+  /** Aria-describedby for accessibility */
+  readonly ariaDescribedBy = input<string | undefined>(undefined, { alias: 'aria-describedby' });
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
+  /** When true, the textarea height adjusts automatically as the user types */
+  readonly autoResize = input<boolean>(false);
+
+  private readonly _elementRef = inject(ElementRef<HTMLTextAreaElement>);
+
+  /** Internal disabled state (set by ControlValueAccessor) */
+  protected readonly isDisabled = signal<boolean>(false);
+
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: string) => void = () => {};
+  protected onTouched: () => void = () => {};
 
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
@@ -33,7 +93,47 @@ export class Textarea {
       'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
       'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
       'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      'resize-none data-[auto-resize=true]:resize-none',
       this.class(),
     ),
   );
+
+  ngAfterViewInit(): void {
+    // Ensure element is available after hydration
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: string): void {
+    const el = this._elementRef.nativeElement;
+    el.value = value ?? '';
+    if (this.autoResize()) {
+      el.style.height = 'auto';
+      el.style.height = el.scrollHeight + 'px';
+    }
+  }
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled.set(isDisabled);
+  }
+
+  /** Focus the textarea element */
+  focus(): void {
+    this._elementRef.nativeElement.focus();
+  }
+
+  /** Handle input events */
+  protected onInput(event: Event): void {
+    const target = event.target as HTMLTextAreaElement;
+    this.onChange(target.value);
+    if (this.autoResize()) {
+      const el = this._elementRef.nativeElement;
+      el.style.height = 'auto';
+      el.style.height = el.scrollHeight + 'px';
+    }
+  }
 }

package/src/app/lib/components/ui/toast/toast.service.ts

@@ -178,7 +178,7 @@ export class ToastService {
     this._toasts.update((toasts) => [...toasts, newToast]);
 
     const duration = toast.duration ?? 4000;
-    if (duration > 0) {
+    if (duration > 0 && typeof window !== 'undefined') {
       setTimeout(() => this.dismiss(id), duration);
     }