@treeui/vue 0.8.0 → 0.10.0

package/dist/components/TSelectableList.vue_vue_type_script_setup_true_lang.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSelectableList.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TSelectableList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, getNextEnabledIndex, isActivationKey } from '@treeui/utils';\nimport { computed, nextTick, ref, useAttrs, watch, type ComponentPublicInstance } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TSelectableListItem {\n  label: string;\n  value: string;\n  description?: string;\n  meta?: string;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    defaultValue?: string;\n    items?: TSelectableListItem[];\n    size?: TSize;\n    disabled?: boolean;\n    emptyText?: string;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultValue: '',\n    items: () => [],\n    size: 'md',\n    disabled: false,\n    emptyText: 'No items available.',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n  item?: (props: {\n    item: TSelectableListItem;\n    selected: boolean;\n    focused: boolean;\n  }) => unknown;\n  empty?: () => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst baseId = createId('t-selectable-list');\nconst itemRefs = ref<Map<string, HTMLButtonElement>>(new Map());\nconst internalValue = ref(props.defaultValue);\n\nconst selectedValue = computed(() => props.modelValue ?? internalValue.value);\n\nconst getInitialFocusedIndex = () => {\n  const selectedIndex = props.items.findIndex((item) =>\n    item.value === selectedValue.value && !item.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    return selectedIndex;\n  }\n\n  return props.items.findIndex((item) => !item.disabled);\n};\n\nconst focusedIndex = ref(getInitialFocusedIndex());\n\nconst rootClasses = computed(() => [\n  't-selectable-list',\n  `t-selectable-list--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst isSelected = (value: string) => selectedValue.value === value;\n\nconst setItemRef = (element: Element | ComponentPublicInstance | null, value: string) => {\n  const resolvedElement =\n    element instanceof HTMLButtonElement\n      ? element\n      : element && '$el' in element && element.$el instanceof HTMLButtonElement\n        ? element.$el\n        : null;\n\n  if (resolvedElement instanceof HTMLButtonElement) {\n    itemRefs.value.set(value, resolvedElement);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n\n  if (!item) {\n    return;\n  }\n\n  focusedIndex.value = index;\n  nextTick(() => itemRefs.value.get(item.value)?.focus());\n};\n\nconst selectItem = (item: TSelectableListItem, focus = false) => {\n  if (props.disabled || item.disabled) {\n    return;\n  }\n\n  if (props.modelValue === undefined) {\n    internalValue.value = item.value;\n  }\n\n  emit('update:modelValue', item.value);\n\n  if (focus) {\n    const index = props.items.findIndex((candidate) => candidate.value === item.value);\n\n    if (index >= 0) {\n      focusItem(index);\n    }\n  }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, index: number) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (event.key === 'Home') {\n    event.preventDefault();\n    const firstIndex = props.items.findIndex((item) => !item.disabled);\n\n    if (firstIndex >= 0) {\n      selectItem(props.items[firstIndex], true);\n    }\n\n    return;\n  }\n\n  if (event.key === 'End') {\n    event.preventDefault();\n    const lastIndex = [...props.items].reverse().findIndex((item) => !item.disabled);\n\n    if (lastIndex >= 0) {\n      const resolvedIndex = props.items.length - 1 - lastIndex;\n      selectItem(props.items[resolvedIndex], true);\n    }\n\n    return;\n  }\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    event.preventDefault();\n    const nextIndex = getNextEnabledIndex(index, props.items, 1);\n\n    if (nextIndex >= 0) {\n      selectItem(props.items[nextIndex], true);\n    }\n\n    return;\n  }\n\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    event.preventDefault();\n    const previousIndex = getNextEnabledIndex(index, props.items, -1);\n\n    if (previousIndex >= 0) {\n      selectItem(props.items[previousIndex], true);\n    }\n\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(props.items[index], true);\n  }\n};\n\nconst getTabIndex = (index: number) => (focusedIndex.value === index ? 0 : -1);\n\nwatch(\n  () => [props.items, props.modelValue] as const,\n  () => {\n    const nextIndex = getInitialFocusedIndex();\n    focusedIndex.value = nextIndex >= 0 ? nextIndex : -1;\n  },\n  { deep: true },\n);\n</script>\n\n<template>\n  <div\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    role=\"listbox\"\n    :aria-disabled=\"disabled || undefined\"\n  >\n    <template v-if=\"items.length > 0\">\n      <button\n        v-for=\"(item, index) in items\"\n        :id=\"`${baseId}-${item.value}`\"\n        :ref=\"(element) => setItemRef(element, item.value)\"\n        :key=\"item.value\"\n        type=\"button\"\n        class=\"t-selectable-list__item\"\n        :class=\"{\n          'is-selected': isSelected(item.value),\n          'is-disabled': disabled || item.disabled,\n        }\"\n        role=\"option\"\n        :aria-selected=\"isSelected(item.value)\"\n        :tabindex=\"disabled || item.disabled ? -1 : getTabIndex(index)\"\n        :disabled=\"disabled || item.disabled\"\n        @click=\"selectItem(item)\"\n        @keydown=\"onItemKeydown($event, index)\"\n        @focus=\"focusedIndex = index\"\n      >\n        <slot\n          name=\"item\"\n          :item=\"item\"\n          :selected=\"isSelected(item.value)\"\n          :focused=\"focusedIndex === index\"\n        >\n          <span\n            class=\"t-selectable-list__indicator\"\n            aria-hidden=\"true\"\n          />\n\n          <span class=\"t-selectable-list__copy\">\n            <span class=\"t-selectable-list__label\">{{ item.label }}</span>\n            <span\n              v-if=\"item.description\"\n              class=\"t-selectable-list__description\"\n            >\n              {{ item.description }}\n            </span>\n          </span>\n\n          <span\n            v-if=\"item.meta\"\n            class=\"t-selectable-list__meta\"\n          >\n            {{ item.meta }}\n          </span>\n        </slot>\n      </button>\n    </template>\n\n    <div\n      v-else\n      class=\"t-selectable-list__empty\"\n    >\n      <slot name=\"empty\">\n        {{ emptyText }}\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TSelectableList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,133 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeProps as s, nextTick as c, normalizeClass as l, openBlock as u, ref as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, useAttrs as g, watch as _ } from "vue";
+import { createId as v, getNextEnabledIndex as y, isActivationKey as b } from "@treeui/utils";
+//#region src/components/TSelectableList.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-disabled"], S = [
+	"id",
+	"aria-selected",
+	"tabindex",
+	"disabled",
+	"onClick",
+	"onKeydown",
+	"onFocus"
+], C = { class: "t-selectable-list__copy" }, w = { class: "t-selectable-list__label" }, T = {
+	key: 0,
+	class: "t-selectable-list__description"
+}, E = {
+	key: 0,
+	class: "t-selectable-list__meta"
+}, D = {
+	key: 1,
+	class: "t-selectable-list__empty"
+}, O = /*@__PURE__*/ o({
+	inheritAttrs: !1,
+	__name: "TSelectableList",
+	props: {
+		modelValue: { default: void 0 },
+		defaultValue: { default: "" },
+		items: { default: () => [] },
+		size: { default: "md" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "No items available." }
+	},
+	emits: ["update:modelValue"],
+	setup(o, { emit: O }) {
+		let k = o, A = O, j = g(), M = v("t-selectable-list"), N = d(/* @__PURE__ */ new Map()), P = d(k.defaultValue), F = t(() => k.modelValue ?? P.value), I = () => {
+			let e = k.items.findIndex((e) => e.value === F.value && !e.disabled);
+			return e >= 0 ? e : k.items.findIndex((e) => !e.disabled);
+		}, L = d(I()), R = t(() => [
+			"t-selectable-list",
+			`t-selectable-list--${k.size}`,
+			{ "is-disabled": k.disabled },
+			j.class
+		]), z = t(() => j.style), B = t(() => {
+			let { class: e, style: t, ...n } = j;
+			return n;
+		}), V = (e) => F.value === e, H = (e, t) => {
+			let n = e instanceof HTMLButtonElement ? e : e && "$el" in e && e.$el instanceof HTMLButtonElement ? e.$el : null;
+			n instanceof HTMLButtonElement ? N.value.set(t, n) : N.value.delete(t);
+		}, U = (e) => {
+			let t = k.items[e];
+			t && (L.value = e, c(() => N.value.get(t.value)?.focus()));
+		}, W = (e, t = !1) => {
+			if (!(k.disabled || e.disabled) && (k.modelValue === void 0 && (P.value = e.value), A("update:modelValue", e.value), t)) {
+				let t = k.items.findIndex((t) => t.value === e.value);
+				t >= 0 && U(t);
+			}
+		}, G = (e, t) => {
+			if (!k.disabled) {
+				if (e.key === "Home") {
+					e.preventDefault();
+					let t = k.items.findIndex((e) => !e.disabled);
+					t >= 0 && W(k.items[t], !0);
+					return;
+				}
+				if (e.key === "End") {
+					e.preventDefault();
+					let t = [...k.items].reverse().findIndex((e) => !e.disabled);
+					if (t >= 0) {
+						let e = k.items.length - 1 - t;
+						W(k.items[e], !0);
+					}
+					return;
+				}
+				if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+					e.preventDefault();
+					let n = y(t, k.items, 1);
+					n >= 0 && W(k.items[n], !0);
+					return;
+				}
+				if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+					e.preventDefault();
+					let n = y(t, k.items, -1);
+					n >= 0 && W(k.items[n], !0);
+					return;
+				}
+				b(e) && (e.preventDefault(), W(k.items[t], !0));
+			}
+		}, K = (e) => L.value === e ? 0 : -1;
+		return _(() => [k.items, k.modelValue], () => {
+			let e = I();
+			L.value = e >= 0 ? e : -1;
+		}, { deep: !0 }), (t, c) => (u(), r("div", s(B.value, {
+			class: R.value,
+			style: z.value,
+			role: "listbox",
+			"aria-disabled": o.disabled || void 0
+		}), [o.items.length > 0 ? (u(!0), r(e, { key: 0 }, f(o.items, (e, a) => (u(), r("button", {
+			id: `${h(M)}-${e.value}`,
+			ref_for: !0,
+			ref: (t) => H(t, e.value),
+			key: e.value,
+			type: "button",
+			class: l(["t-selectable-list__item", {
+				"is-selected": V(e.value),
+				"is-disabled": o.disabled || e.disabled
+			}]),
+			role: "option",
+			"aria-selected": V(e.value),
+			tabindex: o.disabled || e.disabled ? -1 : K(a),
+			disabled: o.disabled || e.disabled,
+			onClick: (t) => W(e),
+			onKeydown: (e) => G(e, a),
+			onFocus: (e) => L.value = a
+		}, [p(t.$slots, "item", {
+			item: e,
+			selected: V(e.value),
+			focused: L.value === a
+		}, () => [
+			c[0] ||= i("span", {
+				class: "t-selectable-list__indicator",
+				"aria-hidden": "true"
+			}, null, -1),
+			i("span", C, [i("span", w, m(e.label), 1), e.description ? (u(), r("span", T, m(e.description), 1)) : n("", !0)]),
+			e.meta ? (u(), r("span", E, m(e.meta), 1)) : n("", !0)
+		])], 42, S))), 128)) : (u(), r("div", D, [p(t.$slots, "empty", {}, () => [a(m(o.emptyText), 1)])]))], 16, x));
+	}
+});
+//#endregion
+export { O as default };
+
+//# sourceMappingURL=TSelectableList.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/TSelectableList.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSelectableList.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TSelectableList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, getNextEnabledIndex, isActivationKey } from '@treeui/utils';\nimport { computed, nextTick, ref, useAttrs, watch, type ComponentPublicInstance } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TSelectableListItem {\n  label: string;\n  value: string;\n  description?: string;\n  meta?: string;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    defaultValue?: string;\n    items?: TSelectableListItem[];\n    size?: TSize;\n    disabled?: boolean;\n    emptyText?: string;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultValue: '',\n    items: () => [],\n    size: 'md',\n    disabled: false,\n    emptyText: 'No items available.',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n  item?: (props: {\n    item: TSelectableListItem;\n    selected: boolean;\n    focused: boolean;\n  }) => unknown;\n  empty?: () => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst baseId = createId('t-selectable-list');\nconst itemRefs = ref<Map<string, HTMLButtonElement>>(new Map());\nconst internalValue = ref(props.defaultValue);\n\nconst selectedValue = computed(() => props.modelValue ?? internalValue.value);\n\nconst getInitialFocusedIndex = () => {\n  const selectedIndex = props.items.findIndex((item) =>\n    item.value === selectedValue.value && !item.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    return selectedIndex;\n  }\n\n  return props.items.findIndex((item) => !item.disabled);\n};\n\nconst focusedIndex = ref(getInitialFocusedIndex());\n\nconst rootClasses = computed(() => [\n  't-selectable-list',\n  `t-selectable-list--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst isSelected = (value: string) => selectedValue.value === value;\n\nconst setItemRef = (element: Element | ComponentPublicInstance | null, value: string) => {\n  const resolvedElement =\n    element instanceof HTMLButtonElement\n      ? element\n      : element && '$el' in element && element.$el instanceof HTMLButtonElement\n        ? element.$el\n        : null;\n\n  if (resolvedElement instanceof HTMLButtonElement) {\n    itemRefs.value.set(value, resolvedElement);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n\n  if (!item) {\n    return;\n  }\n\n  focusedIndex.value = index;\n  nextTick(() => itemRefs.value.get(item.value)?.focus());\n};\n\nconst selectItem = (item: TSelectableListItem, focus = false) => {\n  if (props.disabled || item.disabled) {\n    return;\n  }\n\n  if (props.modelValue === undefined) {\n    internalValue.value = item.value;\n  }\n\n  emit('update:modelValue', item.value);\n\n  if (focus) {\n    const index = props.items.findIndex((candidate) => candidate.value === item.value);\n\n    if (index >= 0) {\n      focusItem(index);\n    }\n  }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, index: number) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (event.key === 'Home') {\n    event.preventDefault();\n    const firstIndex = props.items.findIndex((item) => !item.disabled);\n\n    if (firstIndex >= 0) {\n      selectItem(props.items[firstIndex], true);\n    }\n\n    return;\n  }\n\n  if (event.key === 'End') {\n    event.preventDefault();\n    const lastIndex = [...props.items].reverse().findIndex((item) => !item.disabled);\n\n    if (lastIndex >= 0) {\n      const resolvedIndex = props.items.length - 1 - lastIndex;\n      selectItem(props.items[resolvedIndex], true);\n    }\n\n    return;\n  }\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    event.preventDefault();\n    const nextIndex = getNextEnabledIndex(index, props.items, 1);\n\n    if (nextIndex >= 0) {\n      selectItem(props.items[nextIndex], true);\n    }\n\n    return;\n  }\n\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    event.preventDefault();\n    const previousIndex = getNextEnabledIndex(index, props.items, -1);\n\n    if (previousIndex >= 0) {\n      selectItem(props.items[previousIndex], true);\n    }\n\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(props.items[index], true);\n  }\n};\n\nconst getTabIndex = (index: number) => (focusedIndex.value === index ? 0 : -1);\n\nwatch(\n  () => [props.items, props.modelValue] as const,\n  () => {\n    const nextIndex = getInitialFocusedIndex();\n    focusedIndex.value = nextIndex >= 0 ? nextIndex : -1;\n  },\n  { deep: true },\n);\n</script>\n\n<template>\n  <div\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    role=\"listbox\"\n    :aria-disabled=\"disabled || undefined\"\n  >\n    <template v-if=\"items.length > 0\">\n      <button\n        v-for=\"(item, index) in items\"\n        :id=\"`${baseId}-${item.value}`\"\n        :ref=\"(element) => setItemRef(element, item.value)\"\n        :key=\"item.value\"\n        type=\"button\"\n        class=\"t-selectable-list__item\"\n        :class=\"{\n          'is-selected': isSelected(item.value),\n          'is-disabled': disabled || item.disabled,\n        }\"\n        role=\"option\"\n        :aria-selected=\"isSelected(item.value)\"\n        :tabindex=\"disabled || item.disabled ? -1 : getTabIndex(index)\"\n        :disabled=\"disabled || item.disabled\"\n        @click=\"selectItem(item)\"\n        @keydown=\"onItemKeydown($event, index)\"\n        @focus=\"focusedIndex = index\"\n      >\n        <slot\n          name=\"item\"\n          :item=\"item\"\n          :selected=\"isSelected(item.value)\"\n          :focused=\"focusedIndex === index\"\n        >\n          <span\n            class=\"t-selectable-list__indicator\"\n            aria-hidden=\"true\"\n          />\n\n          <span class=\"t-selectable-list__copy\">\n            <span class=\"t-selectable-list__label\">{{ item.label }}</span>\n            <span\n              v-if=\"item.description\"\n              class=\"t-selectable-list__description\"\n            >\n              {{ item.description }}\n            </span>\n          </span>\n\n          <span\n            v-if=\"item.meta\"\n            class=\"t-selectable-list__meta\"\n          >\n            {{ item.meta }}\n          </span>\n        </slot>\n      </button>\n    </template>\n\n    <div\n      v-else\n      class=\"t-selectable-list__empty\"\n    >\n      <slot name=\"empty\">\n        {{ emptyText }}\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TSidebar.cjs

@@ -0,0 +1,2 @@
+var e=require("./TSidebar.vue_vue_type_script_setup_true_lang.cjs").default;exports.default=e;
+//# sourceMappingURL=TSidebar.cjs.map

package/dist/components/TSidebar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSidebar.cjs","names":[],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    collapsible?: boolean;\n    size?: TSize;\n    side?: TSidebarSide;\n    sticky?: boolean;\n    bordered?: boolean;\n    width?: string;\n    collapsedWidth?: string;\n    collapseLabel?: string;\n    expandLabel?: string;\n  }>(),\n  {\n    as: 'aside',\n    collapsed: undefined,\n    defaultCollapsed: false,\n    collapsible: true,\n    size: 'md',\n    side: 'left',\n    sticky: false,\n    bordered: true,\n    width: '17.5rem',\n    collapsedWidth: '4.75rem',\n    collapseLabel: 'Collapse sidebar',\n    expandLabel: 'Expand sidebar',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:collapsed': [value: boolean];\n  'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  header?: (props: { collapsed: boolean }) => unknown;\n  default?: (props: { collapsed: boolean }) => unknown;\n  footer?: (props: { collapsed: boolean }) => unknown;\n  toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n  toRef(props, 'collapsed'),\n  props.defaultCollapsed,\n  (value) => {\n    emit('update:collapsed', value);\n    emit('collapse-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-sidebar',\n  `t-sidebar--${props.size}`,\n  `t-sidebar--${props.side}`,\n  {\n    'is-collapsed': isCollapsed.value,\n    'is-sticky': props.sticky,\n    'is-bordered': props.bordered,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    '--tree-sidebar-width': props.width,\n    '--tree-sidebar-collapsed-width': props.collapsedWidth,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst toggleCollapsed = () => {\n  if (!props.collapsible) {\n    return;\n  }\n\n  setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n  if (props.side === 'right') {\n    return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n  }\n\n  return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n  isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n  collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      class=\"t-sidebar__header\"\n    >\n      <slot\n        name=\"header\"\n        :collapsed=\"isCollapsed\"\n      />\n    </div>\n\n    <div class=\"t-sidebar__body\">\n      <slot :collapsed=\"isCollapsed\" />\n    </div>\n\n    <div\n      v-if=\"$slots.footer || collapsible\"\n      class=\"t-sidebar__footer\"\n    >\n      <slot\n        v-if=\"$slots.footer\"\n        name=\"footer\"\n        :collapsed=\"isCollapsed\"\n      />\n\n      <button\n        v-if=\"collapsible\"\n        type=\"button\"\n        class=\"t-sidebar__toggle\"\n        :aria-label=\"toggleLabel\"\n        :aria-expanded=\"!isCollapsed\"\n        @click=\"toggleCollapsed\"\n      >\n        <slot\n          name=\"toggle\"\n          :collapsed=\"isCollapsed\"\n        >\n          <component\n            :is=\"ToggleIcon\"\n            :size=\"16\"\n          />\n          <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n        </slot>\n      </button>\n    </div>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TSidebar.js

@@ -0,0 +1,7 @@
+import e from "./TSidebar.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/TSidebar.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TSidebar.js.map

package/dist/components/TSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSidebar.js","names":[],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    collapsible?: boolean;\n    size?: TSize;\n    side?: TSidebarSide;\n    sticky?: boolean;\n    bordered?: boolean;\n    width?: string;\n    collapsedWidth?: string;\n    collapseLabel?: string;\n    expandLabel?: string;\n  }>(),\n  {\n    as: 'aside',\n    collapsed: undefined,\n    defaultCollapsed: false,\n    collapsible: true,\n    size: 'md',\n    side: 'left',\n    sticky: false,\n    bordered: true,\n    width: '17.5rem',\n    collapsedWidth: '4.75rem',\n    collapseLabel: 'Collapse sidebar',\n    expandLabel: 'Expand sidebar',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:collapsed': [value: boolean];\n  'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  header?: (props: { collapsed: boolean }) => unknown;\n  default?: (props: { collapsed: boolean }) => unknown;\n  footer?: (props: { collapsed: boolean }) => unknown;\n  toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n  toRef(props, 'collapsed'),\n  props.defaultCollapsed,\n  (value) => {\n    emit('update:collapsed', value);\n    emit('collapse-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-sidebar',\n  `t-sidebar--${props.size}`,\n  `t-sidebar--${props.side}`,\n  {\n    'is-collapsed': isCollapsed.value,\n    'is-sticky': props.sticky,\n    'is-bordered': props.bordered,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    '--tree-sidebar-width': props.width,\n    '--tree-sidebar-collapsed-width': props.collapsedWidth,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst toggleCollapsed = () => {\n  if (!props.collapsible) {\n    return;\n  }\n\n  setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n  if (props.side === 'right') {\n    return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n  }\n\n  return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n  isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n  collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      class=\"t-sidebar__header\"\n    >\n      <slot\n        name=\"header\"\n        :collapsed=\"isCollapsed\"\n      />\n    </div>\n\n    <div class=\"t-sidebar__body\">\n      <slot :collapsed=\"isCollapsed\" />\n    </div>\n\n    <div\n      v-if=\"$slots.footer || collapsible\"\n      class=\"t-sidebar__footer\"\n    >\n      <slot\n        v-if=\"$slots.footer\"\n        name=\"footer\"\n        :collapsed=\"isCollapsed\"\n      />\n\n      <button\n        v-if=\"collapsible\"\n        type=\"button\"\n        class=\"t-sidebar__toggle\"\n        :aria-label=\"toggleLabel\"\n        :aria-expanded=\"!isCollapsed\"\n        @click=\"toggleCollapsed\"\n      >\n        <slot\n          name=\"toggle\"\n          :collapsed=\"isCollapsed\"\n        >\n          <component\n            :is=\"ToggleIcon\"\n            :size=\"16\"\n          />\n          <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n        </slot>\n      </button>\n    </div>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+const e=require("../composables/useControllableOpen.cjs"),t=require("./sidebar.cjs");let n=require("vue"),r=require("@treeui/icons");var i={key:0,class:`t-sidebar__header`},a={class:`t-sidebar__body`},o={key:1,class:`t-sidebar__footer`},s=[`aria-label`,`aria-expanded`],c={key:0},l=(0,n.defineComponent)({inheritAttrs:!1,__name:`TSidebar`,props:{as:{default:`aside`},collapsed:{type:Boolean,default:void 0},defaultCollapsed:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},size:{default:`md`},side:{default:`left`},sticky:{type:Boolean,default:!1},bordered:{type:Boolean,default:!0},width:{default:`17.5rem`},collapsedWidth:{default:`4.75rem`},collapseLabel:{default:`Collapse sidebar`},expandLabel:{default:`Expand sidebar`}},emits:[`update:collapsed`,`collapse-change`],setup(l,{emit:u}){let d=(0,r.getTreeIcon)(`chevron-left`),f=(0,r.getTreeIcon)(`chevron-right`),p=l,m=u,h=(0,n.useAttrs)(),{value:g,setValue:_}=e.useControllableOpen((0,n.toRef)(p,`collapsed`),p.defaultCollapsed,e=>{m(`update:collapsed`,e),m(`collapse-change`,e)}),v=(0,n.computed)(()=>[`t-sidebar`,`t-sidebar--${p.size}`,`t-sidebar--${p.side}`,{"is-collapsed":g.value,"is-sticky":p.sticky,"is-bordered":p.bordered},h.class]),y=(0,n.computed)(()=>[{"--tree-sidebar-width":p.width,"--tree-sidebar-collapsed-width":p.collapsedWidth},h.style]),b=(0,n.computed)(()=>{let{class:e,style:t,...n}=h;return n}),x=()=>{p.collapsible&&_(!g.value)},S=(0,n.computed)(()=>p.side===`right`?g.value?d:f:g.value?f:d),C=(0,n.computed)(()=>g.value?p.expandLabel:p.collapseLabel);return(0,n.provide)(t.treeSidebarInjectionKey,{collapsed:(0,n.computed)(()=>g.value)}),(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(l.as),(0,n.mergeProps)(b.value,{class:v.value,style:y.value,"data-state":(0,n.unref)(g)?`collapsed`:`expanded`}),{default:(0,n.withCtx)(()=>[e.$slots.header?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,i,[(0,n.renderSlot)(e.$slots,`header`,{collapsed:(0,n.unref)(g)})])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,a,[(0,n.renderSlot)(e.$slots,`default`,{collapsed:(0,n.unref)(g)})]),e.$slots.footer||l.collapsible?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,o,[e.$slots.footer?(0,n.renderSlot)(e.$slots,`footer`,{key:0,collapsed:(0,n.unref)(g)}):(0,n.createCommentVNode)(``,!0),l.collapsible?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:1,type:`button`,class:`t-sidebar__toggle`,"aria-label":C.value,"aria-expanded":!(0,n.unref)(g),onClick:x},[(0,n.renderSlot)(e.$slots,`toggle`,{collapsed:(0,n.unref)(g)},()=>[((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(S.value),{size:16})),(0,n.unref)(g)?(0,n.createCommentVNode)(``,!0):((0,n.openBlock)(),(0,n.createElementBlock)(`span`,c,(0,n.toDisplayString)(C.value),1))])],8,s)):(0,n.createCommentVNode)(``,!0)])):(0,n.createCommentVNode)(``,!0)]),_:3},16,[`class`,`style`,`data-state`]))}});exports.default=l;
+//# sourceMappingURL=TSidebar.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSidebar.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    collapsible?: boolean;\n    size?: TSize;\n    side?: TSidebarSide;\n    sticky?: boolean;\n    bordered?: boolean;\n    width?: string;\n    collapsedWidth?: string;\n    collapseLabel?: string;\n    expandLabel?: string;\n  }>(),\n  {\n    as: 'aside',\n    collapsed: undefined,\n    defaultCollapsed: false,\n    collapsible: true,\n    size: 'md',\n    side: 'left',\n    sticky: false,\n    bordered: true,\n    width: '17.5rem',\n    collapsedWidth: '4.75rem',\n    collapseLabel: 'Collapse sidebar',\n    expandLabel: 'Expand sidebar',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:collapsed': [value: boolean];\n  'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  header?: (props: { collapsed: boolean }) => unknown;\n  default?: (props: { collapsed: boolean }) => unknown;\n  footer?: (props: { collapsed: boolean }) => unknown;\n  toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n  toRef(props, 'collapsed'),\n  props.defaultCollapsed,\n  (value) => {\n    emit('update:collapsed', value);\n    emit('collapse-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-sidebar',\n  `t-sidebar--${props.size}`,\n  `t-sidebar--${props.side}`,\n  {\n    'is-collapsed': isCollapsed.value,\n    'is-sticky': props.sticky,\n    'is-bordered': props.bordered,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    '--tree-sidebar-width': props.width,\n    '--tree-sidebar-collapsed-width': props.collapsedWidth,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst toggleCollapsed = () => {\n  if (!props.collapsible) {\n    return;\n  }\n\n  setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n  if (props.side === 'right') {\n    return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n  }\n\n  return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n  isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n  collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      class=\"t-sidebar__header\"\n    >\n      <slot\n        name=\"header\"\n        :collapsed=\"isCollapsed\"\n      />\n    </div>\n\n    <div class=\"t-sidebar__body\">\n      <slot :collapsed=\"isCollapsed\" />\n    </div>\n\n    <div\n      v-if=\"$slots.footer || collapsible\"\n      class=\"t-sidebar__footer\"\n    >\n      <slot\n        v-if=\"$slots.footer\"\n        name=\"footer\"\n        :collapsed=\"isCollapsed\"\n      />\n\n      <button\n        v-if=\"collapsible\"\n        type=\"button\"\n        class=\"t-sidebar__toggle\"\n        :aria-label=\"toggleLabel\"\n        :aria-expanded=\"!isCollapsed\"\n        @click=\"toggleCollapsed\"\n      >\n        <slot\n          name=\"toggle\"\n          :collapsed=\"isCollapsed\"\n        >\n          <component\n            :is=\"ToggleIcon\"\n            :size=\"16\"\n          />\n          <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n        </slot>\n      </button>\n    </div>\n  </component>\n</template>\n"],"mappings":"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"}

package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,98 @@
+import { useControllableOpen as e } from "../composables/useControllableOpen.js";
+import { treeSidebarInjectionKey as t } from "./sidebar.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, openBlock as l, provide as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, toRef as m, unref as h, useAttrs as g, withCtx as _ } from "vue";
+import { getTreeIcon as v } from "@treeui/icons";
+//#region src/components/TSidebar.vue?vue&type=script&setup=true&lang.ts
+var y = {
+	key: 0,
+	class: "t-sidebar__header"
+}, b = { class: "t-sidebar__body" }, x = {
+	key: 1,
+	class: "t-sidebar__footer"
+}, S = ["aria-label", "aria-expanded"], C = { key: 0 }, w = /*@__PURE__*/ s({
+	inheritAttrs: !1,
+	__name: "TSidebar",
+	props: {
+		as: { default: "aside" },
+		collapsed: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultCollapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsible: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: "md" },
+		side: { default: "left" },
+		sticky: {
+			type: Boolean,
+			default: !1
+		},
+		bordered: {
+			type: Boolean,
+			default: !0
+		},
+		width: { default: "17.5rem" },
+		collapsedWidth: { default: "4.75rem" },
+		collapseLabel: { default: "Collapse sidebar" },
+		expandLabel: { default: "Expand sidebar" }
+	},
+	emits: ["update:collapsed", "collapse-change"],
+	setup(s, { emit: w }) {
+		let T = v("chevron-left"), E = v("chevron-right"), D = s, O = w, k = g(), { value: A, setValue: j } = e(m(D, "collapsed"), D.defaultCollapsed, (e) => {
+			O("update:collapsed", e), O("collapse-change", e);
+		}), M = n(() => [
+			"t-sidebar",
+			`t-sidebar--${D.size}`,
+			`t-sidebar--${D.side}`,
+			{
+				"is-collapsed": A.value,
+				"is-sticky": D.sticky,
+				"is-bordered": D.bordered
+			},
+			k.class
+		]), N = n(() => [{
+			"--tree-sidebar-width": D.width,
+			"--tree-sidebar-collapsed-width": D.collapsedWidth
+		}, k.style]), P = n(() => {
+			let { class: e, style: t, ...n } = k;
+			return n;
+		}), F = () => {
+			D.collapsible && j(!A.value);
+		}, I = n(() => D.side === "right" ? A.value ? T : E : A.value ? E : T), L = n(() => A.value ? D.expandLabel : D.collapseLabel);
+		return u(t, { collapsed: n(() => A.value) }), (e, t) => (l(), r(f(s.as), c(P.value, {
+			class: M.value,
+			style: N.value,
+			"data-state": h(A) ? "collapsed" : "expanded"
+		}), {
+			default: _(() => [
+				e.$slots.header ? (l(), a("div", y, [d(e.$slots, "header", { collapsed: h(A) })])) : i("", !0),
+				o("div", b, [d(e.$slots, "default", { collapsed: h(A) })]),
+				e.$slots.footer || s.collapsible ? (l(), a("div", x, [e.$slots.footer ? d(e.$slots, "footer", {
+					key: 0,
+					collapsed: h(A)
+				}) : i("", !0), s.collapsible ? (l(), a("button", {
+					key: 1,
+					type: "button",
+					class: "t-sidebar__toggle",
+					"aria-label": L.value,
+					"aria-expanded": !h(A),
+					onClick: F
+				}, [d(e.$slots, "toggle", { collapsed: h(A) }, () => [(l(), r(f(I.value), { size: 16 })), h(A) ? i("", !0) : (l(), a("span", C, p(L.value), 1))])], 8, S)) : i("", !0)])) : i("", !0)
+			]),
+			_: 3
+		}, 16, [
+			"class",
+			"style",
+			"data-state"
+		]));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=TSidebar.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSidebar.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    collapsible?: boolean;\n    size?: TSize;\n    side?: TSidebarSide;\n    sticky?: boolean;\n    bordered?: boolean;\n    width?: string;\n    collapsedWidth?: string;\n    collapseLabel?: string;\n    expandLabel?: string;\n  }>(),\n  {\n    as: 'aside',\n    collapsed: undefined,\n    defaultCollapsed: false,\n    collapsible: true,\n    size: 'md',\n    side: 'left',\n    sticky: false,\n    bordered: true,\n    width: '17.5rem',\n    collapsedWidth: '4.75rem',\n    collapseLabel: 'Collapse sidebar',\n    expandLabel: 'Expand sidebar',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:collapsed': [value: boolean];\n  'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  header?: (props: { collapsed: boolean }) => unknown;\n  default?: (props: { collapsed: boolean }) => unknown;\n  footer?: (props: { collapsed: boolean }) => unknown;\n  toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n  toRef(props, 'collapsed'),\n  props.defaultCollapsed,\n  (value) => {\n    emit('update:collapsed', value);\n    emit('collapse-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-sidebar',\n  `t-sidebar--${props.size}`,\n  `t-sidebar--${props.side}`,\n  {\n    'is-collapsed': isCollapsed.value,\n    'is-sticky': props.sticky,\n    'is-bordered': props.bordered,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    '--tree-sidebar-width': props.width,\n    '--tree-sidebar-collapsed-width': props.collapsedWidth,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst toggleCollapsed = () => {\n  if (!props.collapsible) {\n    return;\n  }\n\n  setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n  if (props.side === 'right') {\n    return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n  }\n\n  return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n  isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n  collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      class=\"t-sidebar__header\"\n    >\n      <slot\n        name=\"header\"\n        :collapsed=\"isCollapsed\"\n      />\n    </div>\n\n    <div class=\"t-sidebar__body\">\n      <slot :collapsed=\"isCollapsed\" />\n    </div>\n\n    <div\n      v-if=\"$slots.footer || collapsible\"\n      class=\"t-sidebar__footer\"\n    >\n      <slot\n        v-if=\"$slots.footer\"\n        name=\"footer\"\n        :collapsed=\"isCollapsed\"\n      />\n\n      <button\n        v-if=\"collapsible\"\n        type=\"button\"\n        class=\"t-sidebar__toggle\"\n        :aria-label=\"toggleLabel\"\n        :aria-expanded=\"!isCollapsed\"\n        @click=\"toggleCollapsed\"\n      >\n        <slot\n          name=\"toggle\"\n          :collapsed=\"isCollapsed\"\n        >\n          <component\n            :is=\"ToggleIcon\"\n            :size=\"16\"\n          />\n          <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n        </slot>\n      </button>\n    </div>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,IAAM,IAAkB,EAAY,cAAc,GAC5C,IAAmB,EAAY,eAAe,GAE9C,IAAQ,GA+BR,IAAO,GAYP,IAAQ,EAAS,GAEjB,EAAE,OAAO,GAAa,gBAAa,EACvC,EAAM,GAAO,WAAW,GACxB,EAAM,mBACL,MAAU;GAET,AADA,EAAK,oBAAoB,CAAK,GAC9B,EAAK,mBAAmB,CAAK;EAC/B,CACF,GAEM,IAAc,QAAe;GACjC;GACA,cAAc,EAAM;GACpB,cAAc,EAAM;GACpB;IACE,gBAAgB,EAAY;IAC5B,aAAa,EAAM;IACnB,eAAe,EAAM;GACvB;GACA,EAAM;EACR,CAAC,GAEK,IAAY,QAAe,CAC/B;GACE,wBAAwB,EAAM;GAC9B,kCAAkC,EAAM;EAC1C,GACA,EAAM,KACR,CAAC,GAEK,IAAY,QAAe;GAC/B,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,GAAG,MAAS;GAClD,OAAO;EACT,CAAC,GAEK,UAAwB;GACvB,EAAM,eAIX,EAAS,CAAC,EAAY,KAAK;EAC7B,GAEM,IAAa,QACb,EAAM,SAAS,UACV,EAAY,QAAQ,IAAkB,IAGxC,EAAY,QAAQ,IAAmB,CAC/C,GAEK,IAAc,QAClB,EAAY,QAAQ,EAAM,cAAc,EAAM,aAChD;SAEA,EAAQ,GAAyB,EAC/B,WAAW,QAAe,EAAY,KAAK,EAC7C,CAAC,mBAIC,EAmDY,EAlDL,EAAA,EAAE,GADT,EAEU,EAiDE,OAjDO;GAChB,OAAO,EAAA;GACP,OAAO,EAAA;GACP,cAAY,EAAA,CAAA,IAAW,cAAA;;oBAUlB;IAPEA,EAAAA,OAAO,UAAA,EAAA,GADf,EAQM,OARN,GAQM,CAJJ,EAGE,EAAA,QAAA,UAAA,EADC,WAAW,EAAA,CAAA,EAAW,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAI3B,EAEM,OAFN,GAEM,CADJ,EAAiC,EAAA,QAAA,WAAA,EAA1B,WAAW,EAAA,CAAA,EAAW,CAAA,CAAA,CAAA;IAIvBA,EAAAA,OAAO,UAAU,EAAA,eAAA,EAAA,GADzB,EA6BM,OA7BN,GA6BM,CAxBIA,EAAAA,OAAO,SADf,EAIE,EAAA,QAAA,UAAA;;KADC,WAAW,EAAA,CAAA;oBAIN,EAAA,eAAA,EAAA,GADR,EAkBS,UAAA;;KAhBP,MAAK;KACL,OAAM;KACL,cAAY,EAAA;KACZ,iBAAa,CAAG,EAAA,CAAA;KAChB,SAAO;QAER,EASO,EAAA,QAAA,UAAA,EAPJ,WAAW,EAAA,CAAA,EAAW,SAOlB,EAAA,EAAA,GALL,EAGE,EAFK,EAAA,KAAU,GAAA,EACd,MAAM,GAAE,CAAA,IAEE,EAAA,CAAA,IAA2B,EAAA,IAAA,EAAA,KAA3B,EAAA,GAAb,EAAkD,QAAA,GAAA,EAArB,EAAA,KAAW,GAAA,CAAA,EAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/TSkeleton.cjs

@@ -0,0 +1,2 @@
+var e=require("./TSkeleton.vue_vue_type_script_setup_true_lang.cjs").default;exports.default=e;
+//# sourceMappingURL=TSkeleton.cjs.map

package/dist/components/TSkeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSkeleton.cjs","names":[],"sources":["../../src/components/TSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    width?: string;\n    height?: string;\n    animation?: 'pulse' | 'wave' | 'none';\n  }>(),\n  {\n    width: '100%',\n    height: undefined,\n    animation: 'pulse',\n  },\n);\n\nconst classes = computed(() => [\n  't-skeleton',\n  props.animation !== 'none' ? `t-skeleton--${props.animation}` : '',\n]);\n\nconst style = computed(() => ({\n  width: props.width,\n  height: props.height,\n}));\n</script>\n\n<template>\n  <span\n    :class=\"classes\"\n    :style=\"style\"\n    aria-hidden=\"true\"\n  >\n    <slot />\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/TSkeleton.js

@@ -0,0 +1,7 @@
+import e from "./TSkeleton.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/TSkeleton.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TSkeleton.js.map

package/dist/components/TSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSkeleton.js","names":[],"sources":["../../src/components/TSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    width?: string;\n    height?: string;\n    animation?: 'pulse' | 'wave' | 'none';\n  }>(),\n  {\n    width: '100%',\n    height: undefined,\n    animation: 'pulse',\n  },\n);\n\nconst classes = computed(() => [\n  't-skeleton',\n  props.animation !== 'none' ? `t-skeleton--${props.animation}` : '',\n]);\n\nconst style = computed(() => ({\n  width: props.width,\n  height: props.height,\n}));\n</script>\n\n<template>\n  <span\n    :class=\"classes\"\n    :style=\"style\"\n    aria-hidden=\"true\"\n  >\n    <slot />\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/TSkeleton.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+let e=require("vue");var t=(0,e.defineComponent)({__name:`TSkeleton`,props:{width:{default:`100%`},height:{default:void 0},animation:{default:`pulse`}},setup(t){let n=t,r=(0,e.computed)(()=>[`t-skeleton`,n.animation===`none`?``:`t-skeleton--${n.animation}`]),i=(0,e.computed)(()=>({width:n.width,height:n.height}));return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{class:(0,e.normalizeClass)(r.value),style:(0,e.normalizeStyle)(i.value),"aria-hidden":`true`},[(0,e.renderSlot)(t.$slots,`default`)],6))}});exports.default=t;
+//# sourceMappingURL=TSkeleton.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TSkeleton.vue_vue_type_script_setup_true_lang.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSkeleton.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    width?: string;\n    height?: string;\n    animation?: 'pulse' | 'wave' | 'none';\n  }>(),\n  {\n    width: '100%',\n    height: undefined,\n    animation: 'pulse',\n  },\n);\n\nconst classes = computed(() => [\n  't-skeleton',\n  props.animation !== 'none' ? `t-skeleton--${props.animation}` : '',\n]);\n\nconst style = computed(() => ({\n  width: props.width,\n  height: props.height,\n}));\n</script>\n\n<template>\n  <span\n    :class=\"classes\"\n    :style=\"style\"\n    aria-hidden=\"true\"\n  >\n    <slot />\n  </span>\n</template>\n"],"mappings":"iKAGA,IAAM,EAAQ,EAaR,GAAA,EAAA,EAAA,SAAA,KAAyB,CAC7B,aACA,EAAM,YAAc,OAA4C,GAAnC,eAAe,EAAM,WACpD,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,MAAwB,CAC5B,MAAO,EAAM,MACb,OAAQ,EAAM,MAChB,EAAE,2DAUO,OAAA,CALJ,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAO,EACd,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAK,EACb,cAAY,0BAEJ,EAAA,OAAA,SAAA,CAAA,EAAA,CAAA"}

package/dist/components/TSkeleton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,25 @@
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, renderSlot as o } from "vue";
+//#region src/components/TSkeleton.vue?vue&type=script&setup=true&lang.ts
+var s = /*@__PURE__*/ n({
+	__name: "TSkeleton",
+	props: {
+		width: { default: "100%" },
+		height: { default: void 0 },
+		animation: { default: "pulse" }
+	},
+	setup(n) {
+		let s = n, c = e(() => ["t-skeleton", s.animation === "none" ? "" : `t-skeleton--${s.animation}`]), l = e(() => ({
+			width: s.width,
+			height: s.height
+		}));
+		return (e, n) => (a(), t("span", {
+			class: r(c.value),
+			style: i(l.value),
+			"aria-hidden": "true"
+		}, [o(e.$slots, "default")], 6));
+	}
+});
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=TSkeleton.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/TSkeleton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSkeleton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    width?: string;\n    height?: string;\n    animation?: 'pulse' | 'wave' | 'none';\n  }>(),\n  {\n    width: '100%',\n    height: undefined,\n    animation: 'pulse',\n  },\n);\n\nconst classes = computed(() => [\n  't-skeleton',\n  props.animation !== 'none' ? `t-skeleton--${props.animation}` : '',\n]);\n\nconst style = computed(() => ({\n  width: props.width,\n  height: props.height,\n}));\n</script>\n\n<template>\n  <span\n    :class=\"classes\"\n    :style=\"style\"\n    aria-hidden=\"true\"\n  >\n    <slot />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;EAGA,IAAM,IAAQ,GAaR,IAAU,QAAe,CAC7B,cACA,EAAM,cAAc,SAA4C,KAAnC,eAAe,EAAM,WACpD,CAAC,GAEK,IAAQ,SAAgB;GAC5B,OAAO,EAAM;GACb,QAAQ,EAAM;EAChB,EAAE;yBAIA,EAMO,QAAA;GALJ,OAAK,EAAE,EAAA,KAAO;GACd,OAAK,EAAE,EAAA,KAAK;GACb,eAAY;MAEZ,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/components/TSpinner.cjs

@@ -0,0 +1,2 @@
+var e=require("./TSpinner.vue_vue_type_script_setup_true_lang.cjs").default;exports.default=e;
+//# sourceMappingURL=TSpinner.cjs.map

package/dist/components/TSpinner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSpinner.cjs","names":[],"sources":["../../src/components/TSpinner.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TSize } from '../types/contracts';\n\nconst props = withDefaults(\n  defineProps<{\n    size?: TSize;\n    label?: string;\n  }>(),\n  {\n    size: 'md',\n    label: 'Loading',\n  },\n);\n\nconst classes = computed(() => ['t-spinner', `t-spinner--${props.size}`]);\n</script>\n\n<template>\n  <span\n    :class=\"classes\"\n    role=\"status\"\n    :aria-label=\"label\"\n  >\n    <span\n      class=\"t-spinner__ring\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"t-visually-hidden\">{{ label }}</span>\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/TSpinner.js

@@ -0,0 +1,7 @@
+import e from "./TSpinner.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/TSpinner.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TSpinner.js.map

package/dist/components/TSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSpinner.js","names":[],"sources":["../../src/components/TSpinner.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TSize } from '../types/contracts';\n\nconst props = withDefaults(\n  defineProps<{\n    size?: TSize;\n    label?: string;\n  }>(),\n  {\n    size: 'md',\n    label: 'Loading',\n  },\n);\n\nconst classes = computed(() => ['t-spinner', `t-spinner--${props.size}`]);\n</script>\n\n<template>\n  <span\n    :class=\"classes\"\n    role=\"status\"\n    :aria-label=\"label\"\n  >\n    <span\n      class=\"t-spinner__ring\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"t-visually-hidden\">{{ label }}</span>\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/TSpinner.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+let e=require("vue");var t=[`aria-label`],n={class:`t-visually-hidden`},r=(0,e.defineComponent)({__name:`TSpinner`,props:{size:{default:`md`},label:{default:`Loading`}},setup(r){let i=r,a=(0,e.computed)(()=>[`t-spinner`,`t-spinner--${i.size}`]);return(i,o)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{class:(0,e.normalizeClass)(a.value),role:`status`,"aria-label":r.label},[o[0]||=(0,e.createElementVNode)(`span`,{class:`t-spinner__ring`,"aria-hidden":`true`},null,-1),(0,e.createElementVNode)(`span`,n,(0,e.toDisplayString)(r.label),1)],10,t))}});exports.default=r;
+//# sourceMappingURL=TSpinner.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TSpinner.vue_vue_type_script_setup_true_lang.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSpinner.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TSpinner.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TSize } from '../types/contracts';\n\nconst props = withDefaults(\n  defineProps<{\n    size?: TSize;\n    label?: string;\n  }>(),\n  {\n    size: 'md',\n    label: 'Loading',\n  },\n);\n\nconst classes = computed(() => ['t-spinner', `t-spinner--${props.size}`]);\n</script>\n\n<template>\n  <span\n    :class=\"classes\"\n    role=\"status\"\n    :aria-label=\"label\"\n  >\n    <span\n      class=\"t-spinner__ring\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"t-visually-hidden\">{{ label }}</span>\n  </span>\n</template>\n"],"mappings":"kLAIA,IAAM,EAAQ,EAWR,GAAA,EAAA,EAAA,SAAA,KAAyB,CAAC,YAAa,cAAc,EAAM,MAAM,CAAC,2DAc/D,OAAA,CATJ,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAO,EACf,KAAK,SACJ,aAAY,EAAA,wCAKX,OAAA,CAFA,MAAM,kBACN,cAAY,0CAEoC,OAAlD,GAAA,EAAA,EAAA,gBAAA,CAAmC,EAAA,KAAK,EAAA,CAAA,CAAA,EAAA,GAAA,CAAA"}

package/dist/components/TSpinner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, toDisplayString as o } from "vue";
+//#region src/components/TSpinner.vue?vue&type=script&setup=true&lang.ts
+var s = ["aria-label"], c = { class: "t-visually-hidden" }, l = /*@__PURE__*/ r({
+	__name: "TSpinner",
+	props: {
+		size: { default: "md" },
+		label: { default: "Loading" }
+	},
+	setup(r) {
+		let l = r, u = e(() => ["t-spinner", `t-spinner--${l.size}`]);
+		return (e, l) => (a(), t("span", {
+			class: i(u.value),
+			role: "status",
+			"aria-label": r.label
+		}, [l[0] ||= n("span", {
+			class: "t-spinner__ring",
+			"aria-hidden": "true"
+		}, null, -1), n("span", c, o(r.label), 1)], 10, s));
+	}
+});
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=TSpinner.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/TSpinner.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSpinner.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TSpinner.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TSize } from '../types/contracts';\n\nconst props = withDefaults(\n  defineProps<{\n    size?: TSize;\n    label?: string;\n  }>(),\n  {\n    size: 'md',\n    label: 'Loading',\n  },\n);\n\nconst classes = computed(() => ['t-spinner', `t-spinner--${props.size}`]);\n</script>\n\n<template>\n  <span\n    :class=\"classes\"\n    role=\"status\"\n    :aria-label=\"label\"\n  >\n    <span\n      class=\"t-spinner__ring\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"t-visually-hidden\">{{ label }}</span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;EAIA,IAAM,IAAQ,GAWR,IAAU,QAAe,CAAC,aAAa,cAAc,EAAM,MAAM,CAAC;yBAItE,EAUO,QAAA;GATJ,OAAK,EAAE,EAAA,KAAO;GACf,MAAK;GACJ,cAAY,EAAA;eAEb,EAGE,QAAA;GAFA,OAAM;GACN,eAAY;gBAEd,EAAkD,QAAlD,GAAkD,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/TStack.cjs

@@ -0,0 +1,2 @@
+var e=require("./TStack.vue_vue_type_script_setup_true_lang.cjs").default;exports.default=e;
+//# sourceMappingURL=TStack.cjs.map

package/dist/components/TStack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TStack.cjs","names":[],"sources":["../../src/components/TStack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst _treeStackDirections = ['vertical', 'horizontal'] as const;\n\nexport type TStackDirection = (typeof _treeStackDirections)[number];\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    direction?: TStackDirection;\n    gap?: string;\n    align?: string;\n    justify?: string;\n    wrap?: boolean;\n    reverse?: boolean;\n  }>(),\n  {\n    as: 'div',\n    direction: 'vertical',\n    gap: 'var(--tree-space-4)',\n    align: 'stretch',\n    justify: 'flex-start',\n    wrap: false,\n    reverse: false,\n  },\n);\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-stack',\n  `t-stack--${props.direction}`,\n  {\n    'is-wrapping': props.wrap,\n    'is-reversed': props.reverse,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    gap: props.gap,\n    alignItems: props.align,\n    justifyContent: props.justify,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <slot />\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TStack.js

@@ -0,0 +1,7 @@
+import e from "./TStack.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/TStack.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TStack.js.map

package/dist/components/TStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TStack.js","names":[],"sources":["../../src/components/TStack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst _treeStackDirections = ['vertical', 'horizontal'] as const;\n\nexport type TStackDirection = (typeof _treeStackDirections)[number];\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    direction?: TStackDirection;\n    gap?: string;\n    align?: string;\n    justify?: string;\n    wrap?: boolean;\n    reverse?: boolean;\n  }>(),\n  {\n    as: 'div',\n    direction: 'vertical',\n    gap: 'var(--tree-space-4)',\n    align: 'stretch',\n    justify: 'flex-start',\n    wrap: false,\n    reverse: false,\n  },\n);\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-stack',\n  `t-stack--${props.direction}`,\n  {\n    'is-wrapping': props.wrap,\n    'is-reversed': props.reverse,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    gap: props.gap,\n    alignItems: props.align,\n    justifyContent: props.justify,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <slot />\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TStack.vue.d.ts

@@ -21,8 +21,8 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     reverse: boolean;
     as: string;
-    gap: string;
     align: string;
+    gap: string;
     justify: string;
     wrap: boolean;
     direction: TStackDirection;

package/dist/components/TStack.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TStack.vue.d.ts","sourceRoot":"","sources":["../../src/components/TStack.vue"],"names":[],"mappings":"AA6EA,QAAA,MAAM,oBAAoB,qCAAsC,CAAC;AAEjE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAmDJ,iBAAS,cAAc;WAkCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAxGP,OAAO;QANZ,MAAM;SAEL,MAAM;WACJ,MAAM;aACJ,MAAM;UACT,OAAO;eAJF,eAAe;6EAoH7B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"TStack.vue.d.ts","sourceRoot":"","sources":["../../src/components/TStack.vue"],"names":[],"mappings":"AA6EA,QAAA,MAAM,oBAAoB,qCAAsC,CAAC;AAEjE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAmDJ,iBAAS,cAAc;WAkCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAxGP,OAAO;QANZ,MAAM;WAGH,MAAM;SADR,MAAM;aAEF,MAAM;UACT,OAAO;eAJF,eAAe;6EAoH7B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/TStack.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+let e=require("vue");var t=(0,e.defineComponent)({inheritAttrs:!1,__name:`TStack`,props:{as:{default:`div`},direction:{default:`vertical`},gap:{default:`var(--tree-space-4)`},align:{default:`stretch`},justify:{default:`flex-start`},wrap:{type:Boolean,default:!1},reverse:{type:Boolean,default:!1}},setup(t){let n=t,r=(0,e.useAttrs)(),i=(0,e.computed)(()=>[`t-stack`,`t-stack--${n.direction}`,{"is-wrapping":n.wrap,"is-reversed":n.reverse},r.class]),a=(0,e.computed)(()=>[{gap:n.gap,alignItems:n.align,justifyContent:n.justify},r.style]),o=(0,e.computed)(()=>{let{class:e,style:t,...n}=r;return n});return(n,r)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.as),(0,e.mergeProps)(o.value,{class:i.value,style:a.value}),{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,`default`)]),_:3},16,[`class`,`style`]))}});exports.default=t;
+//# sourceMappingURL=TStack.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TStack.vue_vue_type_script_setup_true_lang.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TStack.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TStack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst _treeStackDirections = ['vertical', 'horizontal'] as const;\n\nexport type TStackDirection = (typeof _treeStackDirections)[number];\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    direction?: TStackDirection;\n    gap?: string;\n    align?: string;\n    justify?: string;\n    wrap?: boolean;\n    reverse?: boolean;\n  }>(),\n  {\n    as: 'div',\n    direction: 'vertical',\n    gap: 'var(--tree-space-4)',\n    align: 'stretch',\n    justify: 'flex-start',\n    wrap: false,\n    reverse: false,\n  },\n);\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-stack',\n  `t-stack--${props.direction}`,\n  {\n    'is-wrapping': props.wrap,\n    'is-reversed': props.reverse,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n  {\n    gap: props.gap,\n    alignItems: props.align,\n    justifyContent: props.justify,\n  },\n  attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <slot />\n  </component>\n</template>\n"],"mappings":"mTAWA,IAAM,EAAQ,EAqBR,GAAA,EAAA,EAAA,SAAA,CAAiB,EAEjB,GAAA,EAAA,EAAA,SAAA,KAA6B,CACjC,UACA,YAAY,EAAM,YAClB,CACE,cAAe,EAAM,KACrB,cAAe,EAAM,OACvB,EACA,EAAM,KACR,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA2B,CAC/B,CACE,IAAK,EAAM,IACX,WAAY,EAAM,MAClB,eAAgB,EAAM,OACxB,EACA,EAAM,KACR,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA2B,CAC/B,GAAM,CAAE,MAAO,EAAQ,MAAO,EAAQ,GAAG,GAAS,EAClD,OAAO,CACT,CAAC,kFAKQ,EAAA,EAAE,GAAA,EAAA,EAAA,WAAA,CACC,EAKE,MALO,CAChB,MAAO,EAAA,MACP,MAAO,EAAA,mCAEA,EAAA,EAAA,EAAA,WAAA,CAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}

package/dist/components/TStack.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,50 @@
+import { computed as e, createBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, resolveDynamicComponent as o, useAttrs as s, withCtx as c } from "vue";
+//#region src/components/TStack.vue?vue&type=script&setup=true&lang.ts
+var l = /*@__PURE__*/ n({
+	inheritAttrs: !1,
+	__name: "TStack",
+	props: {
+		as: { default: "div" },
+		direction: { default: "vertical" },
+		gap: { default: "var(--tree-space-4)" },
+		align: { default: "stretch" },
+		justify: { default: "flex-start" },
+		wrap: {
+			type: Boolean,
+			default: !1
+		},
+		reverse: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(n) {
+		let l = n, u = s(), d = e(() => [
+			"t-stack",
+			`t-stack--${l.direction}`,
+			{
+				"is-wrapping": l.wrap,
+				"is-reversed": l.reverse
+			},
+			u.class
+		]), f = e(() => [{
+			gap: l.gap,
+			alignItems: l.align,
+			justifyContent: l.justify
+		}, u.style]), p = e(() => {
+			let { class: e, style: t, ...n } = u;
+			return n;
+		});
+		return (e, s) => (i(), t(o(n.as), r(p.value, {
+			class: d.value,
+			style: f.value
+		}), {
+			default: c(() => [a(e.$slots, "default")]),
+			_: 3
+		}, 16, ["class", "style"]));
+	}
+});
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=TStack.vue_vue_type_script_setup_true_lang.js.map