nuxt-ui-elements-pro 0.1.6 → 0.1.8

package/dist/runtime/components/{EventCalendarHeader.d.vue.ts → event-calendar/EventCalendarHeader.d.vue.ts}

@@ -1,5 +1,5 @@
 import type { CalendarDate } from "@internationalized/date";
-import type { CalendarView } from "../types/event-calendar.js";
+import type { CalendarView } from "../../types/event-calendar.js";
 import type { Component } from "vue";
 export interface EventCalendarHeaderProps {
     /** Rendered element type @defaultValue 'div' */
@@ -14,6 +14,25 @@ export interface EventCalendarHeaderSlots {
         currentDate: CalendarDate;
         view: CalendarView;
         setView: (v: CalendarView) => void;
+        views: CalendarView[];
+    }) => any;
+    /** Replace just the title element */
+    title: (props: {
+        title: string;
+        date: CalendarDate;
+        view: CalendarView;
+    }) => any;
+    /** Replace just the navigation buttons */
+    nav: (props: {
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+    }) => any;
+    /** Replace just the view switcher */
+    "view-switcher": (props: {
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
     }) => any;
 }
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/event-calendar/EventCalendarHeader.vue

@@ -0,0 +1,55 @@
+<script>
+import { Primitive } from "reka-ui";
+import { useEventCalendarContext } from "../../composables/useEventCalendarContext";
+</script>
+
+<script setup>
+const props = defineProps({
+  as: { type: null, required: false }
+});
+defineSlots();
+const ctx = useEventCalendarContext();
+</script>
+
+<template>
+  <Primitive :as="props.as ?? 'div'" data-slot="header" :class="ctx.ui.value.header({ class: ctx.propUi.value?.header })">
+    <slot
+      :title="ctx.headerTitle.value"
+      :prev="ctx.goToPrev"
+      :next="ctx.goToNext"
+      :today="ctx.goToToday"
+      :current-date="ctx.displayDate.value"
+      :view="ctx.view.value"
+      :set-view="ctx.setView"
+      :views="ctx.views.value">
+      <slot name="title" :title="ctx.headerTitle.value" :date="ctx.displayDate.value" :view="ctx.view.value">
+        <span data-slot="headerTitle" :class="ctx.ui.value.headerTitle({ class: ctx.propUi.value?.headerTitle })" aria-live="polite" aria-atomic="true">
+          {{ ctx.headerTitle.value }}
+        </span>
+      </slot>
+
+      <div data-slot="headerActions" :class="ctx.ui.value.headerActions({ class: ctx.propUi.value?.headerActions })">
+        <slot name="view-switcher" :view="ctx.view.value" :set-view="ctx.setView" :views="ctx.views.value">
+          <div data-slot="viewSwitcher" role="group" aria-label="Calendar view" :class="ctx.ui.value.viewSwitcher({ class: ctx.propUi.value?.viewSwitcher })">
+            <UButton
+              v-for="v in ctx.views.value"
+              :key="v"
+              :label="v"
+              size="xs"
+              :color="ctx.view.value === v ? ctx.color.value : 'neutral'"
+              :variant="ctx.view.value === v ? 'subtle' : 'ghost'"
+              :aria-pressed="ctx.view.value === v"
+              class="capitalize"
+              @click="ctx.setView(v)" />
+          </div>
+        </slot>
+
+        <slot name="nav" :prev="ctx.goToPrev" :next="ctx.goToNext" :today="ctx.goToToday">
+          <UButton icon="i-lucide-chevron-left" color="neutral" variant="ghost" size="xs" square :aria-label="`Previous ${ctx.view.value}`" @click="ctx.goToPrev" />
+          <UButton label="Today" color="neutral" variant="ghost" size="xs" aria-label="Go to today" @click="ctx.goToToday" />
+          <UButton icon="i-lucide-chevron-right" color="neutral" variant="ghost" size="xs" square :aria-label="`Next ${ctx.view.value}`" @click="ctx.goToNext" />
+        </slot>
+      </div>
+    </slot>
+  </Primitive>
+</template>

package/dist/runtime/components/{EventCalendarHeader.vue.d.ts → event-calendar/EventCalendarHeader.vue.d.ts}

@@ -1,5 +1,5 @@
 import type { CalendarDate } from "@internationalized/date";
-import type { CalendarView } from "../types/event-calendar.js";
+import type { CalendarView } from "../../types/event-calendar.js";
 import type { Component } from "vue";
 export interface EventCalendarHeaderProps {
     /** Rendered element type @defaultValue 'div' */
@@ -14,6 +14,25 @@ export interface EventCalendarHeaderSlots {
         currentDate: CalendarDate;
         view: CalendarView;
         setView: (v: CalendarView) => void;
+        views: CalendarView[];
+    }) => any;
+    /** Replace just the title element */
+    title: (props: {
+        title: string;
+        date: CalendarDate;
+        view: CalendarView;
+    }) => any;
+    /** Replace just the navigation buttons */
+    nav: (props: {
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+    }) => any;
+    /** Replace just the view switcher */
+    "view-switcher": (props: {
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
     }) => any;
 }
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/{EventCalendarListView.d.vue.ts → event-calendar/EventCalendarListView.d.vue.ts}

@@ -1,4 +1,4 @@
-import type { CalendarEvent, CalendarView, CalendarDay } from "../types/event-calendar.js";
+import type { CalendarEvent, CalendarView, CalendarDay } from "../../types/event-calendar.js";
 import type { Component } from "vue";
 export interface EventCalendarListViewProps {
     /** Rendered element type @defaultValue 'div' */

package/dist/runtime/components/{EventCalendarListView.vue → event-calendar/EventCalendarListView.vue}

@@ -1,6 +1,6 @@
 <script>
 import { Primitive } from "reka-ui";
-import { useEventCalendarContext } from "../composables/useEventCalendarContext";
+import { useEventCalendarContext } from "../../composables/useEventCalendarContext";
 </script>
 
 <script setup>

package/dist/runtime/components/{EventCalendarListView.vue.d.ts → event-calendar/EventCalendarListView.vue.d.ts}

@@ -1,4 +1,4 @@
-import type { CalendarEvent, CalendarView, CalendarDay } from "../types/event-calendar.js";
+import type { CalendarEvent, CalendarView, CalendarDay } from "../../types/event-calendar.js";
 import type { Component } from "vue";
 export interface EventCalendarListViewProps {
     /** Rendered element type @defaultValue 'div' */

package/dist/runtime/components/{EventCalendarMonthView.d.vue.ts → event-calendar/EventCalendarMonthView.d.vue.ts}

@@ -1,4 +1,4 @@
-import type { CalendarEvent, CalendarView, CalendarDay } from "../types/event-calendar.js";
+import type { CalendarEvent, CalendarView, CalendarDay } from "../../types/event-calendar.js";
 import { type Component } from "vue";
 export interface EventCalendarMonthViewProps {
     /** Rendered element type @defaultValue 'div' */
@@ -22,7 +22,6 @@ export interface EventCalendarMonthViewSlots {
         day: CalendarDay;
     }) => any;
     loading: () => any;
-    empty: () => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/{EventCalendarMonthView.vue → event-calendar/EventCalendarMonthView.vue}

@@ -1,8 +1,8 @@
 <script>
 import { Primitive } from "reka-ui";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { useEventListener, onKeyStroke } from "@vueuse/core";
-import { useEventCalendarContext } from "../composables/useEventCalendarContext";
+import { useEventCalendarContext } from "../../composables/useEventCalendarContext";
 </script>
 
 <script setup>
@@ -11,11 +11,6 @@ const props = defineProps({
 });
 defineSlots();
 const ctx = useEventCalendarContext();
-const isEmpty = computed(
-  () => !ctx.loading.value && ctx.monthWeekLayouts.value.every(
-    (layout) => layout.spanning.length === 0 && layout.singleDay.length === 0
-  )
-);
 const expandedDay = ref(null);
 function openExpandDay(dateKey, e) {
   e.stopPropagation();
@@ -314,23 +309,6 @@ onKeyStroke("Escape", () => {
         <span class="sr-only">Loading events</span>
       </slot>
     </div>
-
-    <!-- Empty state -->
-    <div
-      v-else-if="isEmpty"
-      data-slot="emptyState"
-      :class="ctx.ui.value.emptyState({ class: ctx.propUi.value?.emptyState })">
-      <slot name="empty">
-        <UIcon
-          name="i-lucide-calendar-x2"
-          data-slot="emptyStateIcon"
-          :class="ctx.ui.value.emptyStateIcon({ class: ctx.propUi.value?.emptyStateIcon })"
-          aria-hidden="true" />
-        <p data-slot="emptyStateText" :class="ctx.ui.value.emptyStateText({ class: ctx.propUi.value?.emptyStateText })">
-          No events
-        </p>
-      </slot>
-    </div>
     </div>
   </Primitive>
 </template>

package/dist/runtime/components/{EventCalendarMonthView.vue.d.ts → event-calendar/EventCalendarMonthView.vue.d.ts}

@@ -1,4 +1,4 @@
-import type { CalendarEvent, CalendarView, CalendarDay } from "../types/event-calendar.js";
+import type { CalendarEvent, CalendarView, CalendarDay } from "../../types/event-calendar.js";
 import { type Component } from "vue";
 export interface EventCalendarMonthViewProps {
     /** Rendered element type @defaultValue 'div' */
@@ -22,7 +22,6 @@ export interface EventCalendarMonthViewSlots {
         day: CalendarDay;
     }) => any;
     loading: () => any;
-    empty: () => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/{EventCalendarTimeGrid.d.vue.ts → event-calendar/EventCalendarTimeGrid.d.vue.ts}

@@ -1,5 +1,5 @@
 import type { CalendarDate } from "@internationalized/date";
-import type { CalendarEvent, CalendarView } from "../types/event-calendar.js";
+import type { CalendarEvent, CalendarView } from "../../types/event-calendar.js";
 import { type Component } from "vue";
 export interface EventCalendarTimeGridProps {
     /** Rendered element type @defaultValue 'div' */
@@ -19,7 +19,6 @@ export interface EventCalendarTimeGridSlots {
         date: CalendarDate;
     }) => any;
     loading: () => any;
-    empty: () => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/{EventCalendarTimeGrid.vue → event-calendar/EventCalendarTimeGrid.vue}

@@ -1,7 +1,7 @@
 <script>
 import { Primitive } from "reka-ui";
-import { computed } from "vue";
-import { useEventCalendarContext } from "../composables/useEventCalendarContext";
+import {} from "vue";
+import { useEventCalendarContext } from "../../composables/useEventCalendarContext";
 import { format } from "#std/date";
 </script>
 
@@ -11,11 +11,6 @@ const props = defineProps({
 });
 defineSlots();
 const ctx = useEventCalendarContext();
-const isEmpty = computed(
-  () => !ctx.loading.value && ctx.timeGridDays.value.every(
-    (day) => day.allDayEvents.length === 0 && day.timedEvents.length === 0
-  )
-);
 </script>
 
 <template>
@@ -284,23 +279,6 @@ const isEmpty = computed(
         <span class="sr-only">Loading events</span>
       </slot>
     </div>
-
-    <!-- Empty state -->
-    <div
-      v-else-if="isEmpty"
-      data-slot="emptyState"
-      :class="ctx.ui.value.emptyState({ class: ctx.propUi.value?.emptyState })">
-      <slot name="empty">
-        <UIcon
-          name="i-lucide-calendar-x2"
-          data-slot="emptyStateIcon"
-          :class="ctx.ui.value.emptyStateIcon({ class: ctx.propUi.value?.emptyStateIcon })"
-          aria-hidden="true" />
-        <p data-slot="emptyStateText" :class="ctx.ui.value.emptyStateText({ class: ctx.propUi.value?.emptyStateText })">
-          No events
-        </p>
-      </slot>
-    </div>
     </div>
   </Primitive>
 </template>

package/dist/runtime/components/{EventCalendarTimeGrid.vue.d.ts → event-calendar/EventCalendarTimeGrid.vue.d.ts}

@@ -1,5 +1,5 @@
 import type { CalendarDate } from "@internationalized/date";
-import type { CalendarEvent, CalendarView } from "../types/event-calendar.js";
+import type { CalendarEvent, CalendarView } from "../../types/event-calendar.js";
 import { type Component } from "vue";
 export interface EventCalendarTimeGridProps {
     /** Rendered element type @defaultValue 'div' */
@@ -19,7 +19,6 @@ export interface EventCalendarTimeGridSlots {
         date: CalendarDate;
     }) => any;
     loading: () => any;
-    empty: () => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/org-chart/OrgChartConnectors.d.vue.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {
+    connectors: import("../../types/org-chart.js").OrgChartConnector[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/org-chart/OrgChartConnectors.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useOrgChartContext } from "../../composables/useOrgChartContext";
+const ctx = useOrgChartContext();
+</script>
+
+<template>
+  <svg
+    data-slot="connectorLayer"
+    :class="ctx.ui.value.connectorLayer({ class: ctx.propUi.value?.connectorLayer })"
+    :width="ctx.layout.value.width"
+    :height="ctx.layout.value.height"
+    :viewBox="`0 0 ${ctx.layout.value.width} ${ctx.layout.value.height}`"
+    aria-hidden="true"
+  >
+    <!-- Hierarchical connectors -->
+    <slot :connectors="ctx.layout.value.connectors">
+      <path
+        v-for="connector in ctx.layout.value.connectors"
+        :key="`${connector.fromId}-${connector.toId}`"
+        data-slot="connector"
+        :d="connector.path"
+        :class="[
+  ctx.ui.value.connector({ class: ctx.propUi.value?.connector }),
+  ctx.animated.value ? 'transition-all duration-300 ease-in-out' : ''
+]"
+      />
+    </slot>
+  </svg>
+</template>

package/dist/runtime/components/org-chart/OrgChartConnectors.vue.d.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {
+    connectors: import("../../types/org-chart.js").OrgChartConnector[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/org-chart/OrgChartControls.d.vue.ts

@@ -0,0 +1,19 @@
+declare var __VLS_1: {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomReset: () => void;
+    fitToView: () => void;
+    scale: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/org-chart/OrgChartControls.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useOrgChartContext } from "../../composables/useOrgChartContext";
+const ctx = useOrgChartContext();
+</script>
+
+<template>
+  <div
+    v-if="ctx.zoomConfig.value.enabled && ctx.zoomConfig.value.controls"
+    data-slot="zoomControls"
+    :class="ctx.ui.value.zoomControls({ class: ctx.propUi.value?.zoomControls })"
+  >
+    <slot
+      :zoom-in="ctx.zoomIn"
+      :zoom-out="ctx.zoomOut"
+      :zoom-reset="ctx.zoomReset"
+      :fit-to-view="ctx.fitToView"
+      :scale="ctx.scale.value"
+    >
+      <UButton icon="i-lucide-zoom-in" size="xs" color="neutral" variant="outline" square aria-label="Zoom in" @click="ctx.zoomIn" />
+      <UButton icon="i-lucide-zoom-out" size="xs" color="neutral" variant="outline" square aria-label="Zoom out" @click="ctx.zoomOut" />
+      <UButton icon="i-lucide-maximize" size="xs" color="neutral" variant="outline" square aria-label="Fit to view" @click="ctx.fitToView" />
+      <UButton icon="i-lucide-rotate-ccw" size="xs" color="neutral" variant="outline" square aria-label="Reset zoom" @click="ctx.zoomReset" />
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/org-chart/OrgChartControls.vue.d.ts

@@ -0,0 +1,19 @@
+declare var __VLS_1: {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomReset: () => void;
+    fitToView: () => void;
+    scale: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/org-chart/OrgChartNode.d.vue.ts

@@ -0,0 +1,30 @@
+import type { OrgChartTreeNode } from "../../types/org-chart.js";
+export interface OrgChartNodeProps {
+    node: OrgChartTreeNode;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<OrgChartNodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OrgChartNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    avatar?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    label?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    description?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    'collapse-toggle'?: (props: {
+        expanded: boolean;
+        count: number;
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/org-chart/OrgChartNode.vue

@@ -0,0 +1,129 @@
+<script>
+import { computed } from "vue";
+import { useOrgChartContext } from "../../composables/useOrgChartContext";
+</script>
+
+<script setup>
+const props = defineProps({
+  node: { type: Object, required: true }
+});
+const ctx = useOrgChartContext();
+const isExpanded = computed(() => ctx.isExpanded(props.node.data.id));
+const isSelected = computed(() => ctx.isSelected(props.node.data.id));
+const isFocused = computed(() => ctx.isFocused(props.node.data.id));
+const isMatched = computed(() => ctx.isMatched(props.node.data.id));
+const isDimmed = computed(() => ctx.isDimmed(props.node.data.id));
+const isDragging = computed(() => ctx.draggedNodeId.value === props.node.data.id);
+const isDropTarget = computed(() => ctx.dropTargetId.value === props.node.data.id);
+const hasChildren = computed(() => props.node.children.length > 0);
+const nodeStyle = computed(() => {
+  const _layout = ctx.layout.value;
+  const cfg = ctx.layoutConfig.value;
+  return {
+    left: `${props.node.x}px`,
+    top: `${props.node.y}px`,
+    width: `${cfg.nodeWidth}px`,
+    height: `${cfg.nodeHeight}px`
+  };
+});
+const togglePosition = computed(() => {
+  const cfg = ctx.layoutConfig.value;
+  const dir = ctx.direction.value;
+  switch (dir) {
+    case "vertical":
+      return {
+        left: `${cfg.nodeWidth / 2 - 10}px`,
+        top: `${cfg.nodeHeight - 2}px`
+      };
+    case "bottom-up":
+      return {
+        left: `${cfg.nodeWidth / 2 - 10}px`,
+        top: "-8px"
+      };
+    case "horizontal":
+      return {
+        left: `${cfg.nodeWidth - 2}px`,
+        top: `${cfg.nodeHeight / 2 - 10}px`
+      };
+    case "right-to-left":
+      return {
+        left: "-8px",
+        top: `${cfg.nodeHeight / 2 - 10}px`
+      };
+    default:
+      return {
+        left: `${cfg.nodeWidth / 2 - 10}px`,
+        top: `${cfg.nodeHeight - 2}px`
+      };
+  }
+});
+const nodeColor = computed(() => props.node.data.color);
+function nodeClasses() {
+  const classes = [ctx.ui.value.node({ class: ctx.propUi.value?.node })];
+  if (ctx.animated.value) classes.push(ctx.ui.value.nodeAnimated({ class: ctx.propUi.value?.nodeAnimated }));
+  if (isSelected.value) classes.push(ctx.ui.value.nodeSelected({ class: ctx.propUi.value?.nodeSelected }));
+  if (isFocused.value) classes.push(ctx.ui.value.nodeFocused({ class: ctx.propUi.value?.nodeFocused }));
+  if (isMatched.value) classes.push(ctx.ui.value.nodeMatched({ class: ctx.propUi.value?.nodeMatched }));
+  if (isDimmed.value) classes.push(ctx.ui.value.nodeDimmed({ class: ctx.propUi.value?.nodeDimmed }));
+  if (isDragging.value) classes.push(ctx.ui.value.nodeDragging({ class: ctx.propUi.value?.nodeDragging }));
+  if (isDropTarget.value) classes.push(ctx.ui.value.nodeDropTarget({ class: ctx.propUi.value?.nodeDropTarget }));
+  return classes;
+}
+</script>
+
+<template>
+  <div
+    :data-slot="'node'"
+    :data-node-id="node.data.id"
+    role="treeitem"
+    :aria-expanded="hasChildren ? isExpanded : void 0"
+    :aria-selected="isSelected"
+    :aria-level="node.depth + 1"
+    :aria-setsize="node.siblingCount"
+    :aria-posinset="node.indexInSiblings + 1"
+    :aria-label="`${node.data.name}${node.data.title ? ', ' + node.data.title : ''}`"
+    :tabindex="isFocused ? 0 : -1"
+    :draggable="ctx.draggable.value && !!node.parent"
+    :style="[nodeStyle, nodeColor ? { '--node-color': nodeColor === 'neutral' ? 'var(--ui-bg-inverted)' : `var(--ui-${nodeColor})` } : void 0]"
+    :class="nodeClasses()"
+    @click="ctx.handleNodeClick(node, $event)"
+    @keydown="ctx.onKeydown"
+    @dragstart="ctx.onDragStart(node.data.id, $event)"
+    @dragover="ctx.onDragOver(node.data.id, $event)"
+    @dragleave="ctx.onDragLeave($event)"
+    @drop="ctx.onDrop(node.data.id, $event)"
+    @dragend="ctx.onDragEnd($event)"
+  >
+    <slot name="avatar" :node="node.data">
+      <img v-if="node.data.avatar" :src="node.data.avatar" :alt="node.data.name" :class="ctx.ui.value.nodeAvatar({ class: ctx.propUi.value?.nodeAvatar })" />
+      <div v-else-if="node.data.icon" :class="ctx.ui.value.nodeIcon({ class: ctx.propUi.value?.nodeIcon })">
+        <UIcon :name="node.data.icon" />
+      </div>
+    </slot>
+
+    <div :class="ctx.ui.value.nodeContent({ class: ctx.propUi.value?.nodeContent })">
+      <slot name="label" :node="node.data">
+        <span :class="ctx.ui.value.nodeName({ class: ctx.propUi.value?.nodeName })">{{ node.data.name }}</span>
+      </slot>
+      <slot name="description" :node="node.data">
+        <span v-if="node.data.title" :class="ctx.ui.value.nodeTitle({ class: ctx.propUi.value?.nodeTitle })">{{ node.data.title }}</span>
+      </slot>
+    </div>
+
+    <!-- Collapse toggle -->
+    <button
+      v-if="hasChildren"
+      :data-slot="'collapseToggle'"
+      :style="togglePosition"
+      :class="ctx.ui.value.collapseToggle({ class: ctx.propUi.value?.collapseToggle })"
+      :aria-label="isExpanded ? 'Collapse' : `Expand (${ctx.getDescendantCount(node.data.id)} members)`"
+      @click.stop="ctx.toggleExpand(node.data.id)"
+    >
+      <slot name="collapse-toggle" :expanded="isExpanded" :count="ctx.getDescendantCount(node.data.id)" :node="node.data">
+        <span :class="ctx.ui.value.descendantBadge({ class: ctx.propUi.value?.descendantBadge })">
+          {{ isExpanded ? "\u2212" : "+" }}
+        </span>
+      </slot>
+    </button>
+  </div>
+</template>

package/dist/runtime/components/org-chart/OrgChartNode.vue.d.ts

@@ -0,0 +1,30 @@
+import type { OrgChartTreeNode } from "../../types/org-chart.js";
+export interface OrgChartNodeProps {
+    node: OrgChartTreeNode;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<OrgChartNodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OrgChartNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    avatar?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    label?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    description?: (props: {
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+} & {
+    'collapse-toggle'?: (props: {
+        expanded: boolean;
+        count: number;
+        node: import("../../types/org-chart.js").OrgChartNode;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};