@arclux/arc-ui-angular 1.0.0

package/src/content/Avatar.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-avatar',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-avatar [attr.src]="src" [attr.name]="name" [attr.size]="size"><ng-content /></arc-avatar>`,
+})
+export class Avatar {
+  @Input() src: string = '';
+  @Input() name: string = '';
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
+}

package/src/content/AvatarGroup.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-avatar-group',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-avatar-group [attr.max]="max" [attr.overlap]="overlap"><ng-content /></arc-avatar-group>`,
+})
+export class AvatarGroup {
+  @Input() max: number = Infinity;
+  @Input() overlap: 'sm' | 'lg' = 'md';
+}

package/src/content/Badge.ts

@@ -0,0 +1,14 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-badge',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-badge [attr.variant]="variant"><ng-content /></arc-badge>`,
+})
+export class Badge {
+  @Input() variant: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' = 'default';
+}

package/src/content/Callout.ts

@@ -0,0 +1,14 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-callout',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-callout [attr.variant]="variant"><ng-content /></arc-callout>`,
+})
+export class Callout {
+  @Input() variant: 'info' | 'warning' | 'tip' | 'danger' = 'info';
+}

package/src/content/Card.ts

@@ -0,0 +1,14 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-card',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-card [attr.href]="href"><ng-content /></arc-card>`,
+})
+export class Card {
+  @Input() href: string = '';
+}

package/src/content/Carousel.ts

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-carousel',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-carousel [autoPlay]="autoPlay" [attr.interval]="interval" [loop]="loop" [showDots]="showDots" [showArrows]="showArrows" [attr._current]="_current" [attr._total]="_total" (arc-change)="arcChange.emit($event)"><ng-content /></arc-carousel>`,
+})
+export class Carousel {
+  @Input() autoPlay: boolean = false;
+  @Input() interval: number = 5000;
+  @Input() loop: boolean = true;
+  @Input() showDots: boolean = true;
+  @Input() showArrows: boolean = true;
+  @Input() _current: string = 0;
+  @Input() _total: string = 0;
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/content/CodeBlock.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-code-block',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-code-block [attr.language]="language" [attr.filename]="filename" [attr.code]="code" [attr._copied]="_copied"><ng-content /></arc-code-block>`,
+})
+export class CodeBlock {
+  @Input() language: string = '';
+  @Input() filename: string = '';
+  @Input() code: string = '';
+  @Input() _copied: string = false;
+}

package/src/content/Collapsible.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-collapsible',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-collapsible [open]="open" [attr.heading]="heading" (arc-toggle)="arcToggle.emit($event)"><ng-content /></arc-collapsible>`,
+})
+export class Collapsible {
+  @Input() open: boolean = false;
+  @Input() heading: string = '';
+  @Output() arcToggle = new EventEmitter<CustomEvent>();
+}

package/src/content/ColorSwatch.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-color-swatch',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-color-swatch [attr.color]="color" [attr.label]="label" [attr.size]="size"><ng-content /></arc-color-swatch>`,
+})
+export class ColorSwatch {
+  @Input() color: string = '#4d7ef7';
+  @Input() label: string = '';
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
+}

package/src/content/Column.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-column',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-column [attr.key]="key" [attr.label]="label" [sortable]="sortable" [attr.width]="width"><ng-content /></arc-column>`,
+})
+export class Column {
+  @Input() key: string = '';
+  @Input() label: string = '';
+  @Input() sortable: boolean = false;
+  @Input() width: string = '';
+}

package/src/content/DataTable.ts

@@ -0,0 +1,23 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-data-table',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-data-table [attr.rows]="rows" [sortable]="sortable" [selectable]="selectable" [attr.sortColumn]="sortColumn" [attr.sortDirection]="sortDirection" [attr._columns]="_columns" [attr._selectedRows]="_selectedRows" (arc-sort)="arcSort.emit($event)" (arc-select-all)="arcSelectAll.emit($event)" (arc-row-select)="arcRowSelect.emit($event)"><ng-content /></arc-data-table>`,
+})
+export class DataTable {
+  @Input() rows: unknown[] = [];
+  @Input() sortable: boolean = false;
+  @Input() selectable: boolean = false;
+  @Input() sortColumn: string = '';
+  @Input() sortDirection: string = 'asc';
+  @Input() _columns: string = [];
+  @Input() _selectedRows: string = 'new Set()';
+  @Output() arcSort = new EventEmitter<CustomEvent>();
+  @Output() arcSelectAll = new EventEmitter<CustomEvent>();
+  @Output() arcRowSelect = new EventEmitter<CustomEvent>();
+}

package/src/content/Divider.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-divider',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-divider [attr.variant]="variant" [attr.align]="align" [vertical]="vertical"><ng-content /></arc-divider>`,
+})
+export class Divider {
+  @Input() variant: 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient' = 'subtle';
+  @Input() align?: 'left' | 'right';
+  @Input() vertical: boolean = false;
+}

package/src/content/EmptyState.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-empty-state',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-empty-state [attr.heading]="heading" [attr.description]="description"><ng-content /></arc-empty-state>`,
+})
+export class EmptyState {
+  @Input() heading: string = '';
+  @Input() description: string = '';
+}

package/src/content/FeatureCard.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-feature-card',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-feature-card [attr.icon]="icon" [attr.heading]="heading" [attr.description]="description" [attr.href]="href"><ng-content /></arc-feature-card>`,
+})
+export class FeatureCard {
+  @Input() icon: string = '';
+  @Input() heading: string = '';
+  @Input() description: string = '';
+  @Input() href: string = '';
+}

package/src/content/Highlight.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-highlight',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-highlight [attr.text]="text" [attr.query]="query" [caseSensitive]="caseSensitive"><ng-content /></arc-highlight>`,
+})
+export class Highlight {
+  @Input() text: string = '';
+  @Input() query: string = '';
+  @Input() caseSensitive: boolean = false;
+}

package/src/content/Icon.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-icon',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-icon [attr.name]="name" [attr.size]="size" [attr.label]="label"><ng-content /></arc-icon>`,
+})
+export class Icon {
+  @Input() name: string = '';
+  @Input() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+  @Input() label: string = '';
+}

package/src/content/InfiniteScroll.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-infinite-scroll',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-infinite-scroll [attr.threshold]="threshold" [loading]="loading" [finished]="finished" [disabled]="disabled" (arc-load-more)="arcLoadMore.emit($event)"><ng-content /></arc-infinite-scroll>`,
+})
+export class InfiniteScroll {
+  @Input() threshold: number = 200;
+  @Input() loading: boolean = false;
+  @Input() finished: boolean = false;
+  @Input() disabled: boolean = false;
+  @Output() arcLoadMore = new EventEmitter<CustomEvent>();
+}

package/src/content/Kbd.ts

@@ -0,0 +1,13 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-kbd',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-kbd><ng-content /></arc-kbd>`,
+})
+export class Kbd {
+}

package/src/content/Link.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-link',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-link [attr.href]="href" [attr.variant]="variant" [active]="active" [external]="external"><ng-content /></arc-link>`,
+})
+export class Link {
+  @Input() href: string = '';
+  @Input() variant: 'muted' | 'nav' = 'default';
+  @Input() active: boolean = false;
+  @Input() external: boolean = false;
+}

package/src/content/Markdown.ts

@@ -0,0 +1,14 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-markdown',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-markdown [attr.content]="content"><ng-content /></arc-markdown>`,
+})
+export class Markdown {
+  @Input() content: string = '';
+}

package/src/content/Marquee.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-marquee',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-marquee [attr.speed]="speed" [attr.direction]="direction" [attr.gap]="gap" [attr._animDuration]="_animDuration"><ng-content /></arc-marquee>`,
+})
+export class Marquee {
+  @Input() speed: number = 40;
+  @Input() direction: string = 'left';
+  @Input() gap: string = 'var(--space-xl)';
+  @Input() _animDuration: string = '10s';
+}

package/src/content/Meter.ts

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-meter',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-meter [attr.value]="value" [attr.min]="min" [attr.max]="max" [attr.low]="low" [attr.high]="high" [attr.optimum]="optimum" [attr.label]="label"><ng-content /></arc-meter>`,
+})
+export class Meter {
+  @Input() value: number = 0;
+  @Input() min: number = 0;
+  @Input() max: number = 100;
+  @Input() low: number = 'undefined';
+  @Input() high: number = 'undefined';
+  @Input() optimum: number = 'undefined';
+  @Input() label: string = '';
+}

package/src/content/ScrollArea.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-scroll-area',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-scroll-area [attr.maxHeight]="maxHeight" [attr.orientation]="orientation"><ng-content /></arc-scroll-area>`,
+})
+export class ScrollArea {
+  @Input() maxHeight: string = '';
+  @Input() orientation: 'vertical' | 'horizontal' | 'both' = 'vertical';
+}

package/src/content/Skeleton.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-skeleton',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-skeleton [attr.variant]="variant" [attr.width]="width" [attr.height]="height"><ng-content /></arc-skeleton>`,
+})
+export class Skeleton {
+  @Input() variant: 'text' | 'circle' | 'rect' = 'text';
+  @Input() width: string = '';
+  @Input() height: string = '';
+}

package/src/content/Spinner.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-spinner',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-spinner [attr.size]="size" [attr.variant]="variant"><ng-content /></arc-spinner>`,
+})
+export class Spinner {
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
+  @Input() variant: 'primary' | 'secondary' | 'white' = 'primary';
+}

package/src/content/Stack.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-stack',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-stack [attr.direction]="direction" [attr.gap]="gap" [attr.align]="align" [attr.justify]="justify" [wrap]="wrap"><ng-content /></arc-stack>`,
+})
+export class Stack {
+  @Input() direction: 'horizontal' | 'vertical' = 'vertical';
+  @Input() gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';
+  @Input() align: 'start' | 'center' | 'end' | 'stretch' = 'stretch';
+  @Input() justify: 'start' | 'center' | 'end' | 'between' | 'around' = 'start';
+  @Input() wrap: boolean = false;
+}

package/src/content/Stat.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-stat',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-stat [attr.value]="value" [attr.label]="label"><ng-content /></arc-stat>`,
+})
+export class Stat {
+  @Input() value: string = '';
+  @Input() label: string = '';
+}

package/src/content/Step.ts

@@ -0,0 +1,14 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-step',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-step [attr.label]="label"><ng-content /></arc-step>`,
+})
+export class Step {
+  @Input() label: string = '';
+}

package/src/content/Stepper.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-stepper',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-stepper [attr.active]="active" [attr._steps]="_steps"><ng-content /></arc-stepper>`,
+})
+export class Stepper {
+  @Input() active: number = 0;
+  @Input() _steps: string = [];
+}

package/src/content/Table.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-table',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-table [attr.columns]="columns" [attr.rows]="rows" [striped]="striped" [compact]="compact"><ng-content /></arc-table>`,
+})
+export class Table {
+  @Input() columns: unknown[] = [];
+  @Input() rows: unknown[] = [];
+  @Input() striped: boolean = false;
+  @Input() compact: boolean = false;
+}

package/src/content/Tag.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-tag',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-tag [attr.variant]="variant" [removable]="removable" [disabled]="disabled" (arc-remove)="arcRemove.emit($event)"><ng-content /></arc-tag>`,
+})
+export class Tag {
+  @Input() variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' = 'default';
+  @Input() removable: boolean = false;
+  @Input() disabled: boolean = false;
+  @Output() arcRemove = new EventEmitter<CustomEvent>();
+}

package/src/content/Text.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-text',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-text [attr.variant]="variant" [attr.as]="as"><ng-content /></arc-text>`,
+})
+export class Text {
+  @Input() variant: 'accent' | 'code' = 'body';
+  @Input() as: string = 'p';
+}

package/src/content/Timeline.ts

@@ -0,0 +1,14 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-timeline',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-timeline [attr._items]="_items"><ng-content /></arc-timeline>`,
+})
+export class Timeline {
+  @Input() _items: string = [];
+}

package/src/content/TimelineItem.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-timeline-item',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-timeline-item [attr.heading]="heading" [attr.date]="date"><ng-content /></arc-timeline-item>`,
+})
+export class TimelineItem {
+  @Input() heading: string = '';
+  @Input() date: string = '';
+}

package/src/content/Truncate.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-truncate',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-truncate [attr.lines]="lines" [expanded]="expanded" (arc-toggle)="arcToggle.emit($event)"><ng-content /></arc-truncate>`,
+})
+export class Truncate {
+  @Input() lines: number = 3;
+  @Input() expanded: boolean = false;
+  @Output() arcToggle = new EventEmitter<CustomEvent>();
+}

package/src/content/ValueCard.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-value-card',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-value-card [attr.icon]="icon" [attr.heading]="heading" [attr.description]="description"><ng-content /></arc-value-card>`,
+})
+export class ValueCard {
+  @Input() icon: string = '';
+  @Input() heading: string = '';
+  @Input() description: string = '';
+}