@arclux/arc-ui-svelte 1.0.0

package/src/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/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/input/Radio.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 {
+    value?: string;
+    disabled?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = '', disabled = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-radio {value} {disabled} {...rest}>
+  {@render children?.()}
+</arc-radio>

package/src/input/RadioGroup.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 {
+    value?: string;
+    name?: string;
+    disabled?: boolean;
+    orientation?: 'horizontal';
+    _radios?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = '', name = '', disabled = false, orientation = 'vertical', _radios = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-radio-group {value} {name} {disabled} {orientation} {_radios} {...rest}>
+  {@render children?.()}
+</arc-radio-group>

package/src/input/Rating.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 {
+    value?: number;
+    max?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = 0, max = 5, disabled = false, readonly = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-rating {value} {max} {disabled} {readonly} {...rest}>
+  {@render children?.()}
+</arc-rating>

package/src/input/Search.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;
+    loading?: boolean;
+    _open?: string;
+    _activeIndex?: string;
+    _suggestions?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = '', placeholder = 'Search...', label = '', disabled = false, loading = false, _open = false, _activeIndex = -1, _suggestions = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-search {value} {placeholder} {label} {disabled} {loading} {_open} {_activeIndex} {_suggestions} {...rest}>
+  {@render children?.()}
+</arc-search>

package/src/input/SegmentedControl.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;
+    _options?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = '', disabled = false, _options = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-segmented-control {value} {disabled} {_options} {...rest}>
+  {@render children?.()}
+</arc-segmented-control>

package/src/input/Select.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 {
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+    open?: boolean;
+    _options?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = '', placeholder = 'Select...', label = '', name = '', disabled = false, open = false, _options = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-select {value} {placeholder} {label} {name} {disabled} {open} {_options} {...rest}>
+  {@render children?.()}
+</arc-select>

package/src/input/Slider.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;
+    disabled?: boolean;
+    label?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = 0, min = 0, max = 100, step = 1, disabled = false, label = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-slider {value} {min} {max} {step} {disabled} {label} {...rest}>
+  {@render children?.()}
+</arc-slider>

package/src/input/SortableList.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 {
+    disabled?: boolean;
+    _items?: string;
+    _dragIndex?: string;
+    _overIndex?: string;
+    _kbSelected?: string;
+    _kbMoving?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { disabled = false, _items = [], _dragIndex = -1, _overIndex = -1, _kbSelected = -1, _kbMoving = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-sortable-list {disabled} {_items} {_dragIndex} {_overIndex} {_kbSelected} {_kbMoving} {...rest}>
+  {@render children?.()}
+</arc-sortable-list>

package/src/input/Suggestion.svelte

@@ -0,0 +1,17 @@
+<!-- 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;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-suggestion {value} {...rest}>
+  {@render children?.()}
+</arc-suggestion>

package/src/input/Textarea.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 {
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    rows?: number;
+    maxlength?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    error?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { value = '', placeholder = '', label = '', rows = 4, maxlength = 0, disabled = false, readonly = false, resize = 'vertical', error = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-textarea {value} {placeholder} {label} {rows} {maxlength} {disabled} {readonly} {resize} {error} {...rest}>
+  {@render children?.()}
+</arc-textarea>

package/src/input/ThemeToggle.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 {
+    theme?: string;
+    disabled?: boolean;
+    iconOnly?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { theme = 'auto', disabled = false, iconOnly = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-theme-toggle {theme} {disabled} {iconOnly} {...rest}>
+  {@render children?.()}
+</arc-theme-toggle>

package/src/input/Toggle.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 {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    name?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { checked = false, disabled = false, label = '', name = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-toggle {checked} {disabled} {label} {name} {...rest}>
+  {@render children?.()}
+</arc-toggle>

package/src/layout/AppShell.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 {
+    sidebarOpen?: boolean;
+    breakpoint?: number;
+    _mobile?: string;
+    _hasToc?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { sidebarOpen = false, breakpoint = 900, _mobile = false, _hasToc = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-app-shell {sidebarOpen} {breakpoint} {_mobile} {_hasToc} {...rest}>
+  {@render children?.()}
+</arc-app-shell>

package/src/layout/AuthShell.svelte

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

package/src/layout/Container.svelte

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

package/src/layout/DashboardGrid.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 {
+    columns?: number;
+    gap?: string;
+    minColumnWidth?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { columns = 3, gap = 'var(--space-lg)', minColumnWidth = '280px', children, ...rest }: Props = $props();
+</script>
+
+<arc-dashboard-grid {columns} {gap} {minColumnWidth} {...rest}>
+  {@render children?.()}
+</arc-dashboard-grid>