@arclux/arc-ui-angular 1.0.0

package/src/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/Textarea.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-textarea',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-textarea [attr.value]="value" [attr.placeholder]="placeholder" [attr.label]="label" [attr.rows]="rows" [attr.maxlength]="maxlength" [disabled]="disabled" [readonly]="readonly" [attr.resize]="resize" [attr.error]="error" (arc-input)="arcInput.emit($event)" (arc-change)="arcChange.emit($event)"><ng-content /></arc-textarea>`,
+})
+export class Textarea {
+  @Input() value: string = '';
+  @Input() placeholder: string = '';
+  @Input() label: string = '';
+  @Input() rows: number = 4;
+  @Input() maxlength: number = 0;
+  @Input() disabled: boolean = false;
+  @Input() readonly: boolean = false;
+  @Input() resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';
+  @Input() error: string = '';
+  @Output() arcInput = new EventEmitter<CustomEvent>();
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

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

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

package/src/layout/AppShell.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-app-shell',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-app-shell [sidebarOpen]="sidebarOpen" [attr.breakpoint]="breakpoint" [attr._mobile]="_mobile" [attr._hasToc]="_hasToc"><ng-content /></arc-app-shell>`,
+})
+export class AppShell {
+  @Input() sidebarOpen: boolean = false;
+  @Input() breakpoint: number = 900;
+  @Input() _mobile: string = false;
+  @Input() _hasToc: string = false;
+}

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

package/src/layout/Container.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-container',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-container [narrow]="narrow"><ng-content /></arc-container>`,
+})
+export class Container {
+  @Input() narrow: boolean = false;
+}

package/src/layout/DashboardGrid.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-dashboard-grid',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-dashboard-grid [attr.columns]="columns" [attr.gap]="gap" [attr.minColumnWidth]="minColumnWidth"><ng-content /></arc-dashboard-grid>`,
+})
+export class DashboardGrid {
+  @Input() columns: number = 3;
+  @Input() gap: string = 'var(--space-lg)';
+  @Input() minColumnWidth: string = '280px';
+}

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

package/src/layout/PageLayout.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-page-layout',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-page-layout [attr.layout]="layout" [attr.maxWidth]="maxWidth" [attr.gap]="gap"><ng-content /></arc-page-layout>`,
+})
+export class PageLayout {
+  @Input() layout: string = 'centered';
+  @Input() maxWidth: string = '1120px';
+  @Input() gap: string = 'var(--space-xl)';
+}

package/src/layout/Resizable.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-resizable',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-resizable [attr.direction]="direction" [attr.minSize]="minSize" [attr.maxSize]="maxSize" [attr.size]="size" [attr._dragging]="_dragging" (arc-resize)="arcResize.emit($event)"><ng-content /></arc-resizable>`,
+})
+export class Resizable {
+  @Input() direction: 'horizontal' | 'vertical' = 'horizontal';
+  @Input() minSize: number = 100;
+  @Input() maxSize: number = Infinity;
+  @Input() size: number = 300;
+  @Input() _dragging: string = false;
+  @Output() arcResize = new EventEmitter<CustomEvent>();
+}

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

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

package/src/layout/SplitPane.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-split-pane',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-split-pane [attr.orientation]="orientation" [attr.ratio]="ratio" [attr.minRatio]="minRatio" [attr.maxRatio]="maxRatio" (arc-resize)="arcResize.emit($event)"><ng-content /></arc-split-pane>`,
+})
+export class SplitPane {
+  @Input() orientation: string = 'horizontal';
+  @Input() ratio: number = 0.5;
+  @Input() minRatio: number = 0.15;
+  @Input() maxRatio: number = 0.85;
+  @Output() arcResize = new EventEmitter<CustomEvent>();
+}

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

package/src/layout/Toolbar.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-toolbar',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-toolbar [sticky]="sticky" [attr.size]="size" [border]="border"><ng-content /></arc-toolbar>`,
+})
+export class Toolbar {
+  @Input() sticky: boolean = false;
+  @Input() size: string = 'md';
+  @Input() border: boolean = true;
+}

package/src/navigation/Breadcrumb.ts

@@ -0,0 +1,15 @@
+// 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-breadcrumb',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-breadcrumb [attr._items]="_items" (arc-navigate)="arcNavigate.emit($event)"><ng-content /></arc-breadcrumb>`,
+})
+export class Breadcrumb {
+  @Input() _items: string = [];
+  @Output() arcNavigate = new EventEmitter<CustomEvent>();
+}

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