@arclux/arc-ui-vue 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-vue
+
+Vue 3 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-vue @arclux/arc-ui
+```
+
+Requires `vue >= 3.3.0`.
+
+## Usage
+
+```vue
+<script setup>
+import { Button, Card, Input } from '@arclux/arc-ui-vue';
+</script>
+
+<template>
+  <Button variant="primary" @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" />
+</template>
+```
+
+Components are organized by category and can be imported from subpaths:
+
+```js
+import { Button } from '@arclux/arc-ui-vue/input';
+import { Card }   from '@arclux/arc-ui-vue/content';
+import { AppShell } from '@arclux/arc-ui-vue/layout';
+```
+
+## 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-vue",
+  "version": "1.0.0",
+  "description": "Vue 3 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": {
+    "vue": ">=3.3.0"
+  },
+  "dependencies": {
+    "@arclux/arc-ui": "1.0.0"
+  },
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "web-components",
+    "design-system",
+    "arclight"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/arclight-digital/arc-ui",
+    "directory": "packages/vue"
+  },
+  "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.vue

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'AppShell' });
+
+withDefaults(defineProps<{
+  sidebarOpen?: boolean;
+}>(), {
+  sidebarOpen: false,
+});
+</script>
+
+<template>
+  <arc-app-shell
+    :sidebarOpen="sidebarOpen"
+  >
+    <slot />
+  </arc-app-shell>
+</template>

package/src/application/AuthShell.vue

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'AuthShell' });
+
+withDefaults(defineProps<{
+  variant?: string;
+}>(), {
+  variant: 'centered',
+});
+</script>
+
+<template>
+  <arc-auth-shell
+    :variant="variant"
+  >
+    <slot />
+  </arc-auth-shell>
+</template>

package/src/application/Breadcrumb.vue

@@ -0,0 +1,24 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Breadcrumb' });
+
+withDefaults(defineProps<{
+  _items?: string;
+}>(), {
+  _items: () => ([]),
+});
+
+defineEmits<{
+  'arc-navigate': [event: CustomEvent];
+}>();
+</script>
+
+<template>
+  <arc-breadcrumb
+    :_items="_items"
+  >
+    <slot />
+  </arc-breadcrumb>
+</template>

package/src/application/BreadcrumbItem.vue

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'BreadcrumbItem' });
+
+withDefaults(defineProps<{
+  href?: string;
+}>(), {
+  href: '',
+});
+</script>
+
+<template>
+  <arc-breadcrumb-item
+    :href="href"
+  >
+    <slot />
+  </arc-breadcrumb-item>
+</template>

package/src/application/Container.vue

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Container' });
+
+withDefaults(defineProps<{
+  narrow?: boolean;
+}>(), {
+  narrow: false,
+});
+</script>
+
+<template>
+  <arc-container
+    :narrow="narrow"
+  >
+    <slot />
+  </arc-container>
+</template>

package/src/application/DashboardGrid.vue

@@ -0,0 +1,26 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'DashboardGrid' });
+
+withDefaults(defineProps<{
+  columns?: number;
+  gap?: string;
+  minColumnWidth?: string;
+}>(), {
+  columns: 3,
+  gap: 'var(--space-lg)',
+  minColumnWidth: '280px',
+});
+</script>
+
+<template>
+  <arc-dashboard-grid
+    :columns="columns"
+    :gap="gap"
+    :minColumnWidth="minColumnWidth"
+  >
+    <slot />
+  </arc-dashboard-grid>
+</template>

package/src/application/Footer.vue

@@ -0,0 +1,23 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Footer' });
+
+withDefaults(defineProps<{
+  compact?: boolean;
+  border?: boolean;
+}>(), {
+  compact: false,
+  border: true,
+});
+</script>
+
+<template>
+  <arc-footer
+    :compact="compact"
+    :border="border"
+  >
+    <slot />
+  </arc-footer>
+</template>

package/src/application/NavItem.vue

@@ -0,0 +1,26 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'NavItem' });
+
+withDefaults(defineProps<{
+  href?: string;
+  active?: boolean;
+  description?: string;
+}>(), {
+  href: '',
+  active: false,
+  description: '',
+});
+</script>
+
+<template>
+  <arc-nav-item
+    :href="href"
+    :active="active"
+    :description="description"
+  >
+    <slot />
+  </arc-nav-item>
+</template>

package/src/application/NavigationMenu.vue

@@ -0,0 +1,23 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'NavigationMenu' });
+
+withDefaults(defineProps<{
+  _items?: string;
+  _openIndex?: string;
+}>(), {
+  _items: () => ([]),
+  _openIndex: -1,
+});
+</script>
+
+<template>
+  <arc-navigation-menu
+    :_items="_items"
+    :_openIndex="_openIndex"
+  >
+    <slot />
+  </arc-navigation-menu>
+</template>

package/src/application/NotificationPanel.vue

@@ -0,0 +1,31 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'NotificationPanel' });
+
+withDefaults(defineProps<{
+  open?: boolean;
+  position?: string;
+  maxHeight?: string;
+}>(), {
+  open: false,
+  position: 'top-right',
+  maxHeight: '400px',
+});
+
+defineEmits<{
+  'arc-open': [event: CustomEvent];
+  'arc-close': [event: CustomEvent];
+}>();
+</script>
+
+<template>
+  <arc-notification-panel
+    :open="open"
+    :position="position"
+    :maxHeight="maxHeight"
+  >
+    <slot />
+  </arc-notification-panel>
+</template>

package/src/application/PageHeader.vue

@@ -0,0 +1,23 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'PageHeader' });
+
+withDefaults(defineProps<{
+  heading?: string;
+  description?: string;
+}>(), {
+  heading: '',
+  description: '',
+});
+</script>
+
+<template>
+  <arc-page-header
+    :heading="heading"
+    :description="description"
+  >
+    <slot />
+  </arc-page-header>
+</template>

package/src/application/PageLayout.vue

@@ -0,0 +1,26 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'PageLayout' });
+
+withDefaults(defineProps<{
+  layout?: string;
+  maxWidth?: string;
+  gap?: string;
+}>(), {
+  layout: 'centered',
+  maxWidth: '1120px',
+  gap: 'var(--space-xl)',
+});
+</script>
+
+<template>
+  <arc-page-layout
+    :layout="layout"
+    :maxWidth="maxWidth"
+    :gap="gap"
+  >
+    <slot />
+  </arc-page-layout>
+</template>

package/src/application/Resizable.vue

@@ -0,0 +1,36 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Resizable' });
+
+withDefaults(defineProps<{
+  direction?: 'horizontal' | 'vertical';
+  minSize?: number;
+  maxSize?: number;
+  size?: number;
+  _dragging?: string;
+}>(), {
+  direction: 'horizontal',
+  minSize: 100,
+  maxSize: Infinity,
+  size: 300,
+  _dragging: false,
+});
+
+defineEmits<{
+  'arc-resize': [event: CustomEvent];
+}>();
+</script>
+
+<template>
+  <arc-resizable
+    :direction="direction"
+    :minSize="minSize"
+    :maxSize="maxSize"
+    :size="size"
+    :_dragging="_dragging"
+  >
+    <slot />
+  </arc-resizable>
+</template>

package/src/application/ScrollSpy.vue

@@ -0,0 +1,33 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'ScrollSpy' });
+
+withDefaults(defineProps<{
+  active?: string;
+  offset?: number;
+  _active?: string;
+  _links?: string;
+}>(), {
+  active: '',
+  offset: 80,
+  _active: '',
+  _links: () => ([]),
+});
+
+defineEmits<{
+  'arc-change': [event: CustomEvent];
+}>();
+</script>
+
+<template>
+  <arc-scroll-spy
+    :active="active"
+    :offset="offset"
+    :_active="_active"
+    :_links="_links"
+  >
+    <slot />
+  </arc-scroll-spy>
+</template>

package/src/application/Section.vue

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Section' });
+
+withDefaults(defineProps<{
+  label?: string;
+}>(), {
+  label: '',
+});
+</script>
+
+<template>
+  <arc-section
+    :label="label"
+  >
+    <slot />
+  </arc-section>
+</template>

package/src/application/SettingsLayout.vue

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'SettingsLayout' });
+
+withDefaults(defineProps<{
+  navPosition?: string;
+}>(), {
+  navPosition: 'left',
+});
+</script>
+
+<template>
+  <arc-settings-layout
+    :navPosition="navPosition"
+  >
+    <slot />
+  </arc-settings-layout>
+</template>

package/src/application/Sidebar.vue

@@ -0,0 +1,32 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Sidebar' });
+
+withDefaults(defineProps<{
+  active?: string;
+  collapsed?: boolean;
+  width?: string;
+  glow?: boolean;
+  _sections?: string;
+}>(), {
+  active: '',
+  collapsed: false,
+  width: '260px',
+  glow: false,
+  _sections: () => ([]),
+});
+</script>
+
+<template>
+  <arc-sidebar
+    :active="active"
+    :collapsed="collapsed"
+    :width="width"
+    :glow="glow"
+    :_sections="_sections"
+  >
+    <slot />
+  </arc-sidebar>
+</template>

package/src/application/SidebarLink.vue

@@ -0,0 +1,23 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'SidebarLink' });
+
+withDefaults(defineProps<{
+  href?: string;
+  active?: boolean;
+}>(), {
+  href: '',
+  active: false,
+});
+</script>
+
+<template>
+  <arc-sidebar-link
+    :href="href"
+    :active="active"
+  >
+    <slot />
+  </arc-sidebar-link>
+</template>

package/src/application/SidebarSection.vue

@@ -0,0 +1,30 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'SidebarSection' });
+
+withDefaults(defineProps<{
+  heading?: string;
+  collapsible?: boolean;
+  open?: boolean;
+}>(), {
+  heading: '',
+  collapsible: false,
+  open: true,
+});
+
+defineEmits<{
+  'arc-toggle': [event: CustomEvent];
+}>();
+</script>
+
+<template>
+  <arc-sidebar-section
+    :heading="heading"
+    :collapsible="collapsible"
+    :open="open"
+  >
+    <slot />
+  </arc-sidebar-section>
+</template>

package/src/application/SplitPane.vue

@@ -0,0 +1,33 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'SplitPane' });
+
+withDefaults(defineProps<{
+  orientation?: string;
+  ratio?: number;
+  minRatio?: number;
+  maxRatio?: number;
+}>(), {
+  orientation: 'horizontal',
+  ratio: 0.5,
+  minRatio: 0.15,
+  maxRatio: 0.85,
+});
+
+defineEmits<{
+  'arc-resize': [event: CustomEvent];
+}>();
+</script>
+
+<template>
+  <arc-split-pane
+    :orientation="orientation"
+    :ratio="ratio"
+    :minRatio="minRatio"
+    :maxRatio="maxRatio"
+  >
+    <slot />
+  </arc-split-pane>
+</template>