@ng-cn/core 1.0.18 → 1.0.20

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/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';

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

@@ -0,0 +1,29 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemActions component - trailing actions (buttons, icons) for an Item.
+ *
+ * @example
+ * <ItemActions>
+ *   <Button variant="outline" size="sm">Open</Button>
+ * </ItemActions>
+ */
+@Component({
+  selector: 'ItemActions',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-actions"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemActions {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex items-center gap-2', this.class()),
+  );
+}

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

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemContent component - main content area of an Item, holding
+ * the title and description.
+ *
+ * @example
+ * <ItemContent>
+ *   <ItemTitle>Title</ItemTitle>
+ *   <ItemDescription>Description</ItemDescription>
+ * </ItemContent>
+ */
+@Component({
+  selector: 'ItemContent',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-content"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemContent {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', this.class()),
+  );
+}

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

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemDescription component - secondary description text for an Item.
+ *
+ * @example
+ * <ItemDescription>A short summary of the item.</ItemDescription>
+ */
+@Component({
+  selector: 'ItemDescription',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-description"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemDescription {
+  /** 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 line-clamp-2 text-sm leading-normal font-normal text-balance',
+      this.class(),
+    ),
+  );
+}

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

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemFooter component - full-width footer row inside an Item.
+ *
+ * @example
+ * <Item>
+ *   <ItemContent>...</ItemContent>
+ *   <ItemFooter>Footer content</ItemFooter>
+ * </Item>
+ */
+@Component({
+  selector: 'ItemFooter',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-footer"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemFooter {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex basis-full items-center justify-between gap-2', this.class()),
+  );
+}

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

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

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

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemHeader component - full-width header row inside an Item.
+ *
+ * @example
+ * <Item>
+ *   <ItemHeader>Header content</ItemHeader>
+ *   <ItemContent>...</ItemContent>
+ * </Item>
+ */
+@Component({
+  selector: 'ItemHeader',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-header"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemHeader {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex basis-full items-center justify-between gap-2', this.class()),
+  );
+}