@arclux/arc-ui-angular 1.0.0

package/src/reactive/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/reactive/DatePicker.ts

@@ -0,0 +1,24 @@
+// 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-date-picker',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-date-picker [attr.value]="value" [attr.min]="min" [attr.max]="max" [attr.placeholder]="placeholder" [disabled]="disabled" [attr.label]="label" [attr._open]="_open" [attr._viewMonth]="_viewMonth" [attr._viewYear]="_viewYear" [attr._mode]="_mode" (arc-change)="arcChange.emit($event)"><ng-content /></arc-date-picker>`,
+})
+export class DatePicker {
+  @Input() value: string = '';
+  @Input() min: string = '';
+  @Input() max: string = '';
+  @Input() placeholder: string = 'Select date';
+  @Input() disabled: boolean = false;
+  @Input() label: string = '';
+  @Input() _open: string = false;
+  @Input() _viewMonth: string = 'today.getMonth()';
+  @Input() _viewYear: string = 'today.getFullYear()';
+  @Input() _mode: string = 'days';
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Dialog.ts

@@ -0,0 +1,19 @@
+// 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-dialog',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-dialog [open]="open" [attr.heading]="heading" [attr.message]="message" [attr.variant]="variant" (arc-confirm)="arcConfirm.emit($event)" (arc-cancel)="arcCancel.emit($event)"><ng-content /></arc-dialog>`,
+})
+export class Dialog {
+  @Input() open: boolean = false;
+  @Input() heading: string = '';
+  @Input() message: string = '';
+  @Input() variant: 'danger' = 'default';
+  @Output() arcConfirm = new EventEmitter<CustomEvent>();
+  @Output() arcCancel = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Drawer.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-drawer',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-drawer [open]="open" [attr.position]="position" [attr.heading]="heading" (arc-close)="arcClose.emit($event)"><ng-content /></arc-drawer>`,
+})
+export class Drawer {
+  @Input() open: boolean = false;
+  @Input() position: 'left' | 'right' = 'left';
+  @Input() heading: string = '';
+  @Output() arcClose = new EventEmitter<CustomEvent>();
+}

package/src/reactive/DropdownMenu.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-dropdown-menu',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-dropdown-menu [open]="open" [attr._focusedIndex]="_focusedIndex" [attr._children]="_children" (arc-close)="arcClose.emit($event)" (arc-select)="arcSelect.emit($event)"><ng-content /></arc-dropdown-menu>`,
+})
+export class DropdownMenu {
+  @Input() open: boolean = false;
+  @Input() _focusedIndex: string = -1;
+  @Input() _children: string = [];
+  @Output() arcClose = new EventEmitter<CustomEvent>();
+  @Output() arcSelect = new EventEmitter<CustomEvent>();
+}

package/src/reactive/FileUpload.ts

@@ -0,0 +1,22 @@
+// 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-file-upload',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-file-upload [attr.accept]="accept" [multiple]="multiple" [attr.maxSize]="maxSize" [disabled]="disabled" [attr._files]="_files" [attr._dragOver]="_dragOver" [attr._error]="_error" (arc-change)="arcChange.emit($event)" (arc-remove)="arcRemove.emit($event)"><ng-content /></arc-file-upload>`,
+})
+export class FileUpload {
+  @Input() accept: string = '';
+  @Input() multiple: boolean = false;
+  @Input() maxSize: number = 0;
+  @Input() disabled: boolean = false;
+  @Input() _files: string = [];
+  @Input() _dragOver: string = false;
+  @Input() _error: string = '';
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+  @Output() arcRemove = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Form.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-form',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-form [attr.action]="action" [attr.method]="method" [novalidate]="novalidate" (arc-invalid)="arcInvalid.emit($event)" (arc-submit)="arcSubmit.emit($event)"><ng-content /></arc-form>`,
+})
+export class Form {
+  @Input() action: string = '';
+  @Input() method: string = '';
+  @Input() novalidate: boolean = false;
+  @Output() arcInvalid = new EventEmitter<CustomEvent>();
+  @Output() arcSubmit = new EventEmitter<CustomEvent>();
+}

package/src/reactive/HoverCard.ts

@@ -0,0 +1,19 @@
+// 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-hover-card',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-hover-card [attr.position]="position" [attr.openDelay]="openDelay" [attr.closeDelay]="closeDelay" [attr._visible]="_visible" (arc-open)="arcOpen.emit($event)" (arc-close)="arcClose.emit($event)"><ng-content /></arc-hover-card>`,
+})
+export class HoverCard {
+  @Input() position: 'bottom' | 'top' | 'left' | 'right' = 'bottom';
+  @Input() openDelay: number = 400;
+  @Input() closeDelay: number = 300;
+  @Input() _visible: string = false;
+  @Output() arcOpen = new EventEmitter<CustomEvent>();
+  @Output() arcClose = new EventEmitter<CustomEvent>();
+}

package/src/reactive/IconButton.ts

@@ -0,0 +1,21 @@
+// 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-button',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-icon-button [attr.name]="name" [attr.text]="text" [attr.variant]="variant" [attr.size]="size" [attr.label]="label" [attr.href]="href" [disabled]="disabled" [attr.type]="type"><ng-content /></arc-icon-button>`,
+})
+export class IconButton {
+  @Input() name: string = '';
+  @Input() text: string = '';
+  @Input() variant: 'ghost' | 'secondary' | 'primary' = 'ghost';
+  @Input() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+  @Input() label: string = '';
+  @Input() href: string = '';
+  @Input() disabled: boolean = false;
+  @Input() type: string = 'button';
+}

package/src/reactive/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/reactive/Input.ts

@@ -0,0 +1,24 @@
+// 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-input',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-input [attr.type]="type" [attr.name]="name" [attr.label]="label" [attr.placeholder]="placeholder" [attr.value]="value" [disabled]="disabled" [required]="required" [multiline]="multiline" [attr.rows]="rows" (arc-input)="arcInput.emit($event)" (arc-change)="arcChange.emit($event)"><ng-content /></arc-input>`,
+})
+export class Input {
+  @Input() type: string = 'text';
+  @Input() name: string = '';
+  @Input() label: string = '';
+  @Input() placeholder: string = '';
+  @Input() value: string = '';
+  @Input() disabled: boolean = false;
+  @Input() required: boolean = false;
+  @Input() multiline: boolean = false;
+  @Input() rows: number = 5;
+  @Output() arcInput = new EventEmitter<CustomEvent>();
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Modal.ts

@@ -0,0 +1,19 @@
+// 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-modal',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-modal [open]="open" [attr.heading]="heading" [attr.size]="size" [closable]="closable" (arc-close)="arcClose.emit($event)" (arc-open)="arcOpen.emit($event)"><ng-content /></arc-modal>`,
+})
+export class Modal {
+  @Input() open: boolean = false;
+  @Input() heading: string = '';
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
+  @Input() closable: boolean = true;
+  @Output() arcClose = new EventEmitter<CustomEvent>();
+  @Output() arcOpen = new EventEmitter<CustomEvent>();
+}

package/src/reactive/MultiSelect.ts

@@ -0,0 +1,22 @@
+// 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-multi-select',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-multi-select [attr.value]="value" [attr.placeholder]="placeholder" [attr.label]="label" [disabled]="disabled" [attr._query]="_query" [attr._open]="_open" [attr._activeIndex]="_activeIndex" [attr._options]="_options" (arc-change)="arcChange.emit($event)"><ng-content /></arc-multi-select>`,
+})
+export class MultiSelect {
+  @Input() value: unknown[] = [];
+  @Input() placeholder: string = '';
+  @Input() label: string = '';
+  @Input() disabled: boolean = false;
+  @Input() _query: string = '';
+  @Input() _open: string = false;
+  @Input() _activeIndex: string = -1;
+  @Input() _options: string = [];
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/NumberInput.ts

@@ -0,0 +1,20 @@
+// 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-number-input',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-number-input [attr.value]="value" [attr.min]="min" [attr.max]="max" [attr.step]="step" [attr.label]="label" [disabled]="disabled" (arc-change)="arcChange.emit($event)"><ng-content /></arc-number-input>`,
+})
+export class NumberInput {
+  @Input() value: number = 0;
+  @Input() min: number = 'undefined';
+  @Input() max: number = 'undefined';
+  @Input() step: number = 1;
+  @Input() label: string = '';
+  @Input() disabled: boolean = false;
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/OtpInput.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-otp-input',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-otp-input [attr.length]="length" [attr.value]="value" [disabled]="disabled" [attr.type]="type" (arc-change)="arcChange.emit($event)"><ng-content /></arc-otp-input>`,
+})
+export class OtpInput {
+  @Input() length: number = 6;
+  @Input() value: string = '';
+  @Input() disabled: boolean = false;
+  @Input() type: string = 'number';
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Pagination.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-pagination',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-pagination [attr.total]="total" [attr.current]="current" [attr.siblings]="siblings" (arc-change)="arcChange.emit($event)"><ng-content /></arc-pagination>`,
+})
+export class Pagination {
+  @Input() total: number = 1;
+  @Input() current: number = 1;
+  @Input() siblings: number = 1;
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/PinInput.ts

@@ -0,0 +1,22 @@
+// 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-pin-input',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-pin-input [attr.length]="length" [attr.value]="value" [disabled]="disabled" [mask]="mask" [attr.type]="type" [attr.separator]="separator" [attr.label]="label" (arc-change)="arcChange.emit($event)" (arc-complete)="arcComplete.emit($event)"><ng-content /></arc-pin-input>`,
+})
+export class PinInput {
+  @Input() length: number = 4;
+  @Input() value: string = '';
+  @Input() disabled: boolean = false;
+  @Input() mask: boolean = false;
+  @Input() type: string = 'number';
+  @Input() separator: number = 0;
+  @Input() label: string = '';
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+  @Output() arcComplete = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Popover.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-popover',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-popover [open]="open" [attr.position]="position" [attr.trigger]="trigger" (arc-close)="arcClose.emit($event)"><ng-content /></arc-popover>`,
+})
+export class Popover {
+  @Input() open: boolean = false;
+  @Input() position: 'bottom' | 'top' | 'left' | 'right' = 'bottom';
+  @Input() trigger: string = '';
+  @Output() arcClose = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Progress.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-progress',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-progress [attr.value]="value" [attr.variant]="variant" [attr.size]="size" [indeterminate]="indeterminate" [attr.label]="label"><ng-content /></arc-progress>`,
+})
+export class Progress {
+  @Input() value: number = 0;
+  @Input() variant: string = 'bar';
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
+  @Input() indeterminate: boolean = false;
+  @Input() label: string = '';
+}

package/src/reactive/Radio.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-radio',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-radio [attr.value]="value" [disabled]="disabled"><ng-content /></arc-radio>`,
+})
+export class Radio {
+  @Input() value: string = '';
+  @Input() disabled: boolean = false;
+}

package/src/reactive/RadioGroup.ts

@@ -0,0 +1,19 @@
+// 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-radio-group',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-radio-group [attr.value]="value" [attr.name]="name" [disabled]="disabled" [attr.orientation]="orientation" [attr._radios]="_radios" (arc-change)="arcChange.emit($event)"><ng-content /></arc-radio-group>`,
+})
+export class RadioGroup {
+  @Input() value: string = '';
+  @Input() name: string = '';
+  @Input() disabled: boolean = false;
+  @Input() orientation: 'horizontal' = 'vertical';
+  @Input() _radios: string = [];
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Rating.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-rating',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-rating [attr.value]="value" [attr.max]="max" [disabled]="disabled" [readonly]="readonly" (arc-change)="arcChange.emit($event)"><ng-content /></arc-rating>`,
+})
+export class Rating {
+  @Input() value: number = 0;
+  @Input() max: number = 5;
+  @Input() disabled: boolean = false;
+  @Input() readonly: boolean = false;
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/ScrollToTop.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-scroll-to-top',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-scroll-to-top [attr.threshold]="threshold" [smooth]="smooth" [attr.position]="position" [attr.offset]="offset" [attr._visible]="_visible"><ng-content /></arc-scroll-to-top>`,
+})
+export class ScrollToTop {
+  @Input() threshold: number = 300;
+  @Input() smooth: boolean = true;
+  @Input() position: 'bottom-right' | 'bottom-left' = 'bottom-right';
+  @Input() offset: string = 'var(--space-lg)';
+  @Input() _visible: string = false;
+}

package/src/reactive/Search.ts

@@ -0,0 +1,25 @@
+// 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-search',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-search [attr.value]="value" [attr.placeholder]="placeholder" [attr.label]="label" [disabled]="disabled" [loading]="loading" [attr._open]="_open" [attr._activeIndex]="_activeIndex" [attr._suggestions]="_suggestions" (arc-input)="arcInput.emit($event)" (arc-clear)="arcClear.emit($event)" (arc-change)="arcChange.emit($event)" (arc-select)="arcSelect.emit($event)"><ng-content /></arc-search>`,
+})
+export class Search {
+  @Input() value: string = '';
+  @Input() placeholder: string = 'Search...';
+  @Input() label: string = '';
+  @Input() disabled: boolean = false;
+  @Input() loading: boolean = false;
+  @Input() _open: string = false;
+  @Input() _activeIndex: string = -1;
+  @Input() _suggestions: string = [];
+  @Output() arcInput = new EventEmitter<CustomEvent>();
+  @Output() arcClear = new EventEmitter<CustomEvent>();
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+  @Output() arcSelect = new EventEmitter<CustomEvent>();
+}

package/src/reactive/SegmentedControl.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-segmented-control',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-segmented-control [attr.value]="value" [disabled]="disabled" [attr._options]="_options" (arc-change)="arcChange.emit($event)"><ng-content /></arc-segmented-control>`,
+})
+export class SegmentedControl {
+  @Input() value: string = '';
+  @Input() disabled: boolean = false;
+  @Input() _options: string = [];
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Select.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-select',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-select [attr.value]="value" [attr.placeholder]="placeholder" [attr.label]="label" [attr.name]="name" [disabled]="disabled" [open]="open" [attr._options]="_options" (arc-change)="arcChange.emit($event)"><ng-content /></arc-select>`,
+})
+export class Select {
+  @Input() value: string = '';
+  @Input() placeholder: string = 'Select...';
+  @Input() label: string = '';
+  @Input() name: string = '';
+  @Input() disabled: boolean = false;
+  @Input() open: boolean = false;
+  @Input() _options: string = [];
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Sheet.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-sheet',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-sheet [open]="open" [attr.side]="side" [attr.heading]="heading" (arc-close)="arcClose.emit($event)" (arc-open)="arcOpen.emit($event)"><ng-content /></arc-sheet>`,
+})
+export class Sheet {
+  @Input() open: boolean = false;
+  @Input() side: 'bottom' | 'right' = 'bottom';
+  @Input() heading: string = '';
+  @Output() arcClose = new EventEmitter<CustomEvent>();
+  @Output() arcOpen = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Slider.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-slider',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-slider [attr.value]="value" [attr.min]="min" [attr.max]="max" [attr.step]="step" [disabled]="disabled" [attr.label]="label" (arc-input)="arcInput.emit($event)" (arc-change)="arcChange.emit($event)"><ng-content /></arc-slider>`,
+})
+export class Slider {
+  @Input() value: number = 0;
+  @Input() min: number = 0;
+  @Input() max: number = 100;
+  @Input() step: number = 1;
+  @Input() disabled: boolean = false;
+  @Input() label: string = '';
+  @Output() arcInput = new EventEmitter<CustomEvent>();
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/SortableList.ts

@@ -0,0 +1,20 @@
+// 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-sortable-list',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-sortable-list [disabled]="disabled" [attr._items]="_items" [attr._dragIndex]="_dragIndex" [attr._overIndex]="_overIndex" [attr._kbSelected]="_kbSelected" [attr._kbMoving]="_kbMoving" (arc-change)="arcChange.emit($event)"><ng-content /></arc-sortable-list>`,
+})
+export class SortableList {
+  @Input() disabled: boolean = false;
+  @Input() _items: string = [];
+  @Input() _dragIndex: string = -1;
+  @Input() _overIndex: string = -1;
+  @Input() _kbSelected: string = -1;
+  @Input() _kbMoving: string = false;
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Suggestion.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-suggestion',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-suggestion [attr.value]="value"><ng-content /></arc-suggestion>`,
+})
+export class Suggestion {
+  @Input() value: string = '';
+}

package/src/reactive/Tab.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-tab',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-tab [attr.label]="label"><ng-content /></arc-tab>`,
+})
+export class Tab {
+  @Input() label: string = '';
+}