@auronui/vue 1.1.1 → 1.2.0

package/dist/cjs/index.cjs

@@ -249,6 +249,635 @@ function useListData(options) {
 	};
 }
 //#endregion
+//#region src/composables/useDisclosure.ts
+/**
+* Manages programmatic open/close state for overlay components.
+*
+* Wire the returned refs and handlers directly into the component:
+*
+* @example
+* ```ts
+* const modal = useDisclosure()
+* await saveData()
+* modal.open()
+* ```
+* ```html
+* <Modal :open="modal.isOpen" @update:open="modal.onOpenChange">...</Modal>
+* ```
+*/
+function useDisclosure(defaultOpen = false) {
+	const _isOpen = (0, vue.ref)(defaultOpen);
+	function open() {
+		_isOpen.value = true;
+	}
+	function close() {
+		_isOpen.value = false;
+	}
+	function toggle() {
+		_isOpen.value = !_isOpen.value;
+	}
+	function onOpenChange(value) {
+		_isOpen.value = value;
+	}
+	return {
+		isOpen: (0, vue.readonly)(_isOpen),
+		open,
+		close,
+		toggle,
+		onOpenChange
+	};
+}
+//#endregion
+//#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 = (0, vue.ref)(options.defaultPage ?? 1);
+	const pageSize = (0, vue.ref)(options.pageSize ?? 10);
+	const totalItems = (0, vue.ref)(options.totalItems ?? 0);
+	const totalPages = (0, vue.computed)(() => Math.max(1, Math.ceil(totalItems.value / pageSize.value)));
+	const isFirst = (0, vue.computed)(() => page.value <= 1);
+	const isLast = (0, vue.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
+//#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 = (0, vue.ref)(options.defaultStep ?? 1);
+	const totalSteps = (0, vue.computed)(() => options.steps ? options.steps.length : options.totalSteps ?? 0);
+	const isFirst = (0, vue.computed)(() => step.value <= 1);
+	const isLast = (0, vue.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
+//#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 = (0, vue.ref)(options.defaultTab);
+	function setTab(value) {
+		activeTab.value = value;
+	}
+	function onTabChange(value) {
+		activeTab.value = value;
+	}
+	return {
+		activeTab,
+		setTab,
+		onTabChange
+	};
+}
+//#endregion
+//#region src/composables/useAccordion.ts
+/**
+* Manages expanded item state for the Accordion component.
+*
+* @example
+* ```ts
+* const accordion = useAccordion({ type: 'single', collapsible: true })
+* ```
+* ```html
+* <Accordion :type="'single'" :model-value="accordion.expanded" @update:model-value="accordion.onValueChange">
+*   ...
+* </Accordion>
+* ```
+*/
+function useAccordion(options = {}) {
+	const type = options.type ?? "single";
+	const collapsible = options.collapsible ?? false;
+	const expanded = (0, vue.ref)(options.defaultExpanded ?? (type === "multiple" ? [] : void 0));
+	function isExpanded(key) {
+		if (type === "multiple") return expanded.value.includes(key);
+		return expanded.value === key;
+	}
+	function expand(key) {
+		if (type === "multiple") {
+			const current = expanded.value;
+			if (!current.includes(key)) expanded.value = [...current, key];
+		} else expanded.value = key;
+	}
+	function collapse(key) {
+		if (type === "multiple") expanded.value = expanded.value.filter((k) => k !== key);
+		else if (collapsible && expanded.value === key) expanded.value = void 0;
+	}
+	function toggle(key) {
+		if (isExpanded(key)) collapse(key);
+		else expand(key);
+	}
+	function collapseAll() {
+		if (type === "multiple") expanded.value = [];
+		else if (collapsible) expanded.value = void 0;
+	}
+	function onValueChange(value) {
+		expanded.value = value;
+	}
+	return {
+		expanded,
+		isExpanded,
+		expand,
+		collapse,
+		toggle,
+		collapseAll,
+		onValueChange
+	};
+}
+//#endregion
+//#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 = (0, vue.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
+//#region src/composables/useListBox.ts
+/**
+* Manages selection state for the ListBox component.
+*
+* @example
+* ```ts
+* const listBox = useListBox({ multiple: true, defaultSelected: ['apple'] })
+* ```
+* ```html
+* <ListBox :model-value="listBox.selected" @update:model-value="listBox.onSelectionChange">
+*   <ListBoxItem value="apple">Apple</ListBoxItem>
+*   <ListBoxItem value="banana">Banana</ListBoxItem>
+* </ListBox>
+* ```
+*/
+function useListBox(options = {}) {
+	const multiple = options.multiple ?? false;
+	const selected = (0, vue.ref)(options.defaultSelected ?? (multiple ? [] : void 0));
+	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 selectAll(keys) {
+		if (multiple) selected.value = [...new Set(keys)];
+	}
+	function deselectAll() {
+		selected.value = multiple ? [] : void 0;
+	}
+	function onSelectionChange(value) {
+		selected.value = value;
+	}
+	return {
+		selected,
+		isSelected,
+		select,
+		deselect,
+		toggle,
+		selectAll,
+		deselectAll,
+		onSelectionChange
+	};
+}
+//#endregion
+//#region src/composables/useCheckboxGroup.ts
+/**
+* Manages checked state for a CheckboxGroup.
+*
+* @example
+* ```ts
+* const group = useCheckboxGroup({
+*   options: ['apple', 'banana', 'cherry'],
+*   defaultValues: ['apple'],
+* })
+* ```
+* ```html
+* <CheckboxGroup :model-value="group.values" @update:model-value="group.onValueChange">
+*   <Checkbox value="apple">Apple</Checkbox>
+*   <Checkbox value="banana">Banana</Checkbox>
+*   <Checkbox value="cherry">Cherry</Checkbox>
+* </CheckboxGroup>
+* ```
+*/
+function useCheckboxGroup(options = {}) {
+	const values = (0, vue.ref)(options.defaultValues ? [...options.defaultValues] : []);
+	function isChecked(value) {
+		return values.value.includes(value);
+	}
+	function toggle(value) {
+		if (isChecked(value)) values.value = values.value.filter((v) => v !== value);
+		else values.value = [...values.value, value];
+	}
+	function checkAll(keys) {
+		values.value = [...new Set([...values.value, ...keys])];
+	}
+	function uncheckAll() {
+		values.value = [];
+	}
+	function setValues(next) {
+		values.value = [...next];
+	}
+	function onValueChange(next) {
+		values.value = [...next];
+	}
+	return {
+		values,
+		isChecked,
+		toggle,
+		checkAll,
+		uncheckAll,
+		setValues,
+		isIndeterminate: (0, vue.computed)(() => {
+			if (!options.options || options.options.length === 0) return false;
+			const count = values.value.filter((v) => options.options.includes(v)).length;
+			return count > 0 && count < options.options.length;
+		}),
+		isAllChecked: (0, vue.computed)(() => {
+			if (!options.options || options.options.length === 0) return false;
+			return options.options.every((k) => values.value.includes(k));
+		}),
+		onValueChange
+	};
+}
+//#endregion
+//#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 = (0, vue.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
+//#region src/composables/useCalendar.ts
+/**
+* Manages selected date state for the Calendar component.
+*
+* @example
+* ```ts
+* const calendar = useCalendar()
+* ```
+* ```html
+* <Calendar v-model="calendar.value" />
+* ```
+*/
+function useCalendar(options = {}) {
+	const value = (0, vue.shallowRef)(options.defaultValue);
+	const hasValue = (0, vue.computed)(() => value.value !== void 0);
+	function setValue(date) {
+		value.value = date;
+	}
+	function clear() {
+		value.value = void 0;
+	}
+	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(date) {
+		value.value = date;
+	}
+	return {
+		value,
+		hasValue,
+		setValue,
+		clear,
+		isDisabled,
+		isUnavailable,
+		onValueChange
+	};
+}
+//#endregion
+//#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 = (0, vue.shallowRef)(options.defaultValue ?? null);
+	const start = (0, vue.computed)(() => value.value?.start ?? null);
+	const end = (0, vue.computed)(() => value.value?.end ?? null);
+	const isComplete = (0, vue.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
+//#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 = (0, vue.ref)(options.defaultSelected ?? (multiple ? [] : void 0));
+	const expanded = (0, vue.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
+//#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 = (0, vue.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
 //#region src/utils/composeClassName.ts
 /**
 * Merges Tailwind CSS classes, resolving conflicts via tailwind-merge.
@@ -31694,6 +32323,120 @@ var ColorPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
+//#region src/composables/useColorPicker.ts
+/**
+* High-level composable for controlling the ColorPicker component.
+*
+* Wraps `useColorState` with computed channel accessors and format conversion helpers.
+*
+* @example
+* ```ts
+* const picker = useColorPicker({ defaultValue: '#3b82f6' })
+* console.log(picker.hue.value)        // 217
+* console.log(picker.saturation.value) // 91
+* console.log(picker.brightness.value) // 96
+* ```
+* ```html
+* <ColorPicker v-model="picker.color" />
+* ```
+*/
+function useColorPicker(options = {}) {
+	const state = useColorState({
+		defaultValue: options.defaultValue,
+		format: options.format ?? "hex",
+		onChange: options.onChange
+	});
+	function setColor(value) {
+		const parsed = typeof value === "string" ? (0, reka_ui.parseColor)(value) : value;
+		state.color.value = parsed;
+		options.onChange?.(state.toString(), parsed);
+	}
+	const hue = (0, vue.computed)(() => state.getChannel("hue"));
+	const saturation = (0, vue.computed)(() => state.getChannel("saturation"));
+	const brightness = (0, vue.computed)(() => state.getChannel("brightness"));
+	const alpha = (0, vue.computed)(() => state.getChannel("alpha"));
+	function toHex() {
+		return state.toHex();
+	}
+	function toRgb() {
+		return (0, reka_ui.colorToRgb)(state.color.value).toString();
+	}
+	function toHsl() {
+		return (0, reka_ui.colorToHsl)(state.color.value).toString();
+	}
+	function toHsb() {
+		return (0, reka_ui.colorToHsb)(state.color.value).toString();
+	}
+	function onColorChange(value) {
+		setColor(value);
+	}
+	return {
+		color: state.color,
+		setColor,
+		hue,
+		saturation,
+		brightness,
+		alpha,
+		toHex,
+		toRgb,
+		toHsl,
+		toHsb,
+		onColorChange
+	};
+}
+//#endregion
+//#region src/composables/useOTP.ts
+function useOTP(options = {}) {
+	const length = options.length ?? 6;
+	const _value = (0, vue.ref)(options.defaultValue ?? "");
+	const isComplete = (0, vue.computed)(() => _value.value.length === length);
+	function reset() {
+		_value.value = "";
+	}
+	function onValueChange(value) {
+		_value.value = value;
+		options.onChange?.(value);
+	}
+	function onOTPComplete(value) {
+		_value.value = value;
+		options.onComplete?.(value);
+	}
+	return {
+		value: (0, vue.readonly)(_value),
+		isComplete,
+		reset,
+		onValueChange,
+		onOTPComplete
+	};
+}
+//#endregion
+//#region src/composables/useSwatchPicker.ts
+function useSwatchPicker(options = {}) {
+	const _selectedColor = (0, vue.ref)(options.defaultValue ?? "");
+	const hasSelection = (0, vue.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: (0, vue.readonly)(_selectedColor),
+		hasSelection,
+		setColor,
+		clearSelection,
+		isSelected,
+		onColorChange
+	};
+}
+//#endregion
 exports.Accordion = Accordion_default;
 exports.AccordionContent = AccordionContent_default;
 exports.AccordionHeader = AccordionHeader_default;
@@ -31908,32 +32651,48 @@ exports.surfaceContextKey = surfaceContextKey;
 exports.switchGroupContextKey = switchGroupContextKey;
 exports.tableContextKey = tableContextKey;
 exports.treeContextKey = treeContextKey;
+exports.useAccordion = useAccordion;
 exports.useAutocompleteInject = useAutocompleteInject;
 exports.useAutocompleteProvide = useAutocompleteProvide;
 exports.useCSSVariable = useCSSVariable;
+exports.useCalendar = useCalendar;
+exports.useCheckboxGroup = useCheckboxGroup;
 exports.useCheckboxGroupInject = useCheckboxGroupInject;
 exports.useCheckboxGroupProvide = useCheckboxGroupProvide;
+exports.useColorPicker = useColorPicker;
 exports.useColorState = useColorState;
 exports.useComboBoxInject = useComboBoxInject;
 exports.useComboBoxProvide = useComboBoxProvide;
+exports.useDisclosure = useDisclosure;
 exports.useDropdownInject = useDropdownInject;
 exports.useDropdownProvide = useDropdownProvide;
 exports.useIsHydrated = useIsHydrated;
 exports.useIsMounted = useIsMounted;
+exports.useListBox = useListBox;
 exports.useListData = useListData;
 exports.useMeasuredHeight = useMeasuredHeight;
 exports.useMediaQuery = useMediaQuery;
+exports.useOTP = useOTP;
 exports.useOverlayState = useOverlayState;
+exports.usePagination = usePagination;
 exports.usePaginationInject = usePaginationInject;
 exports.usePaginationProvide = usePaginationProvide;
+exports.useRadioGroup = useRadioGroup;
 exports.useRadioGroupInject = useRadioGroupInject;
 exports.useRadioGroupProvide = useRadioGroupProvide;
+exports.useRangeCalendar = useRangeCalendar;
+exports.useSlider = useSlider;
+exports.useSplitter = useSplitter;
+exports.useStepper = useStepper;
 exports.useSurfaceInject = useSurfaceInject;
+exports.useSwatchPicker = useSwatchPicker;
 exports.useSwitchGroupInject = useSwitchGroupInject;
 exports.useSwitchGroupProvide = useSwitchGroupProvide;
 exports.useTableInject = useTableInject;
 exports.useTableKeyboardNav = useTableKeyboardNav;
 exports.useTableProvide = useTableProvide;
+exports.useTabs = useTabs;
 exports.useToast = useToast;
+exports.useTree = useTree;
 
 //# sourceMappingURL=index.cjs.map