@xleddyl/443-components-vue 0.2.3 → 0.4.0

package/dist/components/data/Tree.vue

@@ -1,10 +1,27 @@
 <template>
    <ul
       ref="tree"
+      :id="control.id.value"
+      :aria-label="ariaLabel"
+      :aria-labelledby="ariaLabelledby"
+      v-bind="$attrs"
+      :aria-describedby="joinIds($attrs['aria-describedby'], control.describedBy.value)"
+      :aria-invalid="control.invalid.value ? 'true' : void 0"
+      :aria-required="control.required.value ? 'true' : void 0"
+      :aria-disabled="control.disabled.value ? 'true' : void 0"
       class="k-tree"
       role="tree"
-      :aria-label="treeText"
-      :class="{ 'is-bordered': bordered }"
+      :class="[
+  `k-tree-${size}`,
+  {
+    'is-bordered': bordered,
+    'is-reorderable': canReorder,
+    'is-dragging': dragId !== null,
+    'is-invalid': control.invalid.value,
+    'is-disabled': control.disabled.value
+  }
+]"
+      data-k-shake
    >
       <li
          v-for="(entry, index) in visible"
@@ -18,7 +35,11 @@
          :aria-expanded="entry.hasChildren ? isExpanded(entry.node.id) : void 0"
          :aria-selected="selectable ? selected === entry.node.id : void 0"
          :aria-disabled="entry.node.disabled ? 'true' : void 0"
+         :aria-describedby="canReorder && !entry.node.disabled ? hintId : void 0"
+         :aria-keyshortcuts="canReorder && !entry.node.disabled ? keyShortcuts : void 0"
          :tabindex="entry.node.id === rovingId ? 0 : -1"
+         :class="{ 'is-moving': dragId === entry.node.id }"
+         :data-drop="dropState?.id === entry.node.id ? dropState.position : void 0"
          :style="{
   '--k-tree-level': entry.level - 1,
   '--k-row-delay': rowDelay(index - revealAnchor - 1)
@@ -26,7 +47,29 @@
          @click="activate(entry)"
          @keydown="onKeydown($event, entry, index)"
          @focus="focusId = entry.node.id"
+         @dragover="onDragOver($event, entry)"
+         @dragleave="onDragLeave($event, entry)"
+         @drop="onDrop($event, entry)"
       >
+         <span
+            v-if="canReorder"
+            class="k-tree-handle"
+            :class="{ 'is-disabled': entry.node.disabled }"
+            :draggable="entry.node.disabled ? void 0 : 'true'"
+            aria-hidden="true"
+            @dragstart="onDragStart($event, entry)"
+            @dragend="endDrag"
+            @click.stop
+         >
+            <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+               <circle cx="6" cy="4" r="1.1" />
+               <circle cx="10" cy="4" r="1.1" />
+               <circle cx="6" cy="8" r="1.1" />
+               <circle cx="10" cy="8" r="1.1" />
+               <circle cx="6" cy="12" r="1.1" />
+               <circle cx="10" cy="12" r="1.1" />
+            </svg>
+         </span>
          <span class="k-tree-toggle" aria-hidden="true" @click.stop="toggle(entry, index)">
             <Icon v-if="entry.hasChildren" name="chevron-right" />
          </span>
@@ -36,38 +79,89 @@
          <span class="k-tree-text">
             <slot name="label" :node="entry.node" :level="entry.level">
                <span class="k-tree-label">{{ entry.node.label }}</span>
-               <span v-if="entry.node.description" class="k-tree-description">{{
-                  entry.node.description
-               }}</span>
+               <span
+                  v-if="entry.node.description"
+                  class="k-tree-description"
+                  :class="`k-tree-description-${entry.node.descriptionVariant ?? descriptionVariant}`"
+                  >{{ entry.node.description }}</span
+               >
             </slot>
          </span>
          <span v-if="entry.node.meta || $slots.meta" class="k-tree-meta">
             <slot name="meta" :node="entry.node">{{ entry.node.meta }}</slot>
          </span>
+         <span v-if="checkmark && selectable" class="k-tree-check" aria-hidden="true">
+            <Icon v-if="selected === entry.node.id" name="check" />
+         </span>
+      </li>
+      <li v-if="!visible.length" class="k-tree-empty" role="none">
+         <slot name="empty">{{ emptyLabel }}</slot>
       </li>
    </ul>
+   <template v-if="canReorder">
+      <span :id="hintId" class="k-visually-hidden">{{ hintText }}</span>
+      <span class="k-visually-hidden" role="status" aria-live="polite">{{ announcement }}</span>
+   </template>
 </template>
 
 <script setup>
 import { computed, nextTick, ref, useId, useTemplateRef } from "vue";
+import { useFieldControl } from "../../composables/useField";
 import { useLocale } from "../../composables/useLocale";
+import { joinIds } from "../../internal/forms/control";
 import Icon from "../core/Icon.vue";
 import { rowDelay } from "../../internal/data/stagger";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   nodes: { type: Array, required: true },
   label: { type: String, required: false },
   selectable: { type: Boolean, required: false, default: true },
-  bordered: { type: Boolean, required: false, default: true }
+  bordered: { type: Boolean, required: false, default: true },
+  size: { type: String, required: false, default: "md" },
+  checkmark: { type: Boolean, required: false },
+  emptyText: { type: String, required: false },
+  descriptionVariant: { type: String, required: false, default: "mono" },
+  reorderable: { type: Boolean, required: false },
+  nestable: { type: Boolean, required: false },
+  canDrop: { type: Function, required: false },
+  reorderText: { type: String, required: false },
+  invalid: { type: Boolean, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false }
 });
 const { t } = useLocale();
-const treeText = computed(() => props.label ?? t("tree.label"));
-const emit = defineEmits(["select"]);
+const emit = defineEmits(["select", "move"]);
 const expanded = defineModel("expanded", { type: Array, ...{ default: () => [] } });
 const selected = defineModel("selected", { type: [String, Number, null], ...{ default: null } });
+const control = useFieldControl({
+  invalid: () => props.invalid,
+  disabled: () => props.disabled,
+  required: () => props.required,
+  labelable: false
+});
 const baseId = useId();
+const hintId = `${baseId}-hint`;
 const tree = useTemplateRef("tree");
 const focusId = ref(selected.value ?? props.nodes[0]?.id ?? null);
 const revealAnchor = ref(-1);
+const dragId = ref(null);
+const dropState = ref(null);
+const announcement = ref("");
+const ariaLabel = computed(() => {
+  if (props.label) return props.label;
+  return control.field ? void 0 : t("tree.label");
+});
+const ariaLabelledby = computed(
+  () => !props.label && control.field ? control.field.labelId : void 0
+);
+const emptyLabel = computed(() => props.emptyText ?? t("tree.empty"));
+const canReorder = computed(() => props.reorderable && !control.disabled.value);
+const hintText = computed(
+  () => props.reorderText ?? t(props.nestable ? "tree.reorderNestedHint" : "tree.reorderHint")
+);
+const keyShortcuts = computed(
+  () => props.nestable ? "Alt+ArrowUp Alt+ArrowDown Alt+ArrowLeft Alt+ArrowRight" : "Alt+ArrowUp Alt+ArrowDown"
+);
 const expandedSet = computed(() => new Set(expanded.value));
 function rowId(id) {
   return `${baseId}-node-${id}`;
@@ -75,16 +169,27 @@ function rowId(id) {
 function isExpanded(id) {
   return expandedSet.value.has(id);
 }
+const index = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  const walk = (nodes, parent) => {
+    nodes.forEach((node, position) => {
+      map.set(node.id, { node, parent, index: position, siblings: nodes });
+      if (node.children?.length) walk(node.children, node.id);
+    });
+  };
+  walk(props.nodes, null);
+  return map;
+});
 const visible = computed(() => {
   const result = [];
   const walk = (nodes, level, parentId) => {
-    nodes.forEach((node, index) => {
+    nodes.forEach((node, position) => {
       const hasChildren = Boolean(node.children?.length);
       result.push({
         node,
         level,
         setSize: nodes.length,
-        position: index + 1,
+        position: position + 1,
         parentId,
         hasChildren
       });
@@ -99,18 +204,19 @@ const rovingId = computed(() => {
   if (list.some((entry) => entry.node.id === focusId.value)) return focusId.value;
   return list.find((entry) => entry.node.id === selected.value)?.node.id ?? list[0]?.node.id;
 });
-function setExpanded(entry, index, open) {
+function setExpanded(entry, position, open) {
   if (!entry.hasChildren || isExpanded(entry.node.id) === open) return;
-  revealAnchor.value = index;
+  revealAnchor.value = position;
   expanded.value = open ? [...expanded.value, entry.node.id] : expanded.value.filter((id) => id !== entry.node.id);
 }
-function toggle(entry, index) {
+function toggle(entry, position) {
   if (entry.node.disabled) return;
-  setExpanded(entry, index, !isExpanded(entry.node.id));
+  setExpanded(entry, position, !isExpanded(entry.node.id));
 }
 function activate(entry) {
   if (entry.node.disabled) return;
   focusId.value = entry.node.id;
+  if (control.disabled.value) return;
   if (props.selectable) selected.value = entry.node.id;
   emit("select", entry.node);
 }
@@ -121,14 +227,80 @@ function focusNode(id) {
     tree.value?.querySelector(`#${CSS.escape(rowId(id))}`)?.focus();
   });
 }
-function onKeydown(event, entry, index) {
+function contains(node, id) {
+  return Boolean(node.children?.some((child) => child.id === id || contains(child, id)));
+}
+function buildMove(nodeId, targetId, position) {
+  const source = index.value.get(nodeId);
+  const target = index.value.get(targetId);
+  if (!source || !target || nodeId === targetId) return null;
+  if (source.node.disabled || contains(source.node, targetId)) return null;
+  const from = { parent: source.parent, index: source.index };
+  let to;
+  if (position === "inside") {
+    if (!props.nestable || target.node.disabled) return null;
+    const children = target.node.children ?? [];
+    const count = children.filter((child) => child.id !== nodeId).length;
+    to = { parent: targetId, index: count };
+  } else {
+    if (!props.nestable && target.parent !== source.parent) return null;
+    let at = position === "before" ? target.index : target.index + 1;
+    if (target.parent === source.parent && source.index < at) at--;
+    to = { parent: target.parent, index: at };
+  }
+  if (to.parent === from.parent && to.index === from.index) return null;
+  const move = { node: source.node, target: target.node, position, from, to };
+  if (props.canDrop && !props.canDrop(move)) return null;
+  return move;
+}
+function announce(move) {
+  const parent = move.to.parent === null ? void 0 : index.value.get(move.to.parent);
+  const siblings = parent ? parent.node.children ?? [] : props.nodes;
+  const count = move.to.parent === move.from.parent ? siblings.length : siblings.length + 1;
+  const params = {
+    label: move.node.label,
+    position: move.to.index + 1,
+    count,
+    parent: parent?.node.label ?? ""
+  };
+  const key = parent && move.to.parent !== move.from.parent ? "tree.movedInto" : "tree.moved";
+  announcement.value = t(key, params);
+}
+function commit(move) {
+  if (move.to.parent !== null && !isExpanded(move.to.parent))
+    expanded.value = [...expanded.value, move.to.parent];
+  emit("move", move);
+  announce(move);
+  focusNode(move.node.id);
+}
+function keyboardMove(event, entry) {
+  const source = index.value.get(entry.node.id);
+  if (!source) return false;
+  const previous = source.siblings[source.index - 1];
+  const next = source.siblings[source.index + 1];
+  let move = null;
+  if (event.key === "ArrowUp" && previous) move = buildMove(entry.node.id, previous.id, "before");
+  else if (event.key === "ArrowDown" && next) move = buildMove(entry.node.id, next.id, "after");
+  else if (event.key === "ArrowRight" && props.nestable && previous)
+    move = buildMove(entry.node.id, previous.id, "inside");
+  else if (event.key === "ArrowLeft" && props.nestable && source.parent !== null)
+    move = buildMove(entry.node.id, source.parent, "after");
+  else return false;
+  if (move) commit(move);
+  return true;
+}
+function onKeydown(event, entry, position) {
+  if (event.altKey && canReorder.value && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+    if (keyboardMove(event, entry)) event.preventDefault();
+    return;
+  }
   const list = visible.value;
   switch (event.key) {
     case "ArrowDown":
-      focusNode(list[index + 1]?.node.id);
+      focusNode(list[position + 1]?.node.id);
       break;
     case "ArrowUp":
-      focusNode(list[index - 1]?.node.id);
+      focusNode(list[position - 1]?.node.id);
       break;
     case "Home":
       focusNode(list[0]?.node.id);
@@ -138,21 +310,73 @@ function onKeydown(event, entry, index) {
       break;
     case "ArrowRight":
       if (!entry.hasChildren) return;
-      if (isExpanded(entry.node.id)) focusNode(list[index + 1]?.node.id);
-      else setExpanded(entry, index, true);
+      if (isExpanded(entry.node.id)) focusNode(list[position + 1]?.node.id);
+      else setExpanded(entry, position, true);
       break;
     case "ArrowLeft":
-      if (entry.hasChildren && isExpanded(entry.node.id)) setExpanded(entry, index, false);
+      if (entry.hasChildren && isExpanded(entry.node.id)) setExpanded(entry, position, false);
       else focusNode(entry.parentId);
       break;
     case "Enter":
     case " ":
       activate(entry);
-      if (event.key === "Enter") toggle(entry, index);
+      if (event.key === "Enter") toggle(entry, position);
       break;
     default:
       return;
   }
   event.preventDefault();
 }
+function onDragStart(event, entry) {
+  if (!canReorder.value || entry.node.disabled) {
+    event.preventDefault();
+    return;
+  }
+  dragId.value = entry.node.id;
+  const transfer = event.dataTransfer;
+  if (!transfer) return;
+  transfer.effectAllowed = "move";
+  transfer.setData("text/plain", entry.node.label);
+  const row = event.currentTarget?.closest(".k-tree-row");
+  if (row) transfer.setDragImage(row, 16, row.offsetHeight / 2);
+}
+function dropPosition(event, row) {
+  const rect = row.getBoundingClientRect();
+  const ratio = rect.height ? (event.clientY - rect.top) / rect.height : 0.5;
+  if (!props.nestable) return ratio < 0.5 ? "before" : "after";
+  if (ratio < 0.25) return "before";
+  if (ratio > 0.75) return "after";
+  return "inside";
+}
+function onDragOver(event, entry) {
+  if (dragId.value === null) return;
+  const row = event.currentTarget;
+  const position = dropPosition(event, row);
+  const move = buildMove(dragId.value, entry.node.id, position);
+  if (!move) {
+    if (dropState.value?.id === entry.node.id) dropState.value = null;
+    return;
+  }
+  event.preventDefault();
+  if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+  if (dropState.value?.id !== entry.node.id || dropState.value.position !== position)
+    dropState.value = { id: entry.node.id, position };
+}
+function onDragLeave(event, entry) {
+  const row = event.currentTarget;
+  if (event.relatedTarget instanceof Node && row.contains(event.relatedTarget)) return;
+  if (dropState.value?.id === entry.node.id) dropState.value = null;
+}
+function onDrop(event, entry) {
+  if (dragId.value === null) return;
+  event.preventDefault();
+  const position = dropPosition(event, event.currentTarget);
+  const move = buildMove(dragId.value, entry.node.id, position);
+  endDrag();
+  if (move) commit(move);
+}
+function endDrag() {
+  dragId.value = null;
+  dropState.value = null;
+}
 </script>

package/dist/components/data/Tree.vue.d.ts

@@ -1,29 +1,42 @@
-import type { TreeNode } from './types';
+import type { TreeDescriptionVariant, TreeMove, TreeNode, TreeSize } from './types';
+type NodeId = TreeNode['id'];
 declare var __VLS_12: {
     node: TreeNode;
     level: number;
 }, __VLS_14: {
     node: TreeNode;
-};
+}, __VLS_21: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_12) => any;
 } & {
     meta?: (props: typeof __VLS_14) => any;
+} & {
+    empty?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     nodes: TreeNode[];
     label?: string;
     selectable?: boolean;
     bordered?: boolean;
-    expanded?: TreeNode["id"][];
-    selected?: TreeNode["id"] | null;
+    size?: TreeSize;
+    checkmark?: boolean;
+    emptyText?: string;
+    descriptionVariant?: TreeDescriptionVariant;
+    reorderable?: boolean;
+    nestable?: boolean;
+    canDrop?: (move: TreeMove) => boolean;
+    reorderText?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    expanded?: NodeId[];
+    selected?: NodeId | null;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
     title?: string | undefined | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -135,7 +148,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -172,6 +185,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -209,6 +223,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     part?: string | undefined;
     popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    move: (move: TreeMove) => any;
     select: (node: TreeNode) => any;
     "update:selected": (value: string | number | null) => any;
     "update:expanded": (value: (string | number)[]) => any;
@@ -217,15 +232,25 @@ declare const __VLS_base: import("vue").DefineComponent<{
     label?: string;
     selectable?: boolean;
     bordered?: boolean;
-    expanded?: TreeNode["id"][];
-    selected?: TreeNode["id"] | null;
+    size?: TreeSize;
+    checkmark?: boolean;
+    emptyText?: string;
+    descriptionVariant?: TreeDescriptionVariant;
+    reorderable?: boolean;
+    nestable?: boolean;
+    canDrop?: (move: TreeMove) => boolean;
+    reorderText?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    expanded?: NodeId[];
+    selected?: NodeId | null;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
     title?: string | undefined | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -337,7 +362,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -374,6 +399,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -411,12 +437,16 @@ declare const __VLS_base: import("vue").DefineComponent<{
     part?: string | undefined;
     popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
 }> & Readonly<{
+    onMove?: ((move: TreeMove) => any) | undefined;
     onSelect?: ((node: TreeNode) => any) | undefined;
     "onUpdate:selected"?: ((value: string | number | null) => any) | undefined;
     "onUpdate:expanded"?: ((value: (string | number)[]) => any) | undefined;
 }>, {
+    invalid: boolean;
+    size: TreeSize;
     selectable: boolean;
     bordered: boolean;
+    descriptionVariant: TreeDescriptionVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/data/index.d.ts

@@ -2,11 +2,14 @@ export { default as Avatar } from './Avatar.vue';
 export { default as AvatarGroup } from './AvatarGroup.vue';
 export { default as Badge } from './Badge.vue';
 export { default as DescriptionList } from './DescriptionList.vue';
+export { default as FilterPill } from './FilterPill.vue';
 export { default as FilterPills } from './FilterPills.vue';
 export { default as Pagination } from './Pagination.vue';
+export { default as SelectionBar } from './SelectionBar.vue';
 export { default as Stat } from './Stat.vue';
 export { default as Table } from './Table.vue';
 export { default as Tag } from './Tag.vue';
 export { default as Timeline } from './Timeline.vue';
 export { default as Tree } from './Tree.vue';
 export type * from './types';
+export { applyTreeMove } from '../../internal/data/tree';

package/dist/components/data/index.mjs

@@ -2,10 +2,13 @@ export { default as Avatar } from "./Avatar.vue";
 export { default as AvatarGroup } from "./AvatarGroup.vue";
 export { default as Badge } from "./Badge.vue";
 export { default as DescriptionList } from "./DescriptionList.vue";
+export { default as FilterPill } from "./FilterPill.vue";
 export { default as FilterPills } from "./FilterPills.vue";
 export { default as Pagination } from "./Pagination.vue";
+export { default as SelectionBar } from "./SelectionBar.vue";
 export { default as Stat } from "./Stat.vue";
 export { default as Table } from "./Table.vue";
 export { default as Tag } from "./Tag.vue";
 export { default as Timeline } from "./Timeline.vue";
 export { default as Tree } from "./Tree.vue";
+export { applyTreeMove } from "../../internal/data/tree.mjs";

package/dist/components/data/types.d.ts

@@ -1,4 +1,5 @@
 import type { Tone } from '../core/types';
+import type { MenuItems } from '../overlays/types';
 export type BadgeVariant = 'soft' | 'solid' | 'outline';
 export type BadgeSize = 'sm' | 'md';
 export type TableAlign = 'start' | 'center' | 'end';
@@ -56,15 +57,38 @@ export interface TreeNode {
     id: string | number;
     label: string;
     description?: string;
+    descriptionVariant?: TreeDescriptionVariant;
     meta?: string;
     icon?: string;
     disabled?: boolean;
     children?: TreeNode[];
 }
-export interface FilterPillOption {
-    value: string | number;
+export type TreeDescriptionVariant = 'text' | 'mono';
+export type TreeSize = 'sm' | 'md';
+export type TreeDropPosition = 'before' | 'after' | 'inside';
+export interface TreeLocation {
+    parent: TreeNode['id'] | null;
+    index: number;
+}
+export interface TreeMove {
+    node: TreeNode;
+    target: TreeNode;
+    position: TreeDropPosition;
+    from: TreeLocation;
+    to: TreeLocation;
+}
+export type FilterPillValue = string | number;
+export interface FilterPillOption<T extends FilterPillValue = FilterPillValue> {
+    value: T;
     label: string;
+    valueLabel?: string;
     count?: number;
     icon?: string;
     disabled?: boolean;
+    menu?: MenuItems;
+    menuLabel?: string;
+    panel?: boolean;
+    panelLabel?: string;
+    active?: boolean;
 }
+export type SelectionBarPlacement = 'inline' | 'sticky' | 'floating';