ngx-com 0.0.1 → 0.0.4

package/types/ngx-com-components-card.d.ts

@@ -0,0 +1,373 @@
+import * as i0 from '@angular/core';
+import { InputSignal, InputSignalWithTransform, Signal } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+type CardVariant = 'elevated' | 'outlined' | 'filled' | 'ghost';
+type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+type CardRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type CardAlign = 'start' | 'end' | 'center' | 'between';
+type CardActionsDirection = 'row' | 'column';
+type CardMediaPosition = 'top' | 'bottom' | 'inset';
+type CardAccentColor = 'primary' | 'accent' | 'warn' | 'success' | 'muted';
+type CardAccentPosition = 'top' | 'left';
+type CardBadgeColor = 'primary' | 'accent' | 'warn' | 'success' | 'muted';
+type CardBadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * CVA variants for the card container.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-muted`, `--color-muted-hover`,
+ *         `--color-foreground`, `--color-border`, `--color-primary`, `--color-ring`
+ */
+declare const cardVariants: (props?: {
+    variant?: CardVariant;
+    padding?: CardPadding;
+    radius?: CardRadius;
+    interactive?: boolean;
+}) => string;
+type CardVariants = VariantProps<typeof cardVariants>;
+/**
+ * CVA variants for card footer alignment.
+ */
+declare const cardFooterVariants: (props?: {
+    align?: CardAlign;
+}) => string;
+type CardFooterVariants = VariantProps<typeof cardFooterVariants>;
+/**
+ * CVA variants for card actions.
+ */
+declare const cardActionsVariants: (props?: {
+    align?: CardAlign;
+    direction?: CardActionsDirection;
+}) => string;
+type CardActionsVariants = VariantProps<typeof cardActionsVariants>;
+/**
+ * CVA variants for card media positioning.
+ */
+declare const cardMediaVariants: (props?: {
+    position?: CardMediaPosition;
+}) => string;
+type CardMediaVariants = VariantProps<typeof cardMediaVariants>;
+/**
+ * CVA variants for card accent strip.
+ *
+ * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`, `--color-muted`
+ */
+declare const cardAccentVariants: (props?: {
+    color?: CardAccentColor;
+    position?: CardAccentPosition;
+}) => string;
+type CardAccentVariants = VariantProps<typeof cardAccentVariants>;
+/**
+ * CVA variants for card badge overlay.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-accent`, `--color-accent-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-success`, `--color-success-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`, `--radius-card`, `--radius-media`, `--radius-pill`
+ */
+declare const cardBadgeVariants: (props?: {
+    position?: CardBadgePosition;
+    color?: CardBadgeColor;
+}) => string;
+type CardBadgeVariants = VariantProps<typeof cardBadgeVariants>;
+
+/**
+ * Card container component - a styled surface for content.
+ *
+ * The card is a pure container with no imposed structure.
+ * Use card directives (comCardHeader, comCardContent, etc.) to compose layouts.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-muted`, `--color-muted-hover`,
+ *         `--color-foreground`, `--color-border`, `--color-primary`, `--color-ring`
+ *
+ * @example Basic card
+ * ```html
+ * <com-card>
+ *   <div comCardContent>Simple content</div>
+ * </com-card>
+ * ```
+ *
+ * @example Interactive card
+ * ```html
+ * <com-card [interactive]="true" (click)="onCardClick()">
+ *   <div comCardContent>Clickable card</div>
+ * </com-card>
+ * ```
+ *
+ * @example Outlined variant with custom padding
+ * ```html
+ * <com-card variant="outlined" padding="md">
+ *   <p>Outlined card with medium padding</p>
+ * </com-card>
+ * ```
+ */
+declare class ComCard {
+    /** Visual treatment of the card surface. */
+    readonly variant: InputSignal<CardVariant>;
+    /** Inner spacing. Default 'none' - sub-parts manage their own padding. */
+    readonly padding: InputSignal<CardPadding>;
+    /** Border radius. */
+    readonly radius: InputSignal<CardRadius>;
+    /** When true, adds hover/active states and cursor-pointer. */
+    readonly interactive: InputSignalWithTransform<boolean, unknown>;
+    /** Consumer CSS classes - merged with variant classes. */
+    readonly userClass: InputSignal<string>;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCard, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComCard, "com-card", ["comCard"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Card header directive - top section for title and actions.
+ *
+ * Uses justify-between so it naturally supports a title group on the left
+ * and an action element (icon button, menu trigger) on the right.
+ *
+ * @example Header with title
+ * ```html
+ * <div comCardHeader>
+ *   <h3 comCardTitle>Card Title</h3>
+ * </div>
+ * ```
+ *
+ * @example Header with title and action
+ * ```html
+ * <div comCardHeader>
+ *   <div>
+ *     <h3 comCardTitle>Title</h3>
+ *     <p comCardSubtitle>Subtitle</p>
+ *   </div>
+ *   <button comButton variant="ghost" size="icon" aria-label="More">...</button>
+ * </div>
+ * ```
+ *
+ * @tokens None - uses only layout utilities
+ */
+declare class ComCardHeader {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardHeader, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardHeader, "[comCardHeader]", ["comCardHeader"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Card title directive - styled heading text.
+ *
+ * Apply to any heading element. Consumer picks the semantic level (h2, h3, etc.).
+ *
+ * @example
+ * ```html
+ * <h3 comCardTitle>Project Alpha</h3>
+ * ```
+ *
+ * @tokens `--color-foreground`
+ */
+declare class ComCardTitle {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardTitle, "[comCardTitle]", ["comCardTitle"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Card subtitle directive - secondary text styling.
+ *
+ * @example
+ * ```html
+ * <p comCardSubtitle>Last updated 2 hours ago</p>
+ * ```
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare class ComCardSubtitle {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardSubtitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardSubtitle, "[comCardSubtitle]", ["comCardSubtitle"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Card content directive - main body area with consistent padding.
+ *
+ * @example
+ * ```html
+ * <div comCardContent>
+ *   <p>Card body content goes here.</p>
+ * </div>
+ * ```
+ *
+ * @tokens None - uses only layout utilities
+ */
+declare class ComCardContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardContent, "[comCardContent]", ["comCardContent"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Card footer directive - bottom section for metadata or secondary actions.
+ *
+ * @example Footer with alignment
+ * ```html
+ * <div comCardFooter align="between">
+ *   <span class="text-sm text-muted-foreground">Updated 3m ago</span>
+ *   <a comButton variant="link" size="sm">View details</a>
+ * </div>
+ * ```
+ *
+ * @tokens None - uses only layout utilities
+ */
+declare class ComCardFooter {
+    /** Horizontal alignment of footer content. */
+    readonly align: InputSignal<CardAlign>;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardFooter, "[comCardFooter]", ["comCardFooter"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Card actions directive - dedicated button row for primary card actions.
+ *
+ * Separate from footer because actions and footer metadata serve different purposes.
+ *
+ * @example Actions with alignment
+ * ```html
+ * <div comCardActions>
+ *   <button comButton variant="ghost" size="sm">Cancel</button>
+ *   <button comButton size="sm">Confirm</button>
+ * </div>
+ * ```
+ *
+ * @example Stacked column layout
+ * ```html
+ * <div comCardActions direction="column" align="start">
+ *   <button comButton fullWidth>Primary Action</button>
+ *   <button comButton variant="outline" fullWidth>Secondary</button>
+ * </div>
+ * ```
+ *
+ * @tokens None - uses only layout utilities
+ */
+declare class ComCardActions {
+    /** Horizontal alignment of actions. */
+    readonly align: InputSignal<CardAlign>;
+    /** Layout direction - row or column. */
+    readonly direction: InputSignal<CardActionsDirection>;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardActions, "[comCardActions]", ["comCardActions"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Card media directive - image/video slot with aspect ratio handling.
+ *
+ * Apply to <img>, <video>, <picture>, or a wrapper <div>.
+ *
+ * @example Top media (bleeds to edge)
+ * ```html
+ * <img comCardMedia src="/hero.jpg" alt="Hero image" />
+ * ```
+ *
+ * @example Inset media (padded with rounded corners)
+ * ```html
+ * <img comCardMedia position="inset" src="/preview.jpg" alt="Preview" />
+ * ```
+ *
+ * @tokens None - uses only layout utilities
+ */
+declare class ComCardMedia {
+    /** Media positioning within the card. */
+    readonly position: InputSignal<CardMediaPosition>;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardMedia, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardMedia, "[comCardMedia]", ["comCardMedia"], { "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Card divider directive - horizontal rule between card sections.
+ *
+ * @example Standard divider (with side margins)
+ * ```html
+ * <hr comCardDivider />
+ * ```
+ *
+ * @example Full-width divider (edge to edge)
+ * ```html
+ * <hr comCardDivider [inset]="true" />
+ * ```
+ *
+ * @tokens `--color-border`
+ */
+declare class ComCardDivider {
+    /** When true, divider spans full card width (no horizontal margin). */
+    readonly inset: InputSignalWithTransform<boolean, unknown>;
+    /** Consumer CSS classes. */
+    readonly userClass: InputSignal<string>;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardDivider, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardDivider, "[comCardDivider]", ["comCardDivider"], { "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Card accent directive - colored strip for status or category indication.
+ *
+ * Place as the first child of the card for top accent, or use position="left"
+ * for a left-edge strip (requires adding left padding to content).
+ *
+ * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`, `--color-muted`
+ *
+ * @example Top accent strip
+ * ```html
+ * <com-card>
+ *   <div comCardAccent color="warn"></div>
+ *   <div comCardContent>Warning content</div>
+ * </com-card>
+ * ```
+ *
+ * @example Left accent strip
+ * ```html
+ * <com-card>
+ *   <div comCardAccent color="success" position="left"></div>
+ *   <div comCardContent class="pl-5">Content with left padding</div>
+ * </com-card>
+ * ```
+ */
+declare class ComCardAccent {
+    /** Accent color. */
+    readonly color: InputSignal<CardAccentColor>;
+    /** Position of the accent strip. */
+    readonly position: InputSignal<CardAccentPosition>;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardAccent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardAccent, "[comCardAccent]", ["comCardAccent"], { "color": { "alias": "color"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Card badge directive - positioned overlay for labels, tags, or status indicators.
+ *
+ * Floats over the card content (e.g., "NEW", "SALE", "Featured").
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-accent`, `--color-accent-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-success`, `--color-success-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`, `--radius-pill`
+ *
+ * @example Badge in top-right corner
+ * ```html
+ * <com-card>
+ *   <span comCardBadge>NEW</span>
+ *   <img comCardMedia src="/product.jpg" alt="Product" />
+ * </com-card>
+ * ```
+ *
+ * @example Badge with custom position and color
+ * ```html
+ * <com-card>
+ *   <span comCardBadge position="top-left" color="warn">SALE</span>
+ *   <div comCardContent>Product details</div>
+ * </com-card>
+ * ```
+ */
+declare class ComCardBadge {
+    /** Badge position within the card. */
+    readonly position: InputSignal<CardBadgePosition>;
+    /** Badge color. */
+    readonly color: InputSignal<CardBadgeColor>;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardBadge, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardBadge, "[comCardBadge]", ["comCardBadge"], { "position": { "alias": "position"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ComCard, ComCardAccent, ComCardActions, ComCardBadge, ComCardContent, ComCardDivider, ComCardFooter, ComCardHeader, ComCardMedia, ComCardSubtitle, ComCardTitle, cardAccentVariants, cardActionsVariants, cardBadgeVariants, cardFooterVariants, cardMediaVariants, cardVariants };
+export type { CardAccentColor, CardAccentPosition, CardAccentVariants, CardActionsDirection, CardActionsVariants, CardAlign, CardBadgeColor, CardBadgePosition, CardBadgeVariants, CardFooterVariants, CardMediaPosition, CardMediaVariants, CardPadding, CardRadius, CardVariant, CardVariants };

package/types/ngx-com-components-checkbox.d.ts

@@ -0,0 +1,116 @@
+import * as i0 from '@angular/core';
+import { Signal, ElementRef, InputSignal, ModelSignal, OutputEmitterRef } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+
+/** Checkbox size variants. */
+type CheckboxSize = 'sm' | 'md' | 'lg';
+/** Checkbox color variants. */
+type CheckboxVariant = 'primary' | 'accent' | 'warn';
+/**
+ * CVA variants for the visual checkbox box.
+ *
+ * Uses `peer` selectors to style based on native input state:
+ * - `peer-checked:` for checked state
+ * - `peer-indeterminate:` for indeterminate state
+ * - `peer-focus-visible:` for keyboard focus
+ * - `peer-disabled:` for disabled state
+ *
+ * @tokens `--color-border`, `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,
+ *         `--color-disabled`, `--color-disabled-foreground`, `--color-ring`, `--radius-interactive-sm`
+ */
+declare const checkboxBoxVariants: (props?: {
+    variant?: CheckboxVariant;
+    size?: CheckboxSize;
+}) => string;
+/** Size-based classes for the checkmark SVG icon. */
+declare const CHECKBOX_ICON_SIZES: Record<CheckboxSize, string>;
+/** Size-based classes for the label content. */
+declare const CHECKBOX_LABEL_SIZES: Record<CheckboxSize, string>;
+
+/** Event emitted when checkbox state changes. */
+interface CheckboxChange {
+    checked: boolean;
+    source: ComCheckbox;
+}
+/**
+ * Production-grade checkbox component with full accessibility support.
+ *
+ * Uses a native `<input type="checkbox">` for built-in keyboard handling,
+ * `:checked` and `:indeterminate` pseudo-classes, and screen reader support.
+ *
+ * Implements `ControlValueAccessor` for Reactive Forms integration via
+ * `NgControl` injection pattern (no `NG_VALUE_ACCESSOR` provider).
+ *
+ * @tokens `--color-border`, `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,
+ *         `--color-disabled`, `--color-disabled-foreground`, `--color-ring`
+ *
+ * @example Basic usage
+ * ```html
+ * <com-checkbox [(checked)]="isActive">Enable feature</com-checkbox>
+ * ```
+ *
+ * @example With reactive forms
+ * ```html
+ * <com-checkbox formControlName="acceptTerms">
+ *   I accept the <a href="/terms">terms and conditions</a>
+ * </com-checkbox>
+ * ```
+ *
+ * @example Indeterminate state
+ * ```html
+ * <com-checkbox [(indeterminate)]="hasPartialSelection" (changed)="onSelectAll($event)">
+ *   Select all
+ * </com-checkbox>
+ * ```
+ *
+ * @example Variants and sizes
+ * ```html
+ * <com-checkbox variant="accent" size="lg">Large accent checkbox</com-checkbox>
+ * <com-checkbox variant="warn" size="sm">Small warning checkbox</com-checkbox>
+ * ```
+ */
+declare class ComCheckbox implements ControlValueAccessor {
+    /** Optional NgControl for reactive forms integration. */
+    readonly ngControl: NgControl | null;
+    /** Reference to the native input element. */
+    readonly inputRef: Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** Unique ID for this checkbox instance. */
+    private readonly uniqueId;
+    readonly size: InputSignal<CheckboxSize>;
+    readonly variant: InputSignal<CheckboxVariant>;
+    readonly checked: ModelSignal<boolean>;
+    readonly indeterminate: ModelSignal<boolean>;
+    readonly disabled: ModelSignal<boolean>;
+    readonly value: InputSignal<string | undefined>;
+    readonly name: InputSignal<string | undefined>;
+    readonly id: InputSignal<string | undefined>;
+    readonly ariaLabel: InputSignal<string | null>;
+    readonly ariaLabelledby: InputSignal<string | null>;
+    readonly ariaDescribedby: InputSignal<string | null>;
+    readonly changed: OutputEmitterRef<CheckboxChange>;
+    readonly inputId: Signal<string>;
+    protected readonly boxClasses: Signal<string>;
+    protected readonly iconSizeClass: Signal<string>;
+    protected readonly labelSizeClass: Signal<string>;
+    private onChange;
+    protected onTouched: () => void;
+    constructor();
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onInputChange(event: Event): void;
+    /** Focuses this checkbox's input element. */
+    focus(): void;
+    /** Toggles the checkbox state programmatically. */
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCheckbox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComCheckbox, "com-checkbox", ["comCheckbox"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "indeterminate": "indeterminateChange"; "disabled": "disabledChange"; "changed": "changed"; }, never, ["*"], true, never>;
+}
+
+export { CHECKBOX_ICON_SIZES, CHECKBOX_LABEL_SIZES, ComCheckbox, checkboxBoxVariants };
+export type { CheckboxChange, CheckboxSize, CheckboxVariant };