@ng-cn/core 1.0.11 → 1.0.14

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

@@ -0,0 +1,241 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
+import { toggleVariants, type ToggleVariants } from '../toggle/toggle-variants';
+import { TOGGLE_GROUP_CONTEXT } from './toggle-group-context';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type ToggleGroupItemProps = {
+  /** The unique value for this toggle item */
+  value: string;
+  /** Override the variant from the group */
+  variant?: ToggleVariants['variant'];
+  /** Override the size from the group */
+  size?: ToggleVariants['size'];
+  /** Whether this toggle item is disabled */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  class?: string;
+};
+
+// ============================================================================
+// ToggleGroupItem Component
+// ============================================================================
+
+/**
+ * ToggleGroupItem component - individual toggle button within a group.
+ * Based on Radix UI ToggleGroup.Item with shadcn/ui styling.
+ * Supports keyboard navigation with arrow keys.
+ *
+ * ## Features
+ * - Can be individually styled with variant/size overrides
+ * - Inherits disabled state from parent group
+ * - Roving tabindex for efficient keyboard navigation
+ * - Full keyboard support
+ *
+ * ## Accessibility
+ * - Uses `aria-pressed` to indicate pressed state
+ * - Part of roving tabindex pattern
+ * - Supports keyboard navigation from parent group
+ *
+ * ## Data Attributes
+ * - `data-state`: "on" | "off"
+ * - `data-disabled`: Present when disabled
+ * - `data-value`: The item's value
+ *
+ * @example
+ * <ToggleGroupItem value="bold" aria-label="Toggle bold">
+ *   <BoldIcon />
+ * </ToggleGroupItem>
+ *
+ * @example
+ * <!-- With custom variant override -->
+ * <ToggleGroupItem value="special" variant="outline">
+ *   Special
+ * </ToggleGroupItem>
+ *
+ * @example
+ * <!-- Individually disabled -->
+ * <ToggleGroupItem value="unavailable" [disabled]="true">
+ *   Unavailable
+ * </ToggleGroupItem>
+ *
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/toggle-group Radix ToggleGroup}
+ * @see {@link https://ui.shadcn.com/docs/components/toggle-group shadcn/ui ToggleGroup}
+ */
+@Component({
+  selector: 'ToggleGroupItem',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    type: 'button',
+    '[attr.aria-pressed]': 'isPressed()',
+    '[attr.data-state]': 'state()',
+    '[attr.data-disabled]': 'isDisabled() ? "" : null',
+    '[attr.data-value]': 'value()',
+    '[attr.disabled]': 'isDisabled() ? "" : null',
+    '[attr.tabindex]': 'tabIndex()',
+    '(click)': 'toggle()',
+    '(keydown)': 'onKeyDown($event)',
+    'data-slot': 'toggle-group-item',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ToggleGroupItem implements OnInit, OnDestroy {
+  private readonly context = inject(TOGGLE_GROUP_CONTEXT, { optional: true });
+
+  /** The value of this toggle item */
+  readonly value = input.required<string>();
+
+  /** Override the variant from the group */
+  readonly variant = input<ToggleVariants['variant']>();
+
+  /** Override the size from the group */
+  readonly size = input<ToggleVariants['size']>();
+
+  /** Whether this toggle item is disabled */
+  readonly disabled = input<boolean>(false);
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Whether this item is pressed */
+  protected readonly isPressed = computed(() => {
+    return this.context?.isPressed(this.value()) ?? false;
+  });
+
+  /** State for data attribute */
+  protected readonly state = computed(() => (this.isPressed() ? 'on' : 'off'));
+
+  /** Whether this item is disabled */
+  protected readonly isDisabled = computed(() => {
+    return this.disabled() || this.context?.disabled() || false;
+  });
+
+  /**
+   * Roving tabindex pattern:
+   * - If roving focus is enabled: first item or focused item is tabbable
+   * - Otherwise: all items are tabbable
+   */
+  protected readonly tabIndex = computed(() => {
+    if (this.isDisabled()) return -1;
+    if (!this.context) return 0;
+
+    const rovingFocus = this.context.rovingFocus();
+    if (!rovingFocus) return 0;
+
+    const itemValues = this.context.itemValues();
+    const focusedValue = this.context.focusedValue();
+
+    // If an item is explicitly focused, only that item is tabbable
+    if (focusedValue !== null) {
+      return focusedValue === this.value() ? 0 : -1;
+    }
+
+    // Otherwise, first item is tabbable
+    if (itemValues.length > 0 && itemValues[0] === this.value()) {
+      return 0;
+    }
+
+    return -1;
+  });
+
+  /** Get the effective variant */
+  protected readonly effectiveVariant = computed(() => {
+    return this.variant() ?? this.context?.variant() ?? 'default';
+  });
+
+  /** Get the effective size */
+  protected readonly effectiveSize = computed(() => {
+    return this.size() ?? this.context?.size() ?? 'default';
+  });
+
+  ngOnInit(): void {
+    // Register this item with the group
+    this.context?.itemValues.update((values) => {
+      if (!values.includes(this.value())) {
+        return [...values, this.value()];
+      }
+      return values;
+    });
+  }
+
+  ngOnDestroy(): void {
+    // Unregister this item from the group
+    this.context?.itemValues.update((values) =>
+      values.filter((v) => v !== this.value())
+    );
+  }
+
+  /** Toggle this item */
+  toggle(): void {
+    if (!this.isDisabled()) {
+      this.context?.toggle(this.value());
+    }
+  }
+
+  /** Handle keyboard navigation */
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.isDisabled() || !this.context) return;
+
+    const orientation = this.context.orientation();
+    const isVertical = orientation === 'vertical';
+    const isHorizontal = orientation === 'horizontal';
+
+    switch (event.key) {
+      case 'ArrowDown':
+        if (isVertical) {
+          event.preventDefault();
+          this.context.focusNext(this.value());
+        }
+        break;
+      case 'ArrowUp':
+        if (isVertical) {
+          event.preventDefault();
+          this.context.focusPrevious(this.value());
+        }
+        break;
+      case 'ArrowRight':
+        if (isHorizontal) {
+          event.preventDefault();
+          this.context.focusNext(this.value());
+        }
+        break;
+      case 'ArrowLeft':
+        if (isHorizontal) {
+          event.preventDefault();
+          this.context.focusPrevious(this.value());
+        }
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.context.focusFirst();
+        break;
+      case 'End':
+        event.preventDefault();
+        this.context.focusLast();
+        break;
+    }
+  }
+
+  /** Computed class combining variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      toggleVariants({
+        variant: this.effectiveVariant(),
+        size: this.effectiveSize(),
+      }),
+      this.class()
+    )
+  );
+}

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

@@ -0,0 +1,288 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    ElementRef,
+    forwardRef,
+    inject,
+    input,
+    model,
+    output,
+    signal,
+} from '@angular/core';
+import type { ToggleVariants } from '../toggle/toggle-variants';
+import {
+    TOGGLE_GROUP_CONTEXT,
+    type ToggleGroupContext,
+    type ToggleGroupOrientation,
+    type ToggleGroupType,
+} from './toggle-group-context';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type ToggleGroupProps = {
+  /** Selection type: single or multiple */
+  type?: ToggleGroupType;
+  /** Current selected value(s) */
+  value?: string | string[];
+  /** Default value for uncontrolled mode */
+  defaultValue?: string | string[];
+  /** Whether the group is disabled */
+  disabled?: boolean;
+  /** Visual variant for all items */
+  variant?: ToggleVariants['variant'];
+  /** Size for all items */
+  size?: ToggleVariants['size'];
+  /** Orientation for keyboard navigation */
+  orientation?: ToggleGroupOrientation;
+  /** Whether to loop focus at boundaries */
+  loop?: boolean;
+  /** Whether focus should follow selection */
+  rovingFocus?: boolean;
+  /** Additional CSS classes */
+  class?: string;
+};
+
+// ============================================================================
+// ToggleGroup Component
+// ============================================================================
+
+/**
+ * ToggleGroup component - a set of toggle buttons where one or more can be pressed.
+ * Based on Radix UI ToggleGroup primitive with shadcn/ui styling.
+ * Implements keyboard navigation per WAI-ARIA toolbar pattern.
+ *
+ * ## Features
+ * - Single selection (only one item pressed at a time)
+ * - Multiple selection (any number of items can be pressed)
+ * - Full keyboard navigation with arrow keys
+ * - Roving tabindex for efficient keyboard navigation
+ * - Configurable variants and sizes for all items
+ * - Horizontal or vertical orientation
+ *
+ * ## Accessibility
+ * - Uses `role="group"` for grouping semantics
+ * - `aria-orientation` indicates layout direction
+ * - Roving tabindex: only one item is in tab order
+ * - Arrow keys navigate between items
+ * - Home/End keys navigate to first/last item
+ *
+ * ## Keyboard Navigation
+ * - **ArrowRight/ArrowDown**: Focus next item
+ * - **ArrowLeft/ArrowUp**: Focus previous item
+ * - **Home**: Focus first item
+ * - **End**: Focus last item
+ * - **Space/Enter**: Toggle focused item
+ *
+ * ## Data Attributes
+ * - `data-orientation`: "horizontal" | "vertical"
+ *
+ * @example
+ * <!-- Single selection -->
+ * <ToggleGroup type="single" [(value)]="alignment">
+ *   <ToggleGroupItem value="left" aria-label="Align left">
+ *     <AlignLeftIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center" aria-label="Align center">
+ *     <AlignCenterIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="right" aria-label="Align right">
+ *     <AlignRightIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * @example
+ * <!-- Multiple selection -->
+ * <ToggleGroup type="multiple" [(value)]="formats">
+ *   <ToggleGroupItem value="bold" aria-label="Toggle bold">
+ *     <BoldIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="italic" aria-label="Toggle italic">
+ *     <ItalicIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="underline" aria-label="Toggle underline">
+ *     <UnderlineIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * @example
+ * <!-- With outline variant -->
+ * <ToggleGroup type="single" variant="outline" [(value)]="view">
+ *   <ToggleGroupItem value="list">List</ToggleGroupItem>
+ *   <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * @example
+ * <!-- Vertical orientation -->
+ * <ToggleGroup type="single" orientation="vertical" [(value)]="size">
+ *   <ToggleGroupItem value="sm">Small</ToggleGroupItem>
+ *   <ToggleGroupItem value="md">Medium</ToggleGroupItem>
+ *   <ToggleGroupItem value="lg">Large</ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/toggle-group Radix ToggleGroup}
+ * @see {@link https://ui.shadcn.com/docs/components/toggle-group shadcn/ui ToggleGroup}
+ */
+@Component({
+  selector: 'ToggleGroup',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    role: 'group',
+    '[attr.aria-orientation]': 'orientation()',
+    '[attr.data-orientation]': 'orientation()',
+    'data-slot': 'toggle-group',
+  },
+  providers: [
+    {
+      provide: TOGGLE_GROUP_CONTEXT,
+      useFactory: (component: ToggleGroup) => component.context,
+      deps: [forwardRef(() => ToggleGroup)],
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ToggleGroup {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  /** The current selected value(s) */
+  readonly value = model<string | string[]>('');
+
+  /** Default value for uncontrolled mode */
+  readonly defaultValue = input<string | string[]>('');
+
+  /** Selection type: single or multiple */
+  readonly type = input<ToggleGroupType>('single');
+
+  /** The visual style variant of the toggle items */
+  readonly variant = input<ToggleVariants['variant']>('default');
+
+  /** The size of the toggle items */
+  readonly size = input<ToggleVariants['size']>('default');
+
+  /** Whether the toggle group is disabled */
+  readonly disabled = input<boolean>(false);
+
+  /** The orientation of the toggle group */
+  readonly orientation = input<ToggleGroupOrientation>('horizontal');
+
+  /** Whether to loop focus at boundaries */
+  readonly loop = input<boolean>(true);
+
+  /** Whether focus should follow selection in single mode */
+  readonly rovingFocus = input<boolean>(true);
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Emitted when value changes */
+  readonly valueChange = output<string | string[]>();
+
+  /** Context for child ToggleGroupItem components */
+  readonly context: ToggleGroupContext = {
+    value: signal(this.value()),
+    type: signal(this.type()),
+    disabled: signal(this.disabled()),
+    variant: signal(this.variant()),
+    size: signal(this.size()),
+    orientation: signal(this.orientation()),
+    loop: signal(this.loop()),
+    rovingFocus: signal(this.rovingFocus()),
+    itemValues: signal<string[]>([]),
+    focusedValue: signal<string | null>(null),
+    toggle: (itemValue: string) => {
+      const currentType = this.type();
+      const currentValue = this.value();
+
+      let newValue: string | string[];
+
+      if (currentType === 'single') {
+        // In single mode, toggle off if same value, otherwise set new value
+        newValue = currentValue === itemValue ? '' : itemValue;
+      } else {
+        // In multiple mode, add or remove from array
+        const currentArray = Array.isArray(currentValue) ? currentValue : [];
+        newValue = currentArray.includes(itemValue)
+          ? currentArray.filter((v) => v !== itemValue)
+          : [...currentArray, itemValue];
+      }
+
+      this.value.set(newValue);
+      this.context.value.set(newValue);
+      this.valueChange.emit(newValue);
+    },
+    isPressed: (itemValue: string) => {
+      const currentValue = this.context.value();
+      if (Array.isArray(currentValue)) {
+        return currentValue.includes(itemValue);
+      }
+      return currentValue === itemValue;
+    },
+    focusNext: (currentValue: string) => this.focusItem(currentValue, 1),
+    focusPrevious: (currentValue: string) => this.focusItem(currentValue, -1),
+    focusFirst: () => this.focusItemByIndex(0),
+    focusLast: () =>
+      this.focusItemByIndex(this.context.itemValues().length - 1),
+  };
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex items-center justify-center gap-1',
+      this.orientation() === 'vertical' && 'flex-col',
+      this.class()
+    )
+  );
+
+  ngOnChanges(): void {
+    this.context.value.set(this.value());
+    this.context.type.set(this.type());
+    this.context.disabled.set(this.disabled());
+    this.context.variant.set(this.variant());
+    this.context.size.set(this.size());
+    this.context.orientation.set(this.orientation());
+    this.context.loop.set(this.loop());
+    this.context.rovingFocus.set(this.rovingFocus());
+  }
+
+  /** Focus a toggle item relative to the current item */
+  private focusItem(currentValue: string, direction: number): void {
+    const values = this.context.itemValues();
+    const currentIndex = values.indexOf(currentValue);
+    if (currentIndex === -1) return;
+
+    const shouldLoop = this.loop();
+    let nextIndex = currentIndex + direction;
+
+    if (shouldLoop) {
+      // Wrap around
+      if (nextIndex < 0) nextIndex = values.length - 1;
+      if (nextIndex >= values.length) nextIndex = 0;
+    } else {
+      // Clamp to boundaries
+      if (nextIndex < 0 || nextIndex >= values.length) return;
+    }
+
+    this.focusItemByIndex(nextIndex);
+  }
+
+  /** Focus a toggle item by index */
+  private focusItemByIndex(index: number): void {
+    const values = this.context.itemValues();
+    if (index < 0 || index >= values.length) return;
+
+    const value = values[index];
+    this.context.focusedValue.set(value);
+
+    const item = this.elementRef.nativeElement.querySelector(
+      `[data-slot="toggle-group-item"][data-value="${value}"]`
+    ) as HTMLElement;
+
+    if (item) {
+      item.focus();
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+// Context and types
+export {
+    TOOLTIP_CONTEXT,
+    type TooltipAlign,
+    type TooltipContextValue,
+    type TooltipSide
+} from './tooltip-context';
+
+// Components and their types
+export { TooltipContent, type TooltipContentProps, type TooltipContentState } from './tooltip-content.component';
+export { TooltipProvider, type TooltipProviderProps } from './tooltip-provider.component';
+export { TooltipTrigger, type TooltipTriggerProps } from './tooltip-trigger.component';
+export { Tooltip, type TooltipProps, type TooltipState } from './tooltip.component';
+

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

@@ -0,0 +1,154 @@
+import { cn, Presence } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { TOOLTIP_CONTEXT, TooltipAlign, TooltipSide } from './tooltip-context';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type TooltipContentState = 'open' | 'closed';
+
+/**
+ * Props for the TooltipContent component
+ */
+export interface TooltipContentProps {
+  /** The preferred side of the trigger to render against.
+   * @default 'top' */
+  side?: TooltipSide;
+  /** The distance in pixels from the trigger.
+   * @default 4 */
+  sideOffset?: number;
+  /** The preferred alignment against the trigger.
+   * @default 'center' */
+  align?: TooltipAlign;
+  /** An offset in pixels from the "start" or "end" alignment options.
+   * @default 0 */
+  alignOffset?: number;
+  /** The padding between the arrow and the edges of the content.
+   * @default 0 */
+  arrowPadding?: number;
+  /** Additional CSS classes */
+  class?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * @component TooltipContent
+ *
+ * The component that pops out when the tooltip is open.
+ *
+ * @description
+ * TooltipContent displays the actual tooltip content. It supports positioning
+ * on different sides and alignments relative to the trigger.
+ *
+ * ## Features
+ * - Configurable side (top, right, bottom, left)
+ * - Configurable alignment (start, center, end)
+ * - Customizable offset from trigger
+ * - Smooth enter/exit animations
+ * - Uses Presence for proper exit animations
+ *
+ * ## Accessibility
+ * - `role="tooltip"` on the element
+ * - Unique ID for aria-describedby relationship with trigger
+ *
+ * @example Basic usage
+ * ```html
+ * <TooltipContent>
+ *   <p>Tooltip content</p>
+ * </TooltipContent>
+ * ```
+ *
+ * @example With side and alignment
+ * ```html
+ * <TooltipContent side="right" align="start">
+ *   <p>Right-aligned tooltip</p>
+ * </TooltipContent>
+ * ```
+ *
+ * @example With offset
+ * ```html
+ * <TooltipContent [sideOffset]="8">
+ *   <p>Tooltip with more spacing</p>
+ * </TooltipContent>
+ * ```
+ *
+ * @data-attributes
+ * - `data-state` - 'open' | 'closed'
+ * - `data-side` - 'top' | 'right' | 'bottom' | 'left'
+ * - `data-align` - 'start' | 'center' | 'end'
+ */
+@Component({
+  selector: 'TooltipContent',
+  imports: [Presence],
+  template: `
+    <Presence [present]="context.open()">
+      <div
+        [class]="computedClass()"
+        [attr.data-state]="state()"
+        [attr.data-side]="side()"
+        [attr.data-align]="align()"
+        role="tooltip"
+        [id]="context.tooltipId"
+      >
+        <ng-content />
+      </div>
+    </Presence>
+  `,
+  host: {
+    class: 'contents',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TooltipContent {
+  protected readonly context = inject(TOOLTIP_CONTEXT);
+
+  /** The preferred side of the trigger to render against */
+  readonly side = input<TooltipSide>('top');
+
+  /** The distance in pixels from the trigger */
+  readonly sideOffset = input<number>(4);
+
+  /** The preferred alignment against the trigger */
+  readonly align = input<TooltipAlign>('center');
+
+  /** An offset in pixels from the alignment options */
+  readonly alignOffset = input<number>(0);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Current state: open or closed */
+  protected readonly state = computed<TooltipContentState>(() =>
+    this.context.open() ? 'open' : 'closed'
+  );
+
+  protected readonly computedClass = computed(() => {
+    const sideClasses = {
+      top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+      bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+      left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+      right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+    };
+
+    return cn(
+      'absolute z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+      'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+      'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      sideClasses[this.side()],
+      this.class()
+    );
+  });
+}