@arclux/arc-ui-svelte 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arclight Digital, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+# @arclux/arc-ui-svelte
+
+Svelte 5 component wrappers for [ARC UI](https://arcui.dev) web components.
+
+> **Auto-generated** -- this package is produced by [Prism](../../prism.config.js) from the canonical source in [`@arclux/arc-ui`](../web-components/). Do not edit by hand.
+
+## Installation
+
+```bash
+npm install @arclux/arc-ui-svelte @arclux/arc-ui
+```
+
+Requires `svelte >= 5.0.0`.
+
+## Usage
+
+```svelte
+<script>
+  import { Button, Card, Input } from '@arclux/arc-ui-svelte';
+</script>
+
+<Button variant="primary" on:click={() => console.log('clicked')}>
+  Get Started
+</Button>
+
+<Card>
+  <h3>Card Title</h3>
+  <p>Card content.</p>
+</Card>
+
+<Input label="Email" type="email" placeholder="you@example.com" />
+```
+
+Components are organized by category and can be imported from subpaths:
+
+```svelte
+<script>
+  import { Button } from '@arclux/arc-ui-svelte/input';
+  import { Card }   from '@arclux/arc-ui-svelte/content';
+  import { AppShell } from '@arclux/arc-ui-svelte/layout';
+</script>
+```
+
+## Documentation
+
+Full component docs and interactive examples: [arcui.dev](https://arcui.dev)
+
+## Links
+
+- [Canonical source (`@arclux/arc-ui`)](../web-components/)
+- [Root README](../../README.md)
+- [License](../../LICENSE)

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@arclux/arc-ui-svelte",
+  "version": "1.0.0",
+  "description": "Svelte 5 wrappers for ARC UI Web Components.",
+  "type": "module",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./content": {
+      "types": "./src/content/index.ts",
+      "default": "./src/content/index.ts"
+    },
+    "./input": {
+      "types": "./src/input/index.ts",
+      "default": "./src/input/index.ts"
+    },
+    "./feedback": {
+      "types": "./src/feedback/index.ts",
+      "default": "./src/feedback/index.ts"
+    },
+    "./navigation": {
+      "types": "./src/navigation/index.ts",
+      "default": "./src/navigation/index.ts"
+    },
+    "./layout": {
+      "types": "./src/layout/index.ts",
+      "default": "./src/layout/index.ts"
+    },
+    "./shared": {
+      "types": "./src/shared/index.ts",
+      "default": "./src/shared/index.ts"
+    }
+  },
+  "files": [
+    "src/"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "svelte": ">=5.0.0"
+  },
+  "dependencies": {
+    "@arclux/arc-ui": "1.0.0"
+  },
+  "license": "MIT",
+  "keywords": [
+    "svelte",
+    "web-components",
+    "design-system",
+    "arclight"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/arclight-digital/arc-ui",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://arcui.dev",
+  "bugs": {
+    "url": "https://github.com/arclight-digital/arc-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "echo 'Consumed directly via workspace — no build step required'"
+  }
+}

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

package/src/application/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/application/Breadcrumb.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 {
+    _items?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { _items = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-breadcrumb {_items} {...rest}>
+  {@render children?.()}
+</arc-breadcrumb>

package/src/application/BreadcrumbItem.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 {
+    href?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { href = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-breadcrumb-item {href} {...rest}>
+  {@render children?.()}
+</arc-breadcrumb-item>

package/src/application/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/application/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>

package/src/application/Footer.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 {
+    compact?: boolean;
+    border?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { compact = false, border = true, children, ...rest }: Props = $props();
+</script>
+
+<arc-footer {compact} {border} {...rest}>
+  {@render children?.()}
+</arc-footer>

package/src/application/NavItem.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 {
+    href?: string;
+    active?: boolean;
+    description?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { href = '', active = false, description = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-nav-item {href} {active} {description} {...rest}>
+  {@render children?.()}
+</arc-nav-item>

package/src/application/NavigationMenu.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 {
+    _items?: string;
+    _openIndex?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { _items = [], _openIndex = -1, children, ...rest }: Props = $props();
+</script>
+
+<arc-navigation-menu {_items} {_openIndex} {...rest}>
+  {@render children?.()}
+</arc-navigation-menu>

package/src/application/NotificationPanel.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?: string;
+    maxHeight?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { open = false, position = 'top-right', maxHeight = '400px', children, ...rest }: Props = $props();
+</script>
+
+<arc-notification-panel {open} {position} {maxHeight} {...rest}>
+  {@render children?.()}
+</arc-notification-panel>

package/src/application/PageHeader.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 {
+    heading?: string;
+    description?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { heading = '', description = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-page-header {heading} {description} {...rest}>
+  {@render children?.()}
+</arc-page-header>

package/src/application/PageLayout.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 {
+    layout?: string;
+    maxWidth?: string;
+    gap?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { layout = 'centered', maxWidth = '1120px', gap = 'var(--space-xl)', children, ...rest }: Props = $props();
+</script>
+
+<arc-page-layout {layout} {maxWidth} {gap} {...rest}>
+  {@render children?.()}
+</arc-page-layout>

package/src/application/Resizable.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 {
+    direction?: 'horizontal' | 'vertical';
+    minSize?: number;
+    maxSize?: number;
+    size?: number;
+    _dragging?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { direction = 'horizontal', minSize = 100, maxSize = Infinity, size = 300, _dragging = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-resizable {direction} {minSize} {maxSize} {size} {_dragging} {...rest}>
+  {@render children?.()}
+</arc-resizable>

package/src/application/ScrollSpy.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 {
+    active?: string;
+    offset?: number;
+    _active?: string;
+    _links?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { active = '', offset = 80, _active = '', _links = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-scroll-spy {active} {offset} {_active} {_links} {...rest}>
+  {@render children?.()}
+</arc-scroll-spy>

package/src/application/Section.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 {
+    label?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { label = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-section {label} {...rest}>
+  {@render children?.()}
+</arc-section>

package/src/application/SettingsLayout.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 {
+    navPosition?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { navPosition = 'left', children, ...rest }: Props = $props();
+</script>
+
+<arc-settings-layout {navPosition} {...rest}>
+  {@render children?.()}
+</arc-settings-layout>

package/src/application/Sidebar.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 {
+    active?: string;
+    collapsed?: boolean;
+    width?: string;
+    glow?: boolean;
+    _sections?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { active = '', collapsed = false, width = '260px', glow = false, _sections = [], children, ...rest }: Props = $props();
+</script>
+
+<arc-sidebar {active} {collapsed} {width} {glow} {_sections} {...rest}>
+  {@render children?.()}
+</arc-sidebar>

package/src/application/SidebarLink.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 {
+    href?: string;
+    active?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { href = '', active = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-sidebar-link {href} {active} {...rest}>
+  {@render children?.()}
+</arc-sidebar-link>

package/src/application/SidebarSection.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 {
+    heading?: string;
+    collapsible?: boolean;
+    open?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { heading = '', collapsible = false, open = true, children, ...rest }: Props = $props();
+</script>
+
+<arc-sidebar-section {heading} {collapsible} {open} {...rest}>
+  {@render children?.()}
+</arc-sidebar-section>

package/src/application/SplitPane.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 {
+    orientation?: string;
+    ratio?: number;
+    minRatio?: number;
+    maxRatio?: number;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { orientation = 'horizontal', ratio = 0.5, minRatio = 0.15, maxRatio = 0.85, children, ...rest }: Props = $props();
+</script>
+
+<arc-split-pane {orientation} {ratio} {minRatio} {maxRatio} {...rest}>
+  {@render children?.()}
+</arc-split-pane>

package/src/application/SpyLink.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 {
+    target?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { target = '', children, ...rest }: Props = $props();
+</script>
+
+<arc-spy-link {target} {...rest}>
+  {@render children?.()}
+</arc-spy-link>

package/src/application/StatusBar.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 {
+    position?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { position = 'static', children, ...rest }: Props = $props();
+</script>
+
+<arc-status-bar {position} {...rest}>
+  {@render children?.()}
+</arc-status-bar>

package/src/application/Toolbar.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 {
+    sticky?: boolean;
+    size?: string;
+    border?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { sticky = false, size = 'md', border = true, children, ...rest }: Props = $props();
+</script>
+
+<arc-toolbar {sticky} {size} {border} {...rest}>
+  {@render children?.()}
+</arc-toolbar>

package/src/application/TopBar.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 {
+    heading?: string;
+    fixed?: boolean;
+    menuOpen?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { heading = '', fixed = false, menuOpen = false, children, ...rest }: Props = $props();
+</script>
+
+<arc-top-bar {heading} {fixed} {menuOpen} {...rest}>
+  {@render children?.()}
+</arc-top-bar>

package/src/application/index.ts

@@ -0,0 +1,23 @@
+// Auto-generated by @arclux/prism — do not edit manually
+export { default as AppShell } from './AppShell.svelte';
+export { default as AuthShell } from './AuthShell.svelte';
+export { default as BreadcrumbItem } from './BreadcrumbItem.svelte';
+export { default as Container } from './Container.svelte';
+export { default as DashboardGrid } from './DashboardGrid.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as NavItem } from './NavItem.svelte';
+export { default as NavigationMenu } from './NavigationMenu.svelte';
+export { default as NotificationPanel } from './NotificationPanel.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as PageLayout } from './PageLayout.svelte';
+export { default as Resizable } from './Resizable.svelte';
+export { default as ScrollSpy } from './ScrollSpy.svelte';
+export { default as Section } from './Section.svelte';
+export { default as SettingsLayout } from './SettingsLayout.svelte';
+export { default as SidebarLink } from './SidebarLink.svelte';
+export { default as SidebarSection } from './SidebarSection.svelte';
+export { default as SplitPane } from './SplitPane.svelte';
+export { default as SpyLink } from './SpyLink.svelte';
+export { default as StatusBar } from './StatusBar.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as TopBar } from './TopBar.svelte';

package/src/content/Accordion.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 {
+    _items?: string;
+    _openItems?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { _items = [], _openItems = new Set(), children, ...rest }: Props = $props();
+</script>
+
+<arc-accordion {_items} {_openItems} {...rest}>
+  {@render children?.()}
+</arc-accordion>