@ng-cn/core 1.0.10 → 1.0.12

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

@@ -0,0 +1,240 @@
+import { cn } from '@/lib/utils';
+import {
+    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
+ */
+export interface InputOTPProps {
+  /** The value of the input. Should be used with onChange. */
+  value?: string;
+  /** Maximum number of characters */
+  maxLength?: number;
+  /** Whether the input is disabled.
+   * @default false */
+  disabled?: boolean;
+  /** Pattern for input validation.
+   * @default "^[0-9]*$" */
+  pattern?: string;
+  /** Input mode for virtual keyboard.
+   * @default "numeric" */
+  inputMode?: 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url';
+  /** Additional CSS classes */
+  class?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * @component InputOTP
+ *
+ * Accessible one-time password component with copy paste functionality.
+ *
+ * @description
+ * InputOTP provides an accessible OTP/verification code input with individual
+ * slots for each character. It handles paste, keyboard navigation, and auto-completion.
+ *
+ * ## Features
+ * - Individual slot rendering
+ * - Copy/paste support
+ * - Keyboard navigation
+ * - Numeric or alphanumeric modes
+ * - Accessible with proper ARIA
+ * - Disabled state support
+ * - Auto-focus next slot
+ *
+ * ## Accessibility
+ * - Uses native input for accessibility
+ * - `autocomplete="one-time-code"` for autofill
+ * - Visual focus indicator
+ * - Works with password managers
+ *
+ * ## Keyboard Navigation
+ * - Type to fill slots
+ * - `Backspace` - Clear and move back
+ * - `ArrowLeft/Right` - Navigate slots (future)
+ * - Paste - Fill from clipboard
+ *
+ * @example Basic usage
+ * ```html
+ * <InputOTP [maxLength]="6" [(value)]="otp" (onComplete)="verify($event)">
+ *   <InputOTPGroup>
+ *     <InputOTPSlot [index]="0" />
+ *     <InputOTPSlot [index]="1" />
+ *     <InputOTPSlot [index]="2" />
+ *   </InputOTPGroup>
+ *   <InputOTPSeparator />
+ *   <InputOTPGroup>
+ *     <InputOTPSlot [index]="3" />
+ *     <InputOTPSlot [index]="4" />
+ *     <InputOTPSlot [index]="5" />
+ *   </InputOTPGroup>
+ * </InputOTP>
+ * ```
+ *
+ * @example Simple 4-digit
+ * ```html
+ * <InputOTP [maxLength]="4" (onComplete)="submitCode($event)">
+ *   <InputOTPGroup>
+ *     @for (i of [0,1,2,3]; track i) {
+ *       <InputOTPSlot [index]="i" />
+ *     }
+ *   </InputOTPGroup>
+ * </InputOTP>
+ * ```
+ */
+@Component({
+  selector: 'InputOTP',
+  imports: [FormsModule],
+  template: `
+    <div [class]="computedClass()" (click)="focus()">
+      <input
+        #hiddenInput
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        autocomplete="one-time-code"
+        [attr.maxlength]="maxLength()"
+        [value]="value()"
+        (input)="onInput($event)"
+        (keydown)="onKeyDown($event)"
+        (paste)="onPaste($event)"
+        (focus)="onFocus()"
+        (blur)="onBlur()"
+        class="absolute inset-0 w-full h-full opacity-0 cursor-text z-10"
+        [disabled]="disabled()"
+        [attr.aria-label]="'OTP input, ' + maxLength() + ' digits'"
+      />
+      <ng-content />
+    </div>
+  `,
+  providers: [
+    {
+      provide: INPUT_OTP_CONTEXT,
+      useFactory: (component: InputOTP): InputOTPContextValue => ({
+        value: component.internalValue,
+        maxLength: signal(6),
+        activeIndex: component.activeIndex,
+      }),
+      deps: [forwardRef(() => InputOTP)],
+    },
+  ],
+  host: {
+    class: 'contents',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputOTP {
+  private readonly hiddenInput = viewChild<ElementRef<HTMLInputElement>>('hiddenInput');
+
+  /** The controlled value of the input */
+  readonly value = model<string>('');
+
+  /** Internal value signal for context sharing */
+  readonly internalValue = signal<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 isFocused = signal(false);
+  readonly activeIndex = signal(-1);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'relative flex items-center gap-2 has-[:disabled]:opacity-50',
+      this.class()
+    )
+  );
+
+  protected onInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const newValue = target.value.replace(/\D/g, '').slice(0, this.maxLength());
+
+    this.value.set(newValue);
+    this.internalValue.set(newValue);
+    this.activeIndex.set(newValue.length);
+    this.onChange.emit(newValue);
+
+    if (newValue.length === this.maxLength()) {
+      this.onComplete.emit(newValue);
+    }
+  }
+
+  protected onKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Backspace') {
+      const currentValue = this.value();
+      if (currentValue.length > 0) {
+        const newValue = currentValue.slice(0, -1);
+        this.value.set(newValue);
+        this.internalValue.set(newValue);
+        this.activeIndex.set(newValue.length);
+        this.onChange.emit(newValue);
+      }
+    }
+  }
+
+  protected onPaste(event: ClipboardEvent): void {
+    event.preventDefault();
+    const pastedData = event.clipboardData?.getData('text') ?? '';
+    // Extract only digits from pasted content
+    const digits = pastedData.replace(/\D/g, '').slice(0, this.maxLength());
+
+    if (digits.length > 0) {
+      this.value.set(digits);
+      this.internalValue.set(digits);
+      this.activeIndex.set(digits.length);
+      this.onChange.emit(digits);
+
+      // Auto-submit if all slots are filled
+      if (digits.length === this.maxLength()) {
+        this.onComplete.emit(digits);
+      }
+    }
+  }
+
+  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

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

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

@@ -0,0 +1,23 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Kbd variants using class-variance-authority
+ * Keyboard key indicator with multiple sizes
+ */
+export const kbdVariants = cva(
+  'pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100',
+  {
+    variants: {
+      size: {
+        sm: 'h-4 px-1 text-[9px]',
+        default: 'h-5 px-1.5 text-[10px]',
+        lg: 'h-6 px-2 text-xs',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+);
+
+export type KbdVariants = VariantProps<typeof kbdVariants>;

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

@@ -0,0 +1,50 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { kbdVariants, type KbdVariants } from './kbd-variants';
+
+/**
+ * Kbd component - displays keyboard keys or shortcuts.
+ *
+ * @example
+ * <!-- Single key -->
+ * <Kbd>K</Kbd>
+ *
+ * <!-- Shortcut combination -->
+ * <span class="flex items-center gap-1">
+ *   <Kbd>⌘</Kbd>
+ *   <Kbd>K</Kbd>
+ * </span>
+ *
+ * <!-- With size -->
+ * <Kbd size="lg">Enter</Kbd>
+ */
+@Component({
+  selector: 'Kbd',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Kbd {
+  /** The size of the kbd element */
+  readonly size = input<KbdVariants['size']>('default');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      kbdVariants({
+        size: this.size(),
+      }),
+      this.class()
+    )
+  );
+}

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

@@ -0,0 +1 @@
+export { Label, type LabelProps } from './label.component';

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

@@ -0,0 +1,139 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    ElementRef,
+    inject,
+    input,
+} from '@angular/core';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type LabelProps = {
+  /** ID of the form element this label is for */
+  for?: string;
+  /** Alternative binding for 'for' attribute (React-style) */
+  htmlFor?: string;
+  /** Additional CSS classes to apply */
+  class?: string;
+};
+
+// ============================================================================
+// Label Component
+// ============================================================================
+
+/**
+ * Label component renders an accessible label associated with form controls.
+ * Based on Radix UI Label primitive with shadcn/ui styling.
+ *
+ * ## Features
+ * - Automatic association with form controls via `for`/`htmlFor`
+ * - Text selection prevention on double-click (matches Radix behavior)
+ * - Disabled state styling when associated control is disabled
+ * - Full accessibility support
+ *
+ * ## Accessibility
+ * - Uses native `<label>` element for built-in accessibility
+ * - Clicking the label focuses the associated form control
+ * - Screen readers announce the label when the control receives focus
+ *
+ * @example
+ * <!-- Basic usage with form control -->
+ * <Label for="email">Email address</Label>
+ * <Input id="email" type="email" />
+ *
+ * @example
+ * <!-- With required indicator -->
+ * <Label for="name">
+ *   Name <span class="text-destructive">*</span>
+ * </Label>
+ *
+ * @example
+ * <!-- With disabled styling (wrap in group) -->
+ * <div class="group" [attr.data-disabled]="isDisabled">
+ *   <Label for="username">Username</Label>
+ *   <Input id="username" [disabled]="isDisabled" />
+ * </div>
+ *
+ * @example
+ * <!-- Within FormField context -->
+ * <FormField name="email">
+ *   <FormItem>
+ *     <FormLabel>Email</FormLabel>
+ *     <FormControl>
+ *       <Input type="email" formControlName="email" />
+ *     </FormControl>
+ *     <FormMessage />
+ *   </FormItem>
+ * </FormField>
+ *
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/label Radix Label}
+ * @see {@link https://ui.shadcn.com/docs/components/label shadcn/ui Label}
+ */
+@Component({
+  selector: 'Label',
+  template: `
+    <label
+      [attr.for]="forId()"
+      [class]="computedClass()"
+      (mousedown)="onMouseDown($event)"
+    >
+      <ng-content />
+    </label>
+  `,
+  host: {
+    'data-slot': 'label',
+    class: 'contents',
+  },
+  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>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      // Base styles
+      'flex items-center gap-2 text-sm font-medium leading-none',
+      // Cursor
+      'cursor-pointer select-none',
+      // 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()
+    )
+  );
+
+  /**
+   * Prevents text selection on double-click (Radix behavior).
+   * This allows double-clicking the label to focus the control without selecting text.
+   */
+  protected onMouseDown(event: MouseEvent): void {
+    // Only prevent default if the target is the label itself (not nested interactive elements)
+    const target = event.target as HTMLElement;
+    if (target.closest('button, input, select, textarea')) {
+      return;
+    }
+
+    // Prevent text selection on double-click
+    if (event.detail > 1) {
+      event.preventDefault();
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+// Context and types
+export {
+    MENUBAR_CONTEXT,
+    MENUBAR_MENU_CONTEXT,
+    type MenubarContextValue,
+    type MenubarDirection,
+    type MenubarMenuContextValue,
+    type MenubarNavigationDirection
+} from './menubar-context';
+
+// Components and their types
+export { MenubarCheckboxItem } from './menubar-checkbox-item.component';
+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 { MenubarRadioItem } from './menubar-radio-item.component';
+export { MenubarSeparator } from './menubar-separator.component';
+export { MenubarShortcut } from './menubar-shortcut.component';
+export { MenubarSubContent } from './menubar-sub-content.component';
+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

@@ -0,0 +1,66 @@
+import { cn } from '@/lib/utils';
+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';
+
+/**
+ * MenubarCheckboxItem component - checkbox menu item.
+ * Matches shadcn/ui React MenubarCheckboxItem exactly.
+ */
+@Component({
+  selector: 'MenubarCheckboxItem',
+  imports: [LucideAngularModule],
+  template: `
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      @if (checked()) {
+        <lucide-icon [img]="CheckIcon" class="h-4 w-4" />
+      }
+    </span>
+    <ng-content />
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.role]': '"menuitemcheckbox"',
+    '[attr.aria-checked]': 'checked()',
+    '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+    '(click)': 'handleClick($event)',
+    '(keydown.enter)': 'handleClick($event)',
+    '(keydown.space)': 'handleClick($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MenubarCheckboxItem {
+  private readonly context = inject(MENUBAR_CONTEXT);
+  private readonly menuContext = inject(MENUBAR_MENU_CONTEXT);
+  protected readonly CheckIcon = Check;
+
+  /** 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>('');
+
+  /** Checked change event */
+  readonly onCheckedChange = output<boolean>();
+
+  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",
+      !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
+      this.class()
+    )
+  );
+
+  protected handleClick(event: Event): void {
+    if (this.disabled()) {
+      event.preventDefault();
+      return;
+    }
+    const newValue = !this.checked();
+    this.checked.set(newValue);
+    this.onCheckedChange.emit(newValue);
+  }
+}