@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/input-otp/input-otp-context.ts

@@ -1,9 +1,5 @@
 import { InjectionToken, type WritableSignal } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type InputOTPRenderFn = (props: { slots: InputOTPSlotProps[] }) => unknown;
 
 export interface InputOTPSlotProps {
@@ -24,8 +20,4 @@ export interface InputOTPContextValue {
   activeIndex: WritableSignal<number>;
 }
 
-// ============================================================================
-// Injection Tokens
-// ============================================================================
-
 export const INPUT_OTP_CONTEXT = new InjectionToken<InputOTPContextValue>('INPUT_OTP_CONTEXT');

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

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'InputOTPGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"input-otp-group"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -17,7 +18,5 @@ export class InputOTPGroup {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('flex items-center', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('flex items-center', this.class()));
 }

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

@@ -15,17 +15,18 @@ import { LucideAngularModule, Minus } from 'lucide-angular';
     </div>
   `,
   host: {
+    'attr.data-slot': '"input-otp-separator"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InputOTPSeparator {
-  protected readonly icons = { Minus };
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex items-center justify-center', this.class())
+    cn('flex items-center justify-center', this.class()),
   );
+
+  protected readonly icons = { Minus };
 }

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

@@ -19,6 +19,7 @@ import { INPUT_OTP_CONTEXT } from './input-otp-context';
     }
   `,
   host: {
+    'attr.data-slot': '"input-otp-slot"',
     '[class]': 'computedClass()',
     '[attr.data-active]': 'isActive() ? "" : null',
     '[attr.aria-label]': 'ariaLabel()',
@@ -26,29 +27,27 @@ import { INPUT_OTP_CONTEXT } from './input-otp-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InputOTPSlot {
-  private readonly context = inject(INPUT_OTP_CONTEXT, { optional: true });
-
   /** Index of this slot */
   readonly index = input.required<number>();
 
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  private readonly _context = inject(INPUT_OTP_CONTEXT, { optional: true });
+
   /** Character to display - reads from context value at this index */
   protected readonly char = computed(() => {
-    const value = this.context?.value() ?? '';
+    const value = this._context?.value() ?? '';
     return value[this.index()] ?? '';
   });
-
   /** Whether this slot is active - based on context activeIndex */
   protected readonly isActive = computed(() => {
-    const activeIndex = this.context?.activeIndex() ?? -1;
+    const activeIndex = this._context?.activeIndex() ?? -1;
     return activeIndex === this.index();
   });
-
   /** ARIA label for the slot */
   protected readonly ariaLabel = computed(() => {
-    const maxLength = this.context?.maxLength() ?? 6;
+    const maxLength = this._context?.maxLength() ?? 6;
     const position = this.index() + 1;
     const char = this.char();
     if (char) {
@@ -56,12 +55,11 @@ export class InputOTPSlot {
     }
     return `Digit ${position} of ${maxLength}: empty`;
   });
-
   protected readonly computedClass = computed(() =>
     cn(
       'relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
       this.isActive() && 'z-10 ring-1 ring-ring',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -1,23 +1,19 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    forwardRef,
-    input,
-    model,
-    output,
-    signal,
-    viewChild,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { INPUT_OTP_CONTEXT, type InputOTPContextValue } from './input-otp-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the InputOTP component
  */
@@ -39,10 +35,6 @@ export interface InputOTPProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component InputOTP
  *
@@ -138,6 +130,7 @@ export interface InputOTPProps {
     },
   ],
   host: {
+    'attr.data-slot': '"input-otp"',
     class: 'contents',
     '[attr.data-disabled]': 'disabled() ? "" : null',
   },
@@ -146,36 +139,34 @@ export interface InputOTPProps {
 export class InputOTP {
   private readonly hiddenInput = viewChild<ElementRef<HTMLInputElement>>('hiddenInput');
 
+  /** Event handler called when the value changes */
+  readonly onChange = output<string>();
+  /** Event handler called when all slots are filled */
+  readonly onComplete = output<string>();
+
   /** The controlled value of the input */
   readonly value = model<string>('');
 
-  /** Internal value signal for context sharing */
-  readonly internalValue = signal<string>('');
-
+  /** Additional CSS classes */
+  readonly class = input<string>('');
   /** Maximum number of characters */
   readonly maxLength = input<number>(6);
-
   /** Whether the input is disabled */
   readonly disabled = input<boolean>(false);
 
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
-  /** Event handler called when the value changes */
-  readonly onChange = output<string>();
-
-  /** Event handler called when all slots are filled */
-  readonly onComplete = output<string>();
+  protected readonly computedClass = computed(() =>
+    cn('relative flex items-center gap-2 has-[:disabled]:opacity-50', this.class()),
+  );
 
+  /** Internal value signal for context sharing */
+  readonly internalValue = signal<string>('');
   protected readonly isFocused = signal(false);
   readonly activeIndex = signal(-1);
 
-  protected readonly computedClass = computed(() =>
-    cn(
-      'relative flex items-center gap-2 has-[:disabled]:opacity-50',
-      this.class()
-    )
-  );
+  /** Programmatically focus the input */
+  focus(): void {
+    this.hiddenInput()?.nativeElement.focus();
+  }
 
   protected onInput(event: Event): void {
     const target = event.target as HTMLInputElement;
@@ -190,7 +181,6 @@ export class InputOTP {
       this.onComplete.emit(newValue);
     }
   }
-
   protected onKeyDown(event: KeyboardEvent): void {
     if (event.key === 'Backspace') {
       const currentValue = this.value();
@@ -203,7 +193,6 @@ export class InputOTP {
       }
     }
   }
-
   protected onPaste(event: ClipboardEvent): void {
     event.preventDefault();
     const pastedData = event.clipboardData?.getData('text') ?? '';
@@ -222,19 +211,12 @@ export class InputOTP {
       }
     }
   }
-
   protected onFocus(): void {
     this.isFocused.set(true);
     this.activeIndex.set(this.value().length);
   }
-
   protected onBlur(): void {
     this.isFocused.set(false);
     this.activeIndex.set(-1);
   }
-
-  /** Programmatically focus the input */
-  focus(): void {
-    this.hiddenInput()?.nativeElement.focus();
-  }
 }

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

@@ -1,3 +1,2 @@
 export { kbdVariants, type KbdVariants } from './kbd-variants';
 export { Kbd } from './kbd.component';
-

package/src/app/lib/components/ui/kbd/kbd-variants.ts

@@ -17,7 +17,7 @@ export const kbdVariants = cva(
     defaultVariants: {
       size: 'default',
     },
-  }
+  },
 );
 
 export type KbdVariants = VariantProps<typeof kbdVariants>;

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { kbdVariants, type KbdVariants } from './kbd-variants';
 
 /**
@@ -27,6 +22,7 @@ import { kbdVariants, type KbdVariants } from './kbd-variants';
   selector: 'Kbd',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"kbd"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,7 +40,7 @@ export class Kbd {
       kbdVariants({
         size: this.size(),
       }),
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -1,17 +1,13 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    inject,
-    input,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
 } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type LabelProps = {
   /** ID of the form element this label is for */
   for?: string;
@@ -21,10 +17,6 @@ export type LabelProps = {
   class?: string;
 };
 
-// ============================================================================
-// Label Component
-// ============================================================================
-
 /**
  * Label component renders an accessible label associated with form controls.
  * Based on Radix UI Label primitive with shadcn/ui styling.
@@ -76,11 +68,7 @@ export type LabelProps = {
 @Component({
   selector: 'Label',
   template: `
-    <label
-      [attr.for]="forId()"
-      [class]="computedClass()"
-      (mousedown)="onMouseDown($event)"
-    >
+    <label [attr.for]="forId()" [class]="computedClass()" (mousedown)="onMouseDown($event)">
       <ng-content />
     </label>
   `,
@@ -91,20 +79,17 @@ export type LabelProps = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Label {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
   /** ID of the form element this label is for */
   readonly for = input<string>();
-
   /** Alternative binding for 'for' attribute (React-style) */
   readonly htmlFor = input<string>();
-
-  /** Computed ID - prefers 'for' over 'htmlFor' */
-  protected readonly forId = computed(() => this.for() || this.htmlFor());
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
+
+  /** 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(
@@ -112,12 +97,14 @@ export class Label {
       'flex items-center gap-2 text-sm font-medium leading-none',
       // Cursor
       'cursor-pointer select-none',
+      // Margin
+      'mb-2',
       // Disabled states - peer for sibling inputs, group for parent containers
       'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
       'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
       // Custom classes
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
   /**

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

@@ -1,11 +1,11 @@
 // Context and types
 export {
-    MENUBAR_CONTEXT,
-    MENUBAR_MENU_CONTEXT,
-    type MenubarContextValue,
-    type MenubarDirection,
-    type MenubarMenuContextValue,
-    type MenubarNavigationDirection
+  MENUBAR_CONTEXT,
+  MENUBAR_MENU_CONTEXT,
+  type MenubarContextValue,
+  type MenubarDirection,
+  type MenubarMenuContextValue,
+  type MenubarNavigationDirection,
 } from './menubar-context';
 
 // Components and their types
@@ -14,7 +14,11 @@ export { MenubarContent } from './menubar-content.component';
 export { MenubarItem } from './menubar-item.component';
 export { MenubarLabel } from './menubar-label.component';
 export { MenubarMenu } from './menubar-menu.component';
-export { MENUBAR_RADIO_GROUP_CONTEXT, MenubarRadioGroup, type MenubarRadioGroupContext } from './menubar-radio-group.component';
+export {
+  MENUBAR_RADIO_GROUP_CONTEXT,
+  MenubarRadioGroup,
+  type MenubarRadioGroupContext,
+} from './menubar-radio-group.component';
 export { MenubarRadioItem } from './menubar-radio-item.component';
 export { MenubarSeparator } from './menubar-separator.component';
 export { MenubarShortcut } from './menubar-shortcut.component';
@@ -23,4 +27,3 @@ export { MenubarSubTrigger } from './menubar-sub-trigger.component';
 export { MENUBAR_SUB_CONTEXT, MenubarSub, type MenubarSubContext } from './menubar-sub.component';
 export { MenubarTrigger } from './menubar-trigger.component';
 export { Menubar, type MenubarProps } from './menubar.component';
-

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

@@ -1,5 +1,13 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, inject, input, model, output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+} from '@angular/core';
 import { Check, LucideAngularModule } from 'lucide-angular';
 import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
 
@@ -19,6 +27,7 @@ import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"menubar-checkbox-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitemcheckbox"',
     '[attr.aria-checked]': 'checked()',
@@ -30,30 +39,30 @@ import { MENUBAR_CONTEXT, MENUBAR_MENU_CONTEXT } from './menubar-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenubarCheckboxItem {
-  private readonly context = inject(MENUBAR_CONTEXT);
-  private readonly menuContext = inject(MENUBAR_MENU_CONTEXT);
-  protected readonly CheckIcon = Check;
+  /** Checked change event */
+  readonly onCheckedChange = output<boolean>();
 
   /** Whether the checkbox is checked */
   readonly checked = model<boolean>(false);
 
-  /** Whether the item is disabled */
-  readonly disabled = input<boolean>(false);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
+  /** Whether the item is disabled */
+  readonly disabled = input<boolean>(false);
 
-  /** Checked change event */
-  readonly onCheckedChange = output<boolean>();
+  private readonly _context = inject(MENUBAR_CONTEXT);
+  private readonly _menuContext = inject(MENUBAR_MENU_CONTEXT);
 
   protected readonly computedClass = computed(() =>
     cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
+  protected readonly CheckIcon = Check;
+
   protected handleClick(event: Event): void {
     if (this.disabled()) {
       event.preventDefault();