@ng-cn/core 1.0.18 → 1.0.21

package/src/app/lib/components/ui/date-picker/date-picker.component.ts

@@ -3,11 +3,14 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  forwardRef,
   input,
   model,
   output,
+  signal,
   viewChild,
 } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CalendarIcon, LucideAngularModule } from 'lucide-angular';
 import { buttonVariants } from '../button';
 import { Calendar } from '../calendar';
@@ -16,6 +19,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 /**
  * DatePicker component - date selection with calendar popover.
  * Matches shadcn/ui React DatePicker exactly.
+ * Implements ControlValueAccessor for Angular Forms integration.
  */
 @Component({
   selector: 'DatePicker',
@@ -38,6 +42,9 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
           [selected]="date()"
           (onSelect)="onDateSelect($event)"
           [disabled]="disabledDates()"
+          [minDate]="minDate()"
+          [maxDate]="maxDate()"
+          [locale]="locale()"
           class="w-full"
         />
       </PopoverContent>
@@ -47,25 +54,43 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
     'attr.data-slot': '"date-picker"',
     class: 'contents',
   },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DatePicker),
+      multi: true,
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DatePicker {
+export class DatePicker implements ControlValueAccessor {
   private readonly popover = viewChild(Popover);
 
   /** Date select event */
   readonly onSelect = output<Date | undefined>();
 
-  /** Selected date */
+  /** Selected date (model input for two-way binding) */
   readonly date = model<Date | undefined>(undefined);
 
   /** Additional CSS classes */
   readonly class = input<string>('');
   /** Placeholder text */
   readonly placeholder = input<string>('Pick a date');
-  /** Date format */
-  readonly dateFormat = input<string>('PPP');
   /** Disabled dates function */
   readonly disabledDates = input<((date: Date) => boolean) | undefined>(undefined);
+  /** Minimum selectable date — passed to Calendar */
+  readonly minDate = input<Date | undefined>(undefined);
+  /** Maximum selectable date — passed to Calendar */
+  readonly maxDate = input<Date | undefined>(undefined);
+  /** Locale used for date formatting (e.g. 'en-US', 'fr-FR') */
+  readonly locale = input<string>('en-US');
+
+  /** Internal disabled state set by ControlValueAccessor */
+  protected readonly isDisabled = signal<boolean>(false);
+
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: Date | undefined) => void = () => {};
+  private onTouched: () => void = () => {};
 
   protected readonly computedButtonClass = computed(() =>
     cn(
@@ -74,6 +99,7 @@ export class DatePicker {
       this.popover()?.isOpen() &&
         'border-primary/30 ring-primary/20 ring-2 dark:border-white/30 dark:ring-white/20',
       !this.date() && 'text-muted-foreground',
+      this.isDisabled() && 'pointer-events-none cursor-not-allowed opacity-50',
       this.class(),
     ),
   );
@@ -81,7 +107,7 @@ export class DatePicker {
   protected readonly CalendarIconRef = CalendarIcon;
 
   protected formatDate(date: Date): string {
-    return date.toLocaleDateString('en-US', {
+    return date.toLocaleDateString(this.locale(), {
       year: 'numeric',
       month: 'long',
       day: 'numeric',
@@ -90,6 +116,22 @@ export class DatePicker {
   protected onDateSelect(date: Date | undefined): void {
     this.date.set(date);
     this.onSelect.emit(date);
+    this.onChange(date);
+    this.onTouched();
     this.popover()?.setOpen(false);
   }
+
+  // ControlValueAccessor implementation
+  writeValue(value: Date | undefined): void {
+    this.date.set(value ?? undefined);
+  }
+  registerOnChange(fn: (value: Date | undefined) => void): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled.set(isDisabled);
+  }
 }

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

@@ -155,7 +155,7 @@ export class DialogContent {
   }
 
   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/dropdown-menu/dropdown-menu-content.component.ts

@@ -55,29 +55,31 @@ export class DropdownMenuContent implements OnDestroy {
     effect(() => {
       if (this.context.open()) {
         if (this.strategy() === 'fixed') {
-          const trigger = this.context.triggerElement();
-          if (trigger) {
-            const rect = trigger.getBoundingClientRect();
-            const side = this.side();
-            const offset = this.sideOffset();
-            let top = rect.top;
-            let left = rect.left;
+          if (typeof window !== 'undefined') {
+            const trigger = this.context.triggerElement();
+            if (trigger) {
+              const rect = trigger.getBoundingClientRect();
+              const side = this.side();
+              const offset = this.sideOffset();
+              let top = rect.top;
+              let left = rect.left;
 
-            if (side === 'bottom') {
-              top = rect.bottom + offset;
-              left = rect.left;
-            } else if (side === 'top') {
-              top = rect.top - offset;
-              left = rect.left;
-            } else if (side === 'right') {
-              top = rect.top;
-              left = rect.right + offset;
-            } else if (side === 'left') {
-              top = rect.top;
-              left = rect.left - offset;
-            }
+              if (side === 'bottom') {
+                top = rect.bottom + offset;
+                left = rect.left;
+              } else if (side === 'top') {
+                top = rect.top - offset;
+                left = rect.left;
+              } else if (side === 'right') {
+                top = rect.top;
+                left = rect.right + offset;
+              } else if (side === 'left') {
+                top = rect.top;
+                left = rect.left - offset;
+              }
 
-            this.fixedPos.set({ top, left });
+              this.fixedPos.set({ top, left });
+            }
           }
         } else {
           this.fixedPos.set(null);

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

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldContent component - groups a field's title/label and description,
+ * useful in horizontal orientation next to a control.
+ *
+ * @example
+ * <Field orientation="horizontal">
+ *   <FieldContent>
+ *     <FieldTitle>Enable notifications</FieldTitle>
+ *     <FieldDescription>Receive updates about your account.</FieldDescription>
+ *   </FieldContent>
+ *   <Switch />
+ * </Field>
+ */
+@Component({
+  selector: 'FieldContent',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field-content"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldContent {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', this.class()),
+  );
+}

package/src/app/lib/components/ui/field/field-description.component.ts

@@ -0,0 +1,35 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldDescription component - helper text for a Field.
+ *
+ * @example
+ * <Field>
+ *   <FieldLabel htmlFor="email">Email</FieldLabel>
+ *   <input Input id="email" type="email" />
+ *   <FieldDescription>We will never share your email.</FieldDescription>
+ * </Field>
+ */
+@Component({
+  selector: 'FieldDescription',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field-description"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldDescription {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'text-muted-foreground text-sm leading-normal font-normal',
+      'group-has-[[data-orientation=horizontal]]/field:text-balance',
+      this.class(),
+    ),
+  );
+}

package/src/app/lib/components/ui/field/field-error.component.ts

@@ -0,0 +1,48 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldError component - validation error message(s) for a Field.
+ *
+ * @example
+ * <!-- With projected content -->
+ * <FieldError>This field is required.</FieldError>
+ *
+ * <!-- With an errors array -->
+ * <FieldError [errors]="['Too short.', 'Must include a number.']" />
+ */
+@Component({
+  selector: 'FieldError',
+  template: `
+    @if (errors() && errors()!.length > 0) {
+      @if (errors()!.length === 1) {
+        {{ errors()![0] }}
+      } @else {
+        <ul class="ml-4 flex list-disc flex-col gap-1">
+          @for (error of errors(); track error) {
+            <li>{{ error }}</li>
+          }
+        </ul>
+      }
+    }
+    <ng-content />
+  `,
+  host: {
+    'attr.data-slot': '"field-error"',
+    role: 'alert',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldError {
+  /** List of error messages to render. When omitted, projected content is shown. */
+  readonly errors = input<string[] | undefined>(undefined);
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('text-destructive text-sm font-normal', this.class()),
+  );
+}

package/src/app/lib/components/ui/field/field-group.component.ts

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldGroup component - container that stacks multiple Field components.
+ *
+ * @example
+ * <FieldGroup>
+ *   <Field>...</Field>
+ *   <FieldSeparator />
+ *   <Field>...</Field>
+ * </FieldGroup>
+ */
+@Component({
+  selector: 'FieldGroup',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field-group"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldGroup {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3',
+      this.class(),
+    ),
+  );
+}

package/src/app/lib/components/ui/field/field-label.component.ts

@@ -0,0 +1,46 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldLabel component - label for a form control inside a Field.
+ * Renders a native label element for accessibility.
+ *
+ * @example
+ * <FieldLabel htmlFor="username">Username</FieldLabel>
+ * <input Input id="username" />
+ */
+@Component({
+  selector: 'FieldLabel',
+  template: `
+    <label class="contents" [attr.for]="forId()">
+      <ng-content />
+    </label>
+  `,
+  host: {
+    'attr.data-slot': '"field-label"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldLabel {
+  /** ID of the form element this label is for */
+  readonly for = input<string>();
+
+  /** Alternative binding for 'for' attribute (React-style) */
+  readonly htmlFor = input<string>();
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed ID - prefers 'for' over 'htmlFor' */
+  protected readonly forId = computed(() => this.for() || this.htmlFor());
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+      'text-sm font-medium',
+      this.class(),
+    ),
+  );
+}

package/src/app/lib/components/ui/field/field-legend.component.ts

@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+export type FieldLegendVariant = 'legend' | 'label';
+
+/**
+ * FieldLegend component - legend/title for a FieldSet.
+ *
+ * @example
+ * <FieldLegend>Address Information</FieldLegend>
+ *
+ * <!-- Label-sized legend -->
+ * <FieldLegend variant="label">Notifications</FieldLegend>
+ */
+@Component({
+  selector: 'FieldLegend',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field-legend"',
+    '[attr.data-variant]': 'variant()',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldLegend {
+  /** The visual variant of the legend */
+  readonly variant = input<FieldLegendVariant>('legend');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'mb-3 font-medium',
+      'data-[variant=legend]:text-base',
+      'data-[variant=label]:text-sm',
+      this.class(),
+    ),
+  );
+}

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

@@ -0,0 +1,49 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldSeparator component - visual divider between fields,
+ * with optional centered content text (e.g. "Or continue with").
+ *
+ * @example
+ * <!-- Plain separator -->
+ * <FieldSeparator />
+ *
+ * <!-- With centered content -->
+ * <FieldSeparator content="Or continue with" />
+ */
+@Component({
+  selector: 'FieldSeparator',
+  template: `
+    <div class="bg-border absolute inset-0 top-1/2 h-px w-full" aria-hidden="true"></div>
+    @if (content()) {
+      <span
+        class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+        data-slot="field-separator-content"
+      >
+        {{ content() }}
+      </span>
+    }
+  `,
+  host: {
+    'attr.data-slot': '"field-separator"',
+    '[attr.data-content]': 'hasContent()',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldSeparator {
+  /** Optional content text rendered centered on the separator line */
+  readonly content = input<string>('');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Whether content text is present */
+  protected readonly hasContent = computed(() => !!this.content());
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('relative -my-2 h-5 text-sm', this.class()),
+  );
+}

package/src/app/lib/components/ui/field/field-set.component.ts

@@ -0,0 +1,37 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldSet component - groups related fields together with fieldset semantics.
+ *
+ * @example
+ * <FieldSet>
+ *   <FieldLegend>Profile</FieldLegend>
+ *   <FieldGroup>
+ *     <Field>...</Field>
+ *   </FieldGroup>
+ * </FieldSet>
+ */
+@Component({
+  selector: 'FieldSet',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field-set"',
+    role: 'group',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldSet {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex flex-col gap-6',
+      'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+      this.class(),
+    ),
+  );
+}

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

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * FieldTitle component - title text inside FieldContent.
+ *
+ * @example
+ * <FieldContent>
+ *   <FieldTitle>Two-factor authentication</FieldTitle>
+ *   <FieldDescription>Add an extra layer of security.</FieldDescription>
+ * </FieldContent>
+ */
+@Component({
+  selector: 'FieldTitle',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field-title"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldTitle {
+  /** 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/field/field.component.ts

@@ -0,0 +1,66 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Field variants using class-variance-authority.
+ * Matches shadcn/ui React field exactly.
+ */
+export const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {
+  variants: {
+    orientation: {
+      vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+      horizontal: 'flex-row items-center [&>[data-slot=field-label]]:flex-auto',
+      responsive:
+        'flex-col [&>*]:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+});
+
+export type FieldVariants = VariantProps<typeof fieldVariants>;
+export type FieldOrientation = 'vertical' | 'horizontal' | 'responsive';
+
+/**
+ * Field component - wraps a single form field with its label,
+ * control, description and error message.
+ *
+ * @example
+ * <!-- Vertical (default) -->
+ * <Field>
+ *   <FieldLabel htmlFor="email">Email</FieldLabel>
+ *   <input Input id="email" type="email" />
+ *   <FieldDescription>We never share your email.</FieldDescription>
+ * </Field>
+ *
+ * <!-- Horizontal -->
+ * <Field orientation="horizontal">
+ *   <FieldLabel htmlFor="newsletter">Subscribe to newsletter</FieldLabel>
+ *   <Switch id="newsletter" />
+ * </Field>
+ */
+@Component({
+  selector: 'Field',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"field"',
+    role: 'group',
+    '[attr.data-orientation]': 'orientation()',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Field {
+  /** Layout orientation of the field */
+  readonly orientation = input<FieldOrientation>('vertical');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles, variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(fieldVariants({ orientation: this.orientation() }), this.class()),
+  );
+}

package/src/app/lib/components/ui/field/index.ts

@@ -0,0 +1,15 @@
+export { FieldContent } from './field-content.component';
+export { FieldDescription } from './field-description.component';
+export { FieldError } from './field-error.component';
+export { FieldGroup } from './field-group.component';
+export { FieldLabel } from './field-label.component';
+export { FieldLegend, type FieldLegendVariant } from './field-legend.component';
+export { FieldSeparator } from './field-separator.component';
+export { FieldSet } from './field-set.component';
+export { FieldTitle } from './field-title.component';
+export {
+  Field,
+  fieldVariants,
+  type FieldOrientation,
+  type FieldVariants,
+} from './field.component';

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

@@ -30,7 +30,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
  * <Input type="email" formControlName="email" placeholder="Enter email" />
  */
 @Component({
-  selector: 'input[Input]',
+  selector: 'input[Input], Input',
   template: '',
   host: {
     '[type]': 'type()',
@@ -98,9 +98,8 @@ export class Input implements ControlValueAccessor, AfterViewInit {
   /** Classes applied to the input element */
   protected readonly inputClass = computed(() =>
     cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input w-full min-w-0 rounded-xl border px-4 py-1 text-base text-left shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-      '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',
-      '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',
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-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',
       this.class(),
     ),

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

@@ -0,0 +1,21 @@
+export { ItemActions } from './item-actions.component';
+export { ItemContent } from './item-content.component';
+export { ItemDescription } from './item-description.component';
+export { ItemFooter } from './item-footer.component';
+export { ItemGroup } from './item-group.component';
+export { ItemHeader } from './item-header.component';
+export {
+  ItemMedia,
+  itemMediaVariants,
+  type ItemMediaVariant,
+  type ItemMediaVariants,
+} from './item-media.component';
+export { ItemSeparator } from './item-separator.component';
+export { ItemTitle } from './item-title.component';
+export {
+  Item,
+  itemVariants,
+  type ItemSize,
+  type ItemVariant,
+  type ItemVariants,
+} from './item.component';