@arclux/arc-ui-vue 1.0.0

package/src/application/SpyLink.vue

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

package/src/application/StatusBar.vue

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

package/src/application/Toolbar.vue

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

package/src/application/TopBar.vue

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

package/src/application/index.ts

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

package/src/content/Accordion.vue

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

package/src/content/AccordionItem.vue

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

package/src/content/AnimatedNumber.vue

@@ -0,0 +1,38 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'AnimatedNumber' });
+
+withDefaults(defineProps<{
+  value?: number;
+  duration?: number;
+  format?: string;
+  prefix?: string;
+  suffix?: string;
+  decimals?: number;
+  locale?: string;
+}>(), {
+  value: 0,
+  duration: 1000,
+  format: 'number',
+  prefix: '',
+  suffix: '',
+  decimals: 0,
+  locale: 'en-US',
+});
+</script>
+
+<template>
+  <arc-animated-number
+    :value="value"
+    :duration="duration"
+    :format="format"
+    :prefix="prefix"
+    :suffix="suffix"
+    :decimals="decimals"
+    :locale="locale"
+  >
+    <slot />
+  </arc-animated-number>
+</template>

package/src/content/AspectRatio.vue

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

package/src/content/Avatar.vue

@@ -0,0 +1,26 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Avatar' });
+
+withDefaults(defineProps<{
+  src?: string;
+  name?: string;
+  size?: 'sm' | 'md' | 'lg';
+}>(), {
+  src: '',
+  name: '',
+  size: 'md',
+});
+</script>
+
+<template>
+  <arc-avatar
+    :src="src"
+    :name="name"
+    :size="size"
+  >
+    <slot />
+  </arc-avatar>
+</template>

package/src/content/AvatarGroup.vue

@@ -0,0 +1,23 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'AvatarGroup' });
+
+withDefaults(defineProps<{
+  max?: number;
+  overlap?: 'sm' | 'lg';
+}>(), {
+  max: Infinity,
+  overlap: 'md',
+});
+</script>
+
+<template>
+  <arc-avatar-group
+    :max="max"
+    :overlap="overlap"
+  >
+    <slot />
+  </arc-avatar-group>
+</template>

package/src/content/Badge.vue

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Badge' });
+
+withDefaults(defineProps<{
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+}>(), {
+  variant: 'default',
+});
+</script>
+
+<template>
+  <arc-badge
+    :variant="variant"
+  >
+    <slot />
+  </arc-badge>
+</template>

package/src/content/Callout.vue

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Callout' });
+
+withDefaults(defineProps<{
+  variant?: 'info' | 'warning' | 'tip' | 'danger';
+}>(), {
+  variant: 'info',
+});
+</script>
+
+<template>
+  <arc-callout
+    :variant="variant"
+  >
+    <slot />
+  </arc-callout>
+</template>

package/src/content/Card.vue

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

package/src/content/Carousel.vue

@@ -0,0 +1,42 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Carousel' });
+
+withDefaults(defineProps<{
+  autoPlay?: boolean;
+  interval?: number;
+  loop?: boolean;
+  showDots?: boolean;
+  showArrows?: boolean;
+  _current?: string;
+  _total?: string;
+}>(), {
+  autoPlay: false,
+  interval: 5000,
+  loop: true,
+  showDots: true,
+  showArrows: true,
+  _current: 0,
+  _total: 0,
+});
+
+defineEmits<{
+  'arc-change': [event: CustomEvent];
+}>();
+</script>
+
+<template>
+  <arc-carousel
+    :autoPlay="autoPlay"
+    :interval="interval"
+    :loop="loop"
+    :showDots="showDots"
+    :showArrows="showArrows"
+    :_current="_current"
+    :_total="_total"
+  >
+    <slot />
+  </arc-carousel>
+</template>

package/src/content/CodeBlock.vue

@@ -0,0 +1,29 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'CodeBlock' });
+
+withDefaults(defineProps<{
+  language?: string;
+  filename?: string;
+  code?: string;
+  _copied?: string;
+}>(), {
+  language: '',
+  filename: '',
+  code: '',
+  _copied: false,
+});
+</script>
+
+<template>
+  <arc-code-block
+    :language="language"
+    :filename="filename"
+    :code="code"
+    :_copied="_copied"
+  >
+    <slot />
+  </arc-code-block>
+</template>

package/src/content/Collapsible.vue

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

package/src/content/ColorSwatch.vue

@@ -0,0 +1,26 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'ColorSwatch' });
+
+withDefaults(defineProps<{
+  color?: string;
+  label?: string;
+  size?: 'sm' | 'md' | 'lg';
+}>(), {
+  color: '#4d7ef7',
+  label: '',
+  size: 'md',
+});
+</script>
+
+<template>
+  <arc-color-swatch
+    :color="color"
+    :label="label"
+    :size="size"
+  >
+    <slot />
+  </arc-color-swatch>
+</template>

package/src/content/Column.vue

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

package/src/content/DataTable.vue

@@ -0,0 +1,44 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'DataTable' });
+
+withDefaults(defineProps<{
+  rows?: unknown[];
+  sortable?: boolean;
+  selectable?: boolean;
+  sortColumn?: string;
+  sortDirection?: string;
+  _columns?: string;
+  _selectedRows?: string;
+}>(), {
+  rows: () => ([]),
+  sortable: false,
+  selectable: false,
+  sortColumn: '',
+  sortDirection: 'asc',
+  _columns: () => ([]),
+  _selectedRows: 'new Set()',
+});
+
+defineEmits<{
+  'arc-sort': [event: CustomEvent];
+  'arc-select-all': [event: CustomEvent];
+  'arc-row-select': [event: CustomEvent];
+}>();
+</script>
+
+<template>
+  <arc-data-table
+    :rows="rows"
+    :sortable="sortable"
+    :selectable="selectable"
+    :sortColumn="sortColumn"
+    :sortDirection="sortDirection"
+    :_columns="_columns"
+    :_selectedRows="_selectedRows"
+  >
+    <slot />
+  </arc-data-table>
+</template>

package/src/content/Divider.vue

@@ -0,0 +1,25 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Divider' });
+
+withDefaults(defineProps<{
+  variant?: 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient';
+  align?: 'left' | 'right';
+  vertical?: boolean;
+}>(), {
+  variant: 'subtle',
+  vertical: false,
+});
+</script>
+
+<template>
+  <arc-divider
+    :variant="variant"
+    :align="align"
+    :vertical="vertical"
+  >
+    <slot />
+  </arc-divider>
+</template>

package/src/content/EmptyState.vue

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

package/src/content/FeatureCard.vue

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

package/src/content/Highlight.vue

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

package/src/content/Icon.vue

@@ -0,0 +1,26 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<script setup lang="ts">
+import '@arclux/arc-ui';
+
+defineOptions({ name: 'Icon' });
+
+withDefaults(defineProps<{
+  name?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  label?: string;
+}>(), {
+  name: '',
+  size: 'sm',
+  label: '',
+});
+</script>
+
+<template>
+  <arc-icon
+    :name="name"
+    :size="size"
+    :label="label"
+  >
+    <slot />
+  </arc-icon>
+</template>