@auronui/vue 1.1.1 → 1.2.1

package/dist/composables/usePagination.js

@@ -0,0 +1,54 @@
+import { computed, ref } from "vue";
+//#region src/composables/usePagination.ts
+/**
+* Manages pagination state for the Pagination component.
+*
+* @example
+* ```ts
+* const pagination = usePagination({ totalItems: 200, pageSize: 20 })
+* ```
+* ```html
+* <Pagination
+*   :page="pagination.page"
+*   :total-items="pagination.totalItems"
+*   :items-per-page="pagination.pageSize"
+*   @update:page="pagination.onPageChange"
+* />
+* ```
+*/
+function usePagination(options = {}) {
+	const page = ref(options.defaultPage ?? 1);
+	const pageSize = ref(options.pageSize ?? 10);
+	const totalItems = ref(options.totalItems ?? 0);
+	const totalPages = computed(() => Math.max(1, Math.ceil(totalItems.value / pageSize.value)));
+	const isFirst = computed(() => page.value <= 1);
+	const isLast = computed(() => page.value >= totalPages.value);
+	function goToPage(p) {
+		page.value = Math.max(1, Math.min(p, totalPages.value));
+	}
+	function nextPage() {
+		if (!isLast.value) goToPage(page.value + 1);
+	}
+	function prevPage() {
+		if (!isFirst.value) goToPage(page.value - 1);
+	}
+	function onPageChange(p) {
+		goToPage(p);
+	}
+	return {
+		page,
+		pageSize,
+		totalItems,
+		totalPages,
+		isFirst,
+		isLast,
+		goToPage,
+		nextPage,
+		prevPage,
+		onPageChange
+	};
+}
+//#endregion
+export { usePagination };
+
+//# sourceMappingURL=usePagination.js.map

package/dist/composables/usePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.js","names":[],"sources":["../../src/composables/usePagination.ts"],"sourcesContent":["import { ref, computed, type Ref, type ComputedRef } from 'vue'\n\nexport interface UsePaginationOptions {\n  /** Total number of items across all pages. */\n  totalItems?: number\n  /** Number of items per page. Defaults to 10. */\n  pageSize?: number\n  /** Initial page for uncontrolled usage. Defaults to 1. */\n  defaultPage?: number\n}\n\nexport interface UsePaginationReturn {\n  /** Reactive current page number (1-based). */\n  page: Ref<number>\n  /** Reactive number of items per page. */\n  pageSize: Ref<number>\n  /** Reactive total item count. */\n  totalItems: Ref<number>\n  /** Computed total number of pages. Minimum 1. */\n  totalPages: ComputedRef<number>\n  /** Whether the current page is the first page. */\n  isFirst: ComputedRef<boolean>\n  /** Whether the current page is the last page. */\n  isLast: ComputedRef<boolean>\n  /** Navigate to a specific page number. Clamps to valid range. */\n  goToPage: (page: number) => void\n  /** Navigate to the next page. No-op on last page. */\n  nextPage: () => void\n  /** Navigate to the previous page. No-op on first page. */\n  prevPage: () => void\n  /**\n   * Pass as `@update:page` handler on the Pagination component.\n   * Keeps `page` in sync when the component navigates internally.\n   */\n  onPageChange: (page: number) => void\n}\n\n/**\n * Manages pagination state for the Pagination component.\n *\n * @example\n * ```ts\n * const pagination = usePagination({ totalItems: 200, pageSize: 20 })\n * ```\n * ```html\n * <Pagination\n *   :page=\"pagination.page\"\n *   :total-items=\"pagination.totalItems\"\n *   :items-per-page=\"pagination.pageSize\"\n *   @update:page=\"pagination.onPageChange\"\n * />\n * ```\n */\nexport function usePagination(options: UsePaginationOptions = {}): UsePaginationReturn {\n  const page = ref(options.defaultPage ?? 1)\n  const pageSize = ref(options.pageSize ?? 10)\n  const totalItems = ref(options.totalItems ?? 0)\n\n  const totalPages = computed(() =>\n    Math.max(1, Math.ceil(totalItems.value / pageSize.value))\n  )\n\n  const isFirst = computed(() => page.value <= 1)\n  const isLast = computed(() => page.value >= totalPages.value)\n\n  function goToPage(p: number): void {\n    page.value = Math.max(1, Math.min(p, totalPages.value))\n  }\n\n  function nextPage(): void {\n    if (!isLast.value) goToPage(page.value + 1)\n  }\n\n  function prevPage(): void {\n    if (!isFirst.value) goToPage(page.value - 1)\n  }\n\n  function onPageChange(p: number): void {\n    goToPage(p)\n  }\n\n  return {\n    page,\n    pageSize,\n    totalItems,\n    totalPages,\n    isFirst,\n    isLast,\n    goToPage,\n    nextPage,\n    prevPage,\n    onPageChange,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqDA,SAAgB,cAAc,UAAgC,EAAE,EAAuB;CACrF,MAAM,OAAO,IAAI,QAAQ,eAAe,EAAE;CAC1C,MAAM,WAAW,IAAI,QAAQ,YAAY,GAAG;CAC5C,MAAM,aAAa,IAAI,QAAQ,cAAc,EAAE;CAE/C,MAAM,aAAa,eACjB,KAAK,IAAI,GAAG,KAAK,KAAK,WAAW,QAAQ,SAAS,MAAM,CAAC,CAC1D;CAED,MAAM,UAAU,eAAe,KAAK,SAAS,EAAE;CAC/C,MAAM,SAAS,eAAe,KAAK,SAAS,WAAW,MAAM;CAE7D,SAAS,SAAS,GAAiB;AACjC,OAAK,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,WAAW,MAAM,CAAC;;CAGzD,SAAS,WAAiB;AACxB,MAAI,CAAC,OAAO,MAAO,UAAS,KAAK,QAAQ,EAAE;;CAG7C,SAAS,WAAiB;AACxB,MAAI,CAAC,QAAQ,MAAO,UAAS,KAAK,QAAQ,EAAE;;CAG9C,SAAS,aAAa,GAAiB;AACrC,WAAS,EAAE;;AAGb,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/composables/useRadioGroup.js

@@ -0,0 +1,38 @@
+import { ref } from "vue";
+//#region src/composables/useRadioGroup.ts
+/**
+* Manages selection state for the RadioGroup component.
+*
+* @example
+* ```ts
+* const radio = useRadioGroup({ defaultValue: 'option-a' })
+* ```
+* ```html
+* <RadioGroup :model-value="radio.value" @update:model-value="radio.onValueChange">
+*   <Radio value="option-a">Option A</Radio>
+*   <Radio value="option-b">Option B</Radio>
+* </RadioGroup>
+* ```
+*/
+function useRadioGroup(options = {}) {
+	const value = ref(options.defaultValue);
+	function setValue(v) {
+		value.value = v;
+	}
+	function clear() {
+		value.value = void 0;
+	}
+	function onValueChange(v) {
+		value.value = v;
+	}
+	return {
+		value,
+		setValue,
+		clear,
+		onValueChange
+	};
+}
+//#endregion
+export { useRadioGroup };
+
+//# sourceMappingURL=useRadioGroup.js.map

package/dist/composables/useRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRadioGroup.js","names":[],"sources":["../../src/composables/useRadioGroup.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\nexport interface UseRadioGroupOptions {\n  /** Initial selected value. */\n  defaultValue?: string\n}\n\nexport interface UseRadioGroupReturn {\n  /** Reactive selected radio value. */\n  value: Ref<string | undefined>\n  /** Set the selected value. */\n  setValue: (value: string) => void\n  /** Clear the selection. */\n  clear: () => void\n  /**\n   * Pass as `@update:model-value` handler on the RadioGroup component.\n   * Keeps `value` in sync when the component changes selection internally.\n   */\n  onValueChange: (value: string) => void\n}\n\n/**\n * Manages selection state for the RadioGroup component.\n *\n * @example\n * ```ts\n * const radio = useRadioGroup({ defaultValue: 'option-a' })\n * ```\n * ```html\n * <RadioGroup :model-value=\"radio.value\" @update:model-value=\"radio.onValueChange\">\n *   <Radio value=\"option-a\">Option A</Radio>\n *   <Radio value=\"option-b\">Option B</Radio>\n * </RadioGroup>\n * ```\n */\nexport function useRadioGroup(options: UseRadioGroupOptions = {}): UseRadioGroupReturn {\n  const value = ref<string | undefined>(options.defaultValue)\n\n  function setValue(v: string): void {\n    value.value = v\n  }\n\n  function clear(): void {\n    value.value = undefined\n  }\n\n  function onValueChange(v: string): void {\n    value.value = v\n  }\n\n  return {\n    value,\n    setValue,\n    clear,\n    onValueChange,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmCA,SAAgB,cAAc,UAAgC,EAAE,EAAuB;CACrF,MAAM,QAAQ,IAAwB,QAAQ,aAAa;CAE3D,SAAS,SAAS,GAAiB;AACjC,QAAM,QAAQ;;CAGhB,SAAS,QAAc;AACrB,QAAM,QAAQ,KAAA;;CAGhB,SAAS,cAAc,GAAiB;AACtC,QAAM,QAAQ;;AAGhB,QAAO;EACL;EACA;EACA;EACA;EACD"}

package/dist/composables/useRangeCalendar.js

@@ -0,0 +1,51 @@
+import { computed, shallowRef } from "vue";
+//#region src/composables/useRangeCalendar.ts
+/**
+* Manages selected date range state for the RangeCalendar component.
+*
+* @example
+* ```ts
+* const range = useRangeCalendar()
+* ```
+* ```html
+* <RangeCalendar v-model="range.value" />
+* ```
+*/
+function useRangeCalendar(options = {}) {
+	const value = shallowRef(options.defaultValue ?? null);
+	const start = computed(() => value.value?.start ?? null);
+	const end = computed(() => value.value?.end ?? null);
+	const isComplete = computed(() => value.value !== null && !!value.value?.start && !!value.value?.end);
+	function setRange(range) {
+		value.value = range;
+	}
+	function clearRange() {
+		value.value = null;
+	}
+	function isDisabled(date) {
+		if (options.minValue && date.compare(options.minValue) < 0) return true;
+		if (options.maxValue && date.compare(options.maxValue) > 0) return true;
+		return options.isDateDisabled?.(date) ?? false;
+	}
+	function isUnavailable(date) {
+		return options.isDateUnavailable?.(date) ?? false;
+	}
+	function onValueChange(range) {
+		value.value = range;
+	}
+	return {
+		value,
+		start,
+		end,
+		isComplete,
+		setRange,
+		clearRange,
+		isDisabled,
+		isUnavailable,
+		onValueChange
+	};
+}
+//#endregion
+export { useRangeCalendar };
+
+//# sourceMappingURL=useRangeCalendar.js.map

package/dist/composables/useRangeCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRangeCalendar.js","names":[],"sources":["../../src/composables/useRangeCalendar.ts"],"sourcesContent":["import { shallowRef, computed, type Ref, type ComputedRef } from 'vue'\nimport type { DateValue } from '@internationalized/date'\n\nexport interface DateRange {\n  start: DateValue\n  end: DateValue\n}\n\nexport interface UseRangeCalendarOptions {\n  /** Initial selected date range for uncontrolled usage. */\n  defaultValue?: DateRange | null\n  /** Minimum selectable date. */\n  minValue?: DateValue\n  /** Maximum selectable date. */\n  maxValue?: DateValue\n  /** Returns true for dates that should be disabled. */\n  isDateDisabled?: (date: DateValue) => boolean\n  /** Returns true for dates that are unavailable. */\n  isDateUnavailable?: (date: DateValue) => boolean\n}\n\nexport interface UseRangeCalendarReturn {\n  /** Reactive selected date range (null when no selection). */\n  value: Ref<DateRange | null>\n  /** Reactive start date of the selected range. */\n  start: ComputedRef<DateValue | null>\n  /** Reactive end date of the selected range. */\n  end: ComputedRef<DateValue | null>\n  /** Whether a complete range (start and end) is selected. */\n  isComplete: ComputedRef<boolean>\n  /** Set the selected date range. */\n  setRange: (range: DateRange) => void\n  /** Clear the selected range. */\n  clearRange: () => void\n  /** Returns true if the given date is disabled per the `isDateDisabled` option. */\n  isDisabled: (date: DateValue) => boolean\n  /** Returns true if the given date is unavailable per the `isDateUnavailable` option. */\n  isUnavailable: (date: DateValue) => boolean\n  /**\n   * Pass as `v-model` on the RangeCalendar component.\n   * Keeps `value` in sync when the component changes selection internally.\n   */\n  onValueChange: (range: DateRange | null) => void\n}\n\n/**\n * Manages selected date range state for the RangeCalendar component.\n *\n * @example\n * ```ts\n * const range = useRangeCalendar()\n * ```\n * ```html\n * <RangeCalendar v-model=\"range.value\" />\n * ```\n */\nexport function useRangeCalendar(options: UseRangeCalendarOptions = {}): UseRangeCalendarReturn {\n  const value = shallowRef<DateRange | null>(options.defaultValue ?? null)\n\n  const start = computed(() => value.value?.start ?? null)\n  const end = computed(() => value.value?.end ?? null)\n\n  const isComplete = computed(\n    () => value.value !== null && !!value.value?.start && !!value.value?.end\n  )\n\n  function setRange(range: DateRange): void {\n    value.value = range\n  }\n\n  function clearRange(): void {\n    value.value = null\n  }\n\n  function isDisabled(date: DateValue): boolean {\n    if (options.minValue && date.compare(options.minValue) < 0) return true\n    if (options.maxValue && date.compare(options.maxValue) > 0) return true\n    return options.isDateDisabled?.(date) ?? false\n  }\n\n  function isUnavailable(date: DateValue): boolean {\n    return options.isDateUnavailable?.(date) ?? false\n  }\n\n  function onValueChange(range: DateRange | null): void {\n    value.value = range\n  }\n\n  return {\n    value,\n    start,\n    end,\n    isComplete,\n    setRange,\n    clearRange,\n    isDisabled,\n    isUnavailable,\n    onValueChange,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAwDA,SAAgB,iBAAiB,UAAmC,EAAE,EAA0B;CAC9F,MAAM,QAAQ,WAA6B,QAAQ,gBAAgB,KAAK;CAExE,MAAM,QAAQ,eAAe,MAAM,OAAO,SAAS,KAAK;CACxD,MAAM,MAAM,eAAe,MAAM,OAAO,OAAO,KAAK;CAEpD,MAAM,aAAa,eACX,MAAM,UAAU,QAAQ,CAAC,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC,MAAM,OAAO,IACtE;CAED,SAAS,SAAS,OAAwB;AACxC,QAAM,QAAQ;;CAGhB,SAAS,aAAmB;AAC1B,QAAM,QAAQ;;CAGhB,SAAS,WAAW,MAA0B;AAC5C,MAAI,QAAQ,YAAY,KAAK,QAAQ,QAAQ,SAAS,GAAG,EAAG,QAAO;AACnE,MAAI,QAAQ,YAAY,KAAK,QAAQ,QAAQ,SAAS,GAAG,EAAG,QAAO;AACnE,SAAO,QAAQ,iBAAiB,KAAK,IAAI;;CAG3C,SAAS,cAAc,MAA0B;AAC/C,SAAO,QAAQ,oBAAoB,KAAK,IAAI;;CAG9C,SAAS,cAAc,OAA+B;AACpD,QAAM,QAAQ;;AAGhB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/composables/useSlider.js

@@ -0,0 +1,46 @@
+import { ref } from "vue";
+//#region src/composables/useSlider.ts
+/**
+* Manages value state for the Slider component.
+*
+* @example
+* ```ts
+* // Single thumb
+* const slider = useSlider({ defaultValue: 40, min: 0, max: 100 })
+*
+* // Range (two thumbs)
+* const range = useSlider({ defaultValue: [20, 80], min: 0, max: 100 })
+* ```
+* ```html
+* <Slider :model-value="slider.value" :min="slider.min" :max="slider.max" @update:model-value="slider.onValueChange" />
+* ```
+*/
+function useSlider(options = {}) {
+	const min = options.min ?? 0;
+	const max = options.max ?? 100;
+	const step = options.step ?? 1;
+	const value = ref(options.defaultValue ?? min);
+	function clamp(v) {
+		if (Array.isArray(v)) return v.map((n) => Math.min(Math.max(n, min), max));
+		return Math.min(Math.max(v, min), max);
+	}
+	function setValue(v) {
+		value.value = v;
+	}
+	function onValueChange(v) {
+		value.value = v;
+	}
+	return {
+		value,
+		min,
+		max,
+		step,
+		setValue,
+		clamp,
+		onValueChange
+	};
+}
+//#endregion
+export { useSlider };
+
+//# sourceMappingURL=useSlider.js.map

package/dist/composables/useSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSlider.js","names":[],"sources":["../../src/composables/useSlider.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\nexport type SliderValue = number | number[]\n\nexport interface UseSliderOptions {\n  /** Initial value. Use a number for a single thumb, number[] for range mode. Defaults to `min`. */\n  defaultValue?: SliderValue\n  /** Minimum allowed value. Defaults to 0. */\n  min?: number\n  /** Maximum allowed value. Defaults to 100. */\n  max?: number\n  /** Step increment. Defaults to 1. */\n  step?: number\n}\n\nexport interface UseSliderReturn {\n  /** Reactive slider value. Number in single mode, number[] in range mode. */\n  value: Ref<SliderValue>\n  /** Minimum value. */\n  min: number\n  /** Maximum value. */\n  max: number\n  /** Step increment. */\n  step: number\n  /** Set the slider value directly. */\n  setValue: (value: SliderValue) => void\n  /** Clamp a value (or array of values) to [min, max]. */\n  clamp: (value: SliderValue) => SliderValue\n  /**\n   * Pass as `@update:model-value` handler on the Slider component.\n   * Keeps `value` in sync when the component changes internally.\n   */\n  onValueChange: (value: SliderValue) => void\n}\n\n/**\n * Manages value state for the Slider component.\n *\n * @example\n * ```ts\n * // Single thumb\n * const slider = useSlider({ defaultValue: 40, min: 0, max: 100 })\n *\n * // Range (two thumbs)\n * const range = useSlider({ defaultValue: [20, 80], min: 0, max: 100 })\n * ```\n * ```html\n * <Slider :model-value=\"slider.value\" :min=\"slider.min\" :max=\"slider.max\" @update:model-value=\"slider.onValueChange\" />\n * ```\n */\nexport function useSlider(options: UseSliderOptions = {}): UseSliderReturn {\n  const min = options.min ?? 0\n  const max = options.max ?? 100\n  const step = options.step ?? 1\n\n  const value = ref<SliderValue>(options.defaultValue ?? min)\n\n  function clamp(v: SliderValue): SliderValue {\n    if (Array.isArray(v)) return v.map(n => Math.min(Math.max(n, min), max))\n    return Math.min(Math.max(v, min), max)\n  }\n\n  function setValue(v: SliderValue): void {\n    value.value = v\n  }\n\n  function onValueChange(v: SliderValue): void {\n    value.value = v\n  }\n\n  return {\n    value,\n    min,\n    max,\n    step,\n    setValue,\n    clamp,\n    onValueChange,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkDA,SAAgB,UAAU,UAA4B,EAAE,EAAmB;CACzE,MAAM,MAAM,QAAQ,OAAO;CAC3B,MAAM,MAAM,QAAQ,OAAO;CAC3B,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,QAAQ,IAAiB,QAAQ,gBAAgB,IAAI;CAE3D,SAAS,MAAM,GAA6B;AAC1C,MAAI,MAAM,QAAQ,EAAE,CAAE,QAAO,EAAE,KAAI,MAAK,KAAK,IAAI,KAAK,IAAI,GAAG,IAAI,EAAE,IAAI,CAAC;AACxE,SAAO,KAAK,IAAI,KAAK,IAAI,GAAG,IAAI,EAAE,IAAI;;CAGxC,SAAS,SAAS,GAAsB;AACtC,QAAM,QAAQ;;CAGhB,SAAS,cAAc,GAAsB;AAC3C,QAAM,QAAQ;;AAGhB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/composables/useSplitter.js

@@ -0,0 +1,39 @@
+import { ref } from "vue";
+//#region src/composables/useSplitter.ts
+/**
+* Tracks panel layout state for the SplitterGroup component.
+*
+* @example
+* ```ts
+* const splitter = useSplitter({ defaultSizes: [30, 70] })
+* ```
+* ```html
+* <SplitterGroup @layout="splitter.onLayout">
+*   <SplitterPanel :default-size="splitter.sizes[0] ?? 30" />
+*   <SplitterResizeHandle />
+*   <SplitterPanel :default-size="splitter.sizes[1] ?? 70" />
+* </SplitterGroup>
+* ```
+*/
+function useSplitter(options = {}) {
+	const sizes = ref(options.defaultSizes ? [...options.defaultSizes] : []);
+	function setSizes(next) {
+		sizes.value = [...next];
+	}
+	function resetSizes() {
+		sizes.value = options.defaultSizes ? [...options.defaultSizes] : [];
+	}
+	function onLayout(next) {
+		sizes.value = next;
+	}
+	return {
+		sizes,
+		setSizes,
+		resetSizes,
+		onLayout
+	};
+}
+//#endregion
+export { useSplitter };
+
+//# sourceMappingURL=useSplitter.js.map

package/dist/composables/useSplitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitter.js","names":[],"sources":["../../src/composables/useSplitter.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\nexport interface UseSplitterOptions {\n  /** Initial panel sizes as percentages (0–100). Should sum to 100. */\n  defaultSizes?: number[]\n}\n\nexport interface UseSplitterReturn {\n  /** Reactive array of panel sizes as percentages. */\n  sizes: Ref<number[]>\n  /** Set panel sizes directly. */\n  setSizes: (sizes: number[]) => void\n  /** Reset panel sizes to the values provided in `defaultSizes`. */\n  resetSizes: () => void\n  /**\n   * Pass as `@layout` handler on the SplitterGroup component.\n   * Keeps `sizes` in sync when the user drags the resize handle.\n   */\n  onLayout: (sizes: number[]) => void\n}\n\n/**\n * Tracks panel layout state for the SplitterGroup component.\n *\n * @example\n * ```ts\n * const splitter = useSplitter({ defaultSizes: [30, 70] })\n * ```\n * ```html\n * <SplitterGroup @layout=\"splitter.onLayout\">\n *   <SplitterPanel :default-size=\"splitter.sizes[0] ?? 30\" />\n *   <SplitterResizeHandle />\n *   <SplitterPanel :default-size=\"splitter.sizes[1] ?? 70\" />\n * </SplitterGroup>\n * ```\n */\nexport function useSplitter(options: UseSplitterOptions = {}): UseSplitterReturn {\n  const sizes = ref<number[]>(options.defaultSizes ? [...options.defaultSizes] : [])\n\n  function setSizes(next: number[]): void {\n    sizes.value = [...next]\n  }\n\n  function resetSizes(): void {\n    sizes.value = options.defaultSizes ? [...options.defaultSizes] : []\n  }\n\n  function onLayout(next: number[]): void {\n    sizes.value = next\n  }\n\n  return {\n    sizes,\n    setSizes,\n    resetSizes,\n    onLayout,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoCA,SAAgB,YAAY,UAA8B,EAAE,EAAqB;CAC/E,MAAM,QAAQ,IAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ,aAAa,GAAG,EAAE,CAAC;CAElF,SAAS,SAAS,MAAsB;AACtC,QAAM,QAAQ,CAAC,GAAG,KAAK;;CAGzB,SAAS,aAAmB;AAC1B,QAAM,QAAQ,QAAQ,eAAe,CAAC,GAAG,QAAQ,aAAa,GAAG,EAAE;;CAGrE,SAAS,SAAS,MAAsB;AACtC,QAAM,QAAQ;;AAGhB,QAAO;EACL;EACA;EACA;EACA;EACD"}

package/dist/composables/useStepper.js

@@ -0,0 +1,58 @@
+import { computed, ref } from "vue";
+//#region src/composables/useStepper.ts
+/**
+* Manages step navigation state for the Stepper component.
+*
+* @example
+* ```ts
+* const stepper = useStepper({ totalSteps: 4 })
+* ```
+* ```html
+* <Stepper :model-value="stepper.step" :total-steps="stepper.totalSteps" @update:model-value="stepper.onStepChange">
+*   ...
+* </Stepper>
+* ```
+*/
+function useStepper(options = {}) {
+	const step = ref(options.defaultStep ?? 1);
+	const totalSteps = computed(() => options.steps ? options.steps.length : options.totalSteps ?? 0);
+	const isFirst = computed(() => step.value <= 1);
+	const isLast = computed(() => totalSteps.value > 0 && step.value >= totalSteps.value);
+	function goToStep(n) {
+		const max = totalSteps.value || Infinity;
+		step.value = Math.max(1, Math.min(n, max));
+	}
+	function nextStep() {
+		if (!isLast.value) goToStep(step.value + 1);
+	}
+	function prevStep() {
+		if (!isFirst.value) goToStep(step.value - 1);
+	}
+	function reset() {
+		goToStep(1);
+	}
+	function getStepStatus(n) {
+		if (n < step.value) return "completed";
+		if (n === step.value) return "current";
+		return "pending";
+	}
+	function onStepChange(n) {
+		goToStep(n);
+	}
+	return {
+		step,
+		totalSteps,
+		isFirst,
+		isLast,
+		goToStep,
+		nextStep,
+		prevStep,
+		reset,
+		getStepStatus,
+		onStepChange
+	};
+}
+//#endregion
+export { useStepper };
+
+//# sourceMappingURL=useStepper.js.map

package/dist/composables/useStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStepper.js","names":[],"sources":["../../src/composables/useStepper.ts"],"sourcesContent":["import { ref, computed, type Ref, type ComputedRef } from 'vue'\n\nexport type StepStatus = 'completed' | 'current' | 'pending'\n\nexport interface UseStepperOptions {\n  /** Total number of steps. Ignored when `steps` array is provided. */\n  totalSteps?: number\n  /** Step items — `totalSteps` is derived from `steps.length` when provided. */\n  steps?: unknown[]\n  /** Initial step for uncontrolled usage. Defaults to 1. */\n  defaultStep?: number\n}\n\nexport interface UseStepperReturn {\n  /** Reactive current step (1-based). */\n  step: Ref<number>\n  /** Total number of steps. */\n  totalSteps: ComputedRef<number>\n  /** Whether the stepper is on the first step. */\n  isFirst: ComputedRef<boolean>\n  /** Whether the stepper is on the last step. */\n  isLast: ComputedRef<boolean>\n  /** Navigate to a specific step number. Clamps to valid range. */\n  goToStep: (step: number) => void\n  /** Advance to the next step. No-op on the last step. */\n  nextStep: () => void\n  /** Go back to the previous step. No-op on the first step. */\n  prevStep: () => void\n  /** Return to the first step. */\n  reset: () => void\n  /** Returns the display status for a given step number. */\n  getStepStatus: (step: number) => StepStatus\n  /**\n   * Pass as `@update:model-value` handler on the Stepper component.\n   * Keeps `step` in sync when the component changes step internally.\n   */\n  onStepChange: (step: number) => void\n}\n\n/**\n * Manages step navigation state for the Stepper component.\n *\n * @example\n * ```ts\n * const stepper = useStepper({ totalSteps: 4 })\n * ```\n * ```html\n * <Stepper :model-value=\"stepper.step\" :total-steps=\"stepper.totalSteps\" @update:model-value=\"stepper.onStepChange\">\n *   ...\n * </Stepper>\n * ```\n */\nexport function useStepper(options: UseStepperOptions = {}): UseStepperReturn {\n  const step = ref(options.defaultStep ?? 1)\n\n  const totalSteps = computed(() =>\n    options.steps ? options.steps.length : (options.totalSteps ?? 0)\n  )\n\n  const isFirst = computed(() => step.value <= 1)\n  const isLast = computed(() => totalSteps.value > 0 && step.value >= totalSteps.value)\n\n  function goToStep(n: number): void {\n    const max = totalSteps.value || Infinity\n    step.value = Math.max(1, Math.min(n, max))\n  }\n\n  function nextStep(): void {\n    if (!isLast.value) goToStep(step.value + 1)\n  }\n\n  function prevStep(): void {\n    if (!isFirst.value) goToStep(step.value - 1)\n  }\n\n  function reset(): void {\n    goToStep(1)\n  }\n\n  function getStepStatus(n: number): StepStatus {\n    if (n < step.value) return 'completed'\n    if (n === step.value) return 'current'\n    return 'pending'\n  }\n\n  function onStepChange(n: number): void {\n    goToStep(n)\n  }\n\n  return {\n    step,\n    totalSteps,\n    isFirst,\n    isLast,\n    goToStep,\n    nextStep,\n    prevStep,\n    reset,\n    getStepStatus,\n    onStepChange,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,SAAgB,WAAW,UAA6B,EAAE,EAAoB;CAC5E,MAAM,OAAO,IAAI,QAAQ,eAAe,EAAE;CAE1C,MAAM,aAAa,eACjB,QAAQ,QAAQ,QAAQ,MAAM,SAAU,QAAQ,cAAc,EAC/D;CAED,MAAM,UAAU,eAAe,KAAK,SAAS,EAAE;CAC/C,MAAM,SAAS,eAAe,WAAW,QAAQ,KAAK,KAAK,SAAS,WAAW,MAAM;CAErF,SAAS,SAAS,GAAiB;EACjC,MAAM,MAAM,WAAW,SAAS;AAChC,OAAK,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,CAAC;;CAG5C,SAAS,WAAiB;AACxB,MAAI,CAAC,OAAO,MAAO,UAAS,KAAK,QAAQ,EAAE;;CAG7C,SAAS,WAAiB;AACxB,MAAI,CAAC,QAAQ,MAAO,UAAS,KAAK,QAAQ,EAAE;;CAG9C,SAAS,QAAc;AACrB,WAAS,EAAE;;CAGb,SAAS,cAAc,GAAuB;AAC5C,MAAI,IAAI,KAAK,MAAO,QAAO;AAC3B,MAAI,MAAM,KAAK,MAAO,QAAO;AAC7B,SAAO;;CAGT,SAAS,aAAa,GAAiB;AACrC,WAAS,EAAE;;AAGb,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/composables/useSwatchPicker.js

@@ -0,0 +1,31 @@
+import { computed, readonly, ref } from "vue";
+//#region src/composables/useSwatchPicker.ts
+function useSwatchPicker(options = {}) {
+	const _selectedColor = ref(options.defaultValue ?? "");
+	const hasSelection = computed(() => _selectedColor.value !== "");
+	function setColor(hex) {
+		_selectedColor.value = hex;
+		options.onChange?.(hex);
+	}
+	function clearSelection() {
+		_selectedColor.value = "";
+	}
+	function isSelected(hex) {
+		return _selectedColor.value === hex;
+	}
+	function onColorChange(hex) {
+		setColor(hex);
+	}
+	return {
+		selectedColor: readonly(_selectedColor),
+		hasSelection,
+		setColor,
+		clearSelection,
+		isSelected,
+		onColorChange
+	};
+}
+//#endregion
+export { useSwatchPicker };
+
+//# sourceMappingURL=useSwatchPicker.js.map

package/dist/composables/useSwatchPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSwatchPicker.js","names":[],"sources":["../../src/composables/useSwatchPicker.ts"],"sourcesContent":["import { ref, computed, readonly, type Ref, type ComputedRef } from 'vue'\n\nexport interface UseSwatchPickerOptions {\n  /** Initial selected color as a hex string (e.g. '#ff0000'). */\n  defaultValue?: string\n  /** Fires when a swatch is selected with the new hex color. */\n  onChange?: (hex: string) => void\n}\n\nexport interface UseSwatchPickerReturn {\n  /** The currently selected color as a hex string. */\n  selectedColor: Readonly<Ref<string>>\n  /** True when a color is selected (non-empty). */\n  hasSelection: ComputedRef<boolean>\n  /** Select a color by hex string. */\n  setColor: (hex: string) => void\n  /** Clear the selection. */\n  clearSelection: () => void\n  /** Returns true if the given hex string is the currently selected color. */\n  isSelected: (hex: string) => boolean\n  /** Pass as `@update:model-value` on the ColorSwatchPicker component. */\n  onColorChange: (hex: string) => void\n}\n\nexport function useSwatchPicker(options: UseSwatchPickerOptions = {}): UseSwatchPickerReturn {\n  const _selectedColor = ref(options.defaultValue ?? '')\n\n  const hasSelection = computed(() => _selectedColor.value !== '')\n\n  function setColor(hex: string): void {\n    _selectedColor.value = hex\n    options.onChange?.(hex)\n  }\n\n  function clearSelection(): void {\n    _selectedColor.value = ''\n  }\n\n  function isSelected(hex: string): boolean {\n    return _selectedColor.value === hex\n  }\n\n  function onColorChange(hex: string): void {\n    setColor(hex)\n  }\n\n  return {\n    selectedColor: readonly(_selectedColor),\n    hasSelection,\n    setColor,\n    clearSelection,\n    isSelected,\n    onColorChange,\n  }\n}\n"],"mappings":";;AAwBA,SAAgB,gBAAgB,UAAkC,EAAE,EAAyB;CAC3F,MAAM,iBAAiB,IAAI,QAAQ,gBAAgB,GAAG;CAEtD,MAAM,eAAe,eAAe,eAAe,UAAU,GAAG;CAEhE,SAAS,SAAS,KAAmB;AACnC,iBAAe,QAAQ;AACvB,UAAQ,WAAW,IAAI;;CAGzB,SAAS,iBAAuB;AAC9B,iBAAe,QAAQ;;CAGzB,SAAS,WAAW,KAAsB;AACxC,SAAO,eAAe,UAAU;;CAGlC,SAAS,cAAc,KAAmB;AACxC,WAAS,IAAI;;AAGf,QAAO;EACL,eAAe,SAAS,eAAe;EACvC;EACA;EACA;EACA;EACA;EACD"}

package/dist/composables/useTabs.js

@@ -0,0 +1,34 @@
+import { ref } from "vue";
+//#region src/composables/useTabs.ts
+/**
+* Manages active tab state for the Tabs component.
+*
+* @example
+* ```ts
+* const tabs = useTabs({ defaultTab: 'overview' })
+* ```
+* ```html
+* <Tabs :model-value="tabs.activeTab" @update:model-value="tabs.onTabChange">
+*   <Tab value="overview">Overview</Tab>
+*   <Tab value="settings">Settings</Tab>
+* </Tabs>
+* ```
+*/
+function useTabs(options = {}) {
+	const activeTab = ref(options.defaultTab);
+	function setTab(value) {
+		activeTab.value = value;
+	}
+	function onTabChange(value) {
+		activeTab.value = value;
+	}
+	return {
+		activeTab,
+		setTab,
+		onTabChange
+	};
+}
+//#endregion
+export { useTabs };
+
+//# sourceMappingURL=useTabs.js.map

package/dist/composables/useTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabs.js","names":[],"sources":["../../src/composables/useTabs.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\nexport interface UseTabsOptions {\n  /** Initial active tab value. */\n  defaultTab?: string\n}\n\nexport interface UseTabsReturn {\n  /** Reactive active tab value. */\n  activeTab: Ref<string | undefined>\n  /** Set the active tab. */\n  setTab: (value: string) => void\n  /**\n   * Pass as `@update:model-value` handler on the Tabs component.\n   * Keeps `activeTab` in sync when the component changes tabs internally.\n   */\n  onTabChange: (value: string) => void\n}\n\n/**\n * Manages active tab state for the Tabs component.\n *\n * @example\n * ```ts\n * const tabs = useTabs({ defaultTab: 'overview' })\n * ```\n * ```html\n * <Tabs :model-value=\"tabs.activeTab\" @update:model-value=\"tabs.onTabChange\">\n *   <Tab value=\"overview\">Overview</Tab>\n *   <Tab value=\"settings\">Settings</Tab>\n * </Tabs>\n * ```\n */\nexport function useTabs(options: UseTabsOptions = {}): UseTabsReturn {\n  const activeTab = ref<string | undefined>(options.defaultTab)\n\n  function setTab(value: string): void {\n    activeTab.value = value\n  }\n\n  function onTabChange(value: string): void {\n    activeTab.value = value\n  }\n\n  return {\n    activeTab,\n    setTab,\n    onTabChange,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiCA,SAAgB,QAAQ,UAA0B,EAAE,EAAiB;CACnE,MAAM,YAAY,IAAwB,QAAQ,WAAW;CAE7D,SAAS,OAAO,OAAqB;AACnC,YAAU,QAAQ;;CAGpB,SAAS,YAAY,OAAqB;AACxC,YAAU,QAAQ;;AAGpB,QAAO;EACL;EACA;EACA;EACD"}

package/dist/composables/useTree.js

@@ -0,0 +1,88 @@
+import { ref } from "vue";
+//#region src/composables/useTree.ts
+/**
+* Manages selection and expansion state for the Tree component.
+*
+* @example
+* ```ts
+* const tree = useTree({ multiple: false, defaultExpanded: ['root'] })
+* ```
+* ```html
+* <Tree
+*   :model-value="tree.selected"
+*   :expanded="tree.expanded"
+*   @update:model-value="tree.onSelectionChange"
+*   @update:expanded="tree.onExpandedChange"
+* >
+*   ...
+* </Tree>
+* ```
+*/
+function useTree(options = {}) {
+	const multiple = options.multiple ?? false;
+	const selected = ref(options.defaultSelected ?? (multiple ? [] : void 0));
+	const expanded = ref(options.defaultExpanded ? [...options.defaultExpanded] : []);
+	function isSelected(key) {
+		if (Array.isArray(selected.value)) return selected.value.includes(key);
+		return selected.value === key;
+	}
+	function select(key) {
+		if (multiple) {
+			const current = selected.value ?? [];
+			if (!current.includes(key)) selected.value = [...current, key];
+		} else selected.value = key;
+	}
+	function deselect(key) {
+		if (multiple) selected.value = (selected.value ?? []).filter((k) => k !== key);
+		else if (selected.value === key) selected.value = void 0;
+	}
+	function toggle(key) {
+		if (isSelected(key)) deselect(key);
+		else select(key);
+	}
+	function isExpanded(key) {
+		return expanded.value.includes(key);
+	}
+	function expand(key) {
+		if (!isExpanded(key)) expanded.value = [...expanded.value, key];
+	}
+	function collapse(key) {
+		expanded.value = expanded.value.filter((k) => k !== key);
+	}
+	function toggleExpand(key) {
+		if (isExpanded(key)) collapse(key);
+		else expand(key);
+	}
+	function expandAll(keys) {
+		expanded.value = [...new Set([...expanded.value, ...keys])];
+	}
+	function collapseAll() {
+		expanded.value = [];
+	}
+	function onSelectionChange(value) {
+		selected.value = value;
+	}
+	function onExpandedChange(keys) {
+		expanded.value = keys;
+	}
+	return {
+		selected,
+		expanded,
+		isSelected,
+		select,
+		deselect,
+		toggle,
+		isExpanded,
+		expand,
+		collapse,
+		toggleExpand,
+		expandAll,
+		collapseAll,
+		onSelectionChange,
+		onExpandedChange
+	};
+}
+//#endregion
+export { useTree };
+
+//# sourceMappingURL=useTree.js.map

package/dist/composables/useTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTree.js","names":[],"sources":["../../src/composables/useTree.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\nexport type TreeValue = string | string[] | undefined\n\nexport interface UseTreeOptions {\n  /** Enable multi-selection. Defaults to false. */\n  multiple?: boolean\n  /** Initial selected node key(s). */\n  defaultSelected?: TreeValue\n  /** Initial expanded node keys. */\n  defaultExpanded?: string[]\n}\n\nexport interface UseTreeReturn {\n  /** Reactive selected node key(s). String in single mode, string[] in multiple mode. */\n  selected: Ref<TreeValue>\n  /** Reactive array of expanded node keys. */\n  expanded: Ref<string[]>\n  /** Whether a given node is currently selected. */\n  isSelected: (key: string) => boolean\n  /** Select a node. In single mode, replaces the current selection. */\n  select: (key: string) => void\n  /** Deselect a node. */\n  deselect: (key: string) => void\n  /** Toggle a node's selection state. */\n  toggle: (key: string) => void\n  /** Whether a given node is currently expanded. */\n  isExpanded: (key: string) => boolean\n  /** Expand a node. */\n  expand: (key: string) => void\n  /** Collapse a node. */\n  collapse: (key: string) => void\n  /** Toggle a node's expanded state. */\n  toggleExpand: (key: string) => void\n  /** Expand all provided node keys. */\n  expandAll: (keys: string[]) => void\n  /** Collapse all expanded nodes. */\n  collapseAll: () => void\n  /**\n   * Pass as `@update:model-value` on the Tree component.\n   * Keeps `selected` in sync when the component changes selection internally.\n   */\n  onSelectionChange: (value: TreeValue) => void\n  /**\n   * Pass as `@update:expanded` on the Tree component.\n   * Keeps `expanded` in sync when the component changes expanded state internally.\n   */\n  onExpandedChange: (keys: string[]) => void\n}\n\n/**\n * Manages selection and expansion state for the Tree component.\n *\n * @example\n * ```ts\n * const tree = useTree({ multiple: false, defaultExpanded: ['root'] })\n * ```\n * ```html\n * <Tree\n *   :model-value=\"tree.selected\"\n *   :expanded=\"tree.expanded\"\n *   @update:model-value=\"tree.onSelectionChange\"\n *   @update:expanded=\"tree.onExpandedChange\"\n * >\n *   ...\n * </Tree>\n * ```\n */\nexport function useTree(options: UseTreeOptions = {}): UseTreeReturn {\n  const multiple = options.multiple ?? false\n\n  const selected = ref<TreeValue>(\n    options.defaultSelected ?? (multiple ? [] : undefined)\n  )\n  const expanded = ref<string[]>(options.defaultExpanded ? [...options.defaultExpanded] : [])\n\n  function isSelected(key: string): boolean {\n    if (Array.isArray(selected.value)) return selected.value.includes(key)\n    return selected.value === key\n  }\n\n  function select(key: string): void {\n    if (multiple) {\n      const current = (selected.value as string[]) ?? []\n      if (!current.includes(key)) selected.value = [...current, key]\n    } else {\n      selected.value = key\n    }\n  }\n\n  function deselect(key: string): void {\n    if (multiple) {\n      selected.value = ((selected.value as string[]) ?? []).filter(k => k !== key)\n    } else if (selected.value === key) {\n      selected.value = undefined\n    }\n  }\n\n  function toggle(key: string): void {\n    if (isSelected(key)) deselect(key)\n    else select(key)\n  }\n\n  function isExpanded(key: string): boolean {\n    return expanded.value.includes(key)\n  }\n\n  function expand(key: string): void {\n    if (!isExpanded(key)) expanded.value = [...expanded.value, key]\n  }\n\n  function collapse(key: string): void {\n    expanded.value = expanded.value.filter(k => k !== key)\n  }\n\n  function toggleExpand(key: string): void {\n    if (isExpanded(key)) collapse(key)\n    else expand(key)\n  }\n\n  function expandAll(keys: string[]): void {\n    expanded.value = [...new Set([...expanded.value, ...keys])]\n  }\n\n  function collapseAll(): void {\n    expanded.value = []\n  }\n\n  function onSelectionChange(value: TreeValue): void {\n    selected.value = value\n  }\n\n  function onExpandedChange(keys: string[]): void {\n    expanded.value = keys\n  }\n\n  return {\n    selected,\n    expanded,\n    isSelected,\n    select,\n    deselect,\n    toggle,\n    isExpanded,\n    expand,\n    collapse,\n    toggleExpand,\n    expandAll,\n    collapseAll,\n    onSelectionChange,\n    onExpandedChange,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoEA,SAAgB,QAAQ,UAA0B,EAAE,EAAiB;CACnE,MAAM,WAAW,QAAQ,YAAY;CAErC,MAAM,WAAW,IACf,QAAQ,oBAAoB,WAAW,EAAE,GAAG,KAAA,GAC7C;CACD,MAAM,WAAW,IAAc,QAAQ,kBAAkB,CAAC,GAAG,QAAQ,gBAAgB,GAAG,EAAE,CAAC;CAE3F,SAAS,WAAW,KAAsB;AACxC,MAAI,MAAM,QAAQ,SAAS,MAAM,CAAE,QAAO,SAAS,MAAM,SAAS,IAAI;AACtE,SAAO,SAAS,UAAU;;CAG5B,SAAS,OAAO,KAAmB;AACjC,MAAI,UAAU;GACZ,MAAM,UAAW,SAAS,SAAsB,EAAE;AAClD,OAAI,CAAC,QAAQ,SAAS,IAAI,CAAE,UAAS,QAAQ,CAAC,GAAG,SAAS,IAAI;QAE9D,UAAS,QAAQ;;CAIrB,SAAS,SAAS,KAAmB;AACnC,MAAI,SACF,UAAS,SAAU,SAAS,SAAsB,EAAE,EAAE,QAAO,MAAK,MAAM,IAAI;WACnE,SAAS,UAAU,IAC5B,UAAS,QAAQ,KAAA;;CAIrB,SAAS,OAAO,KAAmB;AACjC,MAAI,WAAW,IAAI,CAAE,UAAS,IAAI;MAC7B,QAAO,IAAI;;CAGlB,SAAS,WAAW,KAAsB;AACxC,SAAO,SAAS,MAAM,SAAS,IAAI;;CAGrC,SAAS,OAAO,KAAmB;AACjC,MAAI,CAAC,WAAW,IAAI,CAAE,UAAS,QAAQ,CAAC,GAAG,SAAS,OAAO,IAAI;;CAGjE,SAAS,SAAS,KAAmB;AACnC,WAAS,QAAQ,SAAS,MAAM,QAAO,MAAK,MAAM,IAAI;;CAGxD,SAAS,aAAa,KAAmB;AACvC,MAAI,WAAW,IAAI,CAAE,UAAS,IAAI;MAC7B,QAAO,IAAI;;CAGlB,SAAS,UAAU,MAAsB;AACvC,WAAS,QAAQ,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,SAAS,OAAO,GAAG,KAAK,CAAC,CAAC;;CAG7D,SAAS,cAAoB;AAC3B,WAAS,QAAQ,EAAE;;CAGrB,SAAS,kBAAkB,OAAwB;AACjD,WAAS,QAAQ;;CAGnB,SAAS,iBAAiB,MAAsB;AAC9C,WAAS,QAAQ;;AAGnB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}