@loomui-ng/ui 0.0.0-stage → 0.1.1

package/types/loomui-ng-ui-button.d.ts

@@ -0,0 +1,57 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { VariantProps } from "class-variance-authority";
+/**
+ * <button uiButton variant="outline" size="sm">…</button>
+ * <a uiButton href="/">…</a>
+ *
+ * Directive (not a component) so the native element, its semantics and keyboard behaviour are kept.
+ * Consumer classes passed via `class` are merged with tailwind-merge; because the whole class
+ * attribute is owned by this directive, avoid `[class.foo]` bindings on the same element.
+ */
+export declare class UiButton {
+  /** Reflected as the `disabled` attribute so it also works on the custom element. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly variant: import("@angular/core").InputSignal<NonNullable<"default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined>>;
+  readonly size: import("@angular/core").InputSignal<NonNullable<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiButton, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiButton, "button[uiButton], a[uiButton], ui-button", ["uiButton"], {
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+/**
+ * Class strings copied from the live shadcn Button (radix docs page, base-nova style),
+ * see docs/behavior-specs/button.md. Physical pl-/pr- from the source are converted to
+ * logical ps-/pe- for RTL (known deviation).
+ */
+export declare const buttonVariants: (props?: ({
+  variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+export type { ButtonVariants };

package/types/loomui-ng-ui-calendar.d.ts

@@ -0,0 +1,171 @@
+import { Directionality } from "@angular/cdk/bidi";
+import { ControlValueAccessor } from "@angular/forms";
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+export interface DateRange {
+  from?: Date;
+  to?: Date;
+}
+export type CalendarSelection = Date | Date[] | DateRange | undefined;
+interface DayCell {
+  date: Date;
+  key: string;
+  outside: boolean;
+  today: boolean;
+  disabled: boolean;
+  selected: boolean;
+  rangeStart: boolean;
+  rangeMiddle: boolean;
+  rangeEnd: boolean;
+  month: string;
+}
+/**
+ * <div uiCalendar mode="single" [(selected)]="date"></div>
+ * Observed markup (react-day-picker v9): .rdp-root > months > nav + month > caption + table[role=grid] > thead + tbody > tr > td[role=gridcell][data-day]
+ * > button. Keyboard (react-day-picker): arrows ±1 day / ±1 week (mirrored in RTL), PageUp/PageDown ±1 month (Shift: year),
+ * Home/End start/end of week, Enter/Space select. Own implementation with native Date + Intl (no date library).
+ */
+export declare class UiCalendar implements ControlValueAccessor {
+  readonly mode: import("@angular/core").InputSignal<"single" | "multiple" | "range">;
+  readonly selected: import("@angular/core").ModelSignal<CalendarSelection>;
+  readonly month: import("@angular/core").ModelSignal<Date>;
+  readonly numberOfMonths: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly showOutsideDays: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly weekStartsOn: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly locale: import("@angular/core").InputSignal<string>;
+  readonly minDate: import("@angular/core").InputSignal<Date | undefined>;
+  readonly maxDate: import("@angular/core").InputSignal<Date | undefined>;
+  /** Predicate or list of disabled dates. */
+  readonly disabled: import("@angular/core").InputSignal<Date[] | ((d: Date) => boolean) | undefined>;
+  /** Day cell (td) uses fixed 6 weeks? Off by default (react-day-picker default). */
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly dir: Directionality;
+  private readonly el;
+  protected readonly focused: import("@angular/core").WritableSignal<string | null>;
+  private onChange;
+  private onTouched;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected readonly monthsClass = "relative flex flex-col gap-4 md:flex-row";
+  protected readonly navClass = "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1";
+  protected readonly navButtonClass = "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 gap-1.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 size-(--cell-size) p-0 select-none aria-disabled:opacity-50";
+  protected readonly monthClass = "flex w-full flex-col gap-4";
+  protected readonly captionClass = "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)";
+  protected readonly captionLabelClass = "font-medium select-none text-sm";
+  protected readonly gridClass = "w-full border-collapse";
+  protected readonly weekdaysClass = "flex";
+  protected readonly weekdayClass = "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none";
+  protected readonly weekClass = "mt-2 flex w-full";
+  protected readonly dayButtonClass = "group/button shrink-0 items-center justify-center rounded-lg border-transparent bg-clip-padding text-sm whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70";
+  private readonly monthFmt;
+  private readonly dayFmt;
+  protected readonly weekdays: import("@angular/core").Signal<{
+    short: string;
+    long: string;
+  }[]>;
+  private isDisabled;
+  private isSelected;
+  protected readonly months: import("@angular/core").Signal<{
+    key: string;
+    label: string;
+    weeks: DayCell[][];
+  }[]>;
+  protected readonly tabKey: import("@angular/core").Signal<string>;
+  protected readonly prevDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly nextDisabled: import("@angular/core").Signal<boolean>;
+  protected dayLabel(d: Date): string;
+  protected cellClass(d: DayCell): string;
+  protected go(delta: number): void;
+  protected pick(d: DayCell): void;
+  protected onKeydown(e: KeyboardEvent, d: DayCell): void;
+  private focusDate;
+  writeValue(v: CalendarSelection): void;
+  registerOnChange(fn: (v: CalendarSelection) => void): void;
+  registerOnTouched(fn: () => void): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCalendar, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiCalendar, "div[uiCalendar], ui-calendar", never, {
+    "mode": {
+      "alias": "mode";
+      "required": false;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "month": {
+      "alias": "month";
+      "required": false;
+      "isSignal": true;
+    };
+    "numberOfMonths": {
+      "alias": "numberOfMonths";
+      "required": false;
+      "isSignal": true;
+    };
+    "showOutsideDays": {
+      "alias": "showOutsideDays";
+      "required": false;
+      "isSignal": true;
+    };
+    "weekStartsOn": {
+      "alias": "weekStartsOn";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "minDate": {
+      "alias": "minDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxDate": {
+      "alias": "maxDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selected": "selectedChange";
+    "month": "monthChange";
+  }, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_CALENDAR: readonly [typeof UiCalendar];
+export declare const calendarCalendarClass = "w-fit group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent rtl:**:[.rdp-button\\_next>svg]:rotate-180 rtl:**:[.rdp-button\\_previous>svg]:rotate-180";
+export declare const calendarMonthsClass = "relative flex flex-col gap-4 md:flex-row";
+export declare const calendarNavClass = "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1";
+export declare const calendarNavButtonClass = "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 gap-1.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 size-(--cell-size) p-0 select-none aria-disabled:opacity-50";
+export declare const calendarMonthClass = "flex w-full flex-col gap-4";
+export declare const calendarCaptionClass = "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)";
+export declare const calendarCaptionLabelClass = "font-medium select-none text-sm";
+export declare const calendarGridClass = "w-full border-collapse";
+export declare const calendarWeekdaysClass = "flex";
+export declare const calendarWeekdayClass = "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none";
+export declare const calendarWeekClass = "mt-2 flex w-full";
+/** Day cell (td) classes by state, as observed. */
+export declare const calendarDayCellClass: Record<string, string>;
+/** Day button: one string for every state; selection/range/today are driven by data-* attributes inside it. */
+export declare const calendarDayButtonClass = "group/button shrink-0 items-center justify-center rounded-lg border-transparent bg-clip-padding text-sm whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70";

package/types/loomui-ng-ui-card.d.ts

@@ -0,0 +1,123 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+/** <div uiCard size="sm"> … </div> */
+export declare class UiCard {
+  readonly size: import("@angular/core").InputSignal<"default" | "sm">;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCard, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiCard, "[uiCard], ui-card", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiCardHeader {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCardHeader, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiCardHeader, "[uiCardHeader], ui-card-header", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiCardTitle {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCardTitle, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiCardTitle, "[uiCardTitle], ui-card-title", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiCardDescription {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCardDescription, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiCardDescription, "[uiCardDescription], ui-card-description", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+/** Logical placement: observed `col-start-2 … justify-self-end` already mirrors in RTL. */
+export declare class UiCardAction {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCardAction, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiCardAction, "[uiCardAction], ui-card-action", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiCardContent {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCardContent, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiCardContent, "[uiCardContent], ui-card-content", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiCardFooter {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCardFooter, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiCardFooter, "[uiCardFooter], ui-card-footer", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_CARD: readonly [typeof UiCard, typeof UiCardHeader, typeof UiCardTitle, typeof UiCardDescription, typeof UiCardAction, typeof UiCardContent, typeof UiCardFooter];

package/types/loomui-ng-ui-carousel.d.ts

@@ -0,0 +1,140 @@
+import { Directionality } from "@angular/cdk/bidi";
+import { EmblaCarouselType } from "embla-carousel";
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+/**
+ * <div uiCarousel [opts]="{ loop: true }" orientation="horizontal">
+ *   <div uiCarouselContent>
+ *     <div uiCarouselItem>…</div>
+ *   </div>
+ *   <button uiCarouselPrevious></button>
+ *   <button uiCarouselNext></button>
+ * </div>
+ *
+ * Observed (shadcn/Radix variant): root role="region" aria-roledescription="carousel"; items role="group"
+ * aria-roledescription="slide"; prev/next are outline icon-sm buttons positioned outside the viewport, disabled at the ends.
+ * Behavior is Embla's (drag/swipe/inertia); ArrowLeft/ArrowRight on the focused carousel scroll (mirrored in RTL), as in
+ * shadcn's `handleKeyDown`. UNKNOWN: slide-change announcements (shadcn adds no live region).
+ */
+export declare class UiCarousel {
+  protected readonly dir: Directionality;
+  private readonly el;
+  readonly opts: import("@angular/core").InputSignal<Record<string, any>>;
+  readonly plugins: import("@angular/core").InputSignal<any[]>;
+  readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  /** Emits the Embla instance once initialised (for plugins/autoplay control). */
+  readonly ready: import("@angular/core").OutputEmitterRef<EmblaCarouselType>;
+  readonly api: import("@angular/core").WritableSignal<EmblaCarouselType | null>;
+  readonly canPrev: import("@angular/core").WritableSignal<boolean>;
+  readonly canNext: import("@angular/core").WritableSignal<boolean>;
+  readonly selectedIndex: import("@angular/core").WritableSignal<number>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  constructor();
+  private init;
+  scrollPrev(): void;
+  scrollNext(): void;
+  scrollTo(i: number): void;
+  protected onKey(e: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCarousel, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiCarousel, "div[uiCarousel], ui-carousel", ["uiCarousel"], {
+    "opts": {
+      "alias": "opts";
+      "required": false;
+      "isSignal": true;
+    };
+    "plugins": {
+      "alias": "plugins";
+      "required": false;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "ready": "ready";
+  }, never, ["*"], true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+/** Embla viewport (overflow-hidden) wrapping the slide track. */
+export declare class UiCarouselContent {
+  private readonly root;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly trackClass: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCarouselContent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiCarouselContent, "div[uiCarouselContent], ui-carousel-content", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiCarouselItem {
+  private readonly root;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCarouselItem, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiCarouselItem, "div[uiCarouselItem], ui-carousel-item", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiCarouselPrevious {
+  protected readonly root: UiCarousel;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly icon: import("@angular/core").Signal<"" | "rtl:rotate-180">;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCarouselPrevious, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiCarouselPrevious, "button[uiCarouselPrevious], ui-carousel-previous", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiCarouselNext {
+  protected readonly root: UiCarousel;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly icon: import("@angular/core").Signal<"" | "rtl:rotate-180">;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCarouselNext, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiCarouselNext, "button[uiCarouselNext], ui-carousel-next", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_CAROUSEL: readonly [typeof UiCarousel, typeof UiCarouselContent, typeof UiCarouselItem, typeof UiCarouselPrevious, typeof UiCarouselNext];

package/types/loomui-ng-ui-chart.d.ts

@@ -0,0 +1,95 @@
+import * as i0 from "@angular/core";
+export interface ChartSeriesConfig {
+  label: string;
+  /** CSS color, e.g. 'var(--chart-1)'. Exposed as --color-<key> on the container (as shadcn's ChartContainer does). */
+  color: string;
+}
+export type ChartConfig = Record<string, ChartSeriesConfig>;
+/**
+ * shadcn's Chart wraps Recharts. This implementation uses Chart.js and keeps shadcn's contract:
+ * a `config` maps series keys to label + color; the container exposes `--color-<key>` CSS variables; tooltip and legend
+ * follow shadcn styling (card-like tooltip, small legend swatches). Data rows are plain objects.
+ *
+ * <ui-chart type="bar" [data]="rows" xKey="month" [config]="config" class="h-64 w-full" />
+ * For pie/doughnut, rows are categories: xKey = category field, valueKey = number field, config keyed by category value.
+ * Deviation: Recharts-specific components (ChartTooltipContent props, <Bar radius>) have no 1:1 equivalent.
+ */
+export declare class UiChart {
+  private static n;
+  protected readonly chartId: string;
+  private readonly host;
+  private readonly canvas;
+  readonly type: import("@angular/core").InputSignal<keyof import("chart.js").ChartTypeRegistry>;
+  readonly data: import("@angular/core").InputSignal<Record<string, unknown>[]>;
+  readonly xKey: import("@angular/core").InputSignal<string>;
+  readonly valueKey: import("@angular/core").InputSignal<string>;
+  readonly config: import("@angular/core").InputSignal<ChartConfig>;
+  readonly options: import("@angular/core").InputSignal<Record<string, any>>;
+  readonly showLegend: import("@angular/core").InputSignal<boolean>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  private readonly destroyRef;
+  private chart;
+  private ready;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected readonly cssVars: import("@angular/core").Signal<Record<string, string>>;
+  private readonly circular;
+  protected readonly legend: import("@angular/core").Signal<{
+    key: string;
+    label: string;
+    color: string;
+  }[]>;
+  constructor();
+  /** Resolves `var(--x)` to the computed color so Chart.js (canvas) can paint it, honoring .dark. */
+  private resolve;
+  private render;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiChart, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiChart, "ui-chart", never, {
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "data": {
+      "alias": "data";
+      "required": true;
+      "isSignal": true;
+    };
+    "xKey": {
+      "alias": "xKey";
+      "required": true;
+      "isSignal": true;
+    };
+    "valueKey": {
+      "alias": "valueKey";
+      "required": false;
+      "isSignal": true;
+    };
+    "config": {
+      "alias": "config";
+      "required": true;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export declare const UI_CHART: readonly [typeof UiChart];

package/types/loomui-ng-ui-checkbox.d.ts

@@ -0,0 +1,62 @@
+import { ControlValueAccessor } from "@angular/forms";
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+/**
+ * <button uiCheckbox [(checked)]="x"></button>
+ *
+ * Works with: [(checked)] two-way binding, ngModel / reactive forms (ControlValueAccessor),
+ * and signal forms (`checked` model + `disabled`/`invalid` inputs match FormCheckboxControl).
+ */
+export declare class UiCheckbox implements ControlValueAccessor {
+  readonly checked: import("@angular/core").ModelSignal<boolean>;
+  readonly indeterminate: import("@angular/core").ModelSignal<boolean>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  private readonly cvaDisabled;
+  protected readonly isDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly state: import("@angular/core").Signal<"indeterminate" | "checked" | "unchecked">;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  private onChange;
+  protected onTouched: () => void;
+  protected toggle(): void;
+  writeValue(v: boolean | null): void;
+  registerOnChange(fn: (v: boolean) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCheckbox, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiCheckbox, "button[uiCheckbox], ui-checkbox", never, {
+    "checked": {
+      "alias": "checked";
+      "required": false;
+      "isSignal": true;
+    };
+    "indeterminate": {
+      "alias": "indeterminate";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "checked": "checkedChange";
+    "indeterminate": "indeterminateChange";
+  }, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}