@arclux/arc-ui-svelte 1.0.0

package/src/reactive/Carousel.svelte

@@ -0,0 +1,23 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    autoPlay?: boolean;
+    interval?: number;
+    loop?: boolean;
+    showDots?: boolean;
+    showArrows?: boolean;
+    _current?: string;
+    _total?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { autoPlay = false, interval = 5000, loop = true, showDots = true, showArrows = true, _current = 0, _total = 0, children, ...rest }: Props = $props();
+</script>
+
+<arc-carousel {autoPlay} {interval} {loop} {showDots} {showArrows} {_current} {_total} {...rest}>
+  {@render children?.()}
+</arc-carousel>

package/src/reactive/Checkbox.svelte

@@ -0,0 +1,22 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    label?: string;
+    name?: string;
+    value?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { checked = false, indeterminate = false, disabled = false, label = '', name = '', value = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-checkbox {checked} {indeterminate} {disabled} {label} {name} {value} {...rest}>
+  {@render children?.()}
+</arc-checkbox>

package/src/reactive/Chip.svelte

@@ -0,0 +1,19 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    selected?: boolean;
+    disabled?: boolean;
+    value?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { selected = false, disabled = false, value = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-chip {selected} {disabled} {value} {...rest}>
+  {@render children?.()}
+</arc-chip>

package/src/reactive/Collapsible.svelte

@@ -0,0 +1,18 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    heading?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { open = false, heading = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-collapsible {open} {heading} {...rest}>
+  {@render children?.()}
+</arc-collapsible>

package/src/reactive/ColorPicker.svelte

@@ -0,0 +1,26 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value?: string;
+    presets?: unknown[];
+    disabled?: boolean;
+    label?: string;
+    _hue?: string;
+    _sat?: string;
+    _lit?: string;
+    _hexInput?: string;
+    _draggingArea?: string;
+    _draggingHue?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = '#4d7ef7', presets = [], disabled = false, label = '', _hue = 225, _sat = 92, _lit = 64, _hexInput = '#4d7ef7', _draggingArea = false, _draggingHue = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-color-picker {value} {presets} {disabled} {label} {_hue} {_sat} {_lit} {_hexInput} {_draggingArea} {_draggingHue} {...rest}>
+  {@render children?.()}
+</arc-color-picker>

package/src/reactive/Column.svelte

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    key?: string;
+    label?: string;
+    sortable?: boolean;
+    width?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { key = '', label = '', sortable = false, width = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-column {key} {label} {sortable} {width} {...rest}>
+  {@render children?.()}
+</arc-column>

package/src/reactive/Combobox.svelte

@@ -0,0 +1,24 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
+    _query?: string;
+    _open?: string;
+    _activeIndex?: string;
+    _options?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = '', placeholder = '', label = '', disabled = false, _query = '', _open = false, _activeIndex = -1, _options = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-combobox {value} {placeholder} {label} {disabled} {_query} {_open} {_activeIndex} {_options} {...rest}>
+  {@render children?.()}
+</arc-combobox>

package/src/reactive/CommandItem.svelte

@@ -0,0 +1,18 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    shortcut?: string;
+    icon?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { shortcut = '', icon = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-command-item {shortcut} {icon} {...rest}>
+  {@render children?.()}
+</arc-command-item>

package/src/reactive/CommandPalette.svelte

@@ -0,0 +1,21 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    placeholder?: string;
+    _query?: string;
+    _focusedIndex?: string;
+    _items?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { open = false, placeholder = 'Type a command...', _query = '', _focusedIndex = 0, _items = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-command-palette {open} {placeholder} {_query} {_focusedIndex} {_items} {...rest}>
+  {@render children?.()}
+</arc-command-palette>

package/src/reactive/ContextMenu.svelte

@@ -0,0 +1,21 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    _x?: string;
+    _y?: string;
+    _activeIndex?: string;
+    _children?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { open = false, _x = 0, _y = 0, _activeIndex = -1, _children = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-context-menu {open} {_x} {_y} {_activeIndex} {_children} {...rest}>
+  {@render children?.()}
+</arc-context-menu>

package/src/reactive/CopyButton.svelte

@@ -0,0 +1,19 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value?: string;
+    disabled?: boolean;
+    _copied?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = '', disabled = false, _copied = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-copy-button {value} {disabled} {_copied} {...rest}>
+  {@render children?.()}
+</arc-copy-button>

package/src/reactive/DataTable.svelte

@@ -0,0 +1,23 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    rows?: unknown[];
+    sortable?: boolean;
+    selectable?: boolean;
+    sortColumn?: string;
+    sortDirection?: string;
+    _columns?: string;
+    _selectedRows?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { rows = [], sortable = false, selectable = false, sortColumn = '', sortDirection = 'asc', _columns = [], _selectedRows = new Set(), children, ...rest }: Props = $props();
+</script>
+
+<arc-data-table {rows} {sortable} {selectable} {sortColumn} {sortDirection} {_columns} {_selectedRows} {...rest}>
+  {@render children?.()}
+</arc-data-table>

package/src/reactive/DatePicker.svelte

@@ -0,0 +1,26 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value?: string;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    label?: string;
+    _open?: string;
+    _viewMonth?: string;
+    _viewYear?: string;
+    _mode?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = '', min = '', max = '', placeholder = 'Select date', disabled = false, label = '', _open = false, _viewMonth = today.getMonth(), _viewYear = today.getFullYear(), _mode = 'days', children, ...rest }: Props = $props();
+</script>
+
+<arc-date-picker {value} {min} {max} {placeholder} {disabled} {label} {_open} {_viewMonth} {_viewYear} {_mode} {...rest}>
+  {@render children?.()}
+</arc-date-picker>

package/src/reactive/Dialog.svelte

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    heading?: string;
+    message?: string;
+    variant?: 'danger';
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { open = false, heading = '', message = '', variant = 'default', children, ...rest }: Props = $props();
+</script>
+
+<arc-dialog {open} {heading} {message} {variant} {...rest}>
+  {@render children?.()}
+</arc-dialog>

package/src/reactive/Drawer.svelte

@@ -0,0 +1,19 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    position?: 'left' | 'right';
+    heading?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { open = false, position = 'left', heading = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-drawer {open} {position} {heading} {...rest}>
+  {@render children?.()}
+</arc-drawer>

package/src/reactive/DropdownMenu.svelte

@@ -0,0 +1,19 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    _focusedIndex?: string;
+    _children?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { open = false, _focusedIndex = -1, _children = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-dropdown-menu {open} {_focusedIndex} {_children} {...rest}>
+  {@render children?.()}
+</arc-dropdown-menu>

package/src/reactive/FileUpload.svelte

@@ -0,0 +1,23 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    disabled?: boolean;
+    _files?: string;
+    _dragOver?: string;
+    _error?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { accept = '', multiple = false, maxSize = 0, disabled = false, _files = [], _dragOver = false, _error = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-file-upload {accept} {multiple} {maxSize} {disabled} {_files} {_dragOver} {_error} {...rest}>
+  {@render children?.()}
+</arc-file-upload>

package/src/reactive/Form.svelte

@@ -0,0 +1,19 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    action?: string;
+    method?: string;
+    novalidate?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { action = '', method = '', novalidate = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-form {action} {method} {novalidate} {...rest}>
+  {@render children?.()}
+</arc-form>

package/src/reactive/HoverCard.svelte

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    position?: 'bottom' | 'top' | 'left' | 'right';
+    openDelay?: number;
+    closeDelay?: number;
+    _visible?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { position = 'bottom', openDelay = 400, closeDelay = 300, _visible = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-hover-card {position} {openDelay} {closeDelay} {_visible} {...rest}>
+  {@render children?.()}
+</arc-hover-card>

package/src/reactive/IconButton.svelte

@@ -0,0 +1,24 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    name?: string;
+    text?: string;
+    variant?: 'ghost' | 'secondary' | 'primary';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    label?: string;
+    href?: string;
+    disabled?: boolean;
+    type?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { name = '', text = '', variant = 'ghost', size = 'md', label = '', href = '', disabled = false, type = 'button', children, ...rest }: Props = $props();
+</script>
+
+<arc-icon-button {name} {text} {variant} {size} {label} {href} {disabled} {type} {...rest}>
+  {@render children?.()}
+</arc-icon-button>

package/src/reactive/InfiniteScroll.svelte

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    threshold?: number;
+    loading?: boolean;
+    finished?: boolean;
+    disabled?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { threshold = 200, loading = false, finished = false, disabled = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-infinite-scroll {threshold} {loading} {finished} {disabled} {...rest}>
+  {@render children?.()}
+</arc-infinite-scroll>

package/src/reactive/Input.svelte

@@ -0,0 +1,25 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    type?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    disabled?: boolean;
+    required?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { type = 'text', name = '', label = '', placeholder = '', value = '', disabled = false, required = false, multiline = false, rows = 5, children, ...rest }: Props = $props();
+</script>
+
+<arc-input {type} {name} {label} {placeholder} {value} {disabled} {required} {multiline} {rows} {...rest}>
+  {@render children?.()}
+</arc-input>

package/src/reactive/Modal.svelte

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    heading?: string;
+    size?: 'sm' | 'md' | 'lg';
+    closable?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { open = false, heading = '', size = 'md', closable = true, children, ...rest }: Props = $props();
+</script>
+
+<arc-modal {open} {heading} {size} {closable} {...rest}>
+  {@render children?.()}
+</arc-modal>

package/src/reactive/MultiSelect.svelte

@@ -0,0 +1,24 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value?: unknown[];
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
+    _query?: string;
+    _open?: string;
+    _activeIndex?: string;
+    _options?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = [], placeholder = '', label = '', disabled = false, _query = '', _open = false, _activeIndex = -1, _options = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-multi-select {value} {placeholder} {label} {disabled} {_query} {_open} {_activeIndex} {_options} {...rest}>
+  {@render children?.()}
+</arc-multi-select>

package/src/reactive/NumberInput.svelte

@@ -0,0 +1,22 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    disabled?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = 0, min = undefined, max = undefined, step = 1, label = '', disabled = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-number-input {value} {min} {max} {step} {label} {disabled} {...rest}>
+  {@render children?.()}
+</arc-number-input>

package/src/reactive/OtpInput.svelte

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    length?: number;
+    value?: string;
+    disabled?: boolean;
+    type?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { length = 6, value = '', disabled = false, type = 'number', children, ...rest }: Props = $props();
+</script>
+
+<arc-otp-input {length} {value} {disabled} {type} {...rest}>
+  {@render children?.()}
+</arc-otp-input>

package/src/reactive/Pagination.svelte

@@ -0,0 +1,19 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    total?: number;
+    current?: number;
+    siblings?: number;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { total = 1, current = 1, siblings = 1, children, ...rest }: Props = $props();
+</script>
+
+<arc-pagination {total} {current} {siblings} {...rest}>
+  {@render children?.()}
+</arc-pagination>

package/src/reactive/PinInput.svelte

@@ -0,0 +1,23 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    length?: number;
+    value?: string;
+    disabled?: boolean;
+    mask?: boolean;
+    type?: string;
+    separator?: number;
+    label?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { length = 4, value = '', disabled = false, mask = false, type = 'number', separator = 0, label = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-pin-input {length} {value} {disabled} {mask} {type} {separator} {label} {...rest}>
+  {@render children?.()}
+</arc-pin-input>

package/src/reactive/Popover.svelte

@@ -0,0 +1,19 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script lang="ts">
+  import '@arclux/arc-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    position?: 'bottom' | 'top' | 'left' | 'right';
+    trigger?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { open = false, position = 'bottom', trigger = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-popover {open} {position} {trigger} {...rest}>
+  {@render children?.()}
+</arc-popover>